@axinom/mosaic-id-link 0.18.0-rc.2 → 0.18.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/dist/index.es.js +47 -47
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +47 -47
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/src/components/CompletePasswordReset/CompletePasswordReset.module.scss +9 -8
- package/src/components/CompleteUserSignUp/ConfirmSignUp.module.scss +6 -5
- package/src/components/EnsureAuthentication/EnsureAuthentication.module.scss +3 -2
- package/src/components/ForgotPassword/ForgotPassword.module.scss +15 -14
- package/src/components/Login/Login.module.scss +38 -36
- package/src/components/Message/Message.scss +11 -9
- package/src/components/PermissionDeniedError/PermissionDeniedError.module.scss +4 -3
- package/src/components/TextButton/TextButton.scss +18 -16
- package/src/styles/variables.scss +88 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@axinom/mosaic-id-link",
|
|
3
|
-
"version": "0.18.0
|
|
3
|
+
"version": "0.18.0",
|
|
4
4
|
"description": "Integration utilities from id-service for application frontends",
|
|
5
5
|
"author": "Axinom",
|
|
6
6
|
"license": "PROPRIETARY",
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
"util:load-vars": "env-cmd --silent -f ../../../.env env-cmd --silent -f ../../../.env.dev env-cmd --silent -f .env env-cmd --silent -f .env.dev"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@axinom/mosaic-id-utils": "^0.23.4
|
|
32
|
-
"@axinom/mosaic-ui": "^0.67.0
|
|
31
|
+
"@axinom/mosaic-id-utils": "^0.23.4",
|
|
32
|
+
"@axinom/mosaic-ui": "^0.67.0",
|
|
33
33
|
"clsx": "^1.1.0",
|
|
34
34
|
"formik": "^2.1.4",
|
|
35
35
|
"graphql": "^15.4.0",
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "b48ca504a563d87a93d0b577c20e52175a90179f"
|
|
77
77
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@import '../../styles/variables';
|
|
1
2
|
.container {
|
|
2
3
|
display: grid;
|
|
3
4
|
width: 100%;
|
|
@@ -27,12 +28,12 @@
|
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
p {
|
|
30
|
-
color:
|
|
31
|
+
color: var(--login-text-color, $login-text-color);
|
|
31
32
|
font-size: 14px;
|
|
32
33
|
}
|
|
33
34
|
|
|
34
35
|
.hint {
|
|
35
|
-
color:
|
|
36
|
+
color: var(--login-text-color, $login-text-color);
|
|
36
37
|
font-size: 14px;
|
|
37
38
|
}
|
|
38
39
|
|
|
@@ -51,13 +52,13 @@
|
|
|
51
52
|
|
|
52
53
|
.inputGroup input:hover,
|
|
53
54
|
.input-group input:focus {
|
|
54
|
-
border: 1px solid
|
|
55
|
-
box-shadow: 0 0 2px
|
|
55
|
+
border: 1px solid var(--login-input-hover-border-color, $login-input-hover-border-color);
|
|
56
|
+
box-shadow: 0 0 2px var(--login-input-hover-shadow-color, $login-input-hover-shadow-color);
|
|
56
57
|
}
|
|
57
58
|
|
|
58
59
|
.button {
|
|
59
60
|
padding: 15px;
|
|
60
|
-
background-color:
|
|
61
|
+
background-color: var(--login-button-bg-color, $login-button-bg-color);
|
|
61
62
|
color: white;
|
|
62
63
|
border: none;
|
|
63
64
|
cursor: pointer;
|
|
@@ -73,7 +74,7 @@
|
|
|
73
74
|
}
|
|
74
75
|
|
|
75
76
|
.button:hover {
|
|
76
|
-
background-color:
|
|
77
|
+
background-color: var(--login-button-hover-bg-color, $login-button-hover-bg-color);
|
|
77
78
|
}
|
|
78
79
|
|
|
79
80
|
.button a {
|
|
@@ -87,12 +88,12 @@
|
|
|
87
88
|
|
|
88
89
|
.forgotPassword a {
|
|
89
90
|
font-size: 14px;
|
|
90
|
-
color:
|
|
91
|
+
color: var(--login-link-color, $login-link-color);
|
|
91
92
|
}
|
|
92
93
|
|
|
93
94
|
.errorMessage {
|
|
94
95
|
font-size: 14px;
|
|
95
|
-
color:
|
|
96
|
+
color: var(--login-error-message-color, $login-error-message-color);
|
|
96
97
|
margin: 3px 0 0 0;
|
|
97
98
|
}
|
|
98
99
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@import '../../styles/variables';
|
|
1
2
|
.container {
|
|
2
3
|
display: grid;
|
|
3
4
|
width: 100%;
|
|
@@ -27,20 +28,20 @@
|
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
p {
|
|
30
|
-
color:
|
|
31
|
+
color: var(--login-text-color, $login-text-color);
|
|
31
32
|
font-size: 14px;
|
|
32
33
|
}
|
|
33
34
|
|
|
34
35
|
.hint {
|
|
35
36
|
padding: 5px 15px;
|
|
36
|
-
color:
|
|
37
|
+
color: var(--login-text-color, $login-text-color);
|
|
37
38
|
font-size: 12px;
|
|
38
39
|
text-align: center;
|
|
39
40
|
}
|
|
40
41
|
|
|
41
42
|
.button {
|
|
42
43
|
padding: 15px;
|
|
43
|
-
background-color:
|
|
44
|
+
background-color: var(--login-button-bg-color, $login-button-bg-color);
|
|
44
45
|
color: white;
|
|
45
46
|
border: none;
|
|
46
47
|
cursor: pointer;
|
|
@@ -48,7 +49,7 @@
|
|
|
48
49
|
}
|
|
49
50
|
|
|
50
51
|
.button:hover {
|
|
51
|
-
background-color:
|
|
52
|
+
background-color: var(--login-button-hover-bg-color, $login-button-hover-bg-color);
|
|
52
53
|
}
|
|
53
54
|
|
|
54
55
|
.button a {
|
|
@@ -62,6 +63,6 @@
|
|
|
62
63
|
|
|
63
64
|
.confirmSignUp a {
|
|
64
65
|
font-size: 12px;
|
|
65
|
-
color:
|
|
66
|
+
color: var(--login-link-color, $login-link-color);
|
|
66
67
|
}
|
|
67
68
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@import '../../styles/variables';
|
|
1
2
|
.loading {
|
|
2
3
|
height: 100vh;
|
|
3
4
|
width: 100vw;
|
|
@@ -5,7 +6,7 @@
|
|
|
5
6
|
grid-template-rows: 1fr;
|
|
6
7
|
grid-template-columns: 1fr;
|
|
7
8
|
place-items: center;
|
|
8
|
-
background-color:
|
|
9
|
+
background-color: var(--ensure-auth-bg-color, $ensure-auth-bg-color);
|
|
9
10
|
|
|
10
11
|
.loadingWrapper {
|
|
11
12
|
width: 100%;
|
|
@@ -19,7 +20,7 @@
|
|
|
19
20
|
.loadingMessage {
|
|
20
21
|
text-align: center;
|
|
21
22
|
font-size: 24px;
|
|
22
|
-
color:
|
|
23
|
+
color: var(--ensure-auth-loading-message-color, $ensure-auth-loading-message-color);
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
.overlay {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@import '../../styles/variables';
|
|
1
2
|
.container {
|
|
2
3
|
display: grid;
|
|
3
4
|
width: 100%;
|
|
@@ -24,14 +25,14 @@
|
|
|
24
25
|
.header {
|
|
25
26
|
text-align: center;
|
|
26
27
|
font-size: 28px;
|
|
27
|
-
color:
|
|
28
|
+
color: var(--login-header-color, $login-header-color);
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
.authTitle {
|
|
31
32
|
padding: 10px;
|
|
32
33
|
font-size: 12px;
|
|
33
34
|
text-align: center;
|
|
34
|
-
color:
|
|
35
|
+
color: var(--login-text-color, $login-text-color);
|
|
35
36
|
}
|
|
36
37
|
}
|
|
37
38
|
|
|
@@ -40,12 +41,12 @@
|
|
|
40
41
|
}
|
|
41
42
|
|
|
42
43
|
p {
|
|
43
|
-
color:
|
|
44
|
+
color: var(--login-text-color, $login-text-color);
|
|
44
45
|
font-size: 14px;
|
|
45
46
|
}
|
|
46
47
|
|
|
47
48
|
.hint {
|
|
48
|
-
color:
|
|
49
|
+
color: var(--login-text-color, $login-text-color);
|
|
49
50
|
font-size: 14px;
|
|
50
51
|
}
|
|
51
52
|
|
|
@@ -64,8 +65,8 @@
|
|
|
64
65
|
|
|
65
66
|
.inputGroup input:hover,
|
|
66
67
|
.inputGroup input:focus {
|
|
67
|
-
border: 1px solid
|
|
68
|
-
box-shadow: 0 0 2px
|
|
68
|
+
border: 1px solid var(--login-input-hover-border-color, $login-input-hover-border-color);
|
|
69
|
+
box-shadow: 0 0 2px var(--login-input-hover-shadow-color, $login-input-hover-shadow-color);
|
|
69
70
|
}
|
|
70
71
|
|
|
71
72
|
.inputGroupError {
|
|
@@ -76,26 +77,26 @@
|
|
|
76
77
|
width: 100%;
|
|
77
78
|
padding: 15px 15px;
|
|
78
79
|
box-sizing: border-box;
|
|
79
|
-
border: 1px solid
|
|
80
|
+
border: 1px solid var(--login-input-error-border-color, $login-input-error-border-color);
|
|
80
81
|
transition: border 0.3s, box-shadow 0.3s;
|
|
81
82
|
outline: none;
|
|
82
83
|
}
|
|
83
84
|
|
|
84
85
|
.inputGroupError input:hover,
|
|
85
86
|
.input-group input:focus {
|
|
86
|
-
border: 1px solid
|
|
87
|
-
box-shadow: 0 0 2px
|
|
87
|
+
border: 1px solid var(--login-input-error-border-color, $login-input-error-border-color);
|
|
88
|
+
box-shadow: 0 0 2px var(--login-input-error-shadow-color, $login-input-error-shadow-color);
|
|
88
89
|
}
|
|
89
90
|
|
|
90
91
|
.errorMessage {
|
|
91
92
|
font-size: 12px;
|
|
92
|
-
color:
|
|
93
|
+
color: var(--login-error-message-color, $login-error-message-color);
|
|
93
94
|
margin: 0 0 10px 0;
|
|
94
95
|
}
|
|
95
96
|
|
|
96
97
|
.button {
|
|
97
98
|
padding: 15px;
|
|
98
|
-
background-color:
|
|
99
|
+
background-color: var(--login-button-bg-color, $login-button-bg-color);
|
|
99
100
|
color: white;
|
|
100
101
|
border: none;
|
|
101
102
|
cursor: pointer;
|
|
@@ -103,7 +104,7 @@
|
|
|
103
104
|
}
|
|
104
105
|
|
|
105
106
|
.button:hover {
|
|
106
|
-
background-color:
|
|
107
|
+
background-color: var(--login-button-hover-bg-color, $login-button-hover-bg-color);
|
|
107
108
|
}
|
|
108
109
|
|
|
109
110
|
.button a {
|
|
@@ -118,13 +119,13 @@
|
|
|
118
119
|
|
|
119
120
|
.backToSignIn a {
|
|
120
121
|
font-size: 12px;
|
|
121
|
-
color:
|
|
122
|
+
color: var(--login-link-color, $login-link-color);
|
|
122
123
|
cursor: pointer;
|
|
123
124
|
}
|
|
124
125
|
|
|
125
126
|
.errorMessage {
|
|
126
127
|
font-size: 12px;
|
|
127
|
-
color:
|
|
128
|
+
color: var(--login-error-message-color, $login-error-message-color);
|
|
128
129
|
margin: 0 0 10px 0;
|
|
129
130
|
}
|
|
130
131
|
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import '../../styles/variables';
|
|
2
|
+
|
|
1
3
|
.container {
|
|
2
4
|
display: grid;
|
|
3
5
|
width: 100%;
|
|
@@ -24,7 +26,7 @@
|
|
|
24
26
|
.header {
|
|
25
27
|
text-align: center;
|
|
26
28
|
font-size: 28px;
|
|
27
|
-
color:
|
|
29
|
+
color: var(--login-header-color, $login-header-color);
|
|
28
30
|
}
|
|
29
31
|
|
|
30
32
|
.authTitle {
|
|
@@ -34,7 +36,7 @@
|
|
|
34
36
|
font-size: 18px;
|
|
35
37
|
font-weight: bold;
|
|
36
38
|
text-align: center;
|
|
37
|
-
color:
|
|
39
|
+
color: var(--login-auth-title-color, $login-auth-title-color);
|
|
38
40
|
}
|
|
39
41
|
|
|
40
42
|
.tile {
|
|
@@ -45,23 +47,23 @@
|
|
|
45
47
|
color: white;
|
|
46
48
|
cursor: pointer;
|
|
47
49
|
height: 54px;
|
|
48
|
-
border: solid 1px
|
|
50
|
+
border: solid 1px var(--login-tile-border-color, $login-tile-border-color);
|
|
49
51
|
transition: border 0.3s, box-shadow 0.3s;
|
|
50
52
|
|
|
51
53
|
&.ax {
|
|
52
|
-
color:
|
|
54
|
+
color: var(--login-tile-color, $login-tile-color);
|
|
53
55
|
}
|
|
54
56
|
|
|
55
57
|
&.azure {
|
|
56
|
-
color:
|
|
58
|
+
color: var(--login-tile-color, $login-tile-color);
|
|
57
59
|
}
|
|
58
60
|
|
|
59
61
|
&.google {
|
|
60
|
-
color:
|
|
62
|
+
color: var(--login-tile-color, $login-tile-color);
|
|
61
63
|
}
|
|
62
64
|
|
|
63
65
|
&.axinom {
|
|
64
|
-
color:
|
|
66
|
+
color: var(--login-tile-color, $login-tile-color);
|
|
65
67
|
}
|
|
66
68
|
|
|
67
69
|
.image {
|
|
@@ -83,8 +85,8 @@
|
|
|
83
85
|
}
|
|
84
86
|
|
|
85
87
|
.tile:hover {
|
|
86
|
-
border: 1px solid
|
|
87
|
-
box-shadow: 0 0 2px
|
|
88
|
+
border: 1px solid var(--login-tile-hover-border-color, $login-tile-hover-border-color);
|
|
89
|
+
box-shadow: 0 0 2px var(--login-tile-hover-shadow-color, $login-tile-hover-shadow-color);
|
|
88
90
|
}
|
|
89
91
|
}
|
|
90
92
|
|
|
@@ -108,8 +110,8 @@
|
|
|
108
110
|
|
|
109
111
|
.tabs {
|
|
110
112
|
display: flex;
|
|
111
|
-
background-color:
|
|
112
|
-
color:
|
|
113
|
+
background-color: var(--login-tabs-bg-color, $login-tabs-bg-color);
|
|
114
|
+
color: var(--login-tabs-color, $login-tabs-color);
|
|
113
115
|
font-weight: bold;
|
|
114
116
|
font-size: 14px;
|
|
115
117
|
}
|
|
@@ -122,20 +124,20 @@
|
|
|
122
124
|
}
|
|
123
125
|
|
|
124
126
|
.tab.active {
|
|
125
|
-
background-color:
|
|
126
|
-
border-top: 1px solid
|
|
127
|
-
color:
|
|
127
|
+
background-color: var(--login-tab-active-bg-color, $login-tab-active-bg-color);
|
|
128
|
+
border-top: 1px solid var(--login-tab-active-border-color, $login-tab-active-border-color);
|
|
129
|
+
color: var(--login-tab-active-color, $login-tab-active-color);
|
|
128
130
|
}
|
|
129
131
|
|
|
130
132
|
.tab:hover {
|
|
131
|
-
background-color:
|
|
133
|
+
background-color: var(--login-tab-hover-bg-color, $login-tab-hover-bg-color);
|
|
132
134
|
color: #ffffff;
|
|
133
135
|
}
|
|
134
136
|
|
|
135
137
|
.tab.active:hover {
|
|
136
|
-
background-color:
|
|
137
|
-
border-top: 1px solid
|
|
138
|
-
color:
|
|
138
|
+
background-color: var(--login-tab-active-bg-color, $login-tab-active-bg-color);
|
|
139
|
+
border-top: 1px solid var(--login-tab-active-border-color, $login-tab-active-border-color);
|
|
140
|
+
color: var(--login-tab-active-color, $login-tab-active-color);
|
|
139
141
|
}
|
|
140
142
|
|
|
141
143
|
.tabContent {
|
|
@@ -165,8 +167,8 @@
|
|
|
165
167
|
|
|
166
168
|
.inputGroup input:hover,
|
|
167
169
|
.inputGroup input:focus {
|
|
168
|
-
border: 1px solid
|
|
169
|
-
box-shadow: 0 0 2px
|
|
170
|
+
border: 1px solid var(--login-input-hover-border-color, $login-input-hover-border-color);
|
|
171
|
+
box-shadow: 0 0 2px var(--login-input-hover-shadow-color, $login-input-hover-shadow-color);
|
|
170
172
|
}
|
|
171
173
|
|
|
172
174
|
.inputGroupError {
|
|
@@ -177,27 +179,27 @@
|
|
|
177
179
|
width: 100%;
|
|
178
180
|
padding: 15px 15px;
|
|
179
181
|
box-sizing: border-box;
|
|
180
|
-
border: 1px solid
|
|
182
|
+
border: 1px solid var(--login-input-error-border-color, $login-input-error-border-color);
|
|
181
183
|
transition: border 0.3s, box-shadow 0.3s;
|
|
182
184
|
outline: none;
|
|
183
185
|
}
|
|
184
186
|
|
|
185
187
|
.inputGroupError input:hover,
|
|
186
188
|
.input-group input:focus {
|
|
187
|
-
border: 1px solid
|
|
188
|
-
box-shadow: 0 0 2px
|
|
189
|
+
border: 1px solid var(--login-input-error-border-color, $login-input-error-border-color);
|
|
190
|
+
box-shadow: 0 0 2px var(--login-input-error-shadow-color, $login-input-error-shadow-color);
|
|
189
191
|
}
|
|
190
192
|
|
|
191
193
|
.errorMessage {
|
|
192
194
|
font-size: 12px;
|
|
193
|
-
color:
|
|
195
|
+
color: var(--login-error-message-color, $login-error-message-color);
|
|
194
196
|
margin: 5px 0 10px 0;
|
|
195
197
|
}
|
|
196
198
|
|
|
197
199
|
form {
|
|
198
200
|
.button {
|
|
199
201
|
padding: 15px;
|
|
200
|
-
background-color:
|
|
202
|
+
background-color: var(--login-button-bg-color, $login-button-bg-color);
|
|
201
203
|
color: white;
|
|
202
204
|
border: none;
|
|
203
205
|
cursor: pointer;
|
|
@@ -216,7 +218,7 @@
|
|
|
216
218
|
}
|
|
217
219
|
|
|
218
220
|
.button:hover {
|
|
219
|
-
background-color:
|
|
221
|
+
background-color: var(--login-button-hover-bg-color, $login-button-hover-bg-color);
|
|
220
222
|
}
|
|
221
223
|
|
|
222
224
|
.forgotPassword {
|
|
@@ -226,7 +228,7 @@
|
|
|
226
228
|
|
|
227
229
|
.forgotPassword a {
|
|
228
230
|
font-size: 12px;
|
|
229
|
-
color:
|
|
231
|
+
color: var(--login-link-color, $login-link-color);
|
|
230
232
|
cursor: pointer;
|
|
231
233
|
}
|
|
232
234
|
|
|
@@ -241,7 +243,7 @@
|
|
|
241
243
|
.separator::after {
|
|
242
244
|
content: '';
|
|
243
245
|
flex: 1;
|
|
244
|
-
border-bottom: 1px dashed
|
|
246
|
+
border-bottom: 1px dashed var(--login-separator-border-color, $login-separator-border-color);
|
|
245
247
|
}
|
|
246
248
|
|
|
247
249
|
.separator:not(:empty)::before {
|
|
@@ -254,7 +256,7 @@
|
|
|
254
256
|
|
|
255
257
|
.separator span {
|
|
256
258
|
font-size: 12px;
|
|
257
|
-
color:
|
|
259
|
+
color: var(--login-separator-text-color, $login-separator-text-color);
|
|
258
260
|
}
|
|
259
261
|
|
|
260
262
|
.buttonIdp {
|
|
@@ -262,8 +264,8 @@
|
|
|
262
264
|
align-items: center;
|
|
263
265
|
padding: 7px 10px;
|
|
264
266
|
background-color: #ffffff;
|
|
265
|
-
color:
|
|
266
|
-
border: 1px solid
|
|
267
|
+
color: var(--login-button-idp-color, $login-button-idp-color);
|
|
268
|
+
border: 1px solid var(--login-button-idp-border-color, $login-button-idp-border-color);
|
|
267
269
|
cursor: pointer;
|
|
268
270
|
font-size: 14px;
|
|
269
271
|
text-decoration: none;
|
|
@@ -283,24 +285,24 @@
|
|
|
283
285
|
}
|
|
284
286
|
|
|
285
287
|
.buttonIdp:hover {
|
|
286
|
-
border: 1px solid
|
|
287
|
-
box-shadow: 0 0 2px
|
|
288
|
+
border: 1px solid var(--login-button-idp-hover-border-color, $login-button-idp-hover-border-color);
|
|
289
|
+
box-shadow: 0 0 2px var(--login-button-idp-hover-shadow-color, $login-button-idp-hover-shadow-color);
|
|
288
290
|
}
|
|
289
291
|
|
|
290
292
|
p {
|
|
291
|
-
color:
|
|
293
|
+
color: var(--login-text-color, $login-text-color);
|
|
292
294
|
font-size: 14px;
|
|
293
295
|
}
|
|
294
296
|
|
|
295
297
|
.hint {
|
|
296
298
|
padding: 5px 15px;
|
|
297
|
-
color:
|
|
299
|
+
color: var(--login-text-color, $login-text-color);
|
|
298
300
|
font-size: 14px;
|
|
299
301
|
text-align: center;
|
|
300
302
|
}
|
|
301
303
|
|
|
302
304
|
.info {
|
|
303
|
-
color:
|
|
305
|
+
color: var(--login-text-color, $login-text-color);
|
|
304
306
|
font-size: 14px;
|
|
305
307
|
text-align: left;
|
|
306
308
|
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import '../../styles/variables';
|
|
2
|
+
|
|
1
3
|
.container {
|
|
2
4
|
*,
|
|
3
5
|
*:before,
|
|
@@ -12,7 +14,7 @@
|
|
|
12
14
|
|
|
13
15
|
background-color: white;
|
|
14
16
|
|
|
15
|
-
color:
|
|
17
|
+
color: var(--message-text-color, $message-text-color);
|
|
16
18
|
|
|
17
19
|
.titleWrapper {
|
|
18
20
|
display: grid;
|
|
@@ -71,10 +73,10 @@
|
|
|
71
73
|
// error styling (default)
|
|
72
74
|
&.hasError {
|
|
73
75
|
.titleWrapper {
|
|
74
|
-
background-color: rgba(
|
|
76
|
+
background-color: rgba($error, 0.2);
|
|
75
77
|
|
|
76
78
|
.typeIcon {
|
|
77
|
-
background-color:
|
|
79
|
+
background-color: var(--message-error-icon-bg, $message-error-icon-bg);
|
|
78
80
|
}
|
|
79
81
|
}
|
|
80
82
|
}
|
|
@@ -82,10 +84,10 @@
|
|
|
82
84
|
// info styling
|
|
83
85
|
&.hasInfo {
|
|
84
86
|
.titleWrapper {
|
|
85
|
-
background-color:
|
|
87
|
+
background-color: var(--message-info-bg-color, $message-info-bg-color);
|
|
86
88
|
|
|
87
89
|
.typeIcon {
|
|
88
|
-
background-color:
|
|
90
|
+
background-color: var(--message-info-icon-bg, $message-info-icon-bg);
|
|
89
91
|
}
|
|
90
92
|
}
|
|
91
93
|
}
|
|
@@ -93,10 +95,10 @@
|
|
|
93
95
|
// success styling
|
|
94
96
|
&.hasSuccess {
|
|
95
97
|
.titleWrapper {
|
|
96
|
-
background-color: rgba(
|
|
98
|
+
background-color: rgba($success, 0.2);
|
|
97
99
|
|
|
98
100
|
.typeIcon {
|
|
99
|
-
background-color:
|
|
101
|
+
background-color: var(--message-success-icon-bg, $message-success-icon-bg);
|
|
100
102
|
}
|
|
101
103
|
}
|
|
102
104
|
}
|
|
@@ -104,10 +106,10 @@
|
|
|
104
106
|
// warning styling
|
|
105
107
|
&.hasWarning {
|
|
106
108
|
.titleWrapper {
|
|
107
|
-
background-color: rgba(
|
|
109
|
+
background-color: rgba($warning, 0.2);
|
|
108
110
|
|
|
109
111
|
.typeIcon {
|
|
110
|
-
background-color:
|
|
112
|
+
background-color: var(--message-warning-icon-bg, $message-warning-icon-bg);
|
|
111
113
|
}
|
|
112
114
|
}
|
|
113
115
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@import '../../styles/variables';
|
|
1
2
|
.container {
|
|
2
3
|
display: grid;
|
|
3
4
|
grid: min-content 1fr / 1fr;
|
|
@@ -12,13 +13,13 @@
|
|
|
12
13
|
margin-top: 20%;
|
|
13
14
|
margin-bottom: -10px;
|
|
14
15
|
|
|
15
|
-
color:
|
|
16
|
+
color: var(--permission-denied-error-color, $permission-denied-error-color);
|
|
16
17
|
font-size: 120px;
|
|
17
18
|
text-align: center;
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
.body {
|
|
21
|
-
color:
|
|
22
|
+
color: var(--permission-denied-body-color, $permission-denied-body-color);
|
|
22
23
|
font-size: 14px;
|
|
23
24
|
line-height: 1.4;
|
|
24
25
|
|
|
@@ -28,7 +29,7 @@
|
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
.link {
|
|
31
|
-
color:
|
|
32
|
+
color: var(--permission-denied-link-color, $permission-denied-link-color);
|
|
32
33
|
text-decoration: none;
|
|
33
34
|
justify-self: center;
|
|
34
35
|
text-decoration: underline;
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import '../../styles/variables';
|
|
2
|
+
|
|
1
3
|
.container {
|
|
2
4
|
all: unset; // remove all button styling
|
|
3
5
|
|
|
@@ -22,61 +24,61 @@
|
|
|
22
24
|
|
|
23
25
|
&.navigation {
|
|
24
26
|
color: white;
|
|
25
|
-
background-color:
|
|
27
|
+
background-color: var(--text-button-navigation-bg, $text-button-navigation-bg);
|
|
26
28
|
|
|
27
29
|
&:hover {
|
|
28
|
-
background-color:
|
|
30
|
+
background-color: var(--text-button-navigation-hover-bg, $text-button-navigation-hover-bg);
|
|
29
31
|
}
|
|
30
32
|
|
|
31
33
|
&:active {
|
|
32
|
-
background-color:
|
|
33
|
-
color:
|
|
34
|
+
background-color: var(--text-button-navigation-active-bg, $text-button-navigation-active-bg);
|
|
35
|
+
color: var(--text-button-navigation-active-color, $text-button-navigation-active-color);
|
|
34
36
|
}
|
|
35
37
|
|
|
36
38
|
&:disabled {
|
|
37
|
-
background-color:
|
|
39
|
+
background-color: var(--text-button-navigation-disabled-bg, $text-button-navigation-disabled-bg);
|
|
38
40
|
color: rgba(white, 0.5);
|
|
39
41
|
}
|
|
40
42
|
}
|
|
41
43
|
|
|
42
44
|
&.context {
|
|
43
|
-
color:
|
|
44
|
-
border: 1px solid
|
|
45
|
+
color: var(--text-button-context-color, $text-button-context-color);
|
|
46
|
+
border: 1px solid var(--text-button-context-border-color, $text-button-context-border-color);
|
|
45
47
|
background-color: white;
|
|
46
48
|
|
|
47
49
|
transition: box-shadow 0.15s ease-in-out 0s;
|
|
48
50
|
|
|
49
51
|
&:hover {
|
|
50
|
-
border: 1px solid
|
|
51
|
-
box-shadow: 0 0 0 2px
|
|
52
|
+
border: 1px solid var(--text-button-context-hover-border-color, $text-button-context-hover-border-color);
|
|
53
|
+
box-shadow: 0 0 0 2px var(--text-button-context-hover-shadow-color, $text-button-context-hover-shadow-color);
|
|
52
54
|
}
|
|
53
55
|
|
|
54
56
|
&:active {
|
|
55
|
-
background-color:
|
|
57
|
+
background-color: var(--text-button-context-active-bg, $text-button-context-active-bg);
|
|
56
58
|
color: white;
|
|
57
59
|
}
|
|
58
60
|
|
|
59
61
|
&:disabled {
|
|
60
|
-
border: 1px solid
|
|
61
|
-
color:
|
|
62
|
+
border: 1px solid var(--text-button-context-disabled-border-color, $text-button-context-disabled-border-color);
|
|
63
|
+
color: var(--text-button-context-disabled-color, $text-button-context-disabled-color);
|
|
62
64
|
}
|
|
63
65
|
}
|
|
64
66
|
|
|
65
67
|
&.active {
|
|
66
68
|
color: white;
|
|
67
|
-
background-color:
|
|
69
|
+
background-color: var(--text-button-active-bg, $text-button-active-bg);
|
|
68
70
|
|
|
69
71
|
&:hover {
|
|
70
|
-
background-color:
|
|
72
|
+
background-color: var(--text-button-active-hover-bg, $text-button-active-hover-bg);
|
|
71
73
|
}
|
|
72
74
|
|
|
73
75
|
&:active {
|
|
74
76
|
background-color: white;
|
|
75
|
-
color:
|
|
77
|
+
color: var(--text-button-active-active-color, $text-button-active-active-color);
|
|
76
78
|
}
|
|
77
79
|
|
|
78
80
|
&:disabled {
|
|
79
|
-
background-color:
|
|
81
|
+
background-color: var(--text-button-active-disabled-bg, $text-button-active-disabled-bg);
|
|
80
82
|
color: rgba(white, 0.5);
|
|
81
83
|
}
|
|
82
84
|
}
|