@danske/sapphire-css 35.4.0 → 36.0.0

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 (14) hide show
  1. package/components/checkbox/checkbox.module.css +13 -0
  2. package/components/checkbox/checkbox.module.css.d.ts +2 -0
  3. package/components/dateField/dateField.module.css +0 -1
  4. package/components/field/field.module.css +14 -2
  5. package/components/field/field.module.css.d.ts +1 -0
  6. package/components/labeledValue/labeledValue.module.css +0 -1
  7. package/components/listbox/listbox.module.css +2 -1
  8. package/components/popover/popover.module.css +1 -1
  9. package/components/select/select.module.css +1 -2
  10. package/components/tabs/tabs.module.css +12 -0
  11. package/components/tabs/tabs.module.css.d.ts +3 -0
  12. package/components/textField/textField.module.css +0 -1
  13. package/components/toast/toast.module.css +10 -1
  14. package/package.json +3 -3
package/components/checkbox/checkbox.module.css CHANGED
@@ -42,12 +42,25 @@
42
42
  font-size: var(--sapphire-semantic-size-font-control-default);
43
43
  color: var(--sapphire-semantic-color-content-default-primary);
44
44
  line-height: var(--sapphire-semantic-size-height-control-xs);
45
+ display: inline-flex;
46
+ align-items: center;
47
+ gap: var(--sapphire-semantic-size-spacing-10);
45
48
  }
46
49
 
47
50
  .sapphire-checkbox__label:empty {
48
51
  margin-left: 0;
49
52
  }
50
53
 
