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

checkpoint on radios

Browse Source
This commit is contained in:
Kevin Ross 2015-12-14 14:19:17 -06:00
parent d80aee2371
commit f4da5a05b4
13 changed files with 170 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/_data/nav.yml
View File

@ -27,6 +27,7 @@
pages:
- title: Test
- title: Forms
- title: Labels
- title: Components
pages:

25
docs/material-design/labels.md Normal file
View File

@ -0,0 +1,25 @@
---
layout: docs
title: Labels
group: material-design
---
{% example html %}
<form>
<fieldset class="form-group">
<label for="exampleInputEmail1" class="mdb-label-static">label-static</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="placeholder text">
<span class="mdb-help">We'll never share your email with anyone else.</span>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputEmail1" class="mdb-label-floating">label-floating</label>
<input type="email" class="form-control" id="exampleInputEmail1">
<span class="mdb-help">We'll never share your email with anyone else.</span>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputEmail1" class="mdb-label-placeholder">label-placeholder</label>
<input type="email" class="form-control" id="exampleInputEmail1">
<span class="mdb-help">We'll never share your email with anyone else.</span>
</fieldset>
</form>
{% endexample %}

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

@ -6,20 +6,40 @@ group: material-design
{% example html %}
<form>
<fieldset class="form-group">
<label for="exampleInputEmail1" class="mdb-label-static">Input label static</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Input text">
<span class="mdb-help">We'll never share your email with anyone else.</span>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputEmail1" class="mdb-label-floating">Input label floating</label>
<input type="email" class="form-control" id="exampleInputEmail1">
<span class="mdb-help">We'll never share your email with anyone else.</span>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputEmail1" class="mdb-label-placeholder">Input label placeholder</label>
<input type="email" class="form-control" id="exampleInputEmail1">
<span class="mdb-help">We'll never share your email with anyone else.</span>
</fieldset>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;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>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
</form>
{% endexample %}

9
js/src/baseInput.js
View File

