unigrid.css 0.3.0 → 0.3.1

package/src/scss/_sidebar.scss

@@ -1,147 +1,147 @@
-// ==========================================================================
-// Unigrid CSS Framework — Sidebar Layout (BEM)
-//
-// Flexible sidebar + main content layout. Sidebar width configurable
-// via CSS custom property --ug-sidebar-width.
-//
-// Block: .ug-sidebar-layout
-// Elements: __sidebar, __main
-// Modifiers: --right, --sticky, --bordered
-//            __sidebar--collapse (hidden on mobile)
-//
-// Usage:
-//   <div class="ug-sidebar-layout" style="--ug-sidebar-width: 20rem">
-//     <aside class="ug-sidebar-layout__sidebar">...</aside>
-//     <main class="ug-sidebar-layout__main">...</main>
-//   </div>
-// ==========================================================================
-
-@use "variables" as *;
-@use "mixins" as *;
-
-.ug-sidebar-layout {
-  --ug-sidebar-width: calc(var(--ug-leading) * 12);
-  display: flex;
-  width: 100%;
-  min-height: 0;
-
-  // ---- Sidebar ----
-  &__sidebar {
-    width: var(--ug-sidebar-width);
-    flex-shrink: 0;
-    padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
-
-    // Collapse on mobile by default
-    @include ug-breakpoint-down("md") {
-      display: none;
-    }
-  }
-
-  // ---- Main Content ----
-  &__main {
-    flex: 1;
-    min-width: 0;
-    padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
-  }
-
-  // ==============================
-  // Modifiers
-  // ==============================
-
-  // Sidebar on the right
-  &--right {
-    flex-direction: row-reverse;
-  }
-
-  // Sticky sidebar
-  &--sticky {
-    .ug-sidebar-layout__sidebar {
-      position: sticky;
-      top: 0;
-      align-self: flex-start;
-      max-height: 100vh;
-      overflow-y: auto;
-    }
-  }
-
-  // Bordered separator
-  &--bordered {
-    .ug-sidebar-layout__sidebar {
-      border-right: 1px solid $ug-light-gray;
-    }
-
-    &.ug-sidebar-layout--right .ug-sidebar-layout__sidebar {
-      border-right: none;
-      border-left: 1px solid $ug-light-gray;
-    }
-  }
-
-  // ==============================
-  // Sidebar element modifiers
-  // ==============================
-
-  // Show sidebar on mobile (override default collapse)
-  &__sidebar--visible {
-    @include ug-breakpoint-down("md") {
-      display: block;
-    }
-  }
-
-  // ==============================
-  // Sidebar Navigation (optional)
-  // ==============================
-
-  &__nav {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  &__nav-item {
-    display: block;
-  }
-
-  &__nav-link {
-    display: flex;
-    align-items: center;
-    padding: calc(var(--ug-leading) * 0.5) 0;
-    @include ug-font-size("sm");
-    @include ug-rhythm-line-height(1);
-    color: $ug-dark-gray;
-    text-decoration: none;
-    border-bottom: 1px solid $ug-light-gray;
-    transition: color 0.15s;
-
-    &:hover {
-      color: $ug-black;
-    }
-
-    &--active {
-      @include ug-font-weight("bold");
-      color: $ug-black;
-    }
-  }
-
-  // ==============================
-  // Responsive
-  // ==============================
-
-  @include ug-breakpoint-down("md") {
-    flex-direction: column;
-
-    &__main {
-      padding: var(--ug-leading);
-    }
-
-    &--right {
-      flex-direction: column;
-    }
-
-    // Remove border on mobile
-    &--bordered .ug-sidebar-layout__sidebar {
-      border-right: none;
-      border-left: none;
-      border-bottom: 1px solid $ug-light-gray;
-    }
-  }
-}
+// ==========================================================================
+// Unigrid CSS Framework — Sidebar Layout (BEM)
+//
+// Flexible sidebar + main content layout. Sidebar width configurable
+// via CSS custom property --ug-sidebar-width.
+//
+// Block: .ug-sidebar-layout
+// Elements: __sidebar, __main
+// Modifiers: --right, --sticky, --bordered
+//            __sidebar--collapse (hidden on mobile)
+//
+// Usage:
+//   <div class="ug-sidebar-layout" style="--ug-sidebar-width: 20rem">
+//     <aside class="ug-sidebar-layout__sidebar">...</aside>
+//     <main class="ug-sidebar-layout__main">...</main>
+//   </div>
+// ==========================================================================
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-sidebar-layout {
+  --ug-sidebar-width: calc(var(--ug-leading) * 12);
+  display: flex;
+  width: 100%;
+  min-height: 0;
+
+  // ---- Sidebar ----
+  &__sidebar {
+    width: var(--ug-sidebar-width);
+    flex-shrink: 0;
+    padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
+
+    // Collapse on mobile by default
+    @include ug-breakpoint-down("md") {
+      display: none;
+    }
+  }
+
+  // ---- Main Content ----
+  &__main {
+    flex: 1;
+    min-width: 0;
+    padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
+  }
+
+  // ==============================
+  // Modifiers
+  // ==============================
+
+  // Sidebar on the right
+  &--right {
+    flex-direction: row-reverse;
+  }
+
+  // Sticky sidebar
+  &--sticky {
+    .ug-sidebar-layout__sidebar {
+      position: sticky;
+      top: 0;
+      align-self: flex-start;
+      max-height: 100vh;
+      overflow-y: auto;
+    }
+  }
+
+  // Bordered separator
+  &--bordered {
+    .ug-sidebar-layout__sidebar {
+      border-right: 1px solid $ug-light-gray;
+    }
+
+    &.ug-sidebar-layout--right .ug-sidebar-layout__sidebar {
+      border-right: none;
+      border-left: 1px solid $ug-light-gray;
+    }
+  }
+
+  // ==============================
+  // Sidebar element modifiers
+  // ==============================
+
+  // Show sidebar on mobile (override default collapse)
+  &__sidebar--visible {
+    @include ug-breakpoint-down("md") {
+      display: block;
+    }
+  }
+
+  // ==============================
+  // Sidebar Navigation (optional)
+  // ==============================
+
+  &__nav {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__nav-item {
+    display: block;
+  }
+
+  &__nav-link {
+    display: flex;
+    align-items: center;
+    padding: calc(var(--ug-leading) * 0.5) 0;
+    @include ug-font-size("sm");
+    @include ug-rhythm-line-height(1);
+    color: $ug-dark-gray;
+    text-decoration: none;
+    border-bottom: 1px solid $ug-light-gray;
+    transition: color 0.15s;
+
+    &:hover {
+      color: $ug-black;
+    }
+
+    &--active {
+      @include ug-font-weight("bold");
+      color: $ug-black;
+    }
+  }
+
+  // ==============================
+  // Responsive
+  // ==============================
+
+  @include ug-breakpoint-down("md") {
+    flex-direction: column;
+
+    &__main {
+      padding: var(--ug-leading);
+    }
+
+    &--right {
+      flex-direction: column;
+    }
+
+    // Remove border on mobile
+    &--bordered .ug-sidebar-layout__sidebar {
+      border-right: none;
+      border-left: none;
+      border-bottom: 1px solid $ug-light-gray;
+    }
+  }
+}

package/src/scss/_table.scss

@@ -1,122 +1,122 @@
-// ==========================================================================
-// Unigrid CSS Framework — Table (BEM)
-//
-// Block: .ug-table
-// Elements: __header, __row, __cell
-// Modifiers: --striped, --bordered, --compact, --dark, --hover
-// ==========================================================================
-
-@use "variables" as *;
-@use "mixins" as *;
-
-.ug-table {
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-  @include ug-rhythm-margin-bottom(1);
-
-  font-feature-settings: 'tnum' 1;
-
-  // ---- Header ----
-  th {
-    @include ug-font-size("sm");
-    @include ug-font-weight("bold");
-    @include ug-rhythm-line-height(1);
-    text-align: left;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: $ug-medium-gray;
-    padding: calc(var(--ug-leading) * 0.5) calc(var(--ug-leading) * 0.5);
-    border-bottom: 2px solid $ug-black;
-    vertical-align: bottom;
-  }
-
-  // ---- Cells ----
-  td {
-    @include ug-font-size("base");
-    @include ug-rhythm-line-height(1);
-    text-align: left;
-    padding: calc(var(--ug-leading) * 0.5) calc(var(--ug-leading) * 0.5);
-    border-bottom: 1px solid $ug-light-gray;
-    vertical-align: top;
-  }
-
-  // ---- Caption ----
-  caption {
-    @include ug-font-size("sm");
-    @include ug-rhythm-line-height(1);
-    @include ug-rhythm-margin-bottom(0.5);
-    color: $ug-medium-gray;
-    text-align: left;
-    caption-side: top;
-  }
-
-  // ==============================
-  // Modifiers
-  // ==============================
-
-  // Striped rows
-  &--striped {
-    tbody tr:nth-child(even) {
-      background-color: $ug-warm-gray;
-    }
-  }
-
-  // All borders
-  &--bordered {
-    th,
-    td {
-      border: 1px solid $ug-light-gray;
-    }
-
-    th {
-      border-bottom-width: 2px;
-      border-bottom-color: $ug-black;
-    }
-  }
-
-  // Compact: less padding
-  &--compact {
-    th,
-    td {
-      @include ug-font-size("sm");
-      padding: calc(var(--ug-leading) * 0.25) calc(var(--ug-leading) * 0.5);
-    }
-  }
-
-  // Dark header
-  &--dark {
-    th {
-      background-color: $ug-black;
-      color: $ug-white;
-      border-bottom-color: $ug-black;
-    }
-  }
-
-  // Row hover
-  &--hover {
-    tbody tr {
-      transition: background-color 0.1s;
-
-      &:hover {
-        background-color: $ug-warm-gray;
-      }
-    }
-  }
-
-  // ==============================
-  // Responsive wrapper
-  // ==============================
-}
-
-// Horizontally scrollable table on small screens
-.ug-table-responsive {
-  width: 100%;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  @include ug-rhythm-margin-bottom(1);
-
-  .ug-table {
-    margin-bottom: 0;
-  }
-}
+// ==========================================================================
+// Unigrid CSS Framework — Table (BEM)
+//
+// Block: .ug-table
+// Elements: __header, __row, __cell
+// Modifiers: --striped, --bordered, --compact, --dark, --hover
+// ==========================================================================
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  @include ug-rhythm-margin-bottom(1);
+
+  font-feature-settings: 'tnum' 1;
+
+  // ---- Header ----
+  th {
+    @include ug-font-size("sm");
+    @include ug-font-weight("bold");
+    @include ug-rhythm-line-height(1);
+    text-align: left;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: $ug-medium-gray;
+    padding: calc(var(--ug-leading) * 0.5) calc(var(--ug-leading) * 0.5);
+    border-bottom: 2px solid $ug-black;
+    vertical-align: bottom;
+  }
+
+  // ---- Cells ----
+  td {
+    @include ug-font-size("base");
+    @include ug-rhythm-line-height(1);
+    text-align: left;
+    padding: calc(var(--ug-leading) * 0.5) calc(var(--ug-leading) * 0.5);
+    border-bottom: 1px solid $ug-light-gray;
+    vertical-align: top;
+  }
+
+  // ---- Caption ----
+  caption {
+    @include ug-font-size("sm");
+    @include ug-rhythm-line-height(1);
+    @include ug-rhythm-margin-bottom(0.5);
+    color: $ug-medium-gray;
+    text-align: left;
+    caption-side: top;
+  }
+
+  // ==============================
+  // Modifiers
+  // ==============================
+
+  // Striped rows
+  &--striped {
+    tbody tr:nth-child(even) {
+      background-color: $ug-warm-gray;
+    }
+  }
+
+  // All borders
+  &--bordered {
+    th,
+    td {
+      border: 1px solid $ug-light-gray;
+    }
+
+    th {
+      border-bottom-width: 2px;
+      border-bottom-color: $ug-black;
+    }
+  }
+
+  // Compact: less padding
+  &--compact {
+    th,
+    td {
+      @include ug-font-size("sm");
+      padding: calc(var(--ug-leading) * 0.25) calc(var(--ug-leading) * 0.5);
+    }
+  }
+
+  // Dark header
+  &--dark {
+    th {
+      background-color: $ug-black;
+      color: $ug-white;
+      border-bottom-color: $ug-black;
+    }
+  }
+
+  // Row hover
+  &--hover {
+    tbody tr {
+      transition: background-color 0.1s;
+
+      &:hover {
+        background-color: $ug-warm-gray;
+      }
+    }
+  }
+
+  // ==============================
+  // Responsive wrapper
+  // ==============================
+}
+
+// Horizontally scrollable table on small screens
+.ug-table-responsive {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  @include ug-rhythm-margin-bottom(1);
+
+  .ug-table {
+    margin-bottom: 0;
+  }
+}