mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-09 00:00:41 +03:00
refactored button coloration to reuse a single mixin that is similar to and overrides the styles generated by the bs mixin. Resolves #793
This commit is contained in:
Kevin Ross
parent
a8600f6c5a
commit
9ec932cf72
|
|
@ -5,6 +5,6 @@
|
|||
|
||||
&:hover {
|
||||
color: $gray; // #fff;
|
||||
background-color: $mdb-btn-hover-bg; // #027de7;
|
||||
background-color: $mdb-btn-focus-bg; // #027de7;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,18 +18,11 @@
|
|||
|
||||
@include undo-bs-tab-focus();
|
||||
|
||||
// kill focus outline on firefox
|
||||
//button::-moz-focus-inner {
|
||||
// border: 0;
|
||||
//}
|
||||
|
||||
|
||||
|
||||
//--
|
||||
// Colors
|
||||
|
||||
// flat removes bg, add color variations to text
|
||||
@include mdb-button-color();
|
||||
@include mdb-flat-button-color();
|
||||
|
||||
// fab and raised
|
||||
// - colored, add their text and bg
|
||||
|
|
@ -38,13 +31,8 @@
|
|||
&.mdb-btn-fab,
|
||||
&.btn-raised,
|
||||
.btn-group-raised & {
|
||||
@include mdb-button-colored();
|
||||
@include mdb-raised-button-color();
|
||||
|
||||
// contrast bg colors on hover, focus, active
|
||||
@include mdb-hover-focus-active() {
|
||||
@include mdb-button-colored-bg(true);
|
||||
//border: 1px solid $red;
|
||||
}
|
||||
// enlarged shadow on hover, focus
|
||||
@include hover-focus() {
|
||||
//border: 1px solid $blue;
|
||||
|
|
@ -147,7 +135,7 @@
|
|||
@include mdb-disabled() {
|
||||
color: $mdb-btn-disabled;
|
||||
.bg-inverse & {
|
||||
color: $mdb-btn-disabled-inverse;
|
||||
color: $mdb-inverse-btn-disabled;
|
||||
}
|
||||
|
||||
// flat buttons shouldn't lose transparency on disabled hover/focus
|
||||
|
|
@ -156,17 +144,6 @@
|
|||
&:focus {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// no box-shadow on raised - need specificity
|
||||
//&.btn-raised,
|
||||
//&.btn-group-raised {
|
||||
// &,
|
||||
// &.active,
|
||||
// &:active,
|
||||
// &:focus:not(:active) {
|
||||
// box-shadow: none;
|
||||
// }
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -178,15 +155,14 @@
|
|||
margin: 10px 1px;
|
||||
|
||||
// spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
|
||||
&.open {
|
||||
.dropdown-toggle {
|
||||
//box-shadow: none;
|
||||
}
|
||||
|
||||
> .dropdown-toggle.btn {
|
||||
@include mdb-button-colored-bg();
|
||||
}
|
||||
}
|
||||
//&.open {
|
||||
// .dropdown-toggle {
|
||||
// }
|
||||
//
|
||||
// > .dropdown-toggle.btn {
|
||||
// @include mdb-raised-button-color-bg();
|
||||
// }
|
||||
//}
|
||||
|
||||
.dropdown-menu {
|
||||
border-radius: 0 0 $border-radius $border-radius;
|
||||
|
|
|
|||
|
|
@ -1,113 +1,158 @@
|
|||
@mixin mdb-button-variant($color: null, $bg-color: null, $border-color: null) {
|
||||
@if ($color) {
|
||||
// from bs mixins/buttons button-variant
|
||||
@mixin mdb-button-variant($color, $background, $focus-background, $active-background, $border, $focus-border, $active-border) {
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
|
||||
@include hover {
|
||||
color: $color;
|
||||
background-color: $focus-background;
|
||||
border-color: $focus-border;
|
||||
}
|
||||
|
||||
@if ($bg-color) {
|
||||
background-color: $bg-color;
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: $color;
|
||||
background-color: $focus-background;
|
||||
border-color: $focus-border;
|
||||
}
|
||||
|
||||
@if ($border-color) {
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle {
|
||||
color: $color;
|
||||
background-color: $focus-background;
|
||||
border-color: $focus-border;
|
||||
|
||||
@mixin mdb-button-color() {
|
||||
|
||||
@include hover-focus {
|
||||
background-color: $mdb-btn-hover-bg;
|
||||
|
||||
.bg-inverse & {
|
||||
background-color: $mdb-btn-hover-bg-inverse;
|
||||
}
|
||||
|
||||
// reverse the above for links
|
||||
&.btn-link {
|
||||
background-color: transparent;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: $color;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
}
|
||||
}
|
||||
|
||||
// default
|
||||
//@include mdb-button-variant($mdb-btn-color, $mdb-btn-bg, $mdb-btn-border);
|
||||
|
||||
// flat bg with text color variations
|
||||
&.btn-primary {
|
||||
@include mdb-button-variant($btn-primary-bg);
|
||||
}
|
||||
&.btn-secondary {
|
||||
@include mdb-button-variant($btn-secondary-color);
|
||||
}
|
||||
&.btn-info {
|
||||
@include mdb-button-variant($btn-info-bg);
|
||||
}
|
||||
&.btn-success {
|
||||
@include mdb-button-variant($btn-success-bg);
|
||||
}
|
||||
&.btn-warning {
|
||||
@include mdb-button-variant($btn-warning-bg);
|
||||
}
|
||||
&.btn-danger {
|
||||
@include mdb-button-variant($btn-danger-bg);
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
}
|
||||
@include hover {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdb-button-colored() {
|
||||
@mixin mdb-flat-button-variant($color) {
|
||||
|
||||
&.btn-primary {
|
||||
@include mdb-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
|
||||
}
|
||||
&.btn-secondary {
|
||||
@include mdb-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
|
||||
}
|
||||
&.btn-info {
|
||||
@include mdb-button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
|
||||
}
|
||||
&.btn-success {
|
||||
@include mdb-button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
|
||||
}
|
||||
&.btn-warning {
|
||||
@include mdb-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
|
||||
}
|
||||
&.btn-danger {
|
||||
@include mdb-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
|
||||
}
|
||||
}
|
||||
$background: $mdb-btn-bg;
|
||||
$border: $mdb-btn-border;
|
||||
|
||||
@mixin mdb-button-bg($color, $contrast: false) {
|
||||
@if ($contrast) { // contrast for focus indication
|
||||
// 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?
|
||||
background-color: contrast-color($color, darken($color, 4%), lighten($color, 4%));
|
||||
} @else {
|
||||
background-color: $color;
|
||||
$focus-background: $mdb-btn-focus-bg;
|
||||
$focus-border: $mdb-btn-focus-bg;
|
||||
|
||||
$active-background: $mdb-btn-active-bg;
|
||||
$active-border: $mdb-btn-active-bg;
|
||||
|
||||
@include mdb-button-variant($color,
|
||||
$background,
|
||||
$focus-background,
|
||||
$active-background,
|
||||
$border,
|
||||
$focus-border,
|
||||
$active-border);
|
||||
|
||||
// inverse color scheme
|
||||
.bg-inverse & {
|
||||
$focus-background: $mdb-inverse-btn-focus-bg;
|
||||
$focus-border: $mdb-inverse-btn-focus-bg;
|
||||
|
||||
$active-background: $mdb-inverse-btn-active-bg;
|
||||
$active-border: $mdb-inverse-btn-active-bg;
|
||||
|
||||
@include mdb-button-variant($color,
|
||||
$background,
|
||||
$focus-background,
|
||||
$active-background,
|
||||
$border,
|
||||
$focus-border,
|
||||
$active-border);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdb-button-colored-bg($contrast: false) {
|
||||
// default
|
||||
@include mdb-button-bg($mdb-btn-bg, $contrast);
|
||||
|
||||
// no bg for links
|
||||
// reverse the above for links
|
||||
&.btn-link {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdb-flat-button-color() {
|
||||
|
||||
@include mdb-flat-button-variant($mdb-btn-color);
|
||||
|
||||
// flat bg with text color variations
|
||||
&.btn-primary {
|
||||
@include mdb-button-bg($btn-primary-bg, $contrast);
|
||||
@include mdb-flat-button-variant($btn-primary-bg);
|
||||
}
|
||||
&.btn-secondary {
|
||||
@include mdb-button-bg($btn-secondary-bg, $contrast);
|
||||
@include mdb-flat-button-variant($btn-secondary-color);
|
||||
}
|
||||
&.btn-info {
|
||||
@include mdb-button-bg($btn-info-bg, $contrast);
|
||||
@include mdb-flat-button-variant($btn-info-bg);
|
||||
}
|
||||
&.btn-success {
|
||||
@include mdb-button-bg($btn-success-bg, $contrast);
|
||||
@include mdb-flat-button-variant($btn-success-bg);
|
||||
}
|
||||
&.btn-warning {
|
||||
@include mdb-button-bg($btn-warning-bg, $contrast);
|
||||
@include mdb-flat-button-variant($btn-warning-bg);
|
||||
}
|
||||
&.btn-danger {
|
||||
@include mdb-button-bg($btn-danger-bg, $contrast);
|
||||
@include mdb-flat-button-variant($btn-danger-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mdb-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%));
|
||||
//$focus-background: darken($background, 10%); // default bootstrap
|
||||
$focus-border: darken($border, 12%);
|
||||
|
||||
$active-background: $focus-background;
|
||||
//$active-background: darken($background, 17%);
|
||||
$active-border: darken($border, 25%);
|
||||
|
||||
@include mdb-button-variant($color,
|
||||
$background,
|
||||
$focus-background,
|
||||
$active-background,
|
||||
$border,
|
||||
$focus-border,
|
||||
$active-border);
|
||||
}
|
||||
|
||||
@mixin mdb-raised-button-color() {
|
||||
|
||||
&.btn-primary {
|
||||
@include mdb-raised-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
|
||||
}
|
||||
&.btn-secondary {
|
||||
@include mdb-raised-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
|
||||
}
|
||||
&.btn-info {
|
||||
@include mdb-raised-button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
|
||||
}
|
||||
&.btn-success {
|
||||
@include mdb-raised-button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
|
||||
}
|
||||
&.btn-warning {
|
||||
@include mdb-raised-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
|
||||
}
|
||||
&.btn-danger {
|
||||
@include mdb-raised-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,12 +9,13 @@ $mdb-btn-color: $gray-dark !default;
|
|||
$mdb-btn-bg: $body-bg !default; // #fff
|
||||
$mdb-btn-border: #ccc !default;
|
||||
|
||||
$mdb-btn-colored-bg-text: $gray-dark !default;
|
||||
|
||||
$mdb-btn-hover-bg: rgba(#999, .20) !default; // spec: flat/light bg Hover: 20% #999999
|
||||
$mdb-btn-focus-bg: rgba(#999, .20) !default; // spec: bg Hover: 20% #999999
|
||||
$mdb-btn-active-bg: rgba(#999, .40) !default; // spec: bg Pressed: 40% #999999
|
||||
$mdb-btn-disabled: rgba($black, .26) !default; // spec: light theme: Disabled text: 26% $black
|
||||
$mdb-btn-hover-bg-inverse: rgba(#ccc, .15) !default; // spec: dark bg Hover: 15% #CCCCCC
|
||||
$mdb-btn-disabled-inverse: rgba($white, .30) !default; // spec: dark theme: Disabled text: 30% $white
|
||||
|
||||
$mdb-inverse-btn-focus-bg: rgba(#ccc, .15) !default; // spec: dark bg Hover: 15% #CCCCCC
|
||||
$mdb-inverse-btn-active-bg: rgba(#ccc, .25) !default; // spec: dark Pressed: 25% #CCCCCC
|
||||
$mdb-inverse-btn-disabled: rgba($white, .30) !default; // spec: dark theme: Disabled text: 30% $white
|
||||
|
||||
$mdb-btn-fab-size: 56px !default;
|
||||
$mdb-btn-fab-size-mini: 40px !default;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user