framework7/components/toggle/toggle.css

Full featured mobile HTML framework for building iOS & Android apps

.ios{--f7-toggle-width:52px;--f7-toggle-height:32px;--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{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle{background:var(--f7-toggle-inactive-border-color)}.ios .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.ios .toggle input[type=checkbox]:checked+.toggle-icon:before{background:var(--f7-toggle-active-bg-color,var(--f7-theme-color));transform:scale(0)}.ios .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)))}.ios .toggle-icon{background:var(--f7-toggle-border-color)}.ios .toggle-icon:before{position:absolute;left:2px;top:2px;width:calc(var(--f7-toggle-width) - 4px);height:calc(var(--f7-toggle-height) - 4px);border-radius:var(--f7-toggle-height);box-sizing:border-box;background:var(--f7-toggle-inactive-bg-color);z-index:1;transition-duration:.3s;transform:scale(1)}.ios .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;left:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px)}.ios .toggle-active-state input[type=checkbox]:not(:checked)+.toggle-icon:before{transform:scale(0)}.ios .toggle-active-state input[type=checkbox]+.toggle-icon:after{width:calc(var(--f7-toggle-height) + 4px)}.ios .toggle-active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px))}.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{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) scale(1);background:var(--f7-toggle-active-knob-bg-color)}.md .toggle.active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) 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);height:calc(var(--f7-toggle-height) - 8px);width:calc(var(--f7-toggle-height) - 8px);top:2px;border-radius:var(--f7-toggle-height);transform:scale(.666);left:2px}.md .toggle-icon.active-state:after{transform:scale(1.1)}