npm - @oiz/stzh-components - Versions diffs - 4.1.0 → 4.1.1-beta - Mend

@oiz/stzh-components 4.1.0 → 4.1.1-beta

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 (556) hide show

package/dist/stzh-components/stzh-components.css CHANGED Viewed

@@ -653,10 +653,26 @@ the .has-focus class is used by the focus target */
   --stzh-color-mkz-cyan100: rgba(var(--stzh-color-mkz-cyan100-rgb) / 1);
   /* PKZH */
-  --stzh-color-shakespeare-rgb: 74 150 200;
-  --stzh-color-shakespeare: rgba(var(--stzh-color-shakespeare-rgb) / 1);
-  --stzh-color-chambray-rgb: 44 90 120;
-  --stzh-color-chambray: rgba(var(--stzh-color-chambray-rgb) / 1);
+  --stzh-color-pkzh-cyan10-rgb: 235 249 255;
+  --stzh-color-pkzh-cyan10: rgba(var(--stzh-color-pkzh-cyan10-rgb) / 1);
+  --stzh-color-pkzh-cyan20-rgb: 194 238 255;
+  --stzh-color-pkzh-cyan20: rgba(var(--stzh-color-pkzh-cyan20-rgb) / 1);
+  --stzh-color-pkzh-cyan30-rgb: 132 220 255;
+  --stzh-color-pkzh-cyan30: rgba(var(--stzh-color-pkzh-cyan30-rgb) / 1);
+  --stzh-color-pkzh-cyan40-rgb: 52 197 254;
+  --stzh-color-pkzh-cyan40: rgba(var(--stzh-color-pkzh-cyan40-rgb) / 1);
+  --stzh-color-pkzh-cyan50-rgb: 0 159 223;
+  --stzh-color-pkzh-cyan50: rgba(var(--stzh-color-pkzh-cyan50-rgb) / 1);
+  --stzh-color-pkzh-cyan60-rgb: 5 127 172;
+  --stzh-color-pkzh-cyan60: rgba(var(--stzh-color-pkzh-cyan60-rgb) / 1);
+  --stzh-color-pkzh-cyan70-rgb: 0 102 143;
+  --stzh-color-pkzh-cyan70: rgba(var(--stzh-color-pkzh-cyan70-rgb) / 1);
+  --stzh-color-pkzh-cyan80-rgb: 3 76 103;
+  --stzh-color-pkzh-cyan80: rgba(var(--stzh-color-pkzh-cyan80-rgb) / 1);
+  --stzh-color-pkzh-cyan90-rgb: 0 44 61;
+  --stzh-color-pkzh-cyan90: rgba(var(--stzh-color-pkzh-cyan90-rgb) / 1);
+  --stzh-color-pkzh-cyan100-rgb: 0 29 41;
+  --stzh-color-pkzh-cyan100: rgba(var(--stzh-color-pkzh-cyan100-rgb) / 1);
   /* Microsite Colors */
@@ -1246,16 +1262,16 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: rgba(var(--stzh-color-tabasco-rgb) / 1);
   --stzh-color-primary-hover-rgb: var(--stzh-color-mahogany-rgb);
   --stzh-color-primary-hover: rgba(var(--stzh-color-mahogany-rgb) / 1);
   /* Buttons */
   --stzh-button-background-color: var(--stzh-color-primary);
   --stzh-button-hover-background-color: var(--stzh-color-primary-hover);
   --stzh-button-disabled-background-color: var(--stzh-color-grey70);
   /* Links */
   --stzh-link-color: var(--stzh-color-primary);
   --stzh-link-hover-color: var(--stzh-color-primary-hover);
   /* Header */
   --stzh-header-logobar-background-color: var(--stzh-color-primary);
 }
