@sandlada/vue-mdc
Version:

2 lines (1 loc) • 15 kB
CSS
@layer mdc-switch{._switch_1hi18_2{@layer switch-styles,switch-styles-hcm;}@layer switch-styles{._switch_1hi18_2{display:inline-flex;outline:none;vertical-align:top;-webkit-tap-highlight-color:transparent;cursor:pointer;align-items:center;flex-shrink:0;position:relative;width:var(--md-switch-track-width, 52px);height:var(--md-switch-track-height, 32px);border-start-start-radius:var(--md-switch-track-shape-start-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));border-start-end-radius:var(--md-switch-track-shape-start-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-end-radius:var(--md-switch-track-shape-end-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-start-radius:var(--md-switch-track-shape-end-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)))}._switch_1hi18_2._disabled_1hi18_22{cursor:default}._switch_1hi18_2[touch-target=wrapper]{margin:max(0px,(48px - var(--md-switch-track-height, 32px)) / 2) 0px}._switch_1hi18_2 [data-component=focus-ring]{--md-focus-ring-shape-start-start: var(--md-switch-track-shape-start-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));--md-focus-ring-shape-start-end: var(--md-switch-track-shape-start-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));--md-focus-ring-shape-end-end: var(--md-switch-track-shape-end-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));--md-focus-ring-shape-end-start: var(--md-switch-track-shape-end-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)))}._switch_1hi18_2 input{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:max(100%,var(--md-switch-touch-target-size, 48px));width:max(100%,var(--md-switch-touch-target-size, 48px));outline:none;margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;cursor:inherit}._switch_1hi18_2[touch-target=none] input{display:none}}@layer switch-track-styles{._switch_1hi18_2 ._track_1hi18_52{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center}._switch_1hi18_2._selected_1hi18_62._disabled_1hi18_22 ._track_1hi18_52{background-clip:border-box}._switch_1hi18_2 ._background_1hi18_65,._switch_1hi18_2 ._outline_1hi18_65{display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms}._switch_1hi18_2._disabled_1hi18_22 ._background_1hi18_65,._switch_1hi18_2._disabled_1hi18_22 ._outline_1hi18_65{background-color:transparent;border-color:transparent}._switch_1hi18_2._disabled_1hi18_22 ._background_1hi18_65,._switch_1hi18_2._disabled_1hi18_22 ._outline_1hi18_65{transition:none;opacity:var(--md-switch-disabled-track-opacity, .12)}._switch_1hi18_2._disabled_1hi18_22 ._background_1hi18_65,._switch_1hi18_2._disabled_1hi18_22 ._outline_1hi18_65{background-clip:content-box}._switch_1hi18_2._selected_1hi18_62 ._background_1hi18_65{background-color:var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750a4))}._switch_1hi18_2._selected_1hi18_62:hover ._background_1hi18_65{background-color:var(--md-switch-selected-hover-track-color, var(--md-sys-color-primary, #6750a4))}._switch_1hi18_2._selected_1hi18_62:focus-within ._background_1hi18_65{background-color:var(--md-switch-selected-focus-track-color, var(--md-sys-color-primary, #6750a4))}._switch_1hi18_2._selected_1hi18_62:active ._background_1hi18_65{background-color:var(--md-switch-selected-pressed-track-color, var(--md-sys-color-primary, #6750a4))}._switch_1hi18_2._selected_1hi18_62._disabled_1hi18_22 ._background_1hi18_65{background-color:var(--md-switch-disabled-selected-track-color, var(--md-sys-color-on-surface, #1d1b20))}._switch_1hi18_2._unselected_1hi18_102 ._background_1hi18_65{background-color:var(--md-switch-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}._switch_1hi18_2._unselected_1hi18_102 ._outline_1hi18_65{border-color:var(--md-switch-track-outline-color, var(--md-sys-color-outline, #79747e));border-style:solid;border-width:var(--md-switch-track-outline-width, 2px)}._switch_1hi18_2._unselected_1hi18_102:hover ._background_1hi18_65{background-color:var(--md-switch-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}._switch_1hi18_2._unselected_1hi18_102:hover ._outline_1hi18_65{border-color:var(--md-switch-hover-track-outline-color, var(--md-sys-color-outline, #79747e))}._switch_1hi18_2._unselected_1hi18_102:focus-visible ._background_1hi18_65{background-color:var(--md-switch-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}._switch_1hi18_2._unselected_1hi18_102:focus-visible ._outline_1hi18_65{border-color:var(--md-switch-focus-track-outline-color, var(--md-sys-color-outline, #79747e))}._switch_1hi18_2._unselected_1hi18_102:active ._background_1hi18_65{background-color:var(--md-switch-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}._switch_1hi18_2._unselected_1hi18_102:active ._outline_1hi18_65{border-color:var(--md-switch-pressed-track-outline-color, var(--md-sys-color-outline, #79747e))}._switch_1hi18_2._unselected_1hi18_102._disabled_1hi18_22 ._background_1hi18_65{background-color:var(--md-switch-disabled-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}._switch_1hi18_2._unselected_1hi18_102._disabled_1hi18_22 ._outline_1hi18_65{border-color:var(--md-switch-disabled-track-outline-color, var(--md-sys-color-on-surface, #1d1b20))}}@layer switch-track-hcm{@media (forced-colors: active){._switch_1hi18_2._selected_1hi18_62 ._background_1hi18_65{background:ButtonText}._switch_1hi18_2._selected_1hi18_62 ._outline_1hi18_65{border-color:ButtonText}._switch_1hi18_2._disabled_1hi18_22 ._outline_1hi18_65{border-color:GrayText}._switch_1hi18_2._disabled_1hi18_22 ._background_1hi18_65,._switch_1hi18_2._disabled_1hi18_22 ._outline_1hi18_65{opacity:1}._switch_1hi18_2._disabled_1hi18_22._selected_1hi18_62 ._background_1hi18_65{background:GrayText}}}@layer switch-handle-styles{._switch_1hi18_2 ._handle-container_1hi18_155{display:flex;place-content:center;place-items:center;position:relative;transition:margin .3s cubic-bezier(.175,.885,.32,1.275)}._switch_1hi18_2._selected_1hi18_62 ._handle-container_1hi18_155{margin-inline-start:calc(var(--md-switch-track-width, 52px) - var(--md-switch-track-height, 32px))}._switch_1hi18_2._unselected_1hi18_102 ._handle-container_1hi18_155{margin-inline-end:calc(var(--md-switch-track-width, 52px) - var(--md-switch-track-height, 32px))}._switch_1hi18_2._disabled_1hi18_22 ._handle-container_1hi18_155{transition:none}._switch_1hi18_2 ._handle_1hi18_155{border-start-start-radius:var(--md-switch-handle-shape-start-start, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));border-start-end-radius:var(--md-switch-handle-shape-start-end, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-end-radius:var(--md-switch-handle-shape-end-end, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-start-radius:var(--md-switch-handle-shape-end-start, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));height:var(--md-switch-handle-height, 16px);width:var(--md-switch-handle-width, 16px);transform-origin:center;transition-property:height,width;transition-duration:.25s,.25s;transition-timing-function:cubic-bezier(.2,0,0,1),cubic-bezier(.2,0,0,1);z-index:0}._switch_1hi18_2 ._handle_1hi18_155:before{content:"";display:flex;inset:0;position:absolute;border-radius:inherit;box-sizing:border-box;transition:background-color 67ms linear}._switch_1hi18_2._disabled_1hi18_22 ._handle_1hi18_155,._switch_1hi18_2._disabled_1hi18_22 ._handle_1hi18_155:before{transition:none}._switch_1hi18_2._selected_1hi18_62 ._handle_1hi18_155{height:var(--md-switch-selected-handle-height, 24px);width:var(--md-switch-selected-handle-width, 24px)}._switch_1hi18_2 ._handle_1hi18_155._with-icon_1hi18_200{height:var(--md-switch-with-icon-handle-height, 24px);width:var(--md-switch-with-icon-handle-width, 24px)}._switch_1hi18_2._selected_1hi18_62:not(._disabled_1hi18_22):active ._handle_1hi18_155,._switch_1hi18_2._unselected_1hi18_102:not(._disabled_1hi18_22):active ._handle_1hi18_155{height:var(--md-switch-pressed-handle-height, 28px);width:var(--md-switch-pressed-handle-width, 28px);transition-timing-function:linear;transition-duration:.1s}._switch_1hi18_2._selected_1hi18_62 ._handle_1hi18_155:before{background-color:var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #fff))}._switch_1hi18_2._selected_1hi18_62:hover ._handle_1hi18_155:before{background-color:var(--md-switch-selected-hover-handle-color, var(--md-sys-color-primary-container, #eaddff))}._switch_1hi18_2._selected_1hi18_62:focus-within ._handle_1hi18_155:before{background-color:var(--md-switch-selected-focus-handle-color, var(--md-sys-color-primary-container, #eaddff))}._switch_1hi18_2._selected_1hi18_62:active ._handle_1hi18_155:before{background-color:var(--md-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container, #eaddff))}._switch_1hi18_2._selected_1hi18_62._disabled_1hi18_22 ._handle_1hi18_155:before{background-color:var(--md-switch-disabled-selected-handle-color, var(--md-sys-color-surface, #fef7ff));opacity:var(--md-switch-disabled-selected-handle-opacity, 1)}._switch_1hi18_2._unselected_1hi18_102 ._handle_1hi18_155:before{background-color:var(--md-switch-handle-color, var(--md-sys-color-outline, #79747e))}._switch_1hi18_2._unselected_1hi18_102:hover ._handle_1hi18_155:before{background-color:var(--md-switch-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}._switch_1hi18_2._unselected_1hi18_102:focus-within ._handle_1hi18_155:before{background-color:var(--md-switch-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}._switch_1hi18_2._unselected_1hi18_102:active ._handle_1hi18_155:before{background-color:var(--md-switch-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}._switch_1hi18_2._unselected_1hi18_102._disabled_1hi18_22 ._handle_1hi18_155:before{background-color:var(--md-switch-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-switch-disabled-handle-opacity, .38)}._switch_1hi18_2 [data-component=ripple]{border-radius:var(--md-switch-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));height:var(--md-switch-state-layer-size, 40px);inset:unset;width:var(--md-switch-state-layer-size, 40px)}._switch_1hi18_2._selected_1hi18_62 [data-component=ripple]{--md-ripple-hover-color: var(--md-switch-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-color: var(--md-switch-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-switch-selected-hover-state-layer-opacity, .08);--md-ripple-pressed-opacity: var(--md-switch-selected-pressed-state-layer-opacity, .12)}._switch_1hi18_2._unselected_1hi18_102 [data-component=ripple]{--md-ripple-hover-color: var(--md-switch-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-color: var(--md-switch-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-switch-hover-state-layer-opacity, .08);--md-ripple-pressed-opacity: var(--md-switch-pressed-state-layer-opacity, .12)}}@layer switch-handle-hcm{@media (forced-colors: active){._switch_1hi18_2._unselected_1hi18_102 ._handle_1hi18_155:before{background:ButtonText}._switch_1hi18_2._disabled_1hi18_22 ._handle_1hi18_155:before{opacity:1}._switch_1hi18_2._disabled_1hi18_22._unselected_1hi18_102 ._handle_1hi18_155:before{background:GrayText}}}@layer switch-icon-styles{._switch_1hi18_2 ._icons_1hi18_275{position:relative;height:100%;width:100%}._switch_1hi18_2 ._icon_1hi18_275{position:absolute;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;fill:currentColor;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(.2,0,0,1);opacity:0}._switch_1hi18_2._disabled_1hi18_22 ._icon_1hi18_275{transition:none}._switch_1hi18_2._selected_1hi18_62 ._icon--on_1hi18_294,._switch_1hi18_2._unselected_1hi18_102 ._icon--off_1hi18_294{opacity:1}._switch_1hi18_2._unselected_1hi18_102 ._handle_1hi18_155:not(._with-icon_1hi18_200) ._icon--on_1hi18_294{transform:rotate(-45deg)}._switch_1hi18_2 ._icon--off_1hi18_294{width:var(--md-switch-icon-size, 16px);height:var(--md-switch-icon-size, 16px);color:var(--md-switch-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}._switch_1hi18_2 ._unselected_1hi18_102:hover ._icon--off_1hi18_294{color:var(--md-switch-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}._switch_1hi18_2._unselected_1hi18_102:focus-within ._icon--off_1hi18_294{color:var(--md-switch-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}._switch_1hi18_2._unselected_1hi18_102:active ._icon--off_1hi18_294{color:var(--md-switch-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}._switch_1hi18_2._unselected_1hi18_102._disabled_1hi18_22 ._icon--off_1hi18_294{color:var(--md-switch-disabled-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));opacity:var(--md-switch-disabled-icon-opacity, .38)}._switch_1hi18_2 ._icon--on_1hi18_294{width:var(--md-switch-selected-icon-size, 16px);height:var(--md-switch-selected-icon-size, 16px);color:var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005d))}._switch_1hi18_2._selected_1hi18_62:hover ._icon--on_1hi18_294{color:var(--md-switch-selected-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d))}._switch_1hi18_2._selected_1hi18_62:focus-within ._icon--on_1hi18_294{color:var(--md-switch-selected-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d))}._switch_1hi18_2._selected_1hi18_62:active ._icon--on_1hi18_294{color:var(--md-switch-selected-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d))}._switch_1hi18_2._selected_1hi18_62._disabled_1hi18_22 ._icon--on_1hi18_294{color:var(--md-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-switch-disabled-selected-icon-opacity, .38)}}@layer switch-icon-hcm{@media (forced-colors: active){._switch_1hi18_2 ._icon--off_1hi18_294{fill:Canvas}._switch_1hi18_2 ._icon--on_1hi18_294{fill:ButtonText}._switch_1hi18_2._disabled_1hi18_22._unselected_1hi18_102 ._icon--off_1hi18_294,._switch_1hi18_2._disabled_1hi18_22._selected_1hi18_62 ._icon--on_1hi18_294{opacity:1}._switch_1hi18_2._disabled_1hi18_22 ._icon--on_1hi18_294{fill:GrayText}}}}