@gemeentenijmegen/components-css 0.0.1-alpha.10 → 0.0.1-alpha.100

package/accordion/index.scss

@@ -0,0 +1,9 @@
+/* Nijmegen overrides */
+.utrecht-accordion__button {
+  align-items: flex-start; /* Nijmegen override */
+
+  .utrecht-accordion__button-icon {
+    position: relative;
+    top: 1px; /* stylelint-disable-line property-disallowed-list */ /* Nijmegen override */
+  }
+}

package/action-card/index.scss

@@ -0,0 +1,37 @@
+.nijmegen-action-card {
+  background-color: var(--nijmegen-action-card-background-color);
+  border-color: var(--nijmegen-action-card-border-color);
+  border-style: solid;
+  border-width: var(--nijmegen-action-card-border-width);
+  display: flex;
+  flex-direction: column;
+  gap: var(--nijmegen-action-card-row-gap);
+  padding-block-end: var(--nijmegen-action-card-padding-block-end);
+  padding-block-start: var(--nijmegen-action-card-padding-block-start);
+  padding-inline-end: var(--nijmegen-action-card-padding-inline-end);
+  padding-inline-start: var(--nijmegen-action-card-padding-inline-start);
+
+  @media (width >=1024px) {
+    padding-block-end: var(--nijmegen-action-card-large-vw-padding-block-end);
+    padding-block-start: var(--nijmegen-action-card-large-vw-padding-block-start);
+    padding-inline-end: var(--nijmegen-action-card-large-vw-padding-inline-end);
+    padding-inline-start: var(--nijmegen-action-card-large-vw-padding-inline-start);
+  }
+
+  @media (width <576px) {
+    .utrecht-button-group {
+      flex-direction: column;
+
+      .utrecht-button {
+        inline-size: 100%;
+        max-inline-size: 100%;
+      }
+    }
+  }
+}
+
+.nijmegen-action-card__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nijmegen-action-card-conten-row-gap);
+}

package/breadcrumb/index.scss

