mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
really fix those outline buttons
This commit is contained in:
Mark Otto
parent
eaeee93fa3
commit
743717fbce
@ -2536,9 +2536,208 @@ fieldset[disabled] a.btn {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
.btn-primary-outline {
|
||||
color: #0275d8;
|
||||
background-color: #fff;
|
||||
background-image: transparent;
|
||||
background-image: none;
|
||||
border-color: #0275d8;
|
||||
}
|
||||
.btn-primary-outline:focus,
|
||||
.btn-primary-outline.focus,
|
||||
.btn-primary-outline:active,
|
||||
.btn-primary-outline.active,
|
||||
.open > .btn-primary-outline.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #0275d8;
|
||||
border-color: #0275d8;
|
||||
}
|
||||
.btn-primary-outline:hover {
|
||||
color: #fff;
|
||||
background-color: #0275d8;
|
||||
border-color: #0275d8;
|
||||
}
|
||||
.btn-primary-outline.disabled:focus,
|
||||
.btn-primary-outline.disabled.focus,
|
||||
.btn-primary-outline:disabled:focus,
|
||||
.btn-primary-outline:disabled.focus,
|
||||
fieldset[disabled] .btn-primary-outline:focus,
|
||||
fieldset[disabled] .btn-primary-outline.focus {
|
||||
border-color: #43a7fd;
|
||||
}
|
||||
.btn-primary-outline.disabled:hover,
|
||||
.btn-primary-outline:disabled:hover,
|
||||
fieldset[disabled] .btn-primary-outline:hover {
|
||||
border-color: #43a7fd;
|
||||
}
|
||||
|
||||
.btn-secondary-outline {
|
||||
color: #ccc;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border-color: #ccc;
|
||||
}
|
||||
.btn-secondary-outline:focus,
|
||||
.btn-secondary-outline.focus,
|
||||
.btn-secondary-outline:active,
|
||||
.btn-secondary-outline.active,
|
||||
.open > .btn-secondary-outline.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #ccc;
|
||||
border-color: #ccc;
|
||||
}
|
||||
.btn-secondary-outline:hover {
|
||||
color: #fff;
|
||||
background-color: #ccc;
|
||||
border-color: #ccc;
|
||||
}
|
||||
.btn-secondary-outline.disabled:focus,
|
||||
.btn-secondary-outline.disabled.focus,
|
||||
.btn-secondary-outline:disabled:focus,
|
||||
.btn-secondary-outline:disabled.focus,
|
||||
fieldset[disabled] .btn-secondary-outline:focus,
|
||||
fieldset[disabled] .btn-secondary-outline.focus {
|
||||
border-color: white;
|
||||
}
|
||||
.btn-secondary-outline.disabled:hover,
|
||||
.btn-secondary-outline:disabled:hover,
|
||||
fieldset[disabled] .btn-secondary-outline:hover {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.btn-info-outline {
|
||||
color: #5bc0de;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
.btn-info-outline:focus,
|
||||
.btn-info-outline.focus,
|
||||
.btn-info-outline:active,
|
||||
.btn-info-outline.active,
|
||||
.open > .btn-info-outline.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #5bc0de;
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
.btn-info-outline:hover {
|
||||
color: #fff;
|
||||
background-color: #5bc0de;
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
.btn-info-outline.disabled:focus,
|
||||
.btn-info-outline.disabled.focus,
|
||||
.btn-info-outline:disabled:focus,
|
||||
.btn-info-outline:disabled.focus,
|
||||
fieldset[disabled] .btn-info-outline:focus,
|
||||
fieldset[disabled] .btn-info-outline.focus {
|
||||
border-color: #b0e1ef;
|
||||
}
|
||||
.btn-info-outline.disabled:hover,
|
||||
.btn-info-outline:disabled:hover,
|
||||
fieldset[disabled] .btn-info-outline:hover {
|
||||
border-color: #b0e1ef;
|
||||
}
|
||||
|
||||
.btn-success-outline {
|
||||
color: #5cb85c;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
.btn-success-outline:focus,
|
||||
.btn-success-outline.focus,
|
||||
.btn-success-outline:active,
|
||||
.btn-success-outline.active,
|
||||
.open > .btn-success-outline.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
.btn-success-outline:hover {
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
.btn-success-outline.disabled:focus,
|
||||
.btn-success-outline.disabled.focus,
|
||||
.btn-success-outline:disabled:focus,
|
||||
.btn-success-outline:disabled.focus,
|
||||
fieldset[disabled] .btn-success-outline:focus,
|
||||
fieldset[disabled] .btn-success-outline.focus {
|
||||
border-color: #a3d7a3;
|
||||
}
|
||||
.btn-success-outline.disabled:hover,
|
||||
.btn-success-outline:disabled:hover,
|
||||
fieldset[disabled] .btn-success-outline:hover {
|
||||
border-color: #a3d7a3;
|
||||
}
|
||||
|
||||
.btn-warning-outline {
|
||||
color: #f0ad4e;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
.btn-warning-outline:focus,
|
||||
.btn-warning-outline.focus,
|
||||
.btn-warning-outline:active,
|
||||
.btn-warning-outline.active,
|
||||
.open > .btn-warning-outline.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #f0ad4e;
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
.btn-warning-outline:hover {
|
||||
color: #fff;
|
||||
background-color: #f0ad4e;
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
.btn-warning-outline.disabled:focus,
|
||||
.btn-warning-outline.disabled.focus,
|
||||
.btn-warning-outline:disabled:focus,
|
||||
.btn-warning-outline:disabled.focus,
|
||||
fieldset[disabled] .btn-warning-outline:focus,
|
||||
fieldset[disabled] .btn-warning-outline.focus {
|
||||
border-color: #f8d9ac;
|
||||
}
|
||||
.btn-warning-outline.disabled:hover,
|
||||
.btn-warning-outline:disabled:hover,
|
||||
fieldset[disabled] .btn-warning-outline:hover {
|
||||
border-color: #f8d9ac;
|
||||
}
|
||||
|
||||
.btn-danger-outline {
|
||||
color: #d9534f;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
.btn-danger-outline:focus,
|
||||
.btn-danger-outline.focus,
|
||||
.btn-danger-outline:active,
|
||||
.btn-danger-outline.active,
|
||||
.open > .btn-danger-outline.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #d9534f;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
.btn-danger-outline:hover {
|
||||
color: #fff;
|
||||
background-color: #d9534f;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
.btn-danger-outline.disabled:focus,
|
||||
.btn-danger-outline.disabled.focus,
|
||||
.btn-danger-outline:disabled:focus,
|
||||
.btn-danger-outline:disabled.focus,
|
||||
fieldset[disabled] .btn-danger-outline:focus,
|
||||
fieldset[disabled] .btn-danger-outline.focus {
|
||||
border-color: #eba5a3;
|
||||
}
|
||||
.btn-danger-outline.disabled:hover,
|
||||
.btn-danger-outline:disabled:hover,
|
||||
fieldset[disabled] .btn-danger-outline:hover {
|
||||
border-color: #eba5a3;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
|
||||
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css.map
vendored
2
dist/css/bootstrap.min.css.map
vendored
File diff suppressed because one or more lines are too long
@ -56,14 +56,14 @@ When using button classes on `<a>` elements that are used to trigger in-page fun
|
||||
|
||||
## Outline buttons
|
||||
|
||||
In need of a button, but not the hefty background colors they bring? Add the `.btn-outline` modifier class to remove all background images and colors on any button.
|
||||
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-primary btn-outline">Primary</button>
|
||||
<button type="button" class="btn btn-secondary btn-outline">Secondary</button>
|
||||
<button type="button" class="btn btn-success btn-outline">Success</button>
|
||||
<button type="button" class="btn btn-warning btn-outline">Warning</button>
|
||||
<button type="button" class="btn btn-danger btn-outline">Danger</button>
|
||||
<button type="button" class="btn btn-primary-outline">Primary</button>
|
||||
<button type="button" class="btn btn-secondary-outline">Secondary</button>
|
||||
<button type="button" class="btn btn-success-outline">Success</button>
|
||||
<button type="button" class="btn btn-warning-outline">Warning</button>
|
||||
<button type="button" class="btn btn-danger-outline">Danger</button>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
|
||||
@ -2536,9 +2536,208 @@ fieldset[disabled] a.btn {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
.btn-primary-outline {
|
||||
color: #0275d8;
|
||||
background-color: #fff;
|
||||
background-image: transparent;
|
||||
background-image: none;
|
||||
border-color: #0275d8;
|
||||
}
|
||||
.btn-primary-outline:focus,
|
||||
.btn-primary-outline.focus,
|
||||
.btn-primary-outline:active,
|
||||
.btn-primary-outline.active,
|
||||
.open > .btn-primary-outline.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #0275d8;
|
||||
border-color: #0275d8;
|
||||
}
|
||||
.btn-primary-outline:hover {
|
||||
color: #fff;
|
||||
background-color: #0275d8;
|
||||
border-color: #0275d8;
|
||||
}
|
||||
.btn-primary-outline.disabled:focus,
|
||||
.btn-primary-outline.disabled.focus,
|
||||
.btn-primary-outline:disabled:focus,
|
||||
.btn-primary-outline:disabled.focus,
|
||||
fieldset[disabled] .btn-primary-outline:focus,
|
||||
fieldset[disabled] .btn-primary-outline.focus {
|
||||
border-color: #43a7fd;
|
||||
}
|
||||
.btn-primary-outline.disabled:hover,
|
||||
.btn-primary-outline:disabled:hover,
|
||||
fieldset[disabled] .btn-primary-outline:hover {
|
||||
border-color: #43a7fd;
|
||||
}
|
||||
|
||||
.btn-secondary-outline {
|
||||
color: #ccc;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border-color: #ccc;
|
||||
}
|
||||
.btn-secondary-outline:focus,
|
||||
.btn-secondary-outline.focus,
|
||||
.btn-secondary-outline:active,
|
||||
.btn-secondary-outline.active,
|
||||
.open > .btn-secondary-outline.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #ccc;
|
||||
border-color: #ccc;
|
||||
}
|
||||
.btn-secondary-outline:hover {
|
||||
color: #fff;
|
||||
background-color: #ccc;
|
||||
border-color: #ccc;
|
||||
}
|
||||
.btn-secondary-outline.disabled:focus,
|
||||
.btn-secondary-outline.disabled.focus,
|
||||
.btn-secondary-outline:disabled:focus,
|
||||
.btn-secondary-outline:disabled.focus,
|
||||
fieldset[disabled] .btn-secondary-outline:focus,
|
||||
fieldset[disabled] .btn-secondary-outline.focus {
|
||||
border-color: white;
|
||||
}
|
||||
.btn-secondary-outline.disabled:hover,
|
||||
.btn-secondary-outline:disabled:hover,
|
||||
fieldset[disabled] .btn-secondary-outline:hover {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.btn-info-outline {
|
||||
color: #5bc0de;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
.btn-info-outline:focus,
|
||||
.btn-info-outline.focus,
|
||||
.btn-info-outline:active,
|
||||
.btn-info-outline.active,
|
||||
.open > .btn-info-outline.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #5bc0de;
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
.btn-info-outline:hover {
|
||||
color: #fff;
|
||||
background-color: #5bc0de;
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
.btn-info-outline.disabled:focus,
|
||||
.btn-info-outline.disabled.focus,
|
||||
.btn-info-outline:disabled:focus,
|
||||
.btn-info-outline:disabled.focus,
|
||||
fieldset[disabled] .btn-info-outline:focus,
|
||||
fieldset[disabled] .btn-info-outline.focus {
|
||||
border-color: #b0e1ef;
|
||||
}
|
||||
.btn-info-outline.disabled:hover,
|
||||
.btn-info-outline:disabled:hover,
|
||||
fieldset[disabled] .btn-info-outline:hover {
|
||||
border-color: #b0e1ef;
|
||||
}
|
||||
|
||||
.btn-success-outline {
|
||||
color: #5cb85c;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
.btn-success-outline:focus,
|
||||
.btn-success-outline.focus,
|
||||
.btn-success-outline:active,
|
||||
.btn-success-outline.active,
|
||||
.open > .btn-success-outline.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
.btn-success-outline:hover {
|
||||
color: #fff;
|
||||
background-color: #5cb85c;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
.btn-success-outline.disabled:focus,
|
||||
.btn-success-outline.disabled.focus,
|
||||
.btn-success-outline:disabled:focus,
|
||||
.btn-success-outline:disabled.focus,
|
||||
fieldset[disabled] .btn-success-outline:focus,
|
||||
fieldset[disabled] .btn-success-outline.focus {
|
||||
border-color: #a3d7a3;
|
||||
}
|
||||
.btn-success-outline.disabled:hover,
|
||||
.btn-success-outline:disabled:hover,
|
||||
fieldset[disabled] .btn-success-outline:hover {
|
||||
border-color: #a3d7a3;
|
||||
}
|
||||
|
||||
.btn-warning-outline {
|
||||
color: #f0ad4e;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
.btn-warning-outline:focus,
|
||||
.btn-warning-outline.focus,
|
||||
.btn-warning-outline:active,
|
||||
.btn-warning-outline.active,
|
||||
.open > .btn-warning-outline.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #f0ad4e;
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
.btn-warning-outline:hover {
|
||||
color: #fff;
|
||||
background-color: #f0ad4e;
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
.btn-warning-outline.disabled:focus,
|
||||
.btn-warning-outline.disabled.focus,
|
||||
.btn-warning-outline:disabled:focus,
|
||||
.btn-warning-outline:disabled.focus,
|
||||
fieldset[disabled] .btn-warning-outline:focus,
|
||||
fieldset[disabled] .btn-warning-outline.focus {
|
||||
border-color: #f8d9ac;
|
||||
}
|
||||
.btn-warning-outline.disabled:hover,
|
||||
.btn-warning-outline:disabled:hover,
|
||||
fieldset[disabled] .btn-warning-outline:hover {
|
||||
border-color: #f8d9ac;
|
||||
}
|
||||
|
||||
.btn-danger-outline {
|
||||
color: #d9534f;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
.btn-danger-outline:focus,
|
||||
.btn-danger-outline.focus,
|
||||
.btn-danger-outline:active,
|
||||
.btn-danger-outline.active,
|
||||
.open > .btn-danger-outline.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #d9534f;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
.btn-danger-outline:hover {
|
||||
color: #fff;
|
||||
background-color: #d9534f;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
.btn-danger-outline.disabled:focus,
|
||||
.btn-danger-outline.disabled.focus,
|
||||
.btn-danger-outline:disabled:focus,
|
||||
.btn-danger-outline:disabled.focus,
|
||||
fieldset[disabled] .btn-danger-outline:focus,
|
||||
fieldset[disabled] .btn-danger-outline.focus {
|
||||
border-color: #eba5a3;
|
||||
}
|
||||
.btn-danger-outline.disabled:hover,
|
||||
.btn-danger-outline:disabled:hover,
|
||||
fieldset[disabled] .btn-danger-outline:hover {
|
||||
border-color: #eba5a3;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
|
||||
2
docs/dist/css/bootstrap.css.map
vendored
2
docs/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css.map
vendored
2
docs/dist/css/bootstrap.min.css.map
vendored
File diff suppressed because one or more lines are too long
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user