diff options
Diffstat (limited to 'minionlivesmatter/templates/assets/bootstrap-material-design/scss/mixins/_buttons.scss')
| -rw-r--r-- | minionlivesmatter/templates/assets/bootstrap-material-design/scss/mixins/_buttons.scss | 218 |
1 files changed, 0 insertions, 218 deletions
diff --git a/minionlivesmatter/templates/assets/bootstrap-material-design/scss/mixins/_buttons.scss b/minionlivesmatter/templates/assets/bootstrap-material-design/scss/mixins/_buttons.scss deleted file mode 100644 index 9d849f1..0000000 --- a/minionlivesmatter/templates/assets/bootstrap-material-design/scss/mixins/_buttons.scss +++ /dev/null @@ -1,218 +0,0 @@ -// from bs mixins/buttons button-variant -@mixin bmd-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; - } - - &:focus, - &.focus { - color: $color; - background-color: $focus-background; - border-color: $focus-border; - } - - &:active, - &.active, - .open > &.dropdown-toggle { - color: $color; - background-color: $focus-background; - border-color: $focus-border; - - &:hover, - &:focus, - &.focus { - color: $color; - background-color: $active-background; - border-color: $active-border; - } - } - - // when it is an icon, kill the active bg on open dropdown, but stabilize on hover - .open > &.dropdown-toggle.bmd-btn-icon { - color: inherit; - background-color: $background; - - // leave hover on with the lighter focus color - &:hover { - background-color: $focus-background; - } - } - - &.disabled, - &:disabled { - &:focus, - &.focus { - background-color: $background; - border-color: $border; - } - @include hover { - background-color: $background; - border-color: $border; - } - } -} - -@mixin bmd-flat-button-variant( - $color, - $border: $bmd-btn-border, - $focus-border: $bmd-btn-focus-bg, - $active-border: $bmd-btn-active-bg -) { - - $background: $bmd-btn-bg; - $focus-background: $bmd-btn-focus-bg; - $active-background: $bmd-btn-active-bg; - - @include bmd-button-variant($color, - $background, - $focus-background, - $active-background, - $border, - $focus-border, - $active-border); - - // inverse color scheme - .bg-inverse & { - $focus-background: $bmd-inverse-btn-focus-bg; - $focus-border: $bmd-inverse-btn-focus-bg; - - $active-background: $bmd-inverse-btn-active-bg; - $active-border: $bmd-inverse-btn-active-bg; - - @include bmd-button-variant($color, - $background, - $focus-background, - $active-background, - $border, - $focus-border, - $active-border); - } - - // reverse the above for links - &.btn-link { - background-color: transparent; - } -} - -@mixin bmd-flat-button-color() { - - @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); - } -} - -@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; - } - - // 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); - } -} - -@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%)); - //$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 bmd-button-variant($color, - $background, - $focus-background, - $active-background, - $border, - $focus-border, - $active-border); -} - -@mixin bmd-raised-button-color() { - - &.btn-primary { - @include bmd-raised-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); - } - &.btn-secondary { - @include bmd-raised-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border); - } - &.btn-info { - @include bmd-raised-button-variant($btn-info-color, $btn-info-bg, $btn-info-border); - } - &.btn-success { - @include bmd-raised-button-variant($btn-success-color, $btn-success-bg, $btn-success-border); - } - &.btn-warning { - @include bmd-raised-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border); - } - &.btn-danger { - @include bmd-raised-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); - } -} - -@mixin undo-bs-tab-focus() { - // clear out the tab-focus() from BS - &, - &:active, - &.active { - &:focus, - &.focus { - //@include tab-focus(); - outline: 0; - } - } -} |
