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;
|
display: flex;
|
||||||
flex-direction: column;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin RV-FlexRow__Container--multiRow {
|
/*
|
||||||
flex-wrap: wrap;
|
* Orientation
|
||||||
}
|
*/
|
||||||
|
@mixin RV-FlexRow__Container--horizontal {
|
||||||
@mixin RV-FlexRow__Container--horizontal($-break_width: 500px) {
|
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
* {
|
|
||||||
flex-basis: calc(#{$-break_width} * 999 - 100% * 999);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin RV-FlexRow__Container--vertical {
|
@mixin RV-FlexRow__Container--vertical {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin RV-FlexRow__Container($-prefix: '&') {
|
/*
|
||||||
display: flex;
|
* Breaks from row to column orientation at the given breakpoint
|
||||||
height: 100%;
|
* 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) {
|
||||||
@mixin RV-FlexRow__Container--advanced($-break_width: 500px, $-prefix: '&') {
|
* {
|
||||||
#{$-prefix}--multiRow {
|
flex-basis: calc(#{$-localBreakPoint} * 999 - 100% * 999);
|
||||||
@include RV-FlexRow__Container--multiRow;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#{$-prefix}--column {
|
@if ($-mediaBreakPoint !=null) {
|
||||||
|
@media(max-width: $-mediaBreakPoint) {
|
||||||
@include RV-FlexRow__Container--column;
|
@include RV-FlexRow__Container--column;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#{$-prefix}--horizontal {
|
/*
|
||||||
@include RV-FlexRow__Container--horizontal(#{$-break_width});
|
* Shorthand for the modifiers above
|
||||||
|
*/
|
||||||
|
@mixin RV-FlexRow__Container--shorthands($-break_width: 500px) {
|
||||||
|
&--breakPoint {
|
||||||
|
@include RV-FlexRow__Container--breakPoint(#{$-break_width});
|
||||||
}
|
}
|
||||||
|
|
||||||
#{$-prefix}--vertical {
|
&--horizontal {
|
||||||
|
@include RV-FlexRow__Container--horizontal;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--vertical {
|
||||||
@include RV-FlexRow__Container--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 {
|
@mixin RV-FlexRow__Item--normal {
|
||||||
flex-grow: 3;
|
flex-grow: 3;
|
||||||
flex-shrink: 3;
|
flex-shrink: 3;
|
||||||
@ -68,6 +93,9 @@
|
|||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Item has always the given width
|
||||||
|
*/
|
||||||
@mixin RV-FlexRow__Item--fixedSize($-width: 100px) {
|
@mixin RV-FlexRow__Item--fixedSize($-width: 100px) {
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@ -75,67 +103,110 @@
|
|||||||
flex-basis: $-width;
|
flex-basis: $-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin RV-FlexRow__Item($-prefix: '&') {
|
/*
|
||||||
min-width: min-content;
|
* Item width relativ to the container
|
||||||
width: 100%;
|
*/
|
||||||
|
@mixin RV-FlexRow__Item--half {
|
||||||
#{$-prefix},
|
flex-grow: 0;
|
||||||
#{$-prefix}--normal {
|
flex-shrink: 0;
|
||||||
@include RV-FlexRow__Item--normal;
|
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;
|
@include RV-Alignment;
|
||||||
|
|
||||||
#{$-prefix}--narrower {
|
&--narrower {
|
||||||
@include RV-FlexRow__Item--narrower;
|
@include RV-FlexRow__Item--narrower;
|
||||||
}
|
}
|
||||||
|
|
||||||
#{$-prefix}--narrow {
|
&--narrow {
|
||||||
@include RV-FlexRow__Item--narrow;
|
@include RV-FlexRow__Item--narrow;
|
||||||
}
|
}
|
||||||
|
|
||||||
#{$-prefix}--wide {
|
&--wide {
|
||||||
@include RV-FlexRow__Item--wide;
|
@include RV-FlexRow__Item--wide;
|
||||||
}
|
}
|
||||||
|
|
||||||
#{$-prefix}--wider {
|
&--wider {
|
||||||
@include RV-FlexRow__Item--wider;
|
@include RV-FlexRow__Item--wider;
|
||||||
}
|
}
|
||||||
|
|
||||||
#{$-prefix}--fixedSize {
|
&--fixedSize {
|
||||||
@include RV-FlexRow__Item--fixedSize;
|
@include RV-FlexRow__Item--fixedSize;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@mixin RV-FlexRow--multiRow($-prefix: '&') {
|
&--half {
|
||||||
#{$-prefix}__Container {
|
@include RV-FlexRow__Item--half;
|
||||||
@include RV-FlexRow__Container--multiRow;
|
}
|
||||||
|
|
||||||
|
&--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: '&') {
|
@mixin RV-FlexRow($-prefix: '&') {
|
||||||
#{$-prefix}__Container {
|
#{$-prefix}__Container {
|
||||||
@include RV-FlexRow__Container($-prefix: $-prefix);
|
@include RV-FlexRow__Container($-prefix: $-prefix);
|
||||||
}
|
}
|
||||||
|
|
||||||
#{$-prefix}__Item {
|
#{$-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 {
|
#{$-prefix}__Container {
|
||||||
@include RV-FlexRow__Container--advanced($-break_width, $-prefix: $-prefix);
|
@include RV-FlexRow__Container--shorthands($-break_width);
|
||||||
}
|
}
|
||||||
|
|
||||||
#{$-prefix}__Item {
|
#{$-prefix}__Item {
|
||||||
@include RV-FlexRow__Item--advanced($-prefix: $-prefix);
|
@include RV-FlexRow__Item--shorthands;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Final CSS Class
|
||||||
|
*/
|
||||||
.RV-FlexRow {
|
.RV-FlexRow {
|
||||||
@include 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="red RV-FlexRow__Item RV-FlexRow__Item--narrow">.</div>
|
||||||
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">.</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="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>
|
</div>
|
Loading…
Reference in New Issue
Block a user