61 lines
1.4 KiB
SCSS
61 lines
1.4 KiB
SCSS
//
|
|
// Base styles
|
|
//
|
|
|
|
.btn-brand {
|
|
border: 0;
|
|
i {
|
|
display: inline-block;
|
|
width: (($btn-padding-y * 2) + ($font-size-base * $btn-line-height));
|
|
margin: (- $btn-padding-y) (- $btn-padding-x);
|
|
line-height: (($btn-padding-y * 2) + ($font-size-base * $btn-line-height));
|
|
text-align: center;
|
|
background-color: rgba(0, 0, 0, .2);
|
|
@include border-radius($btn-border-radius);
|
|
}
|
|
|
|
i + span {
|
|
margin-left: ($btn-padding-x * 2);
|
|
}
|
|
|
|
&.btn-lg {
|
|
i {
|
|
width: (($btn-padding-y-lg * 2) + ($font-size-lg * $btn-line-height-lg));
|
|
margin: (- $btn-padding-y-lg) (- $btn-padding-x-lg);
|
|
line-height: (($btn-padding-y-lg * 2) + ($font-size-lg * $btn-line-height-lg));
|
|
@include border-radius($btn-border-radius-lg);
|
|
}
|
|
|
|
i + span {
|
|
margin-left: ($btn-padding-x-lg * 2);
|
|
}
|
|
}
|
|
|
|
&.btn-sm {
|
|
i {
|
|
width: (($btn-padding-y-sm * 2) + ($font-size-sm * $btn-line-height-sm));
|
|
margin: (- $btn-padding-y-sm) (- $btn-padding-x-sm);
|
|
line-height: (($btn-padding-y-sm * 2) + ($font-size-sm * $btn-line-height-sm));
|
|
@include border-radius($btn-border-radius-sm);
|
|
}
|
|
|
|
i + span {
|
|
margin-left: ($btn-padding-x-sm * 2);
|
|
}
|
|
}
|
|
|
|
&.btn-square i {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Variants
|
|
//
|
|
|
|
@each $color, $value in $brands-colors {
|
|
.btn-#{$color} {
|
|
@include button-variant($value, $value);
|
|
}
|
|
}
|