123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183 |
- .v-switch .v-label {
- padding-inline-start: 10px;
- }
- .v-switch__loader {
- display: flex;
- }
- .v-switch__loader .v-progress-circular {
- color: rgb(var(--v-theme-surface));
- }
- .v-switch__track,
- .v-switch__thumb {
- transition: none;
- }
- .v-selection-control--error:not(.v-selection-control--disabled) .v-switch__track,
- .v-selection-control--error:not(.v-selection-control--disabled) .v-switch__thumb {
- background-color: rgb(var(--v-theme-error));
- color: rgb(var(--v-theme-on-error));
- }
- .v-switch__track-true {
- margin-inline-end: auto;
- }
- .v-selection-control:not(.v-selection-control--dirty) .v-switch__track-true {
- opacity: 0;
- }
- .v-switch__track-false {
- margin-inline-start: auto;
- }
- .v-selection-control--dirty .v-switch__track-false {
- opacity: 0;
- }
- .v-switch__track {
- display: inline-flex;
- align-items: center;
- font-size: 0.5rem;
- padding: 0 5px;
- background-color: rgb(var(--v-theme-surface-variant));
- border-radius: 9999px;
- height: 14px;
- opacity: 0.6;
- min-width: 36px;
- cursor: pointer;
- transition: 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
- }
- .v-switch--inset .v-switch__track {
- border-radius: 9999px;
- font-size: 0.75rem;
- height: 32px;
- min-width: 52px;
- }
- .v-switch__thumb {
- align-items: center;
- background-color: rgb(var(--v-theme-surface-bright));
- color: rgb(var(--v-theme-on-surface-bright));
- border-radius: 50%;
- display: flex;
- font-size: 0.75rem;
- height: 20px;
- justify-content: center;
- width: 20px;
- pointer-events: none;
- transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1), 0.2s color cubic-bezier(0.4, 0, 0.2, 1), 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
- position: relative;
- overflow: hidden;
- }
- .v-switch:not(.v-switch--inset) .v-switch__thumb {
- box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
- }
- .v-switch.v-switch--flat:not(.v-switch--inset) .v-switch__thumb {
- background: rgb(var(--v-theme-surface-variant));
- color: rgb(var(--v-theme-on-surface-variant));
- }
- .v-switch.v-switch--flat:not(.v-switch--inset) .v-switch__thumb {
- box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
- }
- .v-switch--inset .v-switch__thumb {
- height: 24px;
- width: 24px;
- transform: scale(0.6666666667);
- }
- .v-switch--inset .v-switch__thumb--filled {
- transform: none;
- }
- .v-switch--inset .v-selection-control--dirty .v-switch__thumb {
- transform: none;
- transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1);
- }
- .v-switch.v-input {
- flex: 0 1 auto;
- }
- .v-switch .v-selection-control {
- min-height: var(--v-input-control-height);
- }
- .v-switch .v-selection-control__input {
- border-radius: 50%;
- transition: 0.2s transform cubic-bezier(0.4, 0, 0.2, 1);
- position: absolute;
- }
- .v-locale--is-ltr.v-switch .v-selection-control__input, .v-locale--is-ltr .v-switch .v-selection-control__input {
- transform: translateX(-10px);
- }
- .v-locale--is-rtl.v-switch .v-selection-control__input, .v-locale--is-rtl .v-switch .v-selection-control__input {
- transform: translateX(10px);
- }
- .v-switch .v-selection-control__input .v-icon {
- position: absolute;
- }
- .v-locale--is-ltr.v-switch .v-selection-control--dirty .v-selection-control__input, .v-locale--is-ltr .v-switch .v-selection-control--dirty .v-selection-control__input {
- transform: translateX(10px);
- }
- .v-locale--is-rtl.v-switch .v-selection-control--dirty .v-selection-control__input, .v-locale--is-rtl .v-switch .v-selection-control--dirty .v-selection-control__input {
- transform: translateX(-10px);
- }
- .v-switch.v-switch--indeterminate .v-selection-control__input {
- transform: scale(0.8);
- }
- .v-switch.v-switch--indeterminate .v-switch__thumb {
- transform: scale(0.75);
- box-shadow: none;
- }
- .v-switch.v-switch--inset .v-selection-control__wrapper {
- width: auto;
- }
- .v-switch.v-input--vertical .v-label {
- min-width: max-content;
- }
- .v-switch.v-input--vertical .v-selection-control__wrapper {
- transform: rotate(-90deg);
- }
- @media (forced-colors: active) {
- .v-switch .v-switch__loader .v-progress-circular {
- color: currentColor;
- }
- .v-switch .v-switch__thumb {
- background-color: buttontext;
- }
- .v-switch .v-switch__track,
- .v-switch .v-switch__thumb {
- border: 1px solid;
- color: buttontext;
- }
- .v-switch:not(.v-switch--loading):not(.v-input--disabled) .v-selection-control--dirty .v-switch__thumb {
- background-color: highlight;
- }
- .v-switch:not(.v-input--disabled) .v-selection-control--dirty .v-switch__track {
- background-color: highlight;
- }
- .v-switch:not(.v-input--disabled) .v-selection-control--dirty .v-switch__track,
- .v-switch:not(.v-input--disabled) .v-selection-control--dirty .v-switch__thumb {
- color: highlight;
- }
- .v-switch.v-switch--inset .v-switch__track {
- border-width: 2px;
- }
- .v-switch.v-switch--inset:not(.v-switch--loading):not(.v-input--disabled) .v-selection-control--dirty .v-switch__thumb {
- background-color: highlighttext;
- color: highlighttext;
- }
- .v-switch.v-input--disabled .v-switch__thumb {
- background-color: graytext;
- }
- .v-switch.v-input--disabled .v-switch__track,
- .v-switch.v-input--disabled .v-switch__thumb {
- color: graytext;
- }
- .v-switch.v-switch--loading .v-switch__thumb {
- background-color: canvas;
- }
- .v-switch.v-switch--loading.v-switch--inset .v-switch__thumb, .v-switch.v-switch--loading.v-switch--indeterminate .v-switch__thumb {
- border-width: 0;
- }
- }
|