182 lines
3.1 KiB
Stylus
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()
|