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

182 lines
3.1 KiB
Stylus

/*
* 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()