Skip to content

B
bootstrap
Commit 743717fb authored by Mark Otto's avatar Mark Otto
Browse files
Options

really fix those outline buttons

parent eaeee93f
Hide whitespace changes
Inline Side-by-side
Showing with 461 additions and 15 deletions
dist/css/bootstrap.css
View file @ 743717fb
......@@ -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 {
......
dist/css/bootstrap.css.map
View file @ 743717fb
This diff was suppressed by a .gitattributes entry.
dist/css/bootstrap.min.css
View file @ 743717fb
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/css/bootstrap.min.css.map
View file @ 743717fb
This diff was suppressed by a .gitattributes entry.
docs/components/buttons.md
View file @ 743717fb
......@@ -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 %}
......
docs/dist/css/bootstrap.css
View file @ 743717fb
......@@ -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 {
......
docs/dist/css/bootstrap.css.map
View file @ 743717fb
This diff was suppressed by a .gitattributes entry.
docs/dist/css/bootstrap.min.css
View file @ 743717fb
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/dist/css/bootstrap.min.css.map
View file @ 743717fb
This diff was suppressed by a .gitattributes entry.
scss/_buttons.scss
View file @ 743717fb
......@@ -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);
}
......
scss/mixins/_buttons.scss
View file @ 743717fb
......@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment