monolito_djanco_poonto/node_modules/vuetify/lib/components/VSwitch/VSwitch.sass
2025-02-25 13:26:08 -03:00

192 lines
4.7 KiB
Sass

@use 'sass:selector'
@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *
@include tools.layer('components')
.v-switch
.v-label
padding-inline-start: $switch-label-margin-inline-start
.v-switch__loader
display: flex
.v-progress-circular
color: $switch-loader-color
.v-switch__track,
.v-switch__thumb
transition: none
.v-selection-control--error:not(.v-selection-control--disabled) &
background-color: $switch-error-background-color
color: $switch-error-color
.v-switch__track-true
margin-inline-end: auto
.v-selection-control:not(.v-selection-control--dirty) &
opacity: 0
.v-switch__track-false
margin-inline-start: auto
.v-selection-control--dirty &
opacity: 0
.v-switch__track
display: inline-flex
align-items: center
font-size: .5rem
padding: 0 5px
background-color: $switch-track-background
border-radius: $switch-track-radius
height: $switch-track-height
opacity: $switch-track-opacity
min-width: $switch-track-width
cursor: pointer
transition: $switch-track-transition
.v-switch--inset &
border-radius: $switch-inset-track-border-radius
font-size: .75rem
height: $switch-inset-track-height
min-width: $switch-inset-track-width
.v-switch__thumb
align-items: center
background-color: $switch-thumb-background
color: $switch-thumb-color
border-radius: $switch-thumb-radius
display: flex
font-size: .75rem
height: $switch-thumb-height
justify-content: center
width: $switch-thumb-width
pointer-events: none
transition: $switch-thumb-transition
position: relative
overflow: hidden
.v-switch:not(.v-switch--inset) &
@include tools.elevation($switch-thumb-elevation)
.v-switch.v-switch--flat:not(.v-switch--inset) &
background: $switch-thumb-flat-background
color: $switch-thumb-flat-color
@include tools.elevation(0)
.v-switch--inset &
height: $switch-inset-thumb-height
width: $switch-inset-thumb-width
transform: scale(calc($switch-inset-thumb-off-height / $switch-inset-thumb-height))
&--filled
transform: none
.v-switch--inset .v-selection-control--dirty &
transform: none
transition: .15s .05s transform settings.$decelerated-easing
.v-switch
$switch-thumb-transform: $switch-track-width * .5 - $switch-thumb-width * .5 + $switch-thumb-offset
&.v-input
flex: $switch-flex
.v-selection-control
min-height: var(--v-input-control-height)
.v-selection-control__input
border-radius: 50%
transition: $switch-control-input-transition
position: absolute
@include tools.ltr()
transform: translateX(-$switch-thumb-transform)
@include tools.rtl()
transform: translateX($switch-thumb-transform)
.v-icon
position: absolute
.v-selection-control--dirty
.v-selection-control__input
@include tools.ltr()
transform: translateX($switch-thumb-transform)
@include tools.rtl()
transform: translateX(-$switch-thumb-transform)
&.v-switch--indeterminate
.v-selection-control__input
transform: scale(.8)
.v-switch__thumb
transform: scale(.75)
box-shadow: none
&.v-switch--inset
.v-selection-control__wrapper
width: auto
&.v-input--vertical
.v-label
min-width: max-content
.v-selection-control__wrapper
transform: $switch-thumb-vertical-transform
@media (forced-colors: active)
.v-switch
.v-switch__loader
.v-progress-circular
color: currentColor
.v-switch__thumb
background-color: buttontext
.v-switch__track,
.v-switch__thumb
border: 1px solid
color: buttontext
&:not(.v-switch--loading):not(.v-input--disabled)
.v-selection-control--dirty
.v-switch__thumb
background-color: highlight
&:not(.v-input--disabled)
.v-selection-control--dirty
.v-switch__track
background-color: highlight
.v-switch__track,
.v-switch__thumb
color: highlight
&.v-switch--inset
.v-switch__track
border-width: 2px
&:not(.v-switch--loading):not(.v-input--disabled)
.v-selection-control--dirty
.v-switch__thumb
background-color: highlighttext
color: highlighttext
&.v-input--disabled
.v-switch__thumb
background-color: graytext
.v-switch__track,
.v-switch__thumb
color: graytext
&.v-switch--loading
.v-switch__thumb
background-color: canvas
&.v-switch--inset,
&.v-switch--indeterminate
.v-switch__thumb
border-width: 0