scss-library/components/01_Layouts/flexRow/_flexRow.scss

98 lines
1.4 KiB
SCSS
Raw Normal View History

2020-08-25 15:53:43 +02:00
@mixin RV-FlexRow__Container--column {
display: flex;
flex-direction: column;
}
@mixin RV-FlexRow__Container--multiRow {
flex-wrap: wrap;
}
2020-08-23 19:20:11 +02:00
@mixin RV-FlexRow__Container {
display: flex;
flex-direction: row;
justify-content: space-around;
&--multiRow {
2020-08-25 15:53:43 +02:00
@include RV-FlexRow__Container--multiRow;
}
&--column {
@include RV-FlexRow__Container--column;
2020-08-23 19:20:11 +02:00
}
}
2020-08-25 15:53:43 +02:00
@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;
}
2020-08-23 19:20:11 +02:00
@mixin RV-FlexRow__Item {
@include RV-Alignment;
2020-08-25 15:53:43 +02:00
min-width: 0;
width: 100%;
2020-08-23 19:20:11 +02:00
&,&--normal {
2020-08-25 15:53:43 +02:00
@include RV-FlexRow__Item--normal;
2020-08-23 19:20:11 +02:00
}
&--narrower {
2020-08-25 15:53:43 +02:00
@include RV-FlexRow__Item--narrower;
2020-08-23 19:20:11 +02:00
}
&--narrow {
2020-08-25 15:53:43 +02:00
@include RV-FlexRow__Item--narrow;
2020-08-23 19:20:11 +02:00
}
&--wide {
2020-08-25 15:53:43 +02:00
@include RV-FlexRow__Item--wide;
2020-08-23 19:20:11 +02:00
}
&--wider {
2020-08-25 15:53:43 +02:00
@include RV-FlexRow__Item--wider;
2020-08-23 19:20:11 +02:00
}
&--fixedSize {
2020-08-25 15:53:43 +02:00
@include RV-FlexRow__Item--fixedSize;
2020-08-23 19:20:11 +02:00
}
}
2020-08-21 17:20:29 +02:00
@mixin RV-FlexRow {
&__Container {
2020-08-23 19:20:11 +02:00
@include RV-FlexRow__Container;
2020-08-21 16:50:22 +02:00
}
2020-08-21 17:20:29 +02:00
&__Item {
2020-08-23 19:20:11 +02:00
@include RV-FlexRow__Item;
2020-08-21 16:50:22 +02:00
}
}
2020-08-21 17:20:29 +02:00
.RV-FlexRow{
@include RV-FlexRow;
2020-08-21 16:50:22 +02:00
}