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

fix: Customizable colors (#1273)

Browse Source 
* button colors loop

* removed brand colors

* removed removed brand colors file

* restore bmd default colors

* fix

* fix missing brands overrides

* replaced "map-get($theme-colors, /name/)" with function "theme-color"
This commit is contained in:
Piotr 2018-01-23 12:29:26 +01:00 committed by Federico Zivolo
parent b3f47dff0f
commit 06e9fcac7d
7 changed files with 67 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
scss/_forms.scss
View File

@ -75,19 +75,19 @@ form {
@include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color);
.has-success {
@include bmd-form-color($brand-success, $brand-success, $brand-success);
@include bmd-form-color(theme-color(success), theme-color(success), theme-color(success));
}
.has-info {
@include bmd-form-color($brand-info, $brand-info, $brand-info);
@include bmd-form-color(theme-color(info), theme-color(info), theme-color(info));
}
.has-warning {
@include bmd-form-color($brand-warning, $brand-warning, $brand-warning);
@include bmd-form-color(theme-color(warning), theme-color(warning), theme-color(warning));
}
.has-danger {
@include bmd-form-color($brand-danger, $brand-danger, $brand-danger);
@include bmd-form-color(theme-color(danger), theme-color(danger), theme-color(danger));
}
// Reference http://www.google.com/design/spec/components/text-fields.html

21
scss/_variables.scss
View File

@ -19,12 +19,23 @@ $bmd-inverse-lighter: rgba($white, 0.54) !default;
$bmd-label-color: $gray-light !default;
$bmd-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary
// Bootstrap Material Design default colors (these can be override by user)
$theme-colors: () !default;
$theme-colors: map-merge((
primary: $teal,
success: $green,
info: $light-blue,
warning: $deep-orange,
danger: $red,
light: $grey-100,
dark: $grey-800
), $theme-colors);
// Customized BS variables
@import "variables/bootstrap/components";
@import "variables/bootstrap/custom-forms";
@import "variables/bootstrap/spacing";
@import "variables/bootstrap/body";
@import "variables/bootstrap/brand";
@import "variables/bootstrap/buttons";
@import "variables/bootstrap/card";
@import "variables/bootstrap/code";
@ -51,7 +62,7 @@ $enable-shadows: true; // enable shadows, set to false to turn off shadows
@import "variables/drawer";
@import "variables/snackbar";
$bmd-label-color-focus: $brand-primary !default;
$bmd-label-color-focus: theme-color(primary) !default;
$bmd-invalid-underline: $red-a700 !default;
$bmd-readonly-underline: $input-border-color !default;
@ -100,7 +111,7 @@ $background-disabled: #eaeaea !default;
$bmd-checkbox-size: 1.25rem !default;
$bmd-checkbox-animation-ripple: 500ms !default;
$bmd-checkbox-animation-check: 0.3s !default;
$bmd-checkbox-checked-color: $brand-primary !default;
$bmd-checkbox-checked-color: theme-color(primary) !default;
$bmd-checkbox-label-padding: .3125rem !default; // 5px
$bmd-checkbox-border-size: .125rem !default;
@ -113,7 +124,7 @@ $bmd-switch-width: 2.125rem !default; // 34px
$bmd-switch-height: .875rem !default; // 14px
$bmd-switch-handle-size: 1.25rem !default; // 20px (was 18px)
$bmd-switch-handle-checked-bg: $brand-primary !default;
$bmd-switch-handle-checked-bg: theme-color(primary) !default;
$bmd-switch-handle-unchecked-bg: #f1f1f1 !default;
$bmd-switch-handle-disabled-bg: #bdbdbd !default;
$bmd-switch-unchecked-bg: $gray-light !default;
@ -134,7 +145,7 @@ $bmd-radio-ripple-offset: 1em !default;
$bmd-radio-label-padding: .3125rem !default; // 5px
$bmd-radio-color-off: $bmd-label-color-inner-focus !default; // FIXME seems inconsistent, check spec
$bmd-radio-color-on: $brand-primary !default;
$bmd-radio-color-on: theme-color(primary) !default;
$bmd-radio-color-disabled: $gray-light; // light theme spec: Disabled: #000000, Opacity 26%
$bmd-radio-color-disabled-inverse: rgba(
$white,

104
scss/mixins/_buttons.scss
View File

@ -103,69 +103,39 @@
@include bmd-flat-button-variant($bmd-btn-color);
// flat bg with text color variations
&.btn-primary {
@include bmd-flat-button-variant($btn-primary-bg);
}
&.btn-secondary {
@include bmd-flat-button-variant($btn-secondary-color);
}
&.btn-info {
@include bmd-flat-button-variant($btn-info-bg);
}
&.btn-success {
@include bmd-flat-button-variant($btn-success-bg);
}
&.btn-warning {
@include bmd-flat-button-variant($btn-warning-bg);
}
&.btn-danger {
@include bmd-flat-button-variant($btn-danger-bg);
@each $color, $value in $theme-colors {
&.btn-#{$color} {
@include bmd-flat-button-variant($value);
}
}
}
@mixin bmd-outline-border() {
border-color: currentColor;
border-style: solid;
border-width: 1px;
}
@mixin bmd-outline-button-color() {
&.btn-outline,
&.btn-outline-primary,
&.btn-outline-secondary,
&.btn-outline-info,
&.btn-outline-success,
&.btn-outline-warning,
&.btn-outline-danger {
border-color: currentColor;
border-style: solid;
border-width: 1px;
&.btn-outline {
@include bmd-outline-border();
}
// flat bg with text and border color variations
&.btn-outline {
@include bmd-flat-button-variant($bmd-btn-color, $bmd-btn-color, $bmd-btn-color, $bmd-btn-color);
}
&.btn-outline-primary {
@include bmd-flat-button-variant($btn-primary-bg, $btn-primary-bg, $btn-primary-bg, $btn-primary-bg);
}
&.btn-outline-secondary {
@include bmd-flat-button-variant($btn-secondary-color, $btn-secondary-color, $btn-secondary-color, $btn-secondary-color);
}
&.btn-outline-info {
@include bmd-flat-button-variant($btn-info-bg, $btn-info-bg, $btn-info-bg, $btn-info-bg);
}
&.btn-outline-success {
@include bmd-flat-button-variant($btn-success-bg, $btn-success-bg, $btn-success-bg, $btn-success-bg);
}
&.btn-outline-warning {
@include bmd-flat-button-variant($btn-warning-bg, $btn-warning-bg, $btn-warning-bg, $btn-warning-bg);
}
&.btn-outline-danger {
@include bmd-flat-button-variant($btn-danger-bg, $btn-danger-bg, $btn-danger-bg, $btn-danger-bg);
@each $color, $value in $theme-colors {
&.btn-outline-#{$color} {
@include bmd-outline-border();
@include bmd-flat-button-variant($value, $value, $value, $value);
}
}
}
@mixin bmd-raised-button-variant($color, $background, $border) {
// FIXME: SPEC - this should be the 600 color, how can we get that programmatically if at all? Or are we limited to the color palette only?
$focus-background: contrast-color(
$background,
darken($background, 4%),
lighten($background, 4%)
$background,
darken($background, 4%),
lighten($background, 4%)
);
//$focus-background: darken($background, 10%); // default bootstrap
$focus-border: darken($border, 12%);
@ -184,22 +154,22 @@
}
@mixin bmd-raised-button-color() {
&.btn-primary {
@include bmd-raised-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color);
}
&.btn-secondary {
@include bmd-raised-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border-color);
}
&.btn-info {
@include bmd-raised-button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color);
}
&.btn-success {
@include bmd-raised-button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color);
}
&.btn-warning {
@include bmd-raised-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color);
}
&.btn-danger {
@include bmd-raised-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color);
@each $color, $value in $theme-colors {
&.btn-#{$color} {
@include bmd-raised-button-variant(#fff, $value, $value);
}
}
}
@mixin undo-bs-tab-focus() {
// clear out the tab-focus() from BS
&,
&:active,
&.active {
&:focus,
&.focus {
//@include tab-focus();
outline: 0;
}
}
}