@@ -1459,18 +1475,18 @@ the .has-focus class is used by the focus target */
   --stzh-button-tertiary-color: var(--stzh-color-primary80);
   --stzh-button-tertiary-hover-color: var(--stzh-color-primary90);
   --stzh-button-tertiary-disabled-color: var(--stzh-color-grey70);
   /* Links */
   --stzh-link-color: var(--stzh-color-primary80);
   --stzh-link-hover-color: var(--stzh-color-primary90);
   /* Header */
   --stzh-header-logobar-background-color: var(--stzh-color-primary70);
   /* Card list */
   --stzh-cardlist-background-color: var(--stzh-color-coolgrey10);
   --stzh-cardlist-description-color: var(--stzh-color-primary70);
-  }
+}
 /* ZVV Overrides */
 #zvv-searchmask > div {
@@ -1481,88 +1497,27 @@ the .has-focus class is used by the focus target */
 #zvv-searchmask * {
   font-weight: inherit;
 }
-/*
-.stzh-theme-mkz {
-  --stzh-color-secondary10-rgb: var(--stzh-color-cyan10-rgb);
-  --stzh-color-secondary10: rgba(var(--stzh-color-secondary10-rgb) / 1);
-  --stzh-color-secondary20-rgb: var(--stzh-color-cyan20-rgb);
-  --stzh-color-secondary20: rgba(var(--stzh-color-secondary20-rgb) / 1);
-  --stzh-color-secondary30-rgb: var(--stzh-color-cyan30-rgb);
-  --stzh-color-secondary30: rgba(var(--stzh-color-secondary30-rgb) / 1);
-  --stzh-color-secondary40-rgb: var(--stzh-color-cyan40-rgb);
-  --stzh-color-secondary40: rgba(var(--stzh-color-secondary40-rgb) / 1);
-  --stzh-color-secondary50-rgb: var(--stzh-color-cyan50-rgb);
-  --stzh-color-secondary50: rgba(var(--stzh-color-secondary50-rgb) / 1);
-  --stzh-color-secondary60-rgb: var(--stzh-color-cyan60-rgb);
-  --stzh-color-secondary60: rgba(var(--stzh-color-secondary60-rgb) / 1);
-  --stzh-color-secondary70-rgb: var(--stzh-color-cyan70-rgb);
-  --stzh-color-secondary70: rgba(var(--stzh-color-secondary70-rgb) / 1);
-  --stzh-color-secondary80-rgb: var(--stzh-color-cyan80-rgb);
-  --stzh-color-secondary80: rgba(var(--stzh-color-secondary80-rgb) / 1);
-  --stzh-color-secondary90-rgb: var(--stzh-color-cyan90-rgb);
-  --stzh-color-secondary90: rgba(var(--stzh-color-secondary90-rgb) / 1);
-  --stzh-color-secondary100-rgb: var(--stzh-color-cyan100-rgb);
-  --stzh-color-secondary100: rgba(var(--stzh-color-secondary100-rgb) / 1);
-*/
-  /* Homepage Service Highlights */
-/*
---stzh-homepage-service-highlights-topnews-subtitle-font: var(--stzh-font-family-heavy);
-}
-*/
 .stzh-theme-uvz {
   --stzh-color-primary-rgb: var(--stzh-color-monza-rgb);
   --stzh-color-primary: rgba(var(--stzh-color-monza-rgb) / 1);
   --stzh-color-primary-hover-rgb: var(--stzh-color-venetianred-rgb);
   --stzh-color-primary-hover: rgba(var(--stzh-color-venetianred-rgb) / 1);
-  /* Buttons */
-  --stzh-button-background-color: var(--stzh-color-primary);
-  --stzh-button-hover-background-color: var(--stzh-color-primary-hover);
-  --stzh-button-disabled-background-color: var(--stzh-color-grey70);
-  /* Links */
-  --stzh-link-color: var(--stzh-color-primary);
-  --stzh-link-hover-color: var(--stzh-color-primary-hover);
-/*
-  --stzh-link-color: var(--stzh-color-scienceblue);
-  --stzh-heading-color: rgb(77, 77, 77);
-*/
-  /* Header */
-  --stzh-header-logobar-background-color: var(--stzh-color-primary);
-}
-.stzh-theme-pkzh {
-  --stzh-pkzh-font-family: Verdana, 'Geneva', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  --stzh-color-primary-rgb: var(--stzh-color-shakespeare-rgb);
-  --stzh-color-primary: rgba(var(--stzh-color-shakespeare-rgb) / 1);
-  --stzh-color-primary-hover-rgb: var(--stzh-color-chambray-rgb);
-  --stzh-color-primary-hover: rgba(var(--stzh-color-chambray-rgb) / 1);
   /* Buttons */
   --stzh-button-background-color: var(--stzh-color-primary);
   --stzh-button-hover-background-color: var(--stzh-color-primary-hover);
   --stzh-button-disabled-background-color: var(--stzh-color-grey70);
   /* Links */
   --stzh-link-color: var(--stzh-color-primary);
-  --stzh-link-hover-color: var(--stzh-color-primary-hover);
+  --stzh-link-hover-color: var(--stzh-color-primary-hover);
+  /*
+    --stzh-link-color: var(--stzh-color-scienceblue);
+    --stzh-heading-color: rgb(77, 77, 77);
+  */
   /* Header */
   --stzh-header-logobar-background-color: var(--stzh-color-primary);
-  --stzh-font-family-light: var(--stzh-pkzh-font-family);
-  --stzh-font-family-regular: var(--stzh-pkzh-font-family);
-  --stzh-font-family-medium: var(--stzh-pkzh-font-family);
-  --stzh-font-family-bold: var(--stzh-pkzh-font-family);
-  --stzh-font-family-heavy: var(--stzh-pkzh-font-family);
-  --stzh-font-weight-light: 300;
-  --stzh-font-weight-regular: normal;
-  --stzh-font-weight-medium: 500;
-  --stzh-font-weight-bold: 700;
-  --stzh-font-weight-heavy: 800;
 }
 .stzh-theme-ms-aoz-agenda {
@@ -1636,6 +1591,155 @@ the .has-focus class is used by the focus target */
   background-color: var(--stzh-color-grey10);
 }
