Converting the rest to stylus

This commit is contained in:
2021-01-03 15:33:36 +01:00
parent 35a11bab6e
commit 80bed0b6c7
20 changed files with 609 additions and 194 deletions

View File

@@ -1 +0,0 @@
@import 'menu/menu';

View File

@@ -0,0 +1,2 @@
@import 'menu/_menu'
@import 'imageGrid/_imageGrid'

View File

@@ -0,0 +1,13 @@
RV-ImageGrid()
RV-FlexGrid()
&__Container
RV-Spacing__Inner--small()
RV-FlexGrid__Container--autoWidth()
&__Item
RV-ContentCrop()
RV-ContentCrop--center()
.RV-ImageGrid
RV-ImageGrid()

View File

@@ -0,0 +1 @@
{}

View File

@@ -0,0 +1,8 @@
<div class="RV-ImageGrid">
<ul class="RV-ImageGrid__Container">
<li class="RV-ImageGrid__Item"><img src="{{path '/images/hasi01.png'}}" alt=""></li>
<li class="RV-ImageGrid__Item"><img src="{{path '/images/hasi02.jpeg'}}" alt=""></li>
<li class="RV-ImageGrid__Item"><img src="{{path '/images/hasi03.jpeg'}}" alt=""></li>
<li class="RV-ImageGrid__Item RV-ImageGrid__Item"><img src="{{path '/images/hasi04.png'}}" alt=""></li>
</ul>
</div>

View File

@@ -1,35 +0,0 @@
@mixin RV-Menu {
&--vertical &__List {
@include RV-FlexRow__Container--vertical;
width: 100%;
}
&--horizontal &__List {
@include RV-FlexRow__Container--horizontal;
@include RV-FlexRow__Container--breakPoint(400px);
}
&__List {
@include RV-FlexRow__Container($-prefix: '.RV-Menu');
@include RV-ElementList;
}
&__Item {
@include RV-FlexRow__Item;
@include RV-FlexRow__Item--shorthands;
width: 100px;
.RV-Link {
padding: $-spacing-small;
background-color: beige;
display: block;
white-space: nowrap;
}
}
}
.RV-Menu {
@include RV-Menu;
}

View File

@@ -0,0 +1,26 @@
RV-Menu()
&--vertical &__List
RV-FlexRow__Container--vertical()
width 100%
&--horizontal &__List
RV-FlexRow__Container--horizontal()
RV-FlexRow__Container--breakPoint(400px)
&__List
RV-FlexRow__Container(prefix='.RV-Menu')
RV-ElementList()
&__Item
RV-FlexRow__Item()
RV-FlexRow__Item--shorthands()
width 100px
.RV-Link
padding spacing-small
background-color beige
display block
white-space nowrap
.RV-Menu
RV-Menu()