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

package/css/core.css

@@ -1,6 +1,6 @@
 /**
  * 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. */
@@ -13,6 +13,7 @@
   --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);
@@ -267,40 +268,7 @@
   --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) {
+.table:not(:last-child), .table-container:not(:last-child) {
   margin-bottom: 0.25rem;
 }
 
@@ -312,9 +280,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;
   }
 }
@@ -869,7 +837,7 @@
   --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);
@@ -877,48 +845,48 @@
   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;
@@ -936,10 +904,10 @@
   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;
 }
 
@@ -1352,7 +1320,7 @@ input.is-grouped {
 }
 
 .field:not(:last-child) {
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.25rem;
 }
 .field.has-addons {
   display: flex;
@@ -3981,6 +3949,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,
@@ -4498,4 +4479,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=core.css.map */