mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-10 19:57:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

checkpoint on switches prior to new prototype

Browse Source
This commit is contained in:
Kevin Ross 2015-12-15 17:20:11 -06:00
parent ef738470ad
commit 188f470f02
4 changed files with 49 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/switch.js
View File

@ -13,7 +13,7 @@ const Switch = (($) => {
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const Default = {
template: `<span class='switch-decorator'></span>`
template: `<span class='mdb-switch-track'></span>`
}
/**

38
scss/_checkboxes.scss
View File

@ -44,24 +44,26 @@ label.checkbox-inline {
height: $mdb-checkbox-size;
overflow: hidden;
border: $border-radius solid $mdb-checkbox-border-color;
}
.check::before {
position: absolute;
display: block;
width: 0;
height: 0;
margin-top: -4px;
margin-left: 6px;
content: "";
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0 inset;
transform: rotate(45deg);
animation: checkbox-off $mdb-checkbox-animation-check forwards;
// checkbox outline
&::before {
position: absolute;
display: block;
width: 0;
height: 0;
margin-top: -4px;
margin-left: 6px;
content: "";
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0 inset;
transform: rotate(45deg);
animation: checkbox-off $mdb-checkbox-animation-check forwards;
}
}
}

50
scss/_switches.scss
View File

@ -1,8 +1,10 @@
// http://codepen.io/rosskevin/pen/EPPwRR?editors=110
.switch {
&,
label,
input,
.switch-decorator {
.mdb-switch-track {
user-select: none;
}
@ -16,40 +18,36 @@
opacity: 0;
// Handle disabled
&[disabled] {
+ .switch-decorator::after,
&:checked + .switch-decorator::after {
background-color: $mdb-label-color;
&[disabled],
fieldset[disabled] & {
+ .mdb-switch-track::after,
&:checked + .mdb-switch-track::after {
//background-color: $mdb-label-color;
}
}
//+ .switch-decorator:active::after,
//&[disabled] + .switch-decorator:active::after {
// box-shadow: 0 1px 3px 1px rgba($black, 0.4), 0 0 0 15px rgba($black, 0.1);
//}
+ .mdb-switch-track:active::after {
//box-shadow: 0 1px 3px 1px rgba($black, 0.4), 0 0 0 15px rgba($black, 0.1);
@include shadow-4dp();
}
// Ripple off and disabled
&:checked + .switch-decorator::after {
&:checked + .mdb-switch-track::after {
left: 15px;
}
}
.switch-decorator {
.mdb-switch-track {
display: inline-block;
width: 30px;
height: 15px;
margin-right: 15px;
text-align: left; // Issue #737 horizontal form
// Switch bg off and disabled
&,
input[type=checkbox][disabled] + & {
display: inline-block;
width: 30px;
height: 15px;
margin-right: 15px;
vertical-align: middle;
content: "";
background-color: rgba(80, 80, 80, 0.7);
border-radius: 15px;
transition: background 0.3s ease;
}
vertical-align: middle;
content: "";
background-color: $mdb-mdb-switch-track-color;
border-radius: 15px;
transition: background 0.3s ease;
// Thumb
&::after {
@ -70,7 +68,7 @@
// set bg when checked
input[type=checkbox]:checked {
+ .switch-decorator {
+ .mdb-switch-track {
background-color: rgba($mdb-switch-color-checked, (50 / 100)); // Switch bg on
&::after {

6
scss/_variables.scss
View File

@ -79,14 +79,16 @@ $text-disabled: #a8a8a8 !default;
$background-disabled: #eaeaea !default;
// Checkboxes
$mdb-checkbox-size: 20px !default;
$mdb-checkbox-size: 1.25rem !default;
$mdb-checkbox-animation-ripple: 500ms !default;
$mdb-checkbox-animation-check: 0.3s !default;
$mdb-checkbox-checked-color: $brand-primary; // #4caf50 !default;
$mdb-checkbox-checked-color: $brand-primary !default;
$mdb-checkbox-border-color: $mdb-label-color-inner-focus !default;
// Switches
$mdb-switch-color-checked: $brand-primary;
$mdb-mdb-switch-track-color: $gray-light;
//$mdb-switch-color-disabled: $gray-light;
// Popovers and Popups
$mdb-popover-background: rgba(101, 101, 101, 0.9) !default;