465 lines
9.8 KiB
SCSS
Vendored
465 lines
9.8 KiB
SCSS
Vendored
// Buttons
|
|
|
|
// 2x Outline Border
|
|
$btn-block-spacing-y: .5rem !default;
|
|
|
|
.btn-outline-2x {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.btn-group {
|
|
.btn {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.btn-outline-2x + .btn-outline-2x {
|
|
margin-left: -2px;
|
|
}
|
|
|
|
.btn-square {
|
|
@include border-radius(0);
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
|
|
// Pills Buttons
|
|
|
|
&.btn-pill.btn-wide,
|
|
&.btn-pill {
|
|
@include border-start-radius(50px);
|
|
@include border-end-radius(50px);
|
|
}
|
|
|
|
}
|
|
|
|
// Dashed Border
|
|
|
|
.btn-dashed {
|
|
border-style: dashed;
|
|
}
|
|
|
|
// Icon Buttons
|
|
|
|
.btn-icon {
|
|
vertical-align: bottom;
|
|
|
|
&.btn-icon-right {
|
|
.btn-icon-wrapper {
|
|
margin-left: divide($spacer, 2);
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.btn-icon-wrapper {
|
|
margin-right: divide($spacer, 2);
|
|
margin-left: 0;
|
|
margin-top: 0;
|
|
font-size: 17px;
|
|
vertical-align: middle;
|
|
transition: color .1s;
|
|
display: inline-block;
|
|
}
|
|
|
|
&.btn-link {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&.btn-lg:not(.btn-block) {
|
|
.btn-icon-wrapper {
|
|
font-size: 25px;
|
|
}
|
|
}
|
|
|
|
&.btn-sm:not(.btn-block) {
|
|
.btn-icon-wrapper {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-icon-only {
|
|
.btn-icon-wrapper {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
// Hover Shine {
|
|
|
|
.btn-hover-shine {
|
|
position: relative;
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 100%;
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
-webkit-transition: none;
|
|
-moz-transition: none;
|
|
transition: none;
|
|
}
|
|
|
|
&:hover:after {
|
|
width: 120%;
|
|
background-color: rgba(255, 255, 255, 0);
|
|
transition: all 0.4s ease-in-out;
|
|
}
|
|
|
|
&.btn-pill {
|
|
&::after {
|
|
@include border-start-radius(50px);
|
|
@include border-end-radius(50px);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Vertical Icons {
|
|
|
|
.btn-icon-vertical {
|
|
padding-top: ($btn-block-spacing-y * 2);
|
|
padding-bottom: ($btn-block-spacing-y * 2);
|
|
|
|
.btn-icon-wrapper {
|
|
display: block;
|
|
font-size: 200%;
|
|
margin: 5px 0;
|
|
opacity: .6;
|
|
}
|
|
|
|
&.btn-link {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&.btn-lg:not(.btn-block) {
|
|
.btn-icon-wrapper {
|
|
font-size: 25px;
|
|
}
|
|
}
|
|
|
|
&.btn-sm:not(.btn-block) {
|
|
.btn-icon-wrapper {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
&:active,
|
|
&.active,
|
|
&:hover {
|
|
.btn-icon-wrapper {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.btn-icon-bottom {
|
|
.btn-icon-wrapper {
|
|
margin: divide($spacer, 5) 0 5px;
|
|
}
|
|
}
|
|
|
|
&.btn-transition-text {
|
|
.btn-icon-wrapper {
|
|
transition: all .2s !important;
|
|
}
|
|
|
|
&:hover {
|
|
.btn-icon-wrapper {
|
|
transform: scale(1.3);
|
|
}
|
|
}
|
|
|
|
&.btn-transition-alt {
|
|
|
|
&:hover {
|
|
.btn-icon-wrapper {
|
|
color: $white !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-icon-lg {
|
|
font-size: $h1-font-size !important;
|
|
}
|
|
|
|
// Buttons Transitions
|
|
|
|
.btn-transition {
|
|
color: $gray-600;
|
|
border-color: $gray-200;
|
|
background-color: none;
|
|
|
|
&.btn-outline-link {
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
|
|
&:hover {
|
|
color: $primary;
|
|
background: $gray-100;
|
|
}
|
|
}
|
|
|
|
&.disabled,
|
|
&:disabled {
|
|
color: $gray-600;
|
|
border-color: $gray-200;
|
|
}
|
|
|
|
&:hover {
|
|
.btn-icon-wrapper {
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-transition-alt {
|
|
&:hover {
|
|
.icon-gradient {
|
|
-webkit-background-clip: initial;
|
|
-webkit-text-fill-color: initial;
|
|
background-clip: initial;
|
|
text-fill-color: initial;
|
|
background: none !important;
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Square Buttons
|
|
|
|
.btn-square {
|
|
@include border-radius(0 !important);
|
|
}
|
|
|
|
// Wide buttons
|
|
|
|
.btn {
|
|
&.btn-wide {
|
|
@include button-size($btn-padding-y, ($btn-padding-x * 2), $font-size-xs, $btn-border-radius);
|
|
}
|
|
}
|
|
|
|
.btn-lg {
|
|
&.btn-wide {
|
|
@include button-size($btn-padding-y-lg, ($btn-padding-x-lg * 2), $font-size-lg, $btn-border-radius-lg);
|
|
}
|
|
}
|
|
|
|
.btn-sm {
|
|
&.btn-wide {
|
|
@include button-size($btn-padding-y-sm, ($btn-padding-x-sm * 2), $font-size-xs, $btn-border-radius-sm);
|
|
}
|
|
}
|
|
|
|
// Dropdown toggle
|
|
|
|
.dropdown-toggle {
|
|
&::after {
|
|
position: relative;
|
|
top: 2px;
|
|
opacity: .8;
|
|
}
|
|
}
|
|
|
|
.dropright {
|
|
.dropdown-toggle {
|
|
&::after {
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-toggle-split {
|
|
border-left: rgba(255, 255, 255, .1) solid 1px;
|
|
}
|
|
|
|
// Buttons Gradients
|
|
|
|
$btn-gradients: ();
|
|
|
|
$gradient-primary: $brand;
|
|
$gradient-secondary: $gray-600;
|
|
$gradient-success: $green;
|
|
$gradient-info: $cyan;
|
|
$gradient-warning: $yellow;
|
|
$gradient-danger: $red;
|
|
$gradient-light: $blue-light;
|
|
$gradient-dark: $gray-800;
|
|
$gradient-focus: $indigo;
|
|
$gradient-alt: $purple;
|
|
|
|
$gradinet-percent: 15%;
|
|
|
|
$btn-gradients: map_merge(
|
|
(
|
|
"primary": (
|
|
shade-color($gradient-primary, $gradinet-percent), // color-start
|
|
$gradient-primary, // color-end
|
|
0%, // gr-start
|
|
),
|
|
"secondary": (
|
|
shade-color($gradient-secondary, $gradinet-percent), // color-start
|
|
$gradient-secondary, // color-end
|
|
0%, // gr-start
|
|
),
|
|
"success": (
|
|
shade-color($gradient-success, $gradinet-percent), // color-start
|
|
$gradient-success, // color-end
|
|
0%, // gr-start
|
|
),
|
|
"info": (
|
|
shade-color($gradient-info, $gradinet-percent), // color-start
|
|
$gradient-info, // color-end
|
|
0%, // gr-start
|
|
),
|
|
"warning": (
|
|
shade-color($gradient-warning, $gradinet-percent), // color-start
|
|
$gradient-warning, // color-end
|
|
0%, // gr-start
|
|
),
|
|
"danger": (
|
|
shade-color($gradient-danger, $gradinet-percent), // color-start
|
|
$gradient-danger, // color-end
|
|
0%, // gr-start
|
|
),
|
|
"focus": (
|
|
shade-color($gradient-focus, $gradinet-percent), // color-start
|
|
$gradient-focus, // color-end
|
|
0%, // gr-start
|
|
),
|
|
"alternate": (
|
|
shade-color($gradient-alt, $gradinet-percent), // color-start
|
|
$gradient-alt, // color-end
|
|
0%, // gr-start
|
|
),
|
|
"light": (
|
|
shade-color($gradient-light, $gradinet-percent), // color-start
|
|
$gradient-light, // color-end
|
|
0%, // gr-start
|
|
),
|
|
"dark": (
|
|
shade-color($gradient-dark, $gradinet-percent), // color-start
|
|
$gradient-dark, // color-end
|
|
0%, // gr-start
|
|
),
|
|
),
|
|
$btn-gradients
|
|
);
|
|
|
|
@mixin btn-grad-variant($color-start, $color-end, $gr-start) {
|
|
background-image: linear-gradient(140deg, $color-start -30%, $color-end 90%);
|
|
background-color: $color-start;
|
|
border-color: $color-start;
|
|
color: color-yiq(shade-color($color-start, 10%));
|
|
|
|
&.active,
|
|
&:active,
|
|
&:not(:disabled):not(.disabled):hover {
|
|
background-image: linear-gradient(120deg, shade-color($color-start, 3%) 0%, shade-color($color-end, 3%) 100%);
|
|
color: color-yiq(shade-color($color-start, 10%));
|
|
border-color: shade-color($color-start, 10%);
|
|
}
|
|
|
|
&:focus,
|
|
&.focus,
|
|
&:active,
|
|
&.active {
|
|
color: color-yiq(shade-color($color-start, 10%)) !important;
|
|
border-color: shade-color($color-end, 20%) !important;
|
|
}
|
|
|
|
}
|
|
|
|
@each $grad, $colors in $btn-gradients {
|
|
$color: nth($colors, 1);
|
|
$color1: nth($colors, 2);
|
|
$color2: nth($colors, 3);
|
|
|
|
.btn-gradient-#{$grad} {
|
|
@include btn-grad-variant($color, $color1, $color2);
|
|
|
|
&.btn-shadow {
|
|
box-shadow: 0 0.125rem 0.625rem rgba($color1, .4), 0 0.0625rem 0.125rem rgba($color1, .5);
|
|
|
|
&:hover {
|
|
box-shadow: 0 0.125rem 0.625rem rgba($color1, .5), 0 0.0625rem 0.125rem rgba($color1, .6);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn.btn-shadow {
|
|
&.active {
|
|
box-shadow: 0 0 0 0 transparent !important;
|
|
}
|
|
}
|
|
|
|
// Links
|
|
|
|
$link-color: $primary;
|
|
$link-hover-color: shade-color($link-color, 15%);
|
|
|
|
// Generate Buttons
|
|
|
|
@each $color, $value in $theme-colors {
|
|
.btn-#{$color} {
|
|
@include button-variant($value, $value);
|
|
|
|
&.btn-shadow {
|
|
box-shadow: 0 0.125rem 0.625rem rgba($value, .4), 0 0.0625rem 0.125rem rgba($value, .5);
|
|
|
|
&:hover {
|
|
box-shadow: 0 0.125rem 0.625rem rgba($value, .5), 0 0.0625rem 0.125rem rgba($value, .6);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $color, $value in $theme-colors {
|
|
.btn-shadow-#{$color} {
|
|
&:hover {
|
|
box-shadow: 0 0.125rem 0.625rem rgba($value, .4), 0 0.0625rem 0.125rem rgba($value, .5);
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $color, $value in $theme-colors {
|
|
.btn-outline-#{$color} {
|
|
@include button-outline-variant($value);
|
|
|
|
&.btn-shadow {
|
|
box-shadow: 0 0.125rem 0.625rem rgba($value, .4), 0 0.0625rem 0.125rem rgba($value, .5);
|
|
|
|
&.active:hover,
|
|
&.disabled:hover,
|
|
&:active:hover,
|
|
&:disabled:hover {
|
|
box-shadow: 0 0.125rem 0.625rem rgba($value, .5), 0 0.0625rem 0.125rem rgba($value, .6);
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: (0px 5px 15px 2px rgba($value, 0.19));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
position: relative;
|
|
@include transition($btn-transition);
|
|
}
|
|
|
|
.btn-light {
|
|
border-color: shade-color(#f5f5f5, 10%);
|
|
}
|
|
|
|
.btn-outline-light {
|
|
color: shade-color(#f5f5f5, 40%);
|
|
} |