diff options
Diffstat (limited to 'minionlivesmatter/templates/assets/bootstrap-material-design/scss/_switches.scss')
| -rw-r--r-- | minionlivesmatter/templates/assets/bootstrap-material-design/scss/_switches.scss | 83 |
1 files changed, 0 insertions, 83 deletions
diff --git a/minionlivesmatter/templates/assets/bootstrap-material-design/scss/_switches.scss b/minionlivesmatter/templates/assets/bootstrap-material-design/scss/_switches.scss deleted file mode 100644 index b06444d..0000000 --- a/minionlivesmatter/templates/assets/bootstrap-material-design/scss/_switches.scss +++ /dev/null @@ -1,83 +0,0 @@ -// http://codepen.io/rosskevin/pen/EPPwRR?editors=110 -.switch { - label { - position: relative; - padding-left: $bmd-switch-width + $bmd-switch-label-padding; // absolutely positioned so add the radio size - - .bmd-switch-track { - position: absolute; - top: calc-top($line-height-base, $font-size-base, $bmd-switch-height); - left: 0; - display: inline-block; - width: $bmd-switch-width; - height: $bmd-switch-height; - cursor: pointer; - background-image: linear-gradient( - to right, - $bmd-switch-unchecked-bg 0%, - $bmd-switch-unchecked-bg 50%, - $bmd-switch-checked-bg 50%, - $bmd-switch-checked-bg 100% - ); - background-position: 0%; - background-size: $bmd-switch-width * 2 $bmd-switch-height; - border-radius: $bmd-switch-width; - transition: background-position 0.2s ease-in; - - &::after { - position: absolute; - top: 50%; - left: 0; - display: block; - align-self: center; - width: $bmd-switch-handle-size; - height: $bmd-switch-handle-size; - content: ""; - background: $bmd-switch-handle-unchecked-bg; - border-radius: 100%; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); - transition: left 0.2s ease-in, background-color 0.2s ease-in, transform 0.3s ease; - transform: translateY(-50%); - } - - // Jelly effect on click - &:active::after { - transform: translateY(-50%) scale3d(1.15, 0.85, 1); - } - } - - input { - // Hide original checkbox, but don't use `display: none` to allow focus on it using keyboard - position: absolute; - display: block; - width: 0; - height: 0; - opacity: 0; - - &:checked { - + .bmd-switch-track { - background-position: -100%; - &::after { - left: unquote("calc(100% - #{$bmd-switch-handle-size})"); //calc(100% - $bmd-switch-handle-size); - background-color: $bmd-switch-handle-checked-bg; - } - } - } - - &:disabled { - // No jelly effect on disabled switchs - + .bmd-switch-track:active::after { - transform: translateY(-50%); - } - - + .bmd-switch-track { - cursor: default; - background: $bmd-switch-disabled-bg; - &::after { - background: $bmd-switch-handle-disabled-bg; - } - } - } - } - } -} |