@@ -0,0 +1,130 @@
+/* stylelint-disable no-descending-specificity */
+
+@import "~@utrecht/link-css/src/mixin";
+@import "~@utrecht/focus-ring-css/src/mixin";
+
+.nijmegen-breadcrumb {
+  @media (width >=576px) {
+    background-color: var(--nijmegen-breadcrumb-navigation-background-color);
+  }
+
+  font-family: var(--nijmegen-breadcrumb-navigation-font-family);
+  font-size: var(--nijmegen-breadcrumb-navigation-font-size);
+  font-weight: var(--nijmegen-breadcrumb-navigation-font-weight);
+  line-height: var(--nijmegen-breadcrumb-navigation-line-height);
+  margin-block-end: var(--nijmegen-breadcrumb-margin-block-end);
+  overflow: hidden;
+}
+
+.nijmegen-breadcrumb__list {
+  block-size: 100%;
+  display: flex;
+  gap: var(--nijmegen-breadcrumb-navigation-list-column-gap);
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline: auto;
+  max-inline-size: var(--nijmegen-breadcrumb-navigation-list-max-inline-size);
+  padding-inline-end: var(--nijmegen-breadcrumb-navigation-list-padding-inline-end);
+  padding-inline-start: var(--nijmegen-breadcrumb-navigation-list-padding-inline-start);
+
+  @media (width <=576px) {
+    display: none;
+  }
+}
+
+ol.nijmegen-breadcrumb__list {
+  list-style: none;
+}
+
+.nijmegen-breadcrumb__item {
+  align-items: center;
+  display: flex;
+
+  &:not(:last-child) {
+    &::after {
+      background-color: var(--nijmegen-breadcrumb-navigation-separator-color);
+      content: "";
+      display: inline-block;
+      /* stylelint-disable-next-line property-disallowed-list */
+      height: var(--nijmegen-breadcrumb-navigation-separator-size);
+      margin-inline-start: var(--nijmegen-breadcrumb-navigation-list-column-gap);
+      mask-image: var(
+        --nijmegen-header-item-open-icon-image,
+        url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>')
+      );
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: 100%;
+      width: var(--nijmegen-breadcrumb-navigation-separator-size); /* stylelint-disable-line property-disallowed-list */
+    }
+  }
+}
+
+.nijmegen-breadcrumb__link {
+  @include utrecht-link;
+
+  padding-block-end: var(--nijmegen-breadcrumb-navigation-link-padding-block-end);
+  padding-block-start: var(--nijmegen-breadcrumb-navigation-link-padding-block-start);
+  padding-inline-end: var(--nijmegen-breadcrumb-navigation-link-padding-inline-end);
+  padding-inline-start: var(--nijmegen-breadcrumb-navigation-link-padding-inline-start);
+  text-decoration: var(--nijmegen-breadcrumb-navigation-link-text-decoration);
+  white-space: nowrap;
+}
+
+.nijmegen-breadcrumb__link--mobile {
+  display: inline-flex;
+  gap: var(--nijmegen-breadcrumb-navigation-link-icon-column-gap);
+  padding-inline-end: var(--nijmegen-breadcrumb-navigation-list-padding-inline-end);
+  padding-inline-start: var(--nijmegen-breadcrumb-navigation-list-padding-inline-start);
+
+  @media (width >=576px) {
+    display: none;
+  }
+
+  &::before {
+    background-color: currentColor;
+    content: "";
+    display: inline-block;
+    /* stylelint-disable-next-line property-disallowed-list */
+    height: var(--nijmegen-breadcrumb-navigation-link-icon-size, 1.5rem);
+    mask-image: var(
+      --nijmegen-breadcrumb-navigation-link-icon-image,
+      url('data:image/svg+xml, <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M5 12l6 6" /><path d="M5 12l6 -6" /></svg>')
+    );
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: 100%;
+    /* stylelint-disable-next-line property-disallowed-list */
+    width: var(--nijmegen-breadcrumb-navigation-link-icon-size, 1.5rem);
+  }
+}
+
+.nijmegen-breadcrumb__link--disabled {
+  color: var(--nijmegen-breadcrumb-navigation-link-current-color);
+  cursor: none;
+  pointer-events: none;
+}
+
+.nijmegen-breadcrumb__link--active,
+.nijmegen-breadcrumb__link:active {
+  color: var(--nijmegen-breadcrumb-navigation-link-active-color);
+  text-decoration: var(--nijmegen-breadcrumb-navigation-link-active-text-decoration);
+}
+
+.nijmegen-breadcrumb__link--hover,
+.nijmegen-breadcrumb__link:hover {
+  color: var(--nijmegen-breadcrumb-navigation-link-hover-color);
+  text-decoration: var(--nijmegen-breadcrumb-navigation-link-hover-text-decoration);
+}
+
+.nijmegen-breadcrumb__link--focus,
+.nijmegen-breadcrumb__link:has(:focus) {
+  @include utrecht-link--focus;
+  @include utrecht-focus-ring;
+}
+
+.nijmegen-breadcrumb__link--focus-visible,
+.nijmegen-breadcrumb__link:focus-visible {
+  @include utrecht-link--focus;
+  @include utrecht-focus-ring;
+}

package/card/index.scss

