103 lines
1.9 KiB
SCSS
103 lines
1.9 KiB
SCSS
/* Buttons */
|
|
|
|
.btn {
|
|
font-size: $btn-font-size;
|
|
line-height: 1;
|
|
font-weight: 400;
|
|
box-shadow: $btn-box-shadow;
|
|
-webkit-box-shadow: $btn-box-shadow;
|
|
-moz-box-shadow: $btn-box-shadow;
|
|
-ms-box-shadow: $btn-box-shadow;
|
|
@media (max-width: 767px) {
|
|
padding: .875rem 1rem;
|
|
}
|
|
|
|
i {
|
|
font-size: 1rem;
|
|
}
|
|
&.btn-rounded {
|
|
@include border-radius(50px);
|
|
}
|
|
&.btn-sm {
|
|
font-size: $btn-font-size-sm;
|
|
}
|
|
&.btn-lg {
|
|
font-size: $btn-font-size-lg;
|
|
}
|
|
&.btn-xs {
|
|
padding: $btn-padding-y-xs $btn-padding-x-xs;
|
|
font-size: $btn-font-size-xs;
|
|
}
|
|
/* Buttons with only icons */
|
|
&.btn-icon {
|
|
width: 42px;
|
|
height: 42px;
|
|
padding: 0;
|
|
}
|
|
/* Buttons with icon and text */
|
|
&.btn-icon-text {
|
|
.btn-icon-prepend {
|
|
margin-right: .5rem;
|
|
}
|
|
.btn-icon-append {
|
|
margin-left: .5rem;
|
|
}
|
|
}
|
|
&.btn-social-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.btn-group {
|
|
.btn {
|
|
+ .btn {
|
|
border-left: 0;
|
|
}
|
|
@media (max-width: 767px) {
|
|
padding: .5rem .5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-toolbar {
|
|
.btn-group {
|
|
+.btn-group {
|
|
@extend .ml-2;
|
|
}
|
|
}
|
|
}
|
|
@each $color, $value in $theme-colors {
|
|
.btn-#{$color} {
|
|
@include button-variant($value, $value);
|
|
}
|
|
}
|
|
/*social buttons*/
|
|
@each $color, $value in $social-colors {
|
|
.btn-#{$color} {
|
|
@include social-button(social-color($color));
|
|
}
|
|
.btn-outline-#{$color} {
|
|
@include social-outline-button(social-color($color));
|
|
}
|
|
}
|
|
/* inverse buttons */
|
|
@each $color, $value in $theme-colors {
|
|
.btn-inverse-#{$color} {
|
|
@include button-inverse-variant($value);
|
|
}
|
|
.btn-#{$color} {
|
|
&,
|
|
&:hover {
|
|
box-shadow: 0 2px 2px 0 rgba(theme-color($color), .5),
|
|
0 3px 1px -2px rgba(theme-color($color), .5),
|
|
0 1px 5px 0 rgba(theme-color($color), .5)
|
|
}
|
|
}
|
|
}
|
|
@each $color, $value in $theme-colors {
|
|
.btn-outline-#{$color} {
|
|
@include button-outline-variant($value);
|
|
}
|
|
} |