@baloise/ds-styles 17.4.0-snapshot.1609-d2bcc38d3 → 17.4.1

package/css/basic.css

@@ -1,4 +1,4 @@
-.table:not(:last-child), .table-container:not(:last-child) {
+.table-container:not(:last-child), .table:not(:last-child) {
   margin-bottom: 0.25rem;
 }
 
@@ -10,9 +10,9 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-  a.link:not(.button).is-inverted:focus-visible,
-  a.is-link:not(.button).is-inverted:focus-visible, a.link:not(.button).is-light:focus-visible,
-  a.is-link:not(.button).is-light:focus-visible, .button.is-light:focus-visible:not(:active), .button.is-light.is-focused:not(:active), .button.is-inverted:focus-visible:not(:active), .button.is-inverted.is-focused:not(:active), .button.is-inverted.is-light:focus-visible:not(:active), .button.is-inverted.is-light.is-focused:not(:active) {
+  a.link:not(.button).is-light:focus-visible,
+  a.is-link:not(.button).is-light:focus-visible, a.link:not(.button).is-inverted:focus-visible,
+  a.is-link:not(.button).is-inverted:focus-visible, .button.is-inverted.is-light:focus-visible:not(:active), .button.is-inverted.is-light.is-focused:not(:active), .button.is-inverted:focus-visible:not(:active), .button.is-inverted.is-focused:not(:active), .button.is-light:focus-visible:not(:active), .button.is-light.is-focused:not(:active) {
     box-shadow: var(--bal-focus-shadow-inverted) !important;
   }
 }
@@ -386,6 +386,43 @@ template {
   display: none;
 }
 
+.table-container:not(:last-child), .table:not(:last-child) {
+  margin-bottom: 0.25rem;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  a.link:not(.button):focus-visible,
+  a.is-link:not(.button):focus-visible, .button:focus-visible:not(:active), .button.is-focused:not(:active) {
+    box-shadow: var(--bal-focus-shadow) !important;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  a.link:not(.button).is-light:focus-visible,
+  a.is-link:not(.button).is-light:focus-visible, a.link:not(.button).is-inverted:focus-visible,
+  a.is-link:not(.button).is-inverted:focus-visible, .button.is-inverted.is-light:focus-visible:not(:active), .button.is-inverted.is-light.is-focused:not(:active), .button.is-inverted:focus-visible:not(:active), .button.is-inverted.is-focused:not(:active), .button.is-light:focus-visible:not(:active), .button.is-light.is-focused:not(:active) {
+    box-shadow: var(--bal-focus-shadow-inverted) !important;
+  }
+}
+
+.button.is-disabled.is-inverted, .button.is-disabled, .button.is-disabled:hover, .button.is-disabled:active, .button.is-disabled:focus, .button.is-inverted:disabled, .button:disabled, .file.is-disabled .file-label,
+.file.is-disabled .file-cta {
+  cursor: default !important;
+  pointer-events: none !important;
+}
+
+.button, .file {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.button {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
 html {
   background-color: var(--bal-body-background);
   font-size: var(--bal-body-font-size);
@@ -563,7 +600,7 @@ fieldset {
 }
 /**
  * Do not edit directly
- * Generated on Thu, 06 Feb 2025 21:52:18 GMT
+ * Generated on Fri, 07 Feb 2025 09:32:44 GMT
  */
 :root {
   --bal-text-shadow-normal: 0px 0px 4px rgba(0, 0, 0, 0.15), 0px 4px 12px rgba(0, 0, 0, 0.25), 0px 0px 80px rgba(0, 0, 0, 0.5); /* Increases readability when used on a image background. */
@@ -831,6 +868,76 @@ fieldset {
   --bal-color-background-primary: var(--bal-color-primary-5); /* Blue is our accent color and it is present on every touchpoint. Our logo, text, buttons and links are blue. */
 }
 
+:root {
+  --bal-line-height-x-small: 1.125rem;
+  --bal-line-height-small: 1.25rem;
+  --bal-line-height-normal: 1.5rem;
+  --bal-line-height-medium: 1.5rem;
+  --bal-line-height-large: 1.5rem;
+  --bal-line-height-x-large: 2rem;
+  --bal-line-height-xx-large: 2rem;
+  --bal-line-height-xxx-large: 2rem;
+  --bal-line-height-xxxx-large: 2.5rem;
+  --bal-line-height-xxxxx-large: 3.5rem;
+  --bal-line-height-tablet-x-small: 1.125rem;
+  --bal-line-height-tablet-small: 1.25rem;
+  --bal-line-height-tablet-normal: 1.5rem;
+  --bal-line-height-tablet-medium: 1.625rem;
+  --bal-line-height-tablet-large: 2rem;
+  --bal-line-height-tablet-x-large: 2rem;
+  --bal-line-height-tablet-xx-large: 2.5rem;
+  --bal-line-height-tablet-xxx-large: 3rem;
+  --bal-line-height-tablet-xxxx-large: 3.5rem;
+  --bal-line-height-tablet-xxxxx-large: 6rem;
+  --bal-line-height-desktop-x-small: 1.125rem;
+  --bal-line-height-desktop-small: 1.25rem;
+  --bal-line-height-desktop-normal: 1.5rem;
+  --bal-line-height-desktop-medium: 1.625rem;
+  --bal-line-height-desktop-large: 2rem;
+  --bal-line-height-desktop-x-large: 2rem;
+  --bal-line-height-desktop-xx-large: 2.5rem;
+  --bal-line-height-desktop-xxx-large: 3rem;
+  --bal-line-height-desktop-xxxx-large: 3.5rem;
+  --bal-line-height-desktop-xxxxx-large: 6rem;
+}
+
+.table-container:not(:last-child), .table:not(:last-child) {
+  margin-bottom: 0.25rem;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  a.link:not(.button):focus-visible,
+  a.is-link:not(.button):focus-visible, .button:focus-visible:not(:active), .button.is-focused:not(:active) {
+    box-shadow: var(--bal-focus-shadow) !important;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  a.link:not(.button).is-light:focus-visible,
+  a.is-link:not(.button).is-light:focus-visible, a.link:not(.button).is-inverted:focus-visible,
+  a.is-link:not(.button).is-inverted:focus-visible, .button.is-inverted.is-light:focus-visible:not(:active), .button.is-inverted.is-light.is-focused:not(:active), .button.is-inverted:focus-visible:not(:active), .button.is-inverted.is-focused:not(:active), .button.is-light:focus-visible:not(:active), .button.is-light.is-focused:not(:active) {
+    box-shadow: var(--bal-focus-shadow-inverted) !important;
+  }
+}
+
+.button.is-disabled.is-inverted, .button.is-disabled, .button.is-disabled:hover, .button.is-disabled:active, .button.is-disabled:focus, .button.is-inverted:disabled, .button:disabled, .file.is-disabled .file-label,
+.file.is-disabled .file-cta {
+  cursor: default !important;
+  pointer-events: none !important;
+}
+
+.button, .file {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.button {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
 /**
  * * @prop --bal-body-background: Body background color
  * * @prop --bal-body-font-family: Body font family
@@ -1363,7 +1470,7 @@ fieldset {
   --bal-table-striped-row-even-background-color-hover: var(--bal-color-grey-2);
 }
 
-.select select, .input, .textarea {
+.select select, .textarea, .input {
   justify-content: flex-start;
   background-color: var(--bal-form-field-control-background);
   border-color: var(--bal-form-field-control-border-color);
@@ -1371,48 +1478,48 @@ fieldset {
   border-radius: var(--bal-form-field-control-radius);
   color: var(--bal-form-field-control-color);
 }
-.select select::-moz-placeholder, .input::-moz-placeholder, .textarea::-moz-placeholder {
+.select select::-moz-placeholder, .textarea::-moz-placeholder, .input::-moz-placeholder {
   color: var(--bal-form-field-control-placeholder-color);
 }
-.select select::-webkit-input-placeholder, .input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder {
+.select select::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .input::-webkit-input-placeholder {
   color: var(--bal-form-field-control-placeholder-color);
 }
-.select select:-moz-placeholder, .input:-moz-placeholder, .textarea:-moz-placeholder {
+.select select:-moz-placeholder, .textarea:-moz-placeholder, .input:-moz-placeholder {
   color: var(--bal-form-field-control-placeholder-color);
 }
-.select select:-ms-input-placeholder, .input:-ms-input-placeholder, .textarea:-ms-input-placeholder {
+.select select:-ms-input-placeholder, .textarea:-ms-input-placeholder, .input:-ms-input-placeholder {
   color: var(--bal-form-field-control-placeholder-color);
 }
 @media (hover: hover) and (pointer: fine) {
-  .select select:hover, .input:hover, .textarea:hover, .select select.is-hovered, .is-hovered.input, .is-hovered.textarea {
+  .select select:hover, .textarea:hover, .input:hover, .select select.is-hovered, .is-hovered.textarea, .is-hovered.input {
     border-color: var(--bal-form-field-control-border-color-hover);
     background-color: var(--bal-form-field-control-background-hover);
   }
 }
-.select select.bal-focused, .bal-focused.input, .bal-focused.textarea, .select select:focus, .input:focus, .textarea:focus, .select select.is-focused, .is-focused.input, .is-focused.textarea, .select select:active, .input:active, .textarea:active, .select select.is-active, .is-active.input, .is-active.textarea {
+.select select.bal-focused, .bal-focused.textarea, .bal-focused.input, .select select:focus, .textarea:focus, .input:focus, .select select.is-focused, .is-focused.textarea, .is-focused.input, .select select:active, .textarea:active, .input:active, .select select.is-active, .is-active.textarea, .is-active.input {
   border-color: var(--bal-form-field-control-border-color-active);
   background-color: var(--bal-form-field-control-background-active);
 }
-.select select[disabled], [disabled].input, [disabled].textarea, fieldset[disabled] .select select, .select fieldset[disabled] select, fieldset[disabled] .input, fieldset[disabled] .textarea {
+.select select[disabled], [disabled].textarea, [disabled].input, fieldset[disabled] .select select, .select fieldset[disabled] select, fieldset[disabled] .textarea, fieldset[disabled] .input {
   background-color: var(--bal-form-field-control-disabled-background);
   border-color: var(--bal-form-field-control-disabled-border-color);
   box-shadow: none;
   color: var(--bal-form-field-control-disabled-color);
 }
-.select select[disabled]::-moz-placeholder, [disabled].input::-moz-placeholder, [disabled].textarea::-moz-placeholder, fieldset[disabled] .select select::-moz-placeholder, .select fieldset[disabled] select::-moz-placeholder, fieldset[disabled] .input::-moz-placeholder, fieldset[disabled] .textarea::-moz-placeholder {
+.select select[disabled]::-moz-placeholder, [disabled].textarea::-moz-placeholder, [disabled].input::-moz-placeholder, fieldset[disabled] .select select::-moz-placeholder, .select fieldset[disabled] select::-moz-placeholder, fieldset[disabled] .textarea::-moz-placeholder, fieldset[disabled] .input::-moz-placeholder {
   color: var(--bal-form-field-control-disabled-color);
 }
-.select select[disabled]::-webkit-input-placeholder, [disabled].input::-webkit-input-placeholder, [disabled].textarea::-webkit-input-placeholder, fieldset[disabled] .select select::-webkit-input-placeholder, .select fieldset[disabled] select::-webkit-input-placeholder, fieldset[disabled] .input::-webkit-input-placeholder, fieldset[disabled] .textarea::-webkit-input-placeholder {
+.select select[disabled]::-webkit-input-placeholder, [disabled].textarea::-webkit-input-placeholder, [disabled].input::-webkit-input-placeholder, fieldset[disabled] .select select::-webkit-input-placeholder, .select fieldset[disabled] select::-webkit-input-placeholder, fieldset[disabled] .textarea::-webkit-input-placeholder, fieldset[disabled] .input::-webkit-input-placeholder {
   color: var(--bal-form-field-control-disabled-color);
 }
-.select select[disabled]:-moz-placeholder, [disabled].input:-moz-placeholder, [disabled].textarea:-moz-placeholder, fieldset[disabled] .select select:-moz-placeholder, .select fieldset[disabled] select:-moz-placeholder, fieldset[disabled] .input:-moz-placeholder, fieldset[disabled] .textarea:-moz-placeholder {
+.select select[disabled]:-moz-placeholder, [disabled].textarea:-moz-placeholder, [disabled].input:-moz-placeholder, fieldset[disabled] .select select:-moz-placeholder, .select fieldset[disabled] select:-moz-placeholder, fieldset[disabled] .textarea:-moz-placeholder, fieldset[disabled] .input:-moz-placeholder {
   color: var(--bal-form-field-control-disabled-color);
 }
-.select select[disabled]:-ms-input-placeholder, [disabled].input:-ms-input-placeholder, [disabled].textarea:-ms-input-placeholder, fieldset[disabled] .select select:-ms-input-placeholder, .select fieldset[disabled] select:-ms-input-placeholder, fieldset[disabled] .input:-ms-input-placeholder, fieldset[disabled] .textarea:-ms-input-placeholder {
+.select select[disabled]:-ms-input-placeholder, [disabled].textarea:-ms-input-placeholder, [disabled].input:-ms-input-placeholder, fieldset[disabled] .select select:-ms-input-placeholder, .select fieldset[disabled] select:-ms-input-placeholder, fieldset[disabled] .textarea:-ms-input-placeholder, fieldset[disabled] .input:-ms-input-placeholder {
   color: var(--bal-form-field-control-disabled-color);
 }
 
-.file-cta, .select select, .input, .textarea {
+.file-cta, .select select, .textarea, .input {
   -moz-appearance: none !important;
   -webkit-appearance: none !important;
   align-items: center;
@@ -1430,10 +1537,10 @@ fieldset {
   position: relative;
   vertical-align: top;
 }
-.file-cta:focus, .select select:focus, .input:focus, .textarea:focus, .is-focused.file-cta, .select select.is-focused, .is-focused.input, .is-focused.textarea, .file-cta:active, .select select:active, .input:active, .textarea:active, .is-active.file-cta, .select select.is-active, .is-active.input, .is-active.textarea {
+.file-cta:focus, .select select:focus, .textarea:focus, .input:focus, .is-focused.file-cta, .select select.is-focused, .is-focused.textarea, .is-focused.input, .file-cta:active, .select select:active, .textarea:active, .input:active, .is-active.file-cta, .select select.is-active, .is-active.textarea, .is-active.input {
   outline: none;
 }
-[disabled].file-cta, .select select[disabled], [disabled].input, [disabled].textarea, fieldset[disabled] .file-cta, fieldset[disabled] .select select, .select fieldset[disabled] select, fieldset[disabled] .input, fieldset[disabled] .textarea {
+[disabled].file-cta, .select select[disabled], [disabled].textarea, [disabled].input, fieldset[disabled] .file-cta, fieldset[disabled] .select select, .select fieldset[disabled] select, fieldset[disabled] .textarea, fieldset[disabled] .input {
   cursor: default;
 }
 
@@ -5005,37 +5112,4 @@ table.table td.has-buttons .buttons {
 .has-sticky-footer footer.footer {
   margin-top: auto;
 }
-
-:root {
-  --bal-line-height-x-small: 1.125rem;
-  --bal-line-height-small: 1.25rem;
-  --bal-line-height-normal: 1.5rem;
-  --bal-line-height-medium: 1.5rem;
-  --bal-line-height-large: 1.5rem;
-  --bal-line-height-x-large: 2rem;
-  --bal-line-height-xx-large: 2rem;
-  --bal-line-height-xxx-large: 2rem;
-  --bal-line-height-xxxx-large: 2.5rem;
-  --bal-line-height-xxxxx-large: 3.5rem;
-  --bal-line-height-tablet-x-small: 1.125rem;
-  --bal-line-height-tablet-small: 1.25rem;
-  --bal-line-height-tablet-normal: 1.5rem;
-  --bal-line-height-tablet-medium: 1.625rem;
-  --bal-line-height-tablet-large: 2rem;
-  --bal-line-height-tablet-x-large: 2rem;
-  --bal-line-height-tablet-xx-large: 2.5rem;
-  --bal-line-height-tablet-xxx-large: 3rem;
-  --bal-line-height-tablet-xxxx-large: 3.5rem;
-  --bal-line-height-tablet-xxxxx-large: 6rem;
-  --bal-line-height-desktop-x-small: 1.125rem;
-  --bal-line-height-desktop-small: 1.25rem;
-  --bal-line-height-desktop-normal: 1.5rem;
-  --bal-line-height-desktop-medium: 1.625rem;
-  --bal-line-height-desktop-large: 2rem;
-  --bal-line-height-desktop-x-large: 2rem;
-  --bal-line-height-desktop-xx-large: 2.5rem;
-  --bal-line-height-desktop-xxx-large: 3rem;
-  --bal-line-height-desktop-xxxx-large: 3.5rem;
-  --bal-line-height-desktop-xxxxx-large: 6rem;
-}
 /*# sourceMappingURL=basic.css.map */