This commit is contained in:
Kevin Ross 2015-11-21 15:36:03 -06:00
parent a3fc96318d
commit bb4a16657f
16 changed files with 3250 additions and 6053 deletions

File diff suppressed because it is too large Load Diff

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

1176
dist/css/material.css vendored

File diff suppressed because it is too large Load Diff

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

@ -1,32 +1,10 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
.form-horizontal .checkbox {
padding-top: 20px;
}
@mixin form-group-checkbox-variant($placeholder-font-size, $line-height){
.checkbox {
// Label is set in _inputs.less
}
}
.form-group {
}
//// default label size/location
@include form-group-checkbox-variant($mdb-input-font-size-base, $mdb-input-line-height-base);
// sm label size/location
&.form-group-sm {
@include form-group-checkbox-variant($mdb-input-font-size-small, $mdb-input-line-height-small);
}
// lg label size/location
&.form-group-lg {
@include form-group-checkbox-variant($mdb-input-font-size-large, $mdb-input-line-height-large);
}
.checkbox {
.checkbox {
label {
cursor: pointer;
padding-left: 0; // Reset for Bootstrap rule
@ -142,7 +120,6 @@
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, $mdb-checkbox-checked-color);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, $mdb-checkbox-checked-color);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), border-color, $mdb-checkbox-checked-color);
}
}
@keyframes checkbox-on {

View File

@ -10,6 +10,10 @@
padding-top: 0px;
}
.radio {
margin-bottom: 10px;
}
label {
text-align: right;
}

View File

