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

ADDED: Color variables for convenient codding styles

Browse Source
This commit is contained in:
doryan04
2024-02-26 23:17:05 +04:00
committed by doryan
parent ecb431fe72
commit fbadb3d063
21 changed files with 430 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/styles/input-styles/checkbox.sass
View File

@@ -1,3 +1,5 @@
@import '../css/colors-variables'
div.m3.m3-checkbox-container
@include m3-checkbox-container-mixin
@@ -26,27 +28,27 @@ input[type="checkbox"].m3.m3-checkbox
& ~ span.m3-checkbox-state
position: absolute
color: var(--md-sys-color-on-surface-variant)
color: $on-surface-variant
transition: color .2s cubic-bezier(0.2, 0, 0, 1)
&:is(:user-invalid:is(:checked, :indeterminate), .m3.m3-error:is(:checked, :indeterminate))
& ~ span.m3-checkbox-state
color: var(--md-sys-color-error)
color: $error
background: var(--md-sys-color-on-error)
background: $on-error
&:is(:user-invalid, .m3.m3-error):not(:checked)
& ~ span.m3-checkbox-state
color: var(--md-sys-color-error)
color: $error
&:is(:checked:is(:hover, &):not(.m3.m3-error, :disabled), :indeterminate:is(:hover, &):not(.m3.m3-error, :disabled))
& ~ span.m3-checkbox-state
color: var(--md-sys-color-primary)
color: $primary
background: var(--md-sys-color-on-primary)
background: $on-primary
&:not(:checked, :indeterminate, :disabled, :user-invalid):hover ~ span.m3-checkbox-state
color: var(--md-sys-color-on-surface)
color: $on-surface
&:disabled ~ *
&:is(:hover, &, :checked)
@@ -76,30 +78,30 @@ input[type="checkbox"].m3.m3-checkbox
&:not(:disabled)
&:is(:user-invalid:is(:hover, :indeterminate:hover), .m3.m3-error:hover)
& ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent)
background-color: color-mix(in srgb, $error 8%, transparent)
&:is(:user-invalid:is(:active, :indeterminate:active), .m3.m3-error:active) ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-error) 12%, transparent)
background-color: color-mix(in srgb, $error 12%, transparent)
& ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-error) 20%, transparent)
background-color: color-mix(in srgb, $error 20%, transparent)
&:is(:checked:hover, :indeterminate:hover) ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
background-color: color-mix(in srgb, $primary 8%, transparent)
&:is(:checked:active, :indeterminate:active) ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
background-color: color-mix(in srgb, $primary 12%, transparent)
& ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
background-color: color-mix(in srgb, $on-surface 20%, transparent)
&:hover
& ~ span.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
background-color: color-mix(in srgb, $on-surface 8%, transparent)
&:active ~ span.m3.m3-checkbox-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
background-color: color-mix(in srgb, $on-surface 12%, transparent)
& ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
background-color: color-mix(in srgb, $primary 20%, transparent)

30
src/styles/input-styles/radio.sass
View File

@@ -1,3 +1,5 @@
@import '../css/colors-variables'
div.m3.m3-radio-container
@include center(inline-flex)
@@ -30,47 +32,49 @@ div.m3.m3-radio-container
&:not(:disabled)
&:checked:hover + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
background-color: color-mix(in srgb, $primary 8%, transparent)
&:is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
background-color: color-mix(in srgb, $primary 12%, transparent)
& ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent)
background-color: color-mix(in srgb, $on-surface 20%, transparent)
&:hover
& + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
background-color: color-mix(in srgb, $on-surface 8%, transparent)
&:active + span.m3.m3-radio-state-layer
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
background-color: color-mix(in srgb, $on-surface 12%, transparent)
& ~ span.m3-ripple-domain > .m3.m3-ripple
background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent)
background-color: color-mix(in srgb, $primary 20%, transparent)
&:disabled
&:is(:not(:checked), &:checked) ~ svg
& > circle.m3-radio-outline
stroke-opacity: 38%
stroke: var(--md-sys-color-on-surface)
stroke: $on-surface
&:checked ~ svg > circle.m3-radio-state
fill-opacity: 38%
fill: var(--md-sys-color-on-surface)
fill: $on-surface
&:not(:checked) ~ svg
& > circle.m3-radio-outline
stroke: var(--md-sys-color-on-surface-variant)
stroke: $on-surface-variant
& > circle.m3-radio-state
fill: $primary
fill-opacity: 0
fill: var(--md-sys-color-primary)
&:checked ~ svg
& > circle.m3-radio-outline
stroke: var(--md-sys-color-primary)
stroke: $primary
& > circle.m3-radio-state
fill: $primary
fill-opacity: 1
fill: var(--md-sys-color-primary)
svg
margin: 0
@@ -88,7 +92,7 @@ div.m3.m3-radio-container
fill: black
fill-opacity: 0
stroke-width: 2px
stroke: var(--md-sys-color-on-surface-variant)
stroke: $on-surface-variant
&.m3-radio-state
r: 5px

57
src/styles/input-styles/slider.sass
View File

