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

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 (75) hide show
  1. package/css/all.css +1058 -651
  2. package/css/all.css.map +1 -1
  3. package/css/all.min.css +1 -1
  4. package/css/baloise-design-system.css +1058 -651
  5. package/css/baloise-design-system.css.map +1 -1
  6. package/css/baloise-design-system.min.css +1 -1
  7. package/css/basic.css +127 -53
  8. package/css/basic.css.map +1 -1
  9. package/css/basic.min.css +1 -1
  10. package/css/core.css +53 -53
  11. package/css/core.css.map +1 -1
  12. package/css/core.min.css +1 -1
  13. package/css/structure.css.map +1 -1
  14. package/css/utilities/all.css +600 -600
  15. package/css/utilities/all.css.map +1 -1
  16. package/css/utilities/all.min.css +1 -1
  17. package/css/utilities/background.css.map +1 -1
  18. package/css/utilities/border.css.map +1 -1
  19. package/css/utilities/elevation.css.map +1 -1
  20. package/css/utilities/flex.css.map +1 -1
  21. package/css/utilities/grid.css.map +1 -1
  22. package/css/utilities/interaction.css.map +1 -1
  23. package/css/utilities/layout.css.map +1 -1
  24. package/css/utilities/sizing.css.map +1 -1
  25. package/css/utilities/spacing.css +600 -600
  26. package/css/utilities/spacing.css.map +1 -1
  27. package/css/utilities/spacing.min.css +1 -1
  28. package/css/utilities/typography.css.map +1 -1
  29. package/package.json +3 -3
  30. package/sass/all.sass +6 -6
  31. package/sass/baloise-design-system.sass +1 -1
  32. package/sass/basic.sass +5 -5
  33. package/sass/core.sass +4 -3
  34. package/sass/font.sass +1 -1
  35. package/sass/mixins.sass +3 -1
  36. package/sass/structure.sass +1 -1
  37. package/sass/utilities/all.sass +9 -9
  38. package/sass/utilities/background.sass +2 -2
  39. package/sass/utilities/border.sass +2 -2
  40. package/sass/utilities/elevation.sass +2 -2
  41. package/sass/utilities/flex.sass +2 -2
  42. package/sass/utilities/grid.sass +2 -2
  43. package/sass/utilities/interaction.sass +2 -2
  44. package/sass/utilities/layout.sass +2 -2
  45. package/sass/utilities/sizing.sass +2 -2
  46. package/sass/utilities/spacing.sass +2 -2
  47. package/sass/utilities/typography.sass +2 -2
  48. package/src/core/_all.sass +8 -8
  49. package/src/core/container.sass +0 -2
  50. package/src/core/form/_all.sass +6 -6
  51. package/src/core/form/button.sass +0 -2
  52. package/src/core/form/file.sass +0 -3
  53. package/src/core/form/input-textarea.sass +0 -2
  54. package/src/core/form/select.sass +0 -3
  55. package/src/core/form/shared.sass +0 -2
  56. package/src/core/form/tools.sass +0 -2
  57. package/src/core/grid.sass +0 -1
  58. package/src/core/link.sass +0 -2
  59. package/src/core/list.sass +0 -2
  60. package/src/core/table.sass +0 -2
  61. package/src/core/typography.sass +0 -2
  62. package/src/core/vars/_all.sass +7 -7
  63. package/src/generated/background.sass +0 -3
  64. package/src/generated/border.sass +0 -3
  65. package/src/generated/elevation.sass +0 -3
  66. package/src/generated/flex.sass +0 -3
  67. package/src/generated/interaction.sass +0 -3
  68. package/src/generated/layout.sass +0 -3
  69. package/src/generated/sizing.sass +0 -3
  70. package/src/generated/spacing.sass +600 -603
  71. package/src/generated/typography.sass +0 -3
  72. package/src/mixins/_all.sass +6 -6
  73. package/src/mixins/breakpoint.mixin.sass +0 -2
  74. package/src/mixins/extends.sass +0 -2
  75. package/src/mixins/general.mixin.sass +0 -1
package/css/core.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 06 Feb 2025 21:52:18 GMT
3
+ * Generated on Fri, 07 Feb 2025 09:32:44 GMT
4
4
  */
5
5
  :root {
6
6
  --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. */
@@ -268,7 +268,40 @@
268
268
  --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. */
269
269
  }
270
270
 
