Re-implemented design via iro-design

1 files changed, 19 insertions, 12 deletions

diff --git a/assets/css/components/_hnav.scss b/assets/css/components/_hnav.scss
index 220afde..4097373 100644
--- a/assets/css/components/_hnav.scss
+++ b/assets/css/components/_hnav.scss
@@ -1,22 +1,29 @@
-@include namespace('hnav') {
-    @include store((
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+
+@include iro.props-namespace('hnav') {
+    @include iro.props-store((
         --colors: (
-            --border: prop(--colors --obj-hi, $global: true)
-        ),
+            --border: fn.global-color(--obj-hi)
+        )
+    ), 'colors');
+
+    @include iro.props-store((
         --dims: (
-            --gap:   2em,
-            --pad-y: .5em
+            --margin-top: fn.global-dim(--size --600),
+            --gap:        2em,
+            --pad-y:      .5em
         )
-    ));
+    ), 'dims');
 
-    @include component(namespace()) {
+    @include iro.bem-component(iro.props-namespace()) {
         display:      flex;
-        gap:          prop(--dims --gap);
+        gap:          fn.dim(--gap);
         align-items:  baseline;
-        margin-top:   $line-height * 2rem;
-        padding:      prop(--dims --pad-y) 0 0;
+        margin-top:   fn.dim(--margin-top);
+        padding:      fn.dim(--pad-y) 0 0;
         border-width: 1px 0 0;
         border-style: solid;
-        border-color: prop(--colors --border);
+        border-color: fn.color(--border);
     }
 }