mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-07-27 00:19:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

button colors loop

Browse Source
This commit is contained in:
Piotr Starzec 2018-01-22 14:11:27 +01:00
parent a64a239515
commit f0596c3d4f
1 changed files with 37 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
scss/mixins/_buttons.scss
View File

@ -103,69 +103,39 @@
@include bmd-flat-button-variant($bmd-btn-color); @include bmd-flat-button-variant($bmd-btn-color);
// flat bg with text color variations // flat bg with text color variations
&.btn-primary { @each $color, $value in $theme-colors {
@include bmd-flat-button-variant($btn-primary-bg); &.btn-#{$color} {
} @include bmd-flat-button-variant($value);
&.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);
} }
} }
@mixin bmd-outline-border() {
border-color: currentColor;
border-style: solid;
border-width: 1px;
}
@mixin bmd-outline-button-color() { @mixin bmd-outline-button-color() {
&.btn-outline, &.btn-outline {
&.btn-outline-primary, @include bmd-outline-border();
&.btn-outline-secondary,
&.btn-outline-info,
&.btn-outline-success,
&.btn-outline-warning,
&.btn-outline-danger {
border-color: currentColor;
border-style: solid;
border-width: 1px;
} }
// flat bg with text and border color variations // flat bg with text and border color variations
&.btn-outline { @each $color, $value in $theme-colors {
@include bmd-flat-button-variant($bmd-btn-color, $bmd-btn-color, $bmd-btn-color, $bmd-btn-color); &.btn-outline-#{$color} {
} @include bmd-outline-border();
&.btn-outline-primary { @include bmd-flat-button-variant($value, $value, $value, $value);
@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);
} }
} }
@mixin bmd-raised-button-variant($color, $background, $border) { @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? // 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( $focus-background: contrast-color(
$background, $background,
darken($background, 4%), darken($background, 4%),
lighten($background, 4%) lighten($background, 4%)
); );
//$focus-background: darken($background, 10%); // default bootstrap //$focus-background: darken($background, 10%); // default bootstrap
$focus-border: darken($border, 12%); $focus-border: darken($border, 12%);
@ -184,22 +154,22 @@
} }
@mixin bmd-raised-button-color() { @mixin bmd-raised-button-color() {
&.btn-primary { @each $color, $value in $theme-colors {
@include bmd-raised-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color); &.btn-#{$color} {
} @include bmd-raised-button-variant(#fff, $value, $value);
&.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); @mixin undo-bs-tab-focus() {
} // clear out the tab-focus() from BS
&.btn-success { &,
@include bmd-raised-button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color); &:active,
} &.active {
&.btn-warning { &:focus,
@include bmd-raised-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color); &.focus {
} //@include tab-focus();
&.btn-danger { outline: 0;
@include bmd-raised-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color); }
} }
} }