54
+ .sapphire-checkbox__required-indicator {
55
+ background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.99999 0.583344C4.41421 0.583344 4.74999 0.91913 4.74999 1.33334V3.22127L6.6017 2.62001C6.99567 2.49208 7.41874 2.70775 7.54666 3.10172C7.67459 3.49568 7.45892 3.91876 7.06495 4.04668L5.21363 4.64782L6.3601 6.22585C6.60356 6.56096 6.52927 7.02998 6.19416 7.27345C5.85905 7.51691 5.39002 7.44262 5.14656 7.10751L3.99999 5.52935L2.85343 7.10751C2.60996 7.44262 2.14094 7.51691 1.80583 7.27345C1.47072 7.02998 1.39642 6.56096 1.63989 6.22585L2.78636 4.64782L0.935036 4.04668C0.541071 3.91876 0.325401 3.49568 0.453323 3.10172C0.581246 2.70775 1.00432 2.49208 1.39829 2.62001L3.24999 3.22127V1.33334C3.24999 0.91913 3.58578 0.583344 3.99999 0.583344Z' fill='%23DD3254'/%3E%3C/svg%3E%0A");
56
+ width: 8px; /* Hard coded, since it's linked to the svg above */
57
+ height: 8px; /* Hard coded, since it's linked to the svg above */
58
+ }
59
+
60
+ .sapphire-checkbox__optional-indicator {
61
+ color: var(--sapphire-semantic-color-content-default-secondary);
62
+ }
63
+
51
64
  .sapphire-checkbox--md .sapphire-checkbox__label {
52
65
  font-size: var(--sapphire-semantic-size-font-control-md);
53
66
  line-height: var(--sapphire-semantic-size-height-control-2xs);
package/components/checkbox/checkbox.module.css.d.ts CHANGED
@@ -2,6 +2,8 @@ declare const styles: {
2
2
  readonly "sapphire-checkbox": string;
3
3
  readonly "sapphire-checkbox__input": string;
4
4
  readonly "sapphire-checkbox__label": string;
5
+ readonly "sapphire-checkbox__required-indicator": string;
6
+ readonly "sapphire-checkbox__optional-indicator": string;
5
7
  readonly "sapphire-checkbox--md": string;
6
8
  readonly "sapphire-checkbox__error-text": string;
7
9
  readonly "sapphire-checkbox__error-text--md": string;
package/components/dateField/dateField.module.css CHANGED
@@ -7,7 +7,6 @@
7
7
  line-height: var(--sapphire-semantic-size-line-height-md);
8
8
  gap: var(--sapphire-semantic-size-spacing-30);
9
9
  box-sizing: border-box;
10
- width: var(--sapphire-semantic-size-width-control-default);
11
10
 
12
11
  --sapphire-dateField-icon-size: var(--sapphire-semantic-size-icon-lg);
13
12
 
package/components/field/field.module.css CHANGED
@@ -5,6 +5,8 @@
5
5
  column-gap: var(--sapphire-semantic-size-spacing-40);
6
6
  font-family: var(--sapphire-semantic-font-name-default);
7
7
  grid-auto-rows: min-content;
8
+ /* default width */
9
+ width: var(--sapphire-semantic-size-width-control-default);
8
10
 
9
11
  /* The below is meant to address a font rendering quirk in OSX where the text
10
12
  * looks bolder than intended due to subpixel rendering. This quirk generally
@@ -23,6 +25,10 @@
23
25
  box-sizing: border-box;
24
26
  }
25
27
 
28
+ .sapphire-field--no-width {
29
+ width: auto;
30
+ }
31
+
26
32
  /**
27
33
  * We need to reset browser styles in case the DOM element is a <fieldset>
28
34
  */
@@ -49,7 +55,8 @@ legend.sapphire-field__label {
49
55
 
50
56
  .sapphire-field__control {
51
57
  order: 2;
52
- min-width: 100%;
58
+ width: 100%;
59
+ min-width: 0;
53
60
  }
54
61
 
55
62
  /**
@@ -124,8 +131,13 @@ legend.sapphire-field__label {
124
131
  */
125
132
  .sapphire-field--label-placement-side {
126
133
  grid-template-columns: max-content auto;
134
+ width: auto;
135
+ }
136
+ .sapphire-field--label-placement-side:not(.sapphire-field--no-width)
137
+ .sapphire-field__control {
138
+ /* default width */
139
+ width: var(--sapphire-semantic-size-width-control-default);
127
140
  }
128
- .sapphire-field--label-placement-side .sapphire-field__control,
129
141
  .sapphire-field--label-placement-side .sapphire-field__message {
130
142
  grid-column: 2;
131
143
  }
package/components/field/field.module.css.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  declare const styles: {
2
2
  readonly "sapphire-field": string;
3
+ readonly "sapphire-field--no-width": string;
3
4
  readonly "sapphire-field__label": string;
4
5
  readonly "sapphire-field__control": string;
5
6
  readonly "sapphire-field__control--group": string;
package/components/labeledValue/labeledValue.module.css CHANGED
@@ -1,5 +1,4 @@
1
1
  .sapphire-labeled-value {
2
- width: var(--sapphire-semantic-size-width-control-default);
3
2
  line-height: var(--sapphire-semantic-size-line-height-md);
4
3
  font-size: var(--sapphire-semantic-size-font-control-default);
5
4
  }
package/components/listbox/listbox.module.css CHANGED
@@ -4,6 +4,8 @@
4
4
  position: relative;
5
5
  list-style: none;
6
6
  outline: none;
7
+ font-family: var(--sapphire-semantic-font-name-default);
8
+
7
9
  /**
8
10
  * tldr; Please inspect the listbox without these adding props, it's easier
9
11
  * to understand why these are here.
@@ -138,7 +140,6 @@
138
140
 
139
141
  /* Text content */
140
142
  .sapphire-listbox__text-container {
141
- font-family: var(--sapphire-semantic-font-name-default);
142
143
  line-height: var(--sapphire-semantic-size-line-height-md);
143
144
  }
144
145
 
package/components/popover/popover.module.css CHANGED
@@ -31,7 +31,7 @@
31
31
  }
32
32
 
33
33
  .sapphire-popover--padded {
34
- padding: var(--sapphire-semantic-size-spacing-30);
34
+ padding: var(--sapphire-semantic-size-spacing-container-horizontal-sm);
35
35
  }
36
36
 
37
37
  .sapphire-popover--max-width {
package/components/select/select.module.css CHANGED
@@ -1,8 +1,7 @@
1
1
  .sapphire-select {
2
2
  position: relative;
3
- display: inline-block;
3
+ display: block;
4
4
  color: var(--sapphire-semantic-color-content-default-primary);
5
- width: var(--sapphire-semantic-size-width-control-default);
6
5
  font-family: var(--sapphire-semantic-font-name-default);
7
6
  /* The below is meant to address a font rendering quirk in OSX where the text
8
7
  * looks bolder than intended due to subpixel rendering. This quirk generally
package/components/tabs/tabs.module.css CHANGED
@@ -70,6 +70,18 @@
70
70
  padding: 0 var(--sapphire-semantic-size-focus-ring);
71
71
  }
72
72
 
73
+ .sapphire-tabs--align-left {
74
+ justify-content: start;
75
+ }
76
+
77
+ .sapphire-tabs--align-center {
78
+ justify-content: center;
79
+ }
80
+
81
+ .sapphire-tabs--align-right {
82
+ justify-content: end;
83
+ }
84
+
73
85
  .sapphire-tabs::after {
74
86
  content: '';
75
87
  display: block;
package/components/tabs/tabs.module.css.d.ts CHANGED
@@ -6,6 +6,9 @@ declare const styles: {
6
6
  readonly "sapphire-tabs-overflow-arrows__arrow--left": string;
7
7
  readonly "sapphire-tabs-overflow-arrows__arrow--right": string;
8
8
  readonly "sapphire-tabs": string;
9
+ readonly "sapphire-tabs--align-left": string;
10
+ readonly "sapphire-tabs--align-center": string;
11
+ readonly "sapphire-tabs--align-right": string;
9
12
  readonly "sapphire-tabs--no-border": string;
10
13
  readonly "sapphire-tabs__tab": string;
11
14
  readonly "is-disabled": string;
package/components/textField/textField.module.css CHANGED
@@ -1,5 +1,4 @@
1
1
  .sapphire-text-field {
2
- width: var(--sapphire-semantic-size-width-control-default);
3
2
  outline: solid var(--sapphire-semantic-size-border-sm)
4
3
  var(--sapphire-semantic-color-border-field-default);
5
4
  outline-offset: calc(0px - var(--sapphire-semantic-size-border-sm));
package/components/toast/toast.module.css CHANGED
@@ -29,7 +29,6 @@
29
29
  .sapphire-toast-container {
30
30
  pointer-events: none;
31
31
  position: fixed;
32
- margin: var(--sapphire-semantic-size-spacing-40);
33
32
  }
34
33
 
35
34
  /* Placement */
@@ -37,18 +36,23 @@
37
36
  --sapphire-toast-horizontal-transform: -50%;
38
37
  bottom: 0;
39
38
  left: 50%;
39
+ margin-bottom: var(--sapphire-semantic-size-spacing-40);
40
40
  }
41
41
 
42
42
  .sapphire-toast-container--bottom-left {
43
43
  --sapphire-toast-horizontal-transform: 0%;
44
44
  bottom: 0;
45
45
  left: 0;
46
+ margin-bottom: var(--sapphire-semantic-size-spacing-40);
47
+ margin-left: var(--sapphire-semantic-size-spacing-40);
46
48
  }
47
49
 
48
50
  .sapphire-toast-container--bottom-right {
49
51
  --sapphire-toast-horizontal-transform: 0%;
50
52
  bottom: 0;
51
53
  right: 0;
54
+ margin-bottom: var(--sapphire-semantic-size-spacing-40);
55
+ margin-right: var(--sapphire-semantic-size-spacing-40);
52
56
  }
53
57
 
54
58
  .sapphire-toast-container--top {
@@ -56,6 +60,7 @@
56
60
  --sapphire-toast-horizontal-transform: -50%;
57
61
  top: 0;
58
62
  left: 50%;
63
+ margin-top: var(--sapphire-semantic-size-spacing-40);
59
64
  }
60
65
 
61
66
  .sapphire-toast-container--top-left {
@@ -63,6 +68,8 @@
63
68
  --sapphire-toast-horizontal-transform: 0%;
64
69
  top: 0;
65
70
  left: 0;
71
+ margin-top: var(--sapphire-semantic-size-spacing-40);
72
+ margin-left: var(--sapphire-semantic-size-spacing-40);
66
73
  }
67
74
 
68
75
  .sapphire-toast-container--top-right {
@@ -70,6 +77,8 @@
70
77
  --sapphire-toast-horizontal-transform: 0%;
71
78
  top: 0;
72
79
  right: 0;
80
+ margin-top: var(--sapphire-semantic-size-spacing-40);
81
+ margin-right: var(--sapphire-semantic-size-spacing-40);
73
82
  }
74
83
 
75
84
  /************************************************************/
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@danske/sapphire-css",
3
- "version": "35.4.0",
3
+ "version": "36.0.0",
4
4
  "description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "sideEffects": false,
@@ -66,7 +66,7 @@
66
66
  "typescript": "~4.6.4"
67
67
  },
68
68
  "dependencies": {
69
- "@danske/sapphire-design-tokens": "^41.3.0"
69
+ "@danske/sapphire-design-tokens": "^41.4.0"
70
70
  },
71
- "gitHead": "5289085e86eb94dc62d1e843364fbbd8f0c1903f"
71
+ "gitHead": "e179f6a7aeae452c8969507b46c735398037faa2"
72
72
  }