You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
3.4 KiB
122 lines
3.4 KiB
$direction: "";
|
|
@mixin border-arround{
|
|
.border#{$direction}{
|
|
border: 1px solid currentColor !important;
|
|
}
|
|
.border-top#{$direction}{
|
|
border-top: 1px solid currentColor !important;
|
|
}
|
|
.border-right#{$direction}{
|
|
border-right: 1px solid currentColor !important;
|
|
}
|
|
.border-bottom#{$direction}{
|
|
border-bottom: 1px solid currentColor !important;
|
|
}
|
|
.border-left#{$direction}{
|
|
border-left: 1px solid currentColor !important;
|
|
}
|
|
.border-x#{$direction}{
|
|
border-left: 1px solid currentColor !important;
|
|
border-right: 1px solid currentColor !important;
|
|
}
|
|
.border-y#{$direction}{
|
|
border-top: 1px solid currentColor !important;
|
|
border-bottom: 1px solid currentColor !important;
|
|
}
|
|
.border-dashed#{$direction}{
|
|
border: 1px dashed currentColor !important;
|
|
}
|
|
.border-dashed-top#{$direction}{
|
|
border-top: 1px dashed currentColor !important;
|
|
}
|
|
.border-dashed-right#{$direction}{
|
|
border-right: 1px dashed currentColor !important;
|
|
}
|
|
.border-dashed-bottom#{$direction}{
|
|
border-bottom: 1px dashed currentColor !important;
|
|
}
|
|
.border-dashed-left#{$direction}{
|
|
border-left: 1px dashed currentColor !important;
|
|
}
|
|
.border-dashed-x#{$direction}{
|
|
border-left: 1px dashed currentColor !important;
|
|
border-right: 1px dashed currentColor !important;
|
|
}
|
|
.border-dashed-y#{$direction}{
|
|
border-top: 1px dashed currentColor !important;
|
|
border-bottom: 1px dashed currentColor !important;
|
|
}
|
|
.border#{$direction}-0{
|
|
border-width: 0 !important;
|
|
}
|
|
.border-top#{$direction}-0{
|
|
border-top-width: 0 !important;
|
|
}
|
|
.border-right#{$direction}-0{
|
|
border-right-width: 0 !important;
|
|
}
|
|
.border-bottom#{$direction}-0{
|
|
border-bottom-width: 0 !important;
|
|
}
|
|
.border-left#{$direction}-0{
|
|
border-left-width: 0 !important;
|
|
}
|
|
.border-x#{$direction}-0{
|
|
border-left-width: 0 !important;
|
|
border-right-width: 0 !important;
|
|
}
|
|
.border-y#{$direction}-0{
|
|
border-top-width: 0 !important;
|
|
border-bottom-width: 0 !important;
|
|
}
|
|
}
|
|
|
|
@include border-arround;
|
|
|
|
.border-2x{
|
|
border-width: 2px !important;
|
|
}
|
|
|
|
|
|
$direction: -sm;
|
|
@include mq($from: mobile) {
|
|
@include border-arround;
|
|
}
|
|
$direction: -md;
|
|
@include mq($from: tablet) {
|
|
@include border-arround;
|
|
}
|
|
$direction: -lg;
|
|
@include mq($from: desktop) {
|
|
@include border-arround;
|
|
}
|
|
$direction: -xl;
|
|
@include mq($from: wide) {
|
|
@include border-arround;
|
|
}
|
|
|
|
|
|
|
|
/********************************
|
|
Responsive border radius
|
|
********************************/
|
|
$screen-slugs: (-sm: mobile, -md: tablet, -lg: desktop, -xl: wide);
|
|
$amount-slugs: (0: "-0", $radius-primary: -primary, $radius-secondary: -secondary, $radius-capsule: -capsule, 100%: -round);
|
|
$direction-slugs: (tr: -top-right, tl: -top-left, br: -bottom-right, bl: -bottom-left);
|
|
|
|
@mixin radius-manipulation($screen-slug){
|
|
@each $index, $amount-slug in $amount-slugs{
|
|
@each $i, $direction-slug in $direction-slugs{
|
|
.radius-#{$i}#{$screen-slug}#{$amount-slug}{
|
|
border#{$direction-slug}-radius: $index !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include radius-manipulation("");
|
|
@each $key, $screen-slug in $screen-slugs{
|
|
@include mq($from: $screen-slug) {
|
|
@include radius-manipulation($key);
|
|
}
|
|
}
|