@amsterdam/design-system-css 2.1.0 → 3.0.0

package/src/components/page-header/page-header.scss

@@ -138,7 +138,8 @@
 }
 
 .ams-page-header__menu-link {
-  display: inline-block;
+  display: inline-flex;
+  gap: var(--ams-page-header-menu-link-gap);
   text-decoration-line: var(--ams-page-header-menu-link-text-decoration-line);
   text-decoration-thickness: var(--ams-page-header-menu-link-text-decoration-thickness);
   text-underline-offset: var(--ams-page-header-menu-link-text-underline-offset);
@@ -150,6 +151,10 @@
   }
 }
 
+.ams-page-header__mega-menu-button-item {
+  display: initial; // Override the `hidden` attribute; the mega menu list item is only shown when CSS loads.
+}
+
 .ams-page-header__mega-menu-button-item--hide-on-wide-window {
   @media screen and (min-width: $ams-breakpoint-wide) {
     display: none;
@@ -199,46 +204,39 @@
   visibility: hidden;
 }
 
-.ams-page-header__menu-icon {
-  line {
-    stroke: currentColor;
-    stroke-width: 3px;
-    transform-origin: center;
-    transition:
-      translate 0.1s ease-in-out,
-      rotate 0.2s ease-in-out,
-      opacity 0.1s ease-in-out;
-
-    @media (prefers-reduced-motion) {
-      transition: none;
-    }
-  }
-
-  .ams-page-header__menu-icon-top {
-    translate: 0 -7px;
-  }
-
-  .ams-page-header__menu-icon-bottom {
-    translate: 0 7px;
+.ams-page-header__menu-icon-top,
+.ams-page-header__menu-icon-middle,
+.ams-page-header__menu-icon-bottom {
+  transform-origin: center;
+  transition:
+    opacity 0.1s ease-in-out,
+    rotate 0.2s ease-in-out,
+    translate 0.1s ease-in-out;
+
+  @media (prefers-reduced-motion) {
+    transition: none;
   }
 }
 
 .ams-page-header__menu-icon--open {
   .ams-page-header__menu-icon-top {
     rotate: 45deg;
-    translate: 0;
+    translate: -4px 4px;
   }
+
   .ams-page-header__menu-icon-middle {
     opacity: 0%;
   }
+
   .ams-page-header__menu-icon-bottom {
     rotate: -45deg;
-    translate: 0;
+    translate: -4px -4px;
   }
 }
 
 .ams-page-header__mega-menu {
   inline-size: 100%;
+  padding-block: var(--ams-page-header-mega-menu-padding-block);
   pointer-events: auto; // Set pointer events back to auto to allow the mega menu to be activated
 
   // Remove inline padding from Grids that are used in the mega menu.
@@ -253,6 +251,8 @@
 }
 
 .ams-page-header__grid-cell-narrow-window-only {
+  display: initial; // Override the `hidden` attribute; this cell duplicates the non-fixed links in the Page Header Menu.
+
   @media screen and (min-width: $ams-breakpoint-wide) {
     display: none;
   }

package/src/components/paragraph/paragraph.scss

@@ -23,14 +23,29 @@
   @include reset-p;
 }
 
+.ams-paragraph--large {
+  font-size: var(--ams-paragraph-large-font-size);
+  line-height: var(--ams-paragraph-large-line-height);
+
+  /*
+   * If text-wrap is not supported, it is ignored.
+   * This means the wrapped text will look less balanced, which is fine.
+   */
+  /* stylelint-disable-next-line plugin/use-baseline */
+  text-wrap: var(--ams-paragraph-large-text-wrap);
+}
+
+.ams-paragraph__b {
+  font-weight: inherit;
+}
+
 .ams-paragraph--small {
   font-size: var(--ams-paragraph-small-font-size);
   line-height: var(--ams-paragraph-small-line-height);
 }
 
-.ams-paragraph--large {
-  font-size: var(--ams-paragraph-large-font-size);
-  line-height: var(--ams-paragraph-large-line-height);
+.ams-paragraph__small {
+  font-size: inherit;
 }
 
 .ams-paragraph--inverse {

package/dist/app/app.css

@@ -1,40 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-/**
- * CSS Custom properties cannot be used in media queries.
- * We resort to Sass variables for our breakpoint values.
- */
-/** The breakpoint at which medium screens start. */
-/** The breakpoint at which wide screens start. */
-.ams-app {
-  display: grid;
-  grid-template-areas: "header" "navigation" "content" "footer";
-}
-.ams-app .ams-app-navigation {
-  grid-area: navigation;
-}
-.ams-app .ams-page-header {
-  grid-area: header;
-}
-.ams-app .ams-app-content {
-  grid-area: content;
-}
-.ams-app .ams-page-footer {
-  grid-area: footer;
-}
-@media screen and (min-width: 72.5rem) {
-  .ams-app {
-    grid-template-areas: "navigation header" "navigation content" "navigation footer";
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto 1fr auto;
-    min-block-size: 100dvh;
-  }
-}
-
-/*# sourceMappingURL=app.css.map */

package/dist/app/app.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/app/app.scss","../../src/common/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAKA;AAGA;ADNA;EACE;EACA,qBACE;;AAKF;EACE;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EAzBF;IA0BI,qBACE;IAGF;IACA;IACA","file":"app.css"}

package/dist/app-navigation/app-navigation.css

@@ -1,249 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-/**
- * CSS Custom properties cannot be used in media queries.
- * We resort to Sass variables for our breakpoint values.
- */
-/** The breakpoint at which medium screens start. */
-/** The breakpoint at which wide screens start. */
-.ams-app-navigation {
-  align-items: flex-start;
-  background: var(--ams-app-navigation-background-color);
-  display: grid;
-  grid-template-rows: 88px 1fr;
-  max-block-size: 0;
-  min-inline-size: var(--ams-app-navigation-inline-size);
-  overflow: hidden;
-}
-.ams-app-navigation--expanded {
-  max-block-size: 1000px;
-}
-@media screen and (min-width: 72.5rem) {
-  .ams-app-navigation--expanded {
-    max-block-size: initial;
-    min-inline-size: var(--ams-app-navigation-expanded-inline-size);
-  }
-}
-@media screen and (min-width: 72.5rem) {
-  .ams-app-navigation {
-    max-block-size: initial;
-    overflow: initial;
-  }
-}
-@supports (grid-template-rows: subgrid) {
-  .ams-app-navigation {
-    grid-template-rows: subgrid;
-  }
-}
-
-.ams-app-navigation .ams-app-navigation__toggle {
-  align-self: center;
-  display: none;
-  justify-self: flex-end;
-}
-@media screen and (min-width: 72.5rem) {
-  .ams-app-navigation .ams-app-navigation__toggle {
-    display: initial;
-  }
-}
-
-.ams-app-navigation--expanded .ams-app-navigation__toggle {
-  rotate: 180deg;
-}
-
-.ams-app-navigation__menu {
-  block-size: 0;
-  container-name: appnavigation;
-  container-type: inline-size;
-  flex-direction: column;
-  gap: var(--ams-space-m);
-  grid-row-start: 2;
-  inset-block-start: var(--ams-space-m);
-  list-style: none;
-  list-style-type: none;
-  margin-block: 0;
-  padding-block: 0;
-  padding-inline: 0;
-  position: sticky;
-}
-.ams-app-navigation__menu:not([popover]) {
-  display: flex;
-}
-@media screen and (max-width: 72.5rem) {
-  .ams-app-navigation--expanded .ams-app-navigation__menu {
-    block-size: auto;
-    padding-block: var(--ams-space-m);
-  }
-}
-@media screen and (min-width: 72.5rem) {
-  .ams-app-navigation__menu {
-    block-size: initial;
-    gap: 0;
-    padding-block: 0;
-    padding-inline: 0;
-  }
-  .ams-app-navigation--expanded .ams-app-navigation__menu {
-    block-size: initial;
-    padding-block: 0;
-  }
-}
-@supports (grid-template-rows: subgrid) {
-  .ams-app-navigation__menu {
-    grid-row-start: content-start;
-  }
-}
-
-.ams-app-navigation__menu-link {
-  align-items: center;
-  background: none;
-  border-block: none;
-  border-inline-end: 4px solid var(--ams-app-navigation-background-color);
-  border-inline-start: none;
-  color: var(--ams-app-navigation-menu-link-color);
-  column-gap: var(--ams-space-m);
-  display: flex;
-  flex-direction: column;
-  font-family: var(--ams-app-navigation-menu-link-font-family);
-  font-size: var(--ams-app-navigation-menu-link-font-size);
-  font-weight: var(--ams-app-navigation-menu-link-font-weight);
-  line-height: var(--ams-app-navigation-menu-link-line-height);
-  margin-block: 0;
-  margin-inline: 0;
-  outline-offset: var(--ams-app-navigation-menu-link-outline-offset);
-  padding-block: var(--ams-space-m);
-  text-decoration-line: var(--ams-app-navigation-menu-link-text-decoration-line);
-  text-decoration-thickness: var(--ams-app-navigation-menu-link-text-decoration-thickness);
-  text-underline-offset: var(--ams-app-navigation-menu-link-text-underline-offset);
-}
-.ams-app-navigation__menu-link .ams-app-navigation__menu-link-label {
-  flex-grow: 1;
-}
-.ams-app-navigation__menu-link .ams-icon {
-  align-self: initial; /* Workaround to center the icon */
-}
-.ams-app-navigation__menu-item--open .ams-app-navigation__menu-link .ams-app-navigation__menu-link-chevron {
-  rotate: 180deg;
-}
-.ams-app-navigation__menu-link[popovertarget] {
-  inline-size: 100%;
-}
-.ams-app-navigation__menu-link[popovertarget] .ams-app-navigation__menu-link-chevron {
-  display: none;
-}
-@container appnavigation (min-width: 120px) {
-  .ams-app-navigation__menu-link {
-    flex-direction: row;
-    justify-content: flex-start;
-    padding-block: var(--ams-space-s);
-    padding-inline: var(--ams-space-l) var(--ams-space-m);
-  }
-}
-.ams-app-navigation__menu-link:hover:not(.ams-app-navigation__menu-link--active) {
-  background-color: var(--ams-app-navigation-menu-link-hover-background-color);
-  border-inline-end-color: var(--ams-color-interactive-hover);
-}
-.ams-app-navigation__menu-link--active {
-  border-inline-end-color: var(--ams-color-interactive-inverse);
-}
-.ams-app-navigation__menu-link[popoverTarget=projecten-menu] {
-  anchor-name: --projecten-menu;
-}
-.ams-app-navigation__menu-link[popoverTarget=rapportages-menu] {
-  anchor-name: --rapportages-menu;
-}
-
-.ams-app-navigation__menu[popover] {
-  background: var(--ams-app-navigation-background-color);
-  block-size: auto;
-  border: none;
-  display: none;
-  inline-size: auto;
-  /* stylelint-disable-next-line property-disallowed-list */
-  inset: auto;
-  inset-block-start: anchor(top);
-  inset-inline-start: anchor(right);
-  margin-inline-start: 2px;
-  opacity: 0%;
-  position: absolute;
-  transition: opacity 0.4s, display 0.4s, overlay 0.4s;
-  transition-behavior: allow-discrete;
-}
-.ams-app-navigation__menu[popover] .ams-app-navigation__menu-link {
-  flex-direction: row;
-  justify-content: flex-start;
-  padding-inline: var(--ams-space-s);
-}
-.ams-app-navigation__menu[popover] .ams-app-navigation__menu-link:hover {
-  background-color: var(--ams-app-navigation-menu-link-hover-background-color);
-  border-inline-end-color: var(--ams-color-interactive-hover);
-}
-.ams-app-navigation__menu[popover][id=projecten-menu] {
-  /* stylelint-disable-next-line csstools/use-logical */
-  left: anchor(--projecten-menu right);
-  position-anchor: --projecten-menu;
-  position-try-fallbacks: --bottom;
-  /* stylelint-disable-next-line csstools/use-logical */
-  top: anchor(--projecten-menu top);
-}
-.ams-app-navigation__menu[popover][id=rapportages-menu] {
-  /* stylelint-disable-next-line csstools/use-logical */
-  left: anchor(--rapportages-menu right);
-  position-anchor: --rapportages-menu;
-  position-try-fallbacks: --bottom;
-  /* stylelint-disable-next-line csstools/use-logical */
-  top: anchor(--rapportages-menu top);
-}
-
-.ams-app-navigation__menu:popover-open {
-  border: none;
-  box-sizing: border-box;
-  display: flex;
-  gap: var(--ams-space-xs);
-  inline-size: 240px;
-  opacity: 100%;
-}
-@starting-style {
-  .ams-app-navigation__menu:popover-open {
-    display: flex;
-    opacity: 0%;
-  }
-}
-
-.ams-app-navigation__menu-item {
-  overflow: hidden;
-}
-.ams-app-navigation__menu-item .ams-app-navigation__menu:not([popover]) {
-  background-color: white;
-  block-size: 0;
-  gap: 0;
-  padding-block: 0;
-}
-.ams-app-navigation__menu-item .ams-app-navigation__menu:not([popover]) .ams-app-navigation__menu-link {
-  border-inline-end-color: var(--ams-color-interactive-inverse);
-  color: var(--ams-color-interactive);
-  padding-block: var(--ams-space-xs);
-}
-.ams-app-navigation__menu-item .ams-app-navigation__menu:not([popover]) .ams-app-navigation__menu-link .ams-icon {
-  rotate: 0deg;
-}
-.ams-app-navigation__menu-item .ams-app-navigation__menu:not([popover]) .ams-app-navigation__menu-link:hover {
-  background-color: white;
-  color: var(--ams-color-interactive-hover);
-  text-decoration-line: var(--ams-app-navigation-menu-link-hover-text-decoration-line);
-}
-.ams-app-navigation__menu-item--open .ams-app-navigation__menu:not([popover]) {
-  block-size: auto;
-}
-
-@position-try --bottom {
-  inset-block-end: anchor(bottom);
-  inset-inline-start: anchor(right);
-}
-
-/*# sourceMappingURL=app-navigation.css.map */

package/dist/app-navigation/app-navigation.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/app-navigation/app-navigation.scss","../../src/common/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAKA;AAGA;ADNA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;IACA;;;AAIJ;EAlBF;IAmBI;IACA;;;AAGF;EAvBF;IAwBI;;;;AAIJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;IACE;IACA;;;AAIJ;EA1BF;IA2BI;IACA;IACA;IACA;;EAEA;IACE;IACA;;;AAIJ;EAtCF;IAuCI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EA5CF;IA6CI;IACA;IACA;IACA;;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAGF;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;AACE;EACA;EACA;EACA;AACA;EACA;;AAGF;AACE;EACA;EACA;EACA;AACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAMJ;EACE;;;AAKN;EACE;EACA","file":"app-navigation.css"}