mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-29 04:54:12 +03:00
@mdb- namespace known material variables before beginning to use bs variables directly
This commit is contained in:
Kevin Ross
parent
61ba1b1d6a
commit
f64ff8a142
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
});
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user