framework7/components/toggle/toggle-rtl.css

Full featured mobile HTML framework for building iOS & Android apps

.ios{--f7-toggle-width:64px;--f7-toggle-height:28px;--f7-toggle-inactive-knob-bg-color:#fff;--f7-toggle-active-knob-bg-color:#fff;--f7-toggle-inactive-border-color:#e5e5e5;--f7-toggle-inactive-bg-color:#fff}.ios .dark,.ios.dark{--f7-toggle-inactive-border-color:#555;--f7-toggle-inactive-bg-color:#555}.md{--f7-toggle-width:52px;--f7-toggle-height:32px}.md,.md .dark,.md [class*=color-]{--f7-toggle-inactive-bg-color:var(--f7-md-surface-variant);--f7-toggle-active-bg-color:var(--f7-theme-color);--f7-toggle-inactive-knob-bg-color:var(--f7-md-outline);--f7-toggle-active-knob-bg-color:var(--f7-md-on-primary);--f7-toggle-inactive-border-color:var(--f7-md-outline);--f7-toggle-active-border-color:var(--f7-theme-color)}.toggle,.toggle-icon{border-radius:var(--f7-toggle-height);height:var(--f7-toggle-height);width:var(--f7-toggle-width)}.toggle{align-self:center;box-sizing:border-box;display:inline-block;position:relative;-webkit-user-select:none;user-select:none;vertical-align:middle}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{appearance:none;border:none;box-sizing:border-box;cursor:pointer;display:block;margin:0;padding:0;position:relative;transition:.3s;z-index:0}.toggle-icon:after,.toggle-icon:before{content:""}.toggle-icon:after{position:absolute;transform:translateX(0);transition-duration:.3s;z-index:2}.ios .toggle{--f7-toggle-knob-tx:0px}.ios .toggle:before{border-radius:inherit;inset:0}.ios .toggle:after,.ios .toggle:before{background:var(--f7-toggle-inactive-border-color);content:"";position:absolute;transition-duration:.3s;z-index:0}.ios .toggle:after{border-radius:var(--f7-toggle-height);height:var(--f7-toggle-height);left:0;top:0;transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));width:var(--f7-toggle-height)}.ios .toggle:has(input[type=checkbox]:checked){--f7-toggle-knob-tx:calc(var(--f7-toggle-width) - 42px)}.ios .toggle:has(input[type=checkbox]:checked):after,.ios .toggle:has(input[type=checkbox]:checked):before{background:var(--f7-toggle-active-bg-color,var(--f7-theme-color))}.ios .toggle:has(input[type=checkbox]:checked):after{transform:translateX(0)}.ios .toggle-icon{background:var(--f7-toggle-inactive-knob-bg-color);border-radius:calc(var(--f7-toggle-height) - 4px);box-shadow:0 2px 4px #0000004d;height:calc(var(--f7-toggle-height) - 4px);position:relative;right:2px;top:2px;transform:translateX(var(--f7-toggle-knob-tx)) scale(1);transform-origin:center;transition-duration:.3s;width:38px;z-index:1}.ios .toggle-icon:before{box-shadow:0 0 40px 15px rgba(var(--f7-theme-color-rgb),.75);height:1px;left:50%;top:50%;width:1px}.ios .toggle-icon:after,.ios .toggle-icon:before{content:"";opacity:0;position:absolute;transition-duration:.3s}.ios .toggle-icon:after{border-radius:inherit;box-shadow:var(--f7-glass-shadow-thumb);inset:0}.ios .toggle-active-state:before{transform:scale(.75)}.ios .toggle-active-state .toggle-icon{background:#0000;transform:translateX(var(--f7-toggle-knob-tx)) scale(1.4)}.ios .toggle-active-state .toggle-icon:after,.ios .toggle-active-state .toggle-icon:before{opacity:1}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-bg-color);border-color:var(--f7-toggle-active-border-color)}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{background:var(--f7-toggle-active-knob-bg-color);transform:translateX(calc((var(--f7-toggle-width) - var(--f7-toggle-height))*-1)) scale(1)}.md .toggle.active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc((var(--f7-toggle-width) - var(--f7-toggle-height))*-1)) scale(1.1)}.md .toggle-icon{background:var(--f7-toggle-inactive-bg-color);border:2px solid var(--f7-toggle-inactive-border-color)}.md .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);border-radius:var(--f7-toggle-height);height:calc(var(--f7-toggle-height) - 8px);right:2px;top:2px;transform:scale(.666);width:calc(var(--f7-toggle-height) - 8px)}.md .toggle-icon.active-state:after{transform:scale(1.1)}