@chassis-ui/docs 0.1.10 → 0.3.0

package/src/scss/_footer.scss

@@ -2,28 +2,27 @@
 // Footer
 //
 
-.cxd-footer {
-  // margin-top: 0 !important;
-  // margin-top: 4rem;
-  --cx-fg-color: var(--cx-fg-subtle);
-  background-color: var(--cx-bg-evident);
-  // border-top: var(--cx-border-width) var(--cx-border-style) var(--cx-border-subtle);
-  .nav {
-    display: block;
-    > li {
-      display: list-item;
-      margin-bottom: var(--cx-space-xsmall);
+@layer custom {
+  .cxd-footer {
+    --cx-fg-color: var(--cx-fg-subtle);
+    background-color: var(--cx-bg-evident);
+    .nav {
+      display: block;
+      > li {
+        display: list-item;
+        margin-block-end: var(--cx-space-xsmall);
+      }
     }
-  }
 
-  a {
-    color: var(--cx-fg-color);
-    text-decoration: none;
+    a {
+      color: var(--cx-fg-color);
+      text-decoration: none;
 
-    &:hover,
-    &:focus {
-      color: var(--cx-hover-color);
-      text-decoration: underline;
+      &:hover,
+      &:focus {
+        color: var(--cx-hover-color);
+        text-decoration: underline;
+      }
     }
   }
 }

package/src/scss/_layout.scss

@@ -1,75 +1,70 @@
-.cxd-gutter {
-  --cx-gutter-x: #{$cxd-gutter-x};
-}
+@use "./vars" as *;
+@use "@chassis-ui/css/scss/mixins" as *;
 
-.cxd-layout {
-  // padding: 1rem !important;
+@layer custom {
+  .cxd-gutter {
+    --cx-gutter-x: #{$cxd-gutter-x};
+  }
 
-  @include media-breakpoint-up(large) {
-    display: grid;
-    grid-template-areas: "sidebar main";
-    // grid-template-columns: 1.5fr 6.5fr;
-    grid-template-columns: 14rem auto;
-    // gap: $grid-gutter-width;
-    gap: $cxd-gutter-x;
-    padding: 0 1rem !important; // stylelint-disable-line declaration-no-important
-    margin: 0 auto;
+  .cxd-layout {
+    @include media-breakpoint-up(large) {
+      display: grid;
+      grid-template-areas: "sidebar main";
+      grid-template-columns: 14rem auto;
+      gap: $cxd-gutter-x;
+      padding: 0 1rem;
+      margin: 0 auto;
+    }
   }
-}
 
-.cxd-sidebar {
-  grid-area: sidebar;
-}
+  .cxd-sidebar {
+    grid-area: sidebar;
+  }
 
-.cxd-intro {
-  grid-area: intro;
-  max-width: 960px;
-  margin: 2rem auto 0;
-}
+  .cxd-intro {
+    grid-area: intro;
+    width: 100%;
+    max-width: 960px;
+    margin: 2rem auto 0;
+  }
 
-.cxd-main {
-  grid-area: main;
-  order: 1;
+  .cxd-main {
+    grid-area: main;
+    order: 1;
 
-  @include media-breakpoint-down(large) {
-    // max-width: 760px;
-    margin-inline: auto;
-  }
+    @include media-breakpoint-down(large) {
+      margin-inline: auto;
+    }
+
+    @include media-breakpoint-up(medium) {
+      display: grid;
+      grid-template-areas:
+        "intro"
+        "toc"
+        "content";
+      grid-template-rows: auto auto 1fr;
+      gap: inherit;
+    }
 
-  @include media-breakpoint-up(medium) {
-    display: grid;
-    grid-template-areas:
-      "intro"
-      "toc"
-      "content";
-    grid-template-rows: auto auto 1fr;
-    gap: inherit;
+    @include media-breakpoint-up(large) {
+      grid-template-areas:
+        "intro   toc"
+        "content toc";
+      grid-template-rows: auto 1fr;
+      grid-template-columns: auto 14rem;
+    }
   }
 
-  @include media-breakpoint-up(large) {
-    grid-template-areas:
-      "intro   toc"
-      "content toc";
-    grid-template-rows: auto 1fr;
-    grid-template-columns: auto 14rem;
+  .cxd-toc {
+    grid-area: toc;
   }
-}
 
-.cxd-toc {
-  grid-area: toc;
-}
+  .cxd-content {
+    grid-area: content;
+    justify-self: center;
+    width: 100%;
+    min-width: 1px; // Fix width when cxd-content contains a `<pre>` https://github.com/chassis-ui/css/issues/25410
+    max-width: 960px;
+  }
 
-.cxd-content {
-  grid-area: content;
-  min-width: 1px; // Fix width when cxd-content contains a `<pre>` https://github.com/chassis-ui/css/issues/25410
-  max-width: 960px;
-  margin: 0 auto;
 }
-
-// .cxd-content,
-// .cxd-intro {
-//   width: 100%;
-//   max-width: 960px;
-//   margin-right: auto;
-//   margin-left: auto;
-// }

package/src/scss/_navbar.scss

@@ -1,138 +1,31 @@
-.cxd-navbar {
-  // box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
-  padding: 0;
-  // padding: .75rem 0;
-  background-color: rgba(var(--cx-bg-main-rgb), var(--cx-opacity-dim-main));
-  backdrop-filter: blur(24px);
-  border-bottom: var(--cx-border-width-medium) solid var(--cx-border-subtle);
+@use "@chassis-ui/css/scss/mixins" as *;
 
-  // @media (forced-colors) {
-  //   background-color: Canvas;
-  // }
-
-  &::after {
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    display: block;
-    content: "";
-    // background-image: linear-gradient(rgba(var(--cxd-subtle-rgb), 1), rgba(var(--cxd-subtle-rgb), .95));
-  }
-
-  .cxd-navbar-toggle {
-    @include media-breakpoint-down(large) {
-      width: 4.25rem;
-    }
-  }
-
-  .navbar-toggler {
+@layer custom {
+  .cxd-navbar {
     padding: 0;
-    margin-right: -.5rem;
-    border: 0;
-
-    &:first-child {
-      margin-left: -.5rem;
-    }
-
-    .bi {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
+    border-block-end: var(--cx-border-width-medium) solid var(--cx-border-subtle);
 
-    &:focus {
-      box-shadow: none;
-    }
-  }
-
-  .navbar-brand {
-    color: $white;
-    @include transition(transform .2s ease-in-out);
-
-    // &:hover {
-    //   transform: rotate(-5deg) scale(1.1);
-    // }
-  }
-
-  .navbar-toggler,
-  .nav-link {
-    --cx-caret-color: var(--cx-fg-color);
-    @include font-size(var(--cx-font-size-small));
-    font-weight: var(--cx-font-weight-strong);
-    // line-height: 1.75em;
-    text-transform: uppercase;
-    .icon {
-      --cx-icon-color: var(--cx-fg-color);
-      height: 24px;
-      vertical-align: -.275em;
+    > .container {
+      position: relative;
     }
 
-    @include media-breakpoint-up(large) {
-      padding: var(--cx-space-large);
-      &.active {
-        padding-bottom: var(--cx-space-medium);
-        border-bottom: var(--cx-border-width-2xlarge) solid var(--cx-primary-cue-main);
+    .navbar-toggler,
+    .nav-link {
+      --cx-caret-color: var(--cx-fg-color);
+      @include font-size(var(--cx-font-size-small));
+      font-weight: var(--cx-font-weight-strong);
+      text-transform: uppercase;
+      .icon {
+        --cx-icon-color: var(--cx-fg-color);
       }
-    }
-
-  }
 
-  .navbar-nav-svg {
-    display: inline-block;
-    vertical-align: -.125rem;
-  }
-
-  .offcanvas-large {
-    background-color: var(--cxd-subtle-bg);
-    border-left: 0;
-
-    @include media-breakpoint-down(large) {
-      height: 100vh;
-      box-shadow: var(--cx-box-shadow-large);
-    }
-  }
-
-  .dropdown-toggle {
-    &:focus:not(:focus-visible) {
-      outline: 0;
-    }
-  }
-
-  .dropdown-menu {
-    --cx-dropdown-min-width: 12rem;
-    --cx-dropdown-padding-x: .25rem;
-    --cx-dropdown-padding-y: .25rem;
-    --cx-dropdown-link-hover-bg: rgba(var(--cxd-subtle-rgb), .1);
-    --cx-dropdown-link-active-bg: rgba(var(--cxd-subtle-rgb), 1);
-    @include rfs(.875rem, --cx-dropdown-font-size);
-    @include font-size(.875rem);
-    @include border-radius(.5rem);
-    position: absolute;
-    box-shadow: $dropdown-box-shadow;
-
-    li + li {
-      margin-top: .125rem;
-    }
-
-    .dropdown-item {
-      @include border-radius(.25rem);
-
-      &:active {
-        .icon {
-          color: inherit !important; // stylelint-disable-line declaration-no-important
+      @include media-breakpoint-up(large) {
+        padding: var(--cx-space-large) var(--cx-space-xsmall);
+        &.active {
+          padding-block-end: var(--cx-space-medium);
+          border-block-end: var(--cx-border-width-2xlarge) solid var(--cx-primary-cue-main);
         }
       }
     }
-
-    .active {
-      font-weight: 600;
-
-      .icon {
-        display: block !important; // stylelint-disable-line declaration-no-important
-      }
-    }
-  }
-
-  .dropdown-menu-end {
-    --cx-dropdown-min-width: 8rem;
   }
 }

package/src/scss/_placeholder-img.scss

@@ -1,15 +1,19 @@
+@use "@chassis-ui/css/scss/mixins" as *;
+
 //
 // Placeholder svg used in the docs.
 //
 
 // Remember to update `site/_layouts/examples.html` too if this changes!
 
-.cxd-placeholder-image {
-  @include font-size(1.125rem);
-  user-select: none;
-  text-anchor: middle;
-}
+@layer custom {
+  .cxd-placeholder-image {
+    @include font-size(1.125rem);
+    user-select: none;
+    text-anchor: middle;
+  }
 
-.cxd-placeholder-image-large {
-  @include font-size(3.5rem);
+  .cxd-placeholder-image-large {
+    @include font-size(3.5rem);
+  }
 }

package/src/scss/_scrolling.scss

@@ -1,16 +1,18 @@
 // When navigating with the keyboard, prevent focus from landing behind the sticky header
 
-main {
-  a,
-  button,
-  input,
-  select,
-  textarea,
-  h2,
-  h3,
-  h4,
-  [tabindex="0"] {
-    scroll-margin-top: 80px;
-    scroll-margin-bottom: 100px;
+@layer custom {
+  main {
+    a,
+    button,
+    input,
+    select,
+    textarea,
+    h2,
+    h3,
+    h4,
+    [tabindex="0"] {
+      scroll-margin-block-start: 80px;
+      scroll-margin-block-end: 100px;
+    }
   }
 }