@amsterdam/design-system-css 0.7.1 → 0.9.0

package/src/components/time-input/time-input.scss

@@ -0,0 +1,78 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/text-rendering";
+
+@mixin reset {
+  -webkit-appearance: none; // Reset appearance for Safari < 15.4
+  appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
+  border: 0;
+  border-radius: 0; // Reset rounded borders on iOS devices
+  box-sizing: border-box;
+  inline-size: auto; // Reset inline size of 10em set by Android devices
+  margin-block: 0;
+}
+
+.ams-time-input {
+  background-color: var(--ams-time-input-background-color);
+  box-shadow: var(--ams-time-input-box-shadow);
+  color: var(--ams-time-input-color);
+  font-family: var(--ams-time-input-font-family);
+  font-size: var(--ams-time-input-font-size);
+  font-weight: var(--ams-time-input-font-weight);
+  line-height: var(--ams-time-input-line-height);
+
+  // Set min block size for iOS, otherwise an empty box is a lot smaller than a filled one.
+  min-block-size: calc(
+    (var(--ams-time-input-font-size) * var(--ams-time-input-line-height)) + 2 * var(--ams-time-input-padding-block)
+  );
+
+  // Set min inline size for iOS, so the size is closer to the filled in size.
+  min-inline-size: calc(4ch + (2 * var(--ams-time-input-padding-inline)));
+  outline-offset: var(--ams-time-input-outline-offset);
+  padding-block: var(--ams-time-input-padding-block);
+  padding-inline: var(--ams-time-input-padding-inline);
+  touch-action: manipulation;
+
+  @include text-rendering;
+  @include reset;
+
+  &:hover {
+    box-shadow: var(--ams-time-input-hover-box-shadow);
+  }
+}
+
+// This changes the default calendar icon on Chromium browsers only
+.ams-time-input::-webkit-calendar-picker-indicator {
+  appearance: none;
+  background-image: var(--ams-time-input-calender-picker-indicator-background-image);
+  cursor: pointer;
+}
+
+.ams-time-input:hover::-webkit-calendar-picker-indicator {
+  background-image: var(--ams-time-input-hover-calender-picker-indicator-background-image);
+}
+
+.ams-time-input:disabled {
+  background-color: var(--ams-time-input-disabled-background-color);
+  box-shadow: var(--ams-time-input-disabled-box-shadow);
+  color: var(--ams-time-input-disabled-color);
+  cursor: not-allowed;
+}
+
+.ams-time-input:disabled::-webkit-calendar-picker-indicator {
+  background-image: var(--ams-time-input-disabled-calender-picker-indicator-background-image);
+  visibility: visible;
+}
+
+.ams-time-input:invalid,
+.ams-time-input[aria-invalid="true"] {
+  box-shadow: var(--ams-time-input-invalid-box-shadow);
+
+  &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    box-shadow: var(--ams-time-input-invalid-hover-box-shadow);
+  }
+}

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

@@ -4,6 +4,7 @@
  */
 
 @import "../../common/hyphenation";
+@import "../../common/text-rendering";
 
 .ams-top-task-link {
   break-inside: avoid;
@@ -16,7 +17,6 @@
 
 @mixin reset {
   box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
 }
 
 .ams-top-task-link__label {
@@ -30,6 +30,7 @@
   text-underline-offset: var(--ams-top-task-link-label-text-underline-offset);
 
   @include hyphenation;
+  @include text-rendering;
   @include reset;
 }
 

package/src/components/unordered-list/unordered-list.scss

@@ -3,21 +3,23 @@
  * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/text-rendering";
+
 /** Apply border box sizing, reset white space and list styles. */
 @mixin reset {
   box-sizing: border-box;
   list-style: none;
   margin-block: 0;
   padding-inline-start: 0;
-  -webkit-text-size-adjust: 100%;
 }
 
 /** A list is a grid column with a gap between items. */
 .ams-unordered-list {
-  @include reset;
-
   display: grid;
   gap: var(--ams-unordered-list-gap);
+
+  @include text-rendering;
+  @include reset;
 }
 
 /** A list with markers sets typography for its text content. */
@@ -40,6 +42,11 @@
   color: var(--ams-unordered-list-inverse-color);
 }
 
