@amsterdam/design-system-css 0.14.1 → 0.16.0

package/src/components/header/header.scss

@@ -1,216 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-@use "../../common/breakpoint" as *;
-@use "../../common/text-rendering" as *;
-
-.ams-header {
-  /*
-  * The branding section is created twice: once outside the navigation and once hidden inside it.
-  * This keeps all navigation in one nav element and lets the menu wrap around the branding section.
-  * Display grid is used to let both branding sections overlap.
-  */
-  display: grid;
-  padding-block: var(--ams-header-padding-block);
-  padding-inline: var(--ams-header-padding-inline);
-}
-
-.ams-header__branding {
-  align-items: center;
-  align-self: start; // To align the branding section to the top of the header when it wraps
-  column-gap: var(--ams-header-branding-column-gap);
-  display: flex;
-  grid-area: 1 / 1; // To allow this section to overlap with the second branding section
-}
-
-.ams-header__branding--hidden {
-  opacity: 0%;
-  user-select: none; // The hidden branding section should not be selectable
-}
-
-.ams-header__logo-link {
-  outline-offset: var(--ams-header-logo-link-outline-offset);
-}
-
-/* TODO Remove after updating Heading line heights in DES-973. */
-.ams-heading.ams-header__brand-name {
-  line-height: 1.35;
-}
-
-.ams-header__navigation {
-  column-gap: var(--ams-header-navigation-column-gap);
-  display: flex;
-  flex-wrap: wrap;
-  grid-area: 1 / 1; // To allow this section to overlap with the branding section
-  // This section blocks pointer events initially, so the hidden branding section can't be activated.
-  // The menu and collapsible menu set it back to auto, to make sure they can be activated.
-  pointer-events: none;
-  row-gap: var(--ams-header-navigation-row-gap);
-}
-
-@mixin reset-list {
-  list-style: none;
-  margin-block: 0;
-  padding-inline-start: 0;
-}
-
-.ams-header__menu {
-  align-items: center;
-  column-gap: var(--ams-header-menu-column-gap);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  margin-inline-start: auto;
-  pointer-events: auto; // Set pointer events back to auto to allow the menu to be activated
-  row-gap: var(--ams-header-menu-row-gap);
-
-  @include reset-list;
-}
-
-// Do not show menu items below the wide breakpoint...
-.ams-header__menu-item {
-  @media screen and (not (min-width: $ams-breakpoint-wide)) {
-    display: none;
-  }
-}
-
-// ...unless they're fixed.
-.ams-header__menu-item--fixed {
-  display: revert;
-}
-
-@mixin header-menu-action {
-  color: var(--ams-header-menu-item-color);
-  font-family: var(--ams-header-menu-item-font-family);
-  font-size: var(--ams-header-menu-item-font-size);
-  font-weight: var(--ams-header-menu-item-font-weight);
-  line-height: var(--ams-header-menu-item-line-height);
-  outline-offset: var(--ams-header-menu-item-outline-offset);
-  padding-block: var(--ams-header-menu-item-padding-block);
-  touch-action: manipulation;
-  white-space: nowrap;
-
-  @include text-rendering;
-
-  &:hover {
-    color: var(--ams-header-menu-item-hover-color);
-  }
-}
-
-.ams-header__menu-link {
-  display: inline-block;
-  text-decoration-line: var(--ams-header-menu-link-text-decoration-line);
-  text-decoration-thickness: var(--ams-header-menu-link-text-decoration-thickness);
-  text-underline-offset: var(--ams-header-menu-link-text-underline-offset);
-
-  @include header-menu-action;
-
-  &:hover {
-    text-decoration-line: var(--ams-header-menu-link-hover-text-decoration-line);
-  }
-}
-
-.ams-header__mega-menu-button-item--hide-on-wide-window {
-  @media screen and (min-width: $ams-breakpoint-wide) {
-    display: none;
-  }
-}
-
-@mixin reset-button {
-  background: none;
-  border: 0;
-  margin-block: 0; // [1]
-  margin-inline: 0; // [1]
-  padding-inline: 0;
-
-  // [1] Remove the margin in older Safari.
-}
-
-.ams-header__mega-menu-button {
-  column-gap: var(--ams-header-menu-item-column-gap);
-  cursor: pointer;
-  display: grid;
-  grid-auto-flow: column;
-
-  @include header-menu-action;
-  @include reset-button;
-}
-
-.ams-header__mega-menu-button[aria-expanded="true"] {
-  font-weight: var(--ams-header-mega-menu-button-label-open-font-weight);
-}
-
-.ams-header__mega-menu-button-label,
-.ams-header__mega-menu-button-hidden-label {
-  grid-area: 1 / 1; // To allow the label and the hidden label to overlap
-}
-
-// This hidden label is used to prevent a layout shift when the mega menu is opened
-// and the button text becomes bold.
-.ams-header__mega-menu-button-hidden-label {
-  font-weight: var(--ams-header-mega-menu-button-label-open-font-weight);
-  pointer-events: none;
-  user-select: none;
-  visibility: hidden;
-}
-
-.ams-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-header__menu-icon-top {
-    translate: 0 -7px;
-  }
-
-  .ams-header__menu-icon-bottom {
-    translate: 0 7px;
-  }
-}
-
-.ams-header__menu-icon--open {
-  .ams-header__menu-icon-top {
-    rotate: 45deg;
-    translate: 0;
-  }
-  .ams-header__menu-icon-middle {
-    opacity: 0%;
-  }
-  .ams-header__menu-icon-bottom {
-    rotate: -45deg;
-    translate: 0;
-  }
-}
-
-.ams-header__mega-menu {
-  inline-size: 100%;
-  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.
-  // The grid inline padding is set on the header element.
-  & .ams-grid {
-    padding-inline: 0;
-  }
-}
-
-.ams-header__mega-menu--closed.ams-header__mega-menu--closed {
-  display: none;
-}
-
-.ams-header__grid-cell-narrow-window-only {
-  @media screen and (min-width: $ams-breakpoint-wide) {
-    display: none;
-  }
-}