@@ -1,14 +1,17 @@
@use 'sass:math'
@import '../css/colors-variables'
@mixin input-range-thumb-mixin
@include elevation-1(false)
&:hover
&::after
content: '1'
&::after
content: '1'
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
&:hover
outline: 10px solid color-mix(in srgb, $primary 8%, transparent)
&:is(:active, :focus-visible)
outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
outline: 10px solid color-mix(in srgb, $primary 12%, transparent)
width: 20px
height: 20px
@@ -16,34 +19,45 @@
border-radius: 50%
box-sizing: border-box
outline: 10px solid transparent
background: var(--md-sys-color-primary)
background: $primary
transition: .2s cubic-bezier(0.2, 0, 0, 1)
div.m3.m3-slider-container
height: 20px
display: flex
position: relative
align-items: center
div.m3.m3-slider-label
& > input::-webkit-slider-thumb:hover + div.m3.m3-slider-label
opacity: 1
& > div.m3.m3-slider-label
@include center(inline-flex)
top: -10px
opacity: 0
width: 28px
position: absolute
pointer-events: none
height: 14px * math.sqrt(2) + 14px
&::before
top: 0
content: ""
width: 28px
rotate: 45deg
aspect-ratio: 1
position: absolute
border-radius: 14px 14px 0 14px
background-color: var(--md-sys-color-primary)
background-color: $primary
& > label.m3.m3-typography
display: inline
font-weight: 500
margin-top: -5px
position: absolute
font-size: 12px !important
color: var(--md-sys-color-on-primary)
color: $on-primary
& > datalist
display: none
@@ -52,8 +66,29 @@ input[type="range"].m3.m3-slider
margin: 0
appearance: none
border-radius: 2px
margin-inline: 8px
background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%)
background: $surface-container-highest
&:-moz-any(&)
height: 4px
&:-webkit-any(&)
background: linear-gradient(to right, $primary 0%, $surface-container-highest 0%)
&::-moz-range-track
height: 4px
overflow: hidden
border-radius: 2px
&::-moz-range-progress
height: 4px
overflow: hidden
border-radius: 2px
background-color: $primary
&::-moz-range-thumb
@include input-range-thumb-mixin
border: none
&::-webkit-slider-container
height: 4px

46
src/styles/input-styles/swtich.sass
View File

@@ -1,3 +1,5 @@
@import '../css/colors-variables'
div.m3.m3-switch
gap: 20px
margin: 4px
@@ -54,24 +56,24 @@ div.m3.m3-switch
&:not(:checked, :disabled) + svg
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-outline)
fill: $outline
&:checked:not(:disabled) + svg
& > g
transform: translate(50%, 81%)
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-on-primary)
fill: $on-primary
&:not(:disabled) + svg
& > g > text.m3.m3-icon-unchecked
fill: var(--md-sys-color-on-primary)
fill: $on-primary
& > g > text.m3.m3-icon-checked
fill: var(--md-sys-color-on-primary-container)
fill: $on-primary-container
&:checked:disabled + svg > circle.m3.m3-switch-handler
fill: var(--md-sys-color-surface)
fill: $surface
&:checked + svg > circle.m3.m3-switch-handler,
& + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler
@@ -93,33 +95,33 @@ div.m3.m3-switch
&:not(:checked):disabled + svg > circle.m3.m3-switch-handler
fill-opacity: 38%
fill: var(--md-sys-color-on-surface)
fill: $on-surface
&:hover:not(:disabled)
&:checked + svg
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-primary-container)
fill: $primary-container
& > circle.m3.m3-switch-handler-state-layer
fill: $primary
fill-opacity: 8%
fill: var(--md-sys-color-primary)
&:not(:checked) + svg
& > circle.m3.m3-switch-handler
fill: var(--md-sys-color-on-surface-variant)
fill: $on-surface-variant
& > circle.m3.m3-switch-handler-state-layer
fill-opacity: 8%
fill: var(--md-sys-color-on-surface)
fill: $on-surface
&:active:not(:disabled)
&:checked + svg > circle.m3.m3-switch-handler-state-layer
fill: $primary
fill-opacity: 12%
fill: var(--md-sys-color-primary)
&:not(:checked) + svg > circle.m3.m3-switch-handler-state-layer
fill-opacity: 12%
fill: var(--md-sys-color-on-surface)
fill: $on-surface
&:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track
rx: 16px
@@ -132,26 +134,26 @@ div.m3.m3-switch
y: 1px
&:not(:checked) + svg > rect.m3.m3-switch-track
stroke: var(--md-sys-color-outline)
fill: var(--md-sys-color-surface-container-highest)
stroke: $outline
fill: $surface-container-highest
&:checked + svg > rect.m3.m3-switch-track
fill: var(--md-sys-color-primary)
stroke: var(--md-sys-color-primary)
fill: $primary
stroke: $primary
&:disabled + svg
& > g > text.m3
fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent)
fill: color-mix(in srgb, $surface-container-highest 38%, transparent)
& > rect.m3.m3-switch-track
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent)
stroke: color-mix(in srgb, $on-surface 12%, transparent)
fill: color-mix(in srgb, $surface-variant 12%, transparent)
&:checked:disabled + svg
& > g > text.m3
transform: translateX(38.5%)
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)
fill: color-mix(in srgb, $on-surface 38%, transparent)
& > rect.m3.m3-switch-track
fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent)
fill: color-mix(in srgb, $on-surface 12%, transparent)
stroke: color-mix(in srgb, $on-surface 0%, transparent)

