117 lines
3.4 KiB
SCSS
117 lines
3.4 KiB
SCSS
@mixin button-social-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
|
padding: $padding-y $padding-x;
|
|
font-size: $font-size;
|
|
line-height: $line-height;
|
|
border: 0;
|
|
@include border-radius($border-radius);
|
|
|
|
&::before {
|
|
width: ($padding-y * 2) + ($font-size * $line-height);
|
|
height: ($padding-y * 2) + ($font-size * $line-height);
|
|
padding: $padding-y 0;
|
|
font-size: $font-size;
|
|
line-height: $line-height;
|
|
@include border-radius($border-radius);
|
|
}
|
|
|
|
span {
|
|
margin-left: ($padding-y * 2) + ($font-size * $line-height);
|
|
}
|
|
|
|
&.icon {
|
|
width: ($padding-y * 2) + ($font-size * $line-height);
|
|
height: ($padding-y * 2) + ($font-size * $line-height);
|
|
}
|
|
}
|
|
|
|
@mixin avatar($width, $status-width) {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: $width;
|
|
|
|
.img-avatar {
|
|
width: $width;
|
|
height: $width;
|
|
}
|
|
|
|
.avatar-status {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: block;
|
|
width: $status-width;
|
|
height: $status-width;
|
|
border: 1px solid #fff;
|
|
border-radius: 50em;
|
|
}
|
|
}
|
|
|
|
@mixin borders($borders) {
|
|
@each $border in $borders {
|
|
$direction: nth($border, 1);
|
|
@if $direction == "all" {
|
|
$size: map-get(map-get($borders, $direction), size);
|
|
$style: map-get(map-get($borders, $direction), style);
|
|
$color: map-get(map-get($borders, $direction), color);
|
|
border: $size $style $color;
|
|
} @else if $direction == "top" {
|
|
$size: map-get(map-get($borders, $direction), size);
|
|
$style: map-get(map-get($borders, $direction), style);
|
|
$color: map-get(map-get($borders, $direction), color);
|
|
border-top: $size $style $color;
|
|
} @else if $direction == "right" {
|
|
$size: map-get(map-get($borders, $direction), size);
|
|
$style: map-get(map-get($borders, $direction), style);
|
|
$color: map-get(map-get($borders, $direction), color);
|
|
border-right: $size $style $color;
|
|
} @else if $direction == "bottom" {
|
|
$size: map-get(map-get($borders, $direction), size);
|
|
$style: map-get(map-get($borders, $direction), style);
|
|
$color: map-get(map-get($borders, $direction), color);
|
|
border-bottom: $size $style $color;
|
|
} @else if $direction == "left" {
|
|
$size: map-get(map-get($borders, $direction), size);
|
|
$style: map-get(map-get($borders, $direction), style);
|
|
$color: map-get(map-get($borders, $direction), color);
|
|
border-left: $size $style $color;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin sidebar-width($borders, $width) {
|
|
$sidebar-width: $width;
|
|
|
|
@each $border in $borders {
|
|
$direction: nth($border, 1);
|
|
@if $direction == "all" {
|
|
$size: map-get(map-get($borders, $direction), size);
|
|
$sidebar-width: ($sidebar-width - (2 * $size));
|
|
} @else if $direction == "right" {
|
|
$size: map-get(map-get($borders, $direction), size);
|
|
$sidebar-width: $sidebar-width - $size;
|
|
} @else if $direction == "left" {
|
|
$size: map-get(map-get($borders, $direction), size);
|
|
$sidebar-width: $sidebar-width - $size;
|
|
}
|
|
width: $sidebar-width;
|
|
}
|
|
}
|
|
|
|
@mixin bg-variant($parent, $color) {
|
|
#{$parent} {
|
|
@include border-radius($card-border-radius-inner $card-border-radius-inner $card-border-radius-inner $card-border-radius-inner);
|
|
color: #fff !important;
|
|
background-color: $color !important;
|
|
}
|
|
a#{$parent} {
|
|
@include hover-focus {
|
|
background-color: darken($color, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin card-accent-variant($color) {
|
|
border-top-width: 2px;
|
|
border-top-color: $color;
|
|
}
|