mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-02 21:04:13 +03:00
checkpoint on switches
This commit is contained in:
Kevin Ross
parent
ed805c9be8
commit
fee7f0a008
|
|
@ -28,6 +28,7 @@
|
||||||
- title: Test
|
- title: Test
|
||||||
- title: Forms
|
- title: Forms
|
||||||
- title: Labels
|
- title: Labels
|
||||||
|
- title: Selections
|
||||||
|
|
||||||
- title: Components
|
- title: Components
|
||||||
pages:
|
pages:
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,13 @@ title: Labels
|
||||||
group: material-design
|
group: material-design
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Contents
|
||||||
|
|
||||||
|
* Will be replaced with the ToC, excluding the "Contents" header
|
||||||
|
{:toc}
|
||||||
|
|
||||||
|
## Styles
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<form>
|
<form>
|
||||||
<fieldset class="form-group">
|
<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
|
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 %}
|
{% example html %}
|
||||||
<form>
|
<form>
|
||||||
<div class="checkbox">
|
<div class="checkbox">
|
||||||
|
|
@ -70,13 +14,13 @@ group: material-design
|
||||||
<div class="checkbox">
|
<div class="checkbox">
|
||||||
<label>
|
<label>
|
||||||
<input type="checkbox" value="" checked>
|
<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>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="checkbox disabled">
|
<div class="checkbox disabled">
|
||||||
<label>
|
<label>
|
||||||
<input type="checkbox" value="" disabled>
|
<input type="checkbox" value="" disabled>
|
||||||
Option two is disabled
|
Option is disabled because it is scary
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<label class="checkbox-inline">
|
<label class="checkbox-inline">
|
||||||
|
|
|
||||||
|
|
@ -23,8 +23,8 @@ const Switch = (($) => {
|
||||||
*/
|
*/
|
||||||
class Switch extends Checkbox {
|
class Switch extends Checkbox {
|
||||||
|
|
||||||
constructor($element, config) {
|
constructor($element, config, properties = {inputType: 'checkbox', outerClass: NAME}) {
|
||||||
super($element, $.extend(true, {}, Default, config), 'checkbox', NAME)
|
super($element, $.extend(true, {}, Default, config), properties)
|
||||||
// selector: '.switch > label > input[type=checkbox]'
|
// selector: '.switch > label > input[type=checkbox]'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
@import "reboot";
|
@import "reboot";
|
||||||
@import "buttons";
|
@import "buttons";
|
||||||
@import "checkboxes";
|
@import "checkboxes";
|
||||||
@import "switch";
|
@import "switches";
|
||||||
@import "radios";
|
@import "radios";
|
||||||
@import "forms";
|
@import "forms";
|
||||||
@import "input-group";
|
@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-checked-color: $brand-primary; // #4caf50 !default;
|
||||||
$mdb-checkbox-border-color: $mdb-label-color-inner-focus !default;
|
$mdb-checkbox-border-color: $mdb-label-color-inner-focus !default;
|
||||||
|
|
||||||
|
// Switches
|
||||||
|
$mdb-switch-color-checked: $brand-primary;
|
||||||
|
|
||||||
// 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;
|
||||||
$mdb-popover-color: #ececec !default;
|
$mdb-popover-color: #ececec !default;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user