scss-library/components/01_Layouts/fan/_fan.styl

140 lines
2.9 KiB
Stylus
Raw Normal View History

2021-01-07 00:16:19 +01:00
/*
* A Fan is a layout that consists of two parts:
* The base and the surface, named after a hand fan.
* The base is always left handed, where as the surface
* can be right of the base or below.
*/
2021-01-03 12:36:12 +01:00
2021-01-07 00:16:19 +01:00
/* ######################
* Block Modifiers Mixins
* ###################### */
2021-01-03 12:36:12 +01:00
2021-01-07 00:16:19 +01:00
/*
* Base on the left, Surface on the right
* Base is fixed, given size, Surface is given height
* but will fill the parent's width
*/
RV-Fan--horizontal(base-height, base-width)
+RV-Block--modifier()
2021-03-10 00:56:25 +01:00
RV-CSSParameter({
localBreakPoint: 'calc(2 * %s)' % base-width
})
RV-BreakPoint(--localBreakPoint)
+RV-Element('Surface')
RV-BreakPoint__Item()
+RV-Element('Base')
2021-03-10 00:56:25 +01:00
RV-BreakPoint__Item()
+RV-Squash()
RV-BreakPoint__Item--outside()
flex-basis base-width
flex-grow 0
RV-BreakPoint--horizontal()
2021-03-10 02:58:36 +01:00
min-width base-width
2021-01-03 12:36:12 +01:00
2021-01-07 00:16:19 +01:00
/*
* Base above, Surfce below
* Base is fixed, given size, base is given width
* minimal height is given height, will grow with content
*/
RV-Fan--vertical(base-height, base-width)
+RV-Block--modifier()
2021-01-03 17:00:55 +01:00
flex-direction column
width base-width
2021-01-20 11:57:05 +01:00
min-width initial
2021-01-03 12:36:12 +01:00
2021-01-07 00:16:19 +01:00
+RV-Element('Surface')
width base-width
min-width initial
2021-01-07 00:16:19 +01:00
min-height base-height
+RV-Element--modifier('fixedHeight')
--wurst wasserererer
2021-01-03 12:36:12 +01:00
2021-01-07 00:16:19 +01:00
/*
* Initialy horizontal, changes to vertical when
* the width of the parent is less than 2 x base-width
* Width of the base and surface in vertical are base-width
*/
RV-Fan--auto(base-height, base-width)
+RV-Block--modifier()
2021-01-03 17:00:55 +01:00
flex-flow row wrap
2021-01-03 12:36:12 +01:00
2021-01-07 00:16:19 +01:00
+RV-Element('Base')
flex-grow 1
2021-01-07 00:16:19 +01:00
+RV-Element('Surface')
box-sizing border-box
flex-grow 99999
2021-01-11 01:49:33 +01:00
2021-01-07 00:16:19 +01:00
/* ###############
* Element Mixins
* ############### */
RV-Fan__Base(base-height, base-width)
+RV-Element()
box-sizing border-box
flex-basis base-width
2021-01-20 11:57:05 +01:00
flex-shrink 0
flex-grow 0
2021-03-10 00:56:25 +01:00
height base-height
width base-width
> *
height calc_height()
width calc_width()
2021-01-03 12:36:12 +01:00
2021-01-07 00:16:19 +01:00
RV-Fan__Surface--fixedHeight(height)
+RV-Element--modifier()
height height
box-sizing border-box
2021-01-03 12:36:12 +01:00
2021-01-07 00:16:19 +01:00
RV-Fan__Surface--fixedWidth(width)
+RV-Element--modifier()
max-width width
box-sizing border-box
2021-01-03 12:36:12 +01:00
RV-Fan__Surface(base-height, base-width)
+RV-Element()
overflow hidden
box-sizing border-box
height base-height
flex-basis base-width
2021-03-10 00:56:25 +01:00
min-width base-width
flex-grow 1
2021-03-10 00:56:25 +01:00
> *
2021-03-10 02:58:36 +01:00
height calc_height(100%)
width calc_width(100%)
2021-01-07 00:16:19 +01:00
/* ############
* Block Mixin
* ############ */
RV-Fan(base-height, base-width)
2021-01-07 00:16:19 +01:00
display flex
position relative
2021-03-10 02:58:36 +01:00
min-width min-content
2021-01-07 00:16:19 +01:00
2021-01-11 01:37:08 +01:00
+RV-Block('RV-Fan')
2021-01-08 17:55:56 +01:00
RV-CSSParameter({
base-height: 280px,
base-width: 320px
})
RV-Fan(--base-height, --base-width)
RV-Fan__Base(--base-height, --base-width)
+RV-Element()
2021-03-09 12:39:04 +01:00
RV-Fan__Surface(--base-height, --base-width)
RV-Fan__Surface--fixedHeight(base-height)
RV-Fan__Surface--fixedWidth(base-width)
RV-Fan--auto(--base-height, --base-width)
RV-Fan--vertical(--base-height, --base-width)
RV-Fan--horizontal(--base-height, --base-width)