@utrecht/component-library-css 1.0.0-alpha.563 → 1.0.0-alpha.565

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 (2) hide show
  1. package/dist/index.css +20 -53
  2. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -653,68 +653,16 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
653
653
  * Copyright (c) 2021 Robbert Broersma
654
654
  */
655
655
  /* stylelint-disable-next-line block-no-empty */
656
- .utrecht-breadcrumb--arrows {
657
- /* https://css-tricks.com/triangle-breadcrumbs/ */
658
- --utrecht-breadcrumb-arrow-size: 24px;
659
- overflow: hidden;
660
- }
661
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link {
662
- padding-inline-end: 0;
663
- position: relative;
664
- }
665
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,
666
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
667
- block-size: 0;
668
- border-block-end-width: var(--utrecht-breadcrumb-block-size);
669
- border-block-start-width: var(--utrecht-breadcrumb-block-size);
670
- border-color: transparent;
671
- border-style: solid;
672
- content: " ";
673
- display: block;
674
- inline-size: 0;
675
- inset-block-start: 50%;
676
- inset-inline-start: 100%;
677
- margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
678
- position: absolute;
679
- }
680
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after {
681
- border-inline-start-color: var(--utrecht-breadcrumb-link-background-color);
682
- border-inline-start-width: var(--utrecht-breadcrumb-arrow-size);
683
- z-index: 2;
684
- }
685
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
686
- border-inline-start-color: var(--utrecht-document-background-color);
687
- border-inline-start-width: var(--utrecht-breadcrumb-arrow-size);
688
- margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
689
- margin-inline-start: 1px;
690
- z-index: 1;
691
- }
692
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus,
693
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus {
694
- background-color: var(--utrecht-breadcrumb-link-focus-background-color);
695
- }
696
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus::after,
697
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus::after {
698
- border-inline-start-color: var(--utrecht-breadcrumb-link-focus-background-color);
699
- }
700
- .utrecht-breadcrumb--arrows .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item .utrecht-breadcrumb__link {
701
- padding-inline-start: calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size));
702
- }
703
-
704
- .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item {
705
- margin-inline-start: var(--utrecht-breadcrumb-item-divider-inline-size);
706
- }
707
-
708
656
  .utrecht-breadcrumb {
709
657
  --utrecht-focus-background-color: var(--utrecht-breadcrumb-link-focus-background-color);
710
658
  --utrecht-link-background-color: var(--utrecht-breadcrumb-link-background-color);
711
- --utrecht-link-color: var(--utrecht-breadcrumb-link-color);
712
659
  --utrecht-link-focus-color: var(--utrecht-breadcrumb-link-focus-color, var(--utrecht-breadcrumb-link-color));
713
660
  --utrecht-link-focus-text-decoration: var(--utrecht-link-text-decoration);
714
661
  --utrecht-link-hover-color: var(--utrecht-breadcrumb-link-color);
715
662
  --utrecht-link-hover-text-decoration: var(--utrecht-link-text-decoration);
716
663
  --utrecht-link-visited-color: var(--utrecht-breadcrumb-link-color);
717
664
  --utrecht-link-visited-text-decoration: var(--utrecht-link-text-decoration);
665
+ --utrecht-link-color: var(--utrecht-breadcrumb-link-color);
718
666
  font-family: var(--utrecht-document-font-family, inherit);
719
667
  font-size: var(--utrecht-breadcrumb-font-size);
720
668
  text-transform: var(--utrecht-document-text-transform, inherit);
@@ -749,7 +697,26 @@ ol.utrecht-breadcrumb__list {
749
697
  padding-inline-start: var(--utrecht-breadcrumb-item-padding-inline-start, 8px);
750
698
  }
751
699
 
700
+ .utrecht-breadcrumb__link--disabled {
701
+ --utrecht-link-placeholder-color: var(--utrecht-breadcrumb-link-disabled-color, var(--utrecht-breadcrumb-link-color));
702
+ background-color: var(--utrecht-breadcrumb-link-disabled-background-color, var(--utrecht-breadcrumb-link-background-color));
703
+ color: var(--utrecht-link-placeholder-color);
704
+ }
705
+
752
706
  /* stylelint-disable-next-line block-no-empty */
707
+ .utrecht-breadcrumb__separator {
708
+ /*
709
+ * Overwrite `style` attribute using "private" CSS variable for <li> hack:
710
+ * <li aria-hidden="true" hidden style="display: var(--_utrecht-breadcrumb-separator-display, block)">
711
+ */
712
+ --_utrecht-breadcrumb-separator-display: flex;
713
+ --utrecht-icon-size: var(--utrecht-breadcrumb-separator-icon-size);
714
+ --utrecht-icon-color: var(--utrecht-breadcrumb-separator-icon-color);
715
+ align-items: center;
716
+ display: var(--_utrecht-breadcrumb-separator-display);
717
+ inline-size: var(--utrecht-breadcrumb-separator-inline-size);
718
+ }
719
+
753
720
  .utrecht-breadcrumb--arrows {
754
721
  /* https://css-tricks.com/triangle-breadcrumbs/ */
755
722
  --utrecht-breadcrumb-arrow-size: 24px;
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.563",
2
+ "version": "1.0.0-alpha.565",
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",
@@ -26,5 +26,5 @@
26
26
  "clean": "rimraf dist/"
27
27
  },
28
28
  "main": "dist/index.css",
29
- "gitHead": "c23ab8b4a4c54d55f69cc7f3bcbc6257cdf797eb"
29
+ "gitHead": "5f315efa2722f457c8d9fd01175daf0d473e828b"
30
30
  }