@danske/sapphire-css 31.2.2 → 32.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/backdrop/backdrop.module.css +4 -4
- package/components/backdrop/backdrop.module.css.d.ts +2 -2
- package/components/dialog/dialog.module.css +0 -73
- package/components/dialog/dialog.module.css.d.ts +0 -7
- package/components/feedbackMessage/feedbackMessage.module.css +1 -0
- package/components/modalLayout/modalLayout.module.css +90 -0
- package/components/modalLayout/modalLayout.module.css.d.ts +16 -0
- package/components/panel/panel.module.css +1 -87
- package/components/panel/panel.module.css.d.ts +0 -12
- package/package.json +2 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@keyframes fade-in {
|
|
1
|
+
@keyframes backdrop-fade-in {
|
|
2
2
|
from {
|
|
3
3
|
background-color: transparent;
|
|
4
4
|
}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
@keyframes fade-out {
|
|
11
|
+
@keyframes backdrop-fade-out {
|
|
12
12
|
from {
|
|
13
13
|
background-color: var(--sapphire-backdrop-color-background);
|
|
14
14
|
}
|
|
@@ -25,12 +25,12 @@
|
|
|
25
25
|
justify-content: center;
|
|
26
26
|
align-items: center;
|
|
27
27
|
|
|
28
|
-
animation-name: fade-in;
|
|
28
|
+
animation-name: backdrop-fade-in;
|
|
29
29
|
animation-duration: var(--sapphire-backdrop-time-transition);
|
|
30
30
|
animation-timing-function: ease-in-out;
|
|
31
31
|
animation-fill-mode: forwards;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.sapphire-backdrop--exiting {
|
|
35
|
-
animation-name: fade-out;
|
|
35
|
+
animation-name: backdrop-fade-out;
|
|
36
36
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
declare const styles: {
|
|
2
2
|
readonly "sapphire-backdrop": string;
|
|
3
|
-
readonly "fade-in": string;
|
|
3
|
+
readonly "backdrop-fade-in": string;
|
|
4
4
|
readonly "sapphire-backdrop--exiting": string;
|
|
5
|
-
readonly "fade-out": string;
|
|
5
|
+
readonly "backdrop-fade-out": string;
|
|
6
6
|
};
|
|
7
7
|
export = styles;
|
|
8
8
|
|
|
@@ -58,76 +58,3 @@
|
|
|
58
58
|
.sapphire-dialog--large {
|
|
59
59
|
width: var(--sapphire-dialog-size-width-l);
|
|
60
60
|
}
|
|
61
|
-
|
|
62
|
-
.sapphire-dialog-header {
|
|
63
|
-
padding: var(--sapphire-dialog-size-spacing-header-top-default)
|
|
64
|
-
var(--sapphire-dialog-size-spacing-header-right-default)
|
|
65
|
-
var(--sapphire-dialog-size-spacing-header-bottom-default)
|
|
66
|
-
var(--sapphire-dialog-size-spacing-header-left-default);
|
|
67
|
-
display: flex;
|
|
68
|
-
justify-content: space-between;
|
|
69
|
-
align-items: center;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.sapphire-dialog--passive .sapphire-dialog-header {
|
|
73
|
-
padding: var(--sapphire-dialog-size-spacing-header-top-passive)
|
|
74
|
-
var(--sapphire-dialog-size-spacing-header-right-passive)
|
|
75
|
-
var(--sapphire-dialog-size-spacing-header-bottom-passive)
|
|
76
|
-
var(--sapphire-dialog-size-spacing-header-left-passive);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.sapphire-dialog-close-button-container {
|
|
80
|
-
align-self: flex-start;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.sapphire-dialog-body {
|
|
84
|
-
padding: var(--sapphire-dialog-size-spacing-body-top-default)
|
|
85
|
-
var(--sapphire-dialog-size-spacing-body-right-default)
|
|
86
|
-
var(--sapphire-dialog-size-spacing-body-bottom-default)
|
|
87
|
-
var(--sapphire-dialog-size-spacing-body-left-default);
|
|
88
|
-
overflow-y: auto;
|
|
89
|
-
overflow-x: hidden;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.sapphire-dialog--passive .sapphire-dialog-body {
|
|
93
|
-
padding: var(--sapphire-dialog-size-spacing-body-top-passive)
|
|
94
|
-
var(--sapphire-dialog-size-spacing-body-right-passive)
|
|
95
|
-
var(--sapphire-dialog-size-spacing-body-bottom-passive)
|
|
96
|
-
var(--sapphire-dialog-size-spacing-body-left-passive);
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.sapphire-dialog-footer {
|
|
100
|
-
padding: var(--sapphire-dialog-size-spacing-footer-top-default)
|
|
101
|
-
var(--sapphire-dialog-size-spacing-footer-right-default)
|
|
102
|
-
var(--sapphire-dialog-size-spacing-footer-bottom-default)
|
|
103
|
-
var(--sapphire-dialog-size-spacing-footer-left-default);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.sapphire-dialog-header + .sapphire-dialog-body {
|
|
107
|
-
/** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
|
|
108
|
-
border-top: var(--sapphire-dialog-size-border) solid transparent;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.sapphire-dialog-header + .sapphire-dialog-body.sapphire-dialog-body--scrolled {
|
|
112
|
-
border-top: var(--sapphire-dialog-size-border) solid
|
|
113
|
-
var(--sapphire-dialog-color-separator);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
.sapphire-dialog-body + .sapphire-dialog-footer {
|
|
117
|
-
/** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
|
|
118
|
-
border-top: var(--sapphire-dialog-size-border) solid transparent;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.sapphire-dialog-body.sapphire-dialog-body--scrollable
|
|
122
|
-
+ .sapphire-dialog-footer {
|
|
123
|
-
border-top: var(--sapphire-dialog-size-border) solid
|
|
124
|
-
var(--sapphire-dialog-color-separator);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.sapphire-dialog:has(.sapphire-dialog-body--scrollable)
|
|
128
|
-
> .sapphire-dialog-footer {
|
|
129
|
-
padding: var(--sapphire-dialog-size-spacing-footer-top-scrollable)
|
|
130
|
-
var(--sapphire-dialog-size-spacing-footer-right-scrollable)
|
|
131
|
-
var(--sapphire-dialog-size-spacing-footer-bottom-scrollable)
|
|
132
|
-
var(--sapphire-dialog-size-spacing-footer-left-scrollable);
|
|
133
|
-
}
|
|
@@ -7,13 +7,6 @@ declare const styles: {
|
|
|
7
7
|
readonly "sapphire-dialog--small": string;
|
|
8
8
|
readonly "sapphire-dialog--medium": string;
|
|
9
9
|
readonly "sapphire-dialog--large": string;
|
|
10
|
-
readonly "sapphire-dialog-header": string;
|
|
11
|
-
readonly "sapphire-dialog--passive": string;
|
|
12
|
-
readonly "sapphire-dialog-close-button-container": string;
|
|
13
|
-
readonly "sapphire-dialog-body": string;
|
|
14
|
-
readonly "sapphire-dialog-footer": string;
|
|
15
|
-
readonly "sapphire-dialog-body--scrolled": string;
|
|
16
|
-
readonly "sapphire-dialog-body--scrollable": string;
|
|
17
10
|
};
|
|
18
11
|
export = styles;
|
|
19
12
|
|
|
@@ -50,5 +50,6 @@
|
|
|
50
50
|
.sapphire-feedback-message__body {
|
|
51
51
|
color: var(--sapphire-feedback-message-color-content-body);
|
|
52
52
|
font-family: var(--sapphire-feedback-message-font-name);
|
|
53
|
+
font-size: var(--sapphire-global-size-font-88);
|
|
53
54
|
line-height: var(--sapphire-feedback-message-size-line-height);
|
|
54
55
|
}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
.sapphire-modal-layout {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
height: 100%;
|
|
5
|
+
min-height: 0;
|
|
6
|
+
background-color: var(
|
|
7
|
+
--sapphire-semantic-color-background-surface-primary-default
|
|
8
|
+
);
|
|
9
|
+
font-family: var(--sapphire-semantic-font-name-default);
|
|
10
|
+
color: var(--sapphire-semantic-color-content-default-primary);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.sapphire-modal-layout__header-container {
|
|
14
|
+
flex-shrink: 0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.sapphire-modal-layout__header {
|
|
18
|
+
display: flex;
|
|
19
|
+
justify-content: space-between;
|
|
20
|
+
padding: var(--sapphire-semantic-size-spacing-50)
|
|
21
|
+
var(--sapphire-semantic-size-spacing-container-horizontal-m);
|
|
22
|
+
gap: var(--sapphire-semantic-size-spacing-40);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.sapphire-modal-layout__body {
|
|
26
|
+
overflow-y: auto;
|
|
27
|
+
overflow-x: hidden;
|
|
28
|
+
flex-grow: 1;
|
|
29
|
+
padding: 0 var(--sapphire-semantic-size-spacing-container-horizontal-m);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.sapphire-modal-layout__body.sapphire-modal-layout__body--no-padding {
|
|
33
|
+
padding: 0;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.sapphire-modal-layout__footer-container {
|
|
37
|
+
flex-shrink: 0;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.sapphire-modal-layout__footer {
|
|
41
|
+
padding: var(--sapphire-semantic-size-spacing-70)
|
|
42
|
+
var(--sapphire-semantic-size-spacing-container-horizontal-m)
|
|
43
|
+
var(--sapphire-semantic-size-spacing-70)
|
|
44
|
+
var(--sapphire-semantic-size-spacing-container-horizontal-m);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/** Container for heading and subheading **/
|
|
48
|
+
.sapphire-modal-layout__heading-container {
|
|
49
|
+
flex: 1;
|
|
50
|
+
padding: var(--sapphire-semantic-size-spacing-20) 0;
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-direction: column;
|
|
53
|
+
justify-content: center;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.sapphire-modal-layout__subheading {
|
|
57
|
+
color: var(--sapphire-semantic-color-content-default-secondary);
|
|
58
|
+
margin-top: var(--sapphire-semantic-size-spacing-10);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.sapphire-modal-layout__close-button-container {
|
|
62
|
+
margin-left: var(--sapphire-semantic-size-spacing-50);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.sapphire-modal-layout__header-container + .sapphire-modal-layout__body {
|
|
66
|
+
/** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
|
|
67
|
+
border-top: var(--sapphire-semantic-size-border-s) solid transparent;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.sapphire-modal-layout__header-container
|
|
71
|
+
+ .sapphire-modal-layout__body.sapphire-modal-layout__body--scrolled {
|
|
72
|
+
border-top: var(--sapphire-semantic-size-border-s) solid
|
|
73
|
+
var(--sapphire-semantic-color-border-separator-default);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.sapphire-modal-layout:not(:has(.sapphire-modal-layout__footer))
|
|
77
|
+
.sapphire-modal-layout__body {
|
|
78
|
+
padding-bottom: var(--sapphire-semantic-size-spacing-50);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.sapphire-modal-layout__body + .sapphire-modal-layout__footer-container {
|
|
82
|
+
/** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
|
|
83
|
+
border-top: var(--sapphire-semantic-size-border-s) solid transparent;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.sapphire-modal-layout__body.sapphire-modal-layout__body--scrollable
|
|
87
|
+
+ .sapphire-modal-layout__footer-container {
|
|
88
|
+
border-top: var(--sapphire-semantic-size-border-s) solid
|
|
89
|
+
var(--sapphire-semantic-color-border-separator-default);
|
|
90
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
declare const styles: {
|
|
2
|
+
readonly "sapphire-modal-layout": string;
|
|
3
|
+
readonly "sapphire-modal-layout__header-container": string;
|
|
4
|
+
readonly "sapphire-modal-layout__header": string;
|
|
5
|
+
readonly "sapphire-modal-layout__body": string;
|
|
6
|
+
readonly "sapphire-modal-layout__body--no-padding": string;
|
|
7
|
+
readonly "sapphire-modal-layout__footer-container": string;
|
|
8
|
+
readonly "sapphire-modal-layout__footer": string;
|
|
9
|
+
readonly "sapphire-modal-layout__heading-container": string;
|
|
10
|
+
readonly "sapphire-modal-layout__subheading": string;
|
|
11
|
+
readonly "sapphire-modal-layout__close-button-container": string;
|
|
12
|
+
readonly "sapphire-modal-layout__body--scrolled": string;
|
|
13
|
+
readonly "sapphire-modal-layout__body--scrollable": string;
|
|
14
|
+
};
|
|
15
|
+
export = styles;
|
|
16
|
+
|
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
.sapphire-panel {
|
|
2
|
-
background-color: var(--sapphire-panel-color-background);
|
|
3
|
-
font-family: var(--sapphire-panel-font-name);
|
|
4
|
-
color: var(--sapphire-panel-color-content);
|
|
5
2
|
box-sizing: border-box;
|
|
6
3
|
overflow: hidden;
|
|
7
4
|
max-width: 100%;
|
|
8
|
-
display:
|
|
9
|
-
flex-direction: column;
|
|
5
|
+
display: block;
|
|
10
6
|
height: 100%;
|
|
11
7
|
outline: 0;
|
|
12
8
|
transition: transform var(--sapphire-panel-time-transition) ease-in-out;
|
|
@@ -14,18 +10,6 @@
|
|
|
14
10
|
width: var(--sapphire-panel-size-width-l);
|
|
15
11
|
}
|
|
16
12
|
|
|
17
|
-
/* Temporary alternative to `.sapphire-panel` if one wants to render the panel inline
|
|
18
|
-
* TODO: split panel into 2 independent blocks: panel layout and the panel content.
|
|
19
|
-
* UC-2757
|
|
20
|
-
*/
|
|
21
|
-
.sapphire-panel-inline {
|
|
22
|
-
display: flex;
|
|
23
|
-
flex-direction: column;
|
|
24
|
-
background-color: var(--sapphire-panel-color-background);
|
|
25
|
-
font-family: var(--sapphire-panel-font-name);
|
|
26
|
-
color: var(--sapphire-panel-color-content);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
13
|
.sapphire-panel--visible {
|
|
30
14
|
transform: translateX(0%);
|
|
31
15
|
}
|
|
@@ -33,73 +17,3 @@
|
|
|
33
17
|
.sapphire-panel--small {
|
|
34
18
|
width: var(--sapphire-panel-size-width-s);
|
|
35
19
|
}
|
|
36
|
-
|
|
37
|
-
.sapphire-panel-header {
|
|
38
|
-
flex-shrink: 0;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.sapphire-panel-body {
|
|
42
|
-
overflow-y: auto;
|
|
43
|
-
overflow-x: hidden;
|
|
44
|
-
flex-grow: 1;
|
|
45
|
-
padding: 0 var(--sapphire-panel-size-spacing-side);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.sapphire-panel-body.sapphire-panel-body--no-padding {
|
|
49
|
-
padding: 0;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.sapphire-panel-footer {
|
|
53
|
-
flex-shrink: 0;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
/** Container for heading and subheading **/
|
|
57
|
-
.sapphire-panel-panel-heading-container {
|
|
58
|
-
flex: 1;
|
|
59
|
-
padding: var(--sapphire-panel-size-spacing-heading-vertical) 0;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.sapphire-panel-panel-header {
|
|
63
|
-
flex-shrink: 0;
|
|
64
|
-
display: flex;
|
|
65
|
-
justify-content: space-between;
|
|
66
|
-
padding: var(--sapphire-panel-size-spacing-header-vertical)
|
|
67
|
-
var(--sapphire-panel-size-spacing-side);
|
|
68
|
-
gap: var(--sapphire-panel-size-spacing-header-gap);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.sapphire-panel-panel-header-subheading {
|
|
72
|
-
color: var(--sapphire-panel-color-subheading);
|
|
73
|
-
margin-top: var(--sapphire-panel-size-spacing-heading-gap);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.sapphire-panel-panel-footer {
|
|
77
|
-
padding: var(--sapphire-panel-size-spacing-footer-top)
|
|
78
|
-
var(--sapphire-panel-size-spacing-side)
|
|
79
|
-
var(--sapphire-panel-size-spacing-footer-bottom)
|
|
80
|
-
var(--sapphire-panel-size-spacing-side);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.sapphire-panel-panel-header-close-button-container {
|
|
84
|
-
margin-left: var(--sapphire-panel-size-spacing-close-icon-left);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.sapphire-panel-header + .sapphire-panel-body {
|
|
88
|
-
/** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
|
|
89
|
-
border-top: var(--sapphire-panel-size-border) solid transparent;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.sapphire-panel-header + .sapphire-panel-body.sapphire-panel-body--scrolled {
|
|
93
|
-
border-top: var(--sapphire-panel-size-border) solid
|
|
94
|
-
var(--sapphire-panel-color-separator);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.sapphire-panel-body + .sapphire-panel-footer {
|
|
98
|
-
/** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
|
|
99
|
-
border-top: var(--sapphire-panel-size-border) solid transparent;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.sapphire-panel-body.sapphire-panel-body--scrollable + .sapphire-panel-footer {
|
|
103
|
-
border-top: var(--sapphire-panel-size-border) solid
|
|
104
|
-
var(--sapphire-panel-color-separator);
|
|
105
|
-
}
|
|
@@ -1,19 +1,7 @@
|
|
|
1
1
|
declare const styles: {
|
|
2
2
|
readonly "sapphire-panel": string;
|
|
3
|
-
readonly "sapphire-panel-inline": string;
|
|
4
3
|
readonly "sapphire-panel--visible": string;
|
|
5
4
|
readonly "sapphire-panel--small": string;
|
|
6
|
-
readonly "sapphire-panel-header": string;
|
|
7
|
-
readonly "sapphire-panel-body": string;
|
|
8
|
-
readonly "sapphire-panel-body--no-padding": string;
|
|
9
|
-
readonly "sapphire-panel-footer": string;
|
|
10
|
-
readonly "sapphire-panel-panel-heading-container": string;
|
|
11
|
-
readonly "sapphire-panel-panel-header": string;
|
|
12
|
-
readonly "sapphire-panel-panel-header-subheading": string;
|
|
13
|
-
readonly "sapphire-panel-panel-footer": string;
|
|
14
|
-
readonly "sapphire-panel-panel-header-close-button-container": string;
|
|
15
|
-
readonly "sapphire-panel-body--scrolled": string;
|
|
16
|
-
readonly "sapphire-panel-body--scrollable": string;
|
|
17
5
|
};
|
|
18
6
|
export = styles;
|
|
19
7
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@danske/sapphire-css",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "32.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,
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"dependencies": {
|
|
69
69
|
"@danske/sapphire-design-tokens": "^39.2.0"
|
|
70
70
|
},
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "f697803e6f03705b063ff5d4c89debde608208db"
|
|
72
72
|
}
|