Heres
some
totally (right)
diff --git a/components/02_Styles/spacing/_spacing.scss b/components/02_Styles/spacing/_spacing.scss
index 9a28cbb..96eb270 100644
--- a/components/02_Styles/spacing/_spacing.scss
+++ b/components/02_Styles/spacing/_spacing.scss
@@ -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;
}
}
}
diff --git a/components/05_Components/menu/_menu.scss b/components/05_Components/menu/_menu.scss
index b6c4cd0..1bf5ca8 100644
--- a/components/05_Components/menu/_menu.scss
+++ b/components/05_Components/menu/_menu.scss
@@ -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;
diff --git a/components/05_Components/menu/menu.hbs b/components/05_Components/menu/menu.hbs
index 0082ec7..cd12337 100644
--- a/components/05_Components/menu/menu.hbs
+++ b/components/05_Components/menu/menu.hbs
@@ -20,7 +20,7 @@
-