@utrecht/component-library-css 1.0.0-alpha.83 → 1.0.0-alpha.87

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/bem.css +17 -19
  2. package/dist/index.css +24 -24
  3. package/dist/root-theme.css +7 -5
  4. package/package.json +4 -4
package/dist/bem.css CHANGED
@@ -324,7 +324,7 @@ ol.utrecht-breadcrumb__list {
324
324
  border-inline-start-color: var(--utrecht-breadcrumb-link-focus-background-color);
325
325
  }
326
326
  .utrecht-breadcrumb--arrows .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item .utrecht-breadcrumb__link {
327
- padding-inline-start: calc( var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size) );
327
+ padding-inline-start: calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size));
328
328
  }
329
329
 
330
330
  .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item {
@@ -734,6 +734,8 @@ ol.utrecht-breadcrumb__list {
734
734
  * Copyright (c) 2021 Gemeente Utrecht
735
735
  */
736
736
  .utrecht-mapcontrolbutton {
737
+ --utrecht-icon-size: var(--utrecht-mapcontrolbutton-min-block-size);
738
+ --utrecht-icon-color: var(--utrecht-mapcontrolbutton-color);
737
739
  align-items: center;
738
740
  background-color: var(--utrecht-mapcontrolbutton-background-color);
739
741
  border-color: var(--utrecht-mapcontrolbutton-border-color);
@@ -742,27 +744,24 @@ ol.utrecht-breadcrumb__list {
742
744
  border-width: var(--utrecht-mapcontrolbutton-border-width);
743
745
  color: var(--utrecht-mapcontrolbutton-color);
744
746
  display: flex;
745
- flex-direction: column;
746
- height: var(--utrecht-mapcontrolbutton-height);
747
+ flex-direction: row;
747
748
  justify-content: center;
748
- width: var(--utrecht-mapcontrolbutton-width);
749
- }
750
-
751
- .utrecht-mapcontrolbutton .utrecht-mapcontrolbutton-polygon {
752
- fill: var(--utrecht-mapcontrolbutton-color);
749
+ min-block-size: var(--utrecht-mapcontrolbutton-min-block-size);
750
+ min-inline-size: var(--utrecht-mapcontrolbutton-min-inline-size);
751
+ padding-block-end: 0;
752
+ padding-block-start: 0;
753
+ padding-inline-end: 0;
754
+ padding-inline-start: 0;
753
755
  }
754
756
 
755
757
  .utrecht-mapcontrolbutton:disabled,
756
758
  .utrecht-mapcontrolbutton--disabled {
759
+ --utrecht-icon-color: var(--utrecht-mapcontrolbutton-disabled-color, var(--utrecht-mapcontrolbutton-color));
757
760
  background-color: var(--utrecht-mapcontrolbutton-disabled-background-color);
758
761
  border-color: var(--utrecht-mapcontrolbutton-disabled-border-color);
759
762
  color: var(--utrecht-mapcontrolbutton-disabled-color);
760
763
  }
761
764
 
762
- .utrecht-mapcontrolbutton--disabled .utrecht-mapcontrolbutton-polygon {
763
- fill: var(--utrecht-mapcontrolbutton-disabled-color);
764
- }
765
-
766
765
  .utrecht-mapcontrolbutton--focus,
767
766
  .utrecht-mapcontrolbutton:not(.utrecht-mapcontrolbutton--disabled):focus {
768
767
  background-color: var(--utrecht-focus-background-color);
@@ -772,10 +771,7 @@ ol.utrecht-breadcrumb__list {
772
771
  outline-offset: 0;
773
772
  outline-style: var(--utrecht-focus-outline-style, solid);
774
773
  outline-width: var(--utrecht-focus-outline-width, 0);
775
- }
776
-
777
- .utrecht-mapcontrolbutton--focus .utrecht-mapcontrolbutton-polygon {
778
- fill: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
774
+ --utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
779
775
  }
780
776
 
781
777
  .utrecht-mapcontrolbutton--hover:not(:disabled),
@@ -784,8 +780,10 @@ ol.utrecht-breadcrumb__list {
784
780
  color: var(--utrecht-mapcontrolbutton-color);
785
781
  }
786
782
 
787
- .utrecht-mapcontrolbutton--hover .utrecht-mapcontrolbutton-polygon {
788
- fill: var(--utrecht-mapcontrolbutton-color);
783
+ .utrecht-mapcontrolbutton__label {
784
+ display: block;
785
+ padding-inline-end: var(--utrecht-mapcontrolbutton-label-margin-inline-end);
786
+ padding-inline-start: var(--utrecht-mapcontrolbutton-label-margin-inline-start);
789
787
  }
790
788
 
791
789
  .utrecht-menulijst {
@@ -985,7 +983,7 @@ ol.utrecht-breadcrumb__list {
985
983
  .utrecht-sidenav__item:last-child .utrecht-sidenav__link::after,
986
984
  .utrecht-sidenav__link--current::after,
987
985
  .utrecht-sidenav__item--has-children a::after {
988
- height: calc(38px + 2px);
986
+ height: 40px;
989
987
  min-height: 38px;
990
988
  }
991
989
 
package/dist/index.css CHANGED
@@ -333,7 +333,7 @@ ol.utrecht-breadcrumb__list {
333
333
  border-inline-start-color: var(--utrecht-breadcrumb-link-focus-background-color);
334
334
  }
335
335
  .utrecht-breadcrumb--arrows .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item .utrecht-breadcrumb__link {
336
- padding-inline-start: calc( var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size) );
336
+ padding-inline-start: calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size));
337
337
  }
338
338
 
339
339
  .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item {
@@ -747,6 +747,8 @@ ol.utrecht-breadcrumb__list {
747
747
  * Copyright (c) 2021 Gemeente Utrecht
748
748
  */
749
749
  .utrecht-mapcontrolbutton {
750
+ --utrecht-icon-size: var(--utrecht-mapcontrolbutton-min-block-size);
751
+ --utrecht-icon-color: var(--utrecht-mapcontrolbutton-color);
750
752
  align-items: center;
751
753
  background-color: var(--utrecht-mapcontrolbutton-background-color);
752
754
  border-color: var(--utrecht-mapcontrolbutton-border-color);
@@ -755,27 +757,24 @@ ol.utrecht-breadcrumb__list {
755
757
  border-width: var(--utrecht-mapcontrolbutton-border-width);
756
758
  color: var(--utrecht-mapcontrolbutton-color);
757
759
  display: flex;
758
- flex-direction: column;
759
- height: var(--utrecht-mapcontrolbutton-height);
760
+ flex-direction: row;
760
761
  justify-content: center;
761
- width: var(--utrecht-mapcontrolbutton-width);
762
- }
763
-
764
- .utrecht-mapcontrolbutton .utrecht-mapcontrolbutton-polygon {
765
- fill: var(--utrecht-mapcontrolbutton-color);
762
+ min-block-size: var(--utrecht-mapcontrolbutton-min-block-size);
763
+ min-inline-size: var(--utrecht-mapcontrolbutton-min-inline-size);
764
+ padding-block-end: 0;
765
+ padding-block-start: 0;
766
+ padding-inline-end: 0;
767
+ padding-inline-start: 0;
766
768
  }
767
769
 
768
770
  .utrecht-mapcontrolbutton:disabled,
769
771
  .utrecht-mapcontrolbutton--disabled {
772
+ --utrecht-icon-color: var(--utrecht-mapcontrolbutton-disabled-color, var(--utrecht-mapcontrolbutton-color));
770
773
  background-color: var(--utrecht-mapcontrolbutton-disabled-background-color);
771
774
  border-color: var(--utrecht-mapcontrolbutton-disabled-border-color);
772
775
  color: var(--utrecht-mapcontrolbutton-disabled-color);
773
776
  }
774
777
 
775
- .utrecht-mapcontrolbutton--disabled .utrecht-mapcontrolbutton-polygon {
776
- fill: var(--utrecht-mapcontrolbutton-disabled-color);
777
- }
778
-
779
778
  .utrecht-mapcontrolbutton--focus,
780
779
  .utrecht-mapcontrolbutton:not(.utrecht-mapcontrolbutton--disabled):focus {
781
780
  background-color: var(--utrecht-focus-background-color);
@@ -785,10 +784,7 @@ ol.utrecht-breadcrumb__list {
785
784
  outline-offset: 0;
786
785
  outline-style: var(--utrecht-focus-outline-style, solid);
787
786
  outline-width: var(--utrecht-focus-outline-width, 0);
788
- }
789
-
790
- .utrecht-mapcontrolbutton--focus .utrecht-mapcontrolbutton-polygon {
791
- fill: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
787
+ --utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color));
792
788
  }
793
789
 
794
790
  .utrecht-mapcontrolbutton--hover:not(:disabled),
@@ -797,8 +793,10 @@ ol.utrecht-breadcrumb__list {
797
793
  color: var(--utrecht-mapcontrolbutton-color);
798
794
  }
799
795
 
800
- .utrecht-mapcontrolbutton--hover .utrecht-mapcontrolbutton-polygon {
801
- fill: var(--utrecht-mapcontrolbutton-color);
796
+ .utrecht-mapcontrolbutton__label {
797
+ display: block;
798
+ padding-inline-end: var(--utrecht-mapcontrolbutton-label-margin-inline-end);
799
+ padding-inline-start: var(--utrecht-mapcontrolbutton-label-margin-inline-start);
802
800
  }
803
801
 
804
802
  .utrecht-menulijst {
@@ -998,7 +996,7 @@ ol.utrecht-breadcrumb__list {
998
996
  .utrecht-sidenav__item:last-child .utrecht-sidenav__link::after,
999
997
  .utrecht-sidenav__link--current::after,
1000
998
  .utrecht-sidenav__item--has-children a::after {
1001
- height: calc(38px + 2px);
999
+ height: 40px;
1002
1000
  min-height: 38px;
1003
1001
  }
1004
1002
 
@@ -3318,7 +3316,7 @@ ol.utrecht-breadcrumb__list {
3318
3316
  /* Collection of CSS variables for Utrecht theme applied to `:root` */
3319
3317
  /**
3320
3318
  * Do not edit directly
3321
- * Generated on Fri, 10 Sep 2021 15:41:02 GMT
3319
+ * Generated on Tue, 14 Sep 2021 15:40:40 GMT
3322
3320
  */
3323
3321
  :root {
3324
3322
  --utrecht-searchbar-hover-transform: 1;
@@ -3559,7 +3557,7 @@ ol.utrecht-breadcrumb__list {
3559
3557
  --utrecht-ordered-list-margin-block-end: 1em;
3560
3558
  --utrecht-ordered-list-margin-block-start: 0;
3561
3559
  --utrecht-mapcontrolbutton-focus-text-decoration: none;
3562
- --utrecht-mapcontrolbutton-border-radius: 0;
3560
+ --utrecht-mapcontrolbutton-border-radius: 2px;
3563
3561
  --utrecht-mapcontrolbutton-margin-inline-end: 0;
3564
3562
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
3565
3563
  --utrecht-logo-max-width: 110.57px;
@@ -3709,11 +3707,11 @@ ol.utrecht-breadcrumb__list {
3709
3707
  --utrecht-page-footer-color: var(--utrecht-color-white);
3710
3708
  --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
3711
3709
  --utrecht-mapcontrolbutton-hover-background-color: var(--utrecht-color-grey-90);
3710
+ --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
3711
+ --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
3712
+ --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
3712
3713
  --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
3713
3714
  --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
3714
- --utrecht-mapcontrolbutton-height: var(--utrecht-space-block-2xl);
3715
- --utrecht-mapcontrolbutton-width: var(--utrecht-space-block-2xl);
3716
- --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
3717
3715
  --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
3718
3716
  --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
3719
3717
  --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
@@ -3724,6 +3722,8 @@ ol.utrecht-breadcrumb__list {
3724
3722
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
3725
3723
  --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
3726
3724
  --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
3725
+ --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
3726
+ --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
3727
3727
  --utrecht-mapcontrolbutton-border-width: var(--utrecht-border-width-sm);
3728
3728
  --utrecht-link-focus-color: var(--utrecht-color-blue-40);
3729
3729
  --utrecht-link-color: var(--utrecht-color-blue-30);
package/dist/root-theme.css CHANGED
@@ -5,7 +5,7 @@
5
5
  /* Collection of CSS variables for Utrecht theme applied to `:root` */
6
6
  /**
7
7
  * Do not edit directly
8
- * Generated on Fri, 10 Sep 2021 15:41:02 GMT
8
+ * Generated on Tue, 14 Sep 2021 15:40:40 GMT
9
9
  */
10
10
  :root {
11
11
  --utrecht-searchbar-hover-transform: 1;
@@ -246,7 +246,7 @@
246
246
  --utrecht-ordered-list-margin-block-end: 1em;
247
247
  --utrecht-ordered-list-margin-block-start: 0;
248
248
  --utrecht-mapcontrolbutton-focus-text-decoration: none;
249
- --utrecht-mapcontrolbutton-border-radius: 0;
249
+ --utrecht-mapcontrolbutton-border-radius: 2px;
250
250
  --utrecht-mapcontrolbutton-margin-inline-end: 0;
251
251
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
252
252
  --utrecht-logo-max-width: 110.57px;
@@ -396,11 +396,11 @@
396
396
  --utrecht-page-footer-color: var(--utrecht-color-white);
397
397
  --utrecht-mapcontrolbutton-hover-color: var(--utrecht-color-white);
398
398
  --utrecht-mapcontrolbutton-hover-background-color: var(--utrecht-color-grey-90);
399
+ --utrecht-mapcontrolbutton-label-margin-inline-end: var(--utrecht-space-inline-xs);
400
+ --utrecht-mapcontrolbutton-label-margin-inline-start: var(--utrecht-space-inline-xs);
401
+ --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
399
402
  --utrecht-mapcontrolbutton-border-style: var(--utrecht-border-style-solid);
400
403
  --utrecht-mapcontrolbutton-border-color: var(--utrecht-color-grey-40);
401
- --utrecht-mapcontrolbutton-height: var(--utrecht-space-block-2xl);
402
- --utrecht-mapcontrolbutton-width: var(--utrecht-space-block-2xl);
403
- --utrecht-mapcontrolbutton-color: var(--utrecht-color-grey-40);
404
404
  --utrecht-mapcontrolbutton-background-color: var(--utrecht-color-white);
405
405
  --utrecht-mapcontrolbutton-disabled-border-color: var(--utrecht-color-grey-80);
406
406
  --utrecht-mapcontrolbutton-disabled-background-color: var(--utrecht-color-grey-90);
@@ -411,6 +411,8 @@
411
411
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
412
412
  --utrecht-mapcontrolbutton-margin-block-end: var(--utrecht-space-row-xs);
413
413
  --utrecht-mapcontrolbutton-margin-block-start: var(--utrecht-space-row-xs);
414
+ --utrecht-mapcontrolbutton-min-inline-size: var(--utrecht-space-block-2xl);
415
+ --utrecht-mapcontrolbutton-min-block-size: var(--utrecht-space-block-2xl);
414
416
  --utrecht-mapcontrolbutton-border-width: var(--utrecht-border-width-sm);
415
417
  --utrecht-link-focus-color: var(--utrecht-color-blue-40);
416
418
  --utrecht-link-color: var(--utrecht-color-blue-30);
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.83",
2
+ "version": "1.0.0-alpha.87",
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",
@@ -13,15 +13,15 @@
13
13
  "url": "git@github.com:nl-design-system/utrecht.git"
14
14
  },
15
15
  "devDependencies": {
16
- "@utrecht/design-tokens": "1.0.0-alpha.76",
16
+ "@utrecht/design-tokens": "1.0.0-alpha.80",
17
17
  "node-sass-package-importer": "5.3.2",
18
18
  "rimraf": "3.0.2",
19
- "sass": "1.39.0"
19
+ "sass": "1.40.0"
20
20
  },
21
21
  "scripts": {
22
22
  "prebuild": "npm run clean",
23
23
  "build": "sass src/:dist/ --load-path=../../node_modules/ --no-source-map",
24
24
  "clean": "rimraf dist/"
25
25
  },
26
- "gitHead": "3312b1f20e4aad36cdeee7330fbe27c7b25e1e1f"
26
+ "gitHead": "43e54b8bcf3e16bb1d0c8ef1af59d752d781eee1"
27
27
  }