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
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="red RV-FlexGrid__Item">Heres</div>
<div class="green RV-FlexGrid__Item">some</div> <div class="green RV-FlexGrid__Item">some</div>
<div class="red RV-FlexGrid__Item">totally</div> <div class="red RV-FlexGrid__Item">totally</div>
@ -15,7 +15,24 @@
<br><br> <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="red RV-FlexGrid__Item">Heres</div>
<div class="green RV-FlexGrid__Item">some</div> <div class="green RV-FlexGrid__Item">some</div>
<div class="red RV-FlexGrid__Item RV-FlexGrid__Item--right">totally (right)</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 { @mixin RV-Spacing__Outer--small {
margin: $-spacing-small; margin: $-spacing-small;
} }
@ -10,30 +12,60 @@
margin: $-spacing-large; margin: $-spacing-large;
} }
@mixin _flexrow_breakpoint_min_width($-gap) {
@mixin RV-Spacing__Inner--small($-container-suffix: '__Container') { @include RV-Utils__Hook--catch {
padding: $-spacing-small; $-breakpoint: get-hook-value('breakPoint');
&#{$-container-suffix} {
gap: $-spacing-small; @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; 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; 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 { @mixin RV-Spacing {
&__Outer{ &__Outer {
&--small { &--small {
@include RV-Spacing__Outer--small; @include RV-Spacing__Outer--small;
} }
@ -47,17 +79,17 @@
} }
} }
&__Inner{ &__Inner {
&--small { &--small {
@include RV-Spacing__Inner--small(''); @include RV-Spacing__Inner--small;
} }
&--medium { &--medium {
@include RV-Spacing__Inner--medium(''); @include RV-Spacing__Inner--medium;
} }
&--large { &--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 { &--horizontal &__List {
@include RV-FlexRow__Container--horizontal; @include RV-FlexRow__Container--horizontal;
@include RV-FlexRow__Container--breakPoint; @include RV-FlexRow__Container--breakPoint(400px);
}
&--spaced &__List {
gap: $-spacing-medium;
} }
&__List { &__List {
@include RV-FlexRow__Container($-prefix: '.RV-Menu'); @include RV-FlexRow__Container($-prefix: '.RV-Menu');
@include RV-ElementList; @include RV-ElementList;
padding: $-spacing-small;
} }
&__Item { &__Item {
@include RV-FlexRow__Item; @include RV-FlexRow__Item;
@include RV-FlexRow__Item--shorthands; @include RV-FlexRow__Item--shorthands;
width: 100px;
.RV-Link { .RV-Link {
padding: $-spacing-small; padding: $-spacing-small;

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

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