6
scss/variables/bootstrap/_brand.scss
View File

@ -1,6 +0,0 @@
// Bootstrap brand color customization
$brand-primary: $teal !default;
$brand-success: $green !default;
$brand-danger: $red !default;
$brand-warning: $deep-orange !default;
$brand-info: $light-blue !default;

10
scss/variables/bootstrap/_buttons.scss
View File

@ -40,7 +40,7 @@ $btn-active-box-shadow: none !default; // inset 0 3px 5px rgba(0,0,0,.1
//
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-bg: theme-color(primary) !default;
$btn-primary-border-color: $btn-primary-bg !default;
//
$btn-secondary-color: $gray-dark !default;
@ -48,19 +48,19 @@ $btn-secondary-bg: $body-bg !default; // #fff
$btn-secondary-border-color: #ccc !default;
//
$btn-info-color: #fff !default;
$btn-info-bg: $brand-info !default;
$btn-info-bg: theme-color(info) !default;
$btn-info-border-color: $btn-info-bg !default;
//
$btn-success-color: #fff !default;
$btn-success-bg: $brand-success !default;
$btn-success-bg: theme-color(success) !default;
$btn-success-border-color: $btn-success-bg !default;
//
$btn-warning-color: #fff !default;
$btn-warning-bg: $brand-warning !default;
$btn-warning-bg: theme-color(warning) !default;
$btn-warning-border-color: $btn-warning-bg !default;
//
$btn-danger-color: #fff !default;
$btn-danger-bg: $brand-danger !default;
$btn-danger-bg: theme-color(danger) !default;
$btn-danger-border-color: $btn-danger-bg !default;
//
$btn-link-disabled-color: $gray-light !default;

2
scss/variables/bootstrap/_nav.scss
View File

@ -17,7 +17,7 @@ $bmd-nav-tabs-border-size: .214rem !default; // 3px
$bmd-nav-tabs-color: $gray !default;
$bmd-nav-tabs-active-color: $gray-dark !default;
$bmd-nav-tabs-active-border-color: $brand-primary !default;
$bmd-nav-tabs-active-border-color: theme-color(primary) !default;
$bmd-nav-tabs-disabled-link-color: $nav-disabled-link-color !default;
$bmd-nav-tabs-disabled-link-color-hover: $nav-disabled-link-hover-color !default;

8
scss/variables/bootstrap/_state.scss
View File

@ -2,13 +2,13 @@
//
// Define colors for form feedback states and, by default, alerts.
$state-success-text: $bmd-inverse !default;
$state-success-bg: $brand-success !default;
$state-success-bg: theme-color(success) !default;
$state-info-text: $bmd-inverse !default;
$state-info-bg: $brand-info !default;
$state-info-bg: theme-color(info) !default;
$state-warning-text: $bmd-inverse !default;
$state-warning-bg: $brand-warning !default;
$state-warning-bg: theme-color(warning) !default;
$state-danger-text: $bmd-inverse !default;
$state-danger-bg: $brand-danger !default;
$state-danger-bg: theme-color(danger) !default;