// Mixins // Avatar mixin @mixin avatar-base($size: $unit-8) {
font-size: $size / 2; height: $size; width: $size;
}
// Background color utility mixin @mixin bg-color-variant($name: “.bg-primary”, $color: $primary-color) {
#{$name} { background: $color; }
}
// Button variant mixin @mixin button-variant($color: $primary-color) {
background: $color; border-color: darken($color, 3%); color: $light-color; &:focus { @include control-shadow($color); } &:focus, &:hover { background: darken($color, 2%); border-color: darken($color, 5%); color: $light-color; } &:active, &.active { background: darken($color, 7%); border-color: darken($color, 10%); color: $light-color; } &.loading { &::after { border-bottom-color: $light-color; border-left-color: $light-color; } }
}
@mixin button-outline-variant($color: $primary-color) {
background: $light-color; border-color: $color; color: $color; &:focus { @include control-shadow($color); } &:focus, &:hover { background: lighten($color, 50%); border-color: darken($color, 2%); color: $color; } &:active, &.active { background: $color; border-color: darken($color, 5%); color: $light-color; } &.loading { &::after { border-bottom-color: $color; border-left-color: $color; } }
}
// Clearfix mixin @mixin clearfix() {
&::after { clear: both; content: ""; display: table; }
}
// Component focus shadow @mixin control-shadow($color: $primary-color) {
box-shadow: 0 0 0 .1rem rgba($color, .2);
}
// Component transition @mixin control-transition() {
transition: all .2s ease;
}
// Label base style @mixin label-base() {
border-radius: $border-radius; line-height: 1.2; padding: .1rem .15rem;
}
@mixin label-variant($color: $light-color, $bg-color: $primary-color) {
background: $bg-color; color: $color;
}
// Margin utility mixin @mixin margin-variant($id: 1, $size: $unit-1) {
.m-#{$id} { margin: $size; } .mb-#{$id} { margin-bottom: $size; } .ml-#{$id} { margin-left: $size; } .mr-#{$id} { margin-right: $size; } .mt-#{$id} { margin-top: $size; } .mx-#{$id} { margin-left: $size; margin-right: $size; } .my-#{$id} { margin-bottom: $size; margin-top: $size; }
}
// Padding utility mixin @mixin padding-variant($id: 1, $size: $unit-1) {
.p-#{$id} { padding: $size; } .pb-#{$id} { padding-bottom: $size; } .pl-#{$id} { padding-left: $size; } .pr-#{$id} { padding-right: $size; } .pt-#{$id} { padding-top: $size; } .px-#{$id} { padding-left: $size; padding-right: $size; } .py-#{$id} { padding-bottom: $size; padding-top: $size; }
}
// Shadow mixin @mixin shadow-variant($offset) {
box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3);
}
// Text color utility mixin @mixin text-color-variant($name: “.text-primary”, $color: $primary-color) {
#{$name} { color: $color; } a#{$name} { &:focus, &:hover { color: darken($color, 5%); } }
}
// Text Ellipsis @mixin text-ellipsis() {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
// Toast variant mixin @mixin toast-variant($color: $dark-color) {
background: rgba($color, .9); border-color: $color;
}