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

@mdb- namespace known material variables before beginning to use bs variables directly

Browse Source
This commit is contained in:
Kevin Ross 2015-11-21 08:56:29 -06:00
parent af03f6809a
commit 04ab7ddc41
15 changed files with 296 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
less/_alerts.less
View File

@ -4,11 +4,11 @@
// SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
.generic-variations(~"", @darkbg-text, { .generic-variations(~"", @darkbg-text, {
background-color: @material-color; background-color: @mdb-color;
color: @material-text-color; color: @mdb-text-color;
a, .alert-link { a, .alert-link {
color: @material-text-color; color: @mdb-text-color;
} }
}); });

8
less/_buttons.less
View File

@ -34,22 +34,22 @@
// BTN hover effect // BTN hover effect
// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
.generic-variations(~":hover:not(.btn-link):not(.btn-flat)", @btn-default, { .generic-variations(~":hover:not(.btn-link):not(.btn-flat)", @btn-default, {
background-color: contrast(@material-color, darken(@material-color, 4%), lighten(@material-color, 4%), @contrast-factor); background-color: contrast(@mdb-color, darken(@mdb-color, 4%), lighten(@mdb-color, 4%), @contrast-factor);
}); });
// BTN active effect // BTN active effect
// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
.generic-variations(~":active:not(.btn-link):not(.btn-flat)", @btn-default, { .generic-variations(~":active:not(.btn-link):not(.btn-flat)", @btn-default, {
background-color: contrast(@material-color, darken(@material-color, 6%), lighten(@material-color, 6%), @contrast-factor); background-color: contrast(@mdb-color, darken(@mdb-color, 6%), lighten(@mdb-color, 6%), @contrast-factor);
}); });
// BTN .active effect // BTN .active effect
// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
.generic-variations(~".active:not(.btn-link):not(.btn-flat)", @btn-default, { .generic-variations(~".active:not(.btn-link):not(.btn-flat)", @btn-default, {
background-color: contrast(@material-color, darken(@material-color, 6%), lighten(@material-color, 6%), @contrast-factor); background-color: contrast(@mdb-color, darken(@mdb-color, 6%), lighten(@mdb-color, 6%), @contrast-factor);
}); });
// BTN flat hover effect // BTN flat hover effect
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
.generic-variations(~".btn-flat:hover:not(.btn-link)", @btn-default, { .generic-variations(~".btn-flat:hover:not(.btn-link)", @btn-default, {
background-color: fade(@material-color, 20%); background-color: fade(@mdb-color, 20%);
}); });
} }

6
less/_cards.less
View File

@ -20,8 +20,8 @@
border-radius: 2px; border-radius: 2px;
color: @card-body-text; color: @mdb-card-body-text;
background: @card-body-background; background: @mdb-card-body-background;
.shadow-z-2(); .shadow-z-2();
@ -40,7 +40,7 @@
position: absolute; position: absolute;
bottom: 16px; bottom: 16px;
left: 18px; left: 18px;
color: @card-image-headline; color: @mdb-card-image-headline;
font-size: 2em; font-size: 2em;
} }
} }

36
less/_checkboxes.less
View File

@ -12,23 +12,23 @@
.form-group { .form-group {
//// default label size/location //// default label size/location
.form-group-checkbox-variant(@md-input-font-size-base, @md-input-line-height-base); .form-group-checkbox-variant(@mdb-input-font-size-base, @mdb-input-line-height-base);
// sm label size/location // sm label size/location
&.form-group-sm { &.form-group-sm {
.form-group-checkbox-variant(@md-input-font-size-small, @md-input-line-height-small); .form-group-checkbox-variant(@mdb-input-font-size-small, @mdb-input-line-height-small);
} }
// lg label size/location // lg label size/location
&.form-group-lg { &.form-group-lg {
.form-group-checkbox-variant(@md-input-font-size-large, @md-input-line-height-large); .form-group-checkbox-variant(@mdb-input-font-size-large, @mdb-input-line-height-large);
} }
.checkbox { .checkbox {
label { label {
cursor: pointer; cursor: pointer;
padding-left: 0; // Reset for Bootstrap rule padding-left: 0; // Reset for Bootstrap rule
color: @checkbox-label-color; color: @mdb-checkbox-label-color;
} }
// Hide native checkbox // Hide native checkbox
@ -54,8 +54,8 @@
left: 0; left: 0;
content: ""; content: "";
background-color: rgba(0,0,0,.84); background-color: rgba(0,0,0,.84);
height: @checkbox-size; height: @mdb-checkbox-size;
width: @checkbox-size; width: @mdb-checkbox-size;
border-radius: 100%; border-radius: 100%;
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
@ -66,9 +66,9 @@
.check { .check {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: @checkbox-size; width: @mdb-checkbox-size;
height: @checkbox-size; height: @mdb-checkbox-size;
border: 2px solid @checkbox-border-color; border: 2px solid @mdb-checkbox-border-color;
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
@ -90,7 +90,7 @@
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0 0 0 0 inset; 0 0 0 0 inset;
animation: checkbox-off @checkbox-animation-check forwards; animation: checkbox-off @mdb-checkbox-animation-check forwards;
} }
} }
@ -105,22 +105,22 @@
0px 32px 0 20px, 0px 32px 0 20px,
-5px 5px 0 10px, -5px 5px 0 10px,
20px -12px 0 11px; 20px -12px 0 11px;
animation: checkbox-on @checkbox-animation-check forwards; animation: checkbox-on @mdb-checkbox-animation-check forwards;
} }
input[type=checkbox]:not(:checked) + .checkbox-material:before { input[type=checkbox]:not(:checked) + .checkbox-material:before {
animation: rippleOff @checkbox-animation-ripple; animation: rippleOff @mdb-checkbox-animation-ripple;
} }
input[type=checkbox]:checked + .checkbox-material:before { input[type=checkbox]:checked + .checkbox-material:before {
animation: rippleOn @checkbox-animation-ripple; animation: rippleOn @mdb-checkbox-animation-ripple;
} }
// Ripple effect on click // Ripple effect on click
input[type=checkbox]:not(:checked) + .checkbox-material .check:after { input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
animation: rippleOff @checkbox-animation-ripple forwards; animation: rippleOff @mdb-checkbox-animation-ripple forwards;
} }
input[type=checkbox]:checked + .checkbox-material .check:after { input[type=checkbox]:checked + .checkbox-material .check:after {
animation: rippleOn @checkbox-animation-ripple forwards; animation: rippleOn @mdb-checkbox-animation-ripple forwards;
} }
// Style for disabled inputs // Style for disabled inputs
@ -137,9 +137,9 @@
} }
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @success); .variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @success);
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, @checkbox-checked-color); .variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, @mdb-checkbox-checked-color);
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, @checkbox-checked-color); .variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, @mdb-checkbox-checked-color);
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", border-color, @checkbox-checked-color); .variations(~" input[type=checkbox]:checked + .checkbox-material .check", border-color, @mdb-checkbox-checked-color);
} }
} }