package/src/components/mega-menu/README.md

@@ -1,3 +0,0 @@
-<!-- @license CC0-1.0 -->
-
-# Mega Menu

package/src/components/mega-menu/mega-menu.scss

@@ -1,16 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-.ams-mega-menu__list-category {
-  column-gap: var(--ams-mega-menu-list-category-column-gap);
-  column-width: var(--ams-mega-menu-list-category-column-width);
-
-  // TODO Move to bottom margin of heading
-  padding-block-start: var(--ams-mega-menu-list-category-padding-block-start);
-
-  &:not(:last-child) {
-    padding-block-end: var(--ams-mega-menu-list-category-padding-block-end);
-  }
-}

package/src/components/page-menu/README.md

@@ -1,24 +0,0 @@
-<!-- @license CC0-1.0 -->
-
-# Page Menu
-
-A small set of links for use in the Header and Footer.
-
-## Guidelines
-
-- Limit the amount of menu items in the Header to 5 items or less, including ‘Search’ and ‘Menu’.
-- The menu should fit on a single line and is right-aligned.
-- The menu in the footer is left-aligned.
-- Submenus are not allowed.
-- The ‘Menu’ button opens the Mega Menu.
-- On narrow screens, menu items other than ‘Search’ and ‘Menu’ move from the Page Menu to the Mega Menu.
-
-### Using links with routing libraries
-
-Check out the [developer guide](/docs/docs-developer-guide-routing-libraries--docs) on how to integrate links with external routing libraries.
-
-## Relevant WCAG requirements
-
-- [Consistent Navigation (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html)
-
-Page Menu is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply.

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

@@ -1,67 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-@use "../../common/text-rendering" as *;
-
-@mixin reset-ul {
-  margin-block: 0;
-  padding-inline: 0;
-}
-
-.ams-page-menu {
-  align-items: center;
-  box-sizing: border-box;
-  column-gap: var(--ams-page-menu-column-gap);
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  list-style: none;
-  row-gap: var(--ams-page-menu-row-gap);
-
-  @include reset-ul;
-}
-
-.ams-page-menu--align-end {
-  justify-content: end;
-}
-
-.ams-page-menu--no-wrap {
-  flex-wrap: nowrap;
-}
-
-@mixin page-menu-item {
-  color: var(--ams-page-menu-item-color);
-  display: inline-flex;
-  flex-direction: row;
-  font-family: var(--ams-page-menu-item-font-family);
-  font-size: var(--ams-page-menu-item-font-size);
-  font-weight: var(--ams-page-menu-item-font-weight);
-  gap: var(--ams-page-menu-item-gap);
-  line-height: var(--ams-page-menu-item-line-height);
-  outline-offset: var(--ams-page-menu-item-outline-offset);
-  text-align: center;
-  text-decoration-line: var(--ams-page-menu-item-text-decoration-line);
-  text-decoration-thickness: var(--ams-page-menu-item-text-decoration-thickness);
-  text-underline-offset: var(--ams-page-menu-item-text-underline-offset);
-  touch-action: manipulation;
-  white-space: nowrap;
-}
-
-.ams-page-menu__link {
-  box-sizing: border-box;
-
-  @include page-menu-item;
-  @include text-rendering;
-}
-
-.ams-page-menu__link:hover,
-.ams-page-menu__button:hover {
-  color: var(--ams-page-menu-item-hover-color);
-  text-decoration-line: var(--ams-page-menu-item-hover-text-decoration-line);
-}
-
-.ams-page-menu__link svg {
-  color: currentColor;
-}

package/src/components/screen/README.md

@@ -1,23 +0,0 @@
-<!-- @license CC0-1.0 -->
-
-# Screen
-
-Manages the maximum width and alignment of the entire website or application.
-
-## Guidelines
-
-- This should be the outermost component of your website or application.
-- Within it, combine components such as
-  [Grid](/docs/components-layout-grid--docs),
-  [Header](/docs/components-containers-header--docs),
-  [Footer](/docs/components-containers-footer--docs),
-  [Spotlight](/docs/components-containers-spotlight--docs),
-  [Image Slider](/docs/components-media-image-slider--docs),
-  and Figure.
-
-## Design
-
-By default, this component expands to a width of 1600 pixels.
-This is the maximum width for a website of the City of Amsterdam.
-For applications, you can choose a larger maximum width of 2112 pixels.
-The component horizontally centres both itself and its content.

package/src/components/screen/screen.scss

@@ -1,23 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-.ams-screen {
-  background-color: var(--ams-screen-background-color);
-  box-sizing: border-box;
-  margin-inline: auto;
-  position: relative;
-}
-
-.ams-screen--full-height {
-  min-block-size: 100vh;
-}
-
-.ams-screen--wide {
-  max-inline-size: var(--ams-screen-wide-max-inline-size);
-}
-
-.ams-screen--x-wide {
-  max-inline-size: var(--ams-screen-x-wide-max-inline-size);
-}

package/src/components/top-task-link/README.md

@@ -1,27 +0,0 @@
-<!-- @license CC0-1.0 -->
-
-# Top Task Link
-
-A prominent navigation element to quickly start a task.
-
-## Guidelines
-
-- A Top Task Link has both a title and a description.
-- The title describes the essence of the page being referred to, attracting attention when scanning the page.
-- The description provides more context, helping the user confirm that they can indeed achieve their goal on the linked page.
-- Keep both texts concise.
-  A title consists of a few words, and the description consists of 1 or 2 short sentences.
-  The description should end with a period or another appropriate punctuation mark.
-- For wide windows, place 3 or 4 Top Task Links side by side on the [Grid](/docs/components-layout-grid--docs).
-  If you have more Top Task Links, place them in the next row.
-  Try to distribute the amount of links on wide windows over rows of 3 or 4 links.
-  If this is not possible, leave the last cells of the grid empty.
-- If you have a group of links for which a description is unnecessary or illogical, use a [Link List](/docs/components-navigation-link--docs).
-
-### Using links with routing libraries
-
-Check out the [developer guide](/docs/docs-developer-guide-routing-libraries--docs) on how to integrate links with external routing libraries.
-
-## Relevant WCAG requirements
-
-The Top Task Link is subject to the same requirements as [regular links](/docs/components-navigation-link--docs).

package/src/components/top-task-link/top-task-link.scss

@@ -1,45 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-@use "../../common/hyphenation" as *;
-@use "../../common/text-rendering" as *;
-
-.ams-top-task-link {
-  break-inside: avoid;
-  display: flex;
-  flex-direction: column;
-  gap: var(--ams-top-task-link-gap);
-  outline-offset: var(--ams-top-task-link-outline-offset);
-  text-decoration: none;
-}
-
-.ams-top-task-link__label {
-  box-sizing: border-box;
-  color: var(--ams-top-task-link-label-color);
-  font-family: var(--ams-top-task-link-label-font-family);
-  font-size: var(--ams-top-task-link-label-font-size);
-  font-weight: var(--ams-top-task-link-label-font-weight);
-  line-height: var(--ams-top-task-link-label-line-height);
-  text-decoration-line: var(--ams-top-task-link-label-text-decoration-line);
-  text-decoration-thickness: var(--ams-top-task-link-label-text-decoration-thickness);
-  text-underline-offset: var(--ams-top-task-link-label-text-underline-offset);
-
-  @include hyphenation;
-  @include text-rendering;
-}
-
-.ams-top-task-link:hover .ams-top-task-link__label {
-  color: var(--ams-top-task-link-label-hover-color);
-  text-decoration-line: var(--ams-top-task-link-label-hover-text-decoration-line);
-}
-
-.ams-top-task-link__description {
-  box-sizing: border-box;
-  color: var(--ams-top-task-link-description-color);
-  font-family: var(--ams-top-task-link-description-font-family);
-  font-size: var(--ams-top-task-link-description-font-size);
-  font-weight: var(--ams-top-task-link-description-font-weight);
-  line-height: var(--ams-top-task-link-description-line-height);
-}