mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
checkboxes and radios (default and inline) are working. radio refactoring seems complete.
This commit is contained in:
Kevin Ross
parent
f4da5a05b4
commit
ed805c9be8
|
|
@ -111,7 +111,7 @@ module.exports = function (grunt) {
|
|||
},
|
||||
files: {
|
||||
'dist/js/babel/baseInput.js': 'js/src/baseInput.js',
|
||||
'dist/js/babel/baseToggle.js': 'js/src/baseToggle.js',
|
||||
'dist/js/babel/baseSelection.js': 'js/src/baseSelection.js',
|
||||
'dist/js/babel/util.js': 'js/src/util.js',
|
||||
'dist/js/babel/ripples.js': 'js/src/ripples.js',
|
||||
'dist/js/babel/autofill.js': 'js/src/autofill.js',
|
||||
|
|
@ -138,7 +138,7 @@ module.exports = function (grunt) {
|
|||
|
||||
// generate core so we have local debugging
|
||||
'docs/dist/js/babel/baseInput.js': 'js/src/baseInput.js',
|
||||
'docs/dist/js/babel/baseToggle.js': 'js/src/baseToggle.js',
|
||||
'docs/dist/js/babel/baseSelection.js': 'js/src/baseSelection.js',
|
||||
'docs/dist/js/babel/util.js': 'js/src/util.js',
|
||||
'docs/dist/js/babel/ripples.js': 'js/src/ripples.js',
|
||||
'docs/dist/js/babel/autofill.js': 'js/src/autofill.js',
|
||||
|
|
@ -168,7 +168,7 @@ module.exports = function (grunt) {
|
|||
},
|
||||
files: {
|
||||
'dist/js/umd/baseInput.js': 'js/src/baseInput.js',
|
||||
'dist/js/umd/baseToggle.js': 'js/src/baseToggle.js',
|
||||
'dist/js/umd/baseSelection.js': 'js/src/baseSelection.js',
|
||||
'dist/js/umd/util.js': 'js/src/util.js',
|
||||
'dist/js/umd/ripples.js': 'js/src/ripples.js',
|
||||
'dist/js/umd/autofill.js': 'js/src/autofill.js',
|
||||
|
|
@ -234,7 +234,7 @@ module.exports = function (grunt) {
|
|||
bootstrap: {
|
||||
src: [
|
||||
'dist/js/babel/baseInput.js',
|
||||
'dist/js/babel/baseToggle.js',
|
||||
'dist/js/babel/baseSelection.js',
|
||||
'dist/js/babel/util.js',
|
||||
'dist/js/babel/ripples.js',
|
||||
'dist/js/babel/autofill.js',
|
||||
|
|
|
|||
|
|
@ -4,6 +4,27 @@ 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">
|
||||
|
|
@ -33,13 +54,39 @@ group: material-design
|
|||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
|
||||
</label>
|
||||
|
||||
|
||||
</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>
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox disabled">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled>
|
||||
Option two is disabled
|
||||
</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 %}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
"coreJs": [
|
||||
"../dist/js/babel/baseInput.js",
|
||||
"../dist/js/babel/baseToggle.js",
|
||||
"../dist/js/babel/baseSelection.js",
|
||||
"../dist/js/babel/autofill.js",
|
||||
"../dist/js/babel/bootstrapMaterialDesign.js",
|
||||
"../dist/js/babel/checkbox.js",
|
||||
|
|
|
|||
|
|
@ -27,7 +27,8 @@ const BaseInput = (($) => {
|
|||
},
|
||||
mdbFormGroup: {
|
||||
template: `<span class='mdb-form-group'></span>`,
|
||||
omit: false // inline components really dislike any mdb-form-group
|
||||
create: true, // create a wrapper if form-group not found
|
||||
required: true // not recommended to turn this off, only used for inline components
|
||||
},
|
||||
mdbLabel: {
|
||||
required: false,
|
||||
|
|
@ -92,9 +93,7 @@ const BaseInput = (($) => {
|
|||
// Will add mdb-form-group to form-group or create an mdb-form-group
|
||||
// Performance Note: for those forms that are really performance driven, create the markup with the .mdb-form-group to avoid
|
||||
// rendering changes once added.
|
||||
if (!this.config.mdbFormGroup.omit) {
|
||||
this.$mdbFormGroup = this.resolveMdbFormGroup()
|
||||
}
|
||||
this.$mdbFormGroup = this.resolveMdbFormGroup()
|
||||
|
||||
// Resolve and mark the mdbLabel if necessary as defined by the config
|
||||
this.$mdbLabel = this.resolveMdbLabel()
|
||||
|
|
@ -198,7 +197,7 @@ const BaseInput = (($) => {
|
|||
resolveMdbFormGroup() {
|
||||
let mfg = this.findMdbFormGroup(false)
|
||||
if (mfg === undefined || mfg.length === 0) {
|
||||
if (this.$formGroup === undefined || this.$formGroup.length === 0) {
|
||||
if (this.config.mdbFormGroup.create && (this.$formGroup === undefined || this.$formGroup.length === 0)) {
|
||||
// If a form-group doesn't exist (not recommended), take a guess and wrap the element (assuming no label).
|
||||
// note: it's possible to make this smarter, but I need to see valid cases before adding any complexity.
|
||||
this.outerElement().wrap(this.config.mdbFormGroup.template)
|
||||
|
|
@ -211,7 +210,7 @@ const BaseInput = (($) => {
|
|||
//fg.wrapInner(this.config.mdbFormGroup.template)
|
||||
}
|
||||
|
||||
mfg = this.findMdbFormGroup(true)
|
||||
mfg = this.findMdbFormGroup(this.config.mdbFormGroup.required)
|
||||
}
|
||||
|
||||
return mfg
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import BaseInput from './baseInput'
|
||||
import Util from './util'
|
||||
|
||||
const BaseToggle = (($) => {
|
||||
const BaseSelection = (($) => {
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
|
|
@ -34,7 +34,7 @@ const BaseToggle = (($) => {
|
|||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
class BaseToggle extends BaseInput {
|
||||
class BaseSelection extends BaseInput {
|
||||
|
||||
constructor($element, config, properties) {
|
||||
// properties = {inputType: checkbox, outerClass: checkbox-inline}
|
||||
|
|
@ -86,8 +86,8 @@ const BaseToggle = (($) => {
|
|||
// private
|
||||
}
|
||||
|
||||
return BaseToggle
|
||||
return BaseSelection
|
||||
|
||||
})(jQuery)
|
||||
|
||||
export default BaseToggle
|
||||
export default BaseSelection
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import BaseToggle from './baseToggle'
|
||||
import BaseSelection from './baseSelection'
|
||||
import Text from './text'
|
||||
import File from './file'
|
||||
import Radio from './radio'
|
||||
|
|
@ -27,7 +27,7 @@ const Checkbox = (($) => {
|
|||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
class Checkbox extends BaseToggle {
|
||||
class Checkbox extends BaseSelection {
|
||||
|
||||
constructor($element, config, properties = {inputType: NAME, outerClass: NAME}) {
|
||||
super($element, $.extend(true, {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@ const CheckboxInline = (($) => {
|
|||
|
||||
const Default = {
|
||||
mdbFormGroup: {
|
||||
omit: true
|
||||
create: false, // no mdb-form-group creation if form-group not present. It messes with the layout.
|
||||
required: false
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import BaseToggle from './baseToggle'
|
||||
import BaseSelection from './baseSelection'
|
||||
import Text from './text'
|
||||
import File from './file'
|
||||
import Checkbox from './checkbox'
|
||||
|
|
@ -26,7 +26,7 @@ const Radio = (($) => {
|
|||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
class Radio extends BaseToggle {
|
||||
class Radio extends BaseSelection {
|
||||
|
||||
constructor($element, config, properties = {inputType: NAME, outerClass: NAME}) {
|
||||
super($element, $.extend(true, {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@ const RadioInline = (($) => {
|
|||
|
||||
const Default = {
|
||||
mdbFormGroup: {
|
||||
omit: true
|
||||
create: false, // no mdb-form-group creation if form-group not present. It messes with the layout.
|
||||
required: false
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
|
||||
label.checkbox,
|
||||
label.checkbox-inline,
|
||||
.checkbox label,
|
||||
.checkbox-inline label {
|
||||
label.checkbox-inline {
|
||||
padding-left: 0; // Reset for Bootstrap rule
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -114,14 +112,6 @@ label.checkbox-inline,
|
|||
}
|
||||
}
|
||||
|
||||
// Style for disabled inputs
|
||||
fieldset[disabled] &,
|
||||
fieldset[disabled] & input[type=checkbox],
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check::before,
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check,
|
||||
input[type=checkbox][disabled] + .mdb-radio-outer-circle {
|
||||
opacity: 0.5;
|
||||
}
|
||||
input[type=checkbox][disabled] + .checkbox-decorator .check::after {
|
||||
background-color: $mdb-text-color-primary;
|
||||
transform: rotate(-45deg);
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ form {
|
|||
// -----
|
||||
// State coloring: default, success, info, warning, danger
|
||||
//
|
||||
@include mdb-toggle-color();
|
||||
@include mdb-selection-color();
|
||||
@include mdb-form-color($mdb-label-color, $mdb-label-color-focus, $input-border-color);
|
||||
|
||||
.has-success {
|
||||
|
|
|
|||
|
|
@ -1,31 +1,30 @@
|
|||
label.radio,
|
||||
label.radio-inline,
|
||||
.radio label span {
|
||||
top: 0;
|
||||
}
|
||||
label.radio-inline span {
|
||||
top: (($line-height * $font-size-base) - $mdb-radio-size) / 2;
|
||||
}
|
||||
|
||||
.radio label,
|
||||
.radio-inline label {
|
||||
label.radio-inline {
|
||||
position: relative;
|
||||
//padding-left: 2rem;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: $mdb-radio-border;
|
||||
//left: 10px;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: $mdb-radio-size;
|
||||
height: $mdb-radio-size;
|
||||
transition-duration: 0.2s;
|
||||
|
||||
&.mdb-radio-outer-circle {
|
||||
width: $mdb-radio-size;
|
||||
height: $mdb-radio-size;
|
||||
border: $mdb-radio-border solid $mdb-radio-color-off;
|
||||
border-radius: 100%;
|
||||
}
|
||||
&.mdb-radio-inner-circle {
|
||||
display: inline-block;
|
||||
width: $mdb-radio-size;
|
||||
height: $mdb-radio-size;
|
||||
background-color: $mdb-radio-color-on;
|
||||
border-radius: 100%;
|
||||
border-radius: 50%;
|
||||
transform: scale3d(0, 0, 0);
|
||||
|
||||
// focus/press ripple
|
||||
|
|
@ -39,7 +38,7 @@ label.radio-inline,
|
|||
height: 50px;
|
||||
margin: 0;
|
||||
content: "";
|
||||
background-color: $mdb-text-color-primary;
|
||||
background-color: $gray-dark;
|
||||
border-radius: 100%;
|
||||
opacity: 0;
|
||||
transform: scale3d(1.5, 1.5, 1);
|
||||
|
|
@ -68,7 +67,8 @@ label.radio-inline,
|
|||
animation: rippleOff 500ms;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
@include mdb-radio-color($mdb-radio-color-disabled);
|
||||
|
||||
.theme-dark & {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
@mixin mdb-toggle-color() {
|
||||
@mixin mdb-selection-color() {
|
||||
.radio label,
|
||||
.radio-inline,
|
||||
.checkbox label,
|
||||
.checkbox-inline,
|
||||
.switch label {
|
||||
|
||||
// override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
|
||||
color: $mdb-label-color;
|
||||
//color: $mdb-label-color;
|
||||
|
||||
&,
|
||||
.is-focused & {
|
||||
// form-group focus could change multiple checkboxes/radios, disable that change by using the same color as non-form-group is-focused
|
||||
color: $mdb-label-color;
|
||||
|
|
@ -17,20 +20,31 @@
|
|||
}
|
||||
|
||||
// correct the above focus color for disabled items
|
||||
label:has(input[type=radio][disabled]), // css 4 which is unlikely to work for a while, but no other pure css way.
|
||||
label:has(input[type=checkbox][disabled]), // css 4
|
||||
fieldset[disabled] & {
|
||||
color: $mdb-label-color;
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $mdb-label-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Style for disabled inputs OLD, use color approach with opacity built in, see radios
|
||||
//fieldset[disabled] &,
|
||||
//fieldset[disabled] & input[type=checkbox],
|
||||
//input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check::before,
|
||||
//input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check,
|
||||
//input[type=checkbox][disabled] + .mdb-radio-outer-circle {
|
||||
// opacity: 0.5;
|
||||
//}
|
||||
}
|
||||
|
||||
@mixin mdb-radio-color($color) {
|
||||
//~ .check,
|
||||
//~ .mdb-radio-outer-circle {
|
||||
// opacity: $opacity;
|
||||
//}
|
||||
|
||||
~ .check {
|
||||
~ .mdb-radio-inner-circle {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user