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

fixed bad label markup

Browse Source
This commit is contained in:
Kevin Ross 2015-11-18 14:53:05 -06:00
parent 4695eda87b
commit 2b6d9ea37b
11 changed files with 285 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/material-fullpalette.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material-fullpalette.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

14
index.html
View File

@ -508,34 +508,34 @@
<h2>Validation</h2>
<div class="form-group label-floating">
<label for="111">email</label>
<label for="111" class="control-label">email</label>
<input type="email" class="form-control" id="111">
</div>
<div class="form-group label-floating">
<label for="222">number</label>
<label for="222" class="control-label">number</label>
<input type="number" class="form-control" id="222">
</div>
<h2>Disabled</h2>
<div class="form-group label-floating">
<label for="333">email</label>
<label for="333" class="control-label">email</label>
<input disabled type="text" class="form-control" id="333">
</div>
<div class="form-group label-floating">
<label for="444">number</label>
<label for="444" class="control-label">number</label>
<input disabled type="text" class="form-control" id="444">
</div>
<h2>Hints</h2>
<div class="form-group label-floating">
<label for="555">label</label>
<label for="555" class="control-label">label</label>
<input type="text" class="form-control" id="555">
<p class="help-block">Some helpful hint</p>
</div>
<div class="form-group label-floating">
<label for="676">label</label>
<label for="676" class="control-label">label</label>
<input type="email" class="form-control" id="676">
<p class="help-block">A valid email contains an @ character</p>
</div>
@ -547,7 +547,7 @@
<input type="text" class="form-control" placeholder="placeholder">
</div>
<div class="form-group has-success label-floating">
<label for="777">floating label</label>
<label for="777" class="control-label">floating label</label>
<input type="text" class="form-control" id="777">
</div>
</div>

8
less/_togglebutton.less
View File

@ -82,11 +82,15 @@
// Switch bg on
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
.generic-variations(~" label input[type=checkbox]:checked + .toggle", @primary, { background-color: fade(@material-color, 50%); });
.generic-variations(~" label input[type=checkbox]:checked + .toggle", @primary, {
background-color: fade(@material-color, 50%);
});
// Handle on
// SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content
.variations(~" label input[type=checkbox]:checked + .toggle:after", background-color, @primary);
// Ripple on
.generic-variations(~" label input[type=checkbox]:checked + .toggle:active:after", @primary, { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px fade(@material-color, 10%); });
.generic-variations(~" label input[type=checkbox]:checked + .toggle:active:after", @primary, {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px fade(@material-color, 10%);
});
}
}

6
less/_variables.less
View File

@ -138,12 +138,6 @@
// Card
@card-body-text: @lightbg-text;
@card-body-background: #fff;

42
sass/_checkboxes.scss
View File

