unigrid.css 0.3.0

package/src/scss/_navbar.scss

@@ -0,0 +1,341 @@
+// ==========================================================================
+// Unigrid CSS Framework — Navbar (BEM)
+//
+// Block: .ug-navbar
+// Elements: __inner, __brand, __toggle, __menu, __item, __link, __divider
+// Modifiers: --dark, --fixed, --transparent
+//            __toggle--hamburger (icon variant)
+//            __menu--open (JS-toggled)
+// ==========================================================================
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-navbar {
+  width: 100%;
+  background-color: $ug-white;
+  border-bottom: 1px solid $ug-light-gray;
+  position: relative;
+  z-index: 50;
+
+  // -- Inner container --
+  &__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 var(--ug-leading);
+    height: calc(var(--ug-leading) * 2 - 1px);
+  }
+
+  // -- Brand --
+  &__brand {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--ug-leading) * 0.5);
+    @include ug-font-size("sm");
+    @include ug-font-weight("bold");
+    text-decoration: none;
+    color: inherit;
+    flex-shrink: 0;
+  }
+
+  // -- Toggle Button (mobile only) --
+  // Default: outline button with "Menu" / "Close" text
+  &__toggle {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    background: none;
+    border: 1px solid currentColor;
+    padding: 0 calc(var(--ug-leading) * 0.75);
+    height: calc(var(--ug-leading) * 1.5);
+    margin-top: calc(var(--ug-leading) * 0.5);
+    color: inherit;
+    @include ug-font-size("sm");
+    @include ug-font-weight("bold");
+    letter-spacing: 0.05em;
+    font-family: inherit;
+    transition: background-color 0.15s, color 0.15s;
+    z-index: $ug-navbar-toggle-z-index;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    // "Close" text hidden by default, shown when menu is open
+    &__close {
+      display: none;
+    }
+
+    &__label {
+      display: inline;
+    }
+
+    @include ug-breakpoint-down("md") {
+      display: inline-flex;
+    }
+  }
+
+  // When menu is open, swap text
+  &__toggle--active {
+    .ug-navbar__toggle__label {
+      display: none;
+    }
+    .ug-navbar__toggle__close {
+      display: inline;
+    }
+  }
+
+  // -- Hamburger variant --
+  // Use: .ug-navbar__toggle.ug-navbar__toggle--hamburger
+  &__toggle--hamburger {
+    border: 1px solid currentColor;
+    padding: 0;
+    margin-top: calc(var(--ug-leading) * 0.5);
+    margin-right: 0;
+    flex-direction: column;
+    gap: 0;
+    width: calc(var(--ug-leading) * 1.5);
+    height: calc(var(--ug-leading) * 1.5);
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    span {
+      display: block;
+      width: 1.125rem;
+      height: 2px;
+      background-color: currentColor;
+      transition: transform 0.3s, opacity 0.3s;
+
+      &:nth-child(2) {
+        margin-top: 5px;
+      }
+
+      &:nth-child(3) {
+        margin-top: 5px;
+      }
+    }
+
+    // X transformation when active
+    &.ug-navbar__toggle--active {
+      span:nth-child(1) {
+        transform: translateY(7px) rotate(45deg);
+      }
+
+      span:nth-child(2) {
+        opacity: 0;
+      }
+
+      span:nth-child(3) {
+        transform: translateY(-7px) rotate(-45deg);
+      }
+    }
+  }
+
+  // -- Menu --
+  &__menu {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    // Mobile: full-screen overlay below navbar
+    @include ug-breakpoint-down("md") {
+      display: none;
+      flex-direction: column;
+      align-items: stretch;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: $ug-black;
+      color: $ug-white;
+      padding: calc(var(--ug-leading) * 4) 0 var(--ug-leading) 0;
+      overflow-y: auto;
+      z-index: 99;
+
+      &--open {
+        display: flex;
+      }
+    }
+  }
+
+  // -- Menu Item --
+  &__item {
+    display: flex;
+    align-items: center;
+  }
+
+  // -- Link --
+  &__link {
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 calc(var(--ug-leading) * 0.5);
+    @include ug-font-size("base");
+    @include ug-font-weight("light");
+    color: $ug-dark-gray;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: color 0.15s, background-color 0.15s;
+
+    &:hover {
+      color: $ug-black;
+      background-color: $ug-warm-gray;
+    }
+
+    &--active {
+      color: $ug-black;
+    }
+
+    @include ug-breakpoint-down("md") {
+      display: flex;
+      align-items: center;
+      height: calc(var(--ug-leading) * 2);
+      padding: 0 calc(var(--ug-leading) * 1.5);
+      @include ug-font-size("lg");
+      color: rgba(255, 255, 255, 0.7);
+
+      &:hover {
+        color: $ug-white;
+        background-color: rgba(255, 255, 255, 0.05);
+      }
+
+      &--active {
+        color: $ug-white;
+      }
+    }
+  }
+
+  // -- Divider --
+  &__divider {
+    width: 1px;
+    height: var(--ug-leading);
+    background-color: $ug-light-gray;
+    margin: 0 calc(var(--ug-leading) * 0.25);
+
+    @include ug-breakpoint-down("md") {
+      width: auto;
+      height: 1px;
+      margin: calc(var(--ug-leading) * 0.25) calc(var(--ug-leading) * 1.5);
+      background-color: rgba(255, 255, 255, 0.15);
+    }
+  }
+
+  // -- Dropdown: flat in mobile menu --
+  @include ug-breakpoint-down("md") {
+    .ug-dropdown {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    // Always show dropdown menu items inline (no popup)
+    .ug-dropdown__menu {
+      position: static;
+      display: flex;
+      flex-direction: column;
+      background: none;
+      border: none;
+      box-shadow: none;
+      padding: 0;
+      min-width: 0;
+    }
+
+    // Indent dropdown links
+    .ug-dropdown__link {
+      display: flex;
+      align-items: center;
+      height: calc(var(--ug-leading) * 2);
+      padding: 0 calc(var(--ug-leading) * 2.5);
+      @include ug-font-size("base");
+      color: rgba(255, 255, 255, 0.5);
+      text-decoration: none;
+
+      &:hover {
+        color: $ug-white;
+        background-color: rgba(255, 255, 255, 0.05);
+      }
+    }
+
+    // Hide caret in mobile
+    .ug-dropdown__caret {
+      display: none;
+    }
+
+    // Hide dropdown dividers/headers or style them flat
+    .ug-dropdown__divider {
+      height: 1px;
+      background-color: rgba(255, 255, 255, 0.1);
+      margin: calc(var(--ug-leading) * 0.25) calc(var(--ug-leading) * 2.5);
+    }
+
+    .ug-dropdown__header {
+      padding: 0 calc(var(--ug-leading) * 2.5);
+      color: rgba(255, 255, 255, 0.3);
+    }
+  }
+
+  // ==============================
+  // Modifiers
+  // ==============================
+
+  // -- Dark --
+  &--dark {
+    background-color: $ug-black;
+    border-bottom-color: rgba(255, 255, 255, 0.1);
+
+    .ug-navbar__link {
+      color: rgba(255, 255, 255, 0.7);
+      &:hover { color: $ug-white; background-color: rgba(255, 255, 255, 0.1); }
+      &--active { color: $ug-white; }
+    }
+
+    .ug-navbar__brand { color: $ug-white; }
+    .ug-navbar__toggle { color: $ug-white; }
+    .ug-navbar__divider { background-color: rgba(255, 255, 255, 0.15); }
+
+    .ug-navbar__menu {
+      @include ug-breakpoint-down("md") {
+        background-color: $ug-black;
+        border-bottom-color: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
+
+  // -- Fixed --
+  &--fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
+  // -- Transparent --
+  &--transparent {
+    background-color: transparent;
+    border-bottom-color: transparent;
+
+    .ug-navbar__link {
+      color: rgba(255, 255, 255, 0.8);
+      &:hover { color: $ug-white; background-color: rgba(255, 255, 255, 0.1); }
+      &--active { color: $ug-white; }
+    }
+
+    .ug-navbar__brand { color: $ug-white; }
+    .ug-navbar__toggle { color: $ug-white; }
+
+    .ug-navbar__menu {
+      @include ug-breakpoint-down("md") {
+        background-color: $ug-black;
+      }
+    }
+  }
+}

package/src/scss/_pagination.scss

@@ -0,0 +1,160 @@
+// ==========================================================================
+// Unigrid CSS Framework — Pagination (BEM)
+//
+// Inspired by GOV.UK Design System pagination.
+// Two variants: block-level (prev/next with labels) and numbered list.
+//
+// Block: .ug-pagination
+// Elements: __prev, __next, __label, __title, __list, __item, __link,
+//           __ellipsis, __arrow
+// Modifiers: --block
+//            __item--current, __item--ellipsis
+// ==========================================================================
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  @include ug-rhythm-margin-top(1);
+  @include ug-rhythm-margin-bottom(1);
+
+  // ==============================
+  // Numbered Pagination
+  // ==============================
+
+  &__list {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__item {
+    display: flex;
+  }
+
+  &__link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: calc(var(--ug-leading) * 1.5);
+    height: calc(var(--ug-leading) * 1.5);
+    padding: 0 calc(var(--ug-leading) * 0.25);
+    @include ug-font-size("base");
+    @include ug-font-weight("regular");
+    color: $ug-black;
+    text-decoration: none;
+    border-bottom: 2px solid transparent;
+    transition: border-color 0.15s, color 0.15s;
+
+    &:hover {
+      border-bottom-color: $ug-black;
+    }
+  }
+
+  // Current page
+  &__item--current &__link {
+    @include ug-font-weight("bold");
+    border-bottom-color: $ug-black;
+  }
+
+  // Ellipsis
+  &__ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: calc(var(--ug-leading) * 1.5);
+    height: calc(var(--ug-leading) * 1.5);
+    @include ug-font-size("base");
+    color: $ug-medium-gray;
+  }
+
+  // Arrow icons (prev/next in numbered mode)
+  &__arrow {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: calc(var(--ug-leading) * 1.5);
+    height: calc(var(--ug-leading) * 1.5);
+    @include ug-font-size("base");
+    color: $ug-black;
+    text-decoration: none;
+    transition: color 0.15s;
+
+    &:hover {
+      color: $ug-medium-gray;
+    }
+
+    // Disabled arrow
+    &--disabled {
+      color: $ug-light-gray;
+      pointer-events: none;
+    }
+
+    // SVG/icon inside
+    svg {
+      width: 0.75em;
+      height: 0.75em;
+    }
+  }
+
+  // ==============================
+  // Block Pagination (prev/next)
+  // ==============================
+
+  &--block {
+    flex-direction: column;
+    gap: var(--ug-leading);
+    align-items: stretch;
+
+    @include ug-breakpoint("md") {
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+
+  &__prev,
+  &__next {
+    display: flex;
+    flex-direction: column;
+    padding: var(--ug-leading);
+    text-decoration: none;
+    color: $ug-black;
+    border: 1px solid $ug-light-gray;
+    transition: border-color 0.15s, background-color 0.15s;
+    flex: 1;
+
+    &:hover {
+      border-color: $ug-black;
+      background-color: $ug-warm-gray;
+    }
+  }
+
+  &__next {
+    text-align: right;
+    align-items: flex-end;
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--ug-leading) * 0.25);
+    @include ug-font-size("sm");
+    @include ug-rhythm-line-height(1);
+    @include ug-font-weight("regular");
+    color: $ug-medium-gray;
+    @include ug-rhythm-margin-bottom(0.5);
+  }
+
+  &__title {
+    @include ug-font-size("lg");
+    @include ug-rhythm-line-height(1);
+    @include ug-font-weight("bold");
+  }
+}