@danske/sapphire-css 35.5.0 → 37.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.
- package/components/checkbox/checkbox.module.css +13 -0
- package/components/checkbox/checkbox.module.css.d.ts +2 -0
- package/components/dateField/dateField.module.css +0 -1
- package/components/field/field.module.css +14 -2
- package/components/field/field.module.css.d.ts +1 -0
- package/components/flag/flag.module.css +38 -0
- package/components/flag/flag.module.css.d.ts +11 -0
- package/components/labeledValue/labeledValue.module.css +0 -1
- package/components/select/select.module.css +2 -2
- package/components/textField/textField.module.css +0 -1
- package/components/toast/toast.module.css +10 -1
- package/package.json +5 -4
|
@@ -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);
|
|
@@ -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;
|
|
@@ -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
|
|
|
@@ -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
|
-
|
|
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
|
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
.sapphire-flag {
|
|
2
|
+
flex-shrink: 0;
|
|
3
|
+
border: var(--sapphire-semantic-size-border-sm) solid
|
|
4
|
+
var(--sapphire-semantic-color-border-separator-default);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.sapphire-flag.sapphire-flag--xs {
|
|
8
|
+
height: var(--sapphire-semantic-size-icon-md);
|
|
9
|
+
width: var(--sapphire-semantic-size-icon-md);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.sapphire-flag.sapphire-flag--sm {
|
|
13
|
+
height: var(--sapphire-semantic-size-icon-lg);
|
|
14
|
+
width: var(--sapphire-semantic-size-icon-lg);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.sapphire-flag.sapphire-flag--md {
|
|
18
|
+
height: var(--sapphire-semantic-size-icon-xl);
|
|
19
|
+
width: var(--sapphire-semantic-size-icon-xl);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.sapphire-flag.sapphire-flag--lg {
|
|
23
|
+
height: var(--sapphire-global-size-generic-100);
|
|
24
|
+
width: var(--sapphire-global-size-generic-100);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.sapphire-flag.sapphire-flag--xl {
|
|
28
|
+
height: var(--sapphire-global-size-generic-120);
|
|
29
|
+
width: var(--sapphire-global-size-generic-120);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.sapphire-flag.sapphire-flag--rounded {
|
|
33
|
+
/**
|
|
34
|
+
* This is a hack to fix the antialiasing issue when some flag are rendered rounded.
|
|
35
|
+
*/
|
|
36
|
+
transform: rotate(0.01deg);
|
|
37
|
+
border-radius: var(--sapphire-semantic-size-radius-xl);
|
|
38
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
declare const styles: {
|
|
2
|
+
readonly "sapphire-flag": string;
|
|
3
|
+
readonly "sapphire-flag--xs": string;
|
|
4
|
+
readonly "sapphire-flag--sm": string;
|
|
5
|
+
readonly "sapphire-flag--md": string;
|
|
6
|
+
readonly "sapphire-flag--lg": string;
|
|
7
|
+
readonly "sapphire-flag--xl": string;
|
|
8
|
+
readonly "sapphire-flag--rounded": string;
|
|
9
|
+
};
|
|
10
|
+
export = styles;
|
|
11
|
+
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
.sapphire-select {
|
|
2
2
|
position: relative;
|
|
3
|
-
display:
|
|
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
|
|
@@ -65,6 +64,7 @@
|
|
|
65
64
|
text-overflow: ellipsis;
|
|
66
65
|
white-space: nowrap;
|
|
67
66
|
color: var(--sapphire-semantic-color-content-default-secondary);
|
|
67
|
+
pointer-events: none;
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
.sapphire-select__icon-container {
|
|
@@ -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": "
|
|
3
|
+
"version": "37.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,
|
|
@@ -45,8 +45,9 @@
|
|
|
45
45
|
"@babel/preset-env": "^7.20.2",
|
|
46
46
|
"@babel/preset-react": "^7.18.6",
|
|
47
47
|
"@babel/preset-typescript": "^7.18.6",
|
|
48
|
-
"@danske/sapphire-icons": "^2.
|
|
48
|
+
"@danske/sapphire-icons": "^2.2.0",
|
|
49
49
|
"@danske/sapphire-react": "^4.3.0",
|
|
50
|
+
"@mdx-js/react": "^1.6.22",
|
|
50
51
|
"@storybook/addon-essentials": "^6.5.13",
|
|
51
52
|
"@storybook/addon-links": "^6.5.13",
|
|
52
53
|
"@storybook/addons": "^6.5.13",
|
|
@@ -56,7 +57,7 @@
|
|
|
56
57
|
"cross-env": "^7.0.3",
|
|
57
58
|
"css-loader": "^5.2.4",
|
|
58
59
|
"identity-obj-proxy": "^3.0.0",
|
|
59
|
-
"react": "
|
|
60
|
+
"react": "^18.3.1",
|
|
60
61
|
"storybook-addon-themes": "^6.1.0",
|
|
61
62
|
"storybook-css-modules": "^1.0.8",
|
|
62
63
|
"style-loader": "^2.0.0",
|
|
@@ -68,5 +69,5 @@
|
|
|
68
69
|
"dependencies": {
|
|
69
70
|
"@danske/sapphire-design-tokens": "^41.4.0"
|
|
70
71
|
},
|
|
71
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "d2568c6a3ae281f2664333a4e6a30cd173aeff3e"
|
|
72
73
|
}
|