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

122 lines
2.1 KiB
Stylus
Raw Normal View History

2021-01-03 12:36:12 +01:00
/*
* Classes for easy flexrow usage
*/
/*
* Orientation
*/
RV-FlexRow--horizontal()
+RV-Block--modifier()
flex-direction row
2021-01-03 12:36:12 +01:00
RV-FlexRow--vertical()
+RV-Block--modifier()
flex-direction column
2021-01-03 12:36:12 +01:00
/*
* Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
2021-01-03 12:36:12 +01:00
*/
RV-FlexRow--wrap()
+RV-Block--modifier()
flex-direction row
flex-wrap wrap
2021-01-03 12:36:12 +01:00
/* ##########
* Item class
########### */
RV-FlexRow__Item()
+RV-Element()
flex-grow 3
flex-shrink 3
2021-01-03 12:36:12 +01:00
/*
* Varios relative width of items to each other
*/
RV-FlexRow__Item--narrower()
+RV-Element--modifier()
flex-grow 1
flex-shrink 5
2021-01-03 12:36:12 +01:00
RV-FlexRow__Item--narrow()
+RV-Element--modifier()
flex-grow 2
flex-shrink 4
2021-01-03 12:36:12 +01:00
RV-FlexRow__Item--wide()
+RV-Element--modifier()
flex-grow 4
flex-shrink 2
2021-01-03 12:36:12 +01:00
RV-FlexRow__Item--wider()
+RV-Element--modifier()
flex-grow 5
flex-shrink 1
2021-01-03 12:36:12 +01:00
/*
* Item has always the given width
*/
RV-FlexRow__Item--fixedSize(width)
+RV-Element--modifier()
RV-Sizes--fixedSize(width)
2021-01-03 12:36:12 +01:00
/*
* Item width relativ to the container
*/
RV-FlexRow__Item--half()
+RV-Element--modifier()
2021-03-10 02:58:36 +01:00
overflow hidden
2021-01-19 23:36:56 +01:00
flex-grow 0
flex-shrink 0
flex-basis 50%
2021-01-03 12:36:12 +01:00
RV-FlexRow__Item--third()
+RV-Element--modifier()
2021-03-10 02:58:36 +01:00
overflow hidden
2021-01-19 23:36:56 +01:00
flex-grow 0
flex-shrink 0
flex-basis (100/3)%
2021-01-03 12:36:12 +01:00
RV-FlexRow__Item--quarter()
+RV-Element--modifier()
2021-03-10 02:58:36 +01:00
overflow hidden
2021-01-19 23:36:56 +01:00
flex-grow 0
flex-shrink 0
flex-basis 25%
2021-01-03 12:36:12 +01:00
RV-FlexRow__Item--content()
+RV-Element--modifier()
2021-01-19 23:36:56 +01:00
flex-grow 0
flex-shrink 0
flex-basis max-content
2021-01-03 12:36:12 +01:00
/* ##########
* Block
########### */
RV-FlexRow()
display flex
2021-01-03 12:36:12 +01:00
+RV-Block('RV-FlexRow')
2021-01-03 12:36:12 +01:00
RV-FlexRow()
RV-CSSParameter({
width: 100px
})
+RV-Element()
2021-03-10 02:58:36 +01:00
RV-FlexRow__Item()
RV-FlexRow__Item--narrower()
RV-FlexRow__Item--narrow()
RV-FlexRow__Item--wide()
RV-FlexRow__Item--wider()
RV-FlexRow__Item--fixedSize(--width)
RV-FlexRow__Item--half()
RV-FlexRow__Item--third()
RV-FlexRow__Item--quarter()
RV-FlexRow__Item--content()
RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
RV-FlexRow--horizontal()
RV-FlexRow--vertical()
RV-FlexRow--wrap()