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

TODO: Slider

Browse Source 
DONE: Segmented buttons
This commit is contained in:
doryan04
2024-02-12 20:11:33 +04:00
committed by doryan
parent ff00e19aeb
commit fef77fb0f9
9 changed files with 175 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/styles/generics.css
View File

@@ -443,6 +443,16 @@ button.m3.m3-fab:focus-visible.tertiary::before {
background-color: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) 12%, transparent);
}
input[type=button].test-button {
color: white;
}
input[type=button].test-button:not(:checked) {
background-color: green;
}
input[type=button].test-button:checked {
background-color: blue;
}
button:not(.m3-fab, .m3-icon-button) {
width: min-content;
height: min-content;
@@ -712,33 +722,49 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
}
div.m3.m3-segmented-buttons {
padding: 0;
height: 40px;
display: flex;
flex-direction: row;
width: min-content;
border-radius: 20px;
box-sizing: border-box;
border-collapse: collapse;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
margin: 0 -0.5px 0 -0.5px;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child {
border-radius: 20px 0 0 20px;
}
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 {
height: 40px;
border-radius: 0;
display: flex;
min-width: 108px;
width: max-content;
box-sizing: border-box;
padding-inline: 10px;
border: 1px solid var(--md-sys-color-outline);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
border-radius: 0;
background-color: transparent;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span {
color: var(--md-sys-color-on-surface);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > svg > text {
fill: var(--md-sys-color-on-surface);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(:first-child) {
margin-left: -1px;
div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected {
background-color: var(--md-sys-color-secondary-container);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child {
border-radius: 20px 0 0 20px;
div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span {
color: var(--md-sys-color-on-secondary-container);
}
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.selected > svg > text {
fill: var(--md-sys-color-on-secondary-container);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {
position: absolute;