@rijkshuisstijl-community/components-css 1.0.0-alpha.27 → 1.0.0-alpha.6

package/side-nav/index.scss

@@ -1,50 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-.rhc-side-nav {
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--rhc-sidenav-row-gap);
-  &__list {
-    list-style: none;
-    margin-block: 0;
-    padding-block: 0;
-    padding-inline: 0;
-  }
-  &__link {
-    align-items: center;
-    color: var(--rhc-sidenav-link-color);
-    column-gap: var(--rhc-sidenav-link-column-gap);
-    display: flex;
-    font-family: var(--rhc-sidenav-link-font-family), sans-serif;
-    font-size: var(--rhc-sidenav-link-font-size);
-    font-weight: var(--rhc-sidenav-link-font-weight);
-    line-height: var(--rhc-sidenav-link-line-height);
-    padding-block-end: var(--rhc-sidenav-link-padding-block-end);
-    padding-block-start: var(--rhc-sidenav-link-padding-block-start);
-    text-decoration: var(--rhc-sidenav-link-text-decoration);
-    &[aria-current="page"] {
-      color: var(--rhc-sidenav-link-current-color);
-      font-weight: var(--rhc-sidenav-link-current-font-weight);
-    }
-    &:active {
-      color: var(--rhc-sidenav-link-active-color);
-      text-decoration: var(--rhc-sidenav-link-active-text-decoration);
-    }
-    &:focus {
-      background-color: var(--rhc-sidenav-link-focus-background-color);
-      color: var(--rhc-sidenav-link-focus-color);
-      text-decoration: var(--rhc-sidenav-link-focus-text-decoration);
-    }
-    &:focus-visible {
-      border-color: var(--rhc-color-focus-border-color);
-      border-width: var(--rhc-border-width-m);
-    }
-    &:hover {
-      color: var(--rhc-sidenav-link-hover-color);
-      text-decoration: var(--rhc-sidenav-link-hover-text-decoration);
-    }
-  }
-}

package/skip-link/_mixin.scss

@@ -1,13 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-@mixin rhc-skip-link {
-  box-shadow: var(--utrecht-skip-link-box-block-end-shadow-offset-x)
-    var(--utrecht-skip-link-box-block-end-shadow-offset-y) var(--utrecht-skip-link-box-block-end-shadow-blur-radius)
-    var(--utrecht-skip-link-box-block-end-shadow-spread-radius) var(--utrecht-skip-link-box-block-end-shadow-color);
-  font-weight: var(--utrecht-skip-link-font-weight, inherit);
-  position: revert;
-  text-underline-offset: var(--utrecht-skip-link-text-underline-offset, inherit);
-}

package/skip-link/index.scss

@@ -1,43 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-@import "./mixin";
-
-.rhc-skip-link {
-  @include rhc-skip-link;
-}
-
-.rhc-skip-link--hidden,
-.rhc-skip-link--visible-on-focus {
-  inset-block-start: -9999px;
-  position: fixed;
-}
-
-.rhc-skip-link--focus,
-.rhc-skip-link:focus {
-  @include rhc-skip-link;
-
-  background-color: var(--utrecht-skip-link-focus-background-color, inherit);
-  border-color: var(--utrecht-skip-link-focus-border-color, inherit);
-  border-style: var(--utrecht-skip-link-focus-border-style, inherit);
-  border-width: var(--utrecht-skip-link-focus-border-width, inherit);
-  color: var(--utrecht-skip-link-focus-color, inherit);
-  outline-color: var(--utrecht-skip-link-focus-outline-color, revert);
-  outline-offset: var(--utrecht-skip-link-focus-outline-offset, revert);
-  outline-style: var(--utrecht-skip-link-focus-outline-style, revert);
-  outline-width: var(--utrecht-skip-link-focus-outline-width, revert);
-  position: revert;
-  text-decoration: var(--utrecht-skip-link-focus-text-decoration, inherit);
-}
-
-.rhc-skip-link--focus-visible,
-.rhc-skip-link:focus-visible {
-  @include rhc-skip-link;
-
-  outline-color: var(--utrecht-skip-link-focus-visible-outline-color, var(--utrecht-focus-outline-color));
-  outline-offset: var(--utrecht-skip-link-focus-visible-outline-offset, var(--utrecht-focus-outline-offset));
-  outline-style: var(--utrecht-skip-link-focus-visible-outline-style, var(--utrecht-focus-outline-style));
-  outline-width: var(--utrecht-skip-link-focus-visible-outline-width, var(--utrecht-focus-outline-width));
-}

package/table/index.scss

@@ -1,56 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-.utrecht-table {
-  &__caption {
-    text-align: start !important;
-    &--rtl {
-      text-align: end !important;
-    }
-  }
-  &__cell {
-    color: var(--rhc-color-foreground-lint);
-  }
-
-  &__header {
-    tr:last-child > th {
-      border-block-end-color: var(--utrecht-table-header-border-block-end-color);
-      border-block-end-style: solid;
-      border-block-end-width: var(
-        --utrecht-table-header-sticky-border-block-end-width,
-        var(--utrecht-table-header-border-block-end-width, 0)
-      );
-    }
-
-    &--align-right {
-      --_utrecht-table-cell-text-align: end;
-    }
-    &--align-center {
-      --_utrecht-table-cell-text-align: center;
-    }
-    &--align-left {
-      --_utrecht-table-cell-text-align: start;
-    }
-
-    &--cell {
-      &-row {
-        --utrecht-table-header-cell-font-weight: --utrecht-table-row-border-block-end-width;
-
-        border-block-end-color: var(--utrecht-table-row-border-block-end-color);
-        border-block-end-style: solid;
-        border-block-end-width: var(--utrecht-table-row-border-block-end-width, 2px);
-      }
-    }
-  }
-
-  &__footer {
-    color: var(--utrecht-table-footer-color);
-    td {
-      --utrecht-table-footer-font-weight: var(--utrecht-table-footer-font-weight, bold);
-
-      font-weight: var(--utrecht-table-footer-font-weight, bold);
-    }
-  }
-}

