You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
216 lines
4.1 KiB
216 lines
4.1 KiB
//
|
|
// Buttons
|
|
// --------------------------------------------------
|
|
.btn {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1.35;
|
|
border-radius: 2px;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
letter-spacing: 0.5px;
|
|
|
|
span.caret {
|
|
display: inline-block;
|
|
}
|
|
|
|
&.font-weight-bold {
|
|
font-weight: bold;
|
|
}
|
|
&.font-weight-normal {
|
|
font-weight: normal;
|
|
}
|
|
|
|
&.focus,
|
|
&:focus {
|
|
@include box-shadow(none);
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.btn-icon.btn {
|
|
font-size: 20px;
|
|
text-align: center;
|
|
line-height: 1;
|
|
padding: 0;
|
|
height: 38px;
|
|
width: 38px;
|
|
line-height: 36px;
|
|
border-radius: 2px;
|
|
|
|
&.btn-sm {
|
|
height: 30px;
|
|
width: 30px;
|
|
line-height: 26px;
|
|
font-size: 18px;
|
|
padding: 0;
|
|
}
|
|
&.btn-lg {
|
|
height: 46px;
|
|
width: 46px;
|
|
line-height: 38px;
|
|
font-size: 24px;
|
|
padding: 0;
|
|
}
|
|
&.btn-xlg {
|
|
height: 60px;
|
|
width: 60px;
|
|
line-height: 56px;
|
|
font-size: 28px;
|
|
padding: 0;
|
|
}
|
|
|
|
&.btn-sm.btn-rounded {
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
.input-group-rounded {
|
|
.btn-icon.btn {
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
|
|
// Button Sizes
|
|
// --------------------------------------------------
|
|
.btn-xlg,
|
|
.btn-xl {
|
|
// line-height: ensure even-numbered height of button next to large input
|
|
@include button-size(15px, 45px, 16px, 1.4, 2px);
|
|
word-wrap: break-word;
|
|
}
|
|
.btn-sm {
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
padding: $btn-padding-y-sm $btn-padding-x-sm;
|
|
}
|
|
.btn-lg {
|
|
font-size: 14px;
|
|
padding: $btn-padding-y-lg $btn-padding-x-lg;
|
|
}
|
|
|
|
// Button & Input Groups
|
|
// --------------------------------------------------
|
|
.btn-group-lg>.btn, .btn-lg,
|
|
.btn-group-sm>.btn, .btn-sm,
|
|
.input-group-addon,
|
|
.input-group-addon.form-control-lg,
|
|
.input-group-lg > .input-group-addon,
|
|
.input-group-lg > .input-group-btn > .input-group-addon.btn,
|
|
.form-control-lg,
|
|
.input-group-lg>.form-control,
|
|
.input-group-lg>.input-group-addon,
|
|
.input-group-lg>.input-group-btn>.btn {
|
|
border-radius: 2px;
|
|
}
|
|
|
|
|
|
.input-group-lg > .input-group-btn > .btn-icon.btn {
|
|
height: 51px !important;
|
|
width: 51px !important;
|
|
}
|
|
|
|
.input-group-btn:not(:last-child) > .btn,
|
|
.input-group-btn:not(:last-child) > .btn-group {
|
|
margin-right: -2px;
|
|
border-bottom-right-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
|
|
// Specials
|
|
// --------------------------------------------------
|
|
.btn-shadow {
|
|
box-shadow: $gray-400 0 10px 18px !important;
|
|
}
|
|
.btn-bold {
|
|
font-weight: bold;
|
|
}
|
|
.btn-floating {
|
|
box-shadow: 0 6px 3px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2) !important;
|
|
}
|
|
|
|
|
|
// Rounded
|
|
// --------------------------------------------------
|
|
.btn.btn-rounded-sm {
|
|
@include border-radius(.25rem);
|
|
}
|
|
|
|
.btn.btn-rounded,
|
|
.btn-group-lg > .btn.btn-rounded,
|
|
.btn-group-sm > .btn.btn-rounded {
|
|
@include border-radius(30px);
|
|
}
|
|
.btn.btn-rounded.btn-icon {
|
|
@include border-radius(100%);
|
|
}
|
|
|
|
// Link btns
|
|
// --------------------------------------------------
|
|
.btn-link {
|
|
@include appstrap-button-link-variant(lighten($gray-light, 20%), transparent, transparent);
|
|
|
|
&:focus,
|
|
&.focus,
|
|
&:hover {
|
|
color: $gray-light;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:active,
|
|
&.active,
|
|
.show > .dropdown-toggle &,
|
|
.open > .dropdown-toggle & {
|
|
color: $gray-light;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&.focus {
|
|
color: $gray-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Extra theme colours
|
|
// -------------------------------------------
|
|
$as-colours: $as-theme-colours;
|
|
@if $as-theme-colours-extended-options == true {
|
|
// Include social brands
|
|
$as-colours: $as-theme-colours-extended;
|
|
}
|
|
|
|
@each $name, $value in $as-colours {
|
|
.btn-#{$name} {
|
|
@include button-variant($value, $value);
|
|
}
|
|
.btn-outline-#{$name} {
|
|
@if $name == 'light' {
|
|
@include button-outline-variant($value, $gray-700);
|
|
} @else {
|
|
@include button-outline-variant($value, white);
|
|
}
|
|
}
|
|
.btn-#{$name}.btn-invert {
|
|
background-color: darken($value, 10%);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $value;
|
|
}
|
|
}
|
|
.btn-#{$name}.btn-link {
|
|
@include appstrap-button-variant($value, transparent, transparent);
|
|
}
|
|
}
|
|
|
|
// Hover effects
|
|
|
|
|
|
// No shadow
|
|
.btn-flat {
|
|
box-shadow: none;
|
|
} |