@amsterdam/design-system-css 0.15.0 → 0.16.0

package/dist/header/header.css

@@ -1 +0,0 @@
-.ams-header{display:grid;font-family:var(--ams-header-font-family);padding-block:var(--ams-header-padding-block);padding-inline:var(--ams-header-padding-inline)}.ams-header__logo-link{align-items:center;align-self:start;column-gap:var(--ams-header-logo-link-column-gap);display:flex;grid-area:1/1;inline-size:fit-content;outline-offset:var(--ams-header-logo-link-outline-offset);text-decoration:none}.ams-header__logo-link--hidden{opacity:0%;user-select:none}.ams-header__logo-container{flex-shrink:0;inline-size:.75rem;overflow:hidden}@media screen and (min-width: 36rem){.ams-header__logo-container{inline-size:auto}}.ams-header__brand-name{color:var(--ams-header-brand-name-color);font-size:var(--ams-header-brand-name-font-size);font-weight:var(--ams-header-brand-name-font-weight);line-height:1.35}.ams-header__navigation{column-gap:var(--ams-header-navigation-column-gap);display:flex;flex-wrap:wrap;grid-area:1/1;pointer-events:none;row-gap:var(--ams-header-navigation-row-gap)}.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;row-gap:var(--ams-header-menu-row-gap);list-style:none;margin-block:0;padding-inline-start:0}@media screen and not (min-width: 68rem){.ams-header__menu-item{display:none}}.ams-header__menu-item--fixed{display:revert}.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);color:var(--ams-header-menu-item-color);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;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-header__menu-link:hover{color:var(--ams-header-menu-item-hover-color)}.ams-header__menu-link:hover{text-decoration-line:var(--ams-header-menu-link-hover-text-decoration-line)}@media screen and (min-width: 68rem){.ams-header__mega-menu-button-item--hide-on-wide-window{display:none}}.ams-header__mega-menu-button{column-gap:var(--ams-header-menu-item-column-gap);cursor:var(--ams-header-mega-menu-button-cursor);display:grid;font-family:inherit;grid-auto-flow:column;color:var(--ams-header-menu-item-color);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;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;background:none;border:none;margin-block:0;margin-inline:0;padding-inline:0}.ams-header__mega-menu-button:hover{color:var(--ams-header-menu-item-hover-color)}.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}.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 .1s ease-in-out,rotate .2s ease-in-out,opacity .1s ease-in-out}@media(prefers-reduced-motion){.ams-header__menu-icon line{transition:none}}.ams-header__menu-icon .ams-header__menu-icon-top{translate:0 -7px}.ams-header__menu-icon .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--open .ams-header__menu-icon-middle{opacity:0%}.ams-header__menu-icon--open .ams-header__menu-icon-bottom{rotate:-45deg;translate:0}.ams-header__mega-menu{inline-size:100%;pointer-events:auto}.ams-header__mega-menu .ams-grid{padding-inline:0}.ams-header__mega-menu--closed.ams-header__mega-menu--closed{display:none}@media screen and (min-width: 68rem){.ams-header__grid-cell-narrow-window-only{display:none}}/*# sourceMappingURL=header.css.map */

package/dist/header/header.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/header/header.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAQA,YAME,aACA,0CACA,8CACA,gDAGF,uBACE,mBACA,iBACA,kDACA,aACA,cACA,wBACA,0DACA,qBAGF,+BACE,WACA,iBAGF,4BACE,cACA,mBACA,gBAEA,qCALF,4BAMI,kBAIJ,wBACE,yCACA,iDACA,qDACA,iBAGF,wBACE,mDACA,aACA,eACA,cAGA,oBACA,6CASF,kBACE,mBACA,6CACA,aACA,eACA,yBACA,yBACA,oBACA,uCAbA,gBACA,eACA,uBAkBA,yCADF,uBAEI,cAKJ,8BACE,eAoBF,uBACE,qBACA,sEACA,gFACA,wEApBA,wCACA,gDACA,oDACA,oDACA,0DACA,wDACA,0BACA,mBC7FA,kCACA,2BACA,8BACA,sBD8FA,6BACE,8CAYF,6BACE,4EAKF,qCADF,wDAEI,cAcJ,8BACE,kDACA,iDACA,aACA,oBACA,sBAlDA,wCACA,gDACA,oDACA,oDACA,0DACA,wDACA,0BACA,mBC7FA,kCACA,2BACA,8BACA,sBDuHA,gBACA,YACA,eACA,gBACA,iBA7BA,oCACE,8CA4CJ,kDACE,sEAGF,+EAEE,cAKF,2CACE,sEACA,oBACA,iBACA,kBAIA,4BACE,oBACA,iBACA,wBACA,WACE,yEAIF,+BATF,4BAUI,iBAIJ,kDACE,iBAGF,qDACE,gBAKF,wDACE,aACA,YAEF,2DACE,WAEF,2DACE,cACA,YAIJ,uBACE,iBACA,oBAIA,iCACE,iBAIJ,6DACE,aAIA,qCADF,0CAEI","file":"header.css"}

package/dist/mega-menu/mega-menu.css

