Converting Layouts to Stylus
This commit is contained in:
@@ -1,232 +0,0 @@
|
||||
/*
|
||||
* 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-wrap: wrap;
|
||||
@include RV-Reset;
|
||||
gap: 0px;
|
||||
|
||||
@include RV-Utils__Hook--throw(('breakPoint': $-localBreakPoint),
|
||||
'RV-Spacing__Inner--small',
|
||||
'RV-Spacing__Inner--medium',
|
||||
'RV-Spacing__Inner--large'
|
||||
);
|
||||
|
||||
* {
|
||||
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;
|
||||
}
|
||||
182
components/01_Layouts/flexRow/_flexRow.styl
Normal file
182
components/01_Layouts/flexRow/_flexRow.styl
Normal file
@@ -0,0 +1,182 @@
|
||||
/*
|
||||
* Classes for easy flexrow usage
|
||||
*/
|
||||
|
||||
|
||||
/* ##########
|
||||
* Container class
|
||||
########### */
|
||||
RV-FlexRow__Container(prefix='&')
|
||||
display flex
|
||||
height 100%
|
||||
|
||||
/*
|
||||
* Orientation
|
||||
*/
|
||||
RV-FlexRow__Container--horizontal()
|
||||
flex-direction row
|
||||
|
||||
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.
|
||||
*/
|
||||
RV-FlexRow__Container--breakPoint(localBreakPoint=500px, mediaBreakPoint=null)
|
||||
flex-wrap wrap
|
||||
RV-Reset()
|
||||
gap 0px
|
||||
|
||||
RV-Utils__Hook--throw('flexrow_breakpoint_gap', @(gap){
|
||||
RV-Utils__ElementAmount(@(index, total){
|
||||
min-width "calc((%s - (%s * (%s - 1))) / %s - (2 * %s))" % (localBreakPoint gap index index gap)
|
||||
|
||||
*{
|
||||
min-width initial
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
*{
|
||||
flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
|
||||
}
|
||||
|
||||
if mediaBreakPoint !=null
|
||||
@media(max-width mediaBreakPoint)
|
||||
RV-FlexRow__Container--column()
|
||||
|
||||
/*
|
||||
* Flexbox behavior, Row is horizontal, but item are wraped individualy
|
||||
*/
|
||||
RV-FlexRow__Container--auto()
|
||||
RV-FlexRow__Container--horizontal()
|
||||
flex-wrap wrap
|
||||
|
||||
/*
|
||||
* Shorthand for the modifiers above
|
||||
*/
|
||||
RV-FlexRow__Container--shorthands(break_width=500px)
|
||||
&--breakPoint
|
||||
RV-FlexRow__Container--breakPoint(break_width)
|
||||
|
||||
&--horizontal
|
||||
RV-FlexRow__Container--horizontal()
|
||||
|
||||
&--vertical
|
||||
RV-FlexRow__Container--vertical()
|
||||
|
||||
&--auto
|
||||
RV-FlexRow__Container--auto()
|
||||
|
||||
/* ##########
|
||||
* Item class
|
||||
########### */
|
||||
RV-FlexRow__Item()
|
||||
flex-basis max-content
|
||||
RV-FlexRow__Item--normal()
|
||||
|
||||
/*
|
||||
* Varios relative width of items to each other
|
||||
*/
|
||||
RV-FlexRow__Item--normal()
|
||||
flex-grow 3
|
||||
flex-shrink 3
|
||||
|
||||
RV-FlexRow__Item--narrower()
|
||||
flex-grow 1
|
||||
flex-shrink 5
|
||||
|
||||
RV-FlexRow__Item--narrow()
|
||||
flex-grow 2
|
||||
flex-shrink 4
|
||||
|
||||
RV-FlexRow__Item--wide()
|
||||
flex-grow 4
|
||||
flex-shrink 2
|
||||
|
||||
RV-FlexRow__Item--wider()
|
||||
flex-grow 5
|
||||
flex-shrink 1
|
||||
|
||||
/*
|
||||
* Item has always the given width
|
||||
*/
|
||||
RV-FlexRow__Item--fixedSize(width=100px)
|
||||
RV-Sizes--fixedSize(width)
|
||||
|
||||
/*
|
||||
* Item width relativ to the container
|
||||
*/
|
||||
RV-FlexRow__Item--half()
|
||||
RV-Sizes--half()
|
||||
RV-FlexRow__Item--third()
|
||||
RV-Sizes--third()
|
||||
|
||||
RV-FlexRow__Item--quarter()
|
||||
RV-Sizes--quarter()
|
||||
|
||||
RV-FlexRow__Item--content()
|
||||
RV-Sizes--content()
|
||||
|
||||
/*
|
||||
* Shorthand for the modifiers above
|
||||
*/
|
||||
RV-FlexRow__Item--shorthands()
|
||||
RV-Alignment()
|
||||
|
||||
&--narrower
|
||||
RV-FlexRow__Item--narrower()
|
||||
|
||||
&--narrow
|
||||
RV-FlexRow__Item--narrow()
|
||||
|
||||
&--wide()
|
||||
RV-FlexRow__Item--wide()
|
||||
|
||||
&--wider
|
||||
RV-FlexRow__Item--wider()
|
||||
|
||||
&--fixedSize
|
||||
RV-FlexRow__Item--fixedSize()
|
||||
|
||||
&--half
|
||||
RV-FlexRow__Item--half()
|
||||
|
||||
&--third
|
||||
RV-FlexRow__Item--third()
|
||||
|
||||
&--quarter
|
||||
RV-FlexRow__Item--quarter()
|
||||
|
||||
&--content
|
||||
RV-FlexRow__Item--content()
|
||||
|
||||
/*
|
||||
* Combining basic classes
|
||||
*/
|
||||
RV-FlexRow(prefix='&')
|
||||
{prefix}__Container
|
||||
RV-FlexRow__Container(prefix=prefix)
|
||||
|
||||
{prefix}__Item
|
||||
RV-FlexRow__Item()
|
||||
|
||||
/*
|
||||
* Combining shorthands
|
||||
*/
|
||||
RV-FlexRow--shorthands(break_width=500px, prefix='&')
|
||||
{prefix}__Container
|
||||
RV-FlexRow__Container--shorthands(break_width)
|
||||
|
||||
{prefix}__Item
|
||||
RV-FlexRow__Item--shorthands()
|
||||
|
||||
/*
|
||||
* Final CSS Class
|
||||
*/
|
||||
.RV-FlexRow
|
||||
RV-FlexRow()
|
||||
RV-FlexRow--shorthands()
|
||||
@@ -29,7 +29,7 @@
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
<div class="RV-FlexRow__Container RV-FlexRow__Container--auto">
|
||||
<div class="RV-FlexRow__Container RV-FlexRow__Container--breakPoint">
|
||||
<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">sdfkjsakfjsdök</div>
|
||||
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">adfasfsd</div>
|
||||
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">asfsdfasd</div>
|
||||
|
||||
Reference in New Issue
Block a user