semantic-forms 5.1.5 → 5.1.6
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/CHANGELOG.md +10 -0
- package/dist/semantic-forms.cjs +26 -4
- package/dist/semantic-forms.cjs.map +1 -1
- package/dist/semantic-forms.css +96 -4
- package/dist/semantic-forms.css.map +1 -1
- package/dist/semantic-forms.js +26 -4
- package/dist/semantic-forms.js.map +1 -1
- package/dist/semantic-forms.min.js +1 -1
- package/dist/semantic-forms.min.js.map +1 -1
- package/dist/semantic-forms.min.mjs +1 -1
- package/dist/semantic-forms.min.mjs.map +1 -1
- package/dist/semantic-forms.mjs +26 -4
- package/dist/semantic-forms.mjs.map +1 -1
- package/docs/statics/js/semantic-forms-main.js +2 -2
- package/docs/statics/pages/fullDemo.html +18 -6
- package/docs/statics/pages/usage.html +6 -4
- package/package.json +1 -1
- package/semanticForms.js +76 -7
- package/semanticForms.scss +32 -3
package/semanticForms.scss
CHANGED
|
@@ -65,7 +65,7 @@ form.semanticForms, form.semanticForms.light, table.semanticForms {
|
|
|
65
65
|
@media (prefers-color-scheme: dark) {
|
|
66
66
|
html:not(.light) {
|
|
67
67
|
body:not(.light) {
|
|
68
|
-
form.semanticForms, table.semanticForms {
|
|
68
|
+
form.semanticForms:not(.light), table.semanticForms:not(.light) {
|
|
69
69
|
@include dark-mode;
|
|
70
70
|
}
|
|
71
71
|
}
|
|
@@ -79,6 +79,10 @@ html:not(.light) {
|
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
|
+
|
|
83
|
+
form.semanticForms.dark, table.semanticForms.dark {
|
|
84
|
+
@include dark-mode;
|
|
85
|
+
}
|
|
82
86
|
// #endregion
|
|
83
87
|
|
|
84
88
|
form.semanticForms,
|
|
@@ -128,6 +132,10 @@ table.semanticForms.light {
|
|
|
128
132
|
touch-action: manipulation;
|
|
129
133
|
outline: none;
|
|
130
134
|
|
|
135
|
+
&:not([type="range"]):placeholder-shown {
|
|
136
|
+
padding: 6px 20px;
|
|
137
|
+
}
|
|
138
|
+
|
|
131
139
|
&:not([type="range"]) {
|
|
132
140
|
padding: 6px 30px 6px 20px;
|
|
133
141
|
}
|
|
@@ -136,6 +144,11 @@ table.semanticForms.light {
|
|
|
136
144
|
padding: 6px 55px 6px 20px;
|
|
137
145
|
}
|
|
138
146
|
|
|
147
|
+
&[type="range"],
|
|
148
|
+
&[type="color"] {
|
|
149
|
+
cursor: pointer;
|
|
150
|
+
}
|
|
151
|
+
|
|
139
152
|
&[disabled] {
|
|
140
153
|
cursor: not-allowed;
|
|
141
154
|
opacity: 0.5;
|
|
@@ -226,9 +239,9 @@ table.semanticForms.light {
|
|
|
226
239
|
|
|
227
240
|
textarea {
|
|
228
241
|
resize: vertical;
|
|
242
|
+
line-height: 1.5;
|
|
229
243
|
width: 100%;
|
|
230
244
|
min-height: 38px;
|
|
231
|
-
height: 100px;
|
|
232
245
|
}
|
|
233
246
|
|
|
234
247
|
input[type="search"] {
|
|
@@ -305,7 +318,8 @@ table.semanticForms.light {
|
|
|
305
318
|
max-width: max-content;
|
|
306
319
|
background-image: linear-gradient(to bottom, var(--semanticFormsButtonGradientLight) 0%, var(--semanticFormsButtonGradientDark) 100%);
|
|
307
320
|
background-origin: border-box; // prevents graphical errors in Firefox
|
|
308
|
-
border:
|
|
321
|
+
border: 1px var(--semanticFormsButtonGradientDark) solid;
|
|
322
|
+
corner-shape: squircle;
|
|
309
323
|
border-radius: 20px;
|
|
310
324
|
padding: 5px 25px;
|
|
311
325
|
font-size: 100%;
|
|
@@ -537,6 +551,10 @@ table.semanticForms.light {
|
|
|
537
551
|
// shift text down to match center
|
|
538
552
|
padding-top: 2px;
|
|
539
553
|
font-size: var(--semanticFormsInputFontSize);
|
|
554
|
+
cursor: pointer;
|
|
555
|
+
display: flex;
|
|
556
|
+
align-items: center;
|
|
557
|
+
gap: 5px;
|
|
540
558
|
|
|
541
559
|
span.required {
|
|
542
560
|
cursor: help;
|
|
@@ -547,6 +565,10 @@ table.semanticForms.light {
|
|
|
547
565
|
span.help {
|
|
548
566
|
cursor: help;
|
|
549
567
|
pointer-events: auto;
|
|
568
|
+
|
|
569
|
+
svg {
|
|
570
|
+
width: 80%;
|
|
571
|
+
}
|
|
550
572
|
}
|
|
551
573
|
}
|
|
552
574
|
|
|
@@ -676,6 +698,9 @@ table.semanticForms.light {
|
|
|
676
698
|
user-select: none;
|
|
677
699
|
color: var(--semanticFormsPlaceholderColor);
|
|
678
700
|
touch-action: manipulation;
|
|
701
|
+
display: flex;
|
|
702
|
+
align-items: center;
|
|
703
|
+
gap: 5px;
|
|
679
704
|
|
|
680
705
|
// TODO: same as below
|
|
681
706
|
// &:has(span.help) {
|
|
@@ -703,6 +728,10 @@ table.semanticForms.light {
|
|
|
703
728
|
// right: 0;
|
|
704
729
|
cursor: help;
|
|
705
730
|
pointer-events: auto;
|
|
731
|
+
|
|
732
|
+
svg {
|
|
733
|
+
width: 80%;
|
|
734
|
+
}
|
|
706
735
|
}
|
|
707
736
|
|
|
708
737
|
// // TODO: cover the case where an input is required AND has help text
|