143 lines
2.6 KiB
SCSS
Executable File
143 lines
2.6 KiB
SCSS
Executable File
//
|
|
// buttons.scss
|
|
//
|
|
|
|
// Button shadow
|
|
|
|
@mixin button-shadow($color) {
|
|
box-shadow: $btn-box-shadow rgba($color, 0.5);
|
|
}
|
|
|
|
// Button Shadows
|
|
@each $color, $value in $theme-colors {
|
|
.btn-#{$color} {
|
|
@include button-shadow($value);
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
.mdi {
|
|
&:before {
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
|
|
i {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.btn-rounded {
|
|
border-radius: 2em;
|
|
}
|
|
|
|
//
|
|
// light button
|
|
//
|
|
.btn-light,
|
|
.btn-white {
|
|
color: $gray-900;
|
|
}
|
|
|
|
.btn-white {
|
|
border-color: $gray-300;
|
|
|
|
&:hover, &:focus{
|
|
background-color: $gray-100;
|
|
border-color: $gray-100;
|
|
}
|
|
|
|
&:focus,
|
|
&.focus {
|
|
box-shadow: 0 0 0 $btn-focus-width rgba($gray-300, .3);
|
|
}
|
|
}
|
|
|
|
//
|
|
// Link buttons
|
|
//
|
|
// Make a button look and behave like a link
|
|
.btn-link {
|
|
font-weight: $font-weight-normal;
|
|
color: $link-color;
|
|
background-color: transparent;
|
|
&:hover {
|
|
color: $link-hover-color;
|
|
text-decoration: $link-hover-decoration;
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
&:focus,
|
|
&.focus {
|
|
text-decoration: $link-hover-decoration;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
&:disabled,
|
|
&.disabled {
|
|
color: $btn-link-disabled-color;
|
|
pointer-events: none;
|
|
} // No need for an active state here
|
|
}
|
|
//
|
|
// Alternate buttons
|
|
//
|
|
@each $color,
|
|
$value in $theme-colors {
|
|
.btn-outline-#{$color} {
|
|
@include button-outline-variant($value);
|
|
}
|
|
}
|
|
|
|
//
|
|
// Button labels
|
|
//
|
|
|
|
.btn-label {
|
|
margin: -.55rem .9rem -.55rem -.9rem;
|
|
padding: .6rem .9rem;
|
|
background-color: rgba($gray-900,0.1);
|
|
}
|
|
|
|
.btn-label-right {
|
|
margin: (-$btn-padding-y) (-$btn-padding-x) (-$btn-padding-y) ($btn-padding-x);
|
|
padding: ($btn-padding-y) ($btn-padding-x);
|
|
background-color: rgba($gray-900,0.1);
|
|
display: inline-block;
|
|
}
|
|
|
|
//
|
|
// Button Extra Small Size
|
|
//
|
|
|
|
.btn-xs {
|
|
padding: .2rem .6rem;
|
|
font-size: .75rem;
|
|
border-radius: .15rem;
|
|
}
|
|
|
|
//
|
|
// Soft Buttons
|
|
//
|
|
|
|
@mixin button-variant-soft($bg) {
|
|
color: $bg;
|
|
background-color: rgba($bg, 0.18);
|
|
border-color: rgba($bg, 0.12);
|
|
|
|
&:hover {
|
|
color: $white;
|
|
background-color: $bg;
|
|
}
|
|
|
|
&:focus,
|
|
&.focus {
|
|
box-shadow: 0 0 0 $btn-focus-width rgba($bg, .3);
|
|
}
|
|
}
|
|
|
|
@each $color, $value in $theme-colors {
|
|
.btn-soft-#{$color} {
|
|
@include button-variant-soft($value);
|
|
}
|
|
} |