@utrecht/component-library-css 1.0.0-alpha.306 → 1.0.0-alpha.309

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/html.css +2 -0
  2. package/dist/index.css +55 -0
  3. package/package.json +3 -3
  4. package/src/index.scss +2 -0
package/dist/html.css CHANGED
@@ -418,6 +418,7 @@
418
418
  --utrecht-button-border-bottom-width,
419
419
  var(--utrecht-button-border-width, 0)
420
420
  );
421
+ --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
421
422
  align-items: center;
422
423
  background-color: var(--_utrecht-button-background-color);
423
424
  border-color: var(--_utrecht-button-border-color);
@@ -432,6 +433,7 @@
432
433
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
433
434
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
434
435
  font-weight: var(--utrecht-button-font-weight);
436
+ gap: var(--utrecht-button-icon-gap);
435
437
  inline-size: var(--utrecht-button-inline-size, auto);
436
438
  justify-content: center;
437
439
  letter-spacing: var(--utrecht-button-letter-spacing);
package/dist/index.css CHANGED
@@ -432,6 +432,7 @@ ol.utrecht-breadcrumb__list {
432
432
  --utrecht-button-border-bottom-width,
433
433
  var(--utrecht-button-border-width, 0)
434
434
  );
435
+ --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
435
436
  align-items: center;
436
437
  background-color: var(--_utrecht-button-background-color);
437
438
  border-color: var(--_utrecht-button-border-color);
@@ -446,6 +447,7 @@ ol.utrecht-breadcrumb__list {
446
447
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
447
448
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
448
449
  font-weight: var(--utrecht-button-font-weight);
450
+ gap: var(--utrecht-button-icon-gap);
449
451
  inline-size: var(--utrecht-button-inline-size, auto);
450
452
  justify-content: center;
451
453
  letter-spacing: var(--utrecht-button-letter-spacing);
@@ -701,6 +703,7 @@ ol.utrecht-breadcrumb__list {
701
703
  --utrecht-button-border-bottom-width,
702
704
  var(--utrecht-button-border-width, 0)
703
705
  );
706
+ --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
704
707
  align-items: center;
705
708
  background-color: var(--_utrecht-button-background-color);
706
709
  border-color: var(--_utrecht-button-border-color);
@@ -715,6 +718,7 @@ ol.utrecht-breadcrumb__list {
715
718
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
716
719
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
717
720
  font-weight: var(--utrecht-button-font-weight);
721
+ gap: var(--utrecht-button-icon-gap);
718
722
  inline-size: var(--utrecht-button-inline-size, auto);
719
723
  justify-content: center;
720
724
  letter-spacing: var(--utrecht-button-letter-spacing);
@@ -1946,6 +1950,51 @@ ol.utrecht-breadcrumb__list {
1946
1950
  margin-block-start: var(--utrecht-heading-6-margin-block-start);
1947
1951
  }
1948
1952
 
1953
+ /**
1954
+ * @license EUPL-1.2
1955
+ * Copyright (c) 2021-2022 Gemeente Utrecht
1956
+ * Copyright (c) 2021-2022 Frameless B.V.
1957
+ */
1958
+ /**
1959
+ * @license EUPL-1.2
1960
+ * Copyright (c) 2021-2022 Gemeente Utrecht
1961
+ * Copyright (c) 2021-2022 Frameless B.V.
1962
+ */
1963
+ .utrecht-icon {
1964
+ color: var(--utrecht-icon-color);
1965
+ display: inline-block;
1966
+ height: var(--utrecht-icon-size);
1967
+ inset-block-start: var(--utrecht-icon-inset-block-start, 0);
1968
+ position: relative;
1969
+ width: var(--utrecht-icon-size);
1970
+ }
1971
+
1972
+ /**
1973
+ * @license EUPL-1.2
1974
+ * Copyright (c) 2020-2022 Gemeente Utrecht
1975
+ * Copyright (c) 2020-2022 Frameless B.V.
1976
+ */
1977
+ /**
1978
+ * @license EUPL-1.2
1979
+ * Copyright (c) 2020-2022 Gemeente Utrecht
1980
+ * Copyright (c) 2020-2022 Frameless B.V.
1981
+ */
1982
+ .utrecht-img {
1983
+ height: auto;
1984
+ width: auto;
1985
+ }
1986
+
1987
+ .utrecht-img--scale-down {
1988
+ /* use this class name with caution, text contained in image might become too small to read */
1989
+ max-height: 100%;
1990
+ max-width: 100%;
1991
+ }
1992
+
1993
+ .utrecht-img--photo {
1994
+ max-height: 100%;
1995
+ max-width: 100%;
1996
+ }
1997
+
1949
1998
  /**
1950
1999
  * @license EUPL-1.2
1951
2000
  * Copyright (c) 2021 Gemeente Utrecht
@@ -2095,13 +2144,18 @@ however browsers don't seem to have implemented great looking supixel tweening y
2095
2144
  text-decoration-skip-ink: all;
2096
2145
  text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
2097
2146
  text-underline-offset: var(--utrecht-link-text-underline-offset);
2147
+ --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
2148
+ align-items: center;
2098
2149
  cursor: pointer;
2099
2150
  display: inline-flex;
2100
2151
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
2101
2152
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
2102
2153
  font-weight: var(--utrecht-button-font-weight);
2154
+ gap: var(--utrecht-button-icon-gap);
2103
2155
  inline-size: var(--utrecht-button-inline-size, auto);
2156
+ justify-content: center;
2104
2157
  letter-spacing: var(--utrecht-button-letter-spacing);
2158
+ line-height: inherit;
2105
2159
  min-block-size: var(--utrecht-button-min-block-size, 44px);
2106
2160
  min-inline-size: var(--utrecht-button-min-inline-size, 44px);
2107
2161
  padding-block-end: var(--utrecht-button-padding-block-end);
@@ -2142,6 +2196,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2142
2196
  }
2143
2197
 
2144
2198
  .utrecht-link-button--inline {
2199
+ --utrecht-icon-inset-block-start: var(--utrecht-icon-baseline-inset-block-start);
2145
2200
  min-block-size: auto;
2146
2201
  min-inline-size: auto;
2147
2202
  padding-block-end: 0;
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.306",
2
+ "version": "1.0.0-alpha.309",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -16,7 +16,7 @@
16
16
  "url": "git@github.com:nl-design-system/utrecht.git"
17
17
  },
18
18
  "devDependencies": {
19
- "@utrecht/design-tokens": "1.0.0-alpha.299",
19
+ "@utrecht/design-tokens": "1.0.0-alpha.302",
20
20
  "node-sass-package-importer": "5.3.2",
21
21
  "rimraf": "3.0.2",
22
22
  "sass": "1.54.0"
@@ -27,5 +27,5 @@
27
27
  "clean": "rimraf dist/"
28
28
  },
29
29
  "main": "dist/index.css",
30
- "gitHead": "ae12cf739f67e52d19785f621a618dc9a1edffdc"
30
+ "gitHead": "a6676c25b487b2fca86ee64f0d9649d6325d073a"
31
31
  }
package/src/index.scss CHANGED
@@ -49,6 +49,8 @@
49
49
  @import "../../../components/heading-4/css";
50
50
  @import "../../../components/heading-5/css";
51
51
  @import "../../../components/heading-6/css";
52
+ @import "../../../components/icon/css";
53
+ @import "../../../components/img/css";
52
54
  @import "../../../components/link-list/css";
53
55
  @import "../../../components/link-button/css";
54
56
  @import "../../../components/link-social/css";