doryan/material-you-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADDED: Icon wrapper for more elegant way to placement icon in buttons

Browse Source 
TODO: Add styles for selected segmented button
DONE: Base styles for segmented buttons
This commit is contained in:
doryan04
2024-02-09 23:16:00 +04:00
committed by doryan
parent 4778ce7e37
commit dbb19057ac
15 changed files with 148 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/styles/generics.css
View File

@@ -71,9 +71,6 @@ div.m3.m3-card-action-area:active.m3-card-elevated {
div.m3.m3-card-action-area:active:not(div.m3.m3-card-action-area:active:has(span.m3.m3-ripple-domain)) > span.m3.m3-card-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
div.m3.m3-card-action-area:active > span.m3.m3-card-state-layer {
background-color: transparent;
}
div.m3.m3-card-action-area:active > span.m3.m3-ripple-domain > .m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}
@@ -449,7 +446,9 @@ button.m3.m3-fab:focus-visible.tertiary::before {
button:not(.m3-fab, .m3-icon-button) {
width: min-content;
height: min-content;
max-height: 40px;
box-sizing: border-box;
white-space: nowrap;
font-size: var(--md-sys-typescale-label-large-font-size);
font-weight: var(--md-sys-typescale-label-large-font-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
@@ -715,7 +714,6 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
div.m3.m3-segmented-buttons {
display: flex;
flex-direction: row;
outline-offset: -1px;
width: min-content;
border-radius: 20px;
}
@@ -736,6 +734,23 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child {
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:last-child {
border-radius: 0 20px 20px 0;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
position: absolute;
width: 100%;
height: 100%;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer, div.m3.m3-segmented-buttons > button.m3.m3-button-segment span.m3.m3-ripple-domain {
transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:hover > span.m3.m3-button-segment-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:is(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:active, div.m3.m3-segmented-buttons > button.m3.m3-button-segment:focus-visible) > span.m3.m3-button-segment-state-layer {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:active > span.m3.m3-ripple-domain > span.m3.ripple {
background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
}
div.m3.m3-radio {
width: 20px;