You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.3 KiB
SCSS
73 lines
1.3 KiB
SCSS
@include b('flex') {
|
|
display: flex;
|
|
|
|
@include m('row') {
|
|
flex-direction: row;
|
|
}
|
|
|
|
@include m('row-reverse') {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
@include m('column') {
|
|
flex-direction: column;
|
|
}
|
|
|
|
@include m('column-reverse') {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
@include m('wrap') {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
@include m('wrap-reverse') {
|
|
flex-wrap: wrap-reverse;
|
|
}
|
|
|
|
@each $a in ['between', 'around', 'center', 'start', 'end '] {
|
|
@if $a == 'between' or $a == 'around' {
|
|
@include m('justify-#{$a}') {
|
|
justify-content: space-#{$a};
|
|
}
|
|
} @else {
|
|
@include m('justify-#{$a}') {
|
|
justify-content: #{$a};
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $a in ['stretch', 'center', 'start', 'end ', 'baseline'] {
|
|
@if $a == 'start' or $a == 'end' {
|
|
@include m('items-#{$a}') {
|
|
align-items: flex-#{$a};
|
|
}
|
|
} @else {
|
|
@include m('items-#{$a}') {
|
|
align-items: #{$a};
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $a in ['stretch', 'center', 'start', 'end ', 'between', 'around'] {
|
|
@if $a == 'start' or $a == 'end' {
|
|
@include m('align-#{$a}') {
|
|
align-content: flex-#{$a};
|
|
}
|
|
} @else if $a == 'between' or $a == 'around'{
|
|
@include m('align-#{$a}') {
|
|
align-content: space-#{$a};
|
|
}
|
|
} @else {
|
|
@include m('align-#{$a}') {
|
|
align-content: #{$a};
|
|
}
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 24 {
|
|
@include m(#{$i}) {
|
|
flex: #{$i};
|
|
}
|
|
}
|
|
} |