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;
|
||||
}
|
||||
}
|
||||
}
|
||||
+1741
File diff suppressed because it is too large
Load Diff
+179
@@ -0,0 +1,179 @@
|
||||
import { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
|
||||
// Styles
|
||||
import "./VSwitch.css";
|
||||
|
||||
// Components
|
||||
import { VScaleTransition } from "../transitions/index.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/VDefaultsProvider.js";
|
||||
import { VIcon } from "../VIcon/index.js";
|
||||
import { makeVInputProps, VInput } from "../VInput/VInput.js";
|
||||
import { VProgressCircular } from "../VProgressCircular/index.js";
|
||||
import { makeVSelectionControlProps, VSelectionControl } from "../VSelectionControl/VSelectionControl.js"; // Composables
|
||||
import { useFocus } from "../../composables/focus.js";
|
||||
import { forwardRefs } from "../../composables/forwardRefs.js";
|
||||
import { LoaderSlot, useLoader } from "../../composables/loader.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js"; // Utilities
|
||||
import { ref, toRef, useId } from 'vue';
|
||||
import { filterInputAttrs, genericComponent, propsFactory, SUPPORTS_MATCH_MEDIA, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVSwitchProps = propsFactory({
|
||||
indeterminate: Boolean,
|
||||
inset: Boolean,
|
||||
flat: Boolean,
|
||||
loading: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
...makeVInputProps(),
|
||||
...makeVSelectionControlProps()
|
||||
}, 'VSwitch');
|
||||
export const VSwitch = genericComponent()({
|
||||
name: 'VSwitch',
|
||||
inheritAttrs: false,
|
||||
props: makeVSwitchProps(),
|
||||
emits: {
|
||||
'update:focused': focused => true,
|
||||
'update:modelValue': value => true,
|
||||
'update:indeterminate': value => true
|
||||
},
|
||||
setup(props, {
|
||||
attrs,
|
||||
slots
|
||||
}) {
|
||||
const indeterminate = useProxiedModel(props, 'indeterminate');
|
||||
const model = useProxiedModel(props, 'modelValue');
|
||||
const {
|
||||
loaderClasses
|
||||
} = useLoader(props);
|
||||
const {
|
||||
isFocused,
|
||||
focus,
|
||||
blur
|
||||
} = useFocus(props);
|
||||
const control = ref();
|
||||
const inputRef = ref();
|
||||
const isForcedColorsModeActive = SUPPORTS_MATCH_MEDIA && window.matchMedia('(forced-colors: active)').matches;
|
||||
const loaderColor = toRef(() => {
|
||||
return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
|
||||
});
|
||||
const uid = useId();
|
||||
const id = toRef(() => props.id || `switch-${uid}`);
|
||||
function onChange() {
|
||||
if (indeterminate.value) {
|
||||
indeterminate.value = false;
|
||||
}
|
||||
}
|
||||
function onTrackClick(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
control.value?.input?.click();
|
||||
}
|
||||
useRender(() => {
|
||||
const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
|
||||
const inputProps = VInput.filterProps(props);
|
||||
const controlProps = VSelectionControl.filterProps(props);
|
||||
return _createVNode(VInput, _mergeProps({
|
||||
"ref": inputRef,
|
||||
"class": ['v-switch', {
|
||||
'v-switch--flat': props.flat
|
||||
}, {
|
||||
'v-switch--inset': props.inset
|
||||
}, {
|
||||
'v-switch--indeterminate': indeterminate.value
|
||||
}, loaderClasses.value, props.class]
|
||||
}, rootAttrs, inputProps, {
|
||||
"modelValue": model.value,
|
||||
"onUpdate:modelValue": $event => model.value = $event,
|
||||
"id": id.value,
|
||||
"focused": isFocused.value,
|
||||
"style": props.style
|
||||
}), {
|
||||
...slots,
|
||||
default: ({
|
||||
id,
|
||||
messagesId,
|
||||
isDisabled,
|
||||
isReadonly,
|
||||
isValid
|
||||
}) => {
|
||||
const slotProps = {
|
||||
model,
|
||||
isValid
|
||||
};
|
||||
return _createVNode(VSelectionControl, _mergeProps({
|
||||
"ref": control
|
||||
}, controlProps, {
|
||||
"modelValue": model.value,
|
||||
"onUpdate:modelValue": [$event => model.value = $event, onChange],
|
||||
"id": id.value,
|
||||
"aria-describedby": messagesId.value,
|
||||
"type": "checkbox",
|
||||
"aria-checked": indeterminate.value ? 'mixed' : undefined,
|
||||
"disabled": isDisabled.value,
|
||||
"readonly": isReadonly.value,
|
||||
"onFocus": focus,
|
||||
"onBlur": blur
|
||||
}, controlAttrs), {
|
||||
...slots,
|
||||
default: ({
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
}) => _createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-switch__track', !isForcedColorsModeActive ? backgroundColorClasses.value : undefined]),
|
||||
"style": _normalizeStyle(backgroundColorStyles.value),
|
||||
"onClick": onTrackClick
|
||||
}, [slots['track-true'] && _createElementVNode("div", {
|
||||
"key": "prepend",
|
||||
"class": "v-switch__track-true"
|
||||
}, [slots['track-true'](slotProps)]), slots['track-false'] && _createElementVNode("div", {
|
||||
"key": "append",
|
||||
"class": "v-switch__track-false"
|
||||
}, [slots['track-false'](slotProps)])]),
|
||||
input: ({
|
||||
inputNode,
|
||||
icon,
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
}) => _createElementVNode(_Fragment, null, [inputNode, _createElementVNode("div", {
|
||||
"class": _normalizeClass(['v-switch__thumb', {
|
||||
'v-switch__thumb--filled': icon || props.loading
|
||||
}, props.inset || isForcedColorsModeActive ? undefined : backgroundColorClasses.value]),
|
||||
"style": _normalizeStyle(props.inset ? undefined : backgroundColorStyles.value)
|
||||
}, [slots.thumb ? _createVNode(VDefaultsProvider, {
|
||||
"defaults": {
|
||||
VIcon: {
|
||||
icon,
|
||||
size: 'x-small'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [slots.thumb({
|
||||
...slotProps,
|
||||
icon
|
||||
})]
|
||||
}) : _createVNode(VScaleTransition, null, {
|
||||
default: () => [!props.loading ? icon && _createVNode(VIcon, {
|
||||
"key": String(icon),
|
||||
"icon": icon,
|
||||
"size": "x-small"
|
||||
}, null) : _createVNode(LoaderSlot, {
|
||||
"name": "v-switch",
|
||||
"active": true,
|
||||
"color": isValid.value === false ? undefined : loaderColor.value
|
||||
}, {
|
||||
default: slotProps => slots.loader ? slots.loader(slotProps) : _createVNode(VProgressCircular, {
|
||||
"active": slotProps.isActive,
|
||||
"color": slotProps.color,
|
||||
"indeterminate": true,
|
||||
"size": "16",
|
||||
"width": "2"
|
||||
}, null)
|
||||
})]
|
||||
})])])
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
return forwardRefs({}, inputRef);
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VSwitch.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+191
@@ -0,0 +1,191 @@
|
||||
@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
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
@use '../../styles/settings';
|
||||
|
||||
// VSwitch
|
||||
$switch-flex: 0 1 auto !default;
|
||||
$switch-control-input-transition: .2s transform settings.$standard-easing !default;
|
||||
$switch-error-background-color: rgb(var(--v-theme-error)) !default;
|
||||
$switch-error-color: rgb(var(--v-theme-on-error)) !default;
|
||||
|
||||
$switch-inset-thumb-height: 24px !default;
|
||||
$switch-inset-thumb-width: 24px !default;
|
||||
$switch-inset-thumb-off-height: 16px !default;
|
||||
$switch-inset-thumb-off-width: 16px !default;
|
||||
$switch-inset-track-border-radius: 9999px !default;
|
||||
$switch-inset-track-height: 32px !default;
|
||||
$switch-inset-track-width: 52px !default;
|
||||
|
||||
$switch-label-margin-inline-start: 10px !default;
|
||||
$switch-loader-color: rgb(var(--v-theme-surface)) !default;
|
||||
|
||||
$switch-thumb-background: rgb(var(--v-theme-surface-bright)) !default;
|
||||
$switch-thumb-color: rgb(var(--v-theme-on-surface-bright)) !default;
|
||||
$switch-thumb-flat-background: rgb(var(--v-theme-surface-variant)) !default;
|
||||
$switch-thumb-flat-color: rgb(var(--v-theme-on-surface-variant)) !default;
|
||||
$switch-thumb-elevation: 2 !default;
|
||||
$switch-thumb-height: 20px !default;
|
||||
$switch-thumb-width: 20px !default;
|
||||
$switch-thumb-offset: 2px !default;
|
||||
$switch-thumb-radius: 50% !default;
|
||||
$switch-thumb-transition: .15s .05s transform settings.$decelerated-easing, .2s color settings.$standard-easing, .2s background-color settings.$standard-easing !default;
|
||||
$switch-thumb-vertical-transform: rotate(-90deg) !default;
|
||||
|
||||
$switch-track-background: rgb(var(--v-theme-surface-variant)) !default;
|
||||
$switch-track-radius: 9999px !default;
|
||||
$switch-track-width: 36px !default;
|
||||
$switch-track-height: 14px !default;
|
||||
$switch-track-opacity: .6 !default;
|
||||
$switch-track-transition: .2s background-color settings.$standard-easing !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VSwitch } from './VSwitch.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VSwitch } from "./VSwitch.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VSwitch"],"sources":["../../../src/components/VSwitch/index.ts"],"sourcesContent":["export { VSwitch } from './VSwitch'\n"],"mappings":"SAASA,OAAO","ignoreList":[]}
|
||||
Reference in New Issue
Block a user