@geoffcox/sterling-svelte-themes 2.0.15 → 2.0.16
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/README.md +5 -0
- package/css/sterling/Checkbox.base.css +3 -3
- package/css/sterling/Dialog.base.css +16 -1
- package/css/sterling/Dropdown.base.css +1 -1
- package/css/sterling/Radio.base.css +1 -1
- package/css/sterling/Select.base.css +1 -1
- package/css/sterling/TreeChevron.base.css +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,6 +22,11 @@ https://github.com/GeoffCox/sterling-svelte-themes
|
|
|
22
22
|
|
|
23
23
|
## Change Log
|
|
24
24
|
|
|
25
|
+
### 2.0.16
|
|
26
|
+
|
|
27
|
+
- Added style support for Dialog not having a form element that wraps content.
|
|
28
|
+
- CSS style fix: content: '' => content: ""
|
|
29
|
+
|
|
25
30
|
### 2.0.15
|
|
26
31
|
|
|
27
32
|
- Fixed issue with checkbox and radio button styles to ensure hidden input
|
|
@@ -83,7 +83,7 @@ The checkmark is a rotated L centered in the box.
|
|
|
83
83
|
border-style: solid;
|
|
84
84
|
border-width: 0 3px 3px 0;
|
|
85
85
|
box-sizing: border-box;
|
|
86
|
-
content:
|
|
86
|
+
content: "";
|
|
87
87
|
height: 14px;
|
|
88
88
|
left: 50%;
|
|
89
89
|
position: absolute;
|
|
@@ -91,8 +91,8 @@ The checkmark is a rotated L centered in the box.
|
|
|
91
91
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
92
92
|
transform-origin: center;
|
|
93
93
|
transition:
|
|
94
|
-
|
|
95
|
-
|
|
94
|
+
border-color 250ms,
|
|
95
|
+
opacity 150ms;
|
|
96
96
|
width: 7px;
|
|
97
97
|
opacity: 0;
|
|
98
98
|
}
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
opacity: 0;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
+
.sterling-dialog > .content,
|
|
25
26
|
.sterling-dialog > form > .content {
|
|
26
27
|
background-color: var(--stsv-common__background-color);
|
|
27
28
|
border-color: var(--stsv-common__border-color);
|
|
@@ -40,14 +41,17 @@
|
|
|
40
41
|
opacity: 0;
|
|
41
42
|
}
|
|
42
43
|
|
|
44
|
+
.sterling-dialog.open > .content,
|
|
43
45
|
.sterling-dialog.open > form > .content {
|
|
44
46
|
opacity: 1;
|
|
45
47
|
}
|
|
46
48
|
|
|
49
|
+
.sterling-dialog.closing > .content,
|
|
47
50
|
.sterling-dialog.closing > form > .content {
|
|
48
51
|
opacity: 0;
|
|
49
52
|
}
|
|
50
53
|
|
|
54
|
+
.sterling-dialog > .content > .header,
|
|
51
55
|
.sterling-dialog > form > .content > .header {
|
|
52
56
|
background-color: var(--stsv-common__background-color--secondary);
|
|
53
57
|
display: grid;
|
|
@@ -59,23 +63,28 @@
|
|
|
59
63
|
column-gap: 1em;
|
|
60
64
|
}
|
|
61
65
|
|
|
66
|
+
.sterling-dialog > .content > .header > .title,
|
|
62
67
|
.sterling-dialog > form > .content > .header > .title {
|
|
63
68
|
font-size: 1.4em;
|
|
64
69
|
}
|
|
65
70
|
|
|
71
|
+
.sterling-dialog > .content > .header > .close,
|
|
66
72
|
.sterling-dialog > form > .content > .header > .close {
|
|
67
73
|
justify-self: flex-end;
|
|
68
74
|
}
|
|
69
75
|
|
|
76
|
+
.sterling-dialog > .content > .header > .close .close-x,
|
|
70
77
|
.sterling-dialog > form > .content > .header > .close .close-x {
|
|
71
78
|
width: 1em;
|
|
72
79
|
height: 1em;
|
|
73
80
|
position: relative;
|
|
74
81
|
}
|
|
75
82
|
|
|
83
|
+
.sterling-dialog > .content > .header > .close .close-x::before,
|
|
84
|
+
.sterling-dialog > .content > .header > .close .close-x::after,
|
|
76
85
|
.sterling-dialog > form > .content > .header > .close .close-x::before,
|
|
77
86
|
.sterling-dialog > form > .content > .header > .close .close-x::after {
|
|
78
|
-
content:
|
|
87
|
+
content: "";
|
|
79
88
|
position: absolute;
|
|
80
89
|
width: 0.75em;
|
|
81
90
|
height: 0.125em;
|
|
@@ -83,26 +92,31 @@
|
|
|
83
92
|
top: 0.45em;
|
|
84
93
|
}
|
|
85
94
|
|
|
95
|
+
.sterling-dialog > .content > .header > .close .close-x::before,
|
|
86
96
|
.sterling-dialog > form > .content > .header > .close .close-x::before {
|
|
87
97
|
transform: rotate(45deg);
|
|
88
98
|
left: 0.125em;
|
|
89
99
|
}
|
|
90
100
|
|
|
101
|
+
.sterling-dialog > .content > .header > .close .close-x::after,
|
|
91
102
|
.sterling-dialog > form > .content > .header > .close .close-x::after {
|
|
92
103
|
transform: rotate(-45deg);
|
|
93
104
|
right: 0.125em;
|
|
94
105
|
}
|
|
95
106
|
|
|
107
|
+
.sterling-dialog > .content > .body,
|
|
96
108
|
.sterling-dialog > form > .content > .body {
|
|
97
109
|
padding: 1em;
|
|
98
110
|
}
|
|
99
111
|
|
|
112
|
+
.sterling-dialog > .content > .separator,
|
|
100
113
|
.sterling-dialog > form > .content > .separator {
|
|
101
114
|
background-color: var(--stsv-common__background-color--secondary);
|
|
102
115
|
height: var(--stsv-common__border-width);
|
|
103
116
|
margin: 0 0.25em;
|
|
104
117
|
}
|
|
105
118
|
|
|
119
|
+
.sterling-dialog > .content > .footer,
|
|
106
120
|
.sterling-dialog > form > .content > .footer {
|
|
107
121
|
padding: 0.5em 1em;
|
|
108
122
|
gap: 5px;
|
|
@@ -110,6 +124,7 @@
|
|
|
110
124
|
|
|
111
125
|
@media (prefers-reduced-motion) {
|
|
112
126
|
.sterling-dialog::backdrop,
|
|
127
|
+
.sterling-dialog > .content,
|
|
113
128
|
.sterling-dialog > form > .content {
|
|
114
129
|
transition: none;
|
|
115
130
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
.sterling-tree-chevron::after {
|
|
11
11
|
position: absolute;
|
|
12
|
-
content:
|
|
12
|
+
content: "";
|
|
13
13
|
top: 50%;
|
|
14
14
|
left: 50%;
|
|
15
15
|
width: 7px;
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
|
|
63
63
|
.sterling-tree-chevron.leaf::after {
|
|
64
64
|
animation: none;
|
|
65
|
-
content:
|
|
65
|
+
content: "";
|
|
66
66
|
position: absolute;
|
|
67
67
|
font: inherit;
|
|
68
68
|
left: 50%;
|