@thalassic/themes 22.16.0 → 22.16.1
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/package.json
CHANGED
|
@@ -18,7 +18,9 @@
|
|
|
18
18
|
|
|
19
19
|
display: flex;
|
|
20
20
|
flex-direction: column;
|
|
21
|
-
|
|
21
|
+
// The question and its consequence are one block, so they sit close together;
|
|
22
|
+
// the actions are set apart by their own margin below.
|
|
23
|
+
gap: var(--spacing-2);
|
|
22
24
|
|
|
23
25
|
border: var(--tls-confirm-border-width) solid var(--tls-confirm-border-color);
|
|
24
26
|
border-radius: var(--tls-confirm-border-radius);
|
|
@@ -33,18 +35,25 @@
|
|
|
33
35
|
&__title {
|
|
34
36
|
margin: 0;
|
|
35
37
|
|
|
36
|
-
font-size: var(--font-size
|
|
38
|
+
font-size: var(--font-title-medium-size);
|
|
39
|
+
line-height: var(--font-title-medium-line-height);
|
|
37
40
|
font-weight: var(--font-weight-semibold);
|
|
38
41
|
}
|
|
39
42
|
|
|
40
43
|
&__message {
|
|
41
44
|
margin: 0;
|
|
42
45
|
|
|
43
|
-
font-size: var(--font-size
|
|
46
|
+
font-size: var(--font-body-small-size);
|
|
47
|
+
line-height: var(--font-body-small-line-height);
|
|
44
48
|
color: var(--color-on-surface-variant);
|
|
45
49
|
}
|
|
46
50
|
|
|
47
51
|
&__actions {
|
|
52
|
+
// Stands apart from the text: acting is a distinct step from reading, and
|
|
53
|
+
// the room guards against a mis-click on a destructive action. Adds to the
|
|
54
|
+
// column gap, so the clearance above the actions totals `--spacing-4`.
|
|
55
|
+
margin-top: var(--spacing-2);
|
|
56
|
+
|
|
48
57
|
display: flex;
|
|
49
58
|
gap: var(--spacing-2);
|
|
50
59
|
|
|
@@ -64,4 +73,20 @@
|
|
|
64
73
|
justify-content: space-between;
|
|
65
74
|
}
|
|
66
75
|
}
|
|
76
|
+
|
|
77
|
+
// Width steps, centered on `md` so a confirm can be narrowed as readily as it
|
|
78
|
+
// is widened. `md` restates the base width, keeping every size stated in one
|
|
79
|
+
// place. The width is a cap, so a small screen still shrinks the panel below
|
|
80
|
+
// its step.
|
|
81
|
+
&--sm {
|
|
82
|
+
--tls-confirm-max-width: 280px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&--md {
|
|
86
|
+
--tls-confirm-max-width: 320px;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&--lg {
|
|
90
|
+
--tls-confirm-max-width: 400px;
|
|
91
|
+
}
|
|
67
92
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@use '../mixins' as mixins;
|
|
2
2
|
|
|
3
3
|
.tls-password {
|
|
4
|
-
//
|
|
4
|
+
// Layout and border live on the inner tls-form-control-group; the host stays
|
|
5
5
|
// transparent so size/fluid set on the group resolve against the password's parent.
|
|
6
6
|
display: contents;
|
|
7
7
|
|