clairity.css 0.2.0 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +18 -1
- data/README.md +3 -1
- data/lib/assets/css/clairity/base.css +6 -0
- data/lib/assets/css/clairity/classes.css +1 -0
- data/lib/assets/css/clairity/components.css +14 -14
- data/lib/assets/css/clairity/cosmetic.css +10 -0
- data/lib/assets/css/clairity/icons.css +1 -0
- data/lib/assets/css/clairity/states.css +2 -2
- data/lib/clairity.css/version.rb +1 -1
- metadata +3 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 7b72fdbcec2b2d980f9a9c29277faebfd6b98e20723458f1938bd59fe01f25c8
|
|
4
|
+
data.tar.gz: 19cfbc2063ec59d6d405cb289205817193c9fd8f8947702cd54bdde74c5df1f3
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 339dd3bb5d0d7967915ca022093d19b6dff439fca037a36d41c605b055d0467430813fe945cbc580a656e11dd8f21a7438c0e9dfc00da6af63ec3e6e43a67e98
|
|
7
|
+
data.tar.gz: 4efc8f1596a4f9857168ba445d1fcf26db8ad530aa01aa1e24f0901585239b67ca8c62c25764fd69670cc3d98afb25ab15b9a2929edea8ca8fea88bf47c4712e
|
data/CHANGELOG.md
CHANGED
|
@@ -29,6 +29,21 @@ This section is for recording changes committed since the last release.
|
|
|
29
29
|
### Security
|
|
30
30
|
|
|
31
31
|
|
|
32
|
+
## [v0.3.0] - 20230617
|
|
33
|
+
|
|
34
|
+
### Added
|
|
35
|
+
|
|
36
|
+
* [icons.css]: `--i-settings` icon and the associated `.i-settings` icon class in [classes.css]
|
|
37
|
+
* [components.css]: added `.secondary` and `.tertiary` variations of the `::file-selector-button`, part of the `[type="file"]` input type
|
|
38
|
+
|
|
39
|
+
### Changed
|
|
40
|
+
|
|
41
|
+
* [base.css]: decreased height of `::file-selector-button` by `var(--xxs)` to better reflect relative weight of the file selector button in the form hierarchy
|
|
42
|
+
* also removed `padding-inline-start` from the `[type="file"]` input type to vertically line up with other fields in a form
|
|
43
|
+
* [components.css]: converted `.alert` class declarations into `[role="alert"]` attribute declarations to better reflect semantics and to be more accessible
|
|
44
|
+
* also updated `classes.html` alert box examples to use `[role="alert"]` rather than `.alert`
|
|
45
|
+
* [cosmetic.css]: make labels inline-grids so they take up the full row height - EXPERIMENTAL
|
|
46
|
+
|
|
32
47
|
|
|
33
48
|
## [v0.2.0] - 20230504
|
|
34
49
|
|
|
@@ -464,6 +479,7 @@ Eventually, we want to have a consistent set of svg icons that are uniform and p
|
|
|
464
479
|
- `<body>`: make the body fill the viewport height, if content is not enough by itself to do so
|
|
465
480
|
- `<hgroup>`: styled with a strong visual offset
|
|
466
481
|
- `<hgroup>` is deprecated but still useful for containing *just* heading elements, as opposed to all kinds elements, as `<header>` does)
|
|
482
|
+
- see https://www.tpgi.com/subheadings-subtitles-alternative-titles-and-taglines-in-html/
|
|
467
483
|
- `[href^="mailto:"], [href^="tel:"], [href^="sms:"], [href^="file:"], [rel~="external"], [rel~="bookmark"], [download]`: move automatically included icon to the right instead of the left for these link types
|
|
468
484
|
- `<menu>`: remove default left padding and list marker
|
|
469
485
|
- `<th>`, `<td>`: add small top padding
|
|
@@ -643,7 +659,8 @@ After a number of diversions, including developing a (as yet unreleased) Jekyll
|
|
|
643
659
|
- `palette.css` - separate out the color scheme into its own css file
|
|
644
660
|
|
|
645
661
|
|
|
646
|
-
[unreleased]: https://github.com/clairity/clairity.css/compare/v0.
|
|
662
|
+
[unreleased]: https://github.com/clairity/clairity.css/compare/v0.3.0...HEAD
|
|
663
|
+
[v0.3.0]: https://github.com/clairity/clairity.css/compare/v0.2.0...v0.3.0
|
|
647
664
|
[v0.2.0]: https://github.com/clairity/clairity.css/compare/v0.1.2...v0.2.0
|
|
648
665
|
[v0.1.2]: https://github.com/clairity/clairity.css/compare/v0.1.1...v0.1.2
|
|
649
666
|
[v0.1.1]: https://github.com/clairity/clairity.css/compare/v0.1.0...v0.1.1
|
data/README.md
CHANGED
|
@@ -63,7 +63,9 @@ Once the gem is installed, require <samp class="clairity">clairity.css</samp> in
|
|
|
63
63
|
*# require_self
|
|
64
64
|
*/
|
|
65
65
|
|
|
66
|
+
/* instead of the sprockets directive above, you can use a css @import directive: */
|
|
66
67
|
@import "clairity.css";
|
|
68
|
+
|
|
67
69
|
/* to get basic plus the palette, use two @import statements:
|
|
68
70
|
@import "clairity.basic.css";
|
|
69
71
|
@import "clairity/palette.css";
|
|
@@ -113,7 +115,7 @@ where the contents of `/lib/assets/css/` in the gem was placed in the `/assets/c
|
|
|
113
115
|
|
|
114
116
|
## Previewing <samp class="clairity">clairity.css</samp>
|
|
115
117
|
|
|
116
|
-
|
|
118
|
+
To preview <samp class="clairity">clairity.css</samp>, check out the [Spec Sheet](https://css.clairity.blog/clairity.html).
|
|
117
119
|
|
|
118
120
|
For a quick and dirty (and totally insecure) way of previewing <samp class="clairity">clairity.css</samp>, download (or clone the gem repo locally) and unpack the gem (`gem unpack clairity.css-X.Y.Z.gem`), and from within the gem directory, run a (single-line invocation) ruby web server[^webrick]:
|
|
119
121
|
|
|
@@ -420,6 +420,10 @@ button, [type="button"],[type="submit"],[type="reset"], ::file-selector-button {
|
|
|
420
420
|
border-color: var(--foreground);
|
|
421
421
|
}
|
|
422
422
|
|
|
423
|
+
::file-selector-button {
|
|
424
|
+
min-height: calc(var(--height) - var(--xs));
|
|
425
|
+
}
|
|
426
|
+
|
|
423
427
|
|
|
424
428
|
/* -----------------------------------------------------------------------------
|
|
425
429
|
// #selections - dropdown/selection form controls
|
|
@@ -528,6 +532,8 @@ select, optgroup, option {
|
|
|
528
532
|
border: none;
|
|
529
533
|
}
|
|
530
534
|
|
|
535
|
+
[type="file"] { padding-inline-start: 0; }
|
|
536
|
+
|
|
531
537
|
/* #::-webkit-calendar-picker-indicator -a webkit picker pseudo-element-[0001]*/
|
|
532
538
|
::-webkit-calendar-picker-indicator {
|
|
533
539
|
display: none;
|
|
@@ -198,6 +198,7 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
|
|
198
198
|
.i-mail-x { --icon: var(--i-mail-x); }
|
|
199
199
|
.i-send { --icon: var(--i-send); }
|
|
200
200
|
.i-server-cog { --icon: var(--i-server-cog); }
|
|
201
|
+
.i-settings { --icon: var(--i-settings); }
|
|
201
202
|
.i-trash { --icon: var(--i-trash); }
|
|
202
203
|
.i-user-circle { --icon: var(--i-user-circle); }
|
|
203
204
|
.i-user-off { --icon: var(--i-user-off); }
|
|
@@ -84,8 +84,7 @@ header:not(.banner) {
|
|
|
84
84
|
align-items: baseline; /* make sure flexed text lines up visually*/
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
header :where(h1,h2,h3,h4,h5,h6) {
|
|
88
|
-
}
|
|
87
|
+
/*header :where(h1,h2,h3,h4,h5,h6) { ??? }*/
|
|
89
88
|
|
|
90
89
|
/* use <span>, not <p>, for text that sits alongside a heading within a header*/
|
|
91
90
|
header :where(p, .subtitle) {
|
|
@@ -259,8 +258,9 @@ i[class^='i-'] {
|
|
|
259
258
|
// #alert - the alert flash message box for providing timely info to the user
|
|
260
259
|
// -------------------------------------------------------------------------- */
|
|
261
260
|
|
|
261
|
+
/* TODO: rather than an .alert class, use [role="alert"] by default */
|
|
262
262
|
/* #alert - the default alert box is an info box */
|
|
263
|
-
|
|
263
|
+
[role="alert"] {
|
|
264
264
|
color: var(--info);
|
|
265
265
|
background-color: var(--bg-info);
|
|
266
266
|
border: var(--solid) var(--info-low);
|
|
@@ -271,7 +271,7 @@ i[class^='i-'] {
|
|
|
271
271
|
}
|
|
272
272
|
|
|
273
273
|
/* #headers - a single header style since alerts only need 1 header typically */
|
|
274
|
-
|
|
274
|
+
[role="alert"] :where(h1,h2,h3,h4,h5,h6) {
|
|
275
275
|
color: var(--info-low);
|
|
276
276
|
font-size: var(--large);
|
|
277
277
|
font-weight: var(--bold);
|
|
@@ -279,24 +279,24 @@ i[class^='i-'] {
|
|
|
279
279
|
}
|
|
280
280
|
|
|
281
281
|
/* #success #warning #error #alert - other alert types get their own colors */
|
|
282
|
-
.success
|
|
282
|
+
[role="alert"].success {
|
|
283
283
|
color: var(--success);
|
|
284
284
|
background-color: var(--bg-success);
|
|
285
285
|
border: var(--solid) var(--success-low);
|
|
286
286
|
}
|
|
287
|
-
.warning
|
|
287
|
+
[role="alert"].warning {
|
|
288
288
|
color: var(--warning);
|
|
289
289
|
background-color: var(--bg-warning);
|
|
290
290
|
border: var(--solid) var(--warning-low);
|
|
291
291
|
}
|
|
292
|
-
.error
|
|
292
|
+
[role="alert"].error {
|
|
293
293
|
color: var(--error);
|
|
294
294
|
background-color: var(--bg-error);
|
|
295
295
|
border: var(--solid) var(--error-low);
|
|
296
296
|
}
|
|
297
|
-
.success
|
|
298
|
-
.warning
|
|
299
|
-
.error
|
|
297
|
+
[role="alert"].success :where(h1,h2,h3,h4,h5,h6) { color: var(--success-low); }
|
|
298
|
+
[role="alert"].warning :where(h1,h2,h3,h4,h5,h6) { color: var(--warning-low); }
|
|
299
|
+
[role="alert"].error :where(h1,h2,h3,h4,h5,h6) { color: var(--error-low); }
|
|
300
300
|
|
|
301
301
|
|
|
302
302
|
/* -----------------------------------------------------------------------------
|
|
@@ -497,26 +497,26 @@ menu > li > button, menu > li > button:hover {
|
|
|
497
497
|
/* #secondary #button - less emphasized than the standard button
|
|
498
498
|
// .......................................................................... */
|
|
499
499
|
|
|
500
|
-
button.secondary, .secondary.button {
|
|
500
|
+
button.secondary, .secondary.button, .secondary::file-selector-button { /* [0011] / [0020] specificity */
|
|
501
501
|
color: var(--foreground); /* invert foreground/background */
|
|
502
502
|
background-color: var(--background); /* invert foreground/background */
|
|
503
503
|
border-color: var(--foreground);
|
|
504
504
|
}
|
|
505
505
|
|
|
506
|
-
:where(button, .button).secondary:hover {
|
|
506
|
+
:where(button, .button).secondary:hover, .secondary::file-selector-button:hover { /* [0020] specificity */
|
|
507
507
|
background-color: var(--contrast); /* TODO: make grey in dark mode */
|
|
508
508
|
}
|
|
509
509
|
|
|
510
510
|
/* #tertiary #button - a link-like button
|
|
511
511
|
// .......................................................................... */
|
|
512
512
|
|
|
513
|
-
button.tertiary, .tertiary.button {
|
|
513
|
+
button.tertiary, .tertiary.button, .tertiary::file-selector-button { /* [0011] / [0020] specificity */
|
|
514
514
|
color: var(--foreground); /* invert foreground/background */
|
|
515
515
|
background-color: unset; /* border is transparent */
|
|
516
516
|
padding-inline: var(--xxs);
|
|
517
517
|
}
|
|
518
518
|
|
|
519
|
-
:where(button, .button).tertiary:hover {
|
|
519
|
+
:where(button, .button).tertiary:hover, .tertiary::file-selector-button:hover { /* [0020] specificity */
|
|
520
520
|
text-decoration: underline; /* TODO: make grey in dark mode */
|
|
521
521
|
border-color: var(--transparent);
|
|
522
522
|
}
|
|
@@ -177,6 +177,16 @@ form h2, form p { grid-column: full; }
|
|
|
177
177
|
}
|
|
178
178
|
}
|
|
179
179
|
|
|
180
|
+
/* #label becomes inline-grid to take full row --height - EXPERIMENTAL
|
|
181
|
+
// TODO: fix label-to-textarea baseline alignment, and radio/checkbox height
|
|
182
|
+
// .......................................................................... */
|
|
183
|
+
label {
|
|
184
|
+
display: inline-grid;
|
|
185
|
+
grid-auto-flow: column;
|
|
186
|
+
height: var(--height);
|
|
187
|
+
align-content: center;
|
|
188
|
+
}
|
|
189
|
+
|
|
180
190
|
/* TEMP: moved from states.css ++++++++++++++++++++++++++++++++++++++++++++++ */
|
|
181
191
|
/* #form #ul - since lists in forms typically list out form controls, remove
|
|
182
192
|
the bullet styling from them - [0002] specificity */
|
|
@@ -38,6 +38,7 @@
|
|
|
38
38
|
--i-phone: 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'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2' /></svg>");
|
|
39
39
|
--i-send: 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>send</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><line x1='10' y1='14' x2='21' y2='3' /><path d='M21 3l-6.5 18a0.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a0.55 .55 0 0 1 0 -1l18 -6.5' /></svg>");
|
|
40
40
|
--i-server-cog: 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>server cog</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='3' y='4' width='18' height='8' rx='3' /><path d='M12 20h-6a3 3 0 0 1 -3 -3v-2a3 3 0 0 1 3 -3h10.5' /><circle cx='18.001' cy='18' r='2' /><path d='M18.001 14.5v1.5' /><path d='M18.001 20v1.5' /><path d='M21.032 16.25l-1.299 .75' /><path d='M16.27 19l-1.3 .75' /><path d='M14.97 16.25l1.3 .75' /><path d='M19.733 19l1.3 .75' /><path d='M7 8v.01' /><path d='M7 16v.01' /></svg>");
|
|
41
|
+
--i-settings: 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>settings</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z' /><path d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0' /></svg>");
|
|
41
42
|
--i-trash: 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>delete</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><line x1='4' y1='7' x2='20' y2='7' /><line x1='10' y1='11' x2='10' y2='17' /><line x1='14' y1='11' x2='14' y2='17' /><path d='M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12' /><path d='M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3' /></svg>");
|
|
42
43
|
--i-user-circle: 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'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><circle cx='12' cy='12' r='9' /><circle cx='12' cy='10' r='3' /><path d='M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855' /></svg>");
|
|
43
44
|
--i-user-off: 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>disable</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M14.274 10.291a4 4 0 1 0 -5.554 -5.58m-.548 3.453a4.01 4.01 0 0 0 2.62 2.65' /><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 1.147 .167m2.685 2.681a4 4 0 0 1 .168 1.152v2' /><line x1='3' y1='3' x2='21' y2='21' /></svg>");
|
|
@@ -264,13 +264,13 @@ tbody tr:hover, tbody tr:hover th {
|
|
|
264
264
|
/* mark required fields' labels; labels usually follow checkboxes & radios */
|
|
265
265
|
/* :has() is only safari 16+ and chrome 105+ for now */
|
|
266
266
|
@supports selector(:has(*)) {
|
|
267
|
+
/* TODO: exclude case where a * is already present at the end of the label */
|
|
267
268
|
label:has(+ :is(input, select):not([type="checkbox"], [type="radio"]):required)::after,
|
|
268
269
|
input:where([type="checkbox"], [type="radio"]):required + label::after {
|
|
269
270
|
content: " *";
|
|
270
271
|
}
|
|
271
|
-
/* mark as successful the fieldset & legend borders for valid radio buttons */
|
|
272
|
-
/* :has() is safari only for now */
|
|
273
272
|
|
|
273
|
+
/* mark as successful the fieldset & legend borders for valid radio buttons */
|
|
274
274
|
fieldset:has([type="radio"]:required:checked),
|
|
275
275
|
fieldset:has([type="radio"]:required:checked) legend {
|
|
276
276
|
border-color: var(--success, forestgreen);
|
data/lib/clairity.css/version.rb
CHANGED
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
|
+
version: 0.3.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-
|
|
11
|
+
date: 2023-06-18 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: railties
|
|
@@ -122,7 +122,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
122
122
|
- !ruby/object:Gem::Version
|
|
123
123
|
version: '0'
|
|
124
124
|
requirements: []
|
|
125
|
-
rubygems_version: 3.4.
|
|
125
|
+
rubygems_version: 3.4.14
|
|
126
126
|
signing_key:
|
|
127
127
|
specification_version: 4
|
|
128
128
|
summary: clairity.css is a simple, semantic classless CSS framework and future HTML-first
|