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.
Files changed (9) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +28 -1
  3. data/lib/assets/css/clairity/classes.css +35 -7
  4. data/lib/assets/css/clairity/components.css +16 -2
  5. data/lib/assets/css/clairity/icons.css +5 -1
  6. data/lib/assets/css/clairity/utilities.css +3 -2
  7. data/lib/assets/css/clairity/variables.css +1 -0
  8. data/lib/clairity.css/version.rb +1 -1
  9. metadata +3 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b6d8450ea6efd04150ba9ba0d7cbf8f042a57f01375d42969821910c41eced9e
4
- data.tar.gz: b023d0b8143602eb6f9510874877d076b1289b5bbe30fad603e3b673a963754e
3
+ metadata.gz: f699e85eb3675690410e8e201cabcc65ab746862ce714a56da8578b82dcc81f9
4
+ data.tar.gz: a2b6a55c5addb15cf02aa730cfa80a678f2f27b0e2d4e4b299bbe0a2df386623
5
5
  SHA512:
6
- metadata.gz: c78096833deca59cac5dddf196c86046a614aedc5aba2ee39137030cedc3107822a881cb718aca48676fb730ecb3f6764a504bec637cce4f177d616d9a77454b
7
- data.tar.gz: 0ed09492c2dcf8bb79feaa6482d0d04bd086ceb44fe24bd4054d1000bc217a38860b5b42e0ce3477fcbcf3a7b77747a681f98fec076dbdaf529b0b89d02343a6
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.5.2...HEAD
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
data/lib/assets/css/clairity/classes.css CHANGED
@@ -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
- // #icons - helper classes for icons - EXPERIMENTAL
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
  }
data/lib/assets/css/clairity/components.css CHANGED
@@ -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;
data/lib/assets/css/clairity/icons.css CHANGED
@@ -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
  }
data/lib/assets/css/clairity/utilities.css CHANGED
@@ -43,8 +43,9 @@
43
43
  .centered menu { justify-content: center; } /* [0011] specificity */
44
44
 
45
45
  /* flex positioning utilities */
46
- .center { justify-content: center; }
47
- .right { justify-content: flex-end; }
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/assets/css/clairity/variables.css CHANGED
@@ -102,6 +102,7 @@
102
102
  --l: 2rem;
103
103
  --xl: 4rem;
104
104
  --xxl: 8rem;
105
+ --xxxl: 16rem;
105
106
 
106
107
  /* contextual spacing - mainly for headers & icons among surrounding content*/
107
108
  /*--margin: var(--ml) 0 var(--m);*/ /* rem-based */
data/lib/clairity.css/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module ClairityCss
4
- VERSION = '0.5.2'
4
+ VERSION = '0.6.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.5.2
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-06-28 00:00:00.000000000 Z
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.14
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