You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
/********************************************************************************** * * Copyright (c) 2017-2019 MuK IT GmbH. * * This file is part of MuK Web Utils * (see https://mukit.at). * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU Lesser General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Lesser General Public License for more details. * * You should have received a copy of the GNU Lesser General Public License * along with this program. If not, see <http://www.gnu.org/licenses/>. * **********************************************************************************/
.switch { font-size: $font-size-base; position: relative;
input { position: absolute; height: 1px; width: 1px; background: none; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; padding: 0;
+ label { position: relative; min-width: calc(#{$switch-height} * 2); border-radius: $switch-border-radius; height: $switch-height; line-height: $switch-height; display: inline-block; cursor: pointer; outline: none; user-select: none; vertical-align: middle; text-indent: calc(calc(#{$switch-height} * 2) + .5rem); }
+ label::before, + label::after { content: ''; position: absolute; top: 0; left: 0; width: calc(#{$switch-height} * 2); bottom: 0; display: block; }
+ label::before { right: 0; background-color: $switch-bg; border-radius: $switch-border-radius; transition: $switch-transition; }
+ label::after { top: $switch-thumb-padding; left: $switch-thumb-padding; width: calc(#{$switch-height} - calc(#{$switch-thumb-padding} * 2)); height: calc(#{$switch-height} - calc(#{$switch-thumb-padding} * 2)); border-radius: $switch-thumb-border-radius; background-color: $switch-thumb-bg; transition: $switch-transition; }
&:checked + label::before { background-color: $switch-checked-bg; }
&:checked + label::after { margin-left: $switch-height; }
&:focus + label::before { outline: none; box-shadow: $switch-focus-box-shadow; }
&:disabled + label { color: $switch-disabled-color; cursor: not-allowed; }
&:disabled + label::before { background-color: $switch-disabled-bg; } }
&.switch-sm { font-size: $font-size-sm;
input { + label { min-width: calc(#{$switch-height-sm} * 2); height: $switch-height-sm; line-height: $switch-height-sm; text-indent: calc(calc(#{$switch-height-sm} * 2) + .5rem); }
+ label::before { width: calc(#{$switch-height-sm} * 2); }
+ label::after { width: calc(#{$switch-height-sm} - calc(#{$switch-thumb-padding} * 2)); height: calc(#{$switch-height-sm} - calc(#{$switch-thumb-padding} * 2)); }
&:checked + label::after { margin-left: $switch-height-sm; } } }
&.switch-lg { font-size: $font-size-lg;
input { + label { min-width: calc(#{$switch-height-lg} * 2); height: $switch-height-lg; line-height: $switch-height-lg; text-indent: calc(calc(#{$switch-height-lg} * 2) + .5rem); }
+ label::before { width: calc(#{$switch-height-lg} * 2); }
+ label::after { width: calc(#{$switch-height-lg} - calc(#{$switch-thumb-padding} * 2)); height: calc(#{$switch-height-lg} - calc(#{$switch-thumb-padding} * 2)); }
&:checked + label::after { margin-left: $switch-height-lg; } } }
+ .switch { margin-left: 1rem; } }
|