smart-webcomponents-react/source/styles/components/smart.switchbutton.css

[](https://jqwidgets.com/license/)

smart-switch-button{width:var(--smart-switch-button-default-width);height:var(--smart-switch-button-default-height)}smart-switch-button[orientation=vertical]{height:var(--smart-switch-button-default-width);width:var(--smart-switch-button-default-height)}smart-switch-button.smart-element{display:inline-block;border:none;background:0 0;overflow:visible}.smart-switch-button .smart-thumb{border:var(--smart-border-width) solid var(--smart-border);border-radius:100%;width:var(--smart-switch-button-thumb-size);height:var(--smart-switch-button-thumb-size);background-color:var(--smart-surface);box-shadow:var(--smart-elevation-2);align-self:center;position:relative;cursor:pointer;order:2;pointer-events:all}.smart-switch-button .smart-thumb:before{background-color:var(--smart-primary);position:absolute;width:200%;height:200%;left:50%;top:50%;transition:.2s;display:block;border-radius:100%;content:"";transform:scale(0) translate(-50%,-50%);transform-origin:left top;opacity:.2}.smart-switch-button .smart-thumb:active:before{animation:button-wave-effect .1s ease-in;transform:scale(1) translate(-50%,-50%)}.smart-switch-button .smart-container{font-size:inherit;position:relative;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;touch-action:none}.smart-switch-button .smart-container:before{content:"";position:absolute;width:90%;height:50%;left:5%;top:25%;border-radius:10px;background-color:var(--smart-surface)}.smart-switch-button .smart-inner-container{width:calc(200% - var(--smart-switch-button-thumb-size));height:100%;position:absolute;color:inherit;display:flex;flex-direction:row;justify-content:flex-start;pointer-events:none;left:0}.smart-switch-button .smart-false-content,.smart-switch-button .smart-true-content{font-size:inherit;font-weight:inherit;display:inline-block;text-align:center;box-sizing:border-box;color:inherit}.smart-switch-button .smart-false-content-container,.smart-switch-button .smart-true-content-container{height:100%;display:flex;justify-content:center;align-items:center;background-clip:content-box;padding:2px 0;color:inherit;overflow:hidden;width:calc((100% - var(--smart-switch-button-thumb-size))/ 2)}.smart-switch-button .smart-true-content-container{order:1}.smart-switch-button .smart-false-content-container,.smart-switch-button[inverted] .smart-true-content-container{order:3}.smart-switch-button:not([animation=none]) .smart-container:before{transition:opacity .2s ease-in-out,background .2s ease-in-out}.smart-switch-button:not([animation=none]):not([dragged]):not([checked=null]) .smart-inner-container{transition:left .2s ease-in-out}.smart-switch-button:not([animation=none])[orientation=vertical]:not([dragged]):not([checked=null]) .smart-inner-container{transition:top .2s ease-in-out}.smart-switch-button[hover]{border-color:var(--smart-ui-state-hover)}.smart-switch-button:focus .smart-thumb,.smart-switch-button[checked] .smart-thumb{border-color:var(--smart-primary);background-color:var(--smart-primary)}.smart-switch-button:focus .smart-thumb:before{transform:scale(1) translate(-50%,-50%);background-color:var(--smart-primary);animation:button-wave-effect .1s ease-in}.smart-switch-button[readonly]{pointer-events:none}.smart-switch-button[disabled] .smart-thumb:before{content:none}.smart-switch-button[checked] .smart-thumb:active:before{transform:scale(1) translate(-50%,-50%);background-color:var(--smart-primary)}.smart-switch-button[checked] .smart-container:before{background-color:var(--smart-primary);opacity:.4}.smart-switch-button[checked] .smart-inner-container{left:calc(-1 * (100% - var(--smart-switch-button-thumb-size)))}.smart-switch-button[checked]:focus .smart-thumb:before{transform:scale(1) translate(-50%,-50%);background-color:var(--smart-primary)}.smart-switch-button[checked][inverted] .smart-inner-container{left:0}.smart-switch-button[checked=null] .smart-inner-container,.smart-switch-button[checked=null][inverted] .smart-inner-container{left:calc(-50% + var(--smart-switch-button-thumb-size)/ 2)}.smart-switch-button[checked]:not([animation=none]) .smart-thumb:active:before,.smart-switch-button[checked]:not([animation=none]):focus .smart-thumb:before{animation:button-wave-effect .1s ease-in}.smart-switch-button[checked][orientation=vertical] .smart-thumb{background-color:var(--smart-primary)}.smart-switch-button[checked][orientation=vertical] .smart-thumb:active:before{transform:scale(1) translate(-50%,-50%);background-color:var(--smart-primary)}.smart-switch-button[checked][orientation=vertical] .smart-container:before{background-color:var(--smart-primary);opacity:.4}.smart-switch-button[checked][orientation=vertical]:focus .smart-thumb:before{transform:scale(1) translate(-50%,-50%);background-color:var(--smart-primary)}.smart-switch-button[checked][orientation=vertical]:not([animation=none]) .smart-thumb:active:before,.smart-switch-button[checked][orientation=vertical]:not([animation=none]):focus .smart-thumb:before{animation:button-wave-effect .1s ease-in}.smart-switch-button[checked=null] .smart-thumb{background-color:var(--smart-surface);border-color:var(--smart-border)}.smart-switch-button[checked=null] .smart-false-content,.smart-switch-button[checked=null] .smart-true-content{visibility:hidden}.smart-switch-button[checked=null] .smart-false-content-container,.smart-switch-button[checked=null] .smart-true-content-container{color:transparent}.smart-switch-button[inverted] .smart-inner-container{left:calc(-1 * (100% - var(--smart-switch-button-thumb-size)))}.smart-switch-button[inverted] .smart-false-content-container{order:1}.smart-switch-button[orientation=vertical] .smart-thumb{width:var(--smart-switch-button-thumb-size);height:var(--smart-switch-button-thumb-size);box-shadow:var(--smart-elevation-2)}.smart-switch-button[orientation=vertical] .smart-thumb:before{border:var(--smart-border-width) solid var(--smart-border)}.smart-switch-button[orientation=vertical] .smart-thumb:active:before{animation:button-wave-effect .1s ease-in;transform:scale(1) translate(-50%,-50%)}.smart-switch-button[orientation=vertical] .smart-thumb:focus .smart-thumb:before{transform:scale(1) translate(-50%,-50%)}.smart-switch-button[orientation=vertical] .smart-container:before{content:"";position:absolute;width:50%;height:90%;left:25%;top:5%;border-radius:10px}.smart-switch-button[orientation=vertical] .smart-inner-container{height:calc(200% - var(--smart-switch-button-thumb-size));width:100%;flex-direction:column;left:0;top:0}.smart-switch-button[orientation=vertical] .smart-false-content-container,.smart-switch-button[orientation=vertical] .smart-true-content-container{width:100%;padding:0 2px;height:calc((100% - var(--smart-switch-button-thumb-size))/ 2)}.smart-switch-button[orientation=vertical]:focus .smart-thumb:before{animation:button-wave-effect .1s ease-in}.smart-switch-button[orientation=vertical][checked] .smart-inner-container{left:0;top:calc(-1 * (100% - var(--smart-switch-button-thumb-size)))}.smart-switch-button[orientation=vertical][checked][inverted] .smart-inner-container{top:0}.smart-switch-button[orientation=vertical][checked=null] .smart-inner-container{top:calc(-50% + var(--smart-switch-button-thumb-size)/ 2)}.smart-switch-button[orientation=vertical][checked=null][inverted] .smart-inner-container{left:0;top:calc(-50% + var(--smart-switch-button-thumb-size)/ 2)}.smart-switch-button[orientation=vertical][inverted] .smart-inner-container{left:0;top:calc(-1 * (100% - var(--smart-switch-button-thumb-size)))}@keyframes button-wave-effect{0%{transform:scale(.2) translate(-50%,-50%)}50%{transform:scale(.5) translate(-50%,-50%)}100%{transform:scale(1) translate(-50%,-50%)}}.smart-switch-button[right-to-left][checked]:not([orientation=vertical]) .smart-inner-container,.smart-switch-button[right-to-left][inverted]:not([orientation=vertical]) .smart-inner-container{left:0}.smart-switch-button[right-to-left]:not([orientation=vertical]) .smart-inner-container,.smart-switch-button[right-to-left][checked][inverted]:not([orientation=vertical]) .smart-inner-container{left:calc(-1 * (100% - var(--smart-switch-button-thumb-size)))}.smart-switch-button[right-to-left][checked=null]:not([orientation=vertical]) .smart-inner-container{left:calc(-50% + var(--smart-switch-button-thumb-size)/ 2)}