2021-11-28 12:49:22 -08:00
|
|
|
//
|
2020-07-26 06:11:27 -07:00
|
|
|
// buttons.scss
|
|
|
|
// Extended from Bootstrap
|
|
|
|
//
|
|
|
|
|
2021-11-28 12:49:22 -08:00
|
|
|
//
|
|
|
|
// Bootstrap Overrides =====================================
|
|
|
|
//
|
|
|
|
|
|
|
|
// Sizing
|
|
|
|
|
|
|
|
.btn-lg {
|
|
|
|
line-height: $btn-line-height-lg;
|
|
|
|
}
|
|
|
|
|
|
|
|
.btn-sm {
|
|
|
|
line-height: $btn-line-height-sm;
|
|
|
|
}
|
|
|
|
|
2020-07-26 06:11:27 -07:00
|
|
|
|
|
|
|
//
|
2021-11-28 12:49:22 -08:00
|
|
|
// Theme ===================================
|
2020-07-26 06:11:27 -07:00
|
|
|
//
|
|
|
|
|
|
|
|
// Button white
|
|
|
|
|
|
|
|
.btn-white {
|
|
|
|
border-color: $gray-300;
|
|
|
|
|
2021-11-28 12:49:22 -08:00
|
|
|
&:hover, &:focus {
|
2020-07-26 06:11:27 -07:00
|
|
|
background-color: $gray-100;
|
|
|
|
border-color: $gray-400;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.btn-group-toggle .btn-white:not(:disabled):not(.disabled):active,
|
2021-11-28 12:49:22 -08:00
|
|
|
.btn-group-toggle .btn-white:not(:disabled):not(.disabled).active,
|
|
|
|
.btn-group-toggle .btn-check:checked + .btn-white {
|
2020-07-26 06:11:27 -07:00
|
|
|
background-color: $input-bg;
|
|
|
|
border-color: $input-focus-border-color;
|
2021-11-28 12:49:22 -08:00
|
|
|
box-shadow: none;
|
2020-07-26 06:11:27 -07:00
|
|
|
color: $primary;
|
|
|
|
}
|
|
|
|
|
|
|
|
.btn-group-toggle .btn-white:focus,
|
|
|
|
.btn-group-toggle .btn-white.focus {
|
|
|
|
box-shadow: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2021-11-28 12:49:22 -08:00
|
|
|
// Button white 20
|
|
|
|
|
|
|
|
.btn-white-20 {
|
|
|
|
background-color: rgba($white, .2);
|
|
|
|
border-color: transparent;
|
|
|
|
color: $white;
|
|
|
|
|
|
|
|
&:hover, &:focus {
|
|
|
|
background-color: rgba($white, .12);
|
|
|
|
border-color: transparent;
|
|
|
|
color: $white;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2020-07-26 06:11:27 -07:00
|
|
|
// Button outline secondary
|
|
|
|
|
|
|
|
.btn-outline-secondary {
|
2021-11-28 12:49:22 -08:00
|
|
|
&:not(:hover):not([aria-expanded="true"]):not([aria-pressed="true"]) {
|
2020-07-26 06:11:27 -07:00
|
|
|
border-color: $gray-400;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Button rounded
|
|
|
|
//
|
|
|
|
// Creates circle button variations
|
|
|
|
|
|
|
|
.btn-rounded-circle {
|
|
|
|
width: calc(1em * #{$btn-line-height} + #{$input-btn-padding-y * 2 } + #{$btn-border-width} * 2);
|
|
|
|
padding-left: 0;
|
|
|
|
padding-right: 0;
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
2021-11-28 12:49:22 -08:00
|
|
|
|
2020-07-26 06:11:27 -07:00
|
|
|
.btn-rounded-circle.btn-lg {
|
|
|
|
width: calc(1em * #{$btn-line-height-lg} + #{$input-btn-padding-y-lg * 2 } + #{$btn-border-width} * 2);
|
|
|
|
}
|
2021-11-28 12:49:22 -08:00
|
|
|
|
2020-07-26 06:11:27 -07:00
|
|
|
.btn-rounded-circle.btn-sm {
|
|
|
|
width: calc(1em * #{$btn-line-height-sm} + #{$input-btn-padding-y-sm * 2 } + #{$btn-border-width} * 2);
|
|
|
|
}
|