reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

POC

Browse Source
This commit is contained in:
reverend
2021-01-02 20:31:02 +01:00
parent 169e430a4b
commit 3f3874427c
8 changed files with 1191 additions and 891 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/01_Layouts/flexGrid/flexGrid.hbs
View File

@@ -1,4 +1,4 @@
<div class="RV-FlexGrid__Container">
<div class="RV-FlexGrid__Container RV-FlexGrid__Container--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,24 @@
<br><br>
<div class="RV-FlexGrid__Container RV-FlexGrid__Container--sameHeight">
<div class="RV-FlexGrid__Container RV-FlexGrid__Container--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>
<div class="green RV-FlexGrid__Item">awesome</div>
<div class="red RV-FlexGrid__Item">content</div>
<div class="green RV-FlexGrid__Item">for</div>
<div class="red RV-FlexGrid__Item">you</div>
<div class="green RV-FlexGrid__Item">only</div>
<div class="red RV-FlexGrid__Item">for</div>
<div class="green RV-FlexGrid__Item">you</div>
<div class="red RV-FlexGrid__Item">to</div>
<div class="green RV-FlexGrid__Item">enjoy</div>
</div>
<br><br>
<div class="RV-FlexGrid__Container RV-FlexGrid__Container--masonry RV-Spacing__Inner--small">
<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>

68
components/02_Styles/spacing/_spacing.scss
View File

@@ -1,3 +1,5 @@
@use "sass:meta";
@mixin RV-Spacing__Outer--small {
margin: $-spacing-small;
}
@@ -10,30 +12,60 @@
margin: $-spacing-large;
}
@mixin _flexrow_breakpoint_min_width($-gap) {
@mixin RV-Spacing__Inner--small($-container-suffix: '__Container') {
padding: $-spacing-small;
&#{$-container-suffix} {
gap: $-spacing-small;
}
@include RV-Utils__Hook--catch {
$-breakpoint: get-hook-value('breakPoint');
@include RV-Utils__ElementAmount using($-index) {
min-width: calc((#{$-breakpoint} - (#{$-gap} * (#{$-index} - 1))) / #{$-index} - (2 * #{$-gap}));
* {
min-width: initial;
}
}
}
}
@mixin RV-Spacing__Inner--medium($-container-suffix: '__Container') {
@mixin _flexgrid_masonry_column_gap($-gap) {
@include RV-Utils__Hook--catch {
* {
margin: $-gap/2 0;
}
}
}
@mixin RV-Spacing__Inner--small() {
padding: $-spacing-small;
gap: $-spacing-small;
column-gap: $-spacing-small;
@include _flexrow_breakpoint_min_width($-spacing-small);
@include _flexgrid_masonry_column_gap($-spacing-small);
}
@mixin RV-Spacing__Inner--medium() {
padding: $-spacing-medium;
&#{$-container-suffix} {
gap: $-spacing-medium;
}
gap: $-spacing-medium;
column-gap: $-spacing-medium;
@include _flexrow_breakpoint_min_width($-spacing-medium);
@include _flexgrid_masonry_column_gap($-spacing-medium);
}
@mixin RV-Spacing__Inner--large($-container-suffix: '__Container') {
@mixin RV-Spacing__Inner--large() {
padding: $-spacing-large;
&#{$-container-suffix} {
gap: $-spacing-large;
}
gap: $-spacing-large;
column-gap: $-spacing-large;
@include _flexrow_breakpoint_min_width($-spacing-large);
@include _flexgrid_masonry_column_gap($-spacing-medium);
}
@mixin RV-Spacing {
&__Outer{
&__Outer {
&--small {
@include RV-Spacing__Outer--small;
}
@@ -47,17 +79,17 @@
}
}
&__Inner{
&__Inner {
&--small {
@include RV-Spacing__Inner--small('');
@include RV-Spacing__Inner--small;
}
&--medium {
@include RV-Spacing__Inner--medium('');
@include RV-Spacing__Inner--medium;
}
&--large {
@include RV-Spacing__Inner--large('');
@include RV-Spacing__Inner--large;
}
}
}

8
components/05_Components/menu/_menu.scss
View File

@@ -7,22 +7,18 @@
&--horizontal &__List {
@include RV-FlexRow__Container--horizontal;
@include RV-FlexRow__Container--breakPoint;
}
&--spaced &__List {
gap: $-spacing-medium;
@include RV-FlexRow__Container--breakPoint(400px);
}
&__List {
@include RV-FlexRow__Container($-prefix: '.RV-Menu');
@include RV-ElementList;
padding: $-spacing-small;
}
&__Item {
@include RV-FlexRow__Item;
@include RV-FlexRow__Item--shorthands;
width: 100px;
.RV-Link {
padding: $-spacing-small;

4
components/05_Components/menu/menu.hbs
View File

@@ -20,7 +20,7 @@
<br><br>
<div class="RV-Menu RV-Menu--horizontal RV-Menu--spaced">
<div class="RV-Menu RV-Menu--horizontal RV-Spacing__Inner--small">
<ul class="RV-Menu__List">
<li class="RV-Menu__Item"><a href="#" class="RV-Link">Home</a></li>
<li class="RV-Menu__Item"><a href="#" class="RV-Link">Projects</a></li>
@@ -31,7 +31,7 @@
<br><br>
<div class="RV-Menu RV-Menu--vertical RV-Menu--spaced">
<div class="RV-Menu RV-Menu--vertical">
<ul class="RV-Menu__List">
<li class="RV-Menu__Item"><a href="#" class="RV-Link">Home</a></li>
<li class="RV-Menu__Item"><a href="#" class="RV-Link">Projects</a></li>