mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-09 08:10:39 +03:00
new prototype switches integrated
This commit is contained in:
Kevin Ross
parent
188f470f02
commit
b8b9dc1090
|
|
@ -5,32 +5,24 @@ group: material-design
|
||||||
---
|
---
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<form>
|
<form>
|
||||||
<div class="checkbox">
|
<div class="switch">
|
||||||
<label>
|
<label>
|
||||||
<input type="checkbox"> Check me out
|
<input type="checkbox" checked>
|
||||||
</label>
|
Wi-Fi
|
||||||
</div>
|
|
||||||
<div class="checkbox">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" value="" checked>
|
|
||||||
I'm selected because I seem like the safe choice
|
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="checkbox disabled">
|
<div class="switch">
|
||||||
<label>
|
<label>
|
||||||
<input type="checkbox" value="" disabled>
|
<input type="checkbox">
|
||||||
Option is disabled because it is scary
|
Bluetooth
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<label class="checkbox-inline">
|
<div class="switch">
|
||||||
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
|
<label>
|
||||||
</label>
|
<input type="checkbox" disabled>
|
||||||
<label class="checkbox-inline">
|
This is disabled
|
||||||
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
|
</label>
|
||||||
</label>
|
</div>
|
||||||
<label class="checkbox-inline">
|
|
||||||
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
|
|
||||||
</label>
|
|
||||||
</form>
|
</form>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ const Switch = (($) => {
|
||||||
*/
|
*/
|
||||||
class Switch extends Checkbox {
|
class Switch extends Checkbox {
|
||||||
|
|
||||||
constructor($element, config, properties = {inputType: 'checkbox', outerClass: NAME}) {
|
constructor($element, config, properties = {inputType: 'checkbox', outerClass: 'switch'}) {
|
||||||
super($element, $.extend(true, {}, Default, config), properties)
|
super($element, $.extend(true, {}, Default, config), properties)
|
||||||
// selector: '.switch > label > input[type=checkbox]'
|
// selector: '.switch > label > input[type=checkbox]'
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,83 +1,81 @@
|
||||||
// http://codepen.io/rosskevin/pen/EPPwRR?editors=110
|
// http://codepen.io/rosskevin/pen/EPPwRR?editors=110
|
||||||
|
|
||||||
.switch {
|
.switch {
|
||||||
&,
|
|
||||||
label,
|
|
||||||
input,
|
|
||||||
.mdb-switch-track {
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
label {
|
||||||
cursor: pointer;
|
position: relative;
|
||||||
|
padding-left: $mdb-switch-width + $mdb-switch-label-padding; // absolutely positioned so add the radio size
|
||||||
|
|
||||||
// Hide original checkbox
|
.mdb-switch-track {
|
||||||
input[type=checkbox] {
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: inline-block;
|
||||||
|
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;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
display: block;
|
||||||
|
width: $mdb-switch-handle-size;
|
||||||
|
height: $mdb-switch-handle-size;
|
||||||
|
content: "";
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
// Hide original checkbox, but don't use `display: none` to allow focus on it using keyboard
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
// Handle disabled
|
&:checked {
|
||||||
&[disabled],
|
+ .mdb-switch-track {
|
||||||
fieldset[disabled] & {
|
background-position: -100%;
|
||||||
+ .mdb-switch-track::after,
|
&::after {
|
||||||
&:checked + .mdb-switch-track::after {
|
left: unquote("calc(100% - #{$mdb-switch-handle-size})"); //calc(100% - $mdb-switch-handle-size);
|
||||||
//background-color: $mdb-label-color;
|
background-color: $mdb-switch-handle-checked-bg;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
+ .mdb-switch-track:active::after {
|
&:disabled {
|
||||||
//box-shadow: 0 1px 3px 1px rgba($black, 0.4), 0 0 0 15px rgba($black, 0.1);
|
// No jelly effect on disabled switchs
|
||||||
@include shadow-4dp();
|
+ .mdb-switch-track:active::after {
|
||||||
}
|
transform: translateY(-50%);
|
||||||
|
|
||||||
// Ripple off and disabled
|
|
||||||
&:checked + .mdb-switch-track::after {
|
|
||||||
left: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mdb-switch-track {
|
|
||||||
display: inline-block;
|
|
||||||
width: 30px;
|
|
||||||
height: 15px;
|
|
||||||
margin-right: 15px;
|
|
||||||
text-align: left; // Issue #737 horizontal form
|
|
||||||
vertical-align: middle;
|
|
||||||
content: "";
|
|
||||||
background-color: $mdb-mdb-switch-track-color;
|
|
||||||
border-radius: 15px;
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
|
|
||||||
// Thumb
|
|
||||||
&::after {
|
|
||||||
position: relative;
|
|
||||||
top: -2px;
|
|
||||||
left: -5px;
|
|
||||||
display: inline-block;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
content: "";
|
|
||||||
background-color: #f1f1f1;
|
|
||||||
border-radius: 20px;
|
|
||||||
@include shadow-2dp();
|
|
||||||
//box-shadow: 0 1px 3px 1px rgba($black, 0.4);
|
|
||||||
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// set bg when checked
|
|
||||||
input[type=checkbox]:checked {
|
|
||||||
+ .mdb-switch-track {
|
|
||||||
background-color: rgba($mdb-switch-color-checked, (50 / 100)); // Switch bg on
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
background-color: $mdb-switch-color-checked; // Handle on
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active::after {
|
+ .mdb-switch-track {
|
||||||
@include shadow-3dp();
|
cursor: default;
|
||||||
//box-shadow: 0 1px 3px 1px rgba($black, 0.4), 0 0 0 15px rgba($mdb-switch-color-checked, (10 / 100)); // Ripple on
|
background: $mdb-switch-disabled-bg;
|
||||||
|
&::after {
|
||||||
|
background: $mdb-switch-handle-disabled-bg;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
@import "variables/colors";
|
@import "variables/colors";
|
||||||
|
|
||||||
// redefine ? TODO: do we need this mdb variant? This is used as $body-color
|
// redefine ? TODO: do we need this mdb variant? This is used as $body-color
|
||||||
|
$gray-lighter: rgba($black, 0.12) !default;
|
||||||
$gray-light: rgba($black, 0.26) !default;
|
$gray-light: rgba($black, 0.26) !default;
|
||||||
$gray: rgba($black, .54) !default; // spec color
|
$gray: rgba($black, .54) !default; // spec color
|
||||||
$gray-dark: rgba($black, 0.87) !default;
|
$gray-dark: rgba($black, 0.87) !default;
|
||||||
|
|
@ -86,9 +87,18 @@ $mdb-checkbox-checked-color: $brand-primary !default;
|
||||||
$mdb-checkbox-border-color: $mdb-label-color-inner-focus !default;
|
$mdb-checkbox-border-color: $mdb-label-color-inner-focus !default;
|
||||||
|
|
||||||
// Switches
|
// Switches
|
||||||
$mdb-switch-color-checked: $brand-primary;
|
$mdb-switch-label-padding: .3125rem !default; // 5px
|
||||||
$mdb-mdb-switch-track-color: $gray-light;
|
$mdb-switch-width: 2.125rem !default; // 34px
|
||||||
//$mdb-switch-color-disabled: $gray-light;
|
$mdb-switch-height: .875rem !default; // 14px
|
||||||
|
$mdb-switch-handle-size: 1.25rem !default; // 20px (was 18px)
|
||||||
|
|
||||||
|
$mdb-switch-handle-checked-bg: $brand-primary !default;
|
||||||
|
$mdb-switch-handle-unchecked-bg: #f1f1f1 !default;
|
||||||
|
$mdb-switch-handle-disabled-bg: #bdbdbd !default;
|
||||||
|
$mdb-switch-unchecked-bg: $gray-light !default;
|
||||||
|
$mdb-switch-checked-bg: desaturate(lighten($mdb-switch-handle-checked-bg, 28%), 32%); // kind of magic recipe
|
||||||
|
$mdb-switch-disabled-bg: $gray-lighter !default;
|
||||||
|
|
||||||
|
|
||||||
// Popovers and Popups
|
// Popovers and Popups
|
||||||
$mdb-popover-background: rgba(101, 101, 101, 0.9) !default;
|
$mdb-popover-background: rgba(101, 101, 101, 0.9) !default;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user