+.ams-unordered-list--small:not(.ams-unordered-list--no-markers) {
+  font-size: var(--ams-unordered-list-small-font-size);
+  line-height: var(--ams-unordered-list-small-line-height);
+}
+
 /** A nested list has a different marker and less indentation for correct alignment. */
 :is(.ams-ordered-list, .ams-unordered-list) .ams-unordered-list {
   list-style-type: var(--ams-unordered-list-unordered-list-list-style-type);

package/src/components/visually-hidden/visually-hidden.scss

@@ -5,11 +5,11 @@
 
 // Source: https://css-tricks.com/inclusively-hidden/
 .ams-visually-hidden:not(:active, :focus) {
+  block-size: 1px;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  height: 1px;
+  inline-size: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
-  width: 1px;
 }

package/dist/fieldset/fieldset.css

@@ -1 +0,0 @@
-.ams-fieldset{border:none;margin-inline:0;padding-block:0;padding-inline:0}.ams-fieldset__legend{color:var(--ams-fieldset-legend-color);font-family:var(--ams-fieldset-legend-font-family);font-size:var(--ams-fieldset-legend-font-size);font-weight:var(--ams-fieldset-legend-font-weight);line-height:var(--ams-fieldset-legend-line-height);margin-block-end:1rem;hyphenate-limit-chars:var(--ams-hyphenation-hyphenate-limit-chars);hyphens:var(--ams-hyphenation-hyphens);overflow-wrap:var(--ams-hyphenation-overflow-wrap);padding-inline:0;-webkit-text-size-adjust:100%}/*# sourceMappingURL=fieldset.css.map */

package/dist/fieldset/fieldset.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/fieldset/fieldset.scss","../../src/common/hyphenation.scss"],"names":[],"mappings":"AAcA,cANE,YACA,gBACA,gBACA,iBAYF,sBACE,uCACA,mDACA,+CACA,mDACA,mDACA,sBCvBA,mEACA,uCACA,mDDWA,iBACA","file":"fieldset.css"}

package/dist/form-label/form-label.css

@@ -1 +0,0 @@
-.ams-form-label{color:var(--ams-form-label-color);font-family:var(--ams-form-label-font-family);font-size:var(--ams-form-label-font-size);font-weight:var(--ams-form-label-font-weight);line-height:var(--ams-form-label-line-height);hyphenate-limit-chars:var(--ams-hyphenation-hyphenate-limit-chars);hyphens:var(--ams-hyphenation-hyphens);overflow-wrap:var(--ams-hyphenation-overflow-wrap);-webkit-text-size-adjust:100%}/*# sourceMappingURL=form-label.css.map */

package/dist/form-label/form-label.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/form-label/form-label.scss","../../src/common/hyphenation.scss"],"names":[],"mappings":"AAWA,gBACE,kCACA,8CACA,0CACA,8CACA,8CCVA,mEACA,uCACA","file":"form-label.css"}

package/src/components/fieldset/README.md

@@ -1,18 +0,0 @@
-<!-- @license CC0-1.0 -->
-
-# Fieldset
-
-A component to group related form inputs.
-
-## Guidelines
-
-- Use Fieldset when you need to show a relationship between multiple form inputs. For example, you may need to group a set of text inputs into a single fieldset when asking for an address.
-- When grouping radio inputs, use `role="radiogroup"` on Fieldset to have this grouping explicitly announced as a radio group. Fieldset has a default role of `group`.
-
-## Relevant WCAG Requirements
-
-- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html): Fieldset labels the purpose of a group of inputs.
-
-## References
-
-- [Providing a description for groups of form controls using fieldset and legend elements](https://www.w3.org/WAI/WCAG22/Techniques/html/H71)

package/src/components/fieldset/fieldset.scss

@@ -1,34 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-@import "../../common/hyphenation";
-
-@mixin reset {
-  border: none;
-  margin-inline: 0;
-  padding-block: 0;
-  padding-inline: 0;
-}
-
-.ams-fieldset {
-  @include reset;
-}
-
-@mixin legend-reset {
-  padding-inline: 0;
-  -webkit-text-size-adjust: 100%;
-}
-
-.ams-fieldset__legend {
-  color: var(--ams-fieldset-legend-color);
-  font-family: var(--ams-fieldset-legend-font-family);
-  font-size: var(--ams-fieldset-legend-font-size);
-  font-weight: var(--ams-fieldset-legend-font-weight);
-  line-height: var(--ams-fieldset-legend-line-height);
-  margin-block-end: 1rem; /* Because of a bug in Chrome we can’t use display grid or flex for this gap */
-
-  @include hyphenation;
-  @include legend-reset;
-}

package/src/components/form-label/form-label.scss

@@ -1,21 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-@import "../../common/hyphenation";
-
-@mixin reset {
-  -webkit-text-size-adjust: 100%;
-}
-
-.ams-form-label {
-  color: var(--ams-form-label-color);
-  font-family: var(--ams-form-label-font-family);
-  font-size: var(--ams-form-label-font-size);
-  font-weight: var(--ams-form-label-font-weight);
-  line-height: var(--ams-form-label-line-height);
-
-  @include hyphenation;
-  @include reset;
-}