105
less/_inputs-size.less
View File

@ -8,22 +8,22 @@
// -------------------------------------------------- // --------------------------------------------------
legend { legend {
margin-bottom: @md-input-line-height-computed; margin-bottom: @mdb-input-line-height-computed;
font-size: (@md-input-font-size-base * 1.5); font-size: (@mdb-input-font-size-base * 1.5);
} }
// Adjust output element // Adjust output element
output { output {
padding-top: (@md-input-padding-base-vertical + 1); padding-top: (@mdb-input-padding-base-vertical + 1);
font-size: @md-input-font-size-base; font-size: @mdb-input-font-size-base;
line-height: @md-input-line-height-base; line-height: @mdb-input-line-height-base;
} }
.form-control { .form-control {
height: @md-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) height: @mdb-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: @md-input-padding-base-vertical @md-input-padding-base-horizontal; padding: @mdb-input-padding-base-vertical @mdb-input-padding-base-horizontal;
font-size: @md-input-font-size-base; font-size: @mdb-input-font-size-base;
line-height: @md-input-line-height-base; line-height: @mdb-input-line-height-base;
} }
// Special styles for iOS temporal inputs // Special styles for iOS temporal inputs
@ -41,17 +41,17 @@ output {
input[type="datetime-local"], input[type="datetime-local"],
input[type="month"] { input[type="month"] {
&.form-control { &.form-control {
line-height: @md-input-height-base; line-height: @mdb-input-height-base;
} }
&.input-sm, &.input-sm,
.input-group-sm & { .input-group-sm & {
line-height: @md-input-height-small; line-height: @mdb-input-height-small;
} }
&.input-lg, &.input-lg,
.input-group-lg & { .input-group-lg & {
line-height: @md-input-height-large; line-height: @mdb-input-height-large;
} }
} }
} }
@ -60,7 +60,7 @@ output {
.checkbox { .checkbox {
label { label {
min-height: @md-input-line-height-computed; // Ensure the input doesn't jump when there is no text min-height: @mdb-input-line-height-computed; // Ensure the input doesn't jump when there is no text
} }
} }
@ -72,9 +72,9 @@ output {
.form-control-static { .form-control-static {
// Size it appropriately next to real form controls // Size it appropriately next to real form controls
padding-top: (@md-input-padding-base-vertical + 1); padding-top: (@mdb-input-padding-base-vertical + 1);
padding-bottom: (@md-input-padding-base-vertical + 1); padding-bottom: (@mdb-input-padding-base-vertical + 1);
min-height: (@md-input-line-height-computed + @md-input-font-size-base); min-height: (@mdb-input-line-height-computed + @mdb-input-font-size-base);
} }
@ -84,11 +84,12 @@ output {
// horizontal sizing, wrap controls in the predefined grid classes. `<select>` // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact! // element gets special love because it's special, and that's a fact!
// mixin pulled from bootstrap and altered for less/sass compatibility // mixin pulled from bootstrap and altered for less/sass compatibility with sass parent hack.
.input-size(@parent, @input-height, @padding-vertical, @padding-horizontal, @font-size, @line-height, @border-radius) { // bootstrap-sass has this one, but we would have to then convert it back to less. chicken meet egg.
.input-size(@parent, @mdb-input-height, @padding-vertical, @padding-horizontal, @font-size, @line-height, @border-radius) {
@{parent} { @{parent} {
height: @input-height; height: @mdb-input-height;
padding: @padding-vertical @padding-horizontal; padding: @padding-vertical @padding-horizontal;
font-size: @font-size; font-size: @font-size;
line-height: @line-height; line-height: @line-height;
@ -96,8 +97,8 @@ output {
} }
select@{parent} { select@{parent} {
height: @input-height; height: @mdb-input-height;
line-height: @input-height; line-height: @mdb-input-height;
} }
textarea@{parent}, textarea@{parent},
@ -116,56 +117,56 @@ output {
// The `.form-group-* form-control` variations are sadly duplicated to avoid the // The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074. // issue documented in https://github.com/twbs/bootstrap/issues/15074.
.input-sm { .input-sm {
.input-size('.input-sm', @md-input-height-small, @md-input-padding-small-vertical, @md-input-padding-small-horizontal, @md-input-font-size-small, @md-input-line-height-small, @md-input-border-radius-small); .input-size('.input-sm', @mdb-input-height-small, @mdb-input-padding-small-vertical, @mdb-input-padding-small-horizontal, @mdb-input-font-size-small, @mdb-input-line-height-small, @mdb-input-border-radius-small);
} }
.form-group-sm { .form-group-sm {
.form-control { .form-control {
height: @md-input-height-small; height: @mdb-input-height-small;
padding: @md-input-padding-small-vertical @md-input-padding-small-horizontal; padding: @mdb-input-padding-small-vertical @mdb-input-padding-small-horizontal;
font-size: @md-input-font-size-small; font-size: @mdb-input-font-size-small;
line-height: @md-input-line-height-small; line-height: @mdb-input-line-height-small;
} }
select.form-control { select.form-control {
height: @md-input-height-small; height: @mdb-input-height-small;
line-height: @md-input-height-small; line-height: @mdb-input-height-small;
} }
textarea.form-control, textarea.form-control,
select[multiple].form-control { select[multiple].form-control {
height: auto; height: auto;
} }
.form-control-static { .form-control-static {
height: @md-input-height-small; height: @mdb-input-height-small;
min-height: (@md-input-line-height-computed + @md-input-font-size-small); min-height: (@mdb-input-line-height-computed + @mdb-input-font-size-small);
padding: (@md-input-padding-small-vertical + 1) @md-input-padding-small-horizontal; padding: (@mdb-input-padding-small-vertical + 1) @mdb-input-padding-small-horizontal;
font-size: @md-input-font-size-small; font-size: @mdb-input-font-size-small;
line-height: @md-input-line-height-small; line-height: @mdb-input-line-height-small;
} }
} }
.input-lg { .input-lg {
.input-size('.input-lg', @md-input-height-large, @md-input-padding-large-vertical, @md-input-padding-large-horizontal, @md-input-font-size-large, @md-input-line-height-large, @md-input-border-radius-large); .input-size('.input-lg', @mdb-input-height-large, @mdb-input-padding-large-vertical, @mdb-input-padding-large-horizontal, @mdb-input-font-size-large, @mdb-input-line-height-large, @mdb-input-border-radius-large);
} }
.form-group-lg { .form-group-lg {
.form-control { .form-control {
height: @md-input-height-large; height: @mdb-input-height-large;
padding: @md-input-padding-large-vertical @md-input-padding-large-horizontal; padding: @mdb-input-padding-large-vertical @mdb-input-padding-large-horizontal;
font-size: @md-input-font-size-large; font-size: @mdb-input-font-size-large;
line-height: @md-input-line-height-large; line-height: @mdb-input-line-height-large;
} }
select.form-control { select.form-control {
height: @md-input-height-large; height: @mdb-input-height-large;
line-height: @md-input-height-large; line-height: @mdb-input-height-large;
} }
textarea.form-control, textarea.form-control,
select[multiple].form-control { select[multiple].form-control {
height: auto; height: auto;
} }
.form-control-static { .form-control-static {
height: @md-input-height-large; height: @mdb-input-height-large;
min-height: (@md-input-line-height-computed + @md-input-font-size-large); min-height: (@mdb-input-line-height-computed + @mdb-input-font-size-large);
padding: (@md-input-padding-large-vertical + 1) @md-input-padding-large-horizontal; padding: (@mdb-input-padding-large-vertical + 1) @mdb-input-padding-large-horizontal;
font-size: @md-input-font-size-large; font-size: @mdb-input-font-size-large;
line-height: @md-input-line-height-large; line-height: @mdb-input-line-height-large;
} }
} }
@ -179,20 +180,20 @@ output {
.checkbox, .checkbox,
.radio-inline, .radio-inline,
.checkbox-inline { .checkbox-inline {
padding-top: (@md-input-padding-base-vertical + 1); // Default padding plus a border padding-top: (@mdb-input-padding-base-vertical + 1); // Default padding plus a border
} }
// Account for padding we're adding to ensure the alignment and of help text // Account for padding we're adding to ensure the alignment and of help text
// and other content below items // and other content below items
.radio, .radio,
.checkbox { .checkbox {
min-height: (@md-input-line-height-computed + (@md-input-padding-base-vertical + 1)); min-height: (@mdb-input-line-height-computed + (@mdb-input-padding-base-vertical + 1));
} }
// Reset spacing and right align labels, but scope to media queries so that // Reset spacing and right align labels, but scope to media queries so that
// labels on narrow viewports stack the same as a default form example. // labels on narrow viewports stack the same as a default form example.
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
.control-label { .control-label {
padding-top: (@md-input-padding-base-vertical + 1); // Default padding plus a border padding-top: (@mdb-input-padding-base-vertical + 1); // Default padding plus a border
} }
} }
@ -204,16 +205,16 @@ output {
.form-group-lg { .form-group-lg {
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
.control-label { .control-label {
padding-top: ((@md-input-padding-large-vertical * @md-input-line-height-large) + 1); padding-top: ((@mdb-input-padding-large-vertical * @mdb-input-line-height-large) + 1);
font-size: @md-input-font-size-large; font-size: @mdb-input-font-size-large;
} }
} }
} }
.form-group-sm { .form-group-sm {
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
.control-label { .control-label {
padding-top: (@md-input-padding-small-vertical + 1); padding-top: (@mdb-input-padding-small-vertical + 1);
font-size: @md-input-font-size-small; font-size: @mdb-input-font-size-small;
} }
} }
} }

52
less/_inputs.less
View File

@ -18,7 +18,7 @@
box-shadow: none; box-shadow: none;
} }
&.is-focused .form-control { &.is-focused .form-control {
background-image: linear-gradient(@color, @color), linear-gradient(@input-underline-color, @input-underline-color); background-image: linear-gradient(@color, @color), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
} }
label.control-label, label.control-label,
.help-block { .help-block {
@ -28,14 +28,14 @@
} }
.form-group-size-variant(@placeholder-font-size, @label-top-margin, @vertical-padding, @line-height, @label-as-placeholder-shim){ .form-group-size-variant(@placeholder-font-size, @label-top-margin, @vertical-padding, @line-height, @label-as-placeholder-shim){
@static-font-size: ceil((@label-floating-size-ratio * @placeholder-font-size)); @static-font-size: ceil((@mdb-label-static-size-ratio * @placeholder-font-size));
@static-line-height: (@label-floating-size-ratio * @line-height); @static-line-height: (@mdb-label-static-size-ratio * @line-height);
@label-as-placeholder-top: -1 * (@vertical-padding + @label-as-placeholder-shim); @label-as-placeholder-top: -1 * (@vertical-padding + @label-as-placeholder-shim);
@label-top: @label-as-placeholder-top - (@placeholder-font-size + @vertical-padding); @label-top: @label-as-placeholder-top - (@placeholder-font-size + @vertical-padding);
@help-block-font-size: ceil((@help-block-size-ratio * @placeholder-font-size)); @help-block-font-size: ceil((@mdb-help-block-size-ratio * @placeholder-font-size));
@help-block-line-height: (@help-block-size-ratio * @line-height); @help-block-line-height: (@mdb-help-block-size-ratio * @line-height);
// form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned // 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; margin: (@label-top-margin + @static-font-size) 0 0 0;
@ -102,7 +102,7 @@
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
.form-control { .form-control {
border: 0; border: 0;
background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color); background-image: linear-gradient(@primary, @primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
background-size: 0 2px, 100% 1px; background-size: 0 2px, 100% 1px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center bottom, center calc(~"100% - 1px"); background-position: center bottom, center calc(~"100% - 1px");
@ -114,7 +114,7 @@
// Placeholders and and labels-as-placeholders should look the same // Placeholders and and labels-as-placeholders should look the same
.material-placeholder({ .material-placeholder({
color: @input-placeholder-color; color: @mdb-input-placeholder-color;
font-weight: normal; font-weight: normal;
}); });
@ -132,19 +132,19 @@
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
background-image: none; background-image: none;
border-bottom: 1px dotted @input-underline-color; border-bottom: 1px dotted @mdb-input-underline-color;
} }
} }
&.is-focused .form-control { &.is-focused .form-control {
outline: none; outline: none;
background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color); background-image: linear-gradient(@primary, @primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
background-size: 100% 2px, 100% 1px; background-size: 100% 2px, 100% 1px;
box-shadow: none; box-shadow: none;
transition-duration: 0.3s; transition-duration: 0.3s;
.material-input:after { .material-input:after {
background-color: @input-default; background-color: @mdb-input-default;
} }
} }
@ -168,7 +168,7 @@
label, label,
label.control-label { label.control-label {
// same label properties as form-group placeholder // same label properties as form-group placeholder
color: @input-placeholder-color; color: @mdb-input-placeholder-color;
font-weight: normal; font-weight: normal;
} }
@ -184,21 +184,21 @@
} }
} }
.variations(~" label.control-label", color, @input-placeholder-color); // default label color variations .variations(~" label.control-label", color, @mdb-input-placeholder-color); // default label color variations
.variations(~".is-focused label.control-label", color, @input-default); // focused label color variations .variations(~".is-focused label.control-label", color, @mdb-input-default); // focused label color variations
.variations(~".is-focused.label-placeholder label.control-label", color, @input-placeholder-color); // default label color variations .variations(~".is-focused.label-placeholder label.control-label", color, @mdb-input-placeholder-color); // default label color variations
// default floating size/location // default floating size/location
.form-group-size-variant(@md-input-font-size-base, @md-label-top-margin-base, @md-input-padding-base-vertical, @md-input-line-height-base, @md-label-as-placeholder-shim-base); .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 // sm floating size/location
&.form-group-sm { &.form-group-sm {
.form-group-size-variant(@md-input-font-size-small, @md-label-top-margin-small, @md-input-padding-small-vertical, @md-input-line-height-small, @md-label-as-placeholder-shim-small); .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 // lg floating size/location
&.form-group-lg { &.form-group-lg {
.form-group-size-variant(@md-input-font-size-large, @md-label-top-margin-large, @md-input-padding-large-vertical, @md-input-line-height-large, @md-label-as-placeholder-shim-large); .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. // Hints - position: absolute approach - uses no vertical space, text wrapping - not so good.
@ -215,13 +215,13 @@
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
.generic-variations(~".is-focused .form-control", @primary, { .generic-variations(~".is-focused .form-control", @primary, {
background-image: linear-gradient(@material-color, @material-color), linear-gradient(@input-underline-color, @input-underline-color); background-image: linear-gradient(@mdb-color, @mdb-color), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
}); });
.form-group-validation-state(has-warning, @input-warning); .form-group-validation-state(has-warning, @mdb-input-warning);
.form-group-validation-state(has-error, @input-danger); .form-group-validation-state(has-error, @mdb-input-danger);
.form-group-validation-state(has-success, @input-success); .form-group-validation-state(has-success, @mdb-input-success);
.form-group-validation-state(has-info, @input-info); .form-group-validation-state(has-info, @mdb-input-info);
textarea { textarea {
resize: none; resize: none;
@ -247,7 +247,7 @@ select.form-control {
.form-group.is-focused & { .form-group.is-focused & {
box-shadow: none; box-shadow: none;
border-color: @input-underline-color; border-color: @mdb-input-underline-color;
} }
&[multiple] { &[multiple] {
@ -270,7 +270,7 @@ select.form-control {
// input group/addon related styles // input group/addon related styles
// default margin // default margin
.input-group-button-variation(@md-input-padding-base-vertical); .input-group-button-variation(@mdb-input-padding-base-vertical);
.form-group { .form-group {
//.form-control { //.form-control {
@ -279,12 +279,12 @@ select.form-control {
// sm margin // sm margin
&.form-group-sm { &.form-group-sm {
.input-group-button-variation(@md-input-padding-small-vertical); .input-group-button-variation(@mdb-input-padding-small-vertical);
} }
// lg margin // lg margin
&.form-group-lg { &.form-group-lg {
.input-group-button-variation(@md-input-padding-large-vertical); .input-group-button-variation(@mdb-input-padding-large-vertical);
} }
} }

90
less/_mixins-fullpalette.less
View File

@ -4,10 +4,10 @@
// To use this mixin you should pass a function as final parameter to define // To use this mixin you should pass a function as final parameter to define
// the style. In that definition you can use the following variables to define it. // the style. In that definition you can use the following variables to define it.
// //
// @material-color-name ---> "red", "green", "indigo" ... // @mdb-color-name ---> "red", "green", "indigo" ...
// @material-color-full-name ---> "red", "green-50", "indigo-400" ... // @mdb-color-full-name ---> "red", "green-50", "indigo-400" ...
// @material-color ---> #f44336, #e8f5e9, #5c6bc0 ... // @mdb-color ---> #f44336, #e8f5e9, #5c6bc0 ...
// @material-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ... // @mdb-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
// //
.generic-variations(@extra, @default, @func) { .generic-variations(@extra, @default, @func) {
@ -16,79 +16,79 @@
// bootstrap styles // bootstrap styles
&@{extra}, &-default@{extra} { &@{extra}, &-default@{extra} {
@material-color-name: "default"; @mdb-color-name: "default";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @default; @mdb-color: @default;
@material-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-black@{extra} { &-black@{extra} {
@material-color-name: "black"; @mdb-color-name: "black";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @black; @mdb-color: @black;
@material-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-white@{extra} { &-white@{extra} {
@material-color-name: "white"; @mdb-color-name: "white";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @white; @mdb-color: @white;
@material-text-color: @lightbg-text; @mdb-text-color: @lightbg-text;
@func(); @func();
} }
&-inverse@{extra} { &-inverse@{extra} {
@material-color-name: "inverse"; @mdb-color-name: "inverse";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @inverse; @mdb-color: @inverse;
@material-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor); @mdb-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
@func(); @func();
} }
&-primary@{extra} { &-primary@{extra} {
@material-color-name: "primary"; @mdb-color-name: "primary";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @primary; @mdb-color: @primary;
@material-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-success@{extra} { &-success@{extra} {
@material-color-name: "success"; @mdb-color-name: "success";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @success; @mdb-color: @success;
@material-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-info@{extra} { &-info@{extra} {
@material-color-name: "info"; @mdb-color-name: "info";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @info; @mdb-color: @info;
@material-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-warning@{extra} { &-warning@{extra} {
@material-color-name: "warning"; @mdb-color-name: "warning";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @warning; @mdb-color: @warning;
@material-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-danger@{extra} { &-danger@{extra} {
@material-color-name: "danger"; @mdb-color-name: "danger";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @danger; @mdb-color: @danger;
@material-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
// given a color build multiples dephs // given a color build multiples dephs
.generic-variations-factory(@material-color-name) { .generic-variations-factory(@mdb-color-name) {
// given a color and its deph build css // given a color and its deph build css
.generic-variations-factory-deep(@material-color-number) { .generic-variations-factory-deep(@mdb-color-number) {
&-material-@{material-color-name}@{material-color-number}@{extra} { &-material-@{material-color-name}@{material-color-number}@{extra} {
@material-color-full-name: "@{material-color-name}@{material-color-number}"; @mdb-color-full-name: "@{material-color-name}@{material-color-number}";
@material-color: @@material-color-full-name; @mdb-color: @@material-color-full-name;
@material-text-color: contrast(@material-color, @lightbg-text, @darkbg-text, @contrast-factor); @mdb-text-color: contrast(@mdb-color, @lightbg-text, @darkbg-text, @contrast-factor);
@func(); @func();
} }

12
less/_mixins-shared.less
View File

@ -8,24 +8,24 @@
// usage: .variations(~" .check", color, transparent); // usage: .variations(~" .check", color, transparent);
.variations(@extra, @property, @default) { .variations(@extra, @property, @default) {
.generic-variations(@extra, @default, { .generic-variations(@extra, @default, {
@{property}: @material-color; @{property}: @mdb-color;
}); });
} }
.background-variations(@extra, @default) { .background-variations(@extra, @default) {
.generic-variations(@extra, @default, { .generic-variations(@extra, @default, {
background-color: @material-color; background-color: @mdb-color;
& when (@material-color = @btn-default) { & when (@mdb-color = @btn-default) {
color: @lightbg-text; color: @lightbg-text;
} }
& when not (@material-color = @btn-default) { & when not (@mdb-color = @btn-default) {
color: @material-text-color; color: @mdb-text-color;
} }
}); });
} }
.text-variations(@extra, @default) { .text-variations(@extra, @default) {
.generic-variations(@extra, @default, { .generic-variations(@extra, @default, {
color: @material-color; color: @mdb-color;
}); });
} }

90
less/_mixins.less
View File

@ -4,10 +4,10 @@
// To use this mixin you should pass a function as final parameter to define // To use this mixin you should pass a function as final parameter to define
// the style. In that definition you can use the following variables to define it. // the style. In that definition you can use the following variables to define it.
// //
// @material-color-name ---> "red", "green", "indigo" ... // @mdb-color-name ---> "red", "green", "indigo" ...
// @material-color-full-name ---> "red", "green-50", "indigo-400" ... // @mdb-color-full-name ---> "red", "green-50", "indigo-400" ...
// @material-color ---> #f44336, #e8f5e9, #5c6bc0 ... // @mdb-color ---> #f44336, #e8f5e9, #5c6bc0 ...
// @material-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ... // @mdb-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
// //
@ -17,79 +17,79 @@
// bootstrap styles // bootstrap styles
&@{extra}, &-default@{extra} { &@{extra}, &-default@{extra} {
@material-color-name: "default"; @mdb-color-name: "default";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @default; @mdb-color: @default;
@material-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-black@{extra} { &-black@{extra} {
@material-color-name: "black"; @mdb-color-name: "black";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @black; @mdb-color: @black;
@material-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-white@{extra} { &-white@{extra} {
@material-color-name: "white"; @mdb-color-name: "white";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @white; @mdb-color: @white;
@material-text-color: @lightbg-text; @mdb-text-color: @lightbg-text;
@func(); @func();
} }
&-inverse@{extra} { &-inverse@{extra} {
@material-color-name: "inverse"; @mdb-color-name: "inverse";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @inverse; @mdb-color: @inverse;
@material-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor); @mdb-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
@func(); @func();
} }
&-primary@{extra} { &-primary@{extra} {
@material-color-name: "primary"; @mdb-color-name: "primary";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @primary; @mdb-color: @primary;
@material-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-success@{extra} { &-success@{extra} {
@material-color-name: "success"; @mdb-color-name: "success";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @success; @mdb-color: @success;
@material-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-info@{extra} { &-info@{extra} {
@material-color-name: "info"; @mdb-color-name: "info";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @info; @mdb-color: @info;
@material-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-warning@{extra} { &-warning@{extra} {
@material-color-name: "warning"; @mdb-color-name: "warning";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @warning; @mdb-color: @warning;
@material-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
&-danger@{extra} { &-danger@{extra} {
@material-color-name: "danger"; @mdb-color-name: "danger";
@material-color-full-name: @material-color-name; @mdb-color-full-name: @mdb-color-name;
@material-color: @danger; @mdb-color: @danger;
@material-text-color: @darkbg-text; @mdb-text-color: @darkbg-text;
@func(); @func();
} }
// given a color build multiples dephs // given a color build multiples dephs
.generic-variations-factory(@material-color-name) { .generic-variations-factory(@mdb-color-name) {
// given a color and its deph build css // given a color and its deph build css
.generic-variations-factory-deep(@material-color-number) { .generic-variations-factory-deep(@mdb-color-number) {
&-material-@{material-color-name}@{material-color-number}@{extra} { &-material-@{material-color-name}@{material-color-number}@{extra} {
@material-color-full-name: "@{material-color-name}@{material-color-number}"; @mdb-color-full-name: "@{material-color-name}@{material-color-number}";
@material-color: @@material-color-full-name; @mdb-color: @@material-color-full-name;
@material-text-color: contrast(@material-color, @lightbg-text, @darkbg-text, @contrast-factor); @mdb-text-color: contrast(@mdb-color, @lightbg-text, @darkbg-text, @contrast-factor);
@func(); @func();
} }

20
less/_navbar.less
View File

@ -174,7 +174,7 @@
// re-normalize inputs in a navbar the size of standard bootstrap since our normal inputs are larger by spec than bootstrap // re-normalize inputs in a navbar the size of standard bootstrap since our normal inputs are larger by spec than bootstrap
//--- //---
//height: @input-height-base; //height: @mdb-input-height-base;
@bs-line-height-base: 1.428571429; @bs-line-height-base: 1.428571429;
@bs-line-height-computed: floor((@font-size-base * @bs-line-height-base)); // ~20px @bs-line-height-computed: floor((@font-size-base * @bs-line-height-base)); // ~20px
height: (@bs-line-height-computed + 8px); height: (@bs-line-height-computed + 8px);
@ -186,30 +186,30 @@
// SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content
.generic-variations(~".navbar", @primary, { .generic-variations(~".navbar", @primary, {
background-color: @material-color; background-color: @mdb-color;
color: @material-text-color; color: @mdb-text-color;
// deeply defined to override welljumbo class without !impotant need // deeply defined to override welljumbo class without !impotant need
.navbar-form .form-group input.form-control::placeholder, .navbar-form input.form-control::placeholder { .navbar-form .form-group input.form-control::placeholder, .navbar-form input.form-control::placeholder {
color: @material-text-color; color: @mdb-text-color;
} }
.dropdown-menu { .dropdown-menu {
border-radius: @dropdown-radius; border-radius: @mdb-dropdown-radius;
li > a { li > a {
font-size: @dropdown-font-size; font-size: @mdb-dropdown-font-size;
padding: 13px 16px; padding: 13px 16px;
&:hover, &:hover,
&:focus { &:focus {
color: @material-color; color: @mdb-color;
background-color: @grey-200; background-color: @grey-200;
} }
} }
.active > a { .active > a {
&:hover, &:hover,
&:focus { &:focus {
color: @material-text-color; color: @mdb-text-color;
} }
background-color: @material-color; background-color: @mdb-color;
color: @material-text-color; color: @mdb-text-color;
} }
} }
}); });

6
less/_popups.less
View File

@ -1,9 +1,9 @@
.popover, .tooltip-inner { .popover, .tooltip-inner {
color: @popover-color; color: @mdb-popover-color;
line-height: 1em; line-height: 1em;
background: @popover-background; background: @mdb-popover-background;
border: none; border: none;
border-radius: @material-border-radius; border-radius: @mdb-border-radius;
.shadow-z-1(); .shadow-z-1();
} }

16
less/_radios.less
View File

@ -11,16 +11,16 @@
.form-group { .form-group {
// default label size/location // default label size/location
.form-group-radio-variant(@md-input-font-size-base, @md-input-line-height-base); .form-group-radio-variant(@mdb-input-font-size-base, @mdb-input-line-height-base);
// sm label size/location // sm label size/location
&.form-group-sm { &.form-group-sm {
.form-group-radio-variant(@md-input-font-size-small, @md-input-line-height-small); .form-group-radio-variant(@mdb-input-font-size-small, @mdb-input-line-height-small);
} }
// lg label size/location // lg label size/location
&.form-group-lg { &.form-group-lg {
.form-group-radio-variant(@md-input-font-size-large, @md-input-line-height-large); .form-group-radio-variant(@mdb-input-font-size-large, @mdb-input-line-height-large);
} }
} }
@ -29,7 +29,7 @@
cursor: pointer; cursor: pointer;
padding-left: 45px; padding-left: 45px;
position: relative; position: relative;
color: @radio-label-color; color: @mdb-radio-label-color;
span { span {
display: block; display: block;
@ -39,7 +39,7 @@
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.circle { .circle {
border: 2px solid @radio-border-color; border: 2px solid @mdb-radio-border-color;
height: 15px; height: 15px;
width: 15px; width: 15px;
border-radius: 100%; border-radius: 100%;
@ -48,7 +48,7 @@
height: 15px; height: 15px;
width: 15px; width: 15px;
border-radius: 100%; border-radius: 100%;
background-color: @radio-default; background-color: @mdb-radio-default;
transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0);
} }
.check:after { .check:after {
@ -74,8 +74,8 @@
} }
} }
.variations(~" input[type=radio]:checked ~ .check", background-color, @radio-default); .variations(~" input[type=radio]:checked ~ .check", background-color, @mdb-radio-default);
.variations(~" input[type=radio]:checked ~ .circle", border-color, @radio-default); .variations(~" input[type=radio]:checked ~ .circle", border-color, @mdb-radio-default);
input[type=radio][disabled] ~ .check, input[type=radio][disabled] ~ .check,
input[type=radio][disabled] ~ .circle { input[type=radio][disabled] ~ .circle {

12
less/_togglebutton.less
View File

@ -7,16 +7,16 @@
.form-group { .form-group {
//// default label size/location //// default label size/location
.form-group-toggle-variant(@md-input-font-size-base, @md-input-line-height-base); .form-group-toggle-variant(@mdb-input-font-size-base, @mdb-input-line-height-base);
// sm label size/location // sm label size/location
&.form-group-sm { &.form-group-sm {
.form-group-toggle-variant(@md-input-font-size-small, @md-input-line-height-small); .form-group-toggle-variant(@mdb-input-font-size-small, @mdb-input-line-height-small);
} }
// lg label size/location // lg label size/location
&.form-group-lg { &.form-group-lg {
.form-group-toggle-variant(@md-input-font-size-large, @md-input-line-height-large); .form-group-toggle-variant(@mdb-input-font-size-large, @mdb-input-line-height-large);
} }
.togglebutton { .togglebutton {
@ -26,7 +26,7 @@
} }
label { label {
cursor: pointer; cursor: pointer;
color: @togglebutton-label-color; color: @mdb-toggle-label-color;
// Hide original checkbox // Hide original checkbox
input[type=checkbox] { input[type=checkbox] {
@ -79,14 +79,14 @@
// Switch bg on // Switch bg on
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content // 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, { .generic-variations(~" label input[type=checkbox]:checked + .toggle", @primary, {
background-color: fade(@material-color, 50%); background-color: fade(@mdb-color, 50%);
}); });
// Handle on // Handle on
// SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content // 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); .variations(~" label input[type=checkbox]:checked + .toggle:after", background-color, @primary);
// Ripple on // Ripple on
.generic-variations(~" label input[type=checkbox]:checked + .toggle:active:after", @primary, { .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%); box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px fade(@mdb-color, 10%);
}); });
} }
} }

130
less/_variables.less
View File

@ -2,7 +2,7 @@
@zero: 0; @zero: 0;
// material icons path // material icons path
@material-font-path: "../fonts"; @mdb-font-path: "../fonts";
// Bootstrap shades // Bootstrap shades
@primary: @teal; @primary: @teal;
@ -44,21 +44,21 @@
@btn-danger: @danger; @btn-danger: @danger;
@btn-danger-text: @darkbg-text; @btn-danger-text: @darkbg-text;
@input-unchecked: rgba(137, 137, 137, 0.3); @mdb-input-unchecked: rgba(137, 137, 137, 0.3);
@input-checked: rgba(15, 157, 88, 0.3); @mdb-input-checked: rgba(15, 157, 88, 0.3);
@radio-default: @lightbg-text; @mdb-radio-default: @lightbg-text;
@radio-primary: @primary; @mdb-radio-primary: @primary;
@radio-success: @success; @mdb-radio-success: @success;
@radio-info: @info; @mdb-radio-info: @info;
@radio-warning: @warning; @mdb-radio-warning: @warning;
@radio-danger: @danger; @mdb-radio-danger: @danger;
@input-danger: @danger; @mdb-input-danger: @danger;
@input-default: @primary; @mdb-input-default: @primary;
@input-warning: @warning; @mdb-input-warning: @warning;
@input-success: @success; @mdb-input-success: @success;
@input-info: @info; @mdb-input-info: @info;
@alert-success: @success; @alert-success: @success;
@alert-info: @info; @alert-info: @info;
@ -79,92 +79,88 @@
// Global Material variables // Global Material variables
@material-border-radius: 2px; @mdb-border-radius: 2px;
// -------------------- // --------------------
// inputs // inputs
@input-placeholder-color: #BDBDBD; @mdb-input-placeholder-color: #BDBDBD;
@label-floating-size-ratio: 75 / 100; @mdb-input-underline-color: #D2D2D2;
@help-block-size-ratio: 75 / 100; @mdb-label-static-size-ratio: 75 / 100;
@input-underline-color: #D2D2D2; @mdb-help-block-size-ratio: 75 / 100;
@md-input-font-size-base: 16px; @mdb-input-font-size-base: 16px;
@md-input-font-size-large: ceil((@font-size-base * 1.25)); // ~20px @mdb-input-font-size-large: ceil((@font-size-base * 1.25)); // ~20px
@md-input-font-size-small: ceil((@font-size-base * 0.75)); // ~12px @mdb-input-font-size-small: ceil((@font-size-base * 0.75)); // ~12px
// size when static or floating with focus i.e. 16px
//@md-input-label-font-size-base: ceil((@label-floating-size-ratio * @md-input-font-size-base));
//@md-input-label-font-size-small:ceil(( @label-floating-size-ratio * @md-input-font-size-small));
//@md-input-label-font-size-large: ceil((@label-floating-size-ratio * @md-input-font-size-large));
// 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. //** Unit-less `line-height` for use in components like buttons.
@md-input-line-height-base: 1.428571429; // 20/14 @mdb-input-line-height-base: 1.428571429; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@md-input-line-height-computed: floor((@md-input-font-size-base * @md-input-line-height-base)); // ~20px @mdb-input-line-height-computed: floor((@mdb-input-font-size-base * @mdb-input-line-height-base)); // ~20px
@md-input-line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome @mdb-input-line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
@md-input-line-height-small: 1.5; @mdb-input-line-height-small: 1.5;
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
@md-input-padding-base-vertical: 8px - 1px; // was 6. @mdb-input-padding-base-vertical: 8px - 1px; // was 6.
@md-input-padding-base-horizontal: 0px; // was 12. @mdb-input-padding-base-horizontal: 0px; // was 12.
@md-label-as-placeholder-shim-base: 0px; // manual adjustment of label top when positioned as placeholder @mdb-label-as-placeholder-shim-base: 0px; // manual adjustment of label top when positioned as placeholder
@md-label-top-margin-base: 16px; @mdb-label-top-margin-base: 16px;
@md-input-padding-large-vertical: 10px - 1px; // 10 @mdb-input-padding-large-vertical: 10px - 1px; // 10
@md-input-padding-large-horizontal: 0px; // 16 @mdb-input-padding-large-horizontal: 0px; // 16
@md-label-as-placeholder-shim-large: -4px; // manual adjustment of label top when positioned as placeholder @mdb-label-as-placeholder-shim-large: -4px; // manual adjustment of label top when positioned as placeholder
@md-label-top-margin-large: 16px; @mdb-label-top-margin-large: 16px;
@md-input-padding-small-vertical: 4px - 1px; // 5 @mdb-input-padding-small-vertical: 4px - 1px; // 5
@md-input-padding-small-horizontal: 0px; // 10 @mdb-input-padding-small-horizontal: 0px; // 10
@md-label-as-placeholder-shim-small: 8px; // manual adjustment of label top when positioned as placeholder @mdb-label-as-placeholder-shim-small: 8px; // manual adjustment of label top when positioned as placeholder
@md-label-top-margin-small: 12px; @mdb-label-top-margin-small: 12px;
@md-input-padding-xs-vertical: 2px; // 1 @mdb-input-padding-xs-vertical: 2px; // 1
@md-input-padding-xs-horizontal: 0px; // 5 @mdb-input-padding-xs-horizontal: 0px; // 5
@md-input-border-radius-base: 4px; @mdb-input-border-radius-base: 4px;
@md-input-border-radius-large: 6px; @mdb-input-border-radius-large: 6px;
@md-input-border-radius-small: 3px; @mdb-input-border-radius-small: 3px;
//** Default `.form-control` height //** Default `.form-control` height
@md-input-height-base: (@md-input-line-height-computed + (@md-input-padding-base-vertical * 2) + 2); @mdb-input-height-base: (@mdb-input-line-height-computed + (@mdb-input-padding-base-vertical * 2) + 2);
//** Large `.form-control` height //** Large `.form-control` height
@md-input-height-large: (ceil(@md-input-font-size-large * @md-input-line-height-large) + (@md-input-padding-large-vertical * 2) + 2); @mdb-input-height-large: (ceil(@mdb-input-font-size-large * @mdb-input-line-height-large) + (@mdb-input-padding-large-vertical * 2) + 2);
//** Small `.form-control` height //** Small `.form-control` height
@md-input-height-small: (floor(@md-input-font-size-small * @md-input-line-height-small) + (@md-input-padding-small-vertical * 2) + 2); @mdb-input-height-small: (floor(@mdb-input-font-size-small * @mdb-input-line-height-small) + (@mdb-input-padding-small-vertical * 2) + 2);
// Card // Card
@card-body-text: @lightbg-text; @mdb-card-body-text: @lightbg-text;
@card-body-background: #fff; @mdb-card-body-background: #fff;
@card-image-headline: #fff; @mdb-card-image-headline: #fff;
@text-disabled: #a8a8a8; @text-disabled: #a8a8a8;
@background-disabled: #eaeaea; @background-disabled: #eaeaea;
// Checkboxes // Checkboxes
@checkbox-size: 20px; @mdb-checkbox-size: 20px;
@checkbox-animation-ripple: 500ms; @mdb-checkbox-animation-ripple: 500ms;
@checkbox-animation-check: 0.3s; @mdb-checkbox-animation-check: 0.3s;
@checkbox-checked-color: #4caf50; @mdb-checkbox-checked-color: #4caf50;
@checkbox-label-color: rgba(0, 0, 0, .54); @mdb-checkbox-label-color: rgba(0, 0, 0, .54);
@checkbox-border-color: @checkbox-label-color; @mdb-checkbox-border-color: @mdb-checkbox-label-color;
// Popovers and Popups // Popovers and Popups
@popover-background: rgba(101, 101, 101, 0.9); @mdb-popover-background: rgba(101, 101, 101, 0.9);
@popover-color: #ececec; @mdb-popover-color: #ececec;
// Dropdown Menu // Dropdown Menu
@dropdown-radius: 2px; @mdb-dropdown-radius: 2px;
@dropdown-font-size: 16px; @mdb-dropdown-font-size: 16px;
// Toggle // Toggle
@togglebutton-label-color: @checkbox-label-color; @mdb-toggle-label-color: @mdb-checkbox-label-color;
// Radio: // Radio:
@radio-label-color: @checkbox-label-color; @mdb-radio-label-color: @mdb-checkbox-label-color;
@radio-border-color: @checkbox-border-color; @mdb-radio-border-color: @mdb-checkbox-border-color;

3
less/material.less
View File

@ -1,3 +1,6 @@
@import "../bower_components/bootstrap/less/variables.less";
@import "../bower_components/bootstrap/less/mixins.less";
@import "_colors.less"; @import "_colors.less";
@import "_variables.less"; @import "_variables.less";
@import "_mixins.less"; @import "_mixins.less";