clairity.css 0.4.0 → 0.5.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 8d704d6af159d7e27bc4335c02879082a51cd44de52386ba389e443f5f6c3b00
4
- data.tar.gz: 5aeb1befabeee3ca01620860a7bbf07c4295b5b798d2528b1d5eb1eb883590d4
3
+ metadata.gz: 356b88afa2ad21ee85317b10189c1153c359346cb1e6b3a56275d6b551383177
4
+ data.tar.gz: e9d8ed00fa08e18572626aacf722bf76fff9cbb048a56de6f7f4d8291bfe661d
5
5
  SHA512:
6
- metadata.gz: 8af3fc784433f394887e2b785017c18654bb117bf5ed19e456d83f9b465c769f500b56ef60c2f8260fe1db56fed0a4c1a2c850be4b4a2deb1e51f7d013cfb044
7
- data.tar.gz: 06cdfb1f48eab9b1f3c9a5db6bdb4108be49a07b043c173e1267094522bdfb42f35b2ea4c4273f4e63dc3b66ac8e86337dcd78b52132332ef907403f02f19da5
6
+ metadata.gz: eb93dc1feacfc0b6086eb764538057f1355f33d45f3acad38c5939d8bf5529e053a2bd54565f094170f8c56a357362d7ab816efd06c83893772b3b397cdd7b9e
7
+ data.tar.gz: a13a003c9a64b3b7ad3f78e6be8d81c228b7c5cdaf03679c1e3160244820662624a45c702765532ce44c83b096f98a2ae48e962570b47f6edf3fb299d97279ef
data/CHANGELOG.md CHANGED
@@ -29,6 +29,30 @@ This section is for recording changes committed since the last release.
29
29
  ### Security
30
30
 
31
31
 
32
+ ## [v0.5.0] - 20230628
33
+
34
+ ### Added
35
+
36
+ * [icons.css]: `--i-crown` icon and the associated icon class in [classes.css]
37
+ * [cosmetic.css]: swap the grid placement of radio/checkboxes & their labels
38
+ * `components.html`: add a long label to one of the form fields and a checkbox field with a trailing label for visualization/testing
39
+
40
+
41
+ ### Changed
42
+
43
+ * [base.css]: make `h5` and `h6` headers use `--regular` instead of `--bold` font weight for better visual balance with other heading styles
44
+ * also made the same change for `.h5` and `.h6` in [classes.css]
45
+ * [components.css]: from [cosmetic.css] (and originally in [states.css] for some reason), moved fieldset grid styles for browsers supporting `:has()` here
46
+ * [shims.css]: from [cosmetic.css] (and originally in [states.css] for some reason), moved form styles related to sectioning elements (`<section>`, `<p>`, and `<div>`) here
47
+ * in modern css (particularly with the advent of `:has()` and container queries), we shouldn't need these extra container divs, so [shims.css] is the right place to put them, since they're still not uncommon but shouldn't be encouraged going forward
48
+
49
+
50
+ ### Fixed
51
+
52
+ * fixed alignment of bare checkboxes next to labels in the standard form grid, which got out of sync when labels became `inline-grid` with a default height
53
+ * [classes.css]: re-added common `.h1`, `.h2`, `.h3`, `.h4`, `.h5`, `.h6` styling (these were removed from [cosmetic.css] at some point, to be moved to a more appropriate spot, and then not added back in again)
54
+
55
+
32
56
  ## [v0.4.0] - 20230622
33
57
 
34
58
  ### Added
@@ -682,7 +706,8 @@ After a number of diversions, including developing a (as yet unreleased) Jekyll
682
706
  - `palette.css` - separate out the color scheme into its own css file
683
707
 
684
708
 
685
- [unreleased]: https://github.com/clairity/clairity.css/compare/v0.4.0...HEAD
709
+ [unreleased]: https://github.com/clairity/clairity.css/compare/v0.5.0...HEAD
710
+ [v0.5.0]: https://github.com/clairity/clairity.css/compare/v0.4.0...v0.5.0
686
711
  [v0.4.0]: https://github.com/clairity/clairity.css/compare/v0.3.1...v0.4.0
