clairity.css 0.5.3 → 0.6.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/lib/assets/css/clairity/classes.css +16 -5
- data/lib/assets/css/clairity/components.css +16 -2
- data/lib/assets/css/clairity/icons.css +2 -1
- data/lib/assets/css/clairity/utilities.css +3 -2
- data/lib/assets/css/clairity/variables.css +1 -0
- data/lib/clairity.css/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f699e85eb3675690410e8e201cabcc65ab746862ce714a56da8578b82dcc81f9
|
4
|
+
data.tar.gz: a2b6a55c5addb15cf02aa730cfa80a678f2f27b0e2d4e4b299bbe0a2df386623
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 537fa357fd3c4f45bca71447846379a72d06591e7d239908b71351d2e3e88504365e597fc16ab58f459e7c4bbac5f0034a9b3179b290a7b06eb4f72b5e1fa3fa
|
7
|
+
data.tar.gz: d40ddaba3b1192b8513c8e6224fbbd812adec3ecfda12ec3094a3aefb2ed99bde1885d78ecdf6f30b4d94739b0b5f7acdb3ae4475c75bceb6a8f93f6c4d62252
|
data/CHANGELOG.md
CHANGED
@@ -29,6 +29,22 @@ This section is for recording changes committed since the last release.
|
|
29
29
|
### Security
|
30
30
|
|
31
31
|
|
32
|
+
## [v0.6.0] - 20230707
|
33
|
+
|
34
|
+
### Added
|
35
|
+
|
36
|
+
* [variables.css]: added `--xxxl` size
|
37
|
+
* [icons.css]: added `--i-user` icon and associated icon class in [classes.css]
|
38
|
+
* [classes.css]: updated `.avatar` class with `aspect-ratio`, `width`, `display`, and `justify-content` properties
|
39
|
+
* [components.css]: added iconned `.avatar` component that uses our svg icons as the avatar image, with the structure `<span class="avatar"><i class="i-icon"></i></span>`
|
40
|
+
* [utilities.css]: added `.start` flex positioning class, to complement `.center` and `.end`
|
41
|
+
|
42
|
+
### Changed
|
43
|
+
|
44
|
+
* [components.css]: reduced specificity of `header:not(.banner)` to [0001] by using `:where`: `header:where(:not(.banner))`
|
45
|
+
* [utilities.css]: renamed `.right` to `.end` to match newly added `.start` class
|
46
|
+
|
47
|
+
|
32
48
|
## [v0.5.3] - 20230706
|
33
49
|
|
34
50
|
### Added
|
@@ -738,7 +754,8 @@ After a number of diversions, including developing a (as yet unreleased) Jekyll
|
|
738
754
|
- `palette.css` - separate out the color scheme into its own css file
|
739
755
|
|
740
756
|
|
741
|
-
[unreleased]: https://github.com/clairity/clairity.css/compare/v0.
|
757
|
+
[unreleased]: https://github.com/clairity/clairity.css/compare/v0.6.0...HEAD
|
758
|
+
[v0.6.0]: https://github.com/clairity/clairity.css/compare/v0.5.3...v0.6.0
|
742
759
|
[v0.5.3]: https://github.com/clairity/clairity.css/compare/v0.5.2...v0.5.3
|
743
760
|
[v0.5.2]: https://github.com/clairity/clairity.css/compare/v0.5.1...v0.5.2
|
744
761
|
[v0.5.1]: https://github.com/clairity/clairity.css/compare/v0.5.0...v0.5.1
|
@@ -173,11 +173,21 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
|
173
173
|
// #media / #embedded - elements that add multimedia to a page
|
174
174
|
// -------------------------------------------------------------------------- */
|
175
175
|
|
176
|
-
|
176
|
+
/* #avatar - makes an image round, up to --xxxl in size - EXPERIMENTAL
|
177
|
+
// .......................................................................... */
|
178
|
+
|
179
|
+
.avatar {
|
180
|
+
aspect-ratio: 1; /* make it square */
|
181
|
+
width: -moz-available; /* take up available space */
|
182
|
+
max-width: var(--xxxl); /* cap the size via width */
|
183
|
+
display: inline-flex; /* allows setting icon as image */
|
184
|
+
justify-content: center; /* centers icon image */
|
185
|
+
border-radius: var(--circle);
|
186
|
+
}
|
177
187
|
|
178
188
|
|
179
189
|
/* #icons - helper classes for icons - EXPERIMENTAL
|
180
|
-
//
|
190
|
+
// .......................................................................... */
|
181
191
|
|
182
192
|
/* for inserting an icon using the background-blend-mode technique */
|
183
193
|
.icon {
|
@@ -190,12 +200,12 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
|
190
200
|
|
191
201
|
/* leading/trailing space for inline ::before elements, typically icons
|
192
202
|
// TODO: investigate using :has() for this on the parent of .icon
|
193
|
-
//
|
203
|
+
// .......................................................................... */
|
194
204
|
.leading { padding-left: var(--inline-padding); }
|
195
205
|
.trailing {padding-right: var(--inline-padding); }
|
196
206
|
|
197
207
|
/* convenience classes for icons defined in icons.css
|
198
|
-
//
|
208
|
+
// .......................................................................... */
|
199
209
|
.i-burger { --icon: var(--i-burger); }
|
200
210
|
.i-check { --icon: var(--i-check); }
|
201
211
|
.i-chevron { --icon: var(--i-chevron); }
|
@@ -215,13 +225,14 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
|
215
225
|
.i-server-cog { --icon: var(--i-server-cog); }
|
216
226
|
.i-settings { --icon: var(--i-settings); }
|
217
227
|
.i-trash { --icon: var(--i-trash); }
|
228
|
+
.i-user { --icon: var(--i-user); }
|
218
229
|
.i-user-circle { --icon: var(--i-user-circle); }
|
219
230
|
.i-user-edit { --icon: var(--i-user-edit); }
|
220
231
|
.i-user-off { --icon: var(--i-user-off); }
|
221
232
|
.i-users { --icon: var(--i-users); }
|
222
233
|
|
223
234
|
/* removes a ::before or ::after icon - [0011] specificity
|
224
|
-
//
|
235
|
+
// .......................................................................... */
|
225
236
|
.unadorned::before, .unadorned::after {
|
226
237
|
content: unset;
|
227
238
|
}
|
@@ -77,7 +77,7 @@ body > footer:last-of-type:is(._100dvi, [class~="100dvi"]) {
|
|
77
77
|
// #headings -
|
78
78
|
// -------------------------------------------------------------------------- */
|
79
79
|
|
80
|
-
header:not(.banner) {
|
80
|
+
header:where(:not(.banner)) { /* [0001] specificity */
|
81
81
|
display: flex;
|
82
82
|
flex-wrap: wrap;
|
83
83
|
justify-content: space-between;
|
@@ -213,6 +213,20 @@ i[class^='i-'] {
|
|
213
213
|
vertical-align: middle;
|
214
214
|
}
|
215
215
|
|
216
|
+
/* iconned #avatar - use an icon as the avatar image - EXPERIMENTAL
|
217
|
+
// .......................................................................... */
|
218
|
+
|
219
|
+
.avatar:has(i[class^="i-"]) {
|
220
|
+
background-color: var(--300); /* grey background */
|
221
|
+
}
|
222
|
+
|
223
|
+
.avatar i[class^="i-"] {
|
224
|
+
--color: var(--10); /* ~white icon */
|
225
|
+
mask-size: var(--xxl); /* make icon big */
|
226
|
+
padding: var(--xl); /* make "mask" of icon big enough */
|
227
|
+
}
|
228
|
+
|
229
|
+
|
216
230
|
|
217
231
|
/* -----------------------------------------------------------------------------
|
218
232
|
// #banner - header that usually includes a hero image and perhaps a nav
|
@@ -824,7 +838,7 @@ selectmenu::part(listbox) {
|
|
824
838
|
max-height: var(--width);
|
825
839
|
max-width: var(--width);
|
826
840
|
}
|
827
|
-
/* change orphaned last item to row layout for 3-wide grid */
|
841
|
+
/* change orphaned last item to row layout for 3-wide grid - EXPERIMENTAL */
|
828
842
|
.cards :last-child:nth-child(3n - 2) {
|
829
843
|
grid-column: span 3;
|
830
844
|
flex-direction: row;
|
@@ -18,7 +18,7 @@
|
|
18
18
|
--i-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M36,36 25,25' stroke='%23ccc' stroke-width='3' /><circle cx='15' cy='15' r='14' fill='none' stroke='%23ccc' stroke-width='1.5' /></svg>");
|
19
19
|
--i-sms: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M2,2 38,2 38,28 22,28 12,38 12,28 2,28Z' fill='none' stroke='%23999' stroke-width='1.5'/></svg>");
|
20
20
|
--i-tel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke-width='1.5'><path d='M8,1 34,1 34,39 8,39Z M12,5 30,5 30,30 12,30Z' /><circle cx='21' cy='34' r='2'/></g></svg>");
|
21
|
-
/* modified tabler icons */
|
21
|
+
/* modified tabler icons */
|
22
22
|
--i-bookmark: 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>bookmark</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 4h6a2 2 0 0 1 2 2v14l-5 -3l-5 3v-14a2 2 0 0 1 2 -2' /></svg>");
|
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>");
|
@@ -45,6 +45,7 @@
|
|
45
45
|
--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>");
|
46
46
|
--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>");
|
47
47
|
--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>");
|
48
|
+
--i-user: 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>user</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0' /><path d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2' /></svg>");
|
48
49
|
--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'><title>user circle</title><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>");
|
49
50
|
--i-user-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>user edit</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0' /><path d='M6 21v-2a4 4 0 0 1 4 -4h3.5' /><path d='M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z' /></svg>");
|
50
51
|
--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>");
|
@@ -43,8 +43,9 @@
|
|
43
43
|
.centered menu { justify-content: center; } /* [0011] specificity */
|
44
44
|
|
45
45
|
/* flex positioning utilities */
|
46
|
-
.
|
47
|
-
.
|
46
|
+
.start { justify-content: flex-start; }
|
47
|
+
.center{ justify-content: center; }
|
48
|
+
.end { justify-content: flex-end; }
|
48
49
|
|
49
50
|
|
50
51
|
/* -----------------------------------------------------------------------------
|
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.6.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-07-
|
11
|
+
date: 2023-07-08 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: railties
|