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

POC

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
Show Stats 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>

3
public/pink.css Normal file
View File

@ -0,0 +1,3 @@
.pink {
background-color: #ffc0cb;
}

1
public/playground.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["../components/playground.styl"],"names":[],"mappings":"AAqBA;;;;;;;;;;;;;AA8BA;EAZI,SAAS,IAAT;EACA,kBAAkB,QAAlB;EACA,QAAQ,eAAR;EACA,SAAS,OAAT;;AAaJ;EARC,SAAS,OAAT;EACG,OAAO,IAAP;;AAWJ;EApBI,SAAS,IAAT;EACA,kBAAkB,QAAlB;EACA,QAAQ,eAAR;EACA,SAAS,OAAT;EAKH,SAAS,OAAT;EACG,OAAO,IAAP;;AATA,SAAS,IAAT;AACA,kBAAkB,QAAlB;AACA,QAAQ,eAAR;AACA,SAAS,OAAT","file":"playground.css"}

1976
public/rcss.css
View File

File diff suppressed because it is too large Load Diff

1
public/rcss.css.map Normal file
View File

File diff suppressed because one or more lines are too long