mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-13 17:14:04 +02:00
really fix those outline buttons
This commit is contained in:
@@ -83,9 +83,23 @@ fieldset[disabled] a.btn {
|
||||
}
|
||||
|
||||
// Remove all backgrounds
|
||||
.btn-outline {
|
||||
background-color: $body-bg;
|
||||
background-image: transparent;
|
||||
.btn-primary-outline {
|
||||
@include button-outline-variant($btn-primary-bg);
|
||||
}
|
||||
.btn-secondary-outline {
|
||||
@include button-outline-variant($btn-secondary-border);
|
||||
}
|
||||
.btn-info-outline {
|
||||
@include button-outline-variant($btn-info-bg);
|
||||
}
|
||||
.btn-success-outline {
|
||||
@include button-outline-variant($btn-success-bg);
|
||||
}
|
||||
.btn-warning-outline {
|
||||
@include button-outline-variant($btn-warning-bg);
|
||||
}
|
||||
.btn-danger-outline {
|
||||
@include button-outline-variant($btn-danger-bg);
|
||||
}
|
||||
|
||||
|
||||
|
@@ -54,6 +54,40 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-outline-variant($color) {
|
||||
color: $color;
|
||||
background-image: none;
|
||||
background-color: $body-bg;
|
||||
border-color: $color;
|
||||
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
@include hover {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
fieldset[disabled] & {
|
||||
&:focus,
|
||||
&.focus {
|
||||
border-color: lighten($color, 20%);
|
||||
}
|
||||
@include hover {
|
||||
border-color: lighten($color, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button sizes
|
||||
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
|
Reference in New Issue
Block a user