@clusterenvision/ui-scss 1.94.3

package/src/layout/_header.scss

@@ -0,0 +1,41 @@
+// layout/_header.scss
+
+@use "../abstracts/functions" as fn;
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: fn.color(primary);
+  color: fn.color(white);
+  padding: fn.space(sm) fn.space(lg);
+  height: 60px;
+  position: sticky;
+  top: 0;
+  z-index: fn.z(sticky);
+
+  .header__logo {
+    font-weight: bold;
+    font-size: 1.25rem;
+  }
+
+  .header__nav {
+    display: flex;
+    gap: fn.space(md);
+
+    a {
+      color: fn.color(white);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    height: auto;
+    gap: fn.space(sm);
+  }
+}

package/src/layout/_section.scss

@@ -0,0 +1,26 @@
+// layout/_section.scss
+
+@use "../abstracts/functions" as fn;
+
+.section {
+  padding: fn.space(xl) 0;
+
+  &--light {
+    background-color: fn.color(light);
+  }
+
+  &--dark {
+    background-color: fn.color(dark);
+    color: fn.color(white);
+  }
+
+  &--primary {
+    background-color: fn.color(primary);
+    color: fn.color(white);
+  }
+
+  &--bordered {
+    border-top: 1px solid fn.color(muted);
+    border-bottom: 1px solid fn.color(muted);
+  }
+}

package/src/layout/_sidebar.scss

@@ -0,0 +1,39 @@
+// layout/_sidebar.scss
+
+@use "../abstracts/functions" as fn;
+
+.sidebar {
+  width: 260px;
+  background-color: fn.color(dark);
+  color: fn.color(white);
+  height: 100vh;
+  padding: fn.space(lg) fn.space(md);
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+
+  .sidebar__brand {
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin-bottom: fn.space(xl);
+  }
+
+  .sidebar__nav {
+    display: flex;
+    flex-direction: column;
+    gap: fn.space(sm);
+
+    a {
+      color: fn.color(white);
+      text-decoration: none;
+      padding: fn.space(xs) fn.space(sm);
+      border-radius: fn.radius(sm);
+
+      &:hover,
+      &.active {
+        background-color: fn.color(primary);
+      }
+    }
+  }
+}

package/src/layout/_stack.scss

@@ -0,0 +1,23 @@
+// layout/_stack.scss
+
+@use "../abstracts/functions" as fn;
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: fn.space(md);
+
+  &--sm { gap: fn.space(sm); }
+  &--lg { gap: fn.space(lg); }
+  &--xl { gap: fn.space(xl); }
+
+  &--horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  &--centered {
+    align-items: center;
+    justify-content: center;
+  }
+}