@wwtdev/bsds-css 2.18.1 → 2.20.0

package/dist/components/vertical-navigation.css

@@ -0,0 +1,227 @@
+.bs-vertical-nav {
+  --active-color: rgba(255, 255, 255, 0.25);
+  --bg-color: var(--bs-navy-base);
+  --border-color: var(--bs-border-dark);
+  --top-offset: 48px;
+  --width: auto;
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
+  background-color: var(--bg-color);
+  color: var(--bs-white);
+  display: none;
+  flex-direction: column;
+  height: 100vh;
+  left: 0;
+  max-height: calc(100vh - var(--top-offset));
+  overflow: scroll;
+  padding-bottom: 1.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 1.5rem;
+  position: fixed;
+  right: 0;
+  scrollbar-width: none;  /* Firefox */
+  top: var(--top-offset);
+  transition-duration: 0.2s;
+  transition-property: max-height, transform;
+  transition-timing-function: ease;
+  width: var(--width);
+  z-index: 1001;
+}
+
+.bs-vertical-nav:where([data-mobile-shown="true"]) {
+  display: flex;
+}
+
+.dark .bs-vertical-nav {
+  --active-color: rgba(255, 255, 255, 0.25);
+  --bg-color: var(--bs-bg-base);
+  --border-color: var(--bs-border-dark);
+  border-right: 1px solid var(--bs-border-medium);
+}
+
+@media (min-width: 752px) {
+  .bs-vertical-nav {
+    --width: 9.875rem;
+    border-right: 1px solid var(--bg-color);
+    display: flex;
+    padding-bottom: 1rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    padding-top: 1rem;
+    right: auto;
+  }
+
+  .bs-vertical-nav:where([data-narrow="true"]) {
+    --width: 4.5rem;
+  }
+}
+
+.bs-vertical-nav::-webkit-scrollbar {
+  display: none;  /* Safari and Chrome */
+}
+
+.bs-vertical-nav:where([data-y-expand="true"]) {
+  transform: translateY(calc(-1 * var(--top-offset)));
+  max-height: 100vh;
+}
+
+/* ===== Sections ===== */
+.bs-vertical-nav :where(.bs-vertical-nav-section) {
+  border-top: 2px solid var(--border-color);
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+}
+
+@media (min-width: 752px) {
+  .bs-vertical-nav :where(.bs-vertical-nav-section) {
+    margin-top: 0.25rem;
+  }
+}
+
+/* Don't show border if the very first item is a section */
+.bs-vertical-nav :where(ul li:first-child) {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.bs-vertical-nav :where(.bs-vertical-nav-section-toggle) {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  font-size: 0.75rem;
+  font-weight: 600;
+  justify-content: space-between;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.5rem;
+  padding-top: 0.5rem;
+  width: 100%;
+}
+
+.bs-vertical-nav :where(.bs-vertical-nav-section-toggle-caret) {
+  height: 0.75rem;
+  transform: none;
+  transition-duration: 0.2s;
+  transition-property: transform;
+  transition-timing-function: ease-in-out;
+  width: 0.75rem;
+}
+
+.bs-vertical-nav :where(.bs-vertical-nav-section[data-collapsed="true"] .bs-vertical-nav-section-toggle-caret) {
+  transform: rotate(180deg);
+}
+
+/* ===== Nav List ===== */
+.bs-vertical-nav :where(ul) {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  list-style: none;
+  margin-top: 0;
+  padding-left: 0;
+}
+
+@media (min-width: 752px) {
+  .bs-vertical-nav :where(ul) {
+    gap: 0.25rem;
+  }
+}
+
+/* ===== Nav List Items / Links */
+.bs-vertical-nav :where(ul li a) {
+  align-items: center;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  font-size: 1rem;
+  font-weight: 400;
+  gap: 0.5rem;
+  height: 100%;
+  padding-bottom: 0.75rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.75rem;
+  width: 100%;
+}
+
+@media (min-width: 752px) {
+  .bs-vertical-nav :where(ul li a) {
+    font-size: 0.875rem;
+    padding-bottom: 0.5rem;
+    padding-top: 0.5rem;
+  }
+
+  .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a) {
+    flex-direction: column;
+    font-size: 0.6875rem;
+    gap: 0.25rem;
+    line-height: 110%;
+    padding-bottom: 0.75rem;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+    padding-top: 0.75rem;
+    text-align: center;
+  }
+}
+
+.bs-vertical-nav :where(ul li a:hover) {
+  font-weight: 600;
+}
+
+.bs-vertical-nav :where(ul li a[data-active="true"]) {
+  background-color: var(--active-color);
+  font-weight: 600;
+}
+
+.bs-vertical-nav :where(.bs-vertical-nav-link-icon) {
+  height: 1rem;
+  width: 1rem;
+}
+
+@media (min-width: 752px) {
+  .bs-vertical-nav :where(.bs-vertical-nav-link-icon) {
+    height: 0.875rem;
+    width: 0.875rem;
+  }
+
+  .bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-link-icon) {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+
+/* ===== External Links ===== */
+.bs-vertical-nav :where(.bs-vertical-nav-external-links) {
+  margin-top: auto;
+  padding-top: 2.25rem;
+}
+
+.bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-external-links) {
+  display: none;
+}
+
+.bs-vertical-nav :where(.bs-vertical-nav-external-links .bs-vertical-nav-external-link-icon) {
+  height: 1rem;
+  width: 1rem;
+}
+
+@media (min-width: 752px) {
+  .bs-vertical-nav :where(.bs-vertical-nav-external-links .bs-vertical-nav-external-link-icon) {
+    height: 0.875rem;
+    width: 0.875rem;
+  }
+}
+
+/* ===== Slotted Items ===== */
+.bs-vertical-nav :where(.bs-vertical-nav-slotted-items) {
+  margin-top: auto;
+}
+
+.bs-vertical-nav :where(.bs-vertical-nav-external-links ~ .bs-vertical-nav-slotted-items) {
+  margin-top: 1rem;
+}
+
+.bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-slotted-items) {
+  display: none;
+}

package/dist/wwt-bsds-preset.js

@@ -171,7 +171,8 @@ module.exports = {
         "dark": "var(--bs-border-dark)",
         "base": "var(--bs-border-base)",
         "medium": "var(--bs-border-medium)",
-        "light": "var(--bs-border-light)"
+        "light": "var(--bs-border-light)",
+        "input": "var(--bs-border-input)",
       },
       borderRadius: {
         md: ".25rem"

package/dist/wwt-bsds-wc-base.css

@@ -387,6 +387,7 @@ button {
   --bs-border-base: var(--bs-gray-200);
   --bs-border-medium: var(--bs-gray-150);
   --bs-border-light: var(--bs-gray-100);
+  --bs-border-input: rgba(99, 66, 145, 0.75); /* --bs-violet-300 at .75 opacity */
 
   /* Spacing */
   --bs-content-top: 4rem;
@@ -473,6 +474,7 @@ button {
   --bs-border-base: rgba(163, 164, 183, 0.7); /* --bs-gray-300 at .7 opacity */
   --bs-border-medium: var(--bs-gray-400);
   --bs-border-light: rgba(78, 79, 95, 0.5); /* --bs-gray-400 at .5 opacity */
+  --bs-border-input: var(--bs-violet-200);
 
   --bs-shadow-base: rgba(0, 0, 0, 0.06);
   --bs-shadow-invert: rgba(10, 11, 25, 0.60);