271
- .table:not(:last-child), .table-container:not(:last-child) {
271
+ :root {
272
+ --bal-line-height-x-small: 1.125rem;
273
+ --bal-line-height-small: 1.25rem;
274
+ --bal-line-height-normal: 1.5rem;
275
+ --bal-line-height-medium: 1.5rem;
276
+ --bal-line-height-large: 1.5rem;
277
+ --bal-line-height-x-large: 2rem;
278
+ --bal-line-height-xx-large: 2rem;
279
+ --bal-line-height-xxx-large: 2rem;
280
+ --bal-line-height-xxxx-large: 2.5rem;
281
+ --bal-line-height-xxxxx-large: 3.5rem;
282
+ --bal-line-height-tablet-x-small: 1.125rem;
283
+ --bal-line-height-tablet-small: 1.25rem;
284
+ --bal-line-height-tablet-normal: 1.5rem;
285
+ --bal-line-height-tablet-medium: 1.625rem;
286
+ --bal-line-height-tablet-large: 2rem;
287
+ --bal-line-height-tablet-x-large: 2rem;
288
+ --bal-line-height-tablet-xx-large: 2.5rem;
289
+ --bal-line-height-tablet-xxx-large: 3rem;
290
+ --bal-line-height-tablet-xxxx-large: 3.5rem;
291
+ --bal-line-height-tablet-xxxxx-large: 6rem;
292
+ --bal-line-height-desktop-x-small: 1.125rem;
293
+ --bal-line-height-desktop-small: 1.25rem;
294
+ --bal-line-height-desktop-normal: 1.5rem;
295
+ --bal-line-height-desktop-medium: 1.625rem;
296
+ --bal-line-height-desktop-large: 2rem;
297
+ --bal-line-height-desktop-x-large: 2rem;
298
+ --bal-line-height-desktop-xx-large: 2.5rem;
299
+ --bal-line-height-desktop-xxx-large: 3rem;
300
+ --bal-line-height-desktop-xxxx-large: 3.5rem;
301
+ --bal-line-height-desktop-xxxxx-large: 6rem;
302
+ }
303
+
304
+ .table-container:not(:last-child), .table:not(:last-child) {
272
305
  margin-bottom: 0.25rem;
273
306
  }
274
307
 
@@ -280,9 +313,9 @@
280
313
  }
281
314
 
282
315
  @media (hover: hover) and (pointer: fine) {
283
- a.link:not(.button).is-inverted:focus-visible,
284
- a.is-link:not(.button).is-inverted:focus-visible, a.link:not(.button).is-light:focus-visible,
285
- 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) {
316
+ a.link:not(.button).is-light:focus-visible,
317
+ a.is-link:not(.button).is-light:focus-visible, a.link:not(.button).is-inverted:focus-visible,
318
+ 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) {
286
319
  box-shadow: var(--bal-focus-shadow-inverted) !important;
287
320
  }
288
321
  }
@@ -837,7 +870,7 @@
837
870
  --bal-table-striped-row-even-background-color-hover: var(--bal-color-grey-2);
838
871
  }
839
872
 
