reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

typical flexbox behavior

Browse Source
This commit is contained in:
reverend
2020-12-27 23:47:35 +01:00
parent b2b32b190f
commit 46a428c516
1 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/01_Layouts/flexRow/_flexRow.scss
View File

@@ -16,7 +16,6 @@
*/
@mixin RV-FlexRow__Container--horizontal {
flex-direction: row;
flex-wrap: wrap;
}
@mixin RV-FlexRow__Container--vertical {
@@ -39,6 +38,14 @@
}
}
/*
* Flexbox behavior, Row is horizontal, but item are wraped individualy
*/
@mixin RV-FlexRow__Container--auto {
@include RV-FlexRow__Container--horizontal;
flex-wrap: wrap;
}
/*
* Shorthand for the modifiers above
*/
@@ -54,14 +61,17 @@
&--vertical {
@include RV-FlexRow__Container--vertical;
}
&--auto {
@include RV-FlexRow__Container--auto;
}
}
/* ##########
* Item class
########### */
@mixin RV-FlexRow__Item {
min-width: min-content;
width: 100%;
flex-basis: max-content;
@include RV-FlexRow__Item--normal;
}