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

This commit is contained in:
Kevin Ross 2015-11-21 08:56:29 -06:00
parent 61ba1b1d6a
commit f64ff8a142
15 changed files with 296 additions and 296 deletions

View File

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

View File

@ -34,22 +34,22 @@
// BTN hover effect
// 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, {
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
// 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, {
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
// 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, {
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
// 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, {
background-color: fade(@material-color, 20%);
background-color: fade(@mdb-color, 20%);
});
}

View File

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

View File

@ -12,23 +12,23 @@
.form-group {
//// 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
&.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
&.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 {
label {
cursor: pointer;
padding-left: 0; // Reset for Bootstrap rule
color: @checkbox-label-color;
color: @mdb-checkbox-label-color;
}
// Hide native checkbox
@ -54,8 +54,8 @@
left: 0;
content: "";
background-color: rgba(0,0,0,.84);
height: @checkbox-size;
width: @checkbox-size;
height: @mdb-checkbox-size;
width: @mdb-checkbox-size;
border-radius: 100%;
z-index: 1;
opacity: 0;
@ -66,9 +66,9 @@
.check {
position: relative;
display: inline-block;
width: @checkbox-size;
height: @checkbox-size;
border: 2px solid @checkbox-border-color;
width: @mdb-checkbox-size;
height: @mdb-checkbox-size;
border: 2px solid @mdb-checkbox-border-color;
border-radius: 2px;
overflow: hidden;
z-index: 1;
@ -90,7 +90,7 @@
0 0 0 0,
0 0 0 0,
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,
-5px 5px 0 10px,
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 {
animation: rippleOff @checkbox-animation-ripple;
animation: rippleOff @mdb-checkbox-animation-ripple;
}
input[type=checkbox]:checked + .checkbox-material:before {
animation: rippleOn @checkbox-animation-ripple;
animation: rippleOn @mdb-checkbox-animation-ripple;
}
// Ripple effect on click
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 {
animation: rippleOn @checkbox-animation-ripple forwards;
animation: rippleOn @mdb-checkbox-animation-ripple forwards;
}
// 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:before", color, @checkbox-checked-color);
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, @checkbox-checked-color);
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", border-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, @mdb-checkbox-checked-color);
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", border-color, @mdb-checkbox-checked-color);
}
}

View File