package/textarea/index.scss

@@ -1,8 +0,0 @@
-.utrecht-textarea {
-  &:focus {
-    border-width: var(--utrecht-textarea-focus-border-width, var(--rhc-border-width-m, 2px));
-  }
-  &--html-textarea:read-only {
-    --utrecht-textarea-read-only-border: var(--utrecht-textarea-read-only-background-color, --rhc-color-grijs-100);
-  }
-}

package/textbox/index.scss

@@ -1,6 +0,0 @@
-.utrecht-textbox:focus {
-  border-width: var(--utrecht-textbox-focus-border-width, var(--rhc-border-width-m, 2px));
-}
-.utrecht-textbox--invalid:focus {
-  border-width: var(--utrecht-textbox-focus-border-width, var(--rhc-border-width-m, 2px));
-}

package/toggletip/_mixin.scss

@@ -1,59 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-@mixin rhc-toggletip {
-  background-color: transparent;
-  border-radius: var(--rhc-toggletip-border-radius);
-  display: inline-flex;
-  flex-direction: column;
-  size: var(--rhc-toggletip-size);
-}
-
-@mixin rhc-toggletip__summary {
-  cursor: pointer;
-  display: inline-flex;
-  margin-block-end: var(--rhc-toggletip-gap, 16px);
-  max-inline-size: var(--rhc-toggletip-size);
-  size: var(--rhc-toggletip-size);
-}
-
-@mixin rhc-toggletip__button {
-  background-color: var(--rhc-toggletip-background-color);
-  border-color: var(--rhc-toggletip-border-color);
-  border-radius: var(--rhc-toggletip-border-radius);
-  border-width: var(--rhc-toggletip-border-width);
-  color: var(--rhc-toggletip-color);
-  cursor: pointer;
-  display: inline-flex;
-  max-inline-size: var(--rhc-toggletip-size);
-  padding-block: 0;
-  padding-inline: 0;
-  size: var(--rhc-toggletip-size);
-}
-
-@mixin rhc-toggletip__button--no-pointer-events {
-  pointer-events: none;
-}
-
-@mixin rhc-toggletip__icon {
-  size: var(--rhc-toggletip-icon-size);
-}
-
-@mixin rhc-toggletip--active {
-  background-color: var(--rhc-toggletip-active-background-color);
-  border-color: var(--rhc-toggletip-active-border-color);
-  border-style: solid;
-  color: var(--rhc-toggletip-active-color);
-}
-
-@mixin rhc-toggletip--hover {
-  background-color: var(--rhc-toggletip-hover-background-color);
-  color: var(--rhc-toggletip-hover-color);
-}
-
-@mixin rhc-toggletip--focus {
-  background-color: var(--rhc-toggletip-focus-background-color);
-  color: var(--rhc-toggletip-focus-color);
-}

package/toggletip/index.scss

@@ -1,48 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-@import "./mixin";
-
-.rhc-toggletip {
-  @include rhc-toggletip;
-}
-
-.rhc-toggletip__summary {
-  @include rhc-toggletip__summary;
-}
-
-.rhc-toggletip__button {
-  @include rhc-toggletip__button;
-}
-
-.rhc-toggletip__summary .rhc-toggletip__button {
-  // If button is not used standalone the summary should take precedence
-  @include rhc-toggletip__button--no-pointer-events;
-}
-
-.rhc-toggletip__button:focus {
-  @include rhc-toggletip--focus;
-}
-
-.rhc-toggletip__button:hover {
-  @include rhc-toggletip--hover;
-}
-
-.rhc-toggletip__summary:focus .rhc-toggletip__button {
-  @include rhc-toggletip--focus;
-}
-
-.rhc-toggletip__summary:hover .rhc-toggletip__button {
-  @include rhc-toggletip--hover;
-}
-
-.rhc-toggletip:active .rhc-toggletip__button,
-.rhc-toggletip[open] .rhc-toggletip__button {
-  @include rhc-toggletip--active;
-}
-
-.rhc-toggletip__icon {
-  @include rhc-toggletip__icon;
-}

package/unordered-list/index.scss

@@ -1,27 +0,0 @@
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Community for NL Design System
- */
-
-.utrecht-unordered-list {
-  color: var(--utrecht-unordered-list-color);
-  font-family: var(--utrecht-unordered-list-font-family);
-  font-size: var(--utrecht-unordered-list-font-size);
-  font-weight: var(--utrecht-unordered-list-font-weight);
-  line-height: var(--utrecht-unordered-list-line-heigh);
-  padding-inline-start: var(--utrecht-unordered-list-padding-inline-start);
-}
-
-.utrecht-unordered-list__item {
-  margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
-  margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
-  padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start);
-}
-
-.utrecht-unordered-list--nested {
-  margin-inline-start: 0;
-}
-
-.utrecht-unordered-list--nested > .utrecht-unordered-list__item::marker {
-  content: "○";
-}