@ -3,7 +3,7 @@
@import '_inputs-size';
// must be broken out for reuse - webkit selector breaks firefox
@mixin label-position($label-top, $static-font-size, $static-line-height){
@mixin label-static($label-top, $static-font-size, $static-line-height){
label.control-label {
top: $label-top;
left: 0;
@ -13,6 +13,45 @@
}
}
@mixin label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size){
.form-control {
@include material-placeholder {
font-size: $placeholder-font-size;
line-height: $line-height;
color: $mdb-input-placeholder-color;
font-weight: 400;
}
// margin-bottom must be specified to give help-block vertical space.
// $see also form-group padding-bottom (and size variants) re: collapsible margins. These work together.
margin-bottom: $vertical-padding;
}
// generic labels used anywhere in the form (not control-label)
.checkbox label,
.radio label,
label {
font-size: $placeholder-font-size;
line-height: $line-height;
color: $mdb-input-placeholder-color;
font-weight: 400;
}
// smaller focused or static size
label.control-label {
font-size: $static-font-size;
line-height: $static-line-height;
color: $mdb-input-placeholder-color;
font-weight: 400;
margin: 16px 0 0 0; // std and lg
}
.help-block {
margin-top: 0px; // allow the input margin to set-off the top of the help-block
font-size: $help-block-font-size;
}
}
@mixin form-group-validation-state($name, $color){
&.#{$name} { // e.g. has-error
@ -29,7 +68,7 @@
}
}
@mixin form-group-size-variant($placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim){
@mixin form-group-size-variant($parent, $placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim){
$static-font-size: ceil(($mdb-label-static-size-ratio * $placeholder-font-size)) !default;
$static-line-height: ($mdb-label-static-size-ratio * $line-height) !default;
@ -39,38 +78,23 @@
$help-block-font-size: ceil(($mdb-help-block-size-ratio * $placeholder-font-size)) !default;
$help-block-line-height: ($mdb-help-block-size-ratio * $line-height) !default;
// form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
margin: ($label-top-margin + $static-font-size) 0 0 0;
.form-control {
@include material-placeholder {
font-size: $placeholder-font-size;
}
margin-bottom: $vertical-padding; // must be specified to give help-block vertical space
// this is outside a form-group
@if not $parent {
@include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
}
// upon collapsing margins, the largest margin is honored which collapses the form-control margin, so the form-control margin
// must also be expressed as form-group padding
// this is inside a form-group, may be .form-group.form-group-sm or .form-group.form-group-lg
@else {
#{$parent} {
@include label-size-variant($placeholder-font-size, $vertical-padding, $line-height, $static-font-size, $static-line-height, $help-block-font-size);
// form-group padding-bottom
// upon collapsing margins, the largest margin is honored which collapses the form-control margin-bottom,
// so the form-control margin-bottom must also be expressed as form-group padding
padding-bottom: $vertical-padding;
.help-block {
margin-top: 0px; // allow the input margin to set-off the top of the help-block
font-size: $help-block-font-size;
}
// generic labels used anywhere in the form (not control-label)
label {
font-size: $placeholder-font-size;
line-height: $line-height;
font-weight: normal;
}
// smaller focused or static size
label.control-label {
font-size: $static-font-size;
line-height: $static-line-height;
}
// form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
margin: ($label-top-margin + $static-font-size) 0 0 0;
// larger labels as placeholders
&.label-floating,
@ -86,24 +110,23 @@
&.label-static,
&.label-floating.is-focused,
&.label-floating:not(.is-empty) {
@include label-position($label-top, $static-font-size, $static-line-height);
@include label-static($label-top, $static-font-size, $static-line-height);
}
// #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
&.label-floating input.form-control:-webkit-autofill ~ label.control-label {
@include label-position($label-top, $static-font-size, $static-line-height);
@include label-static($label-top, $static-font-size, $static-line-height);
}
}
}
}
.form-group {
//border: solid 1px red;
position: relative;
// -----
// Inputs
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
.form-control {
// -----
// Inputs
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
.form-control,
.form-group .form-control {
border: 0;
background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
background-size: 0 2px, 100% 1px;
@ -118,7 +141,7 @@
// Placeholders and and labels-as-placeholders should look the same
@include material-placeholder {
color: $mdb-input-placeholder-color;
font-weight: normal;
font-weight: 400;
}
@ -138,29 +161,26 @@
background-image: none;
border-bottom: 1px dotted $mdb-input-underline-color;
}
}
}
&.is-focused .form-control {
outline: none;
background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
background-size: 100% 2px, 100% 1px;
box-shadow: none;
transition-duration: 0.3s;
// -----
// Labels with form-group signalled state
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
//.variations(unquote(" label.control-label"), color, $mdb-input-placeholder-color); // default label color variations
.material-input:after {
background-color: $mdb-input-default;
}
}
.form-group {
position: relative;
// -----
// Labels
// Labels with form-group signalled state
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
&.label-static,
&.label-placeholder,
&.label-floating {
label.control-label {
position: absolute;
pointer-events: none;
@ -168,19 +188,6 @@
}
}
// generic labels and control labels
label,
label.control-label {
// same label properties as form-group placeholder
color: $mdb-input-placeholder-color;
font-weight: normal;
}
label.control-label {
// same label properties as form-group placeholder
margin: 16px 0 0 0; // std and lg
}
// hide label-placeholders when the field is not empty
&.label-placeholder:not(.is-empty){
label.control-label{
@ -188,30 +195,40 @@
}
}
@include variations(unquote(" label.control-label"), color, $mdb-input-placeholder-color); // default label color variations
@include variations(unquote(".is-focused label.control-label"), color, $mdb-input-default); // focused label color variations
@include variations(unquote(".is-focused.label-placeholder label.control-label"), color, $mdb-input-placeholder-color); // default label color variations
// default floating size/location
@include form-group-size-variant($mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base);
// sm floating size/location
&.form-group-sm {
@include form-group-size-variant($mdb-input-font-size-small, $mdb-label-top-margin-small, $mdb-input-padding-small-vertical, $mdb-input-line-height-small, $mdb-label-as-placeholder-shim-small);
}
// lg floating size/location
&.form-group-lg {
@include form-group-size-variant($mdb-input-font-size-large, $mdb-label-top-margin-large, $mdb-input-padding-large-vertical, $mdb-input-line-height-large, $mdb-label-as-placeholder-shim-large);
}
// Hints - position: absolute approach - uses no vertical space, text wrapping - not so good.
// Help blocks - position: absolute approach - uses no vertical space, text wrapping - not so good.
.help-block {
position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
display: none;
}
// form-group is-focused display
&.is-focused {
.form-control {
outline: none;
background-image: linear-gradient($brand-primary, $brand-primary), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
background-size: 100% 2px, 100% 1px;
box-shadow: none;
transition-duration: 0.3s;
.material-input:after {
background-color: $brand-primary;
}
}
//.variations(unquote(".is-focused label.control-label"), color, $brand-primary); // focused label color variations
label,
label.control-label {
color: $brand-primary;
}
//.variations(unquote(".is-focused.label-placeholder label.control-label"), color, $mdb-input-placeholder-color); // default label color variations
&.label-placeholder {
label,
label.control-label {
color: $mdb-input-placeholder-color;
}
}
.help-block {
display: block;
}
@ -220,10 +237,10 @@
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
@include bg-img-variations(unquote(".is-focused .form-control"), $brand-primary);
@include form-group-validation-state(has-warning, $mdb-input-warning);
@include form-group-validation-state(has-error, $mdb-input-danger);
@include form-group-validation-state(has-success, $mdb-input-success);
@include form-group-validation-state(has-info, $mdb-input-info);
@include form-group-validation-state(has-warning, $brand-warning);
@include form-group-validation-state(has-error, $brand-danger);
@include form-group-validation-state(has-success, $brand-success);
@include form-group-validation-state(has-info, $brand-info);
textarea {
resize: none;
@ -241,6 +258,19 @@
}
}
// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation)
@include form-group-size-variant(null, $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base);
// default floating size/location with a form-group (need margin etc from a default form-group)
@include form-group-size-variant(unquote(".form-group"), $mdb-input-font-size-base, $mdb-label-top-margin-base, $mdb-input-padding-base-vertical, $mdb-input-line-height-base, $mdb-label-as-placeholder-shim-base);
// sm floating size/location
@include form-group-size-variant(unquote(".form-group.form-group-sm"), $mdb-input-font-size-small, $mdb-label-top-margin-small, $mdb-input-padding-small-vertical, $mdb-input-line-height-small, $mdb-label-as-placeholder-shim-small);
// lg floating size/location
@include form-group-size-variant(unquote(".form-group.form-group-lg"), $mdb-input-font-size-large, $mdb-label-top-margin-large, $mdb-input-padding-large-vertical, $mdb-input-line-height-large, $mdb-label-as-placeholder-shim-large);
select.form-control {
border: 0;
@ -271,7 +301,7 @@ select.form-control {
// ----------------
// input group/addon related styles
// default margin
// default margin - no form-group required
@include input-group-button-variation($mdb-input-padding-base-vertical);
.form-group {

View File

@ -88,7 +88,7 @@
}
}
@media (max-width: 767px) {
@media (max-width: $grid-float-breakpoint-max) {
.navbar-text {
color: inherit;
margin-top: 15px;
@ -193,7 +193,7 @@
background-color: $indigo;
}
@media (max-width: 1199px) {
@media (max-width: $screen-md-max) {
.navbar-brand {
height: 50px;

View File

@ -1,31 +1,5 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.form-horizontal .radio {
margin-bottom: 10px;
}
@mixin form-group-radio-variant($placeholder-font-size, $line-height){
.radio {
// Label is set in _inputs.less
}
}
.form-group {
// default label size/location
@include form-group-radio-variant($mdb-input-font-size-base, $mdb-input-line-height-base);
// sm label size/location
&.form-group-sm {
@include form-group-radio-variant($mdb-input-font-size-small, $mdb-input-line-height-small);
}
// lg label size/location
&.form-group-lg {
@include form-group-radio-variant($mdb-input-font-size-large, $mdb-input-line-height-large);
}
}
.radio {
label {
cursor: pointer;

View File

@ -1,27 +1,6 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
@mixin form-group-toggle-variant($placeholder-font-size, $line-height){
.togglebutton {
// Label is set in _inputs.less
}
}
.form-group {
//// default label size/location
@include form-group-toggle-variant($mdb-input-font-size-base, $mdb-input-line-height-base);
// sm label size/location
&.form-group-sm {
@include form-group-toggle-variant($mdb-input-font-size-small, $mdb-input-line-height-small);
}
// lg label size/location
&.form-group-lg {
@include form-group-toggle-variant($mdb-input-font-size-large, $mdb-input-line-height-large);
}
.togglebutton {
.togglebutton {
vertical-align: middle;
&, label, input, .toggle {
user-select: none;
@ -86,5 +65,4 @@
@include variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $brand-primary);
// Ripple on
@include bg-box-shadow-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $brand-primary);
}
}

View File

@ -1,17 +1,17 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.text-warning {
color: $btn-warning;
color: $brand-warning;
}
.text-primary {
color: $btn-primary;
color: $brand-primary;
}
.text-danger {
color: $btn-danger;
color: $brand-danger;
}
.text-success {
color: $btn-success;
color: $brand-success;
}
.text-info {
color: $btn-info;
color: $brand-info;
}

View File

@ -39,56 +39,8 @@ $btn-default: transparent !default;
$btn-default-text: $lightbg-text !default;
//---
$btn-primary: $brand-primary !default;
$btn-primary-text: $darkbg-text !default;
$btn-success: $brand-success !default;
$btn-success-text: $darkbg-text !default;
$btn-info: $brand-info !default;
$btn-info-text: $darkbg-text !default;
$btn-warning: $brand-warning !default;
$btn-warning-text: $darkbg-text !default;
$btn-danger: $brand-danger !default;
$btn-danger-text: $darkbg-text !default;
$mdb-input-unchecked: rgba(137, 137, 137, 0.3) !default;
$mdb-input-checked: rgba(15, 157, 88, 0.3) !default;
$mdb-radio-default: $lightbg-text !default;
$mdb-radio-primary: $brand-primary !default;
$mdb-radio-success: $brand-success !default;
$mdb-radio-info: $brand-info !default;
$mdb-radio-warning: $brand-warning !default;
$mdb-radio-danger: $brand-danger !default;
$mdb-input-danger: $brand-danger !default;
$mdb-input-default: $brand-primary !default;
$mdb-input-warning: $brand-warning !default;
$mdb-input-success: $brand-success !default;
$mdb-input-info: $brand-info !default;
$alert-success: $brand-success !default;
$alert-info: $brand-info !default;
$alert-warning: $brand-warning !default;
$alert-danger: $brand-danger !default;
$progress-success: $brand-success !default;
$progress-info: $brand-info !default;
$progress-warning: $brand-warning !default;
$progress-danger: $brand-danger !default;
$font-size-base: 14px !default;
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
// Global Material variables
$mdb-border-radius: 2px !default;
// --------------------
@ -104,7 +56,7 @@ $mdb-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
// FIXME: with #733 customization of bootstrap, consider how these could be based on the original bs customized variables
//** Unit-less `line-height` for use in components like buttons.
$mdb-input-line-height-base: 1.428571429 !default; // 20/14
$mdb-input-line-height-base: $line-height-base; //1.428571429 !default; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$mdb-input-line-height-computed: floor(($mdb-input-font-size-base * $mdb-input-line-height-base)) !default; // ~20px
$mdb-input-line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome