@utrecht/component-library-css 3.0.1-alpha.22 → 3.0.1-alpha.24

package/dist/index.css

@@ -4432,6 +4432,86 @@ however browsers don't seem to have implemented great looking supixel tweening y
   margin-block-start: 0;
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-nav-bar {
+  background-color: var(--utrecht-nav-bar-background-color);
+  color: var(--utrecht-nav-bar-color);
+  display: flex;
+  justify-content: center;
+}
+@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+  .utrecht-nav-bar {
+    border-block-end-color: currentColor;
+    border-block-end-style: solid;
+    border-block-end-width: 1px;
+    /* add `padding` in `forced-colors` mode to make room for contrasting focus ring */
+    border-block-start-color: currentColor;
+    border-block-start-style: solid;
+    border-block-start-width: 1px;
+    padding-block-end: calc(var(--utrecht-focus-outline-width) * 2);
+    padding-block-start: calc(var(--utrecht-focus-outline-width) * 2);
+  }
+}
+
+.utrecht-nav-bar__content {
+  align-items: stretch;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  inline-size: 100%;
+  justify-content: space-between;
+  /* Wrap content to accomodate:
+    * - 400% zoom
+    * - longer text due to automatic translation
+    * - longer text due to editorial content requirements
+    */
+  max-inline-size: var(--utrecht-nav-bar-content-max-inline-size);
+}
+
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-nav-list {
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+  padding-inline-start: 0;
+  align-items: stretch;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  inline-size: 100%;
+  justify-content: start;
+}
+
+.utrecht-nav-list--center > * {
+  flex: 1 1 0;
+  justify-content: center;
+}
+
+.utrecht-nav-list__item {
+  list-style: none;
+  display: inline-flex;
+}
+
+/* Style for the navigation links */
+.utrecht-nav-list__link {
+  font-weight: var(--utrecht-nav-list-link-font-weight);
+  max-inline-size: var(--utrecht-nav-bar-link-max-inline-size, 30ch);
+  padding-block-end: var(--utrecht-nav-bar-link-padding-block-end);
+  padding-block-start: var(--utrecht-nav-bar-link-padding-block-start);
+  padding-inline-end: var(--utrecht-nav-bar-link-padding-inline-end);
+  padding-inline-start: var(--utrecht-nav-bar-link-padding-inline-start);
+  text-decoration: none;
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.1-alpha.22",
+  "version": "3.0.1-alpha.24",
   "author": "Community for NL Design System",
   "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",