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

222 lines
4.0 KiB
SCSS

/*
* Classes for easy flexrow usage
*/
/* ##########
* Container class
########### */
@mixin RV-FlexRow__Container($-prefix: '&') {
display: flex;
height: 100%;
}
/*
* Orientation
*/
@mixin RV-FlexRow__Container--horizontal {
flex-direction: row;
}
@mixin RV-FlexRow__Container--vertical {
flex-direction: column;
}
/*
* Breaks from row to column orientation at the given breakpoint
* breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint.
*/
@mixin RV-FlexRow__Container--breakPoint($-localBreakPoint: 500px, $-mediaBreakPoint: null) {
* {
flex-basis: calc(#{$-localBreakPoint} * 999 - 100% * 999);
}
@if ($-mediaBreakPoint !=null) {
@media(max-width: $-mediaBreakPoint) {
@include RV-FlexRow__Container--column;
}
}
}
/*
* 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
*/
@mixin RV-FlexRow__Container--shorthands($-break_width: 500px) {
&--breakPoint {
@include RV-FlexRow__Container--breakPoint(#{$-break_width});
}
&--horizontal {
@include RV-FlexRow__Container--horizontal;
}
&--vertical {
@include RV-FlexRow__Container--vertical;
}
&--auto {
@include RV-FlexRow__Container--auto;
}
}
/* ##########
* Item class
########### */
@mixin RV-FlexRow__Item {
flex-basis: max-content;
@include RV-FlexRow__Item--normal;
}
/*
* Varios relative width of items to each other
*/
@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;
}
/*
* Item has always the given width
*/
@mixin RV-FlexRow__Item--fixedSize($-width: 100px) {
flex-grow: 0;
flex-shrink: 0;
width: min-content;
flex-basis: $-width;
}
/*
* Item width relativ to the container
*/
@mixin RV-FlexRow__Item--half {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
width: 50%;
}
@mixin RV-FlexRow__Item--third {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 33.33%;
width: 33.33%;
}
@mixin RV-FlexRow__Item--quarter {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 25%;
width: 25%;
}
@mixin RV-FlexRow__Item--content {
flex-grow: 0;
flex-shrink: 0;
width: max-content;
flex-basis: max-content;
}
/*
* Shorthand for the modifiers above
*/
@mixin RV-FlexRow__Item--shorthands() {
@include RV-Alignment;
&--narrower {
@include RV-FlexRow__Item--narrower;
}
&--narrow {
@include RV-FlexRow__Item--narrow;
}
&--wide {
@include RV-FlexRow__Item--wide;
}
&--wider {
@include RV-FlexRow__Item--wider;
}
&--fixedSize {
@include RV-FlexRow__Item--fixedSize;
}
&--half {
@include RV-FlexRow__Item--half;
}
&--third {
@include RV-FlexRow__Item--third;
}
&--quarter {
@include RV-FlexRow__Item--quarter;
}
&--content {
@include RV-FlexRow__Item--content;
}
}
/*
* Combining basic classes
*/
@mixin RV-FlexRow($-prefix: '&') {
#{$-prefix}__Container {
@include RV-FlexRow__Container($-prefix: $-prefix);
}
#{$-prefix}__Item {
@include RV-FlexRow__Item;
}
}
/*
* Combining shorthands
*/
@mixin RV-FlexRow--shorthands($-break_width: 500px, $-prefix: '&') {
#{$-prefix}__Container {
@include RV-FlexRow__Container--shorthands($-break_width);
}
#{$-prefix}__Item {
@include RV-FlexRow__Item--shorthands;
}
}
/*
* Final CSS Class
*/
.RV-FlexRow {
@include RV-FlexRow;
@include RV-FlexRow--shorthands;
}