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

148 lines
3.6 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--name('horizontal')
2021-01-07 00:16:19 +01:00
flex-direction row
+RV-Element('Base')
//flex-basis 'calc(2 * (%s + 2 * var(--inner-spacing) + 2 * var(--outer-spacing)) * 999 - 100% * 999)' % base-width
flex-basis 'calc(2 * (%s) * 999 - 100% * 999)' % base-width
box-sizing border-box
flex-shrink 9999
flex-grow 1
max-width base-width
margin 0
padding 0
--_spacing-difference calc(var(--inner-spacing) - var(--outer-spacing))
*
position relative
height calc(100% - var(--_spacing-difference))
width calc(100% - var(--_spacing-difference))
top calc(var(--_spacing-difference) / 2)
left calc(var(--_spacing-difference) / 2)
2021-01-07 00:16:19 +01:00
+RV-Element('Surface')
height base-height
box-sizing border-box
flex-basis 'calc(2 * (%s + 2 * var(--inner-spacing) + 2 * var(--outer-spacing)) * 999 - 100% * 999)' % 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--name('vertical')
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
box-sizing border-box
min-width initial
2021-01-07 00:16:19 +01:00
min-height base-height
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--name('auto')
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')
height base-height
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--name('Base')
box-sizing border-box
flex-basis base-width
2021-01-20 11:57:05 +01:00
flex-shrink 0
flex-grow 0
2021-01-03 12:36:12 +01:00
2021-01-07 00:16:19 +01:00
RV-Fan__Surface--fixedHeight(height)
+RV-Element__Modifier--name('fixedHeight')
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--name('fixedWidth')
max-width width
box-sizing border-box
2021-01-03 12:36:12 +01:00
RV-Fan__Surface(base-height, base-width)
+RV-Element--name('Surface')
overflow hidden
box-sizing border-box
height base-height
flex-basis base-width
flex-grow 1
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
min-width base-width
2021-01-07 00:16:19 +01:00
2021-01-08 17:55:56 +01:00
/* #########
* CSS-Class
* ######### */
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
})
--inner-spacing 0px
2021-01-08 17:55:56 +01:00
RV-Fan(--base-height, --base-width)
+RV-Element()
RV-Fan__Surface(--base-height, --base-width)
+RV-Element__Modifier()
RV-Fan__Surface--fixedWidth(--base-width)
+RV-Element__Modifier()
RV-Fan__Surface--fixedHeight(--base-height)
+RV-Element()
RV-Fan__Base(--base-height, --base-width)
+RV-Block__Modifier()
RV-Fan--fullWidth(--base-height, --base-width)
+RV-Block__Modifier()
RV-Fan--vertical(--base-height, --base-width)
+RV-Block__Modifier()
RV-Fan--horizontal(--base-height, --base-width)
+RV-Block__Modifier()
RV-Fan--auto(--base-height, --base-width)