158 lines
3.1 KiB
Plaintext
158 lines
3.1 KiB
Plaintext
//
|
||
// Base styles
|
||
//
|
||
|
||
.btn {
|
||
display: inline-block;
|
||
// LESS PORT: Less doesn’t strip “empty” property values so we have to check for a value first.
|
||
& when not (@btn-font-family = ~"") { font-family: @btn-font-family; }
|
||
font-weight: @btn-font-weight;
|
||
color: @body-color;
|
||
text-align: center;
|
||
// LESS PORT: Less doesn’t strip “empty” property values so we have to check for a value first.
|
||
& when not (@btn-white-space = ~"") { white-space: @btn-white-space; }
|
||
vertical-align: middle;
|
||
// LESS PORT: Less doesn’t strip “empty” property values so we only output when the condition is
|
||
// `true`.
|
||
& when (@enable-pointer-cursor-for-buttons) {
|
||
cursor: pointer;
|
||
}
|
||
user-select: none;
|
||
background-color: transparent;
|
||
border: @btn-border-width solid transparent;
|
||
#button-size(@btn-padding-y, @btn-padding-x, @btn-font-size, @btn-line-height, @btn-border-radius);
|
||
#transition(@btn-transition);
|
||
|
||
#hover({
|
||
color: @body-color;
|
||
text-decoration: none;
|
||
});
|
||
|
||
&:focus,
|
||
&.focus {
|
||
outline: 0;
|
||
box-shadow: @btn-focus-box-shadow;
|
||
}
|
||
|
||
// Disabled comes first so active can properly restyle
|
||
&.disabled,
|
||
&:disabled {
|
||
opacity: @btn-disabled-opacity;
|
||
#box-shadow(none);
|
||
}
|
||
|
||
&:not(:disabled):not(.disabled):active,
|
||
&:not(:disabled):not(.disabled).active {
|
||
#box-shadow(@btn-active-box-shadow);
|
||
|
||
&:focus {
|
||
#box-shadow(@btn-focus-box-shadow, @btn-active-box-shadow);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Future-proof disabling of clicks on `<a>` elements
|
||
a.btn.disabled,
|
||
fieldset:disabled a.btn {
|
||
pointer-events: none;
|
||
}
|
||
|
||
|
||
//
|
||
// Alternate buttons
|
||
//
|
||
|
||
//@each $color, $value in $theme-colors {
|
||
// .btn-#{$color} {
|
||
// @include button-variant($value, $value);
|
||
// }
|
||
//}
|
||
each(@theme-colors, #(@value, @color) {
|
||
.btn-@{color} {
|
||
#button-variant(@value, @value);
|
||
}
|
||
});
|
||
|
||
//@each $color, $value in $theme-colors {
|
||
// .btn-outline-#{$color} {
|
||
// @if $color == "light" {
|
||
// @include button-outline-variant($value, $gray-900);
|
||
// } @else {
|
||
// @include button-outline-variant($value, $white);
|
||
// }
|
||
// }
|
||
//}
|
||
each(@theme-colors, #(@value, @color) {
|
||
.btn-outline-@{color} {
|
||
#button-outline-variant(@value);
|
||
}
|
||
});
|
||
|
||
|
||
//
|
||
// Link buttons
|
||
//
|
||
|
||
// Make a button look and behave like a link
|
||
.btn-link {
|
||
font-weight: @font-weight-normal;
|
||
color: @link-color;
|
||
text-decoration: @link-decoration;
|
||
|
||
#hover({
|
||
color: @link-hover-color;
|
||
text-decoration: @link-hover-decoration;
|
||
});
|
||
|
||
&:focus,
|
||
&.focus {
|
||
text-decoration: @link-hover-decoration;
|
||
box-shadow: none;
|
||
}
|
||
|
||
&:disabled,
|
||
&.disabled {
|
||
color: @btn-link-disabled-color;
|
||
pointer-events: none;
|
||
}
|
||
|
||
// No need for an active state here
|
||
}
|
||
|
||
|
||
//
|
||
// Button Sizes
|
||
//
|
||
|
||
.btn-lg {
|
||
#button-size(@btn-padding-y-lg, @btn-padding-x-lg, @btn-font-size-lg, @btn-line-height-lg, @btn-border-radius-lg);
|
||
}
|
||
|
||
.btn-sm {
|
||
#button-size(@btn-padding-y-sm, @btn-padding-x-sm, @btn-font-size-sm, @btn-line-height-sm, @btn-border-radius-sm);
|
||
}
|
||
|
||
|
||
//
|
||
// Block button
|
||
//
|
||
|
||
.btn-block {
|
||
display: block;
|
||
width: 100%;
|
||
|
||
// Vertically space out multiple block buttons
|
||
+ .btn-block {
|
||
margin-top: @btn-block-spacing-y;
|
||
}
|
||
}
|
||
|
||
// Specificity overrides
|
||
input[type="submit"],
|
||
input[type="reset"],
|
||
input[type="button"] {
|
||
&.btn-block {
|
||
width: 100%;
|
||
}
|
||
}
|