Margin and Padding at 'Container Queries'

This commit is contained in:
reverend 2021-03-06 21:20:18 +01:00
parent a1b95dd632
commit a483ca5ae3
5 changed files with 48 additions and 18 deletions

View File

@ -124,8 +124,9 @@ RV-ContentCrop(line-height=1.1, height=350px)
display block
overflow hidden
height calc_height()
width calc_width()
height 100%
width 100%
box-sizing border-box
.RV-Image

View File

@ -34,16 +34,19 @@
+RV-Element('Square')
min-width 300px
width 100%
--width 100%
min-height 300px
height var(--height)
width var(--width)
+RV-Element__Modifier('large')
height 500px
width 500px
--height 500px
--width 500px
+RV-Element__Modifier('small')
height 100px
width 100px
--height 100px
--width 100px
+RV-Block__Modifier('square')
height 350px

View File

@ -25,9 +25,20 @@ RV-Fan--horizontal(base-height, base-width)
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)
+RV-Element('Surface')
height calc_height(base-height)
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
/*
@ -42,7 +53,8 @@ RV-Fan--vertical(base-height, base-width)
min-width initial
+RV-Element('Surface')
width calc_width(base-width)
width base-width
box-sizing border-box
min-width initial
min-height base-height
@ -60,7 +72,8 @@ RV-Fan--auto(base-height, base-width)
flex-grow 1
+RV-Element('Surface')
height calc_height(base-height)
height base-height
box-sizing border-box
flex-grow 99999
@ -69,25 +82,27 @@ RV-Fan--auto(base-height, base-width)
* ############### */
RV-Fan__Base(base-height, base-width)
+RV-Element--name('Base')
height calc_height(base-height)
flex-basis calc_width(base-width)
box-sizing border-box
flex-basis base-width
flex-shrink 0
flex-grow 0
RV-Fan__Surface--fixedHeight(height)
+RV-Element__Modifier--name('fixedHeight')
height calc_height(height)
height height
box-sizing border-box
RV-Fan__Surface--fixedWidth(width)
+RV-Element__Modifier--name('fixedWidth')
max-width calc_width(width)
max-width width
box-sizing border-box
RV-Fan__Surface(base-height, base-width)
+RV-Element--name('Surface')
overflow hidden
height calc_height(base-height)
flex-basis calc_width(base-width)
box-sizing border-box
height base-height
flex-basis base-width
flex-grow 1
/* ############

View File

@ -50,6 +50,17 @@ RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint=0)
+RV-Element__Modifier()
RV-FlexRow__Item--insideBreakPoint()
margin 0
padding 0
--_spacing-difference calc(var(--inner-spacing) - var(--outer-spacing))
--height 100%
*
position relative
height calc(var(--height) - var(--_spacing-difference))
width calc(var(--height) - var(--_spacing-difference))
top calc(var(--_spacing-difference) / 2)
left calc(var(--_spacing-difference) / 2)
@media(max-width mediaBreakPoint)
flex-direction row

View File

@ -44,4 +44,4 @@
RV-FlexRow--horizontal()
padding 0
RV-Fan--fullWidth(--image-height, --image-width)
RV-Fan--auto(--image-height, --image-width)