mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-10-31 07:57:45 +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 JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const Default = { const Default = {
template: `<span class='switch-decorator'></span>` template: `<span class='mdb-switch-track'></span>`
} }
/** /**

6
scss/_checkboxes.scss
View File

@ -44,8 +44,9 @@ label.checkbox-inline {
height: $mdb-checkbox-size; height: $mdb-checkbox-size;
overflow: hidden; overflow: hidden;
border: $border-radius solid $mdb-checkbox-border-color; border: $border-radius solid $mdb-checkbox-border-color;
}
.check::before { // checkbox outline
&::before {
position: absolute; position: absolute;
display: block; display: block;
width: 0; width: 0;
@ -64,6 +65,7 @@ label.checkbox-inline {
animation: checkbox-off $mdb-checkbox-animation-check forwards; animation: checkbox-off $mdb-checkbox-animation-check forwards;
} }
} }
}
input[type=checkbox] { input[type=checkbox] {

34
scss/_switches.scss
View File

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

6
scss/_variables.scss
View File

@ -79,14 +79,16 @@ $text-disabled: #a8a8a8 !default;
$background-disabled: #eaeaea !default; $background-disabled: #eaeaea !default;
// Checkboxes // Checkboxes
$mdb-checkbox-size: 20px !default; $mdb-checkbox-size: 1.25rem !default;
$mdb-checkbox-animation-ripple: 500ms !default; $mdb-checkbox-animation-ripple: 500ms !default;
$mdb-checkbox-animation-check: 0.3s !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; $mdb-checkbox-border-color: $mdb-label-color-inner-focus !default;
// Switches // Switches
$mdb-switch-color-checked: $brand-primary; $mdb-switch-color-checked: $brand-primary;
$mdb-mdb-switch-track-color: $gray-light;
//$mdb-switch-color-disabled: $gray-light;
// 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;