dzeio/components
1
0
Fork 0
mirror of https://github.com/dzeiocom/components.git synced 2025-06-17 04:59:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Move to css variables !

Browse Source 
Signed-off-by: Avior <f.bouillon@aptatio.com>
This commit is contained in:
Florian Bouillon
2022-10-03 17:50:46 +02:00
parent c2f6e7e055
commit 81f654e1b2
25 changed files with 450 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/Checkbox/Checkbox.module.styl
View File

@ -20,9 +20,9 @@ $backColor = #757575
width 20px
height @width
position relative
box-shadow inset 0 0 0 2px $darkGrayLight
box-shadow inset 0 0 0 2px nativeRGB(var(--gray-600))
@media (prefers-color-scheme dark)
box-shadow inset 0 0 0 2px $darkGrayDark
box-shadow inset 0 0 0 2px nativeRGB(var(--gray-400))
border-radius 4px
transition all $transition
@ -30,7 +30,7 @@ $backColor = #757575
border-radius 20px
position absolute
transition all $transition
background $main
background nativeRGB(var(--theme-color))
svg
transition $transition
@ -46,11 +46,8 @@ $backColor = #757575
opacity 0
&:checked + span
background $infoLight
box-shadow inset 0 0 0 2px $infoLight
@media (prefers-color-scheme dark)
box-shadow inset 0 0 0 2px $infoDark
background $infoDark
background nativeRGB(var(--theme-500))
box-shadow inset 0 0 0 2px nativeRGB(var(--theme-500))
svg
color white
@ -59,9 +56,7 @@ $backColor = #757575
&:hover
span
box-shadow inset 0 0 0 2px $infoLight
@media (prefers-color-scheme dark)
box-shadow inset 0 0 0 2px $infoDark
box-shadow inset 0 0 0 2px nativeRGB(var(--theme-500))
.radio
span
@ -85,9 +80,7 @@ $backColor = #757575
&:hover span
box-shadow none
&::after
background $darkGrayLight
@media (prefers-color-scheme dark)
background $darkGrayDark
background nativeRGB(var(--theme-500))
span
width 24px
@ -95,19 +88,14 @@ $backColor = #757575
border-radius 20px
margin-right 10px
box-shadow none
background rgba($darkGrayLight, .3)
@media (prefers-color-scheme dark)
background rgba($darkGrayDark, .3)
background nativeRGB(var(--gray-500))
&::after
content " "
top 50%
transform translate(-50%, -50%)
left 0
background $darkGrayLight
@media (prefers-color-scheme dark)
background $darkGrayDark
background nativeRGB(var(--gray-600))
width 20px
height @width
@ -118,44 +106,8 @@ $backColor = #757575
&:checked + span
box-shadow none
background rgba($infoLight, .3)
@media (prefers-color-scheme dark)
background rgba($infoDark, .3)
background nativeRGB(var(--theme-300))
&::after
left 100%
transform translate(-50%, -50%)
background $infoLight
@media (prefers-color-scheme dark)
background $infoDark
checkBox($color)
input:checked + span
background rgba($color, .5)
box-shadow inset 0 0 0 2px $color
&::after
background $color
input:focus:checked + span
box-shadow inset 0 0 0 2px $color, 0 0 0 2px rgba($color,.3)
&.switch
input:checked + span
box-shadow none
.info
checkBox($infoLight)
@media (prefers-color-scheme dark)
checkBox($infoDark)
.success
checkBox($successLight)
@media (prefers-color-scheme dark)
checkBox($successDark)
.error
checkBox($errorLight)
@media (prefers-color-scheme dark)
checkBox($errorDark)
.warning
checkBox($warningLight)
@media (prefers-color-scheme dark)
checkBox($warningDark)
background nativeRGB(var(--theme-500))