840
- .select select, .input, .textarea {
873
+ .select select, .textarea, .input {
841
874
  justify-content: flex-start;
842
875
  background-color: var(--bal-form-field-control-background);
843
876
  border-color: var(--bal-form-field-control-border-color);
@@ -845,48 +878,48 @@
845
878
  border-radius: var(--bal-form-field-control-radius);
846
879
  color: var(--bal-form-field-control-color);
847
880
  }
848
- .select select::-moz-placeholder, .input::-moz-placeholder, .textarea::-moz-placeholder {
881
+ .select select::-moz-placeholder, .textarea::-moz-placeholder, .input::-moz-placeholder {
849
882
  color: var(--bal-form-field-control-placeholder-color);
850
883
  }
851
- .select select::-webkit-input-placeholder, .input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder {
884
+ .select select::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .input::-webkit-input-placeholder {
852
885
  color: var(--bal-form-field-control-placeholder-color);
853
886
  }
854
- .select select:-moz-placeholder, .input:-moz-placeholder, .textarea:-moz-placeholder {
887
+ .select select:-moz-placeholder, .textarea:-moz-placeholder, .input:-moz-placeholder {
855
888
  color: var(--bal-form-field-control-placeholder-color);
856
889
  }
857
- .select select:-ms-input-placeholder, .input:-ms-input-placeholder, .textarea:-ms-input-placeholder {
890
+ .select select:-ms-input-placeholder, .textarea:-ms-input-placeholder, .input:-ms-input-placeholder {
858
891
  color: var(--bal-form-field-control-placeholder-color);
859
892
  }
860
893
  @media (hover: hover) and (pointer: fine) {
861
- .select select:hover, .input:hover, .textarea:hover, .select select.is-hovered, .is-hovered.input, .is-hovered.textarea {
894
+ .select select:hover, .textarea:hover, .input:hover, .select select.is-hovered, .is-hovered.textarea, .is-hovered.input {
862
895
  border-color: var(--bal-form-field-control-border-color-hover);
863
896
  background-color: var(--bal-form-field-control-background-hover);
864
897
  }
865
898
  }
866
- .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 {
899
+ .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 {
867
900
  border-color: var(--bal-form-field-control-border-color-active);
868
901
  background-color: var(--bal-form-field-control-background-active);
869
902
  }
870
- .select select[disabled], [disabled].input, [disabled].textarea, fieldset[disabled] .select select, .select fieldset[disabled] select, fieldset[disabled] .input, fieldset[disabled] .textarea {
903
+ .select select[disabled], [disabled].textarea, [disabled].input, fieldset[disabled] .select select, .select fieldset[disabled] select, fieldset[disabled] .textarea, fieldset[disabled] .input {
871
904
  background-color: var(--bal-form-field-control-disabled-background);
872
905
  border-color: var(--bal-form-field-control-disabled-border-color);
873
906
  box-shadow: none;
874
907
  color: var(--bal-form-field-control-disabled-color);
875
908
  }
876
- .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 {
909
+ .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 {
877
910
  color: var(--bal-form-field-control-disabled-color);
878
911
  }
879
- .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 {
912
+ .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 {
880
913
  color: var(--bal-form-field-control-disabled-color);
881
914
  }
882
- .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 {
915
+ .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 {
883
916
  color: var(--bal-form-field-control-disabled-color);
884
917
  }
885
- .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 {
918
+ .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 {
886
919
  color: var(--bal-form-field-control-disabled-color);
887
920
  }
888
921
 
889
- .file-cta, .select select, .input, .textarea {
922
+ .file-cta, .select select, .textarea, .input {
890
923
  -moz-appearance: none !important;
891
924
  -webkit-appearance: none !important;
892
925
  align-items: center;
@@ -904,10 +937,10 @@
904
937
  position: relative;
905
938
  vertical-align: top;
906
939
  }
907
- .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 {
940
+ .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 {
908
941
  outline: none;
909
942
  }
910
- [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 {
943
+ [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 {
911
944
  cursor: default;
912
945
  }
913
946
 
@@ -4479,37 +4512,4 @@ table.table td.has-buttons .buttons {
4479
4512
  .has-sticky-footer footer.footer {
4480
4513
  margin-top: auto;
4481
4514
  }
4482
-
4483
- :root {
4484
- --bal-line-height-x-small: 1.125rem;
4485
- --bal-line-height-small: 1.25rem;
4486
- --bal-line-height-normal: 1.5rem;
4487
- --bal-line-height-medium: 1.5rem;
4488
- --bal-line-height-large: 1.5rem;
4489
- --bal-line-height-x-large: 2rem;
4490
- --bal-line-height-xx-large: 2rem;
4491
- --bal-line-height-xxx-large: 2rem;
4492
- --bal-line-height-xxxx-large: 2.5rem;
4493
- --bal-line-height-xxxxx-large: 3.5rem;
4494
- --bal-line-height-tablet-x-small: 1.125rem;
4495
- --bal-line-height-tablet-small: 1.25rem;
4496
- --bal-line-height-tablet-normal: 1.5rem;
4497
- --bal-line-height-tablet-medium: 1.625rem;
4498
- --bal-line-height-tablet-large: 2rem;
4499
- --bal-line-height-tablet-x-large: 2rem;
4500
- --bal-line-height-tablet-xx-large: 2.5rem;
4501
- --bal-line-height-tablet-xxx-large: 3rem;
4502
- --bal-line-height-tablet-xxxx-large: 3.5rem;
4503
- --bal-line-height-tablet-xxxxx-large: 6rem;
4504
- --bal-line-height-desktop-x-small: 1.125rem;
4505
- --bal-line-height-desktop-small: 1.25rem;
4506
- --bal-line-height-desktop-normal: 1.5rem;
4507
- --bal-line-height-desktop-medium: 1.625rem;
4508
- --bal-line-height-desktop-large: 2rem;
4509
- --bal-line-height-desktop-x-large: 2rem;
4510
- --bal-line-height-desktop-xx-large: 2.5rem;
4511
- --bal-line-height-desktop-xxx-large: 3rem;
4512
- --bal-line-height-desktop-xxxx-large: 3.5rem;
4513
- --bal-line-height-desktop-xxxxx-large: 6rem;
4514
- }
4515
4515
  /*# sourceMappingURL=core.css.map */