mdb-ui-kit/scss/_switches.scss

84 lines
2.4 KiB
SCSS
Raw Normal View History

// http://codepen.io/rosskevin/pen/EPPwRR?editors=110
2015-12-15 02:39:37 +03:00
.switch {
label {
2015-12-16 02:52:47 +03:00
position: relative;
padding-left: $mdb-switch-width + $mdb-switch-label-padding; // absolutely positioned so add the radio size
2015-12-15 02:39:37 +03:00
.mdb-switch-track {
2015-12-16 02:52:47 +03:00
position: absolute;
top: calc-top($line-height, $font-size-base, $mdb-switch-height);
2015-12-16 02:52:47 +03:00
left: 0;
display: inline-block;
2015-12-16 02:52:47 +03:00
width: $mdb-switch-width;
height: $mdb-switch-height;
cursor: pointer;
background-image: linear-gradient(
to right,
$mdb-switch-unchecked-bg 0%,
$mdb-switch-unchecked-bg 50%,
$mdb-switch-checked-bg 50%,
$mdb-switch-checked-bg 100%
);
background-position: 0%;
background-size: $mdb-switch-width * 2 $mdb-switch-height;
border-radius: $mdb-switch-width;
transition: background-position 0.2s ease-in;
2015-12-15 02:39:37 +03:00
&::after {
2015-12-16 02:52:47 +03:00
position: absolute;
top: 50%;
left: 0;
display: block;
width: $mdb-switch-handle-size;
height: $mdb-switch-handle-size;
2015-12-15 02:39:37 +03:00
content: "";
2015-12-16 02:52:47 +03:00
background: $mdb-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%);
align-self: center;
}
// Jelly effect on click
&:active::after {
transform: translateY(-50%) scale3d(1.15, 0.85, 1);
2015-12-15 02:39:37 +03:00
}
}
2015-12-16 02:52:47 +03:00
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 {
+ .mdb-switch-track {
background-position: -100%;
&::after {
left: unquote("calc(100% - #{$mdb-switch-handle-size})"); //calc(100% - $mdb-switch-handle-size);
background-color: $mdb-switch-handle-checked-bg;
}
}
}
2015-12-15 02:39:37 +03:00
2015-12-16 02:52:47 +03:00
&:disabled {
// No jelly effect on disabled switchs
+ .mdb-switch-track:active::after {
transform: translateY(-50%);
2015-12-15 02:39:37 +03:00
}
2015-12-16 02:52:47 +03:00
+ .mdb-switch-track {
cursor: default;
background: $mdb-switch-disabled-bg;
&::after {
background: $mdb-switch-handle-disabled-bg;
}
2015-12-15 02:39:37 +03:00
}
}
}
}
}