@ -4,11 +4,38 @@
.form-horizontal .checkbox {
padding-top: 20px;
}
.checkbox {
@mixin form-group-checkbox-variant($placeholder-font-size, $line-height){
.checkbox {
label {
font-size: $placeholder-font-size;
line-height: $line-height;
font-weight: normal;
}
}
}
.form-group {
// default label size/location
@include form-group-checkbox-variant($md-input-font-size-base, $md-input-line-height-base);
// sm label size/location
&.form-group-sm {
@include form-group-checkbox-variant($md-input-font-size-small, $md-input-line-height-small);
}
// lg label size/location
&.form-group-lg {
@include form-group-checkbox-variant($md-input-font-size-large, $md-input-line-height-large);
}
.checkbox {
transform: translateZ(0); // Force 3d rendering
label {
cursor: pointer;
padding-left: 0; // Reset for Bootstrap rule
color: $checkbox-label-color;
}
// Hide native checkbox
@ -48,8 +75,7 @@
display: inline-block;
width: $checkbox-size;
height: $checkbox-size;
border: 2px solid;
border-color: rgba(0,0,0,.54);
border: 2px solid $checkbox-border-color;
border-radius: 2px;
overflow: hidden;
z-index: 1;
@ -105,8 +131,10 @@
}
// Style for disabled inputs
fieldset[disabled] &,
fieldset[disabled] & input[type=checkbox],
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
input[type=checkbox][disabled] + .circle {
opacity: 0.5;
}
@ -116,12 +144,12 @@
}
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:after"), background-color, $success);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, #4caf50);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, #4caf50);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), border-color, #4caf50);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, $checkbox-checked-color);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, $checkbox-checked-color);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), border-color, $checkbox-checked-color);
}
}
@keyframes checkbox-on {
0% {
box-shadow:

32
sass/_radios.scss
View File

@ -3,11 +3,40 @@
.form-horizontal .radio {
margin-bottom: 10px;
}
@mixin form-group-radio-variant($placeholder-font-size, $line-height){
.radio {
label {
font-size: $placeholder-font-size;
line-height: $line-height;
font-weight: normal;
}
}
}
.form-group {
// default label size/location
@include form-group-radio-variant($md-input-font-size-base, $md-input-line-height-base);
// sm label size/location
&.form-group-sm {
@include form-group-radio-variant($md-input-font-size-small, $md-input-line-height-small);
}
// lg label size/location
&.form-group-lg {
@include form-group-radio-variant($md-input-font-size-large, $md-input-line-height-large);
}
}
.radio {
label {
cursor: pointer;
padding-left: 45px;
position: relative;
color: $radio-label-color;
span {
display: block;
position: absolute;
@ -16,7 +45,7 @@
transition-duration: 0.2s;
}
.circle {
border: 2px solid $lightbg-text;
border: 2px solid $radio-border-color;
height: 15px;
width: 15px;
border-radius: 100%;
@ -74,7 +103,6 @@
input[type=radio][disabled] ~ .check {
background-color: $lightbg-text;
}
}
@keyframes rippleOn {

39
sass/_togglebutton.scss
View File

@ -1,18 +1,44 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.togglebutton {
@mixin form-group-toggle-variant($placeholder-font-size, $line-height){
.togglebutton {
label {
font-size: $placeholder-font-size;
line-height: $line-height;
font-weight: normal;
}
}
}
.form-group {
// default label size/location
@include form-group-toggle-variant($md-input-font-size-base, $md-input-line-height-base);
// sm label size/location
&.form-group-sm {
@include form-group-toggle-variant($md-input-font-size-small, $md-input-line-height-small);
}
// lg label size/location
&.form-group-lg {
@include form-group-toggle-variant($md-input-font-size-large, $md-input-line-height-large);
}
.togglebutton {
vertical-align: middle;
&, label, input, .toggle {
user-select: none;
}
label {
font-weight: 400;
cursor: pointer;
color: $togglebutton-label-color;
// Hide original checkbox
input[type=checkbox] {
opacity: 0;
width: 0;
height:0;
height: 0;
}
// Switch bg off and disabled
.toggle,
@ -36,20 +62,20 @@
background-color: #F1F1F1;
border-radius: 20px;
position: relative;
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
left: -5px;
top: -2px;
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
}
// Handle disabled
input[type=checkbox][disabled] + .toggle:after,
input[type=checkbox][disabled]:checked + .toggle:after{
input[type=checkbox][disabled]:checked + .toggle:after {
background-color: #BDBDBD;
}
// Ripple off and disabled
input[type=checkbox] + .toggle:active:after,
input[type=checkbox][disabled] + .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
}
input[type=checkbox]:checked + .toggle:after {
left: 15px;
@ -64,4 +90,5 @@
@include variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $primary);
// Ripple on
@include bg-box-shadow-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $primary);
}
}

16
sass/_variables.scss
View File

@ -140,12 +140,6 @@ $md-input-height-small: (floor($md-input-font-size-small * $md-input
// Card
$card-body-text: $lightbg-text !default;
$card-body-background: #fff !default;
@ -158,6 +152,9 @@ $background-disabled: #eaeaea !default;
$checkbox-size: 20px !default;
$checkbox-animation-ripple: 500ms !default;
$checkbox-animation-check: 0.3s !default;
$checkbox-checked-color: #4caf50 !default;
$checkbox-label-color: rgba(0, 0, 0, .54) !default;
$checkbox-border-color: $checkbox-label-color !default;
// Popovers and Popups
$popover-background: rgba(101, 101, 101, 0.9) !default;
@ -166,3 +163,10 @@ $popover-color: #ececec !default;
// Dropdown Menu
$dropdown-radius: 2px !default;
$dropdown-font-size: 16px !default;
// Toggle
$togglebutton-label-color: $checkbox-label-color !default;
// Radio:
$radio-label-color: $checkbox-label-color !default;
$radio-border-color: $checkbox-border-color !default;