mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-29 04:54:12 +03:00
#727 more normalization of variables, removal of many unused variables, and solved #352 with media query variables
This commit is contained in:
Kevin Ross
parent
b05c95b190
commit
a1af899ba2
|
|
@ -27,7 +27,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.form-group-size-variant(@placeholder-font-size, @label-top-margin, @vertical-padding, @line-height, @label-as-placeholder-shim){
|
||||
.label-size-variant(@placeholder-font-size, @label-top-margin, @vertical-padding, @line-height, @label-as-placeholder-shim){
|
||||
@static-font-size: ceil((@mdb-label-static-size-ratio * @placeholder-font-size));
|
||||
@static-line-height: (@mdb-label-static-size-ratio * @line-height);
|
||||
|
||||
|
|
@ -57,10 +57,12 @@
|
|||
}
|
||||
|
||||
// generic labels used anywhere in the form (not control-label)
|
||||
.checkbox label,
|
||||
.radio label,
|
||||
label {
|
||||
font-size: @placeholder-font-size;
|
||||
line-height: @line-height;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// smaller focused or static size
|
||||
|
|
@ -115,7 +117,7 @@
|
|||
// Placeholders and and labels-as-placeholders should look the same
|
||||
.material-placeholder({
|
||||
color: @mdb-input-placeholder-color;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -144,7 +146,7 @@
|
|||
transition-duration: 0.3s;
|
||||
|
||||
.material-input:after {
|
||||
background-color: @mdb-input-default;
|
||||
background-color: @brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -169,7 +171,7 @@
|
|||
label.control-label {
|
||||
// same label properties as form-group placeholder
|
||||
color: @mdb-input-placeholder-color;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
label.control-label {
|
||||
|
|
@ -185,20 +187,20 @@
|
|||
}
|
||||
|
||||
.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.control-label", color, @brand-primary); // 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(@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);
|
||||
.label-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(@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);
|
||||
.label-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(@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);
|
||||
.label-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.
|
||||
|
|
@ -218,10 +220,10 @@
|
|||
background-image: linear-gradient(@mdb-color, @mdb-color), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
|
||||
});
|
||||
|
||||
.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);
|
||||
.form-group-validation-state(has-warning, @brand-warning);
|
||||
.form-group-validation-state(has-error, @brand-danger);
|
||||
.form-group-validation-state(has-success, @brand-success);
|
||||
.form-group-validation-state(has-info, @brand-info);
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
.navbar-text {
|
||||
color: inherit;
|
||||
margin-top: 15px;
|
||||
|
|
@ -218,7 +218,7 @@
|
|||
background-color: @indigo;
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
@media (max-width: @screen-md-max) {
|
||||
|
||||
.navbar-brand {
|
||||
height: 50px;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
.text-warning {
|
||||
color: @btn-warning;
|
||||
color: @brand-warning;
|
||||
}
|
||||
.text-primary {
|
||||
color: @btn-primary;
|
||||
color: @brand-primary;
|
||||
}
|
||||
.text-danger {
|
||||
color: @btn-danger;
|
||||
color: @brand-danger;
|
||||
}
|
||||
.text-success {
|
||||
color: @btn-success;
|
||||
color: @brand-success;
|
||||
}
|
||||
.text-info {
|
||||
color: @btn-info;
|
||||
color: @brand-info;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,56 +37,8 @@
|
|||
@btn-default-text: @lightbg-text;
|
||||
//---
|
||||
|
||||
@btn-primary: @brand-primary;
|
||||
@btn-primary-text: @darkbg-text;
|
||||
|
||||
@btn-success: @brand-success;
|
||||
@btn-success-text: @darkbg-text;
|
||||
|
||||
@btn-info: @brand-info;
|
||||
@btn-info-text: @darkbg-text;
|
||||
|
||||
@btn-warning: @brand-warning;
|
||||
@btn-warning-text: @darkbg-text;
|
||||
|
||||
@btn-danger: @brand-danger;
|
||||
@btn-danger-text: @darkbg-text;
|
||||
|
||||
@mdb-input-unchecked: rgba(137, 137, 137, 0.3);
|
||||
@mdb-input-checked: rgba(15, 157, 88, 0.3);
|
||||
|
||||
@mdb-radio-default: @lightbg-text;
|
||||
@mdb-radio-primary: @brand-primary;
|
||||
@mdb-radio-success: @brand-success;
|
||||
@mdb-radio-info: @brand-info;
|
||||
@mdb-radio-warning: @brand-warning;
|
||||
@mdb-radio-danger: @brand-danger;
|
||||
|
||||
@mdb-input-danger: @brand-danger;
|
||||
@mdb-input-default: @brand-primary;
|
||||
@mdb-input-warning: @brand-warning;
|
||||
@mdb-input-success: @brand-success;
|
||||
@mdb-input-info: @brand-info;
|
||||
|
||||
@alert-success: @brand-success;
|
||||
@alert-info: @brand-info;
|
||||
@alert-warning: @brand-warning;
|
||||
@alert-danger: @brand-danger;
|
||||
|
||||
@progress-success: @brand-success;
|
||||
@progress-info: @brand-info;
|
||||
@progress-warning: @brand-warning;
|
||||
@progress-danger: @brand-danger;
|
||||
|
||||
@font-size-base: 14px;
|
||||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@screen-sm: 768px;
|
||||
@screen-sm-min: @screen-sm;
|
||||
|
||||
|
||||
// Global Material variables
|
||||
@mdb-border-radius: 2px;
|
||||
|
||||
// --------------------
|
||||
|
|
@ -102,7 +54,7 @@
|
|||
|
||||
// FIXME: with #733 customization of bootstrap, consider how these could be based on the original bs customized variables
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
@mdb-input-line-height-base: 1.428571429; // 20/14
|
||||
@mdb-input-line-height-base: @line-height-base; //1.428571429; // 20/14
|
||||
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
||||
@mdb-input-line-height-computed: floor((@mdb-input-font-size-base * @mdb-input-line-height-base)); // ~20px
|
||||
@mdb-input-line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user