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

package/css/basic.css

@@ -1,4 +1,4 @@
-.table-container:not(:last-child), .table:not(:last-child) {
+.table:not(:last-child), .table-container:not(:last-child) {
   margin-bottom: 0.25rem;
 }
 
@@ -10,9 +10,9 @@
 }
 
 @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) {
+  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) {
     box-shadow: var(--bal-focus-shadow-inverted) !important;
   }
 }
@@ -386,43 +386,6 @@ 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);
@@ -600,7 +563,7 @@ fieldset {
 }
 /**
  * Do not edit directly
- * Generated on Thu, 16 Jan 2025 14:24:58 GMT
+ * Generated on Thu, 06 Feb 2025 21:52:18 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. */
@@ -613,6 +576,7 @@ fieldset {
   --bal-opacity-0: 0;
   --bal-font-family-text: BaloiseCreateText, Arial, sans-serif;
   --bal-font-family-title: BaloiseCreateHeadline, Arial, sans-serif;
+  --bal-shadow-header: 0 4px 4px 0 rgba(0, 7, 57, 0.15); /* Shadow effect for a header bar */
   --bal-shadow-large: 0 0 30px 0 rgba(0, 7, 57, 0.15); /* Large shadow are used for hover effects. */
   --bal-shadow-normal: 0 0 10px 0 rgba(0, 7, 57, 0.15); /* Default shadow size to elevate an element. */
   --bal-shadow-small: 0px 2px 5px 1px rgba(0, 7, 57, 0.12);
@@ -867,76 +831,6 @@ 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
@@ -1469,7 +1363,7 @@ fieldset {
   --bal-table-striped-row-even-background-color-hover: var(--bal-color-grey-2);
 }
 
-.select select, .textarea, .input {
+.select select, .input, .textarea {
   justify-content: flex-start;
   background-color: var(--bal-form-field-control-background);
   border-color: var(--bal-form-field-control-border-color);
@@ -1477,48 +1371,48 @@ fieldset {
   border-radius: var(--bal-form-field-control-radius);
   color: var(--bal-form-field-control-color);
 }
-.select select::-moz-placeholder, .textarea::-moz-placeholder, .input::-moz-placeholder {
+.select select::-moz-placeholder, .input::-moz-placeholder, .textarea::-moz-placeholder {
   color: var(--bal-form-field-control-placeholder-color);
 }
-.select select::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .input::-webkit-input-placeholder {
+.select select::-webkit-input-placeholder, .input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder {
   color: var(--bal-form-field-control-placeholder-color);
 }
-.select select:-moz-placeholder, .textarea:-moz-placeholder, .input:-moz-placeholder {
+.select select:-moz-placeholder, .input:-moz-placeholder, .textarea:-moz-placeholder {
   color: var(--bal-form-field-control-placeholder-color);
 }
-.select select:-ms-input-placeholder, .textarea:-ms-input-placeholder, .input:-ms-input-placeholder {
+.select select:-ms-input-placeholder, .input:-ms-input-placeholder, .textarea:-ms-input-placeholder {
   color: var(--bal-form-field-control-placeholder-color);
 }
 @media (hover: hover) and (pointer: fine) {
-  .select select:hover, .textarea:hover, .input:hover, .select select.is-hovered, .is-hovered.textarea, .is-hovered.input {
+  .select select:hover, .input:hover, .textarea:hover, .select select.is-hovered, .is-hovered.input, .is-hovered.textarea {
     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.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 {
+.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 {
   border-color: var(--bal-form-field-control-border-color-active);
   background-color: var(--bal-form-field-control-background-active);
 }
-.select select[disabled], [disabled].textarea, [disabled].input, fieldset[disabled] .select select, .select fieldset[disabled] select, fieldset[disabled] .textarea, fieldset[disabled] .input {
+.select select[disabled], [disabled].input, [disabled].textarea, fieldset[disabled] .select select, .select fieldset[disabled] select, fieldset[disabled] .input, fieldset[disabled] .textarea {
   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].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 {
+.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 {
   color: var(--bal-form-field-control-disabled-color);
 }
-.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 {
+.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 {
   color: var(--bal-form-field-control-disabled-color);
 }
-.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 {
+.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 {
   color: var(--bal-form-field-control-disabled-color);
 }
-.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 {
+.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 {
   color: var(--bal-form-field-control-disabled-color);
 }
 
-.file-cta, .select select, .textarea, .input {
+.file-cta, .select select, .input, .textarea {
   -moz-appearance: none !important;
   -webkit-appearance: none !important;
   align-items: center;
@@ -1536,10 +1430,10 @@ fieldset {
   position: relative;
   vertical-align: top;
 }
-.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 {
+.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 {
   outline: none;
 }
-[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 {
+[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 {
   cursor: default;
 }
 
@@ -1952,7 +1846,7 @@ input.is-grouped {
 }
 
 .field:not(:last-child) {
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.25rem;
 }
 .field.has-addons {
   display: flex;
@@ -4581,6 +4475,19 @@ ul.is-list {
     margin-bottom: 2rem;
   }
 }
+ol.list.is-inside,
+ul.list.is-inside,
+ol.is-list.is-inside,
+ul.is-list.is-inside {
+  list-style-position: inside !important;
+  margin-left: 0;
+}
+ol.list.is-inside li,
+ul.list.is-inside li,
+ol.is-list.is-inside li,
+ul.is-list.is-inside li {
+  list-style-position: inside !important;
+}
 ol.list li,
 ul.list li,
 ol.is-list li,
@@ -5098,4 +5005,37 @@ 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 */