routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+175
@@ -0,0 +1,175 @@
|
||||
@layer vuetify-components {
|
||||
.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 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 2px 6px 2px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 4%, transparent);
|
||||
}
|
||||
.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 rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15));
|
||||
--v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 0%, transparent);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user