clairity.css 0.5.2 → 0.6.0
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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +28 -1
- data/lib/assets/css/clairity/classes.css +35 -7
- data/lib/assets/css/clairity/components.css +16 -2
- data/lib/assets/css/clairity/icons.css +5 -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 +3 -3
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,31 @@ 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
|
+
|
48
|
+
## [v0.5.3] - 20230706
|
49
|
+
|
50
|
+
### Added
|
51
|
+
|
52
|
+
* [classes.css]: added `.avatar` class for avatar images, which are typically round
|
53
|
+
* [classes.css]: added `.bordered` class for putting a `currentColor` border around an element
|
54
|
+
* [icons.css]: added `--i-id`, `--i-id-badge-2`, and `--i-users` icons and the associated icon classes in [classes.css]
|
55
|
+
|
56
|
+
|
32
57
|
## [v0.5.2] - 20230628
|
33
58
|
|
34
59
|
### Added
|
@@ -729,7 +754,9 @@ After a number of diversions, including developing a (as yet unreleased) Jekyll
|
|
729
754
|
- `palette.css` - separate out the color scheme into its own css file
|
730
755
|
|
731
756
|
|
732
|
-
[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
|
759
|
+
[v0.5.3]: https://github.com/clairity/clairity.css/compare/v0.5.2...v0.5.3
|
733
760
|
[v0.5.2]: https://github.com/clairity/clairity.css/compare/v0.5.1...v0.5.2
|
734
761
|
[v0.5.1]: https://github.com/clairity/clairity.css/compare/v0.5.0...v0.5.1
|
735
762
|
[v0.5.0]: https://github.com/clairity/clairity.css/compare/v0.4.0...v0.5.0
|
@@ -2,13 +2,15 @@
|
|
2
2
|
CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
3
3
|
add alternate styles for many elements and groups of elements here,
|
4
4
|
but none of these will rise to the level of full-on components. Those
|
5
|
-
will be the next layer of the CSS hierarchy.
|
6
|
-
|
5
|
+
will be the next layer of the CSS hierarchy. These class styles will
|
6
|
+
still aim to be semantic rather than utilitarian, with the latter
|
7
|
+
deferred to utilities.css, further down the css stack.
|
8
|
+
|
7
9
|
We'll generally aim for [0010] specificity here, as that's the default
|
8
10
|
specificity of a single class, which can be overridden in later styles
|
9
11
|
using just a single class. Exceptions will be marked with their
|
10
12
|
specificity, as usual.
|
11
|
-
|
13
|
+
|
12
14
|
Note that class names can start with a number in HTML5, but css
|
13
15
|
selectors can't. For a workaround (used with the .100vw class), see
|
14
16
|
https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
|
@@ -141,6 +143,12 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
|
141
143
|
// .......................................................................... */
|
142
144
|
.dual-aside { grid-column: 2 / -2; }
|
143
145
|
|
146
|
+
.bordered {
|
147
|
+
border: var(--solid) currentColor;
|
148
|
+
border-radius: var(--radius);
|
149
|
+
padding: var(--xs);
|
150
|
+
}
|
151
|
+
|
144
152
|
|
145
153
|
/* -----------------------------------------------------------------------------
|
146
154
|
// #breaks - #br #wbr #hr - line breaks and the horizontal rule
|
@@ -162,9 +170,25 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
|
162
170
|
|
163
171
|
|
164
172
|
/* -----------------------------------------------------------------------------
|
165
|
-
// #
|
173
|
+
// #media / #embedded - elements that add multimedia to a page
|
166
174
|
// -------------------------------------------------------------------------- */
|
167
175
|
|
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
|
+
}
|
187
|
+
|
188
|
+
|
189
|
+
/* #icons - helper classes for icons - EXPERIMENTAL
|
190
|
+
// .......................................................................... */
|
191
|
+
|
168
192
|
/* for inserting an icon using the background-blend-mode technique */
|
169
193
|
.icon {
|
170
194
|
display: inline-block;
|
@@ -176,12 +200,12 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
|
176
200
|
|
177
201
|
/* leading/trailing space for inline ::before elements, typically icons
|
178
202
|
// TODO: investigate using :has() for this on the parent of .icon
|
179
|
-
//
|
203
|
+
// .......................................................................... */
|
180
204
|
.leading { padding-left: var(--inline-padding); }
|
181
205
|
.trailing {padding-right: var(--inline-padding); }
|
182
206
|
|
183
207
|
/* convenience classes for icons defined in icons.css
|
184
|
-
//
|
208
|
+
// .......................................................................... */
|
185
209
|
.i-burger { --icon: var(--i-burger); }
|
186
210
|
.i-check { --icon: var(--i-check); }
|
187
211
|
.i-chevron { --icon: var(--i-chevron); }
|
@@ -189,6 +213,8 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
|
189
213
|
.i-dash { --icon: var(--i-dash); }
|
190
214
|
.i-edit { --icon: var(--i-edit); }
|
191
215
|
.i-home-edit { --icon: var(--i-home-edit); }
|
216
|
+
.i-id { --icon: var(--i-id); }
|
217
|
+
.i-id-badge-2 { --icon: var(--i-id-badge-2); }
|
192
218
|
.i-key { --icon: var(--i-key); }
|
193
219
|
.i-mail { --icon: var(--i-mail); }
|
194
220
|
.i-mail-check { --icon: var(--i-mail-check); }
|
@@ -199,12 +225,14 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
|
|
199
225
|
.i-server-cog { --icon: var(--i-server-cog); }
|
200
226
|
.i-settings { --icon: var(--i-settings); }
|
201
227
|
.i-trash { --icon: var(--i-trash); }
|
228
|
+
.i-user { --icon: var(--i-user); }
|
202
229
|
.i-user-circle { --icon: var(--i-user-circle); }
|
203
230
|
.i-user-edit { --icon: var(--i-user-edit); }
|
204
231
|
.i-user-off { --icon: var(--i-user-off); }
|
232
|
+
.i-users { --icon: var(--i-users); }
|
205
233
|
|
206
234
|
/* removes a ::before or ::after icon - [0011] specificity
|
207
|
-
//
|
235
|
+
// .......................................................................... */
|
208
236
|
.unadorned::before, .unadorned::after {
|
209
237
|
content: unset;
|
210
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>");
|
@@ -29,6 +29,8 @@
|
|
29
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>");
|
30
30
|
--i-file-download: 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 download</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' /><path d='M12 17v-6' /><path d='M9.5 14.5l2.5 2.5l2.5 -2.5' /></svg>");
|
31
31
|
--i-home-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>home edit</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 21v-6a2 2 0 0 1 2 -2h2c.645 0 1.218 .305 1.584 .78' /><path d='M20.004 11.004l-8.004 -8.004l-9 9h2v7a2 2 0 0 0 2 2h4' /><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>");
|
32
|
+
--i-id: 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>id</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z' /><path d='M9 10m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /><path d='M15 8l2 0' /><path d='M15 12l2 0' /><path d='M7 16l10 0' /></svg>");
|
33
|
+
--i-id-badge-2: 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>id badge 2</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M7 12h3v4h-3z' /><path d='M10 6h-6a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h16a1 1 0 0 0 1 -1v-12a1 1 0 0 0 -1 -1h-6' /><path d='M10 3m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z' /><path d='M14 16h2' /><path d='M14 12h4' /></svg>");
|
32
34
|
--i-key: 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>key</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0z' /><path d='M15 9h.01' /></svg>");
|
33
35
|
--i-lock: 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>lock</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='5' y='11' width='14' height='10' rx='2' /><circle cx='12' cy='16' r='1' /><path d='M8 11v-4a4 4 0 0 1 8 0v4' /></svg>");
|
34
36
|
--i-mail: 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>mail</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><rect x='3' y='5' width='18' height='14' rx='2' /><polyline points='3 7 12 13 21 7' /></svg>");
|
@@ -43,7 +45,9 @@
|
|
43
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>");
|
44
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>");
|
45
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>");
|
46
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>");
|
47
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>");
|
48
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>");
|
52
|
+
--i-users: 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>users</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0' /><path d='M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2' /><path d='M16 3.13a4 4 0 0 1 0 7.75' /><path d='M21 21v-2a4 4 0 0 0 -3 -3.85' /></svg>");
|
49
53
|
}
|
@@ -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-
|
11
|
+
date: 2023-07-08 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.15
|
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
|