unigrid.css 0.3.0 → 0.3.2

package/src/scss/_container.scss

@@ -1,54 +1,54 @@
-// ==========================================================================
-// Unigrid CSS Framework — Container (BEM)
-//
-// Padding aligned to leading for vertical rhythm consistency.
-//
-// Block: .ug-container
-// Modifiers: --narrow, --wide, --fluid, --flush
-// ==========================================================================
-
-
-@use "variables" as *;
-@use "mixins" as *;
-
-.ug-container {
-  width: 100%;
-  padding-left: calc(var(--ug-leading) * 1.5);
-  padding-right: calc(var(--ug-leading) * 1.5);
-
-  // -- Centered, max-width container --
-  &--narrow {
-    max-width: $ug-container-max-width;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  // -- Wider max-width --
-  &--wide {
-    max-width: 1600px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  // -- No max-width, no padding (true full-bleed) --
-  &--fluid {
-    max-width: none;
-  }
-
-  // -- No padding (for edge-to-edge content) --
-  &--flush {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  // -- Responsive padding --
-  @include ug-breakpoint-down("md") {
-    padding-left: var(--ug-leading);
-    padding-right: var(--ug-leading);
-
-    &--flush {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
+// ==========================================================================
+// Unigrid CSS Framework — Container (BEM)
+//
+// Padding aligned to leading for vertical rhythm consistency.
+//
+// Block: .ug-container
+// Modifiers: --narrow, --wide, --fluid, --flush
+// ==========================================================================
+
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-container {
+  width: 100%;
+  padding-left: calc(var(--ug-leading) * 1.5);
+  padding-right: calc(var(--ug-leading) * 1.5);
+
+  // -- Centered, max-width container --
+  &--narrow {
+    max-width: $ug-container-max-width;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  // -- Wider max-width --
+  &--wide {
+    max-width: 1600px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  // -- No max-width, no padding (true full-bleed) --
+  &--fluid {
+    max-width: none;
+  }
+
+  // -- No padding (for edge-to-edge content) --
+  &--flush {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  // -- Responsive padding --
+  @include ug-breakpoint-down("md") {
+    padding-left: var(--ug-leading);
+    padding-right: var(--ug-leading);
+
+    &--flush {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
 }

package/src/scss/_dropdown.scss

@@ -1,178 +1,178 @@
-// ==========================================================================
-// Unigrid CSS Framework — Dropdown (BEM)
-//
-// Dropdown toggled via .ug-dropdown--open class (set by minimal JS).
-// Caret rotates when open. Works for buttons and navbar items.
-//
-// Block: .ug-dropdown
-// Elements: __trigger, __caret, __menu, __item, __link, __divider, __header
-// Modifiers: --open, --right, --up
-//
-// Usage:
-//   <div class="ug-dropdown">
-//     <button class="ug-btn ug-dropdown__trigger">
-//       Actions <span class="ug-dropdown__caret"></span>
-//     </button>
-//     <ul class="ug-dropdown__menu">
-//       <li class="ug-dropdown__item"><a class="ug-dropdown__link" href="#">Edit</a></li>
-//     </ul>
-//   </div>
-// ==========================================================================
-
-@use "variables" as *;
-@use "mixins" as *;
-
-.ug-dropdown {
-  position: relative;
-  display: inline-flex;
-
-  // ---- Trigger (button or link) ----
-  &__trigger {
-    display: inline-flex;
-    align-items: center;
-    gap: calc(var(--ug-leading) * 0.25);
-    cursor: pointer;
-    user-select: none;
-
-    // Reset button defaults only when NOT a .ug-btn
-    &:is(button):not(.ug-btn) {
-      background: none;
-      border: none;
-      padding: 0;
-      font: inherit;
-      @include ug-font-weight("light");
-    }
-  }
-
-  // ---- Caret ----
-  &__caret {
-    display: inline-block;
-    width: 0.5em;
-    height: 0.5em;
-    border-right: 2px solid currentColor;
-    border-bottom: 2px solid currentColor;
-    transform: rotate(45deg);
-    transition: transform 0.2s;
-    margin-top: -0.15em;
-    flex-shrink: 0;
-  }
-
-  // ---- Dropdown Menu ----
-  &__menu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    z-index: 100;
-    display: none;
-    min-width: 12rem;
-    padding: calc(var(--ug-leading) * 0.25) 0;
-    background-color: $ug-white;
-    border: 1px solid $ug-light-gray;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    list-style: none;
-    margin: 0;
-  }
-
-  // ---- Open State ----
-  &--open > &__menu {
-    display: block;
-  }
-
-  &--open > &__trigger &__caret {
-    transform: rotate(-135deg);
-    margin-top: 0.15em;
-  }
-
-  // ---- Menu Item ----
-  &__item {
-    display: block;
-  }
-
-  // ---- Menu Link ----
-  &__link {
-    display: block;
-    padding: calc(var(--ug-leading) * 0.25) calc(var(--ug-leading) * 0.5);
-    @include ug-font-size("sm");
-    @include ug-rhythm-line-height(1);
-    color: $ug-dark-gray;
-    text-decoration: none;
-    white-space: nowrap;
-    transition: background-color 0.1s, color 0.1s;
-
-    &:hover {
-      background-color: $ug-warm-gray;
-      color: $ug-black;
-    }
-
-    &--active {
-      @include ug-font-weight("bold");
-      color: $ug-black;
-    }
-  }
-
-  // ---- Menu Divider ----
-  &__divider {
-    height: 1px;
-    background-color: $ug-light-gray;
-    margin: calc(var(--ug-leading) * 0.25) 0;
-  }
-
-  // ---- Menu Header ----
-  &__header {
-    display: block;
-    padding: calc(var(--ug-leading) * 0.25) calc(var(--ug-leading) * 0.5);
-    @include ug-font-size("xs");
-    @include ug-font-weight("bold");
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    color: $ug-medium-gray;
-  }
-
-  // ==============================
-  // Modifiers
-  // ==============================
-
-  // Active state (current page is in this dropdown)
-  &--active {
-    > .ug-navbar__link {
-      color: $ug-white !important;
-    }
-  }
-
-  &--active > &__trigger {
-    color: $ug-black;
-  }
-
-  // ---- Navbar context ----
-  // When .ug-dropdown is inside .ug-navbar, the trigger inherits navbar link styles.
-  .ug-navbar & {
-    align-items: stretch;
-  }
-
-  .ug-navbar &__trigger:is(button) {
-    padding: 0 calc(var(--ug-leading) * 0.5);
-  }
-
-  // Right-aligned menu
-  &--right > &__menu {
-    left: auto;
-    right: 0;
-  }
-
-  // Upward menu
-  &--up > &__menu {
-    top: auto;
-    bottom: 100%;
-    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
-  }
-
-  &--up > &__trigger &__caret {
-    transform: rotate(-135deg);
-    margin-top: 0.15em;
-  }
-
-  &--up#{&}--open > &__trigger &__caret {
-    transform: rotate(45deg);
-    margin-top: -0.15em;
-  }
-}
+// ==========================================================================
+// Unigrid CSS Framework — Dropdown (BEM)
+//
+// Dropdown toggled via .ug-dropdown--open class (set by minimal JS).
+// Caret rotates when open. Works for buttons and navbar items.
+//
+// Block: .ug-dropdown
+// Elements: __trigger, __caret, __menu, __item, __link, __divider, __header
+// Modifiers: --open, --right, --up
+//
+// Usage:
+//   <div class="ug-dropdown">
+//     <button class="ug-btn ug-dropdown__trigger">
+//       Actions <span class="ug-dropdown__caret"></span>
+//     </button>
+//     <ul class="ug-dropdown__menu">
+//       <li class="ug-dropdown__item"><a class="ug-dropdown__link" href="#">Edit</a></li>
+//     </ul>
+//   </div>
+// ==========================================================================
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-dropdown {
+  position: relative;
+  display: inline-flex;
+
+  // ---- Trigger (button or link) ----
+  &__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--ug-leading) * 0.25);
+    cursor: pointer;
+    user-select: none;
+
+    // Reset button defaults only when NOT a .ug-btn
+    &:is(button):not(.ug-btn) {
+      background: none;
+      border: none;
+      padding: 0;
+      font: inherit;
+      @include ug-font-weight("light");
+    }
+  }
+
+  // ---- Caret ----
+  &__caret {
+    display: inline-block;
+    width: 0.5em;
+    height: 0.5em;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    transform: rotate(45deg);
+    transition: transform 0.2s;
+    margin-top: -0.15em;
+    flex-shrink: 0;
+  }
+
+  // ---- Dropdown Menu ----
+  &__menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 100;
+    display: none;
+    min-width: 12rem;
+    padding: calc(var(--ug-leading) * 0.25) 0;
+    background-color: $ug-white;
+    border: 1px solid $ug-light-gray;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    list-style: none;
+    margin: 0;
+  }
+
+  // ---- Open State ----
+  &--open > &__menu {
+    display: block;
+  }
+
+  &--open > &__trigger &__caret {
+    transform: rotate(-135deg);
+    margin-top: 0.15em;
+  }
+
+  // ---- Menu Item ----
+  &__item {
+    display: block;
+  }
+
+  // ---- Menu Link ----
+  &__link {
+    display: block;
+    padding: calc(var(--ug-leading) * 0.25) calc(var(--ug-leading) * 0.5);
+    @include ug-font-size("sm");
+    @include ug-rhythm-line-height(1);
+    color: $ug-dark-gray;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background-color 0.1s, color 0.1s;
+
+    &:hover {
+      background-color: $ug-warm-gray;
+      color: $ug-black;
+    }
+
+    &--active {
+      @include ug-font-weight("bold");
+      color: $ug-black;
+    }
+  }
+
+  // ---- Menu Divider ----
+  &__divider {
+    height: 1px;
+    background-color: $ug-light-gray;
+    margin: calc(var(--ug-leading) * 0.25) 0;
+  }
+
+  // ---- Menu Header ----
+  &__header {
+    display: block;
+    padding: calc(var(--ug-leading) * 0.25) calc(var(--ug-leading) * 0.5);
+    @include ug-font-size("xs");
+    @include ug-font-weight("bold");
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: $ug-medium-gray;
+  }
+
+  // ==============================
+  // Modifiers
+  // ==============================
+
+  // Active state (current page is in this dropdown)
+  &--active {
+    > .ug-navbar__link {
+      color: $ug-white !important;
+    }
+  }
+
+  &--active > &__trigger {
+    color: $ug-black;
+  }
+
+  // ---- Navbar context ----
+  // When .ug-dropdown is inside .ug-navbar, the trigger inherits navbar link styles.
+  .ug-navbar & {
+    align-items: stretch;
+  }
+
+  .ug-navbar &__trigger:is(button) {
+    padding: 0 calc(var(--ug-leading) * 0.5);
+  }
+
+  // Right-aligned menu
+  &--right > &__menu {
+    left: auto;
+    right: 0;
+  }
+
+  // Upward menu
+  &--up > &__menu {
+    top: auto;
+    bottom: 100%;
+    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  &--up > &__trigger &__caret {
+    transform: rotate(-135deg);
+    margin-top: 0.15em;
+  }
+
+  &--up#{&}--open > &__trigger &__caret {
+    transform: rotate(45deg);
+    margin-top: -0.15em;
+  }
+}