122 lines
2.1 KiB
Stylus
122 lines
2.1 KiB
Stylus
/*
|
|
* Classes for easy flexrow usage
|
|
*/
|
|
|
|
/*
|
|
* Orientation
|
|
*/
|
|
RV-FlexRow--horizontal()
|
|
+RV-Block--modifier()
|
|
flex-direction row
|
|
|
|
RV-FlexRow--vertical()
|
|
+RV-Block--modifier()
|
|
flex-direction column
|
|
|
|
/*
|
|
* Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
|
|
*/
|
|
RV-FlexRow--wrap()
|
|
+RV-Block--modifier()
|
|
flex-direction row
|
|
flex-wrap wrap
|
|
|
|
/*
|
|
* Varios relative width of items to each other
|
|
*/
|
|
|
|
RV-FlexRow__Item--narrower()
|
|
+RV-Element--modifier()
|
|
flex-grow 2
|
|
flex-shrink 10
|
|
|
|
RV-FlexRow__Item--narrow()
|
|
+RV-Element--modifier()
|
|
flex-grow 4
|
|
flex-shrink 8
|
|
|
|
RV-FlexRow__Item--wide()
|
|
+RV-Element--modifier()
|
|
flex-grow 8
|
|
flex-shrink 4
|
|
|
|
RV-FlexRow__Item--wider()
|
|
+RV-Element--modifier()
|
|
flex-grow 10
|
|
flex-shrink 2
|
|
|
|
/*
|
|
* Item has always the given width
|
|
*/
|
|
RV-FlexRow__Item--fixedSize(width)
|
|
+RV-Element--modifier()
|
|
flex-basis width
|
|
flex-grow 0
|
|
flex-shrink 0
|
|
|
|
/*
|
|
* Item width relativ to the container
|
|
*/
|
|
RV-FlexRow__Item--half()
|
|
+RV-Element--modifier()
|
|
overflow hidden
|
|
flex-grow 0
|
|
flex-shrink 0
|
|
flex-basis 50%
|
|
|
|
RV-FlexRow__Item--third()
|
|
+RV-Element--modifier()
|
|
overflow hidden
|
|
flex-grow 0
|
|
flex-shrink 0
|
|
flex-basis (100/3)%
|
|
|
|
RV-FlexRow__Item--quarter()
|
|
+RV-Element--modifier()
|
|
overflow hidden
|
|
flex-grow 0
|
|
flex-shrink 0
|
|
flex-basis 25%
|
|
|
|
RV-FlexRow__Item--content()
|
|
+RV-Element--modifier()
|
|
flex-grow 0
|
|
flex-shrink 0
|
|
flex-basis max-content
|
|
|
|
/* ##########
|
|
* Item class
|
|
########### */
|
|
RV-FlexRow__Item(fixedSize=100px)
|
|
+RV-Element()
|
|
flex-basis 20px
|
|
flex-grow 5
|
|
flex-shrink 5
|
|
|
|
RV-FlexRow__Item--narrower()
|
|
RV-FlexRow__Item--narrow()
|
|
RV-FlexRow__Item--wide()
|
|
RV-FlexRow__Item--wider()
|
|
RV-FlexRow__Item--fixedSize(fixedSize)
|
|
RV-FlexRow__Item--half()
|
|
RV-FlexRow__Item--third()
|
|
RV-FlexRow__Item--quarter()
|
|
RV-FlexRow__Item--content()
|
|
|
|
/* ##########
|
|
* Block
|
|
########### */
|
|
RV-FlexRow(itemFixedSize=100px)
|
|
+RV-Block()
|
|
RV-CSSParameter({
|
|
itemFixedSize: itemFixedSize
|
|
})
|
|
display flex
|
|
|
|
RV-FlexRow__Item(--itemFixedSize)
|
|
|
|
RV-FlexRow--horizontal()
|
|
RV-FlexRow--vertical()
|
|
RV-FlexRow--wrap()
|
|
|
|
RV-FlexRow(100px) |