212 lines
3.8 KiB
SCSS
212 lines
3.8 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;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* 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;
|
|
}
|
|
}
|
|
|
|
/* ##########
|
|
* Item class
|
|
########### */
|
|
@mixin RV-FlexRow__Item {
|
|
min-width: min-content;
|
|
width: 100%;
|
|
@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;
|
|
} |