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

ADDED: Base slider styles and disable state of segment-button

Browse Source
This commit is contained in:
doryan04
2024-02-13 23:31:16 +04:00
committed by doryan
parent 366cc1686b
commit 7109057e95
11 changed files with 101 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/styles/button-styles/segmented-button.sass
View File

@@ -30,6 +30,12 @@ div.m3.m3-segmented-buttons
& > svg > text
fill: var(--md-sys-color-on-surface)
&:disabled
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent)
& > *
opacity: 38%
&.selected
background-color: var(--md-sys-color-secondary-container)

35
src/styles/generics.css
View File

@@ -753,6 +753,12 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span {
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:disabled {
border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:disabled > * {
opacity: 38%;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected {
background-color: var(--md-sys-color-secondary-container);
}
@@ -869,6 +875,35 @@ div.m3.m3-radio svg > circle.m3-radio-state {
r: 5px;
}
input[type=range].m3.m3-slider {
height: 4px;
appearance: none;
border-radius: 2px;
background-color: var(--md-sys-color-surface-container-highest);
overflow: visible;
}
input[type=range].m3.m3-slider::-webkit-slider-container {
margin-inline: -8px;
}
input[type=range].m3.m3-slider::-webkit-slider-thumb {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
width: 20px;
aspect-ratio: 1;
appearance: none;
overflow: visible;
border-radius: 50%;
box-sizing: border-box;
background: var(--md-sys-color-primary);
}
input[type=range].m3.m3-slider::-webkit-slider-thumb::after {
width: 40px;
aspect-ratio: 1;
background-color: transparent;
}
input[type=range].m3.m3-slider::-webkit-slider-thumb:hover::after {
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
div.m3.m3-switch {
margin: 4px;
gap: 20px;

2
src/styles/generics.css.map
View File

File diff suppressed because one or more lines are too long

1
src/styles/generics.sass
View File

@@ -14,6 +14,7 @@
@import "button-styles/segmented-button"
@import "input-styles/radio"
@import "input-styles/slider"
@import "input-styles/swtich"
@import "input-styles/checkbox"
@import "input-styles/text-field"

3
src/styles/input-styles/slider.css Normal file
View File

@@ -0,0 +1,3 @@
/*# sourceMappingURL=slider.css.map */

1
src/styles/input-styles/slider.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"slider.css"}

32
src/styles/input-styles/slider.sass Normal file
View File

@@ -0,0 +1,32 @@
input[type="range"].m3.m3-slider
height: 4px
appearance: none
border-radius: 2px
background-color: var(--md-sys-color-surface-container-highest)
overflow: visible
&::-webkit-slider-container
margin-inline: -8px
&::-webkit-slider-thumb
@include elevation-1(false)
&::after
width: 40px
aspect-ratio: 1
background-color: transparent
&:hover
&::after
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
width: 20px
aspect-ratio: 1
appearance: none
overflow: visible
border-radius: 50%
box-sizing: border-box
background: var(--md-sys-color-primary)