clairity.css 0.5.2 → 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 +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
|