@@ -0,0 +1,152 @@
+/* stylelint-disable no-descending-specificity */
+
+@import "~@utrecht/link-css/src/mixin";
+@import "~@utrecht/focus-ring-css/src/mixin";
+@import "~@utrecht/unordered-list-css/src/mixin";
+
+.nijmegen-card {
+  background-color: var(--nijmegen-card-background-color);
+  border-color: var(--nijmegen-card-border-color);
+  border-radius: var(--nijmegen-card-border-radius);
+  border-style: solid;
+  border-width: var(--nijmegen-card-border-width);
+  color: var(--nijmegen-card-color);
+  display: flex;
+  flex-direction: column;
+  height: 100%; /* stylelint-disable-line property-disallowed-list */
+  position: relative;
+
+  /* stylelint-disable */
+  #storybook-root &,
+  #storybook-docs & {
+    max-width: var(--nijmegen-card-max-width, 328px);
+  }
+  /* stylelint-enable */
+}
+
+.nijmegen-card__link {
+  color: inherit;
+  text-decoration: var(--nijmegen-card-heading-text-decoration);
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &::after {
+    content: "";
+    inset: 0;
+    position: absolute;
+  }
+}
+
+.nijmegen-card__figure {
+  aspect-ratio: 12 / 9;
+  border-radius: var(--nijmegen-card-border-radius) var(--nijmegen-card-border-radius) 0 0;
+  display: inline-flex;
+  margin: 0; /* stylelint-disable-line property-disallowed-list */
+  order: -1;
+  overflow: hidden;
+
+  img {
+    height: 100%; /* stylelint-disable-line property-disallowed-list */
+    object-fit: cover;
+    object-position: center center;
+    width: 100%; /* stylelint-disable-line property-disallowed-list */
+  }
+}
+
+.nijmegen-card__inner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nijmegen-card-content-row-gap);
+  padding-block-end: var(--nijmegen-card-padding-block-end);
+  padding-block-start: var(--nijmegen-card-padding-block-start);
+  padding-inline-end: var(--nijmegen-card-padding-inline-end);
+  padding-inline-start: var(--nijmegen-card-padding-inline-start);
+
+  ul {
+    @include utrecht-unordered-list;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--nijmegen-card-metadata-column-gap);
+    padding-inline-start: 0;
+  }
+}
+
+.nijmegen-card__meta-item {
+  align-items: center;
+  display: flex;
+  gap: var(--nijmegen-card-metadata-column-gap);
+
+  svg {
+    block-size: var(--nijmegen-card-icon-size);
+  }
+}
+
+.nijmegen-card__footer {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  margin-block-start: auto;
+  padding-block-end: var(--nijmegen-card-padding-block-end);
+  padding-inline-end: var(--nijmegen-card-padding-inline-end);
+  padding-inline-start: var(--nijmegen-card-padding-inline-start);
+  > svg {
+    stroke: var(--nijmegen-card-action-icon-color);
+  }
+}
+
+.nijmegen-card--hover,
+.nijmegen-card:hover {
+  .nijmegen-card__link {
+    @include utrecht-link--hover;
+
+    color: var(--nijmegen-card-heading-hover-color);
+    text-decoration: var(--nijmegen-card-heading-hover-text-decoration);
+  }
+}
+
+.nijmegen-card--active,
+.nijmegen-card:active {
+  .nijmegen-card__link {
+    @include utrecht-link--active;
+
+    color: var(--nijmegen-card-heading-active-color);
+    text-decoration: var(--nijmegen-card-heading-active-text-decoration);
+  }
+}
+
+.nijmegen-card--focus,
+.nijmegen-card:has(:focus) {
+  @include utrecht-link--focus;
+
+  .nijmegen-card__link {
+    color: var(--nijmegen-card-heading-focus-visible-color);
+    text-decoration: var(--nijmegen-card-heading-focus-visible-text-decoration);
+  }
+}
+
+.nijmegen-card--focus-visible,
+.nijmegen-card:has(:focus-visible) {
+  @include utrecht-link--focus;
+
+  .nijmegen-card__footer > svg {
+    stroke: var(--nijmegen-card-color);
+  }
+
+  .nijmegen-card__figure img {
+    border-radius: var(--nijmegen-card-border-radius) var(--nijmegen-card-border-radius) 0 0;
+  }
+
+  .nijmegen-card__link {
+    color: var(--nijmegen-card-heading-focus-visible-color);
+    text-decoration: var(--nijmegen-card-heading-focus-visible-text-decoration);
+
+    &::after {
+      @include utrecht-focus-ring;
+
+      border-radius: var(--nijmegen-card-border-radius);
+    }
+  }
+}

