fixed bad label markup

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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>

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%);
});
}
}

View File

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

View File

@ -4,123 +4,151 @@
.form-horizontal .checkbox {
padding-top: 20px;
}
.checkbox {
transform: translateZ(0); // Force 3d rendering
label {
cursor: pointer;
padding-left: 0; // Reset for Bootstrap rule
}
// Hide native checkbox
input[type=checkbox] {
opacity: 0;
position: absolute;
margin: 0;
z-index: -1;
width: 0;
height: 0;
overflow: hidden;
left: 0;
pointer-events: none;
}
.checkbox-material {
vertical-align: middle;
position: relative;
top: 3px;
&:before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
display: block;
position: absolute;
left: 0;
content: "";
background-color: rgba(0,0,0,.84);
height: $checkbox-size;
width: $checkbox-size;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
transform: scale3d(2.3, 2.3, 1);
}
.check {
position: relative;
display: inline-block;
width: $checkbox-size;
height: $checkbox-size;
border: 2px solid;
border-color: rgba(0,0,0,.54);
border-radius: 2px;
overflow: hidden;
z-index: 1;
}
.check:before {
position: absolute;
content: "";
transform: rotate(45deg);
display: block;
margin-top: -4px;
margin-left: 6px;
width: 0;
height: 0;
box-shadow:
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0 inset;
animation: checkbox-off $checkbox-animation-check forwards;
@mixin form-group-checkbox-variant($placeholder-font-size, $line-height){
.checkbox {
label {
font-size: $placeholder-font-size;
line-height: $line-height;
font-weight: normal;
}
}
input[type=checkbox]:focus + .checkbox-material .check:after {
opacity: 0.2;
}
input[type=checkbox]:checked + .checkbox-material .check:before {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px;
animation: checkbox-on $checkbox-animation-check forwards;
}
input[type=checkbox]:not(:checked) + .checkbox-material:before {
animation: rippleOff $checkbox-animation-ripple;
}
input[type=checkbox]:checked + .checkbox-material:before {
animation: rippleOn $checkbox-animation-ripple;
}
// Ripple effect on click
input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
animation: rippleOff $checkbox-animation-ripple forwards;
}
input[type=checkbox]:checked + .checkbox-material .check:after {
animation: rippleOn $checkbox-animation-ripple forwards;
}
// Style for disabled inputs
fieldset[disabled] & input[type=checkbox],
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
input[type=checkbox][disabled] + .circle {
opacity: 0.5;
}
input[type=checkbox][disabled] + .checkbox-material .check:after {
background-color: $lightbg-text;
transform: rotate(-45deg);
}
@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);
}
.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
input[type=checkbox] {
opacity: 0;
position: absolute;
margin: 0;
z-index: -1;
width: 0;
height: 0;
overflow: hidden;
left: 0;
pointer-events: none;
}
.checkbox-material {
vertical-align: middle;
position: relative;
top: 3px;
&:before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
display: block;
position: absolute;
left: 0;
content: "";
background-color: rgba(0,0,0,.84);
height: $checkbox-size;
width: $checkbox-size;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
transform: scale3d(2.3, 2.3, 1);
}
.check {
position: relative;
display: inline-block;
width: $checkbox-size;
height: $checkbox-size;
border: 2px solid $checkbox-border-color;
border-radius: 2px;
overflow: hidden;
z-index: 1;
}
.check:before {
position: absolute;
content: "";
transform: rotate(45deg);
display: block;
margin-top: -4px;
margin-left: 6px;
width: 0;
height: 0;
box-shadow:
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0 inset;
animation: checkbox-off $checkbox-animation-check forwards;
}
}
input[type=checkbox]:focus + .checkbox-material .check:after {
opacity: 0.2;
}
input[type=checkbox]:checked + .checkbox-material .check:before {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px;
animation: checkbox-on $checkbox-animation-check forwards;
}
input[type=checkbox]:not(:checked) + .checkbox-material:before {
animation: rippleOff $checkbox-animation-ripple;
}
input[type=checkbox]:checked + .checkbox-material:before {
animation: rippleOn $checkbox-animation-ripple;
}
// Ripple effect on click
input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
animation: rippleOff $checkbox-animation-ripple forwards;
}
input[type=checkbox]:checked + .checkbox-material .check:after {
animation: rippleOn $checkbox-animation-ripple forwards;
}
// 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;
}
input[type=checkbox][disabled] + .checkbox-material .check:after {
background-color: $lightbg-text;
transform: rotate(-45deg);
}
@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, $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% {

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 {

View File

@ -1,67 +1,94 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.togglebutton {
vertical-align: middle;
&, label, input, .toggle {
user-select: none;
@mixin form-group-toggle-variant($placeholder-font-size, $line-height){
.togglebutton {
label {
font-size: $placeholder-font-size;
line-height: $line-height;
font-weight: normal;
}
}
label {
font-weight: 400;
cursor: pointer;
// Hide original checkbox
input[type=checkbox] {
opacity: 0;
width: 0;
height:0;
}
// Switch bg off and disabled
.toggle,
input[type=checkbox][disabled] + .toggle {
content: "";
display: inline-block;
width: 30px;
height: 15px;
background-color: rgba(80, 80, 80, 0.7);
border-radius: 15px;
margin-right: 10px;
transition: background 0.3s ease;
vertical-align: middle;
}
// Handle off
.toggle:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: #F1F1F1;
border-radius: 20px;
position: relative;
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{
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);
}
input[type=checkbox]:checked + .toggle:after {
left: 15px;
}
}
.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);
}
// Switch bg on
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
@include bg-color-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $primary, (50/100));
// Handle on
// SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content
@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);
// 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 {
cursor: pointer;
color: $togglebutton-label-color;
// Hide original checkbox
input[type=checkbox] {
opacity: 0;
width: 0;
height: 0;
}
// Switch bg off and disabled
.toggle,
input[type=checkbox][disabled] + .toggle {
content: "";
display: inline-block;
width: 30px;
height: 15px;
background-color: rgba(80, 80, 80, 0.7);
border-radius: 15px;
margin-right: 10px;
transition: background 0.3s ease;
vertical-align: middle;
}
// Handle off
.toggle:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: #F1F1F1;
border-radius: 20px;
position: relative;
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 {
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);
}
input[type=checkbox]:checked + .toggle:after {
left: 15px;
}
}
// Switch bg on
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
@include bg-color-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $primary, (50/100));
// Handle on
// SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content
@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);
}
}

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;