Restructuring
This commit is contained in:
parent
2b938cf69e
commit
aab1baf6b0
|
|
@ -1,48 +1,73 @@
|
|||
@mixin RV-FlexRow__Container--column {
|
||||
/*
|
||||
* Classes for easy flexrow usage
|
||||
*/
|
||||
|
||||
|
||||
/* ##########
|
||||
* Container class
|
||||
########### */
|
||||
@mixin RV-FlexRow__Container($-prefix: '&') {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin RV-FlexRow__Container--multiRow {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@mixin RV-FlexRow__Container--horizontal($-break_width: 500px) {
|
||||
/*
|
||||
* Orientation
|
||||
*/
|
||||
@mixin RV-FlexRow__Container--horizontal {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
* {
|
||||
flex-basis: calc(#{$-break_width} * 999 - 100% * 999);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin RV-FlexRow__Container--vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@mixin RV-FlexRow__Container($-prefix: '&') {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
/*
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin RV-FlexRow__Container--advanced($-break_width: 500px, $-prefix: '&') {
|
||||
#{$-prefix}--multiRow {
|
||||
@include RV-FlexRow__Container--multiRow;
|
||||
/*
|
||||
* Shorthand for the modifiers above
|
||||
*/
|
||||
@mixin RV-FlexRow__Container--shorthands($-break_width: 500px) {
|
||||
&--breakPoint {
|
||||
@include RV-FlexRow__Container--breakPoint(#{$-break_width});
|
||||
}
|
||||
|
||||
#{$-prefix}--column {
|
||||
@include RV-FlexRow__Container--column;
|
||||
&--horizontal {
|
||||
@include RV-FlexRow__Container--horizontal;
|
||||
}
|
||||
|
||||
#{$-prefix}--horizontal {
|
||||
@include RV-FlexRow__Container--horizontal(#{$-break_width});
|
||||
}
|
||||
|
||||
#{$-prefix}--vertical {
|
||||
&--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;
|
||||
|
|
@ -68,6 +93,9 @@
|
|||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
* Item has always the given width
|
||||
*/
|
||||
@mixin RV-FlexRow__Item--fixedSize($-width: 100px) {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -75,67 +103,110 @@
|
|||
flex-basis: $-width;
|
||||
}
|
||||
|
||||
@mixin RV-FlexRow__Item($-prefix: '&') {
|
||||
min-width: min-content;
|
||||
width: 100%;
|
||||
|
||||
#{$-prefix},
|
||||
#{$-prefix}--normal {
|
||||
@include RV-FlexRow__Item--normal;
|
||||
}
|
||||
/*
|
||||
* 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--advanced($-prefix: '&') {
|
||||
@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;
|
||||
|
||||
#{$-prefix}--narrower {
|
||||
&--narrower {
|
||||
@include RV-FlexRow__Item--narrower;
|
||||
}
|
||||
|
||||
#{$-prefix}--narrow {
|
||||
&--narrow {
|
||||
@include RV-FlexRow__Item--narrow;
|
||||
}
|
||||
|
||||
#{$-prefix}--wide {
|
||||
&--wide {
|
||||
@include RV-FlexRow__Item--wide;
|
||||
}
|
||||
|
||||
#{$-prefix}--wider {
|
||||
&--wider {
|
||||
@include RV-FlexRow__Item--wider;
|
||||
}
|
||||
|
||||
#{$-prefix}--fixedSize {
|
||||
&--fixedSize {
|
||||
@include RV-FlexRow__Item--fixedSize;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin RV-FlexRow--multiRow($-prefix: '&') {
|
||||
#{$-prefix}__Container {
|
||||
@include RV-FlexRow__Container--multiRow;
|
||||
&--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($-prefix: $-prefix);
|
||||
@include RV-FlexRow__Item;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin RV-FlexRow--advanced($-break_width: 500px, $-prefix: '&') {
|
||||
/*
|
||||
* Combining shorthands
|
||||
*/
|
||||
@mixin RV-FlexRow--shorthands($-break_width: 500px, $-prefix: '&') {
|
||||
#{$-prefix}__Container {
|
||||
@include RV-FlexRow__Container--advanced($-break_width, $-prefix: $-prefix);
|
||||
@include RV-FlexRow__Container--shorthands($-break_width);
|
||||
}
|
||||
|
||||
#{$-prefix}__Item {
|
||||
@include RV-FlexRow__Item--advanced($-prefix: $-prefix);
|
||||
@include RV-FlexRow__Item--shorthands;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Final CSS Class
|
||||
*/
|
||||
.RV-FlexRow {
|
||||
@include RV-FlexRow;
|
||||
@include RV-FlexRow--advanced;
|
||||
@include RV-FlexRow--shorthands;
|
||||
}
|
||||
|
|
@ -25,5 +25,5 @@
|
|||
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">.</div>
|
||||
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">.</div>
|
||||
<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">.</div>
|
||||
<div class="green RV-FlexRow__Item RV-FlexRow__Item--wider">.</div>
|
||||
<div class="green RV-FlexRow__Item RV-FlexRow__Item--content">content</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue