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

142 lines
3.0 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
*/
2021-01-09 16:29:11 +01:00
/*
2021-01-07 00:16:19 +01:00
RV-Fan--horizontal(base-height, base-width)
+RV-Block__Modifier('horizontal')
flex-direction row
+RV-Element('Surface')
min-width base-width
height base-height
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
*/
2021-01-09 16:29:11 +01:00
/*
2021-01-07 00:16:19 +01:00
RV-Fan--vertical(base-height, base-width)
+RV-Block__Modifier('vertical')
2021-01-03 17:00:55 +01:00
flex-direction column
width max-content
2021-01-03 12:36:12 +01:00
2021-01-07 00:16:19 +01:00
+RV-Element('Surface')
width base-width
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
*/
2021-01-09 16:29:11 +01:00
/*
2021-01-07 00:16:19 +01:00
RV-Fan--auto(base-height, base-width)
+RV-Block__Modifier('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('Surface')
width 'calc(100% - %s)' % base-width
min-width base-width
height base-height
2021-01-03 12:36:12 +01:00
2021-01-07 00:16:19 +01:00
/*
* Also initialy horizontal, changes to vertical when
* the width of the parent is less than 2 x base-width
* Width of the base and the surface in vertical mode
* are 100% of the parent width
*/
2021-01-09 16:29:11 +01:00
/*
2021-01-07 00:16:19 +01:00
RV-Fan--fullWidth(base-height, base-width)
+RV-Block__Modifier('fullWidth')
RV-Fan--auto(base-height, base-width)
+RV-Element('Base')
flex-grow 1
+RV-Element('Surface')
flex-grow 1
2021-01-03 12:36:12 +01:00
2021-01-08 17:55:56 +01:00
RV-Fan__Base--wurst()
+RV-Element__Modifier('wurst')
--wurst wasser
2021-01-07 00:16:19 +01:00
/* ###############
* Element Mixins
* ############### */
2021-01-09 16:29:11 +01:00
/*
2021-01-07 00:16:19 +01:00
RV-Fan__Base(base-height, base-width)
+RV-Element('Base')
height base-height
width base-width
flex 0 0 auto
2021-01-03 12:36:12 +01:00
2021-01-07 00:16:19 +01:00
RV-Fan__Surface--fixedHeight(height)
+RV-Element__Modifier('fixedHeight')
height height
2021-01-03 12:36:12 +01:00
2021-01-07 00:16:19 +01:00
RV-Fan__Surface--fixedWidth(width)
+RV-Element__Modifier('fixedWidth')
max-width width
2021-01-03 12:36:12 +01:00
2021-01-07 00:16:19 +01:00
RV-Fan__Surface()
+RV-Element('Surface')
2021-01-09 16:29:11 +01:00
RV-ContentCrop()
2021-01-07 00:16:19 +01:00
/* ############
* Block Mixin
* ############ */
2021-01-09 16:29:11 +01:00
/*
2021-01-07 00:16:19 +01:00
RV-Fan()
display flex
2021-01-08 17:55:56 +01:00
/* #########
* CSS-Class
* ######### */
2021-01-09 16:29:11 +01:00
/*
2021-01-08 17:55:56 +01:00
+RV-Block('Fan')
RV-CSSParameter({
base-height: 280px,
base-width: 320px
})
2021-01-07 00:16:19 +01:00
RV-Fan()
2021-01-08 17:55:56 +01:00
2021-01-07 00:16:19 +01:00
RV-Fan__Surface()
2021-01-08 17:55:56 +01:00
RV-Fan__Surface--fixedWidth(base-width)
RV-Fan__Surface--fixedHeight(base-height)
2021-01-07 00:16:19 +01:00
2021-01-08 17:55:56 +01:00
RV-Fan__Base(base-height, base-width)
2021-01-07 00:16:19 +01:00
RV-Fan--fullWidth(base-height, base-width)
RV-Fan--vertical(base-height, base-width)
RV-Fan--horizontal(base-height, base-width)
RV-Fan--auto(base-height, base-width)
2021-01-09 16:29:11 +01:00
*/
RV-Test()
+RV-Block('Fächer')
--wurst yeet
RV-Fan__Surface(50px, 50px)
+RV-Element('susses')
+RV-Element('BLubb')
color black
--blubb wasser
+RV-Element__Modifier('pp')
+RV-Element__Modifier('Wurst')
--wasser 'wurst'
.wurstwasser
RV-Test()