687
712
  [v0.3.1]: https://github.com/clairity/clairity.css/compare/v0.3.0...v0.3.1
688
713
  [v0.3.0]: https://github.com/clairity/clairity.css/compare/v0.2.0...v0.3.0
@@ -168,7 +168,7 @@ h3 { --min-font: 1.375; --max-font: 1.667; }
168
168
  h4 { --min-font: 1.25; --max-font: 1.5; }
169
169
  h5 { --min-font: 1.125; --max-font: 1.25; }
170
170
  h6 { --min-font: 1; --max-font: 1.125; }
171
- h5, h6 { font-weight: var(--bold); } /* lighter --heading colors
171
+ h5, h6 { font-weight: var(--regular); } /* lighter --heading colors
172
172
  typically need bolder font-weight for the smallest headings */
173
173
 
174
174
 
@@ -72,19 +72,26 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
72
72
 
73
73
 
74
74
  /* -----------------------------------------------------------------------------
75
- // #headings -
75
+ // #headings #h1 #h2 #h3 #h4 #h5 #h6 - allows changing visual heading hierarchy
76
+ independent of document outline. keep values in sync with those in base.css
76
77
  // -------------------------------------------------------------------------- */
77
78
 
78
- /* #h1 #h2 #h3 #h4 #h5 #h6 - allows changing visual heading hierarchy
79
- independent of document outline. keep values in sync with those in base.css
80
- .......................................................................... */
79
+ .h1, .h2, .h3, .h4, .h5, .h6 {
80
+ color: var(--heading);
81
+ font-weight: var(--lighter);
82
+ line-height: var(--compact);
83
+ margin: var(--margin);
84
+ font-size: var(--clamp, calc(var(--max-font) * 1rem));
85
+ }
86
+
87
+ /* fluid type scale settings for headings */
81
88
  .h1 { --min-font: 1.75; --max-font: 2.5; }
82
89
  .h2 { --min-font: 1.5; --max-font: 2; }
83
90
  .h3 { --min-font: 1.375; --max-font: 1.667; }
84
91
  .h4 { --min-font: 1.25; --max-font: 1.5; }
85
92
  .h5 { --min-font: 1.125; --max-font: 1.25; }
86
93
  .h6 { --min-font: 1; --max-font: 1.125; }
87
- .h5, .h6 { font-weight: var(--bold); }
94
+ .h5, .h6 { font-weight: var(--regular); }
88
95
 
89
96
  /* dampen the prominence of links in headings; keep in sync with cosmetic.css */
90
97
  :where(.h1, .h2, .h3, .h4, .h5, .h6) :is(a, :visited) {
@@ -190,6 +197,7 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
190
197
  .i-burger { --icon: var(--i-burger); }
191
198
  .i-check { --icon: var(--i-check); }
192
199
  .i-chevron { --icon: var(--i-chevron); }
200
+ .i-crown { --icon: var(--i-crown); }
193
201
  .i-dash { --icon: var(--i-dash); }
194
202
  .i-edit { --icon: var(--i-edit); }
195
203
  .i-home-edit { --icon: var(--i-home-edit); }
@@ -906,8 +906,11 @@ selectmenu::part(listbox) {
906
906
  }
907
907
  }
908
908
 
