Honsely, I don't know what happened here

master
reverend 2 years ago
parent a0240b2ec8
commit 6f4170af8e

@ -0,0 +1,4 @@
@import 'aspectRatio/_aspectRatio'
@import 'focalPoint/_focalPoint'
@import 'shape/_shape'
@import 'truncation/_truncation'

@ -0,0 +1,61 @@
RV-AspectRatio--XtoY(aspectX=1, aspectY=1)
RV-CSSParameter({
aspectX: aspectX,
aspectY: aspectY
})
padding-top 'calc(100% * calc(%s / %s))' % (--aspectY --aspectX)
&:last-child
margin-bottom 'calc(-1 * 100% * calc(%s / %s) + var(--outer-spacing))' % (--aspectY --aspectX)
RV-Utils__ElementAmount(1, @(index, totale){
margin-bottom 0px
})
RV-AspectRatio()
position relative
overflow hidden
height unset
width unset
*
object-fit cover
position absolute
top 0
left 0
bottom 0
right 0
RV-AspectRatio--1to2()
RV-AspectRatio--XtoY(1, 2)
RV-AspectRatio--2to1()
RV-AspectRatio--XtoY(2, 1)
RV-AspectRatio--3to2()
RV-AspectRatio--XtoY(3, 2)
RV-AspectRatio--4to3()
RV-AspectRatio--XtoY(4, 3)
RV-AspectRatio--16to9()
RV-AspectRatio--XtoY(16, 9)
.RV-AspectRatio
RV-AspectRatio()
&--1to2
RV-AspectRatio--1to2()
&--2to1
RV-AspectRatio--2to1()
&--3to2
RV-AspectRatio--3to2()
&--4to3
RV-AspectRatio--4to3()
&--16to9
RV-AspectRatio--16to9()

@ -0,0 +1,45 @@
{
"name": "aspectRatio",
"title": "Aspect Ratio",
"context": {
"modifier_list": [
"RV-AspectRatio--1to2 RV-Dummy--orange",
"RV-AspectRatio--2to1 RV-Dummy--blue",
"RV-AspectRatio--3to2 RV-Dummy--green",
"RV-AspectRatio--4to3 RV-Dummy--red",
"RV-AspectRatio--16to9 RV-Dummy--yellow"
]
},
"variants": [
{
"name": "1 to 2",
"context": {
"modifier": "RV-AspectRatio--1to2"
}
},
{
"name": "2 to 1",
"context": {
"modifier": "RV-AspectRatio--2to1"
}
},
{
"name": "3 to 2",
"context": {
"modifier": "RV-AspectRatio--3to2"
}
},
{
"name": "4 to 3",
"context": {
"modifier": "RV-AspectRatio--4to3"
}
},
{
"name": "16 to 9",
"context": {
"modifier": "RV-AspectRatio--16to9"
}
}
]
}

