Skip to content

Commit 2627988

Browse files
SarmagedSarmaged
authored
release: version 2025.1.24 (#41)
1 parent 9af376e commit 2627988

12 files changed

+52
-150
lines changed

‎form.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "style-forge.form",
3-
"version": "2025.1.22",
3+
"version": "2025.1.24",
44
"description": "Style-Forge.Form: versatile library for easy form creation, validation, styling, and submission in web apps.",
55
"type": "module",
66
"main": "form.css",

‎src/button.css

+5-19
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,11 @@
1-
:root {
2-
--sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
3-
--sf-form-fz: 0.9375rem;
4-
--sf-disabled: 0.4;
5-
--sf-radius: 3px;
6-
--sf-form-p-input-block: 0.5em;
7-
--sf-form-p-input-inline: 0.5em;
8-
}
9-
101
.sf-button {
112
cursor: pointer;
123

134
display: inline-block;
145

15-
font-size: var(--sf-form-fz);
16-
font-family: var(--sf-form-ff);
17-
font-weight: 400;
6+
font-size: 15px;
7+
font-family: inherit;
8+
font-weight: inherit;
189
line-height: 1;
1910

2011
color: hsl(var(--sf-c-form-txt));
@@ -32,7 +23,7 @@
3223

3324
height: 32px;
3425

35-
padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline);
26+
padding: var(--sf-elm-py) var(--sf-elm-px);
3627

3728
box-sizing: border-box;
3829

@@ -54,13 +45,8 @@ a.sf-button:not([href]),
5445

5546
/* /// */
5647

57-
html.var .sf-button
58-
{
59-
font-size: 15px;
60-
font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
61-
48+
html.var .sf-button {
6249
border-radius: 3px;
63-
6450
padding: 8px;
6551
}
6652

‎src/checkbox-radio.css

-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
:root {
2-
--sf-form-fz: 0.9375rem;
3-
--sf-disabled: 0.4;
4-
}
5-
61
label.sf-radio, label.sf-checkbox { box-sizing: border-box }
72

83
label.sf-radio *,

‎src/color.css

-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
:root {
2-
--sf-form-fz: 0.9375rem;
3-
--sf-disabled: 0.4;
4-
}
5-
61
.sf-input[type='color'] {
72
cursor: pointer;
83

‎src/file.css

+6-17
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
1-
:root {
2-
--sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
3-
--sf-form-fz: 0.9375rem;
4-
--sf-disabled: 0.4;
5-
--sf-radius: 3px;
6-
}
7-
81
.sf-input[type='file'] {
92
cursor: pointer;
103

11-
font-size: var(--sf-form-fz);
12-
font-family: var(--sf-form-ff);
13-
font-weight: 400;
4+
font-size: 15px;
5+
font-family: inherit;
6+
font-weight: inherit;
147
line-height: 1;
158

169
border: 0;
@@ -27,9 +20,9 @@
2720

2821
display: inline-block;
2922

30-
font-size: var(--sf-form-fz);
31-
font-family: var(--sf-form-ff);
32-
font-weight: 400;
23+
font-size: 15px;
24+
font-family: inherit;
25+
font-weight: inherit;
3326
line-height: 1;
3427

3528
text-align: center;
@@ -61,13 +54,9 @@
6154
/* /// */
6255

6356
html.var .sf-input[type='file'] {
64-
font-size: 15px;
65-
font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
6657
padding: 0; /* required */
6758
}
6859
html.var .sf-input[type='file']::file-selector-button {
69-
font-size: 15px;
70-
font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
7160
color: hsl(0, 0%, 10%);
7261
background: hsla(0, 0%, 100%, 0.2);
7362
border: 1px solid hsla(0, 0%, 10%, 0.2);

‎src/input.css

+5-23
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,3 @@
1-
:root {
2-
--sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
3-
4-
--sf-form-fz: 0.9375rem;
5-
6-
--sf-disabled: 0.4;
7-
8-
--sf-radius: 3px;
9-
10-
--sf-form-p-input-block: 0.5em;
11-
--sf-form-p-input-inline: 0.5em;
12-
}
13-
141
.sf-input *,
152
.sf-input *::before,
163
.sf-input *::after
@@ -21,9 +8,9 @@
218
.sf-input {
229
cursor: auto;
2310

24-
font-size: var(--sf-form-fz);
25-
font-family: var(--sf-form-ff);
26-
font-weight: 400;
11+
font-size: 15px;
12+
font-family: inherit;
13+
font-weight: inherit;
2714
line-height: 1;
2815

2916
text-transform: none;
@@ -41,7 +28,7 @@
4128
width: 100%;
4229
height: 32px;
4330

44-
padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline);
31+
padding: var(--sf-elm-py) var(--sf-elm-px);
4532

4633
box-sizing: border-box;
4734
vertical-align: top;
@@ -89,12 +76,7 @@
8976

9077
/* /// */
9178

92-
html.var .sf-input {
93-
font-size: 15px;
94-
font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
95-
96-
padding: 8px;
97-
}
79+
html.var .sf-input { padding: 8px }
9880

9981
html.var .sf-input:not([class*='sf-c-']) {
10082
color: hsl(0, 0%, 10%);

‎src/select.css

+7-24
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,15 @@
1-
:root {
2-
--sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
3-
--sf-form-fz: 0.9375rem;
4-
--sf-lh-normal: 1.1875;
5-
--sf-disabled: 0.4;
6-
--sf-radius: 3px;
7-
--sf-form-p-input-block: 0.5em;
8-
--sf-form-p-input-inline: 0.5em;
9-
}
10-
111
.sf-select,
122
.sf-select option
133
{
14-
font-size: var(--sf-form-fz);
15-
font-family: var(--sf-form-ff);
16-
font-weight: 400;
17-
line-height: var(--sf-lh-normal);
4+
font-size: 15px;
5+
font-family: inherit;
6+
font-weight: inherit;
187

198
text-transform: none;
209
}
21-
.sf-select { padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline) }
22-
.sf-select option { padding: calc(var(--sf-form-p-input-block) / 2) var(--sf-form-p-input-inline) }
23-
.sf-select optgroup { padding: calc(var(--sf-form-p-input-block) / 2) 0 0 }
10+
.sf-select { padding: var(--sf-elm-py) var(--sf-elm-px) }
11+
.sf-select option { padding: calc(var(--sf-elm-py) / 2) var(--sf-elm-px) }
12+
.sf-select optgroup { padding: calc(var(--sf-elm-py) / 2) 0 0 }
2413

2514
.sf-select {
2615
cursor: pointer;
@@ -40,7 +29,7 @@
4029

4130
.sf-select:not([multiple]) {
4231
height: 32px;
43-
padding: 0 var(--sf-form-p-input-inline);
32+
padding: 0 var(--sf-elm-px);
4433
border-width: 0 0 1px;
4534
}
4635

@@ -61,12 +50,6 @@
6150

6251
/* /// */
6352

64-
html.var .sf-select,
65-
html.var .sf-select option
66-
{
67-
font-size: 15px;
68-
font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
69-
}
7053
html.var .sf-select:not([multiple]) { padding: 0 0 0 8px }
7154
html.var .sf-select { padding: 8px 0 8px 8px }
7255

‎src/switch.css

+8-21
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
:root {
2-
--sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
3-
--sf-form-fz: 0.9375rem;
4-
--sf-form-fz-small: 0.75rem;
5-
--sf-disabled: 0.4;
6-
--sf-form-p-input-block: 0.5em;
7-
--sf-form-p-input-inline: 0.5em;
8-
--sf-form-switch-size: 1rem;
9-
}
10-
111
.sf-switch { box-sizing: border-box }
122

133
.sf-switch.multiple *,
@@ -16,15 +6,17 @@
166
{ box-sizing: inherit }
177

188
.sf-switch {
19-
font-size: var(--sf-form-fz);
20-
font-family: var(--sf-form-ff);
21-
font-weight: 400;
9+
font-size: 15px;
10+
font-family: inherit;
11+
font-weight: inherit;
2212
line-height: 1;
2313

2414
text-transform: none;
2515
}
2616

2717
label.sf-switch input[type='checkbox'] {
18+
--sf-form-switch-size: 1rem;
19+
2820
position: relative;
2921

3022
appearance: none;
@@ -88,12 +80,12 @@ label.sf-switch input[type='checkbox'] ~ *
8880
.sf-switch.multiple .sf-switch-toggle * { display: inline-block }
8981
.sf-switch.multiple .sf-switch-toggle label { position: relative }
9082
.sf-switch.multiple .sf-switch-toggle span {
91-
font-size: var(--sf-form-fz-small);
83+
font-size: 12px;
9284
text-align: center;
9385

9486
min-width: 32px;
9587

96-
padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline);
88+
padding: var(--sf-elm-py) var(--sf-elm-px);
9789

9890
background: hsl(var(--sf-c-form-bd) / 5%);
9991
}
@@ -137,7 +129,7 @@ label.sf-switch input[type='checkbox'] ~ *
137129
.sf-switch.multiple.vert .sf-switch-toggle { flex-flow: column }
138130

139131
.sf-switch.multiple .sf-switch-description {
140-
font-size: var(--sf-form-fz-small);
132+
font-size: 12px;
141133
margin: 0.5em 0 0;
142134
padding: 0 0 0.5em;
143135
}
@@ -174,11 +166,6 @@ label.sf-switch input[type='checkbox'] ~ *
174166

175167
/* /// */
176168

177-
html.var .sf-switch {
178-
font-size: 15px;
179-
font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
180-
}
181-
182169
html.var label.sf-switch input[type='checkbox'] {
183170
width: 16px;
184171
height: 16px;

‎src/textarea.css

+5-17
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,7 @@
1-
:root {
2-
--sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
3-
--sf-form-fz: 0.9375rem;
4-
--sf-disabled: 0.4;
5-
--sf-radius: 3px;
6-
--sf-form-p-input-block: 0.5em;
7-
--sf-form-p-input-inline: 0.5em;
8-
}
9-
101
.sf-textarea {
11-
font-size: var(--sf-form-fz);
12-
font-family: var(--sf-form-ff);
13-
font-weight: 400;
2+
font-size: 15px;
3+
font-family: inherit;
4+
font-weight: inherit;
145
line-height: 1.499535;
156

167
color: hsl(var(--sf-c-form-txt));
@@ -22,9 +13,9 @@
2213

2314
width: 100%;
2415
max-width: 100%;
25-
min-height: calc((1.499535em + 2px + var(--sf-form-p-input-block)) * 4);
16+
min-height: calc((1.499535em + 2px + var(--sf-elm-py)) * 4);
2617

27-
padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline);
18+
padding: var(--sf-elm-py) var(--sf-elm-px);
2819

2920
border-radius: var(--sf-radius);
3021

@@ -53,9 +44,6 @@
5344
/* /// */
5445

5546
html.var .sf-textarea {
56-
font-size: 15px;
57-
font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
58-
5947
min-height: calc((1.499535em + 2px + 0.5em) * 4);
6048

6149
padding: 8px;

‎src/validate.css

+6-15
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,15 @@
1-
:root {
2-
--sf-form-ff: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
3-
--sf-form-fz-small: 0.75rem;
4-
--sf-lh-normal: 1.1875;
5-
--sf-disabled: 0.4;
6-
}
7-
81
.sf-description, .sf-invalid, .sf-valid {
92
color: hsl(var(--sf-c-form-txt) / 40%);
103

11-
font-size: var(--sf-form-fz-small);
12-
font-family: var(--sf-form-ff);
4+
font-size: 12px;
5+
font-family: inherit;
136
font-weight: 300;
147
line-height: 1;
158

169
text-transform: none;
1710

18-
margin: 0.5em 0 0;
19-
padding: 0 0 0.5em;
11+
margin-top: 0.5em;
12+
padding-bottom: 0.5em;
2013
}
2114

2215
.sf-description, .sf-invalid, .sf-valid { display: none }
@@ -81,7 +74,8 @@ label.validates.sf-checkbox .sf-description,
8174
label.validates.sf-checkbox .sf-valid,
8275
label.validates.sf-checkbox .sf-invalid {
8376
width: 100%;
84-
line-height: var(--sf-lh-normal);
77+
/* --sf-lh-normal: 1.1875; */
78+
/* line-height: var(--sf-lh-normal); */
8579
}
8680

8781
form.validates:invalid .sf-button[type='submit'] {
@@ -97,9 +91,6 @@ html.var .sf-description,
9791
html.var .sf-invalid,
9892
html.var .sf-valid {
9993
color: hsla(0, 0%, 10%, 0.4);
100-
101-
font-size: 12px;
102-
font-family: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
10394
}
10495

10596
html.var label.validates.sf-switch .sf-description,

0 commit comments

Comments
 (0)