909
- /* #form #grid - general purpose 2-column grid, as used on forms by default
910
- // .......................................................................... */
909
+
910
+ /* -----------------------------------------------------------------------------
911
+ // #form #grid - general purpose 2-column grid, as used on forms by default
912
+ // -------------------------------------------------------------------------- */
913
+
911
914
  .form.grid {
912
915
  display: grid;
913
916
  grid-template-columns: [labels full-start] 3fr [elements] 7fr [full-end];
@@ -939,6 +942,77 @@ selectmenu::part(listbox) {
939
942
  }
940
943
 
941
944
 
945
+ /* -----------------------------------------------------------------------------
946
+ // #fieldset #grid - form grid for fieldsets for browsers that support :has()
947
+ // -------------------------------------------------------------------------- */
948
+
949
+ @supports selector(:has(*)) {
950
+ /* set up a form grid on fieldsets that include form elements */
951
+ fieldset:where(:has(label, input, button, textarea, select, fieldset)) {
952
+ margin: 0;
953
+ display: grid;
954
+ grid-template-columns:[labels full-start] 3fr [elements] 7fr [full-end];
955
+ gap: var(--m);
956
+ }
957
+ /* for fieldsets containing <p> tags that encompass checkboxes/radios, but no
958
+ other form inputs, remove extraneous gap between label and element */
959
+ fieldset:where(:has(p :is([type='checkbox'], [type='radio'])):not(:has(select,
960
+ textarea, [type="text"], [type="date"], [type="email"], [type="password"],
961
+ [type="datetime-local"], [type="search"]))) {
962
+ row-gap: 0;
963
+ }
964
+ /* since grid properties fall through p tags, assign margin-top to first child
965
+ elements to get a gap between paragraphs of different input types */
966
+ fieldset p:has([type='checkbox'], [type='radio']) + p:has([type='radio'],
967
+ [type='checkbox']) :is([type='radio'], [type='checkbox'],
968
+ label):first-of-type {
969
+ margin-top: var(--m);
970
+ }
971
+ /* chrome/edge doesn't support subgrid, so pierce the grid barrier instead */
972
+ fieldset :where(p:has(label, input, button, textarea, select, fieldset)) {
973
+ display: contents;
974
+ }
975
+ /* labels go on the labels gridline */
976
+ :where(fieldset :is(p, div)) label {
977
+ grid-column: labels;
978
+ }
979
+ /* lists that contain radios/checkboxes go on the elements gridline */
980
+ form:has(fieldset :where(select, textarea, [type="text"], [type="date"],
981
+ [type="email"], [type="password"], [type="datetime-local"],
982
+ [type="search"])) fieldset ul:has(li label :where([type='radio'],
983
+ [type='checkbox'])) {
984
+ grid-column: elements;
985
+ }
986
+
987
+ /* inputs on the elements gridline; pad right side away from fieldset line */
988
+ :where(fieldset) :where(p):has(input, button, textarea, select, fieldset)
989
+ :where(input:not(:is([type='checkbox'],[type='radio']), button,
990
+ textarea, select, fieldset)) {
991
+ grid-column: elements;
992
+ margin-right: var(--m);
993
+ }
994
+ /* for radios & checks, invert the placement of the input and label */
995
+ /* NOTE: align-self & justify-self are not properly supported for grid by IE
996
+ anyway, so just use the combined property `place-self` here */
997
+ :where(fieldset) :where(p):has(label) :where([type='checkbox'],
998
+ [type='radio']):has(+ label) {
999
+ grid-column: labels;
1000
+ place-self: center end;
1001
+ }
1002
+ :where(fieldset p:has(label) :is([type='checkbox'],
1003
+ [type='radio']):has(+ label)) + label {
1004
+ grid-column: elements;
1005
+ justify-self: start;
1006
+ }
1007
+ /* for paragraph tags that aren't form element containers, span the grid */
1008
+ :where(fieldset) :where(p, div, h2, h3, h4, h5, h6):not(:has(label, input,
1009
+ button, textarea, select, fieldset)) {
1010
+ display: block;
1011
+ grid-column: full;
1012
+ }
1013
+ }
1014
+
1015
+
942
1016
  /* -----------------------------------------------------------------------------
943
1017
  // #progressbar - a circular progress bar component - from almond.css
944
1018
  // -------------------------------------------------------------------------- */
@@ -49,7 +49,8 @@ nav > menu > li { display: inline; } /* only direct children, as menu
49
49
  margin: 0;
50
50
  }
51
51
 
52
- /* dampen the prominence of links in headings */
52
+ /* dampen the prominence of links in headings - needs to be [0010] specificity
53
+ to override the :visited default */
53
54
  :where(h1, h2, h3, h4, h5, h6) :is(a, :visited) {
54
55
  color: var(--heading);
55
56
  font-weight: unset;
@@ -149,19 +150,14 @@ tfoot :where(td, th) {box-shadow: inset 0 2px var(--secondary, --neutral);}
149
150
  // #forms - for submitting data to the server
150
151
  // -------------------------------------------------------------------------- */
151
152
 
152
- /* #form #section #p #div - would prefer subgrid to have containers layout
153
- contents on the grid, but its not yet supported by chrome/edge. use
154
- display: contents; to pierce the grid instead - [0002] specificity
155
- // .......................................................................... */
156
- form section, form p, form div { /* TODO: should be a shim eventually */
157
- display: contents; /* make contents align to form grid */
158
- margin: 0; /* let contents, not container, set spacing */
159
- container-type: unset; /*let contents adjust to outer form container*/
160
- }
161
153
  /* #h2 - make form headers/paragraphs span the full width - [0002] specificity*/
162
154
  form h2, form p { grid-column: full; }
163
155
 
164
- /* #fieldset grid should span full form grid in narrower form containers
156
+ /* #form #ul - since lists in forms typically list out form controls, remove
157
+ the bullet styling from them - [0002] specificity */
158
+ form ul { list-style: none; }
159
+
160
+ /* #fieldset should span full form grid in narrower form containers
165
161
  // .......................................................................... */
166
162
  @container form (width <= 35rem) {
167
163
  fieldset {
@@ -177,121 +173,19 @@ form h2, form p { grid-column: full; }
177
173
  }
178
174
  }
179
175
 
180
- /* #label becomes inline-grid to take full row --height - EXPERIMENTAL
181
- // TODO: fix label-to-textarea baseline alignment, and radio/checkbox height
176
+ fieldset > :last-child { /* #fieldset - [0002] specificity */
177
+ margin-bottom: 0;
178
+ }
179
+
180
+ /* #label becomes inline-grid to take full row --height - EXPERIMENTAL
181
+ // TODO: fix label-to-textarea baseline alignment
182
182
  // .......................................................................... */
183
183
  label {
184
184
  display: inline-grid;
185
185
  grid-auto-flow: column;
186
186
  height: var(--height);
187
- align-content: center;
188
- }
189
-
190
- /* TEMP: moved from states.css ++++++++++++++++++++++++++++++++++++++++++++++ */
191
- /* #form #ul - since lists in forms typically list out form controls, remove
192
- the bullet styling from them - [0002] specificity */
193
- form ul { list-style: none; }
194
-
195
- /* #form #section #p #div - extend the subgrid into common, but strictly
196
- // non-semantic, container elements used within forms - subgrid is firefox 71+ &
197
- // safari 16+ only 20221001
198
- // .......................................................................... */
199
- @supports (grid-template-columns: subgrid) {
200
- /* :where() can be used here, since @supports is also a recent addition */
201
- form :where(section, p, div) { /* [0001] specificity */
202
- grid-column: full;
203
- display: grid;
204
- grid-template-columns: subgrid;
205
- gap: inherit;
206
- }
207
-
208
- /* TEMP: swap the grid placement of radio/checkboxes & their labels */
209
- :where(form) :where(section, p, div) :is([type='checkbox'], [type='radio']) {
210
- grid-column: labels;
211
- justify-self: right;
212
- }
213
- :where(form) :is(:where(section, p, div)
214
- :is([type='checkbox'], [type='radio'])+label) {
215
- grid-column: elements;
216
- justify-self: left;
217
- }
218
- }
219
- /*form section :where(h1,h2,h3,h4,h5,h6) + p { display: block; }*/
220
-
221
- /* chrome/edge doesn't support subgrid yet but does support :has() & :where() */
222
- @supports selector(:has(*)) {
223
- /* set up a form grid on fieldsets that include form elements */
224
- fieldset:where(:has(label, input, button, textarea, select, fieldset)) {
225
- margin: 0;
226
- display: grid;
227
- grid-template-columns:[labels full-start] 3fr [elements] 7fr [full-end];
228
- gap: var(--m);
229
- }
230
- /* for fieldsets containing <p> tags that encompass checkboxes/radios, but no
231
- other form inputs, remove extraneous gap between label and element */
232
- fieldset:where(:has(p :is([type='checkbox'], [type='radio'])):not(:has(select,
233
- textarea, [type="text"], [type="date"], [type="email"], [type="password"],
234
- [type="datetime-local"], [type="search"]))) {
235
- row-gap: 0;
236
- }
237
- /* since grid properties fall through p tags, assign margin-top to first child
238
- elements to get a gap between paragraphs of different input types */
239
- fieldset p:has([type='checkbox'], [type='radio']) + p:has([type='radio'],
240
- [type='checkbox']) :is([type='radio'], [type='checkbox'],
241
- label):first-of-type {
242
- margin-top: var(--m);
243
- }
244
- /* chrome/edge doesn't support subgrid, so pierce the grid barrier instead */
245
- fieldset :where(p:has(label, input, button, textarea, select, fieldset)) {
246
- display: contents;
247
- }
248
- /* labels go on the labels gridline */
249
- :where(fieldset :is(p, div)) label {
250
- grid-column: labels;
251
- }
252
- /* lists that contain radios/checkboxes go on the elements gridline */
253
- form:has(fieldset :where(select, textarea, [type="text"], [type="date"],
254
- [type="email"], [type="password"], [type="datetime-local"],
255
- [type="search"])) fieldset ul:has(li label :where([type='radio'],
256
- [type='checkbox'])) {
257
- grid-column: elements;
258
- }
259
-
260
- /* inputs on the elements gridline; pad right side away from fieldset line */
261
- :where(fieldset) :where(p):has(input, button, textarea, select, fieldset)
262
- :where(input:not(:is([type='checkbox'],[type='radio']), button,
263
- textarea, select, fieldset)) {
264
- grid-column: elements;
265
- margin-right: var(--m);
266
- }
267
- /* for radios & checks, invert the placement of the input and label */
268
- /* NOTE: align-self & justify-self are not properly supported for grid by IE
269
- anyway, so just use the combined property `place-self` here */
270
- :where(fieldset) :where(p):has(label) :where([type='checkbox'],
271
- [type='radio']):has(+ label) {
272
- grid-column: labels;
273
- place-self: center end;
274
- }
275
- :where(fieldset p:has(label) :is([type='checkbox'],
276
- [type='radio']):has(+ label)) + label {
277
- grid-column: elements;
278
- justify-self: start;
279
- }
280
- /* for paragraph tags that aren't form element containers, span the grid */
281
- :where(fieldset) :where(p, div, h2, h3, h4, h5, h6):not(:has(label, input,
282
- button, textarea, select, fieldset)) {
283
- display: block;
284
- grid-column: full;
285
- }
187
+ align-content: center; /* works with inline-grid */
286
188
  }
287
- /*form :where(fieldset, input, select, button, input[type="button"]) {
288
- grid-column: elements;
289
- }*/
290
-
291
- fieldset > :last-child {
292
- margin-bottom: 0;
293
- }
294
- /* END: moved from states.css +++++++++++++++++++++++++++++++++++++++++++++++ */
295
189
 
296
190
 
297
191
  /* -----------------------------------------------------------------------------
@@ -323,12 +217,23 @@ label:where(:has(+ [multiple],+ textarea,+ select[size])){/*[0001] specificity*/
323
217
  only understands simple :has() selectors, so can't use the direct descendent
324
218
  selector > here until it understands it - [0011] specificity
325
219
  // .......................................................................... */
326
- label:has([type="checkbox"]) {
220
+ label:has([type='checkbox']) {
327
221
  grid-column: elements;
328
222
  justify-self: left;
329
223
  }
330
224
 
331
- label + [type="image"] {
225
+ /* swap the grid placement of radio/checkboxes & their labels */
226
+ :where(form) :is([type='checkbox'], [type='radio']) {
227
+ grid-column: labels;
228
+ place-self: center end;
229
+ }
230
+
231
+ :where(form) :is([type='checkbox'], [type='radio']) + label) {
232
+ grid-column: elements;
233
+ justify-self: left;
234
+ }
235
+
236
+ label + [type='image'] {
332
237
  max-height: var(--height);
333
238
  object-fit: contain;
334
239
  vertical-align: middle;
@@ -23,6 +23,7 @@
23
23
  --i-browser: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>browser</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='4' y='4' width='16' height='16' rx='1' /><line x1='4' y1='8' x2='20' y2='8' /><line x1='8' y1='4' x2='8' y2='8' /></svg>");
24
24
  --i-calendar: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>calendar</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='4' y='5' width='16' height='16' rx='2' /><line x1='16' y1='3' x2='16' y2='7' /><line x1='8' y1='3' x2='8' y2='7' /><line x1='4' y1='11' x2='20' y2='11' /><line x1='11' y1='15' x2='12' y2='15' /><line x1='12' y1='15' x2='12' y2='18' /></svg>");
25
25
  --i-calendar-time: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>calendar time</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4' /><circle cx='18' cy='18' r='4' /><path d='M15 3v4' /><path d='M7 3v4' /><path d='M3 11h16' /><path d='M18 16.496v1.504l1 1' /></svg>");
26
+ --i-crown: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>crown</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M12 6l4 6l5 -4l-2 10h-14l-2 -10l5 4z' /></svg>");
26
27
  --i-external-link: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>external link</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5' /><line x1='10' y1='14' x2='20' y2='4' /><polyline points='15 4 20 4 20 9' /></svg>");
27
28
  --i-edit: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>edit</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1' /><path d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z' /><path d='M16 5l3 3' /></svg>");
28
29
  --i-file: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><title>file</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M14 3v4a1 1 0 0 0 1 1h4' /><path d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z' /></svg>");
@@ -34,6 +34,13 @@ body > *:not(.fluid) {
34
34
  }}
35
35
 
36
36
 
37
+ /* -----------------------------------------------------------------------------
38
+ // #forms -
39
+ // -------------------------------------------------------------------------- */
40
+
41
+
42
+
43
+
37
44
  /* -----------------------------------------------------------------------------
38
45
  // #card -
39
46
  // -------------------------------------------------------------------------- */
@@ -6,6 +6,48 @@
6
6
 
7
7
 
8
8
 
9
+ /* -----------------------------------------------------------------------------
10
+ // #forms - for submitting data to the server
11
+ // -------------------------------------------------------------------------- */
12
+
13
+
14
+ /* #form #section #p #div - would prefer subgrid to have containers layout
15
+ contents on the grid, but its not yet supported by chrome/edge. use
16
+ display: contents; to pierce the grid instead - [0002] specificity
17
+ // .......................................................................... */
18
+ form section, form p, form div {
19
+ display: contents; /* make contents align to form grid */
20
+ margin: 0; /* let contents, not container, set spacing */
21
+ container-type: unset; /*let contents adjust to outer form container*/
22
+ }
23
+
24
+ /* #form #section #p #div - extend the subgrid into common, but strictly
25
+ non-semantic, container elements used within forms - subgrid is firefox 71+ &
26
+ safari 16+ only 20221001
27
+ // .......................................................................... */
28
+ @supports (grid-template-columns: subgrid) {
29
+ /* :where() can be used here, since @supports is also a recent addition */
30
+ form :where(section, p, div) { /* [0001] specificity */
31
+ grid-column: full;
32
+ display: grid;
33
+ grid-template-columns: subgrid;
34
+ gap: inherit;
35
+ }
36
+
37
+ /* TEMP: swap the grid placement of radio/checkboxes & their labels */
38
+ :where(form) :where(section, p, div) :is([type='checkbox'], [type='radio']) {
39
+ grid-column: labels;
40
+ justify-self: right;
41
+ }
42
+ :where(form) :is(:where(section, p, div)
43
+ :is([type='checkbox'], [type='radio'])+label) {
44
+ grid-column: elements;
45
+ justify-self: left;
46
+ }
47
+ }
48
+ /*form section :where(h1,h2,h3,h4,h5,h6) + p { display: block; }*/
49
+
50
+
9
51
  /* -----------------------------------------------------------------------------
10
52
  // #card - add class-based versions of cards
11
53
  // -------------------------------------------------------------------------- */
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module ClairityCss
4
- VERSION = '0.4.0'
4
+ VERSION = '0.5.0'
5
5
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: clairity.css
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.4.0
4
+ version: 0.5.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - clairity
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-06-23 00:00:00.000000000 Z
11
+ date: 2023-06-28 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: railties