@ -0,0 +1,12 @@
{{#if modifier}}
<div class="RV-Dummy RV-AspectRatio {{modifier}}"></div>
{{else}}
<div class="RV-FlexGrid RV-FlexGrid--masonry">
{{#each modifier_list}}
<div class="RV-FlexGrid__Item ">
<div class="RV-Dummy RV-AspectRatio {{this}}"></div>
</div>
{{/each}}
</div>
{{/if}}

@ -0,0 +1,48 @@
// FocalPoint in percentage
RV-FocalPoint(focalX=50%, focalY=50%)
RV-CSSParameter({
focalX: focalX,
focalY: focalY
})
height 100%
width 100%
object-fit cover
object-position --focalX --focalY
RV-FocalPoint--upperHalf()
RV-CSSParameter({
focalY: 25%
})
RV-FocalPoint--lowerHalf()
RV-CSSParameter({
focalY: 75%
})
RV-FocalPoint--leftHalf()
RV-CSSParameter({
focalX: 25%
})
RV-FocalPoint--rightHalf()
RV-CSSParameter({
focalX: 75%
})
.RV-FocalPoint
RV-FocalPoint()
&--upperHalf
RV-FocalPoint--upperHalf()
&--lowerHalf
RV-FocalPoint--lowerHalf()
&--leftHalf
RV-FocalPoint--leftHalf()
&--rightHalf
RV-FocalPoint--rightHalf()

@ -0,0 +1,4 @@
{
"name": "focalPoint",
"title": "Focal Point"
}

@ -0,0 +1,22 @@
<div>
<div class="RV-AspectRatio RV-AspectRatio--4to3">
<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 16.66%" src="{{ path '/images/landscape.jpeg'}}"/>
</div>
</div>
<div class="RV-AspectRatio RV-AspectRatio--4to3">
<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 75%" src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
</div>
<div class="RV-AspectRatio RV-AspectRatio--4to3">
<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 47%" src="{{ path '/images/hasi01.png'}}"/>
</div>
<div class="RV-AspectRatio RV-AspectRatio--4to3">
<img class="RV-FocalPoint RV-FocalPoint--upperHalf" src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
</div>
<div class="RV-AspectRatio RV-AspectRatio--1to2">
<img class="RV-FocalPoint RV-FocalPoint--rightHalf" src="{{ path '/images/landscape.jpeg'}}"/>
</div>

@ -0,0 +1,34 @@
RV-Shape--square()
padding-top 100%
width 100%
position relative
*
position absolute
top 0
left 0
bottom 0
right 0
RV-Shape--circle()
padding-top 100%
width 100%
position relative
&, *
border-radius 50%
*
position absolute
top 0
left 0
bottom 0
right 0
.RV-Shape
&--square
RV-Shape--square()
&--circle
RV-Shape--circle()

@ -0,0 +1,17 @@
{
"name": "Shape",
"variants": [
{
"name": "Square",
"context": {
"modifier": "RV-Shape--square"
}
},
{
"name": "Circle",
"context": {
"modifier": "RV-Shape--circle"
}
}
]
}

@ -0,0 +1,3 @@
<div class="RV-Shape {{#if modifier}}{{modifier}}{{/if}}">
<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 75%" src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
</div>

@ -0,0 +1,62 @@
RV-Truncation--fade(background-color=white)
&:after
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
display block
content '###'
color transparent
opacity 1
position absolute
top calc(var(--height) - 60px)
width 100%
height 50px
line-height var(--line-height)
z-index 10
RV-Truncation--ellipsis(background-color=white)
&:after
position absolute
display block
right 0
content '...'
background-color background-color
padding-left 5px
padding-bottom 10px
box-shadow -10px 8px 6px 0px #fff;
line-height var(--line-height)
top calc(var(--height) - 40px)
RV-Truncation(line-height=1.3, height=350px)
RV-CSSParameter({
line-height: line-height,
height: height
})
background-color = white
display block
overflow hidden
position relative
height calc_height()
width calc_width()
*
overflow hidden
display block
position relative
text-overflow ellipsis
background-color background-color
line-height line-height
max-height floor(height / (line-height * 16)) * (line-height * 16)
padding 0
margin 0
.RV-Truncation
RV-Truncation()
&--fade
RV-Truncation--fade()
&--ellipsis
RV-Truncation--ellipsis()

@ -0,0 +1,17 @@
{
"name": "Truncation",
"variants": [
{
"name": "Fade",
"context": {
"modifier": "RV-Truncation--fade"
}
},
{
"name": "Ellipsis",
"context": {
"modifier": "RV-Truncation--ellipsis"
}
}
]
}

@ -0,0 +1,5 @@
<div class="RV-Truncation {{#if modifier}}{{modifier}}{{/if}}">
<p>
You could see there was text coming out of her eyes, text coming out of her wherever. . Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, theyre not sending the best. Theyre not sending you, theyre sending words that have lots of problems and theyre bringing those problems with us. Theyre bringing mistakes. Theyre bringing misspellings. Theyre typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.
</p>
</div>

@ -181,13 +181,13 @@ RV-Block__Modifier--name(name)
RV-Block(block_name)
& .{block_name}
{block}
foreach(_block.block_modifiers, @(modifier){
render_block_modifier(modifier)
})
foreach(_block.elements, @(element){
render_element(element)
})
foreach(_block.block_modifiers, @(modifier){
render_block_modifier(modifier)
})
{block}
reset_block()

@ -41,4 +41,4 @@ RV-CSSParameter(block)
for name, value in block
css-var-name = '--%s' % unquote(name)
add-property(css-var-name, value)
define(name, unquote('var(--%s)' % (unquote(name))), true)
define('--'+name, unquote('var(--%s)' % (unquote(name))), true)

@ -1,6 +1,12 @@
RV-Utils__ElementAmount(callback, up-to=20)
for i in (1..up-to)
RV-Utils__ElementAmount(amount, callback)
if amount == 1
&:only-child
callback(i, amount)
else
*:first-child:nth-last-child({i}),
*:first-child:nth-last-child({i})~*
callback(i, up-to)
callback(i, up-to)
RV-Utils__ElementAmount--range(from=1, to=20, callback)
for i in (from..to)
RV-Utils__ElementAmount(i, callback)

@ -1,7 +1,7 @@
@import 'dummy/_dummy'
@import 'contentCrop/_contentCrop'
@import 'fullWidthContent/_fullWidthContent'
@import 'flexRow/_flexRow'
@import 'flexGrid/_flexGrid'
@import 'fan/_fan'
@import 'alignment/_alignment'
@import 'dummy/_dummy'
@import 'alignment/_alignment'

@ -60,7 +60,7 @@ RV-ContentCrop--XtoY(x=1, y=1)
+RV-Block__Modifier--name('XtoY')
width 100%
padding-top 100% * (y / x)
padding-top 100% * (--y / --x)
position relative
.RV-Image *
@ -96,12 +96,13 @@ RV-ContentCrop__Text--fade(background-color=white)
&:after
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
display block
content ' '
opacity 0.8
content '###'
color transparent
opacity 1
position relative
top -25%
top -30px
width 100%
height 25%
height 30px
z-index 10
RV-ContentCrop__Text--ellipsis(background-color=white)

@ -1,4 +1,49 @@
+RV-Block('RV-Dummy')
background-color #F4A460
&:nth-child(2n)
background-color #6495ED
&:nth-child(3n)
background-color #90EE90
&--oranage
background-color #F4A460
&--blue
background-color #6495ED
&--green
background-color #90EE90
&--red
background-color #ce6d6d
&--yellow
background-color #eae144
+RV-Element('Landscape')
min-width 200px
width 100%
min-height 130px
+RV-Element('Portrait')
min-width 130px
width 100%
min-height 200px
+RV-Element('Square')
min-width 300px
width 100%
min-height 300px
+RV-Element__Modifier('large')
height 500px
width 500px
+RV-Element__Modifier('small')
height 100px
width 100px
+RV-Block__Modifier('square')
height 350px
width 350px
@ -10,6 +55,6 @@
+RV-Block__Modifier('landscape')
width 350px
height 150px
+RV-Block__Modifier('red')
background-color #d8583e

@ -19,7 +19,7 @@ RV-Fan--horizontal(base-height, base-width)
flex-direction row
+RV-Element('Surface')
min-width calc_width(base-width)
min-width calc_width('calc(%s * 1.5)' % base-width)
height calc_height(base-height)
/*
@ -35,6 +35,7 @@ RV-Fan--vertical(base-height, base-width)
+RV-Element('Surface')
width calc_width(base-width)
min-width initial
min-height base-height
@ -71,6 +72,7 @@ RV-Fan--fullWidth(base-height, base-width)
+RV-Element('Surface')
flex-grow 1
min-width calc_width('calc(%s * 1.5)' % base-width)
/* ###############
@ -94,14 +96,10 @@ RV-Fan__Surface--fixedWidth(width)
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()
min-width calc_width('calc(%s * 1.5)' % base-width)
flex-grow 20
flex-shrink 0
@ -113,7 +111,7 @@ RV-Fan__Surface(base-height, base-width)
RV-Fan()
display flex
position relative
min-width calc(2 * var(--base-width))
min-width min-content
/* #########
* CSS-Class
@ -128,23 +126,23 @@ RV-Fan()
RV-Fan()
+RV-Element()
RV-Fan__Surface(base-height, base-width)
RV-Fan__Surface(--base-height, --base-width)
+RV-Element__Modifier()
RV-Fan__Surface--fixedWidth(base-width)
RV-Fan__Surface--fixedWidth(--base-width)
+RV-Element__Modifier()
RV-Fan__Surface--fixedHeight(base-height)
RV-Fan__Surface--fixedHeight(--base-height)
+RV-Element()
RV-Fan__Base(base-height, base-width)
RV-Fan__Base(--base-height, --base-width)
+RV-Block__Modifier()
RV-Fan--fullWidth(base-height, base-width)
RV-Fan--fullWidth(--base-height, --base-width)
+RV-Block__Modifier()
RV-Fan--vertical(base-height, base-width)
RV-Fan--vertical(--base-height, --base-width)
+RV-Block__Modifier()
RV-Fan--horizontal(base-height, base-width)
RV-Fan--horizontal(--base-height, --base-width)
+RV-Block__Modifier()
RV-Fan--auto(base-height, base-width)
RV-Fan--auto(--base-height, --base-width)

@ -1,4 +1,12 @@
<div class="RV-Fan RV-Fan{{modifier}} RV-BoxShadow RV-BoxShadow--drop RV-Spacing__Outer--large">
<div class="RV-Fan RV-Fan{{modifier}} RV-BoxShadow">
<div class="RV-Fan__Base RV-Dummy"></div>
<div class="RV-Fan__Surface RV-Dummy"></div>
</div>
<br>
<br>
<br>
<br>
<div class="RV-Fan RV-Fan{{modifier}} RV-BoxShadow RV-BoxShadow--drop">
<div class="RV-Fan__Base RV-Spacing__Inner--small">
<div class="RV-ContentCrop">
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
@ -17,7 +25,4 @@
</p>
</div>
</div>
</div>
</div>

@ -20,6 +20,7 @@ RV-FlexGrid--masonry(item-height=300px,item-width=300px)
+RV-Element('Item')
display inline-block
width 100%
height unset
margin-bottom: var(--inner-spacing);
& > * {
@ -63,29 +64,28 @@ 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(item-height, item-width)
RV-FlexGrid(--item-height, --item-width)
+RV-Element()
RV-FlexGrid__Item(item-height, item-width)
RV-FlexGrid__Item(--item-height, --item-width)
+RV-Block__Modifier()
RV-FlexGrid--autoWidth(item-height, item-width)
RV-FlexGrid--autoWidth(--item-height, --item-width)
+RV-Block__Modifier()
RV-FlexGrid--fixedSize(item-height, item-width)
RV-FlexGrid--fixedSize(--item-height, --item-width)
+RV-Block__Modifier()
RV-FlexGrid--masonry(item-height,item-width)
RV-FlexGrid--masonry(--item-height, --item-width)
+RV-Block__Modifier()
RV-FlexGrid--verticalMasonry(item-height,item-width)
RV-FlexGrid--verticalMasonry(--item-height, --item-width)
+RV-Block__Modifier()
RV-FlexGrid--horizontalMasonry(item-height,item-width)
RV-FlexGrid--horizontalMasonry(--item-height, --item-width)

@ -1,3 +1,33 @@
<div class="RV-FlexGrid RV-FlexGrid{{modifier}}">
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Portrait"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Portrait"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Portrait"></div>
</div>
</div>
<div class="RV-FlexGrid RV-FlexGrid{{modifier}} RV-Spacing__Inner--medium">
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--{{item-shadow}} RV-Spacing__Inner--medium">
<div class="RV-ContentCrop">

@ -23,7 +23,7 @@ RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
RV-Reset()
gap 0px
RV-Utils__ElementAmount(@(index, total){
RV-Utils__ElementAmount--range(0, 20, @(index, total){
min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
}
)
@ -144,7 +144,7 @@ RV-FlexRow()
RV-FlexRow__Item--wider()
+RV-Element__Modifier()
RV-FlexRow__Item--fixedSize(width)
RV-FlexRow__Item--fixedSize(--width)
+RV-Element__Modifier()
RV-FlexRow__Item--narrower()
@ -168,7 +168,7 @@ RV-FlexRow()
RV-FlexRow--vertical()
+RV-Block__Modifier()
RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
+RV-Block__Modifier()
RV-FlexRow--auto()

@ -1 +1,32 @@
{}
{
"title": "FlexRow",
"context": {
"item-shadow" : "drop"
},
"variants": [
{
"name": "Horizontal",
"context": {
"modifier": "--horizontal"
}
},
{
"name": "Vertical",
"context": {
"modifier": "--vertical"
}
},
{
"name": "Breakpoint",
"context": {
"modifier": "--breakPoint"
}
},
{
"name": "Auto",
"context": {
"modifier": "--auto"
}
}
]
}

@ -1,38 +1,17 @@
<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>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--left"><span>wrapped content left</span></div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--fixedSize">Fixed</div>
</div>
<br></br>
<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 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>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">wide</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--wider">wider</div>
</div>
<br><br>
<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>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">.</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--content">content</div>
</div>
<br><br>
<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>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">blubbber</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--content">content</div>
<div class="RV-FlexRow RV-FlexRow{{modifier}}">
<div class="RV-FlexRow__Item RV-Dummy">
<div class="RV-Dummy__Square--small"></div>
</div>
<div class="RV-FlexRow__Item RV-FlexRow__Item--right RV-Dummy">
<div class="RV-Dummy__Square--small"></div>
</div>
<div class="RV-FlexRow__Item RV-FlexRow__Item--center RV-Dummy">
<div class="RV-Dummy__Square--small"></div>
</div>
<div class="RV-FlexRow__Item RV-FlexRow__Item--left RV-Dummy">
<div class="RV-Dummy__Square--small"></div>
</div>
<div class="RV-FlexRow__Item RV-FlexRow__Item--fixedSize RV-Dummy">
<div class="RV-Dummy__Square--small"></div>
</div>
</div>

@ -1,4 +1,4 @@
@import 'spacing/_spacing'
@import 'elementList/_elementList'
@import 'boxShadow/_boxShadow'
@import 'iconized/_iconized'

@ -93,19 +93,19 @@ RV-BoxShadow()
RV-BoxShadow()
+RV-Block__Modifier()
RV-BoxShadow--simple(color)
RV-BoxShadow--simple(--color)
+RV-Block__Modifier()
RV-BoxShadow--liftedCorners(color)
RV-BoxShadow--liftedCorners(--color)
+RV-Block__Modifier()
RV-BoxShadow--levitating(color)
RV-BoxShadow--levitating(--color)
+RV-Block__Modifier()
RV-BoxShadow--stacked(color)
RV-BoxShadow--stacked(--color)
+RV-Block__Modifier()
RV-BoxShadow--drop(color)
RV-BoxShadow--drop(--color)
+RV-Block__Modifier()
RV-BoxShadow--solid(color)
RV-BoxShadow--solid(--color)

@ -0,0 +1,15 @@
RV-ElementList__Item()
+RV-Element--name('Item')
RV-FlexRow__Item()
RV-ElementList(break_width=500px)
RV-FlexRow()
RV-Reset()
list-style-type none
+RV-Block('RV-ElementList')
RV-ElementList()
+RV-Element()
RV-ElementList__Item()

@ -1,5 +1,5 @@
RV-Spacing__Outer--small()
+RV-Element__Modifier('small')
+RV-Element__Modifier--name('small')
--outer-spacing spacing-small
margin var(--outer-spacing)
* > {
@ -7,7 +7,7 @@ RV-Spacing__Outer--small()
}
RV-Spacing__Outer--medium()
+RV-Element__Modifier('medium')
+RV-Element__Modifier--name('medium')
--outer-spacing spacing-medium
margin var(--outer-spacing)
* > {
@ -15,14 +15,14 @@ RV-Spacing__Outer--medium()
}
RV-Spacing__Outer--large()
+RV-Element__Modifier('large')
+RV-Element__Modifier--name('large')
--outer-spacing spacing-large
margin var(--outer-spacing)
* > {
--outer-spacing 0
}
RV-Spacing__Inner--small()
+RV-Element__Modifier('small')
+RV-Element__Modifier--name('small')
--inner-spacing spacing-small
padding var(--inner-spacing)
gap var(--inner-spacing)
@ -32,7 +32,7 @@ RV-Spacing__Inner--small()
}
RV-Spacing__Inner--medium()
+RV-Element__Modifier('medium')
+RV-Element__Modifier--name('medium')
--inner-spacing spacing-medium
padding var(--inner-spacing)
gap var(--inner-spacing)
@ -42,7 +42,7 @@ RV-Spacing__Inner--medium()
}
RV-Spacing__Inner--large()
+RV-Element__Modifier('large')
+RV-Element__Modifier--name('large')
--inner-spacing spacing-large
padding var(--inner-spacing)
gap var(--inner-spacing)
@ -53,11 +53,17 @@ RV-Spacing__Inner--large()
+RV-Block('RV-Spacing')
+RV-Element('Outer')
RV-Spacing__Outer--small()
RV-Spacing__Outer--medium()
RV-Spacing__Outer--large()
+RV-Element__Modifier()
RV-Spacing__Outer--small()
+RV-Element__Modifier()
RV-Spacing__Outer--medium()
+RV-Element__Modifier()
RV-Spacing__Outer--large()
+RV-Element('Inner')
RV-Spacing__Inner--small()
RV-Spacing__Inner--medium()
RV-Spacing__Inner--large()
+RV-Element__Modifier()
RV-Spacing__Inner--small()
+RV-Element__Modifier()
RV-Spacing__Inner--medium()
+RV-Element__Modifier()
RV-Spacing__Inner--large()

@ -0,0 +1 @@
@import 'button/_button'

@ -0,0 +1,191 @@
RV-Button--pill()
+RV-Block__Modifier--name('pill')
border-radius calc(var(--size) + var(--line-height) * 16px)
padding-left calc(1.5 * var(--size))
padding-right calc(1.5 * var(--size))
RV-Button--border(color)
+RV-Block__Modifier--name('border')
border 3px solid color
color color
border-radius 0px
&, *
background-color transparent
+RV-Element('Icon')
background-color secondary-color
RV-Button--small()
+RV-Block__Modifier--name('small')
--size spacing-small
+RV-Element('Icon')
.RV-Image
height calc(var(--size) * 1.8)
RV-Button--medium()
+RV-Block__Modifier--name('medium')
--size spacing-medium * .6
RV-Button--large()
+RV-Block__Modifier--name('large')
--size spacing-large * .5
RV-Button--link()
+RV-Block__Modifier--name('link')
border none
border-radius 0px
color primary-color
&, *
background-color transparent
margin 0
+RV-Element('Icon')
padding-right calc(var(--size) / 4)
padding-left calc(var(--size) / 4)
_RV-Button__Icon--shape()
margin-right calc(var(--size) * 1.2)
&, *
z-index 10
position relative
&:after, &:before
content ''
width 50%
height 110%
z-index 5
background-color inherit
position absolute
RV-Button__Icon--inwardsArrow()
+RV-Element__Modifier--name('inwardsArrow')
_RV-Button__Icon--shape()
.RV-Image
left calc(var(--size) * .5)
&:after
transform rotate(-35deg)
left 70%
top 25%
&:before
transform rotate(35deg)
left 70%
top -35%
RV-Button__Icon--outwardsArrow()
+RV-Element__Modifier--name('outwardsArrow')
_RV-Button__Icon--shape()
margin-right calc(var(--size) * 2)
.RV-Image
left calc(var(--size) * .7)
&:after
transform rotate(35deg)
left 70%
top 25%
&:before
transform rotate(-35deg)
left 70%
top -37%
RV-Button__Icon--forwardSlope()
_RV-Button__Icon--shape()
+RV-Element__Modifier--name('forwardSlope')
margin-right calc(var(--size) * 2)
.RV-Image
left calc(var(--size) * .7)
&:after
transform rotate(-15deg)
top 0%
RV-Button__Icon--backwardSlope()
_RV-Button__Icon--shape()
+RV-Element__Modifier--name('backwardSlope')
margin-right calc(var(--size) * 2)
.RV-Image
left calc(var(--size) * .7)
&:after
transform rotate(15deg)
top -10%
RV-Button__Icon()
+RV-Element--name('Icon')
width min-content
background-color primary-color
padding var(--size)
.RV-Image
height calc(var(--size) * 2.5)
RV-Button__Text()
+RV-Element--name('Text')
font-size calc(var(--size) * 1.65)
background-color secondary-color
padding var(--size)
RV-Button()
background-color #f00
line-height 1
overflow hidden
font-family sans-serif
background-color secondary-color
color accent-color
text-decoration none
RV-Alignment--verticalCenter()
display inline-flex
border-radius 6px
+RV-Block('RV-Button')
RV-CSSParameter({
size: spacing-medium
})
RV-Reset()
RV-Button(height)
+RV-Element()
RV-Button__Icon()
+RV-Element__Modifier()
RV-Button__Icon--outwardsArrow()
+RV-Element__Modifier()
RV-Button__Icon--inwardsArrow()
+RV-Element__Modifier()
RV-Button__Icon--forwardSlope()
+RV-Element__Modifier()
RV-Button__Icon--backwardSlope()
+RV-Element()
RV-Button__Text()
+RV-Block__Modifier()
RV-Button--pill()
+RV-Block__Modifier()
RV-Button--link()
+RV-Block__Modifier()
RV-Button--small()
+RV-Block__Modifier()
RV-Button--medium()
+RV-Block__Modifier()
RV-Button--large()
+RV-Block__Modifier()
RV-Button--border(primary-color)

@ -0,0 +1,39 @@
<button class="RV-Button RV-Button--large RV-Button--border">
<div class="RV-Button__Icon RV-Button__Icon--outwardsArrow">
<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>
</div>
<div class="RV-Button__Text">
Button Text
</div>
</button>
<br>
<br>
<br>
<button class="RV-Button RV-Button--medium RV-Button--link">
<div class="RV-Button__Icon RV-Button__Icon--forwardSlope">
<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>
</div>
<div class="RV-Button__Text">
Button Text
</div>
</button>
<br>
<br>
<br>
<button class="RV-Button RV-Button--small RV-Button">
<div class="RV-Button__Icon">
<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>
</div>
<div class="RV-Button__Text">
Button Text
</div>
</button>
<br>
<br>
<br>
<button class="RV-Button RV-Button--small RV-Button--border">
<div class="RV-Button__Text">
Button Text
</div>
</button>

@ -1,2 +1,3 @@
@import 'elementList/_elementList'
@import 'overlayButton/_overlayButton'
@import 'overlayButton/_overlayButton'
@import 'teaser/_teaser'
//@import 'pagination/_pagination'

@ -1,15 +0,0 @@
RV-ElementList__Item()
@include RV-FlexRow__Item
RV-ElementList(break_width=500px, prefix='&')
RV-FlexRow__Container()
RV-FlexRow__Container--shorthands()
RV-Reset()
list-style-type none
{prefix}__Item
RV-ElementList__Item()
.RV-ElementList
RV-ElementList()

@ -0,0 +1,15 @@
RV-Pagination__Item()
+RV-Element--name('Item')
RV-ElementList__Item()
+RV-Block('RV-Pagination')
max-width 600px
RV-ElementList()
RV-FlexRow--horizontal()
justify-content space-between
overflow hidden
height 2em
+RV-Element('Item')
RV-Pagination__Item()

@ -0,0 +1,77 @@
<ul class="RV-Pagination">
<li class="RV-Pagination__Item RV-Pagination__Item--other RV-Pagination__Item--first">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Icon">
</div>
<div class="RV-Button__Text">
First
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--other RV-Pagination__Item--disabled RV-Pagination__Item--previous">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Icon">
</div>
<div class="RV-Button__Text">
Prev
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
1
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
2
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
3
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
4
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
5
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--other RV-Pagination__Item--next">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
Next
</div>
<div class="RV-Button__Icon">
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--other RV-Pagination__Item--last">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
Last
</div>
<div class="RV-Button__Icon">
</div>
</a>
</li>
</ul>

@ -0,0 +1,47 @@
+RV-Block('RV-Teaser')
RV-CSSParameter({
image-height: 300px,
image-width: 300px,
shadow-color: #6b5690
})
RV-Fan()
RV-BoxShadow()
RV-BoxShadow--drop(--shadow-color)
+RV-Element('Image')
RV-Fan__Base(--image-height, --image-width)
+RV-Element('Preview')
RV-Fan__Surface(--image-height, --image-width)
RV-Spacing__Inner--medium()
RV-FlexRow()
RV-FlexRow--vertical()
+RV-Element('Text')
color text-color
flex 1
RV-ContentCrop()
RV-ContentCrop__Text()
RV-ContentCrop__Text--fade()
.RV-Text
height 100%
+RV-Element('Headline')
font-family sans-serif
color primary-color
justify-self center
+RV-Element('Buttons')
RV-FlexRow__Item()
RV-FlexRow__Item--content()
RV-Spacing__Inner--small()
RV-FlexRow()
RV-FlexRow--horizontal()
padding 0