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.
83 lines
2.5 KiB
83 lines
2.5 KiB
$responsive-slugs: (xs: -xs, sm: -sm, md: -md, lg: -lg, xl: -xl);
|
|
$responsive-slug: "";
|
|
$attribute: "";
|
|
@mixin space-around{
|
|
@each $index, $spacer in $spacers{
|
|
.#{$class-slug}#{map-get($responsive-slugs, #{$responsive-slug})}-#{$index}{
|
|
#{$attribute}: $spacer !important;
|
|
}
|
|
.#{$class-slug}t#{map-get($responsive-slugs, #{$responsive-slug})}-#{$index}{
|
|
#{$attribute}-top: $spacer !important;
|
|
}
|
|
.#{$class-slug}r#{map-get($responsive-slugs, #{$responsive-slug})}-#{$index}{
|
|
#{$attribute}-right: $spacer !important;
|
|
}
|
|
.#{$class-slug}b#{map-get($responsive-slugs, #{$responsive-slug})}-#{$index}{
|
|
#{$attribute}-bottom: $spacer !important;
|
|
}
|
|
.#{$class-slug}l#{map-get($responsive-slugs, #{$responsive-slug})}-#{$index}{
|
|
#{$attribute}-left: $spacer !important;
|
|
}
|
|
.#{$class-slug}x#{map-get($responsive-slugs, #{$responsive-slug})}-#{$index}{
|
|
#{$attribute}-left: $spacer !important;
|
|
#{$attribute}-right: $spacer !important;
|
|
}
|
|
.#{$class-slug}y#{map-get($responsive-slugs, #{$responsive-slug})}-#{$index}{
|
|
#{$attribute}-top: $spacer !important;
|
|
#{$attribute}-bottom: $spacer !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
$class-slug: m;
|
|
@if( $class-slug == m){
|
|
$attribute: margin;
|
|
@include space-around;
|
|
@include mq($until: mobile) {
|
|
$responsive-slug: xs;
|
|
@include space-around;
|
|
}
|
|
@include mq($from: mobile) {
|
|
$responsive-slug: sm;
|
|
@include space-around;
|
|
}
|
|
@include mq($from: tablet) {
|
|
$responsive-slug: md;
|
|
@include space-around;
|
|
}
|
|
@include mq($from: desktop) {
|
|
$responsive-slug: lg;
|
|
@include space-around;
|
|
}
|
|
@include mq($from: wide) {
|
|
$responsive-slug: xl;
|
|
@include space-around;
|
|
}
|
|
}
|
|
|
|
$responsive-slug: "";
|
|
$class-slug: p;
|
|
@if( $class-slug == p){
|
|
$attribute: padding;
|
|
@include space-around;
|
|
@include mq($until: mobile) {
|
|
$responsive-slug: xs;
|
|
@include space-around;
|
|
}
|
|
@include mq($from: mobile) {
|
|
$responsive-slug: sm;
|
|
@include space-around;
|
|
}
|
|
@include mq($from: tablet) {
|
|
$responsive-slug: md;
|
|
@include space-around;
|
|
}
|
|
@include mq($from: desktop) {
|
|
$responsive-slug: lg;
|
|
@include space-around;
|
|
}
|
|
@include mq($from: wide) {
|
|
$responsive-slug: xl;
|
|
@include space-around;
|
|
}
|
|
}
|