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

checkboxes and radios (default and inline) are working. radio refactoring seems complete.

Browse Source
This commit is contained in:
Kevin Ross 2015-12-14 16:42:22 -06:00
parent f4da5a05b4
commit ed805c9be8
13 changed files with 110 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Gruntfile.js
View File

@ -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',

47
docs/material-design/test.md
View File

@ -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">
@ -34,12 +55,38 @@ group: material-design
<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>
Option one is this and that&mdash;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 %}

2
grunt/configBridge.json
View File

@ -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",

9
js/src/baseInput.js
View File

@ -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()
}
// 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

8
js/src/baseToggle.js → js/src/baseSelection.js
View File

@ -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

4
js/src/checkbox.js
View File

@ -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, {

3
js/src/checkboxInline.js
View File

@ -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
}
}

4
js/src/radio.js
View File

@ -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, {

3
js/src/radioInline.js
View File

@ -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
}
}

12
scss/_checkboxes.scss
View File

@ -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);

2
scss/_forms.scss
View File

@ -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 {

28
scss/_radios.scss
View File

@ -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 & {

28
scss/mixins/_forms.scss
View File

@ -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] & {
&,
&: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;
}