216 lines
4.5 KiB
Sass
216 lines
4.5 KiB
Sass
@use '/src/styles/variables.sass' as vars
|
|
@use '/src/styles/breakpoint.sass' as view
|
|
@use 'sass:color'
|
|
|
|
$toggleOffColor: rgba(126, 206, 241, 0.286)
|
|
$toggleOnColor: rgba(53, 155, 80, 0.993)
|
|
|
|
.section
|
|
display: flex
|
|
flex-direction: row
|
|
align-items: flex-start
|
|
padding: 2rem
|
|
border: vars.$componentBorder
|
|
border-radius: vars.$borderRadius
|
|
background-color: vars.$componentBackground
|
|
color: vars.$textColor
|
|
font-family: 'Inter', sans-serif
|
|
gap: 2rem
|
|
|
|
@media screen and (max-width: view.$tablet)
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
justify-content: center
|
|
padding: 2rem
|
|
border: 1px solid rgba(255, 255, 255, 0.3)
|
|
border-radius: 16px
|
|
color: #ffffff
|
|
font-family: 'Inter', sans-serif
|
|
|
|
.toggle--group
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: flex-start
|
|
align-items: flex-start
|
|
padding: 0 2rem 0 0
|
|
margin: 0
|
|
|
|
.right--side
|
|
display: flex
|
|
flex-direction: column
|
|
|
|
.slider--group
|
|
padding: 0 0 0 1rem
|
|
flex-grow: 0
|
|
|
|
@media screen and (max-width: view.$tablet)
|
|
padding: 0 2rem 0 2rem
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
.display--group
|
|
padding: 3rem 1rem 1rem 1rem
|
|
|
|
.toggle
|
|
color: white
|
|
padding: 0.25rem 0
|
|
display: flex
|
|
flex-direction: row
|
|
gap: 0.5rem
|
|
align-items: center
|
|
height: auto
|
|
|
|
&__text
|
|
font-size: 1rem
|
|
|
|
&__switch
|
|
visibility: hidden
|
|
width: 0
|
|
height: 0
|
|
|
|
&:checked + label
|
|
background-color: $toggleOnColor
|
|
transition: background-color 0.5s ease-in-out
|
|
|
|
&:checked + label:after
|
|
left: calc(100% - 6px)
|
|
transform: translateX(-70%)
|
|
|
|
.password-display
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: flex-start
|
|
align-items: flex-start
|
|
color: #ffffff
|
|
// margin-top: 20px
|
|
// border: 1px solid #ffffff
|
|
// padding: 1rem
|
|
// border-radius: 5px
|
|
// width: 30rem
|
|
|
|
&__label
|
|
font-weight: bold
|
|
margin: 1rem 0 -0.5rem 0
|
|
|
|
&__content
|
|
border: 1px solid color.adjust(vars.$background, $lightness: 20%)
|
|
background-color: color.adjust(vars.$background, $lightness: 5%)
|
|
color: color.adjust(vars.$background, $lightness: 80%)
|
|
width: 23rem
|
|
height: auto
|
|
padding: 1rem
|
|
border-radius: 5px
|
|
text-align: left
|
|
word-wrap: break-word
|
|
letter-spacing: 1px
|
|
font-size: 1rem
|
|
font-weight: 500
|
|
font-family: "Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji", vars.$fontFamily
|
|
|
|
.button--group
|
|
display: flex
|
|
flex-direction: row
|
|
justify-content: flex-start
|
|
gap: 1rem
|
|
// margin-top: 20px
|
|
// border: 1px solid #ffffff
|
|
// padding: 1rem
|
|
// border-radius: 5px
|
|
width: 30rem
|
|
margin: 1rem 0 0 0
|
|
|
|
.slider
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
user-select: none
|
|
touch-action: none
|
|
margin: 1rem 0 0 0
|
|
gap: 0.5rem
|
|
width: 41rem
|
|
cursor: pointer
|
|
|
|
&__label
|
|
display: flex
|
|
flex-direction: row
|
|
gap: 0.5rem
|
|
width: 100%
|
|
|
|
&__track
|
|
background-color: hsl(240 6% 90%)
|
|
position: relative
|
|
border-radius: 9999px
|
|
height: 8px
|
|
width: 100%
|
|
|
|
&__range
|
|
position: absolute
|
|
background-color: $toggleOnColor
|
|
border-radius: 9999px
|
|
height: 100%
|
|
|
|
&__thumb
|
|
display: block
|
|
width: 16px
|
|
height: 16px
|
|
background-color: $toggleOnColor
|
|
border-radius: 9999px
|
|
top: -4px
|
|
|
|
&:hover
|
|
box-shadow: 0 0 0 5px color.adjust($toggleOnColor, $lightness: 9%)
|
|
|
|
&:focus
|
|
outline: none
|
|
box-shadow: 0 0 0 5px color.adjust($toggleOnColor, $lightness: 9%)
|
|
|
|
@media screen and (max-width: view.$tablet)
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
justify-content: center
|
|
text-align: center
|
|
width: 100vw
|
|
|
|
.alert
|
|
border-radius: 6px
|
|
padding: 1rem 1.25rem
|
|
background-color: rgba(12, 31, 39, 0.991)
|
|
border: 1px solid color.adjust($toggleOffColor, $lightness: 2%)
|
|
color: rgba(126, 206, 241, 0.748)
|
|
font-size: 1.25rem
|
|
|
|
.alert--container
|
|
position: fixed
|
|
top: 50%
|
|
left: 50%
|
|
transform: translate(-50%, -50%)
|
|
z-index: 1000
|
|
|
|
.checkbox
|
|
display: inline-flex
|
|
align-items: center
|
|
|
|
&__control
|
|
height: 20px
|
|
width: 20px
|
|
border-radius: 6px
|
|
background-color: #e5e8ec
|
|
cursor: pointer
|
|
|
|
&__input:focus-visible + &__control
|
|
// outline: 2px solid hsl(200 98% 39%)
|
|
outline-offset: 2px
|
|
|
|
&__control[data-checked]
|
|
border-color: color.adjust($toggleOnColor, $blackness: 20%)
|
|
background-color: $toggleOnColor
|
|
color: white
|
|
|
|
&__label
|
|
display: none
|
|
margin-left: 6px
|
|
color: hsl(240 6% 10%)
|
|
font-size: 14px
|
|
user-select: none
|