@amsterdam/design-system-css 2.1.0 → 2.2.0

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"}