hof 20.3.7-timeout-beta → 20.3.8-timeout-beta
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/frontend/themes/gov-uk/styles/govuk.scss +1 -0
- package/frontend/themes/gov-uk/styles/modules/_dialogs.scss +113 -0
- package/frontend/toolkit/assets/stylesheets/app.scss +1 -0
- package/frontend/toolkit/assets/stylesheets/modules/_dialogs.scss +113 -0
- package/package.json +1 -1
- package/sandbox/assets/scss/app.scss +0 -114
- package/sandbox/public/css/app.css +68 -68
- package/sandbox/public/js/bundle.js +2 -0
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
.hidden {
|
|
2
|
+
display: none;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
[role="dialog"] {
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
padding: 15px;
|
|
8
|
+
border: 1px solid #000;
|
|
9
|
+
background-color: #fff;
|
|
10
|
+
min-height: 100vh;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@media screen and (min-width: 640px) {
|
|
14
|
+
[role="dialog"] {
|
|
15
|
+
position: absolute;
|
|
16
|
+
top: 25vh;
|
|
17
|
+
left: 50vw; /* move to the middle of the screen (assumes relative parent is the body/viewport) */
|
|
18
|
+
transform: translateX(
|
|
19
|
+
-50%
|
|
20
|
+
); /* move backwards 50% of this element's width */
|
|
21
|
+
min-width: calc(640px - (15px * 2)); /* == breakpoint - left+right margin */
|
|
22
|
+
min-height: auto;
|
|
23
|
+
box-shadow: 0 19px 38px rgb(0 0 0 / 12%), 0 15px 12px rgb(0 0 0 / 22%);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.dialog_form {
|
|
28
|
+
margin: 15px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.dialog_form .label_text {
|
|
32
|
+
box-sizing: border-box;
|
|
33
|
+
padding-right: 0.5em;
|
|
34
|
+
display: inline-block;
|
|
35
|
+
font-size: 16px;
|
|
36
|
+
font-weight: bold;
|
|
37
|
+
width: 30%;
|
|
38
|
+
text-align: right;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.dialog_form .label_info {
|
|
42
|
+
box-sizing: border-box;
|
|
43
|
+
padding-right: 0.5em;
|
|
44
|
+
font-size: 12px;
|
|
45
|
+
width: 30%;
|
|
46
|
+
text-align: right;
|
|
47
|
+
display: inline-block;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.dialog_form_item {
|
|
51
|
+
margin: 10px 0;
|
|
52
|
+
font-size: 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.dialog_form_item .wide_input {
|
|
56
|
+
box-sizing: border-box;
|
|
57
|
+
max-width: 70%;
|
|
58
|
+
width: 27em;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.dialog_form_actions {
|
|
62
|
+
text-align: right;
|
|
63
|
+
padding: 0 20px 20px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.dialog_close_button {
|
|
67
|
+
float: right;
|
|
68
|
+
position: absolute;
|
|
69
|
+
top: 10px;
|
|
70
|
+
left: 92%;
|
|
71
|
+
height: 25px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.dialog_close_button img {
|
|
75
|
+
border: 0;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.dialog_desc {
|
|
79
|
+
padding: 10px 20px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* native <dialog> element uses the ::backdrop pseudo-element */
|
|
83
|
+
|
|
84
|
+
/* dialog::backdrop, */
|
|
85
|
+
.dialog-backdrop {
|
|
86
|
+
display: none;
|
|
87
|
+
position: fixed;
|
|
88
|
+
overflow-y: auto;
|
|
89
|
+
top: 0;
|
|
90
|
+
right: 0;
|
|
91
|
+
bottom: 0;
|
|
92
|
+
left: 0;
|
|
93
|
+
z-index: 1;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
@media screen and (min-width: 640px) {
|
|
97
|
+
.dialog-backdrop {
|
|
98
|
+
background: rgb(0 0 0 / 30%);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.dialog-backdrop.active {
|
|
103
|
+
display: block;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.no-scroll {
|
|
107
|
+
overflow-y: auto !important;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* this is added to the body when a dialog is open */
|
|
111
|
+
.has-dialog {
|
|
112
|
+
overflow: hidden;
|
|
113
|
+
}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
.hidden {
|
|
2
|
+
display: none;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
[role="dialog"] {
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
padding: 15px;
|
|
8
|
+
border: 1px solid #000;
|
|
9
|
+
background-color: #fff;
|
|
10
|
+
min-height: 100vh;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@media screen and (min-width: 640px) {
|
|
14
|
+
[role="dialog"] {
|
|
15
|
+
position: absolute;
|
|
16
|
+
top: 25vh;
|
|
17
|
+
left: 50vw; /* move to the middle of the screen (assumes relative parent is the body/viewport) */
|
|
18
|
+
transform: translateX(
|
|
19
|
+
-50%
|
|
20
|
+
); /* move backwards 50% of this element's width */
|
|
21
|
+
min-width: calc(640px - (15px * 2)); /* == breakpoint - left+right margin */
|
|
22
|
+
min-height: auto;
|
|
23
|
+
box-shadow: 0 19px 38px rgb(0 0 0 / 12%), 0 15px 12px rgb(0 0 0 / 22%);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.dialog_form {
|
|
28
|
+
margin: 15px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.dialog_form .label_text {
|
|
32
|
+
box-sizing: border-box;
|
|
33
|
+
padding-right: 0.5em;
|
|
34
|
+
display: inline-block;
|
|
35
|
+
font-size: 16px;
|
|
36
|
+
font-weight: bold;
|
|
37
|
+
width: 30%;
|
|
38
|
+
text-align: right;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.dialog_form .label_info {
|
|
42
|
+
box-sizing: border-box;
|
|
43
|
+
padding-right: 0.5em;
|
|
44
|
+
font-size: 12px;
|
|
45
|
+
width: 30%;
|
|
46
|
+
text-align: right;
|
|
47
|
+
display: inline-block;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.dialog_form_item {
|
|
51
|
+
margin: 10px 0;
|
|
52
|
+
font-size: 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.dialog_form_item .wide_input {
|
|
56
|
+
box-sizing: border-box;
|
|
57
|
+
max-width: 70%;
|
|
58
|
+
width: 27em;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.dialog_form_actions {
|
|
62
|
+
text-align: right;
|
|
63
|
+
padding: 0 20px 20px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.dialog_close_button {
|
|
67
|
+
float: right;
|
|
68
|
+
position: absolute;
|
|
69
|
+
top: 10px;
|
|
70
|
+
left: 92%;
|
|
71
|
+
height: 25px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.dialog_close_button img {
|
|
75
|
+
border: 0;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.dialog_desc {
|
|
79
|
+
padding: 10px 20px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* native <dialog> element uses the ::backdrop pseudo-element */
|
|
83
|
+
|
|
84
|
+
/* dialog::backdrop, */
|
|
85
|
+
.dialog-backdrop {
|
|
86
|
+
display: none;
|
|
87
|
+
position: fixed;
|
|
88
|
+
overflow-y: auto;
|
|
89
|
+
top: 0;
|
|
90
|
+
right: 0;
|
|
91
|
+
bottom: 0;
|
|
92
|
+
left: 0;
|
|
93
|
+
z-index: 1;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
@media screen and (min-width: 640px) {
|
|
97
|
+
.dialog-backdrop {
|
|
98
|
+
background: rgb(0 0 0 / 30%);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.dialog-backdrop.active {
|
|
103
|
+
display: block;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.no-scroll {
|
|
107
|
+
overflow-y: auto !important;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* this is added to the body when a dialog is open */
|
|
111
|
+
.has-dialog {
|
|
112
|
+
overflow: hidden;
|
|
113
|
+
}
|
package/package.json
CHANGED
|
@@ -25,117 +25,3 @@
|
|
|
25
25
|
.twitter-typeahead {
|
|
26
26
|
width: 100%;
|
|
27
27
|
}
|
|
28
|
-
|
|
29
|
-
.hidden {
|
|
30
|
-
display: none;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
[role="dialog"] {
|
|
34
|
-
box-sizing: border-box;
|
|
35
|
-
padding: 15px;
|
|
36
|
-
border: 1px solid #000;
|
|
37
|
-
background-color: #fff;
|
|
38
|
-
min-height: 100vh;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
@media screen and (min-width: 640px) {
|
|
42
|
-
[role="dialog"] {
|
|
43
|
-
position: absolute;
|
|
44
|
-
top: 25vh;
|
|
45
|
-
left: 50vw; /* move to the middle of the screen (assumes relative parent is the body/viewport) */
|
|
46
|
-
transform: translateX(
|
|
47
|
-
-50%
|
|
48
|
-
); /* move backwards 50% of this element's width */
|
|
49
|
-
min-width: calc(640px - (15px * 2)); /* == breakpoint - left+right margin */
|
|
50
|
-
min-height: auto;
|
|
51
|
-
box-shadow: 0 19px 38px rgb(0 0 0 / 12%), 0 15px 12px rgb(0 0 0 / 22%);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.dialog_form {
|
|
56
|
-
margin: 15px;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.dialog_form .label_text {
|
|
60
|
-
box-sizing: border-box;
|
|
61
|
-
padding-right: 0.5em;
|
|
62
|
-
display: inline-block;
|
|
63
|
-
font-size: 16px;
|
|
64
|
-
font-weight: bold;
|
|
65
|
-
width: 30%;
|
|
66
|
-
text-align: right;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.dialog_form .label_info {
|
|
70
|
-
box-sizing: border-box;
|
|
71
|
-
padding-right: 0.5em;
|
|
72
|
-
font-size: 12px;
|
|
73
|
-
width: 30%;
|
|
74
|
-
text-align: right;
|
|
75
|
-
display: inline-block;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.dialog_form_item {
|
|
79
|
-
margin: 10px 0;
|
|
80
|
-
font-size: 0;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.dialog_form_item .wide_input {
|
|
84
|
-
box-sizing: border-box;
|
|
85
|
-
max-width: 70%;
|
|
86
|
-
width: 27em;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.dialog_form_actions {
|
|
90
|
-
text-align: right;
|
|
91
|
-
padding: 0 20px 20px;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.dialog_close_button {
|
|
95
|
-
float: right;
|
|
96
|
-
position: absolute;
|
|
97
|
-
top: 10px;
|
|
98
|
-
left: 92%;
|
|
99
|
-
height: 25px;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.dialog_close_button img {
|
|
103
|
-
border: 0;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.dialog_desc {
|
|
107
|
-
padding: 10px 20px;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
/* native <dialog> element uses the ::backdrop pseudo-element */
|
|
111
|
-
|
|
112
|
-
/* dialog::backdrop, */
|
|
113
|
-
.dialog-backdrop {
|
|
114
|
-
display: none;
|
|
115
|
-
position: fixed;
|
|
116
|
-
overflow-y: auto;
|
|
117
|
-
top: 0;
|
|
118
|
-
right: 0;
|
|
119
|
-
bottom: 0;
|
|
120
|
-
left: 0;
|
|
121
|
-
z-index: 1;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
@media screen and (min-width: 640px) {
|
|
125
|
-
.dialog-backdrop {
|
|
126
|
-
background: rgb(0 0 0 / 30%);
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.dialog-backdrop.active {
|
|
131
|
-
display: block;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.no-scroll {
|
|
135
|
-
overflow-y: auto !important;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
/* this is added to the body when a dialog is open */
|
|
139
|
-
.has-dialog {
|
|
140
|
-
overflow: hidden;
|
|
141
|
-
}
|
|
@@ -9318,74 +9318,6 @@ fieldset + .reveal {
|
|
|
9318
9318
|
margin-top: 0;
|
|
9319
9319
|
}
|
|
9320
9320
|
|
|
9321
|
-
.maxlength-hint {
|
|
9322
|
-
margin-top: 2px;
|
|
9323
|
-
padding-top: 2px;
|
|
9324
|
-
}
|
|
9325
|
-
|
|
9326
|
-
.textarea-error {
|
|
9327
|
-
border: 2px solid #b10e1e;
|
|
9328
|
-
}
|
|
9329
|
-
|
|
9330
|
-
.table-details {
|
|
9331
|
-
width: 100%;
|
|
9332
|
-
margin-bottom: 3em;
|
|
9333
|
-
}
|
|
9334
|
-
.table-details tbody td:nth-child(1) {
|
|
9335
|
-
width: 40%;
|
|
9336
|
-
}
|
|
9337
|
-
.table-details tbody td:nth-child(2) {
|
|
9338
|
-
width: 60%;
|
|
9339
|
-
}
|
|
9340
|
-
.table-details tbody td:nth-child(3) {
|
|
9341
|
-
text-align: right;
|
|
9342
|
-
padding-right: 0;
|
|
9343
|
-
}
|
|
9344
|
-
.table-details tbody td:not(.no-white-space) {
|
|
9345
|
-
white-space: pre-wrap;
|
|
9346
|
-
}
|
|
9347
|
-
|
|
9348
|
-
.panel-indent {
|
|
9349
|
-
clear: both;
|
|
9350
|
-
border-left: 4px solid #bfc1c3;
|
|
9351
|
-
padding: 10px 0 10px 15px;
|
|
9352
|
-
margin: 30px 15px 45px 0;
|
|
9353
|
-
}
|
|
9354
|
-
|
|
9355
|
-
.panel-indent legend {
|
|
9356
|
-
margin-top: 0;
|
|
9357
|
-
}
|
|
9358
|
-
|
|
9359
|
-
.panel-indent p:only-child,
|
|
9360
|
-
.panel-indent p:last-child {
|
|
9361
|
-
margin-bottom: 0;
|
|
9362
|
-
}
|
|
9363
|
-
|
|
9364
|
-
.panel-indent .form-group:last-child {
|
|
9365
|
-
margin-bottom: 0;
|
|
9366
|
-
}
|
|
9367
|
-
|
|
9368
|
-
.tt-menu {
|
|
9369
|
-
background-color: #fff;
|
|
9370
|
-
border: 1px solid #ccc;
|
|
9371
|
-
width: 65%;
|
|
9372
|
-
}
|
|
9373
|
-
|
|
9374
|
-
.tt-suggestion {
|
|
9375
|
-
padding: 0.5em;
|
|
9376
|
-
}
|
|
9377
|
-
.tt-suggestion:hover, .tt-suggestion.tt-cursor {
|
|
9378
|
-
color: #fff;
|
|
9379
|
-
background-color: #0097cf;
|
|
9380
|
-
}
|
|
9381
|
-
.tt-suggestion:hover {
|
|
9382
|
-
cursor: pointer;
|
|
9383
|
-
}
|
|
9384
|
-
|
|
9385
|
-
.twitter-typeahead {
|
|
9386
|
-
width: 100%;
|
|
9387
|
-
}
|
|
9388
|
-
|
|
9389
9321
|
.hidden {
|
|
9390
9322
|
display: none;
|
|
9391
9323
|
}
|
|
@@ -9493,4 +9425,72 @@ fieldset + .reveal {
|
|
|
9493
9425
|
/* this is added to the body when a dialog is open */
|
|
9494
9426
|
.has-dialog {
|
|
9495
9427
|
overflow: hidden;
|
|
9428
|
+
}
|
|
9429
|
+
|
|
9430
|
+
.maxlength-hint {
|
|
9431
|
+
margin-top: 2px;
|
|
9432
|
+
padding-top: 2px;
|
|
9433
|
+
}
|
|
9434
|
+
|
|
9435
|
+
.textarea-error {
|
|
9436
|
+
border: 2px solid #b10e1e;
|
|
9437
|
+
}
|
|
9438
|
+
|
|
9439
|
+
.table-details {
|
|
9440
|
+
width: 100%;
|
|
9441
|
+
margin-bottom: 3em;
|
|
9442
|
+
}
|
|
9443
|
+
.table-details tbody td:nth-child(1) {
|
|
9444
|
+
width: 40%;
|
|
9445
|
+
}
|
|
9446
|
+
.table-details tbody td:nth-child(2) {
|
|
9447
|
+
width: 60%;
|
|
9448
|
+
}
|
|
9449
|
+
.table-details tbody td:nth-child(3) {
|
|
9450
|
+
text-align: right;
|
|
9451
|
+
padding-right: 0;
|
|
9452
|
+
}
|
|
9453
|
+
.table-details tbody td:not(.no-white-space) {
|
|
9454
|
+
white-space: pre-wrap;
|
|
9455
|
+
}
|
|
9456
|
+
|
|
9457
|
+
.panel-indent {
|
|
9458
|
+
clear: both;
|
|
9459
|
+
border-left: 4px solid #bfc1c3;
|
|
9460
|
+
padding: 10px 0 10px 15px;
|
|
9461
|
+
margin: 30px 15px 45px 0;
|
|
9462
|
+
}
|
|
9463
|
+
|
|
9464
|
+
.panel-indent legend {
|
|
9465
|
+
margin-top: 0;
|
|
9466
|
+
}
|
|
9467
|
+
|
|
9468
|
+
.panel-indent p:only-child,
|
|
9469
|
+
.panel-indent p:last-child {
|
|
9470
|
+
margin-bottom: 0;
|
|
9471
|
+
}
|
|
9472
|
+
|
|
9473
|
+
.panel-indent .form-group:last-child {
|
|
9474
|
+
margin-bottom: 0;
|
|
9475
|
+
}
|
|
9476
|
+
|
|
9477
|
+
.tt-menu {
|
|
9478
|
+
background-color: #fff;
|
|
9479
|
+
border: 1px solid #ccc;
|
|
9480
|
+
width: 65%;
|
|
9481
|
+
}
|
|
9482
|
+
|
|
9483
|
+
.tt-suggestion {
|
|
9484
|
+
padding: 0.5em;
|
|
9485
|
+
}
|
|
9486
|
+
.tt-suggestion:hover, .tt-suggestion.tt-cursor {
|
|
9487
|
+
color: #fff;
|
|
9488
|
+
background-color: #0097cf;
|
|
9489
|
+
}
|
|
9490
|
+
.tt-suggestion:hover {
|
|
9491
|
+
cursor: pointer;
|
|
9492
|
+
}
|
|
9493
|
+
|
|
9494
|
+
.twitter-typeahead {
|
|
9495
|
+
width: 100%;
|
|
9496
9496
|
}
|
|
@@ -456,6 +456,7 @@ aria.KeyCode = {
|
|
|
456
456
|
this.backdropNode.classList.remove('active');
|
|
457
457
|
|
|
458
458
|
const focusAfterClosed = newFocusAfterClosed || this.focusAfterClosed;
|
|
459
|
+
// eslint-disable-next-line no-new
|
|
459
460
|
new aria.Dialog(newDialogId, focusAfterClosed, newFocusFirst);
|
|
460
461
|
}; // end replace
|
|
461
462
|
|
|
@@ -484,6 +485,7 @@ aria.KeyCode = {
|
|
|
484
485
|
}; // end trapFocus
|
|
485
486
|
|
|
486
487
|
window.openDialog = function (dialogId, focusAfterClosed, focusFirst) {
|
|
488
|
+
// eslint-disable-next-line no-new
|
|
487
489
|
new aria.Dialog(dialogId, focusAfterClosed, focusFirst);
|
|
488
490
|
};
|
|
489
491
|
|