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

222 lines
4.0 KiB
SCSS
Raw Normal View History

2020-12-27 20:28:45 +01:00
/*
* Classes for easy flexrow usage
*/
2020-08-25 15:53:43 +02:00
2020-12-27 20:28:45 +01:00
/* ##########
* Container class
########### */
@mixin RV-FlexRow__Container($-prefix: '&') {
display: flex;
height: 100%;
2020-08-25 15:53:43 +02:00
}
2020-12-27 20:28:45 +01:00
/*
* Orientation
*/
@mixin RV-FlexRow__Container--horizontal {
2020-12-27 16:00:24 +01:00
flex-direction: row;
}
2020-08-23 19:20:11 +02:00
2020-12-27 16:00:24 +01:00
@mixin RV-FlexRow__Container--vertical {
flex-direction: column;
}
2020-08-25 15:53:43 +02:00
2020-12-27 20:28:45 +01:00
/*
* 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);
}
2020-12-27 16:00:24 +01:00
2020-12-27 20:28:45 +01:00
@if ($-mediaBreakPoint !=null) {
@media(max-width: $-mediaBreakPoint) {
@include RV-FlexRow__Container--column;
}
2020-12-27 16:00:24 +01:00
}
2020-12-27 20:28:45 +01:00
}
2020-12-27 16:00:24 +01:00
2020-12-27 23:47:35 +01:00
/*
* Flexbox behavior, Row is horizontal, but item are wraped individualy
*/
@mixin RV-FlexRow__Container--auto {
@include RV-FlexRow__Container--horizontal;
flex-wrap: wrap;
}
2020-12-27 20:28:45 +01:00
/*
* Shorthand for the modifiers above
*/
@mixin RV-FlexRow__Container--shorthands($-break_width: 500px) {
&--breakPoint {
@include RV-FlexRow__Container--breakPoint(#{$-break_width});
2020-12-27 16:00:24 +01:00
}
2020-12-27 20:28:45 +01:00
&--horizontal {
@include RV-FlexRow__Container--horizontal;
2020-12-27 16:00:24 +01:00
}
2020-12-27 20:28:45 +01:00
&--vertical {
2020-12-27 16:00:24 +01:00
@include RV-FlexRow__Container--vertical;
}
2020-12-27 23:47:35 +01:00
&--auto {
@include RV-FlexRow__Container--auto;
}
2020-08-23 19:20:11 +02:00
}
2020-12-27 20:28:45 +01:00
/* ##########
* Item class
########### */
@mixin RV-FlexRow__Item {
2020-12-27 23:47:35 +01:00
flex-basis: max-content;
2020-12-27 20:28:45 +01:00
@include RV-FlexRow__Item--normal;
}
/*
* Varios relative width of items to each other
*/
2020-08-25 15:53:43 +02:00
@mixin RV-FlexRow__Item--normal {
2020-12-27 16:00:24 +01:00
flex-grow: 3;
flex-shrink: 3;
2020-08-25 15:53:43 +02:00
}
@mixin RV-FlexRow__Item--narrower {
2020-12-27 16:00:24 +01:00
flex-grow: 1;
flex-shrink: 5;
2020-08-25 15:53:43 +02:00
}
@mixin RV-FlexRow__Item--narrow {
2020-12-27 16:00:24 +01:00
flex-grow: 2;
flex-shrink: 4;
2020-08-25 15:53:43 +02:00
}
@mixin RV-FlexRow__Item--wide {
2020-12-27 16:00:24 +01:00
flex-grow: 4;
flex-shrink: 2;
2020-08-25 15:53:43 +02:00
}
2020-12-27 16:00:24 +01:00
2020-08-25 15:53:43 +02:00
@mixin RV-FlexRow__Item--wider {
2020-12-27 16:00:24 +01:00
flex-grow: 5;
flex-shrink: 1;
2020-08-25 15:53:43 +02:00
}
2020-12-27 16:00:24 +01:00
2020-12-27 20:28:45 +01:00
/*
* Item has always the given width
*/
2020-08-25 15:53:43 +02:00
@mixin RV-FlexRow__Item--fixedSize($-width: 100px) {
2020-12-27 16:00:24 +01:00
flex-grow: 0;
flex-shrink: 0;
width: min-content;
flex-basis: $-width;
2020-08-25 15:53:43 +02:00
}
2020-12-27 20:28:45 +01:00
/*
* Item width relativ to the container
*/
@mixin RV-FlexRow__Item--half {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
width: 50%;
}
2020-08-23 19:20:11 +02:00
2020-12-27 20:28:45 +01:00
@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%;
2020-12-27 16:00:24 +01:00
}
2020-08-25 15:53:43 +02:00
2020-12-27 20:28:45 +01:00
@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() {
2020-12-27 16:00:24 +01:00
@include RV-Alignment;
2020-08-23 19:20:11 +02:00
2020-12-27 20:28:45 +01:00
&--narrower {
2020-12-27 16:00:24 +01:00
@include RV-FlexRow__Item--narrower;
}
2020-08-23 19:20:11 +02:00
2020-12-27 20:28:45 +01:00
&--narrow {
2020-12-27 16:00:24 +01:00
@include RV-FlexRow__Item--narrow;
}
2020-08-23 19:20:11 +02:00
2020-12-27 20:28:45 +01:00
&--wide {
2020-12-27 16:00:24 +01:00
@include RV-FlexRow__Item--wide;
}
2020-08-23 19:20:11 +02:00
2020-12-27 20:28:45 +01:00
&--wider {
2020-12-27 16:00:24 +01:00
@include RV-FlexRow__Item--wider;
}
2020-08-23 19:20:11 +02:00
2020-12-27 20:28:45 +01:00
&--fixedSize {
2020-12-27 16:00:24 +01:00
@include RV-FlexRow__Item--fixedSize;
}
2020-08-23 19:20:11 +02:00
2020-12-27 20:28:45 +01:00
&--half {
@include RV-FlexRow__Item--half;
}
&--third {
@include RV-FlexRow__Item--third;
}
&--quarter {
@include RV-FlexRow__Item--quarter;
}
&--content {
@include RV-FlexRow__Item--content;
2020-12-27 16:00:24 +01:00
}
}
2020-12-27 20:28:45 +01:00
/*
* Combining basic classes
*/
2020-12-27 16:00:24 +01:00
@mixin RV-FlexRow($-prefix: '&') {
#{$-prefix}__Container {
@include RV-FlexRow__Container($-prefix: $-prefix);
}
#{$-prefix}__Item {
2020-12-27 20:28:45 +01:00
@include RV-FlexRow__Item;
2020-12-27 16:00:24 +01:00
}
2020-08-27 15:47:37 +02:00
}
2020-12-27 20:28:45 +01:00
/*
* Combining shorthands
*/
@mixin RV-FlexRow--shorthands($-break_width: 500px, $-prefix: '&') {
2020-12-27 16:00:24 +01:00
#{$-prefix}__Container {
2020-12-27 20:28:45 +01:00
@include RV-FlexRow__Container--shorthands($-break_width);
2020-12-27 16:00:24 +01:00
}
2020-08-21 16:50:22 +02:00
2020-12-27 16:00:24 +01:00
#{$-prefix}__Item {
2020-12-27 20:28:45 +01:00
@include RV-FlexRow__Item--shorthands;
2020-12-27 16:00:24 +01:00
}
2020-08-21 16:50:22 +02:00
}
2020-12-27 20:28:45 +01:00
/*
* Final CSS Class
*/
2020-12-27 16:00:24 +01:00
.RV-FlexRow {
@include RV-FlexRow;
2020-12-27 20:28:45 +01:00
@include RV-FlexRow--shorthands;
2020-08-21 16:50:22 +02:00
}