@utrecht/component-library-css 1.0.0-alpha.519 → 1.0.0-alpha.520

package/dist/index.css

@@ -5724,6 +5724,98 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-variant-numeric: lining-nums tabular-nums;
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-toptask-link {
+  --utrecht-icon-color: currentColor;
+  --utrecht-icon-size: var(--utrecht-toptask-link-icon-size);
+  background-color: var(--utrecht-toptask-link-background-color);
+  color: var(--utrecht-toptask-link-color);
+  display: flex;
+  flex-direction: column;
+  font-size: var(--utrecht-toptask-link-font-size);
+  line-height: var(--utrecht-toptask-link-line-height);
+  max-inline-size: var(--utrecht-toptask-link-max-inline-size);
+  min-block-size: var(--utrecht-toptask-link-min-block-size);
+  min-inline-size: var(--utrecht-toptask-link-min-inline-size);
+  padding-block-end: var(--utrecht-toptask-link-padding-block-end);
+  padding-block-start: var(--utrecht-toptask-link-padding-block-start);
+  padding-inline-end: var(--utrecht-toptask-link-padding-inline-end);
+  padding-inline-start: var(--utrecht-toptask-link-padding-inline-start);
+  text-decoration: none;
+}
+
+.utrecht-toptask-link--hover,
+.utrecht-toptask-link:hover {
+  background-color: var(--utrecht-toptask-link-hover-background-color, var(--utrecht-toptask-link-background-color));
+  color: var(--utrecht-toptask-link-hover-color, var(--utrecht-toptask-link-color));
+  transform: var(--utrecht-toptask-link-hover-transform-scale, 1);
+}
+
+.utrecht-toptask-link--focus-visible, .utrecht-toptask-link:focus {
+  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
+  /* - The browser default focus ring should apply when these CSS custom properties are not set.
+   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
+   *   can combine it with the focus ring box shadow.
+   */
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+}
+
+.utrecht-toptask-link--focus, .utrecht-toptask-link:focus {
+  background-color: var(--utrecht-toptask-link-focus-background-color, var(--utrecht-toptask-link-background-color));
+  color: var(--utrecht-toptask-link-focus-color, var(--utrecht-toptask-link-color));
+}
+
+/* override the `:focus` selector above */
+/* stylelint-disable-next-line no-descending-specificity */
+.utrecht-toptask-link:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: revert;
+}
+
+.utrecht-toptask-link__title {
+  display: block;
+}
+
+.utrecht-toptask-link__icon {
+  display: block;
+  padding-block-end: var(--utrecht-space-block-xs);
+  padding-inline-end: var(--utrecht-space-inline-md);
+}
+
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-toptask-nav {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: var(--utrecht-toptask-nav-gap);
+}
+
+.utrecht-toptask-nav--grid {
+  --utrecht-toptask-link-max-inline-size: var(--utrecht-toptask-nav-link-grid-max-inline-size);
+  flex-direction: row;
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.519",
+  "version": "1.0.0-alpha.520",
   "author": "Community for NL Design System",
   "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -26,5 +26,5 @@
     "clean": "rimraf dist/"
   },
   "main": "dist/index.css",
-  "gitHead": "09b85fe4600218acc7689b2dabcabae68b0d9ca2"
+  "gitHead": "4966b8d4287dcba356e6a7652f5cb3306f173928"
 }