mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
checkpoint on switches
This commit is contained in:
Kevin Ross
parent
ed805c9be8
commit
fee7f0a008
|
|
@ -28,6 +28,7 @@
|
|||
- title: Test
|
||||
- title: Forms
|
||||
- title: Labels
|
||||
- title: Selections
|
||||
|
||||
- title: Components
|
||||
pages:
|
||||
|
|
|
|||
|
|
@ -4,6 +4,13 @@ title: Labels
|
|||
group: material-design
|
||||
---
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Styles
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<fieldset class="form-group">
|
||||
|
|
|
|||
103
docs/material-design/selections.md
Normal file
103
docs/material-design/selections.md
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Selections
|
||||
group: material-design
|
||||
---
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Switches
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<div class="switch">
|
||||
<label>
|
||||
<input type="checkbox" checked>
|
||||
Wi-Fi
|
||||
</label>
|
||||
</div>
|
||||
<div class="switch">
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
Bluetooth
|
||||
</label>
|
||||
</div>
|
||||
<div class="switch">
|
||||
<label>
|
||||
<input type="checkbox" disabled>
|
||||
This is disabled
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
## Radios
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||||
Option two can be something else and selecting it will deselect option one
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio disabled">
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
|
||||
</label>
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
## Checkboxes
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Check me out
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="" checked>
|
||||
I'm selected because I seem like the safe choice
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox disabled">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled>
|
||||
Option is disabled because it is scary
|
||||
</label>
|
||||
</div>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
|
||||
</label>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
|
||||
</label>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
|
||||
</label>
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
|
@ -4,62 +4,6 @@ title: Test
|
|||
group: material-design
|
||||
---
|
||||
|
||||
## Switches
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<div class="switch">
|
||||
<label>
|
||||
Wi-Fi
|
||||
<input type="checkbox" checked>
|
||||
</label>
|
||||
</div>
|
||||
<div class="switch">
|
||||
<label>
|
||||
Bluetooth
|
||||
<input type="checkbox">
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
## Radios
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||||
Option two can be something else and selecting it will deselect option one
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio disabled">
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
|
||||
</label>
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
## Checkboxes
|
||||
|
||||
{% example html %}
|
||||
<form>
|
||||
<div class="checkbox">
|
||||
|
|
@ -70,13 +14,13 @@ group: material-design
|
|||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="" checked>
|
||||
Option one is this and that—be sure to include why it's great
|
||||
I'm selected because I seem like the safe choice
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox disabled">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled>
|
||||
Option two is disabled
|
||||
Option is disabled because it is scary
|
||||
</label>
|
||||
</div>
|
||||
<label class="checkbox-inline">
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@ const Switch = (($) => {
|
|||
*/
|
||||
class Switch extends Checkbox {
|
||||
|
||||
constructor($element, config) {
|
||||
super($element, $.extend(true, {}, Default, config), 'checkbox', NAME)
|
||||
constructor($element, config, properties = {inputType: 'checkbox', outerClass: NAME}) {
|
||||
super($element, $.extend(true, {}, Default, config), properties)
|
||||
// selector: '.switch > label > input[type=checkbox]'
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
@import "reboot";
|
||||
@import "buttons";
|
||||
@import "checkboxes";
|
||||
@import "switch";
|
||||
@import "switches";
|
||||
@import "radios";
|
||||
@import "forms";
|
||||
@import "input-group";
|
||||
|
|
|
|||
|
|
@ -1,81 +0,0 @@
|
|||
.switch {
|
||||
vertical-align: middle;
|
||||
&, label, input, .switch-decorator {
|
||||
user-select: none;
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
|
||||
// Hide original checkbox
|
||||
input[type=checkbox] {
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.switch-decorator {
|
||||
text-align: left; // Issue #737 horizontal form
|
||||
}
|
||||
|
||||
// Switch bg off and disabled
|
||||
.switch-decorator,
|
||||
input[type=checkbox][disabled] + .switch-decorator {
|
||||
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;
|
||||
}
|
||||
// Handle off
|
||||
.switch-decorator::after {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
left: -5px;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
content: "";
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 1px 3px 1px rgba($black, 0.4);
|
||||
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
// Handle disabled
|
||||
&[disabled] {
|
||||
+ .switch-decorator::after,
|
||||
&:checked + .switch-decorator::after {
|
||||
background-color: #bdbdbd;
|
||||
}
|
||||
}
|
||||
|
||||
+ .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);
|
||||
}
|
||||
|
||||
// Ripple off and disabled
|
||||
&:checked + .switch-decorator::after {
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// set bg when checked
|
||||
input[type=checkbox]:checked {
|
||||
+ .switch-decorator {
|
||||
background-color: rgba($brand-primary, (50 / 100)); // Switch bg on
|
||||
}
|
||||
|
||||
+ .switch-decorator::after {
|
||||
background-color: $brand-primary; // Handle on
|
||||
}
|
||||
|
||||
+ .switch-decorator:active::after {
|
||||
box-shadow: 0 1px 3px 1px rgba($black, 0.4), 0 0 0 15px rgba($brand-primary, (10 / 100)); // Ripple on
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
87
scss/_switches.scss
Normal file
87
scss/_switches.scss
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
.switch {
|
||||
&,
|
||||
label,
|
||||
input,
|
||||
.switch-decorator {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
|
||||
// Hide original checkbox
|
||||
input[type=checkbox] {
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
|
||||
// Handle disabled
|
||||
&[disabled] {
|
||||
+ .switch-decorator::after,
|
||||
&:checked + .switch-decorator::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);
|
||||
//}
|
||||
|
||||
// Ripple off and disabled
|
||||
&:checked + .switch-decorator::after {
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-decorator {
|
||||
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;
|
||||
}
|
||||
|
||||
// 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 {
|
||||
+ .switch-decorator {
|
||||
background-color: rgba($mdb-switch-color-checked, (50 / 100)); // Switch bg on
|
||||
|
||||
&::after {
|
||||
background-color: $mdb-switch-color-checked; // Handle on
|
||||
}
|
||||
|
||||
&:active::after {
|
||||
@include shadow-3dp();
|
||||
//box-shadow: 0 1px 3px 1px rgba($black, 0.4), 0 0 0 15px rgba($mdb-switch-color-checked, (10 / 100)); // Ripple on
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -85,6 +85,9 @@ $mdb-checkbox-animation-check: 0.3s !default;
|
|||
$mdb-checkbox-checked-color: $brand-primary; // #4caf50 !default;
|
||||
$mdb-checkbox-border-color: $mdb-label-color-inner-focus !default;
|
||||
|
||||
// Switches
|
||||
$mdb-switch-color-checked: $brand-primary;
|
||||
|
||||
// Popovers and Popups
|
||||
$mdb-popover-background: rgba(101, 101, 101, 0.9) !default;
|
||||
$mdb-popover-color: #ececec !default;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user