reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Calc dimension including margin/padding

Browse Source
This commit is contained in:
reverend 2021-01-19 23:36:11 +01:00
parent dad0ac733e
commit 3dfc19111b
4 changed files with 47 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/00_Tools/_alignment.styl
View File

@ -6,4 +6,6 @@ RV-Reset()
left 0
right 0
border none
gap 0
gap 0
--inner-spacing 0px
--outer-spacing 0px

5
components/00_Tools/_spacing.styl Normal file
View File

@ -0,0 +1,5 @@
calc_height(base-height=100%)
'calc(%s - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing)))' % base-height
calc_width(base-width=100%)
'calc(%s - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing)))' % base-width

33
components/01_Layouts/fan/_fan.styl
View File

@ -19,8 +19,8 @@ RV-Fan--horizontal(base-height, base-width)
flex-direction row
+RV-Element('Surface')
min-width base-width
height base-height
min-width calc_width(base-width)
height calc_height(base-height)
/*
* Base above, Surfce below
@ -33,9 +33,10 @@ RV-Fan--vertical(base-height, base-width)
width max-content
+RV-Element('Surface')
width base-width
width calc_width(base-width)
min-height base-height
/*
* Initialy horizontal, changes to vertical when
* the width of the parent is less than 2 x base-width
@ -46,9 +47,9 @@ RV-Fan--auto(base-height, base-width)
flex-flow row wrap
+RV-Element('Surface')
width 'calc(100% - %s)' % base-width
min-width base-width
height base-height
min-width calc_width('calc(%s)' % base-width)
width calc_width('calc(100% - %s)' % base-width)
height calc_height(base-height)
/*
* Also initialy horizontal, changes to vertical when
@ -72,29 +73,35 @@ RV-Fan--fullWidth(base-height, base-width)
* ############### */
RV-Fan__Base(base-height, base-width)
+RV-Element--name('Base')
height base-height
width base-width
height calc_height(base-height)
width calc_width(base-width)
flex 0 0 auto
RV-Fan__Surface--fixedHeight(height)
+RV-Element__Modifier--name('fixedHeight')
height height
height calc_height(height)
RV-Fan__Surface--fixedWidth(width)
+RV-Element__Modifier--name('fixedWidth')
max-width width
max-width calc_width(width)
RV-Fan__Surface()
RV-Fan__Surface(base-height, base-width)
+RV-Element--name('Surface')
RV-ContentCrop()
RV-ContentCrop__Text()
RV-ContentCrop__Image()
overflow hidden
height calc_height(base-height)
width calc_width()
/* ############
* Block Mixin
* ############ */
RV-Fan()
display flex
position relative
/* #########
* CSS-Class
@ -104,10 +111,12 @@ RV-Fan()
base-height: 280px,
base-width: 320px
})
--inner-spacing 0px
RV-Fan()
+RV-Element()
RV-Fan__Surface()
RV-Fan__Surface(base-height, base-width)
+RV-Element__Modifier()
RV-Fan__Surface--fixedWidth(base-width)

29
components/01_Layouts/flexGrid/_flexGrid.styl
View File

@ -12,36 +12,43 @@ RV-FlexGrid--fixedSize(item-height=300px, item-width=300px)
grid-template-columns repeat(auto-fill, item-width)
justify-content space-between
RV-FlexGrid--masonry(item-width=300px)
RV-FlexGrid--masonry(item-height=300px,item-width=300px)
+RV-Block__Modifier--name('masonry')
display unquote(block)
column-count auto
column-width item-width
+RV-Element('Item')
display inline-block
height unset
margin-bottom: var(--inner-spacing);
*{
margin-bottom: unset;
& > * {
height auto
}
RV-FlexGrid__Item()
RV-FlexGrid__Item(item-height, item-width)
+RV-Element--name('Item')
pass
height 'calc(%s - calc(2*var(--inner-spacing)))' % item-height
& > * {
height 100%
width 100%
}
RV-FlexGrid()
RV-FlexGrid(item-height, item-width)
display grid
grid-template-columns: repeat(auto-fill, var(--item-width));
+RV-Block('RV-FlexGrid')
RV-CSSParameter({
item-height: 300px,
item-width: 300px
})
RV-FlexGrid()
RV-FlexGrid(item-height, item-width)
+RV-Element()
RV-FlexGrid__Item()
RV-FlexGrid__Item(item-height, item-width)
+RV-Block__Modifier()
RV-FlexGrid--autoWidth(item-height, item-width)
@ -50,4 +57,4 @@ RV-FlexGrid()
RV-FlexGrid--fixedSize(item-height, item-width)
+RV-Block__Modifier()
RV-FlexGrid--masonry(item-width)
RV-FlexGrid--masonry(item-height,item-width)