@@ -1 +0,0 @@
-.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);padding-block-start:var(--ams-mega-menu-list-category-padding-block-start)}.ams-mega-menu__list-category:not(:last-child){padding-block-end:var(--ams-mega-menu-list-category-padding-block-end)}/*# sourceMappingURL=mega-menu.css.map */

package/dist/mega-menu/mega-menu.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/mega-menu/mega-menu.scss"],"names":[],"mappings":"AAKA,8BACE,yDACA,6DAGA,2EAEA,+CACE","file":"mega-menu.css"}

package/dist/page-menu/page-menu.css

@@ -1 +0,0 @@
-.ams-page-menu{align-items:center;box-sizing:border-box;column-gap:var(--ams-page-menu-column-gap);display:flex;flex-wrap:wrap;list-style:none;row-gap:var(--ams-page-menu-row-gap);margin-block:0;padding-inline:0}.ams-page-menu--align-end{justify-content:end}.ams-page-menu--no-wrap{flex-wrap:nowrap}.ams-page-menu__link{box-sizing:border-box;color:var(--ams-page-menu-item-color);display:inline-flex;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;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.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}/*# sourceMappingURL=page-menu.css.map */

package/dist/page-menu/page-menu.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/page-menu/page-menu.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAYA,eACE,mBACA,sBACA,2CACA,aACA,eACA,gBACA,qCAXA,eACA,iBAeF,0BACE,oBAGF,wBACE,iBAoBF,qBACE,sBAjBA,sCACA,oBACA,kDACA,8CACA,kDACA,kCACA,kDACA,wDACA,kBACA,oEACA,8EACA,sEACA,0BACA,mBCpCA,kCACA,2BACA,8BACA,sBD2CF,wDAEE,4CACA,0EAGF,yBACE","file":"page-menu.css"}

package/dist/screen/screen.css

@@ -1 +0,0 @@
-.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)}/*# sourceMappingURL=screen.css.map */

package/dist/screen/screen.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/screen/screen.scss"],"names":[],"mappings":"AAKA,YACE,oDACA,sBACA,mBACA,kBAGF,yBACE,qBAGF,kBACE,uDAGF,oBACE","file":"screen.css"}

package/dist/top-task-link/top-task-link.css

@@ -1 +0,0 @@
-.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;hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust: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)}.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)}/*# sourceMappingURL=top-task-link.css.map */

package/dist/top-task-link/top-task-link.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/top-task-link/top-task-link.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAQA,mBACE,mBACA,aACA,sBACA,iCACA,uDACA,qBCRA,kEACA,aACA,yBCEA,kCACA,2BACA,8BACA,sBFOF,0BACE,sBACA,2CACA,uDACA,mDACA,uDACA,uDACA,yEACA,mFACA,2EAGF,mDACE,iDACA,+EAGF,gCACE,sBACA,iDACA,6DACA,yDACA,6DACA","file":"top-task-link.css"}

package/src/components/footer/footer.scss

@@ -1,47 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-@use "../../common/hyphenation" as *;
-@use "../../common/text-rendering" as *;
-
-@mixin reset-ul {
-  list-style: none;
-  margin-block: 0;
-}
-
-.ams-footer__spotlight {
-  background-color: var(--ams-footer-spotlight-background-color);
-}
-
-.ams-footer__menu {
-  column-gap: var(--ams-footer-menu-column-gap);
-  display: flex;
-  flex-wrap: wrap;
-  padding-block: var(--ams-footer-menu-padding-block);
-  padding-inline: var(--ams-footer-menu-padding-inline);
-  row-gap: var(--ams-footer-menu-row-gap);
-
-  @include reset-ul;
-}
-
-.ams-footer__menu-link {
-  color: var(--ams-footer-menu-link-color);
-  font-family: var(--ams-footer-menu-link-font-family);
-  font-size: var(--ams-footer-menu-link-font-size);
-  font-weight: var(--ams-footer-menu-link-font-weight);
-  line-height: var(--ams-footer-menu-link-line-height);
-  outline-offset: var(--ams-footer-menu-link-outline-offset);
-  text-decoration-line: var(--ams-footer-menu-link-text-decoration-line);
-  text-decoration-thickness: var(--ams-footer-menu-link-text-decoration-thickness);
-  text-underline-offset: var(--ams-footer-menu-link-text-underline-offset);
-
-  @include hyphenation;
-  @include text-rendering;
-
-  &:hover {
-    color: var(--ams-footer-menu-link-hover-color);
-    text-decoration-line: var(--ams-footer-menu-link-hover-text-decoration-line);
-  }
-}

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,65 +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-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;
-  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](https://designsystem.amsterdam/?path=/docs/components-layout-grid--docs),
-  [Header](https://designsystem.amsterdam/?path=/docs/components-containers-header--docs),
-  [Footer](https://designsystem.amsterdam/?path=/docs/components-containers-footer--docs),
-  [Spotlight](https://designsystem.amsterdam/?path=/docs/components-containers-spotlight--docs),
-  [Image Slider](https://designsystem.amsterdam/?path=/docs/components-media-image-slider--docs),
-  and [Figure](https://designsystem.amsterdam/?path=/docs/components-media-figure--docs).
-
-## 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;
-
-  @include hyphenation;
-  @include text-rendering;
-}
-
-.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);
-}
-
-.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);
-}