@ -8,22 +8,22 @@
// --------------------------------------------------
legend {
margin-bottom: @md-input-line-height-computed;
font-size: (@md-input-font-size-base * 1.5);
margin-bottom: @mdb-input-line-height-computed;
font-size: (@mdb-input-font-size-base * 1.5);
}
// Adjust output element
output {
padding-top: (@md-input-padding-base-vertical + 1);
font-size: @md-input-font-size-base;
line-height: @md-input-line-height-base;
padding-top: (@mdb-input-padding-base-vertical + 1);
font-size: @mdb-input-font-size-base;
line-height: @mdb-input-line-height-base;
}
.form-control {
height: @md-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;
font-size: @md-input-font-size-base;
line-height: @md-input-line-height-base;
height: @mdb-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: @mdb-input-padding-base-vertical @mdb-input-padding-base-horizontal;
font-size: @mdb-input-font-size-base;
line-height: @mdb-input-line-height-base;
}
// Special styles for iOS temporal inputs
@ -41,17 +41,17 @@ output {
input[type="datetime-local"],
input[type="month"] {
&.form-control {
line-height: @md-input-height-base;
line-height: @mdb-input-height-base;
}
&.input-sm,
.input-group-sm & {
line-height: @md-input-height-small;
line-height: @mdb-input-height-small;
}
&.input-lg,
.input-group-lg & {
line-height: @md-input-height-large;
line-height: @mdb-input-height-large;
}
}
}
@ -60,7 +60,7 @@ output {
.checkbox {
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 {
// Size it appropriately next to real form controls
padding-top: (@md-input-padding-base-vertical + 1);
padding-bottom: (@md-input-padding-base-vertical + 1);
min-height: (@md-input-line-height-computed + @md-input-font-size-base);
padding-top: (@mdb-input-padding-base-vertical + 1);
padding-bottom: (@mdb-input-padding-base-vertical + 1);
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>`
// element gets special love because it's special, and that's a fact!
// mixin pulled from bootstrap and altered for less/sass compatibility
.input-size(@parent, @input-height, @padding-vertical, @padding-horizontal, @font-size, @line-height, @border-radius) {
// mixin pulled from bootstrap and altered for less/sass compatibility with sass parent hack.
// 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} {
height: @input-height;
height: @mdb-input-height;
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
@ -96,8 +97,8 @@ output {
}
select@{parent} {
height: @input-height;
line-height: @input-height;
height: @mdb-input-height;
line-height: @mdb-input-height;
}
textarea@{parent},
@ -116,56 +117,56 @@ output {
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
.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-control {
height: @md-input-height-small;
padding: @md-input-padding-small-vertical @md-input-padding-small-horizontal;
font-size: @md-input-font-size-small;
line-height: @md-input-line-height-small;
height: @mdb-input-height-small;
padding: @mdb-input-padding-small-vertical @mdb-input-padding-small-horizontal;
font-size: @mdb-input-font-size-small;
line-height: @mdb-input-line-height-small;
}
select.form-control {
height: @md-input-height-small;
line-height: @md-input-height-small;
height: @mdb-input-height-small;
line-height: @mdb-input-height-small;
}
textarea.form-control,
select[multiple].form-control {
height: auto;
}
.form-control-static {
height: @md-input-height-small;
min-height: (@md-input-line-height-computed + @md-input-font-size-small);
padding: (@md-input-padding-small-vertical + 1) @md-input-padding-small-horizontal;
font-size: @md-input-font-size-small;
line-height: @md-input-line-height-small;
height: @mdb-input-height-small;
min-height: (@mdb-input-line-height-computed + @mdb-input-font-size-small);
padding: (@mdb-input-padding-small-vertical + 1) @mdb-input-padding-small-horizontal;
font-size: @mdb-input-font-size-small;
line-height: @mdb-input-line-height-small;
}
}
.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-control {
height: @md-input-height-large;
padding: @md-input-padding-large-vertical @md-input-padding-large-horizontal;
font-size: @md-input-font-size-large;
line-height: @md-input-line-height-large;
height: @mdb-input-height-large;
padding: @mdb-input-padding-large-vertical @mdb-input-padding-large-horizontal;
font-size: @mdb-input-font-size-large;
line-height: @mdb-input-line-height-large;
}
select.form-control {
height: @md-input-height-large;
line-height: @md-input-height-large;
height: @mdb-input-height-large;
line-height: @mdb-input-height-large;
}
textarea.form-control,
select[multiple].form-control {
height: auto;
}
.form-control-static {
height: @md-input-height-large;
min-height: (@md-input-line-height-computed + @md-input-font-size-large);
padding: (@md-input-padding-large-vertical + 1) @md-input-padding-large-horizontal;
font-size: @md-input-font-size-large;
line-height: @md-input-line-height-large;
height: @mdb-input-height-large;
min-height: (@mdb-input-line-height-computed + @mdb-input-font-size-large);
padding: (@mdb-input-padding-large-vertical + 1) @mdb-input-padding-large-horizontal;
font-size: @mdb-input-font-size-large;
line-height: @mdb-input-line-height-large;
}
}
@ -179,20 +180,20 @@ output {
.checkbox,
.radio-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
// and other content below items
.radio,
.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
// labels on narrow viewports stack the same as a default form example.
@media (min-width: @screen-sm-min) {
.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 {
@media (min-width: @screen-sm-min) {
.control-label {
padding-top: ((@md-input-padding-large-vertical * @md-input-line-height-large) + 1);
font-size: @md-input-font-size-large;
padding-top: ((@mdb-input-padding-large-vertical * @mdb-input-line-height-large) + 1);
font-size: @mdb-input-font-size-large;
}
}
}
.form-group-sm {
@media (min-width: @screen-sm-min) {
.control-label {
padding-top: (@md-input-padding-small-vertical + 1);
font-size: @md-input-font-size-small;
padding-top: (@mdb-input-padding-small-vertical + 1);
font-size: @mdb-input-font-size-small;
}
}
}

View File

@ -18,7 +18,7 @@
box-shadow: none;
}
&.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,
.help-block {
@ -28,14 +28,14 @@
}
.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-line-height: (@label-floating-size-ratio * @line-height);
@static-font-size: ceil((@mdb-label-static-size-ratio * @placeholder-font-size));
@static-line-height: (@mdb-label-static-size-ratio * @line-height);
@label-as-placeholder-top: -1 * (@vertical-padding + @label-as-placeholder-shim);
@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-line-height: (@help-block-size-ratio * @line-height);
@help-block-font-size: ceil((@mdb-help-block-size-ratio * @placeholder-font-size));
@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
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
.form-control {
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-repeat: no-repeat;
background-position: center bottom, center calc(~"100% - 1px");
@ -114,7 +114,7 @@
// Placeholders and and labels-as-placeholders should look the same
.material-placeholder({
color: @input-placeholder-color;
color: @mdb-input-placeholder-color;
font-weight: normal;
});
@ -132,19 +132,19 @@
&[disabled],
fieldset[disabled] & {
background-image: none;
border-bottom: 1px dotted @input-underline-color;
border-bottom: 1px dotted @mdb-input-underline-color;
}
}
&.is-focused .form-control {
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;
box-shadow: none;
transition-duration: 0.3s;
.material-input:after {
background-color: @input-default;
background-color: @mdb-input-default;
}
}
@ -168,7 +168,7 @@
label,
label.control-label {
// same label properties as form-group placeholder
color: @input-placeholder-color;
color: @mdb-input-placeholder-color;
font-weight: normal;
}
@ -184,21 +184,21 @@
}
}
.variations(~" label.control-label", color, @input-placeholder-color); // default label color variations
.variations(~".is-focused label.control-label", color, @input-default); // focused label color variations
.variations(~".is-focused.label-placeholder 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, @mdb-input-default); // focused label color variations
.variations(~".is-focused.label-placeholder label.control-label", color, @mdb-input-placeholder-color); // default label color variations
// 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
&.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
&.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.
@ -215,13 +215,13 @@
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
.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-error, @input-danger);
.form-group-validation-state(has-success, @input-success);
.form-group-validation-state(has-info, @input-info);
.form-group-validation-state(has-warning, @mdb-input-warning);
.form-group-validation-state(has-error, @mdb-input-danger);
.form-group-validation-state(has-success, @mdb-input-success);
.form-group-validation-state(has-info, @mdb-input-info);
textarea {
resize: none;
@ -247,7 +247,7 @@ select.form-control {
.form-group.is-focused & {
box-shadow: none;
border-color: @input-underline-color;
border-color: @mdb-input-underline-color;
}
&[multiple] {
@ -270,7 +270,7 @@ select.form-control {
// input group/addon related styles
// default margin
.input-group-button-variation(@md-input-padding-base-vertical);
.input-group-button-variation(@mdb-input-padding-base-vertical);
.form-group {
//.form-control {
@ -279,12 +279,12 @@ select.form-control {
// sm margin
&.form-group-sm {
.input-group-button-variation(@md-input-padding-small-vertical);
.input-group-button-variation(@mdb-input-padding-small-vertical);
}
// lg margin
&.form-group-lg {
.input-group-button-variation(@md-input-padding-large-vertical);
.input-group-button-variation(@mdb-input-padding-large-vertical);
}
}

View File

@ -4,10 +4,10 @@
// 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.
//
// @material-color-name ---> "red", "green", "indigo" ...
// @material-color-full-name ---> "red", "green-50", "indigo-400" ...
// @material-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-color-name ---> "red", "green", "indigo" ...
// @mdb-color-full-name ---> "red", "green-50", "indigo-400" ...
// @mdb-color ---> #f44336, #e8f5e9, #5c6bc0 ...
// @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) {
@ -16,79 +16,79 @@
// bootstrap styles
&@{extra}, &-default@{extra} {
@material-color-name: "default";
@material-color-full-name: @material-color-name;
@material-color: @default;
@material-text-color: @darkbg-text;
@mdb-color-name: "default";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @default;
@mdb-text-color: @darkbg-text;
@func();
}
&-black@{extra} {
@material-color-name: "black";
@material-color-full-name: @material-color-name;
@material-color: @black;
@material-text-color: @darkbg-text;
@mdb-color-name: "black";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @black;
@mdb-text-color: @darkbg-text;
@func();
}
&-white@{extra} {
@material-color-name: "white";
@material-color-full-name: @material-color-name;
@material-color: @white;
@material-text-color: @lightbg-text;
@mdb-color-name: "white";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @white;
@mdb-text-color: @lightbg-text;
@func();
}
&-inverse@{extra} {
@material-color-name: "inverse";
@material-color-full-name: @material-color-name;
@material-color: @inverse;
@material-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
@mdb-color-name: "inverse";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @inverse;
@mdb-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
@func();
}
&-primary@{extra} {
@material-color-name: "primary";
@material-color-full-name: @material-color-name;
@material-color: @primary;
@material-text-color: @darkbg-text;
@mdb-color-name: "primary";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @primary;
@mdb-text-color: @darkbg-text;
@func();
}
&-success@{extra} {
@material-color-name: "success";
@material-color-full-name: @material-color-name;
@material-color: @success;
@material-text-color: @darkbg-text;
@mdb-color-name: "success";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @success;
@mdb-text-color: @darkbg-text;
@func();
}
&-info@{extra} {
@material-color-name: "info";
@material-color-full-name: @material-color-name;
@material-color: @info;
@material-text-color: @darkbg-text;
@mdb-color-name: "info";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @info;
@mdb-text-color: @darkbg-text;
@func();
}
&-warning@{extra} {
@material-color-name: "warning";
@material-color-full-name: @material-color-name;
@material-color: @warning;
@material-text-color: @darkbg-text;
@mdb-color-name: "warning";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @warning;
@mdb-text-color: @darkbg-text;
@func();
}
&-danger@{extra} {
@material-color-name: "danger";
@material-color-full-name: @material-color-name;
@material-color: @danger;
@material-text-color: @darkbg-text;
@mdb-color-name: "danger";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @danger;
@mdb-text-color: @darkbg-text;
@func();
}
// 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
.generic-variations-factory-deep(@material-color-number) {
.generic-variations-factory-deep(@mdb-color-number) {
&-material-@{material-color-name}@{material-color-number}@{extra} {
@material-color-full-name: "@{material-color-name}@{material-color-number}";
@material-color: @@material-color-full-name;
@material-text-color: contrast(@material-color, @lightbg-text, @darkbg-text, @contrast-factor);
@mdb-color-full-name: "@{material-color-name}@{material-color-number}";
@mdb-color: @@material-color-full-name;
@mdb-text-color: contrast(@mdb-color, @lightbg-text, @darkbg-text, @contrast-factor);
@func();
}

View File

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

View File

@ -4,10 +4,10 @@
// 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.
//
// @material-color-name ---> "red", "green", "indigo" ...
// @material-color-full-name ---> "red", "green-50", "indigo-400" ...
// @material-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-color-name ---> "red", "green", "indigo" ...
// @mdb-color-full-name ---> "red", "green-50", "indigo-400" ...
// @mdb-color ---> #f44336, #e8f5e9, #5c6bc0 ...
// @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
&@{extra}, &-default@{extra} {
@material-color-name: "default";
@material-color-full-name: @material-color-name;
@material-color: @default;
@material-text-color: @darkbg-text;
@mdb-color-name: "default";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @default;
@mdb-text-color: @darkbg-text;
@func();
}
&-black@{extra} {
@material-color-name: "black";
@material-color-full-name: @material-color-name;
@material-color: @black;
@material-text-color: @darkbg-text;
@mdb-color-name: "black";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @black;
@mdb-text-color: @darkbg-text;
@func();
}
&-white@{extra} {
@material-color-name: "white";
@material-color-full-name: @material-color-name;
@material-color: @white;
@material-text-color: @lightbg-text;
@mdb-color-name: "white";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @white;
@mdb-text-color: @lightbg-text;
@func();
}
&-inverse@{extra} {
@material-color-name: "inverse";
@material-color-full-name: @material-color-name;
@material-color: @inverse;
@material-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
@mdb-color-name: "inverse";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @inverse;
@mdb-text-color: contrast(@inverse, @lightbg-text, @darkbg-text, @contrast-factor);
@func();
}
&-primary@{extra} {
@material-color-name: "primary";
@material-color-full-name: @material-color-name;
@material-color: @primary;
@material-text-color: @darkbg-text;
@mdb-color-name: "primary";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @primary;
@mdb-text-color: @darkbg-text;
@func();
}
&-success@{extra} {
@material-color-name: "success";
@material-color-full-name: @material-color-name;
@material-color: @success;
@material-text-color: @darkbg-text;
@mdb-color-name: "success";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @success;
@mdb-text-color: @darkbg-text;
@func();
}
&-info@{extra} {
@material-color-name: "info";
@material-color-full-name: @material-color-name;
@material-color: @info;
@material-text-color: @darkbg-text;
@mdb-color-name: "info";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @info;
@mdb-text-color: @darkbg-text;
@func();
}
&-warning@{extra} {
@material-color-name: "warning";
@material-color-full-name: @material-color-name;
@material-color: @warning;
@material-text-color: @darkbg-text;
@mdb-color-name: "warning";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @warning;
@mdb-text-color: @darkbg-text;
@func();
}
&-danger@{extra} {
@material-color-name: "danger";
@material-color-full-name: @material-color-name;
@material-color: @danger;
@material-text-color: @darkbg-text;
@mdb-color-name: "danger";
@mdb-color-full-name: @mdb-color-name;
@mdb-color: @danger;
@mdb-text-color: @darkbg-text;
@func();
}
// 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
.generic-variations-factory-deep(@material-color-number) {
.generic-variations-factory-deep(@mdb-color-number) {
&-material-@{material-color-name}@{material-color-number}@{extra} {
@material-color-full-name: "@{material-color-name}@{material-color-number}";
@material-color: @@material-color-full-name;
@material-text-color: contrast(@material-color, @lightbg-text, @darkbg-text, @contrast-factor);
@mdb-color-full-name: "@{material-color-name}@{material-color-number}";
@mdb-color: @@material-color-full-name;
@mdb-text-color: contrast(@mdb-color, @lightbg-text, @darkbg-text, @contrast-factor);
@func();
}

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
//---
//height: @input-height-base;
//height: @mdb-input-height-base;
@bs-line-height-base: 1.428571429;
@bs-line-height-computed: floor((@font-size-base * @bs-line-height-base)); // ~20px
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
.generic-variations(~".navbar", @primary, {
background-color: @material-color;
color: @material-text-color;
background-color: @mdb-color;
color: @mdb-text-color;
// deeply defined to override welljumbo class without !impotant need
.navbar-form .form-group input.form-control::placeholder, .navbar-form input.form-control::placeholder {
color: @material-text-color;
color: @mdb-text-color;
}
.dropdown-menu {
border-radius: @dropdown-radius;
border-radius: @mdb-dropdown-radius;
li > a {
font-size: @dropdown-font-size;
font-size: @mdb-dropdown-font-size;
padding: 13px 16px;
&:hover,
&:focus {
color: @material-color;
color: @mdb-color;
background-color: @grey-200;
}
}
.active > a {
&:hover,
&:focus {
color: @material-text-color;
color: @mdb-text-color;
}
background-color: @material-color;
color: @material-text-color;
background-color: @mdb-color;
color: @mdb-text-color;
}
}
});

View File

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

View File

@ -11,16 +11,16 @@
.form-group {
// 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
&.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
&.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;
padding-left: 45px;
position: relative;
color: @radio-label-color;
color: @mdb-radio-label-color;
span {
display: block;
@ -39,7 +39,7 @@
transition-duration: 0.2s;
}
.circle {
border: 2px solid @radio-border-color;
border: 2px solid @mdb-radio-border-color;
height: 15px;
width: 15px;
border-radius: 100%;
@ -48,7 +48,7 @@
height: 15px;
width: 15px;
border-radius: 100%;
background-color: @radio-default;
background-color: @mdb-radio-default;
transform: scale3d(0, 0, 0);
}
.check:after {
@ -74,8 +74,8 @@
}
}
.variations(~" input[type=radio]:checked ~ .check", background-color, @radio-default);
.variations(~" input[type=radio]:checked ~ .circle", border-color, @radio-default);
.variations(~" input[type=radio]:checked ~ .check", background-color, @mdb-radio-default);
.variations(~" input[type=radio]:checked ~ .circle", border-color, @mdb-radio-default);
input[type=radio][disabled] ~ .check,
input[type=radio][disabled] ~ .circle {

View File

@ -7,16 +7,16 @@
.form-group {
//// 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
&.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
&.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 {
@ -26,7 +26,7 @@
}
label {
cursor: pointer;
color: @togglebutton-label-color;
color: @mdb-toggle-label-color;
// Hide original checkbox
input[type=checkbox] {
@ -79,14 +79,14 @@
// 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%);
background-color: fade(@mdb-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%);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px fade(@mdb-color, 10%);
});
}
}

View File

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

View File

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