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

added support for btn-outline

Browse Source
This commit is contained in:
FezVrasta 2016-08-03 18:49:32 +02:00
parent b5eaa72503
commit 11e80666b0
2 changed files with 47 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_buttons.scss
View File

@ -70,6 +70,10 @@
}
}
//---
// btn-outline
@include bmd-outline-button-color();
// https://www.google.com/design/spec/components/buttons-floating-action-button.html
&.bmd-btn-fab,
&.bmd-btn-icon {

49
scss/mixins/_buttons.scss
View File

@ -58,16 +58,16 @@
}
}
@mixin bmd-flat-button-variant($color) {
@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;
$border: $bmd-btn-border;
$focus-background: $bmd-btn-focus-bg;
$focus-border: $bmd-btn-focus-bg;
$active-background: $bmd-btn-active-bg;
$active-border: $bmd-btn-active-bg;
@include bmd-button-variant($color,
$background,
@ -125,6 +125,43 @@
}
}
@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?