46
src/styles/input-styles/text-field.sass
View File

@@ -1,3 +1,5 @@
@import '../css/colors-variables'
@mixin m3-text-field-fieldset-legend
border-top-width: 0
border-style: solid
@@ -23,7 +25,7 @@ div.m3.m3-text-field
display: flex
margin: 4px 16px 2px 16px
color: var(--md-sys-color-on-surface-variant)
color: $on-surface-variant
& > label
position: absolute
@@ -48,7 +50,7 @@ div.m3.m3-text-field
position: absolute
align-items: center
justify-content: inherit
color: var(--md-sys-color-on-surface-variant)
color: $on-surface-variant
font-family: Material-Symbols-Outlined-Regular, serif
& > span.m3-text-field-state-layer
@@ -58,14 +60,14 @@ div.m3.m3-text-field
pointer-events: none
& > input, & > label
color: var(--md-sys-color-on-surface)
color: $on-surface
&:is(.filled, .outlined) > input::placeholder
color: var(--md-sys-color-on-surface-variant)
color: $on-surface-variant
&:is(.filled, .outlined) > input:focus-visible
outline: none
caret-color: var(--md-sys-color-primary)
caret-color: $primary
&:is(.filled, .outlined):has(input:disabled)
& > *, & + span.m3-text-field-supporting-text
@@ -95,8 +97,8 @@ div.m3.m3-text-field
display: inline-flex
box-sizing: border-box
border-radius: 4px 4px 0 0
background-color: var(--md-sys-color-surface-container-highest)
box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant)
background-color: $surface-container-highest
box-shadow: inset 0 -1px 0 $on-surface-variant
& > label.raised
@include m3-typography-mixin('body-small')
@@ -104,28 +106,28 @@ div.m3.m3-text-field
transform: translate(12px, -12px)
& > input:required:user-invalid
caret-color: var(--md-sys-color-error)
caret-color: $error
&:focus-visible
box-shadow: inset 0 -3px 0 var(--md-sys-color-error)
box-shadow: inset 0 -3px 0 $error
&
box-shadow: inset 0 -1px 0 var(--md-sys-color-error)
box-shadow: inset 0 -1px 0 $error
&:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
&:has(input:required:user-invalid) + span.m3-text-field-supporting-text
color: var(--md-sys-color-error)
color: $error
& > input:focus-visible
outline-offset: 3px
box-shadow: inset 0 -3px 0 var(--md-sys-color-primary)
box-shadow: inset 0 -3px 0 $primary
& > input:focus-visible + label
color: var(--md-sys-color-primary)
color: $primary
&:hover
& > input:not(:disabled) ~ span.m3-text-field-state-layer
transition: .2s cubic-bezier(0.2, 0, 0, 1)
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)
background-color: color-mix(in srgb, $on-surface 8%, transparent)
&.outlined
& > fieldset
@@ -135,7 +137,7 @@ div.m3.m3-text-field
pointer-events: none
padding-inline: 12px
inset: -7.5px 0px 0px 0px
border: 1px solid var(--md-sys-color-outline)
border: 1px solid $outline
transition: background-color .2s cubic-bezier(0.2, 0, 0, 1)
& > legend > span
@@ -176,7 +178,7 @@ div.m3.m3-text-field
border-radius: 4px
&:has(input:focus-visible) > fieldset
border: 3px solid var(--md-sys-color-primary)
border: 3px solid $primary
&:not(&:has(label.raised)):has(input:focus-visible) > fieldset > legend
@include m3-text-field-fieldset-legend
@@ -189,7 +191,7 @@ div.m3.m3-text-field
border-inline-width: 7.5px
& > input:focus-visible + label
color: var(--md-sys-color-primary)
color: $primary
& > label.raised, & > fieldset > *
@include m3-typography-mixin('body-small')
@@ -198,19 +200,19 @@ div.m3.m3-text-field
transform: translate(16px, -27px) !important
& > input:required:user-invalid
caret-color: var(--md-sys-color-error)
caret-color: $error
&:has(input:required:user-invalid) > *:not(input):nth-last-child(-n + 3),
&:has(input:required:user-invalid) + span.m3-text-field-supporting-text
color: var(--md-sys-color-error)
color: $error
&:has(input:required:user-invalid) > fieldset
border: 3px solid var(--md-sys-color-error)
border: 3px solid $error
&:has(input:required:user-invalid:not(:focus-visible)) > fieldset
border: 1px solid var(--md-sys-color-error)
border: 1px solid $error
&:hover
&:not(&:has(input:disabled, input:focus-visible, label.raised, input:required:user-invalid)) > fieldset
transition: .2s cubic-bezier(0.2, 0, 0, 1)
border-color: var(--md-sys-color-on-surface)
border-color: $on-surface