package/dist/header.css

@@ -0,0 +1,207 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+/* stylelint-disable-next-line block-no-empty */
+.nijmegen-header {
+  background-color: var(--nijmegen-header-background-color, #fff);
+  writing-mode: horizontal-tb;
+}
+.nijmegen-header .nijmegen-search {
+  background-color: red;
+  inline-size: 100%;
+}
+
+.nijmegen-header__content {
+  align-items: center;
+  align-self: center;
+  border: 0 solid var(--nijmegen-header-border-color, transparent);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-inline: auto;
+  max-inline-size: var(--nijmegen-header-content-max-inline-size, 100%);
+  padding-block-end: var(--nijmegen-header-content-padding-block-end, 0);
+  padding-block-start: var(--nijmegen-header-content-padding-block-start, 0);
+  padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);
+  padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);
+  border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);
+}
+@media (width < 1024px) {
+  .nijmegen-header__content {
+    display: none;
+  }
+}
+
+.nijmegen-header__content--small {
+  position: relative;
+}
+.nijmegen-header__content--small--inner {
+  align-items: center;
+  align-self: center;
+  border: 0 solid var(--nijmegen-header-border-color, transparent);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-inline: auto;
+  max-inline-size: var(--nijmegen-header-content-max-inline-size, 100%);
+  padding-block-end: var(--nijmegen-header-content-padding-block-end, 0);
+  padding-block-start: var(--nijmegen-header-content-padding-block-start, 0);
+  padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);
+  padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);
+  border-block-end-width: var(--nijmegen-header-border-block-end-width, 0);
+}
+@media (width >= 1024px) {
+  .nijmegen-header__content--small {
+    display: none;
+  }
+}
+
+.nijmegen-header__mobile-menu {
+  background-color: var(--nijmegen-menu-background-color);
+  display: none;
+  padding-block-end: var(--nijmegen-menu-padding-block-end);
+  padding-block-start: var(--nijmegen-menu-padding-block-start);
+  position: absolute;
+  width: 100%; /* stylelint-disable-line property-disallowed-list */
+  z-index: 10;
+}
+.nijmegen-header__mobile-menu nijmegen-search,
+.nijmegen-header__mobile-menu .nijmegen-search {
+  display: block;
+  max-inline-size: calc(100% - var(--nijmegen-header-content-padding-inline-end, 0) - var(--nijmegen-header-content-padding-inline-start, 0));
+  padding-inline-end: var(--nijmegen-header-content-padding-inline-end, 0);
+  padding-inline-start: var(--nijmegen-header-content-padding-inline-start, 0);
+}
+.nijmegen-header__mobile-menu--visible {
+  display: block;
+}
+
+.nijmegen-header__navigation,
+.nijmegen-header__actions {
+  column-gap: var(--nijmegen-header-content-column-gap, 0);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.nijmegen-header__panel {
+  display: none;
+  left: 0; /* stylelint-disable-line property-disallowed-list */
+  padding-block-start: 1.5rem;
+  position: absolute;
+  width: 100%; /* stylelint-disable-line property-disallowed-list */
+  z-index: 10;
+}
+.nijmegen-header__panel--small {
+  width: auto; /* stylelint-disable-line property-disallowed-list */
+}
+
+.nijmegen-header-action--relative {
+  position: relative;
+}
+.nijmegen-header-action--relative .nijmegen-header__panel {
+  left: auto; /* stylelint-disable-line property-disallowed-list */
+  right: 0; /* stylelint-disable-line property-disallowed-list */
+}
+.nijmegen-header-action--relative .nijmegen-header__panel .nijmegen-listbox {
+  min-inline-size: 240px;
+}
+
+.nijmegen-header-item {
+  all: unset; /* stylelint-disable-line order/properties-alphabetical-order */
+  align-items: end; /* stylelint-disable-line order/properties-alphabetical-order */
+  color: var(--nijmegen-header-item-color, #000);
+  column-gap: var(--nijmegen-header-item-column-gap, 0);
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  font-family: var(--nijmegen-header-item-font-family, inherit);
+  font-size: var(--nijmegen-header-item-font-size, 1rem);
+  font-weight: var(--nijmegen-header-item-font-weight, 400);
+  justify-content: space-between;
+  line-height: var(--nijmegen-header-item-line-height, 1.5);
+  text-decoration: none;
+  user-select: none;
+}
+.nijmegen-header-item[aria-expanded]::after {
+  background-color: var(--nijmegen-header-item-color, #000);
+  content: "";
+  display: inline-block;
+  /* stylelint-disable-next-line property-disallowed-list */
+  height: var(--nijmegen-header-item-icon-size, 1.5rem);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: 100%;
+  width: var(--nijmegen-header-item-icon-size, 1.5rem); /* stylelint-disable-line property-disallowed-list */
+}
+.nijmegen-header-item--active, .nijmegen-header-item[aria-expanded=true] {
+  -webkit-text-stroke-width: 1px;
+}
+.nijmegen-header-item--active + .nijmegen-header__panel, .nijmegen-header-item[aria-expanded=true] + .nijmegen-header__panel {
+  display: block;
+}
+.nijmegen-header-item[aria-expanded=false]::after {
+  mask-image: var(--nijmegen-header-item-open-icon-image, url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 9l6 6l6 -6" /></svg>'));
+}
+.nijmegen-header-item[aria-expanded=true]::after {
+  mask-image: var(--nijmegen-header-item-open-icon-image, url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-up"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 15l6 -6l6 6" /></svg>'));
+}
+.nijmegen-header-item[class*=nijmegen-header-item--icon-]::before {
+  background-color: var(--nijmegen-header-item-color, #000);
+  content: "";
+  display: inline-block;
+  /* stylelint-disable-next-line property-disallowed-list */
+  height: var(--nijmegen-header-item-icon-size, 1.5rem);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: 100%;
+  width: var(--nijmegen-header-item-icon-size, 1.5rem); /* stylelint-disable-line property-disallowed-list */
+}
+.nijmegen-header-item[class*=nijmegen-header-item--icon-][aria-expanded]::after {
+  all: unset;
+}
+.nijmegen-header-item[class*=nijmegen-header-item--icon-][aria-expanded=true]::before {
+  mask-image: var(--nijmegen-header-item-close-icon-image, url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>'));
+}
+.nijmegen-header-item--icon-search::before {
+  mask-image: var(--nijmegen-header-item-search-icon-image, url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>'));
+}
+@media (width < 1280px) {
+  .nijmegen-header-item--icon-user span {
+    display: none;
+  }
+}
+.nijmegen-header-item--icon-user::before {
+  mask-image: var(--nijmegen-header-item-search-icon-image, url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-user"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>'));
+}
+.nijmegen-header-item:hover, .nijmegen-header-item--hover {
+  color: var(--nijmegen-header-item-hover-color, #000);
+  text-decoration: var(--nijmegen-header-item-hover-text-decoration, none);
+}
+.nijmegen-header-item:hover::before, .nijmegen-header-item:hover::after, .nijmegen-header-item--hover::before, .nijmegen-header-item--hover::after {
+  background-color: var(--nijmegen-header-item-hover-color, #000);
+}
+.nijmegen-header-item:active, .nijmegen-header-item--active {
+  color: var(--nijmegen-header-item-active-color, #000);
+  text-decoration: var(--nijmegen-header-item-active-text-decoration, none);
+}
+.nijmegen-header-item:focus-visible, .nijmegen-header-item--focus-visible {
+  /* - The browser default focus ring should apply when these CSS custom properties are not set.
+   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
+   *   can combine it with the focus ring box shadow.
+   */
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
+  background-color: var(--nijmegen-header-item-focus-visible-background-color, #fff);
+  color: var(--nijmegen-header-item-focus-visible-color, #000);
+}