141 lines
2.8 KiB
SCSS
141 lines
2.8 KiB
SCSS
@mixin RV-FlexRow__Container--column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
@mixin RV-FlexRow__Container--multiRow {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
@mixin RV-FlexRow__Container--horizontal($-break_width: 500px) {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
|
|
* {
|
|
flex-basis: calc(#{$-break_width} * 999 - 100% * 999);
|
|
}
|
|
}
|
|
|
|
@mixin RV-FlexRow__Container--vertical {
|
|
flex-direction: column;
|
|
}
|
|
|
|
@mixin RV-FlexRow__Container($-prefix: '&') {
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
|
|
@mixin RV-FlexRow__Container--advanced($-break_width: 500px, $-prefix: '&') {
|
|
#{$-prefix}--multiRow {
|
|
@include RV-FlexRow__Container--multiRow;
|
|
}
|
|
|
|
#{$-prefix}--column {
|
|
@include RV-FlexRow__Container--column;
|
|
}
|
|
|
|
#{$-prefix}--horizontal {
|
|
@include RV-FlexRow__Container--horizontal(#{$-break_width});
|
|
}
|
|
|
|
#{$-prefix}--vertical {
|
|
@include RV-FlexRow__Container--vertical;
|
|
}
|
|
}
|
|
|
|
@mixin RV-FlexRow__Item--normal {
|
|
flex-grow: 3;
|
|
flex-shrink: 3;
|
|
}
|
|
|
|
@mixin RV-FlexRow__Item--narrower {
|
|
flex-grow: 1;
|
|
flex-shrink: 5;
|
|
}
|
|
|
|
@mixin RV-FlexRow__Item--narrow {
|
|
flex-grow: 2;
|
|
flex-shrink: 4;
|
|
}
|
|
|
|
@mixin RV-FlexRow__Item--wide {
|
|
flex-grow: 4;
|
|
flex-shrink: 2;
|
|
}
|
|
|
|
@mixin RV-FlexRow__Item--wider {
|
|
flex-grow: 5;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
@mixin RV-FlexRow__Item--fixedSize($-width: 100px) {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
width: min-content;
|
|
flex-basis: $-width;
|
|
}
|
|
|
|
@mixin RV-FlexRow__Item($-prefix: '&') {
|
|
min-width: min-content;
|
|
width: 100%;
|
|
|
|
#{$-prefix},
|
|
#{$-prefix}--normal {
|
|
@include RV-FlexRow__Item--normal;
|
|
}
|
|
}
|
|
|
|
@mixin RV-FlexRow__Item--advanced($-prefix: '&') {
|
|
@include RV-Alignment;
|
|
|
|
#{$-prefix}--narrower {
|
|
@include RV-FlexRow__Item--narrower;
|
|
}
|
|
|
|
#{$-prefix}--narrow {
|
|
@include RV-FlexRow__Item--narrow;
|
|
}
|
|
|
|
#{$-prefix}--wide {
|
|
@include RV-FlexRow__Item--wide;
|
|
}
|
|
|
|
#{$-prefix}--wider {
|
|
@include RV-FlexRow__Item--wider;
|
|
}
|
|
|
|
#{$-prefix}--fixedSize {
|
|
@include RV-FlexRow__Item--fixedSize;
|
|
}
|
|
}
|
|
|
|
@mixin RV-FlexRow--multiRow($-prefix: '&') {
|
|
#{$-prefix}__Container {
|
|
@include RV-FlexRow__Container--multiRow;
|
|
}
|
|
}
|
|
|
|
@mixin RV-FlexRow($-prefix: '&') {
|
|
#{$-prefix}__Container {
|
|
@include RV-FlexRow__Container($-prefix: $-prefix);
|
|
}
|
|
|
|
#{$-prefix}__Item {
|
|
@include RV-FlexRow__Item($-prefix: $-prefix);
|
|
}
|
|
}
|
|
|
|
@mixin RV-FlexRow--advanced($-break_width: 500px, $-prefix: '&') {
|
|
#{$-prefix}__Container {
|
|
@include RV-FlexRow__Container--advanced($-break_width, $-prefix: $-prefix);
|
|
}
|
|
|
|
#{$-prefix}__Item {
|
|
@include RV-FlexRow__Item--advanced($-prefix: $-prefix);
|
|
}
|
|
}
|
|
|
|
.RV-FlexRow {
|
|
@include RV-FlexRow;
|
|
@include RV-FlexRow--advanced;
|
|
} |