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

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;
}
}
}