Converting Layouts to new BEM-Generator
This commit is contained in:
parent
eca0624fd3
commit
c990a740b0
@ -1,55 +1,61 @@
|
||||
RV-Alignment--top()
|
||||
+RV-Block__Modifier--name('top')
|
||||
display grid
|
||||
align-content start
|
||||
|
||||
RV-Alignment--bottom()
|
||||
+RV-Block__Modifier--name('bottom')
|
||||
display grid
|
||||
align-content end
|
||||
|
||||
RV-Alignment--left()
|
||||
+RV-Block__Modifier--name('left')
|
||||
display grid
|
||||
justify-content start
|
||||
|
||||
RV-Alignment--right()
|
||||
+RV-Block__Modifier--name('right')
|
||||
display grid
|
||||
justify-content: end
|
||||
|
||||
RV-Alignment--horizontalCenter()
|
||||
+RV-Block__Modifier--name('horizontalCenter')
|
||||
display grid
|
||||
justify-content center
|
||||
|
||||
RV-Alignment--verticalCenter()
|
||||
+RV-Block__Modifier--name('verticalCenter')
|
||||
display grid
|
||||
align-items center
|
||||
|
||||
RV-Alignment--center()
|
||||
+RV-Block__Modifier--name('center')
|
||||
RV-Alignment--horizontalCenter()
|
||||
RV-Alignment--verticalCenter()
|
||||
|
||||
RV-Alignment(prefix='&')
|
||||
RV-Alignment()
|
||||
display grid
|
||||
|
||||
{prefix}--top
|
||||
+RV-Block('RV-Alignment')
|
||||
RV-Alignment()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-Alignment--top()
|
||||
|
||||
{prefix}--bottom
|
||||
+RV-Block__Modifier()
|
||||
RV-Alignment--bottom()
|
||||
|
||||
|
||||
{prefix}--left
|
||||
+RV-Block__Modifier()
|
||||
RV-Alignment--left()
|
||||
|
||||
{prefix}--right
|
||||
+RV-Block__Modifier()
|
||||
RV-Alignment--right()
|
||||
|
||||
{prefix}--horizontalCenter
|
||||
+RV-Block__Modifier()
|
||||
RV-Alignment--horizontalCenter()
|
||||
|
||||
{prefix}--verticalCenter
|
||||
+RV-Block__Modifier()
|
||||
RV-Alignment--verticalCenter()
|
||||
|
||||
{prefix}--center
|
||||
+RV-Block__Modifier()
|
||||
RV-Alignment--center()
|
||||
|
||||
.RV-Alignment
|
||||
RV-Alignment()
|
||||
@ -1,24 +1,97 @@
|
||||
RV-ContentCrop--bottom()
|
||||
+RV-Block__Modifier--name('bottom')
|
||||
.RV-Image *
|
||||
object-position bottom
|
||||
|
||||
RV-ContentCrop--top()
|
||||
+RV-Block__Modifier--name('top')
|
||||
.RV-Image *
|
||||
object-position top
|
||||
|
||||
RV-ContentCrop--right()
|
||||
+RV-Block__Modifier--name('right')
|
||||
.RV-Image *
|
||||
object-position right
|
||||
|
||||
RV-ContentCrop--left()
|
||||
+RV-Block__Modifier--name('left')
|
||||
.RV-Image *
|
||||
object-position left
|
||||
|
||||
RV-ContentCrop--center()
|
||||
+RV-Block__Modifier--name('center')
|
||||
.RV-Image *
|
||||
object-position center
|
||||
|
||||
RV-ContentCrop--square()
|
||||
+RV-Block__Modifier--name('square')
|
||||
width 100%
|
||||
padding-top 100%
|
||||
position relative
|
||||
|
||||
.RV-Image *,
|
||||
div
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
bottom 0
|
||||
right 0
|
||||
|
||||
RV-ContentCrop--circle()
|
||||
+RV-Block__Modifier--name('circle')
|
||||
RV-ContentCrop__Square()
|
||||
border-radius 50%
|
||||
|
||||
RV-ContentCrop--XtoY(x=1, y=1)
|
||||
RV-CSSParameter({
|
||||
x: x,
|
||||
y: y
|
||||
})
|
||||
|
||||
+RV-Block__Modifier--name('XtoY')
|
||||
width 100%
|
||||
padding-top 100% * (y / x)
|
||||
position relative
|
||||
|
||||
.RV-Image *
|
||||
object-fit cover
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
bottom 0
|
||||
right 0
|
||||
|
||||
RV-ContentCrop--1to2()
|
||||
+RV-Block__Modifier--name('1to2')
|
||||
RV-ContentCrop__XtoY(1, 2)
|
||||
|
||||
RV-ContentCrop--2to1()
|
||||
+RV-Block__Modifier--name('2to1')
|
||||
RV-ContentCrop__XtoY(2, 1)
|
||||
|
||||
RV-ContentCrop--4to3()
|
||||
+RV-Block__Modifier--name('4to3')
|
||||
RV-ContentCrop__XtoY(4, 3)
|
||||
|
||||
RV-ContentCrop--16to9()
|
||||
+RV-Block__Modifier--name('16to9')
|
||||
RV-ContentCrop__XtoY(16, 9)
|
||||
|
||||
RV-ContentCrop--3to2()
|
||||
+RV-Block__Modifier--name('3to2')
|
||||
RV-ContentCrop__XtoY(3, 2)
|
||||
|
||||
|
||||
RV-ContentCrop__Image()
|
||||
+RV-Element--name('Image')
|
||||
.RV-Image *, .RV-Image
|
||||
width 100%
|
||||
height 100%
|
||||
object-fit cover
|
||||
display block
|
||||
|
||||
RV-ContentCrop__Text--fade(background-color=white)
|
||||
+RV-Element__Modifier--name('fade')
|
||||
&:after
|
||||
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
|
||||
display block
|
||||
@ -31,6 +104,7 @@ RV-ContentCrop__Text--fade(background-color=white)
|
||||
z-index 10
|
||||
|
||||
RV-ContentCrop__Text--ellipsis(background-color=white)
|
||||
+RV-Element__Modifier--name('ellipsis')
|
||||
&:after
|
||||
position relative
|
||||
display block
|
||||
@ -43,7 +117,9 @@ RV-ContentCrop__Text--ellipsis(background-color=white)
|
||||
padding 0 2px
|
||||
|
||||
RV-ContentCrop__Text(line-height=1.1, background-color=white)
|
||||
.RV-Text
|
||||
+RV-Element--name('Text')
|
||||
--cc 'text'
|
||||
& .RV-Text
|
||||
overflow hidden
|
||||
display block
|
||||
text-overflow ellipsis
|
||||
@ -63,102 +139,58 @@ RV-ContentCrop__Text(line-height=1.1, background-color=white)
|
||||
*:last-child
|
||||
padding-bottom unset
|
||||
|
||||
&--fade
|
||||
RV-ContentCrop__Text--fade(background-color)
|
||||
|
||||
&--ellipsis
|
||||
RV-ContentCrop__Text--ellipsis(background-color)
|
||||
|
||||
RV-ContentCrop__Shapes--square()
|
||||
width 100%
|
||||
padding-top 100%
|
||||
position relative
|
||||
|
||||
.RV-Image *,
|
||||
div
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
bottom 0
|
||||
right 0
|
||||
|
||||
RV_ContentCrop__Shapes--circle()
|
||||
RV-ContentCrop__Shapes--square()
|
||||
border-radius 50%
|
||||
|
||||
RV-ContentCrop__Shapes--xtoy(-x, -y)
|
||||
width 100%
|
||||
padding-top 100% * (-y / -x)
|
||||
position relative
|
||||
|
||||
.RV-Image *
|
||||
object-fit cover
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
bottom 0
|
||||
right 0
|
||||
|
||||
RV-ContentCrop__Shapes()
|
||||
|
||||
&--square
|
||||
RV-ContentCrop__Shapes--square()
|
||||
|
||||
&--circle
|
||||
RV_ContentCrop__Shapes--circle()
|
||||
|
||||
&--1to2
|
||||
RV-ContentCrop__Shapes--xtoy(1, 2)
|
||||
|
||||
&--2to1
|
||||
RV-ContentCrop__Shapes--xtoy(2, 1)
|
||||
|
||||
&--4to3
|
||||
RV-ContentCrop__Shapes--xtoy(4, 3)
|
||||
|
||||
&--16to9
|
||||
RV-ContentCrop__Shapes--xtoy(16, 9)
|
||||
|
||||
&--3to2
|
||||
RV-ContentCrop__Shapes--xtoy(3, 2)
|
||||
|
||||
RV-ContentCrop__Image()
|
||||
.RV-Image *, .RV-Image
|
||||
width 100%
|
||||
height 100%
|
||||
object-fit cover
|
||||
display block
|
||||
|
||||
RV-ContentCrop--shorthands()
|
||||
&--left
|
||||
RV-ContentCrop--left()
|
||||
|
||||
&--center
|
||||
RV-ContentCrop--center()
|
||||
|
||||
&--top
|
||||
RV-ContentCrop--top()
|
||||
|
||||
&--bottom
|
||||
RV-ContentCrop--bottom()
|
||||
|
||||
&--center
|
||||
RV-ContentCrop--center()
|
||||
|
||||
RV-ContentCrop__Shapes()
|
||||
|
||||
|
||||
RV-ContentCrop(line-height=1.1, prefix='&')
|
||||
// Heuristic, just to be safe
|
||||
line-height = line-height * 1.1
|
||||
RV-ContentCrop(line-height=1.1)
|
||||
line-height = calc(line-height * 1.1)
|
||||
background-color = white
|
||||
display block
|
||||
overflow hidden
|
||||
|
||||
+RV-Block('RV-ContentCrop')
|
||||
line-height = 1.1
|
||||
RV-ContentCrop(line-height)
|
||||
|
||||
+RV-Element()
|
||||
RV-ContentCrop__Image()
|
||||
|
||||
+RV-Element()
|
||||
RV-ContentCrop__Text(line-height)
|
||||
|
||||
+RV-Element__Modifier()
|
||||
RV-ContentCrop__Text--ellipsis()
|
||||
|
||||
.RV-ContentCrop
|
||||
RV-ContentCrop()
|
||||
RV-ContentCrop--shorthands()
|
||||
+RV-Element__Modifier()
|
||||
RV-ContentCrop__Text--fade()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-ContentCrop--bottom()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-ContentCrop--top()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-ContentCrop--right()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-ContentCrop--left()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-ContentCrop--center()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-ContentCrop--square()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-ContentCrop--1to2()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-ContentCrop--2to1()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-ContentCrop--4to3()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-ContentCrop--16to9()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-ContentCrop--3to2()
|
||||
@ -15,7 +15,7 @@
|
||||
* but will fill the parent's width
|
||||
*/
|
||||
RV-Fan--horizontal(base-height, base-width)
|
||||
+RV-Block__Modifier('horizontal')
|
||||
+RV-Block__Modifier--name('horizontal')
|
||||
flex-direction row
|
||||
|
||||
+RV-Element('Surface')
|
||||
@ -28,7 +28,7 @@ RV-Fan--horizontal(base-height, base-width)
|
||||
* minimal height is given height, will grow with content
|
||||
*/
|
||||
RV-Fan--vertical(base-height, base-width)
|
||||
+RV-Block__Modifier('vertical')
|
||||
+RV-Block__Modifier--name('vertical')
|
||||
flex-direction column
|
||||
width max-content
|
||||
|
||||
@ -42,7 +42,7 @@ RV-Fan--vertical(base-height, base-width)
|
||||
* Width of the base and surface in vertical are base-width
|
||||
*/
|
||||
RV-Fan--auto(base-height, base-width)
|
||||
+RV-Block__Modifier('auto')
|
||||
+RV-Block__Modifier--name('auto')
|
||||
flex-flow row wrap
|
||||
|
||||
+RV-Element('Surface')
|
||||
@ -57,7 +57,7 @@ RV-Fan--auto(base-height, base-width)
|
||||
* are 100% of the parent width
|
||||
*/
|
||||
RV-Fan--fullWidth(base-height, base-width)
|
||||
+RV-Block__Modifier('fullWidth')
|
||||
+RV-Block__Modifier--name('fullWidth')
|
||||
RV-Fan--auto(base-height, base-width)
|
||||
|
||||
+RV-Element('Base')
|
||||
@ -71,22 +71,24 @@ RV-Fan--fullWidth(base-height, base-width)
|
||||
* Element Mixins
|
||||
* ############### */
|
||||
RV-Fan__Base(base-height, base-width)
|
||||
+RV-Element('Base')
|
||||
+RV-Element--name('Base')
|
||||
height base-height
|
||||
width base-width
|
||||
flex 0 0 auto
|
||||
|
||||
RV-Fan__Surface--fixedHeight(height)
|
||||
+RV-Element__Modifier('fixedHeight')
|
||||
+RV-Element__Modifier--name('fixedHeight')
|
||||
height height
|
||||
|
||||
RV-Fan__Surface--fixedWidth(width)
|
||||
+RV-Element__Modifier('fixedWidth')
|
||||
+RV-Element__Modifier--name('fixedWidth')
|
||||
max-width width
|
||||
|
||||
RV-Fan__Surface()
|
||||
+RV-Element('Surface')
|
||||
+RV-Element--name('Surface')
|
||||
RV-ContentCrop()
|
||||
RV-ContentCrop__Text()
|
||||
RV-ContentCrop__Image()
|
||||
|
||||
/* ############
|
||||
* Block Mixin
|
||||
@ -97,7 +99,6 @@ RV-Fan()
|
||||
/* #########
|
||||
* CSS-Class
|
||||
* ######### */
|
||||
|
||||
+RV-Block('RV-Fan')
|
||||
RV-CSSParameter({
|
||||
base-height: 280px,
|
||||
@ -105,14 +106,24 @@ RV-Fan()
|
||||
})
|
||||
|
||||
RV-Fan()
|
||||
|
||||
+RV-Element()
|
||||
RV-Fan__Surface()
|
||||
|
||||
+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)
|
||||
|
||||
@ -1,51 +1,54 @@
|
||||
RV-FlexGrid__Container()
|
||||
display grid
|
||||
|
||||
RV-FlexGrid__Container--autoWidth(item-height=300px, item-min-width=300px)
|
||||
RV-FlexGrid--autoWidth(item-height=300px, item-min-width=300px)
|
||||
+RV-Block__Modifier--name('autoWidth')
|
||||
grid-template-columns repeat(auto-fill, minmax(item-min-width, 1fr))
|
||||
grid-template-rows repeat(auto-fill, minmax(item-height, 1fr))
|
||||
grid-auto-rows minmax(item-height, 1fr)
|
||||
|
||||
RV-FlexGrid__Container--fixedSize(item-height=300px, item-width=300px)
|
||||
RV-FlexGrid__Container--autoWidth(item-height, item-width)
|
||||
RV-FlexGrid--fixedSize(item-height=300px, item-width=300px)
|
||||
+RV-Block__Modifier--name('fixedSize')
|
||||
grid-template-rows repeat(auto-fill, minmax(item-height, 1fr))
|
||||
grid-auto-rows minmax(item-height, 1fr)
|
||||
grid-template-columns repeat(auto-fill, item-width)
|
||||
justify-content space-between
|
||||
|
||||
RV-FlexGrid__Container--masonry(item-width=300px)
|
||||
RV-FlexGrid--masonry(item-width=300px)
|
||||
+RV-Block__Modifier--name('masonry')
|
||||
display unquote(block)
|
||||
column-count auto
|
||||
column-width item-width
|
||||
gap 0
|
||||
|
||||
RV-Utils__Hook--throw('masonry_grid', @(gap){
|
||||
*{
|
||||
margin-bottom: gap;
|
||||
+RV-Element('Item')
|
||||
margin-bottom: var(--inner-spacing);
|
||||
|
||||
*{
|
||||
margin-bottom: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
RV-FlexGrid__Item()
|
||||
+RV-Element--name('Item')
|
||||
pass
|
||||
|
||||
|
||||
RV-FlexGrid--shorthands(prefix='&')
|
||||
{prefix}__Container
|
||||
&--autoWidth
|
||||
RV-FlexGrid__Container--autoWidth()
|
||||
RV-FlexGrid()
|
||||
display grid
|
||||
|
||||
&--fixedSize
|
||||
RV-FlexGrid__Container--fixedSize()
|
||||
|
||||
&--masonry
|
||||
RV-FlexGrid__Container--masonry()
|
||||
|
||||
RV-FlexGrid(prefix='&')
|
||||
{prefix}__Container
|
||||
RV-FlexGrid__Container()
|
||||
|
||||
{prefix}__Item
|
||||
RV-Alignment()
|
||||
|
||||
.RV-FlexGrid
|
||||
+RV-Block('RV-FlexGrid')
|
||||
RV-CSSParameter({
|
||||
item-height: 300px,
|
||||
item-width: 300px
|
||||
})
|
||||
RV-FlexGrid()
|
||||
RV-FlexGrid--shorthands()
|
||||
|
||||
+RV-Element()
|
||||
RV-FlexGrid__Item()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-FlexGrid--autoWidth(item-height, item-width)
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-FlexGrid--fixedSize(item-height, item-width)
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-FlexGrid--masonry(item-width)
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="RV-FlexGrid__Container RV-FlexGrid__Container--autoWidth">
|
||||
<div class="RV-FlexGrid RV-FlexGrid--autoWidth">
|
||||
<div class="red RV-FlexGrid__Item">Heres</div>
|
||||
<div class="green RV-FlexGrid__Item">some</div>
|
||||
<div class="red RV-FlexGrid__Item">totally</div>
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="RV-FlexGrid__Container RV-FlexGrid__Container--fixedSize">
|
||||
<div class="RV-FlexGrid RV-FlexGrid--fixedSize">
|
||||
<div class="red RV-FlexGrid__Item">Heres</div>
|
||||
<div class="green RV-FlexGrid__Item">some</div>
|
||||
<div class="red RV-FlexGrid__Item">totally</div>
|
||||
@ -32,7 +32,7 @@
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="RV-FlexGrid__Container RV-FlexGrid__Container--masonry RV-Spacing__Inner--small">
|
||||
<div class="RV-FlexGrid RV-FlexGrid--masonry">
|
||||
<div class="red RV-FlexGrid__Item">Heres</div>
|
||||
<div class="green RV-FlexGrid__Item">some</div>
|
||||
<div class="red RV-FlexGrid__Item RV-FlexGrid__Item--right">totally (right)</div>
|
||||
|
||||
@ -2,181 +2,165 @@
|
||||
* Classes for easy flexrow usage
|
||||
*/
|
||||
|
||||
|
||||
/* ##########
|
||||
* Container class
|
||||
########### */
|
||||
RV-FlexRow__Container(prefix='&')
|
||||
display flex
|
||||
height 100%
|
||||
|
||||
/*
|
||||
* Orientation
|
||||
*/
|
||||
RV-FlexRow__Container--horizontal()
|
||||
RV-FlexRow--horizontal()
|
||||
+RV-Block__Modifier--name('horizontal')
|
||||
flex-direction row
|
||||
|
||||
RV-FlexRow__Container--vertical()
|
||||
RV-FlexRow--vertical()
|
||||
+RV-Block__Modifier--name('vertical')
|
||||
flex-direction column
|
||||
|
||||
/*
|
||||
* Breaks from row to column orientation at the given breakpoint
|
||||
* breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint.
|
||||
*/
|
||||
RV-FlexRow__Container--breakPoint(localBreakPoint=500px, mediaBreakPoint=null)
|
||||
RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
|
||||
+RV-Block__Modifier--name('breakPoint')
|
||||
flex-wrap wrap
|
||||
RV-Reset()
|
||||
gap 0px
|
||||
|
||||
RV-Utils__Hook--throw('flexrow_breakpoint_gap', @(gap){
|
||||
RV-Utils__ElementAmount(@(index, total){
|
||||
min-width "calc((%s - (%s * (%s - 1))) / %s - (2 * %s))" % (localBreakPoint gap index index gap)
|
||||
min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
|
||||
}
|
||||
)
|
||||
|
||||
*{
|
||||
+RV-Element('Item')
|
||||
min-width initial
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
*{
|
||||
flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
|
||||
}
|
||||
overflow hidden
|
||||
|
||||
if mediaBreakPoint !=null
|
||||
@media(max-width mediaBreakPoint)
|
||||
RV-FlexRow__Container--column()
|
||||
flex-direction row
|
||||
|
||||
/*
|
||||
* Flexbox behavior, Row is horizontal, but item are wraped individualy
|
||||
* Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
|
||||
*/
|
||||
RV-FlexRow__Container--auto()
|
||||
RV-FlexRow__Container--horizontal()
|
||||
RV-FlexRow--auto()
|
||||
+RV-Block__Modifier--name('auto')
|
||||
RV-FlexRow--horizontal()
|
||||
flex-wrap wrap
|
||||
|
||||
/*
|
||||
* Shorthand for the modifiers above
|
||||
*/
|
||||
RV-FlexRow__Container--shorthands(break_width=500px)
|
||||
&--breakPoint
|
||||
RV-FlexRow__Container--breakPoint(break_width)
|
||||
|
||||
&--horizontal
|
||||
RV-FlexRow__Container--horizontal()
|
||||
|
||||
&--vertical
|
||||
RV-FlexRow__Container--vertical()
|
||||
|
||||
&--auto
|
||||
RV-FlexRow__Container--auto()
|
||||
|
||||
/* ##########
|
||||
* Item class
|
||||
########### */
|
||||
RV-FlexRow__Item()
|
||||
+RV-Element--name('Item')
|
||||
flex-basis max-content
|
||||
RV-FlexRow__Item--normal()
|
||||
flex-grow 3
|
||||
flex-shrink 3
|
||||
|
||||
/*
|
||||
* Varios relative width of items to each other
|
||||
*/
|
||||
RV-FlexRow__Item--normal()
|
||||
flex-grow 3
|
||||
flex-shrink 3
|
||||
|
||||
RV-FlexRow__Item--narrower()
|
||||
+RV-Element__Modifier--name('narrower')
|
||||
flex-grow 1
|
||||
flex-shrink 5
|
||||
|
||||
RV-FlexRow__Item--narrow()
|
||||
+RV-Element__Modifier--name('narrow')
|
||||
flex-grow 2
|
||||
flex-shrink 4
|
||||
|
||||
RV-FlexRow__Item--wide()
|
||||
+RV-Element__Modifier--name('wide')
|
||||
flex-grow 4
|
||||
flex-shrink 2
|
||||
|
||||
RV-FlexRow__Item--wider()
|
||||
+RV-Element__Modifier--name('wider')
|
||||
flex-grow 5
|
||||
flex-shrink 1
|
||||
|
||||
/*
|
||||
* Item has always the given width
|
||||
*/
|
||||
RV-FlexRow__Item--fixedSize(width=100px)
|
||||
RV-FlexRow__Item--fixedSize(width)
|
||||
+RV-Element__Modifier--name('fixedSize')
|
||||
RV-Sizes--fixedSize(width)
|
||||
|
||||
/*
|
||||
* Item width relativ to the container
|
||||
*/
|
||||
RV-FlexRow__Item--half()
|
||||
+RV-Element__Modifier--name('half')
|
||||
RV-Sizes--half()
|
||||
|
||||
RV-FlexRow__Item--third()
|
||||
+RV-Element__Modifier--name('third')
|
||||
RV-Sizes--third()
|
||||
|
||||
RV-FlexRow__Item--quarter()
|
||||
+RV-Element__Modifier--name('quarter')
|
||||
RV-Sizes--quarter()
|
||||
|
||||
RV-FlexRow__Item--content()
|
||||
+RV-Element__Modifier--name('content')
|
||||
RV-Sizes--content()
|
||||
|
||||
/*
|
||||
* Shorthand for the modifiers above
|
||||
*/
|
||||
RV-FlexRow__Item--shorthands()
|
||||
RV-Alignment()
|
||||
/* ##########
|
||||
* Block
|
||||
########### */
|
||||
RV-FlexRow()
|
||||
display flex
|
||||
height 100%
|
||||
|
||||
&--narrower
|
||||
RV-FlexRow__Item--narrower()
|
||||
+RV-Block('RV-FlexRow')
|
||||
RV-FlexRow()
|
||||
|
||||
&--narrow
|
||||
RV-FlexRow__Item--narrow()
|
||||
RV-CSSParameter({
|
||||
width: 100px
|
||||
localBreakPoint: 500px,
|
||||
mediaBreakPoint: 100vw
|
||||
})
|
||||
|
||||
&--wide()
|
||||
RV-FlexRow__Item--wide()
|
||||
|
||||
&--wider
|
||||
RV-FlexRow__Item--wider()
|
||||
|
||||
&--fixedSize
|
||||
RV-FlexRow__Item--fixedSize()
|
||||
|
||||
&--half
|
||||
RV-FlexRow__Item--half()
|
||||
|
||||
&--third
|
||||
RV-FlexRow__Item--third()
|
||||
|
||||
&--quarter
|
||||
RV-FlexRow__Item--quarter()
|
||||
|
||||
&--content
|
||||
RV-FlexRow__Item--content()
|
||||
|
||||
/*
|
||||
* Combining basic classes
|
||||
*/
|
||||
RV-FlexRow(prefix='&')
|
||||
{prefix}__Container
|
||||
RV-FlexRow__Container(prefix=prefix)
|
||||
|
||||
{prefix}__Item
|
||||
+RV-Element()
|
||||
RV-FlexRow__Item()
|
||||
|
||||
/*
|
||||
* Combining shorthands
|
||||
*/
|
||||
RV-FlexRow--shorthands(break_width=500px, prefix='&')
|
||||
{prefix}__Container
|
||||
RV-FlexRow__Container--shorthands(break_width)
|
||||
+RV-Element__Modifier()
|
||||
RV-FlexRow__Item--narrower()
|
||||
|
||||
{prefix}__Item
|
||||
RV-FlexRow__Item--shorthands()
|
||||
+RV-Element__Modifier()
|
||||
RV-FlexRow__Item--narrow()
|
||||
|
||||
/*
|
||||
* Final CSS Class
|
||||
*/
|
||||
.RV-FlexRow
|
||||
RV-FlexRow()
|
||||
RV-FlexRow--shorthands()
|
||||
+RV-Element__Modifier()
|
||||
RV-FlexRow__Item--wide()
|
||||
|
||||
+RV-Element__Modifier()
|
||||
RV-FlexRow__Item--wider()
|
||||
|
||||
+RV-Element__Modifier()
|
||||
RV-FlexRow__Item--fixedSize(width)
|
||||
|
||||
+RV-Element__Modifier()
|
||||
RV-FlexRow__Item--narrower()
|
||||
|
||||
+RV-Element__Modifier()
|
||||
RV-FlexRow__Item--half()
|
||||
|
||||
+RV-Element__Modifier()
|
||||
RV-FlexRow__Item--third()
|
||||
|
||||
+RV-Element__Modifier()
|
||||
RV-FlexRow__Item--quarter()
|
||||
|
||||
+RV-Element__Modifier()
|
||||
RV-FlexRow__Item--content()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-FlexRow--horizontal()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-FlexRow--vertical()
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
|
||||
|
||||
+RV-Block__Modifier()
|
||||
RV-FlexRow--auto()
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="RV-FlexRow__Container">
|
||||
<div class="RV-FlexRow">
|
||||
<div class="red RV-FlexRow__Item">Im normal</div>
|
||||
<div class="green RV-FlexRow__Item RV-FlexRow__Item--right">Right</div>
|
||||
<div class="red RV-FlexRow__Item RV-FlexRow__Item--center">Center</div>
|
||||
@ -6,12 +6,12 @@
|
||||
<div class="red RV-FlexRow__Item RV-FlexRow__Item--fixedSize">Fixed</div>
|
||||
</div>
|
||||
<br></br>
|
||||
<div class="RV-FlexRow__Container">
|
||||
<div class="RV-FlexRow">
|
||||
<div class="red RV-FlexRow__Item">Im normal</div>
|
||||
<div class="green RV-FlexRow__Item RV-FlexRow__Item--right RV-FlexRow__Item--fixedSize">Right</div>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="RV-FlexRow__Container RV-FlexRow__Container--multiRow">
|
||||
<div class="RV-FlexRow RV-FlexRow--multiRow">
|
||||
<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">narrower</div>
|
||||
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">narrow</div>
|
||||
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">normal</div>
|
||||
@ -20,7 +20,7 @@
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
<div class="RV-FlexRow__Container RV-Spacing__Inner--small">
|
||||
<div class="RV-FlexRow RV-Spacing__Inner--small">
|
||||
<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">.</div>
|
||||
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">.</div>
|
||||
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">.</div>
|
||||
@ -29,7 +29,7 @@
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
<div class="RV-FlexRow__Container RV-FlexRow__Container--breakPoint">
|
||||
<div class="RV-FlexRow RV-FlexRow--breakPoint">
|
||||
<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">sdfkjsakfjsdök</div>
|
||||
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">adfasfsd</div>
|
||||
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">asfsdfasd</div>
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
RV-FullWidthContent__Container()
|
||||
RV-FullWidthContent()
|
||||
width 100%
|
||||
|
||||
RV-FullWidthContent__Item()
|
||||
+RV-Element--name('Item')
|
||||
width 100%
|
||||
RV-ContentCrop()
|
||||
RV-ContentCrop__Text()
|
||||
RV-ContentCrop__Image()
|
||||
|
||||
RV-FullWidthContent(prefix='&')
|
||||
{prefix}__Container
|
||||
RV-FullWidthContent__Container()
|
||||
|
||||
{prefix}__Item
|
||||
RV-FullWidthContent__Item()
|
||||
|
||||
.RV-FullWidthContent
|
||||
+RV-Block('RV-FullWidthContent')
|
||||
RV-FullWidthContent()
|
||||
|
||||
+RV-Element()
|
||||
RV-FullWidthContent__Item()
|
||||
@ -1,49 +1,51 @@
|
||||
RV-Sizes--half()
|
||||
+RV-Block__Modifier--name('half')
|
||||
flex-grow 0
|
||||
flex-shrink 0
|
||||
flex-basis 50%
|
||||
width 50%
|
||||
|
||||
RV-Sizes--third()
|
||||
+RV-Block__Modifier--name('third')
|
||||
flex-grow 0
|
||||
flex-shrink 0
|
||||
flex-basis (100/3)%
|
||||
width (100/3)%
|
||||
|
||||
RV-Sizes--quarter()
|
||||
+RV-Block__Modifier--name('quarter')
|
||||
flex-grow 0
|
||||
flex-shrink 0
|
||||
flex-basis 25%
|
||||
width 25%
|
||||
|
||||
RV-Sizes--fixedSize(width=100px)
|
||||
+RV-Block__Modifier--name('fixedSize')
|
||||
flex-grow 0
|
||||
flex-shrink 0
|
||||
width min-content
|
||||
flex-basis width
|
||||
|
||||
RV-Sizes--content()
|
||||
+RV-Block__Modifier--name('content')
|
||||
flex-grow 0
|
||||
flex-shrink 0
|
||||
width max-content
|
||||
flex-basis max-content
|
||||
|
||||
RV-Sizes(prefix='&')
|
||||
+RV-Block('RV-Sizes')
|
||||
|
||||
{prefix}--half
|
||||
+RV-Block__Modifier()
|
||||
RV-Sizes--half()
|
||||
|
||||
{prefix}--third
|
||||
+RV-Block__Modifier()
|
||||
RV-Sizes--third()
|
||||
|
||||
{prefix}--quarter
|
||||
+RV-Block__Modifier()
|
||||
RV-Sizes--quarter()
|
||||
|
||||
{prefix}--fixedSize
|
||||
RV-Sizes--fixedSize
|
||||
+RV-Block__Modifier()
|
||||
RV-Sizes--fixedSize()
|
||||
|
||||
{prefix}--content
|
||||
RV-Sizes--content
|
||||
|
||||
.RV-Sizes
|
||||
RV-Sizes()
|
||||
+RV-Block__Modifier()
|
||||
RV-Sizes--content()
|
||||
Loading…
Reference in New Issue
Block a user