diff --git a/components/00_Tools/_alignment.styl b/components/00_Tools/_alignment.styl index 348b6bc..8362f37 100644 --- a/components/00_Tools/_alignment.styl +++ b/components/00_Tools/_alignment.styl @@ -6,4 +6,6 @@ RV-Reset() left 0 right 0 border none - gap 0 \ No newline at end of file + gap 0 + --inner-spacing 0px + --outer-spacing 0px \ No newline at end of file diff --git a/components/00_Tools/_spacing.styl b/components/00_Tools/_spacing.styl new file mode 100644 index 0000000..99be6b3 --- /dev/null +++ b/components/00_Tools/_spacing.styl @@ -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 \ No newline at end of file diff --git a/components/01_Layouts/fan/_fan.styl b/components/01_Layouts/fan/_fan.styl index 3774a16..c79f20e 100644 --- a/components/01_Layouts/fan/_fan.styl +++ b/components/01_Layouts/fan/_fan.styl @@ -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) diff --git a/components/01_Layouts/flexGrid/_flexGrid.styl b/components/01_Layouts/flexGrid/_flexGrid.styl index b6b337b..c9fdc4a 100644 --- a/components/01_Layouts/flexGrid/_flexGrid.styl +++ b/components/01_Layouts/flexGrid/_flexGrid.styl @@ -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) \ No newline at end of file + RV-FlexGrid--masonry(item-height,item-width) \ No newline at end of file