+/**
+ * Pensionskasse Zürich (PKZH)
+ */
+.stzh-theme-pkzh {
+  --stzh-color-primary10-rgb: var(--stzh-color-coolgrey10-rgb);
+  --stzh-color-primary10: rgba(var(--stzh-color-primary10-rgb) / 1);
+  --stzh-color-primary20-rgb: var(--stzh-color-coolgrey20-rgb);
+  --stzh-color-primary20: rgba(var(--stzh-color-primary20-rgb) / 1);
+  --stzh-color-primary30-rgb: var(--stzh-color-coolgrey30-rgb);
+  --stzh-color-primary30: rgba(var(--stzh-color-primary30-rgb) / 1);
+  --stzh-color-primary40-rgb: var(--stzh-color-coolgrey40-rgb);
+  --stzh-color-primary40: rgba(var(--stzh-color-primary40-rgb) / 1);
+  --stzh-color-primary50-rgb: var(--stzh-color-coolgrey50-rgb);
+  --stzh-color-primary50: rgba(var(--stzh-color-primary50-rgb) / 1);
+  --stzh-color-primary60-rgb: var(--stzh-color-coolgrey60-rgb);
+  --stzh-color-primary60: rgba(var(--stzh-color-primary60-rgb) / 1);
+  --stzh-color-primary70-rgb: var(--stzh-color-coolgrey70-rgb);
+  --stzh-color-primary70: rgba(var(--stzh-color-primary70-rgb) / 1);
+  --stzh-color-primary80-rgb: var(--stzh-color-coolgrey80-rgb);
+  --stzh-color-primary80: rgba(var(--stzh-color-primary80-rgb) / 1);
+  --stzh-color-primary90-rgb: var(--stzh-color-coolgrey90-rgb);
+  --stzh-color-primary90: rgba(var(--stzh-color-primary90-rgb) / 1);
+  --stzh-color-primary100-rgb: var(--stzh-color-coolgrey100-rgb);
+  --stzh-color-primary100: rgba(var(--stzh-color-primary100-rgb) / 1);
+  --stzh-color-secondary10-rgb: var(--stzh-color-pkzh-cyan10-rgb);
+  --stzh-color-secondary10: rgba(var(--stzh-color-secondary10-rgb) / 1);
+  --stzh-color-secondary20-rgb: var(--stzh-color-pkzh-cyan20-rgb);
+  --stzh-color-secondary20: rgba(var(--stzh-color-secondary20-rgb) / 1);
+  --stzh-color-secondary30-rgb: var(--stzh-color-pkzh-cyan30-rgb);
+  --stzh-color-secondary30: rgba(var(--stzh-color-secondary30-rgb) / 1);
+  --stzh-color-secondary40-rgb: var(--stzh-color-pkzh-cyan40-rgb);
+  --stzh-color-secondary40: rgba(var(--stzh-color-secondary40-rgb) / 1);
+  --stzh-color-secondary50-rgb: var(--stzh-color-pkzh-cyan50-rgb);
+  --stzh-color-secondary50: rgba(var(--stzh-color-secondary50-rgb) / 1);
+  --stzh-color-secondary60-rgb: var(--stzh-color-pkzh-cyan60-rgb);
+  --stzh-color-secondary60: rgba(var(--stzh-color-secondary60-rgb) / 1);
+  --stzh-color-secondary70-rgb: var(--stzh-color-pkzh-cyan70-rgb);
+  --stzh-color-secondary70: rgba(var(--stzh-color-secondary70-rgb) / 1);
+  --stzh-color-secondary80-rgb: var(--stzh-color-pkzh-cyan80-rgb);
+  --stzh-color-secondary80: rgba(var(--stzh-color-secondary80-rgb) / 1);
+  --stzh-color-secondary90-rgb: var(--stzh-color-pkzh-cyan90-rgb);
+  --stzh-color-secondary90: rgba(var(--stzh-color-secondary90-rgb) / 1);
+  --stzh-color-secondary100-rgb: var(--stzh-color-pkzh-cyan100-rgb);
+  --stzh-color-secondary100: rgba(var(--stzh-color-secondary100-rgb) / 1);
+  /* Font families */
+  --stzh-font-family-regular: 'HelveticaNeueLTW05_65Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-medium: 'HelveticaNeueLTW05_65Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-medium-italic: 'HelveticaNeueLTW05_66MediumIt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-bold: 'HelveticaNeueLTW05_65Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-heavy: 'HelveticaNeueLTW01_71488914', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --stzh-font-family-title: var(--stzh-font-family-regular);
+  --stzh-font-weight-regular: normal;
+  --stzh-font-weight-medium: 400;
+  --stzh-font-weight-medium-italic: 400;
+  --stzh-font-weight-bold: 500;
+  --stzh-font-weight-heavy: 700;
+  /* General heading color */
+  --stzh-heading-color: var(--stzh-color-secondary70);
+  /* Logobar & Header */
+  --stzh-header-color: var(--stzh-color-secondary90);
+  --stzh-header-logo-width: 15rem;
+  --stzh-header-logobar-background-color: var(--stzh-color-white);
+  --stzh-header-menu-background-color: var(--stzh-color-secondary10);
+  --stzh-header-menu-list-item-background-hover: var(--stzh-color-secondary20);
+  --stzh-header-menu-item-color: var(--stzh-color-secondary90);
+  --stzh-header-menu-list-item-background-level2: var(--stzh-color-white);
+  --stzh-header-menu-list-item-background-level2-hover: var(--stzh-color-secondary10);
+  --stzh-header-metabar-background-color: var(--stzh-color-grey10);
+  --stzh-header-metanav-item-color: var(--stzh-color-secondary90);
+  /* Pagetitle Home */
+  --stzh-pagetitle-home-heading-color: var(--stzh-color-sunnyyellow40);
+  --stzh-pagetitle-home-subheading-color: var(--stzh-color-sunnyyellow40);
+  /* Pagetitle */
+  --stzh-pagetitle-background-color: var(--stzh-color-pkzh-cyan10);
+  /* Breadcrumb */
+  --stzh-breadcrumb-color: var(--stzh-color-secondary80);
+  /* Homepage Service Highlights */
+  --stzh-homepage-service-highlights-mostsearched-background-color: var(--stzh-color-sunnyyellow40);
+  --stzh-homepage-service-highlights-mostsearched-item-font-size: var(--stzh-font-hecto-font-size);
+  --stzh-homepage-service-highlights-topnews-background-color: var(--stzh-color-white);
+  --stzh-homepage-service-highlights-topnews-background-color-hover: var(--stzh-color-secondary10);
+  --stzh-homepage-service-highlights-topnews-subtitle-font: var(--stzh-font-family-medium);
+  /* Card Superteaser */
+  --stzh-card-superteaser-tag-color: var(--stzh-color-white);
+  --stzh-card-superteaser-tag-color-hover: var(--stzh-color-white);
+  --stzh-card-superteaser-tag-background-color: var(--stzh-color-secondary70);
+  --stzh-card-superteaser-heading-margin-bottom: 0;
+  --stzh-card-superteaser-heading-link-color: var(--stzh-color-primary90);
+  /* Footer */
+  --stzh-footer-background-color: var(--stzh-color-secondary90);
+  /* Accordion */
+  --stzh-accordion-button-color: var(--stzh-color-black);
+  --stzh-accordion-button-background-color: var(--stzh-color-secondary10);
+  --stzh-accordion-button-hover-background-color: var(--stzh-color-secondary20);
+  --stzh-accordion-button-background-color-is-open: var(--stzh-color-secondary20);
+  --stzh-accordion-content-background: var(--stzh-color-secondary10);
+  /**
+   * Link
+   */
+  --stzh-link-color: var(--stzh-color-secondary70);
+  --stzh-link-hover-color: var(--stzh-color-secondary80);
+  /**
+   * Buttons
+   */
+  --stzh-button-background-color: var(--stzh-color-secondary70);
+  --stzh-button-hover-background-color: var(--stzh-color-secondary60);
+  --stzh-button-secondary-color: var(--stzh-color-primary80);
+  --stzh-button-secondary-background-color: var(--stzh-color-secondary20);
+  --stzh-button-secondary-hover-color: var(--stzh-color-primary80);
+  --stzh-button-secondary-hover-background-color: var(--stzh-color-secondary40);
+  --stzh-button-tertiary-color: var(--stzh-color-primary70);
+  --stzh-button-tertiary-hover-color: var(--stzh-color-primary80);
+  --stzh-button-tertiary-disabled-color: var(--stzh-color-grey70);
+  /**
+   * Anchornav
+   */
+  --stzh-anchornav-hover-color: var(--stzh-color-secondary50);
+}
+.stzh-theme-pkzh--cyan {
+  --stzh-pagetitle-background-color: var(--stzh-color-pkzh-cyan10);
+}
+.stzh-theme-pkzh--limegreen {
+  --stzh-pagetitle-background-color: var(--stzh-color-limegreen20);
+}
+.stzh-theme-pkzh--violet {
+  --stzh-pagetitle-background-color: var(--stzh-color-violet20);
+}
+.stzh-theme-pkzh--sunnyyellow {
+  --stzh-pagetitle-background-color: var(--stzh-color-sunnyyellow20);
+}
 /**
  * Publizistische Inhalte (PI)
  */