feat: add the top offset mixin and CSS variable (#67)

hbstack · Aug 25, 2023 · 45337f1 · 45337f1
1 parent a0b6dad
commit 45337f1
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 0 deletions.
diff --git a/assets/hb/scss/_mixins.scss b/assets/hb/scss/_mixins.scss
@@ -0,0 +1,7 @@
+@mixin top-offset($position:"") {
+  @if $position != "" {
+    position: $position;
+  }
+
+  top: var(--#{$prefix}top-offset);
+}
diff --git a/assets/hb/scss/_root.scss b/assets/hb/scss/_root.scss
@@ -0,0 +1,3 @@
+:root {
+  --#{$prefix}top-offset: 0;
+}
diff --git a/assets/hb/scss/_utilities.scss b/assets/hb/scss/_utilities.scss
@@ -0,0 +1,3 @@
+.hb-top-offset {
+  top: var(--#{$prefix}top-offset);
+}
diff --git a/assets/hb/scss/index.tmpl.scss b/assets/hb/scss/index.tmpl.scss
@@ -14,10 +14,12 @@
 @import "../../scss/bootstrap/variables-dark";
 
 @import "../../scss/bootstrap/maps";
+@import "mixins";
 @import "../../scss/bootstrap/mixins";
 @import "../../scss/bootstrap/utilities";
 
 // Layout & components
+@import "root";
 @import "../../scss/bootstrap/root";
 @import "../../scss/bootstrap/reboot";
 @import "../../scss/bootstrap/type";
@@ -55,6 +57,7 @@
 
 // Utilities
 @import "../../scss/bootstrap/utilities/api";
+@import "utilities";
 
 // Modules
 {{- range resources.Match "hb/modules/*/scss/index.scss" }}