@ -26,7 +26,8 @@ const BaseInput = (($) => {
required: false
},
mdbFormGroup: {
template: `<span class='mdb-form-group'></span>`
template: `<span class='mdb-form-group'></span>`,
omit: false // inline components really dislike any mdb-form-group
},
mdbLabel: {
required: false,
@ -91,7 +92,9 @@ 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.
this.$mdbFormGroup = this.resolveMdbFormGroup()
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()
@ -251,7 +254,7 @@ const BaseInput = (($) => {
label = this.$mdbFormGroup.find(selector)
}
if(label !== undefined && label.length > 0){
if (label !== undefined && label.length > 0) {
break;
}
}

6
js/src/baseToggle.js
View File

@ -42,12 +42,16 @@ const BaseToggle = (($) => {
// '.${this.outerClass} > label > input[type=${this.inputType}]'
super($element, $.extend(true, {}, Default, config), properties)
this.$element.after(this.config.template)
this.decorateMarkup()
}
// ------------------------------------------------------------------------
// protected
decorateMarkup() {
this.$element.after(this.config.template)
}
// Demarcation element (e.g. first child of a form-group)
outerElement() {
// .checkbox|switch|radio > label > input[type=checkbox|radio]

6
js/src/checkboxInline.js
View File

@ -12,7 +12,11 @@ const CheckboxInline = (($) => {
const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const Default = {}
const Default = {
mdbFormGroup: {
omit: true
}
}
/**
* ------------------------------------------------------------------------

7
js/src/radio.js
View File

@ -18,7 +18,7 @@ const Radio = (($) => {
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const Default = {
template: `<span class='radio-decorator'></span><span class='check'></span>`
template: `<span class='mdb-radio-outer-circle'></span><span class='mdb-radio-inner-circle'></span>`
}
/**
@ -53,6 +53,11 @@ const Radio = (($) => {
// ------------------------------------------------------------------------
// protected
//decorateMarkup() {
// this.$element.after(this.config.template)
//}
// ------------------------------------------------------------------------
// private

6
js/src/radioInline.js
View File

@ -12,7 +12,11 @@ const RadioInline = (($) => {
const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
const Default = {}
const Default = {
mdbFormGroup: {
omit: true
}
}
/**
* ------------------------------------------------------------------------

2
scss/_checkboxes.scss
View File

@ -119,7 +119,7 @@ label.checkbox-inline,
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] + .radio-decorator {
input[type=checkbox][disabled] + .mdb-radio-outer-circle {
opacity: 0.5;
}
input[type=checkbox][disabled] + .checkbox-decorator .check::after {

2
scss/_lists.scss
View File

@ -24,7 +24,7 @@
img {
padding: 1px;
background: rgba($black, 0.1);
&.radio-decorator {
&.mdb-radio-outer-circle {
border-radius: 100%;
}
}

118
scss/_radios.scss
View File

@ -1,68 +1,50 @@
@mixin radio-color($color, $opacity) {
~ .check,
~ .radio-decorator {
opacity: $opacity;
}
~ .check {
background-color: $color;
}
~ .radio-decorator {
border-color: $color;
}
}
label.radio,
label.radio-inline,
.radio label,
.radio-inline label {
position: relative;
padding-left: 45px;
//padding-left: 2rem;
cursor: pointer;
span {
position: absolute;
top: 2px;
left: 10px;
top: $mdb-radio-border;
//left: 10px;
left: 0;
display: block;
transition-duration: 0.2s;
}
.radio-decorator {
width: 15px;
height: 15px;
border: 2px solid $mdb-radio-color-off;
border-radius: 100%;
}
.check {
display: inline-block;
width: 15px;
height: 15px;
background-color: $mdb-radio-color-on;
border-radius: 100%;
transform: scale3d(0, 0, 0);
}
.check::after {
position: absolute;
top: -18px;
left: -18px;
z-index: 1;
display: block;
width: 50px;
height: 50px;
margin: 0;
content: "";
background-color: $mdb-text-color-primary;
border-radius: 100%;
opacity: 0;
transform: scale3d(1.5, 1.5, 1);
}
input[type=radio]:not(:checked) ~ .check::after {
animation: rippleOff 500ms;
}
input[type=radio]:checked ~ .check::after {
animation: rippleOn 500ms;
&.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%;
transform: scale3d(0, 0, 0);
// focus/press ripple
&::after {
position: absolute;
top: -#{$mdb-radio-size};
left: -#{$mdb-radio-size};
z-index: 1;
display: block;
width: 50px;
height: 50px;
margin: 0;
content: "";
background-color: $mdb-text-color-primary;
border-radius: 100%;
opacity: 0;
transform: scale3d(1.5, 1.5, 1);
}
}
}
input[type=radio] {
@ -72,26 +54,30 @@ label.radio-inline,
opacity: 0;
&:checked {
@include radio-color($mdb-radio-color-on, 1);
@include mdb-radio-color($mdb-radio-color-on);
~ .mdb-radio-inner-circle {
transform: scale3d(0.55, 0.55, 1);
&::after {
animation: rippleOn 500ms;
}
}
}
&:checked ~ .check {
transform: scale3d(0.55, 0.55, 1);
&:not(:checked) ~ .mdb-radio-inner-circle::after {
animation: rippleOff 500ms;
}
}
input[type=radio][disabled] {
&[disabled] {
@include mdb-radio-color($mdb-radio-color-disabled);
// light theme spec: Disabled: #000000, Opacity 26%
@include radio-color($black, 0.26);
// dark theme spec: Disabled: #FFFFFF, Opacity 30%
.theme-dark & {
@include radio-color($white, 0.30);
.theme-dark & {
@include mdb-radio-color($mdb-radio-color-disabled-dark);
}
}
}
}
@keyframes rippleOn {
0% {
opacity: 0;

15
scss/_variables.scss
View File

@ -2,7 +2,7 @@
// redefine ? TODO: do we need this mdb variant? This is used as $body-color
$gray-light: rgba($black, 0.26) !default;
$gray: rgba($black, .68) !default; // rgba($black, .54)
$gray: rgba($black, .54) !default; // spec color
$gray-dark: rgba($black, 0.87) !default;
// wondering if any of these could still be refactored out, but are definitely in use.
@ -26,6 +26,10 @@ $enable-flex: true;
@import "variables/bootstrap/type";
// import their vars after customization for use below
@import "../bower_components/bootstrap/scss/variables";
//---
// verified in use with refactoring to v4
$mdb-font-weight-base: 400;
@ -89,11 +93,16 @@ $mdb-popover-color: #ececec !default;
$mdb-dropdown-font-size: 16px !default;
// Radio:
$mdb-radio-color-off: $mdb-label-color-inner-focus !default;
$mdb-radio-border: .125rem !default; // 2px
$mdb-radio-size: 1rem !default;
$mdb-radio-color-off: $mdb-label-color-inner-focus !default; // FIXME seems inconsistent, check spec
$mdb-radio-color-on: $brand-primary !default;
$mdb-radio-color-disabled: $gray-light; // light theme spec: Disabled: #000000, Opacity 26%
$mdb-radio-color-disabled-dark: rgba($white, 0.30); // dark theme spec: Disabled: #FFFFFF, Opacity 30%
// Buttons:
$mdb-btn-font-size-base: 14px !default;
$mdb-btn-font-size-base: 14px !default; // FIXME
$mdb-btn-font-size-lg: 16px !default;
$mdb-btn-font-size-sm: 12px !default;
$mdb-btn-font-size-xs: 10px !default;

16
scss/mixins/_forms.scss
View File

@ -24,6 +24,22 @@
}
}
@mixin mdb-radio-color($color) {
//~ .check,
//~ .mdb-radio-outer-circle {
// opacity: $opacity;
//}
~ .check {
background-color: $color;
}
~ .mdb-radio-outer-circle {
border-color: $color;
}
}
@mixin mdb-form-color($label-color, $label-color-focus, $border-color) {
[class^='mdb-label'],