clairity.css 0.5.2 → 0.5.3

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 (6) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +11 -1
  3. data/lib/assets/css/clairity/classes.css +21 -4
  4. data/lib/assets/css/clairity/icons.css +3 -0
  5. data/lib/clairity.css/version.rb +1 -1
  6. 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: 9b971433592736999ac6b4a0d8582933732270c80b4070acdda13c5f8605a39b
4
+ data.tar.gz: 40e328586eb1ace8bef06e26c5edb42edfc58f81f1051c4953e558ef6bb72e5c
5
5
  SHA512:
6
- metadata.gz: c78096833deca59cac5dddf196c86046a614aedc5aba2ee39137030cedc3107822a881cb718aca48676fb730ecb3f6764a504bec637cce4f177d616d9a77454b
7
- data.tar.gz: 0ed09492c2dcf8bb79feaa6482d0d04bd086ceb44fe24bd4054d1000bc217a38860b5b42e0ce3477fcbcf3a7b77747a681f98fec076dbdaf529b0b89d02343a6
6
+ metadata.gz: e7bda8d9aa7125fcac95be2a1e93b2ce5362420d54c9983e6e05d253150d74ff291a3c353623f4e778aaac211f11ea38edfb3226846e85764d66a697fdc55623
7
+ data.tar.gz: 1542e062d10024764fb8410f755d1d3dcccf85b6c0e4c88e2a0c8349a37c0f49327fa02c8615fcc8f2f01bc8fc969158808ae5134ed04e9f3edfbf1f041d2d97
data/CHANGELOG.md CHANGED
@@ -29,6 +29,15 @@ This section is for recording changes committed since the last release.
29
29
  ### Security
30
30
 
31
31
 
32
+ ## [v0.5.3] - 20230706
33
+
34
+ ### Added
35
+
36
+ * [classes.css]: added `.avatar` class for avatar images, which are typically round
37
+ * [classes.css]: added `.bordered` class for putting a `currentColor` border around an element
38
+ * [icons.css]: added `--i-id`, `--i-id-badge-2`, and `--i-users` icons and the associated icon classes in [classes.css]
39
+
40
+
32
41
  ## [v0.5.2] - 20230628
33
42
 
34
43
  ### Added
@@ -729,7 +738,8 @@ After a number of diversions, including developing a (as yet unreleased) Jekyll
729
738
  - `palette.css` - separate out the color scheme into its own css file
730
739
 
731
740
 
732
- [unreleased]: https://github.com/clairity/clairity.css/compare/v0.5.2...HEAD
741
+ [unreleased]: https://github.com/clairity/clairity.css/compare/v0.5.3...HEAD
742
+ [v0.5.3]: https://github.com/clairity/clairity.css/compare/v0.5.2...v0.5.3
733
743
  [v0.5.2]: https://github.com/clairity/clairity.css/compare/v0.5.1...v0.5.2
734
744
  [v0.5.1]: https://github.com/clairity/clairity.css/compare/v0.5.0...v0.5.1
735
745
  [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,15 @@ 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 { border-radius: var(--circle); }
177
+
178
+
179
+ /* #icons - helper classes for icons - EXPERIMENTAL
180
+ // ........................................................................... */
181
+
168
182
  /* for inserting an icon using the background-blend-mode technique */
169
183
  .icon {
170
184
  display: inline-block;
@@ -189,6 +203,8 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
189
203
  .i-dash { --icon: var(--i-dash); }
190
204
  .i-edit { --icon: var(--i-edit); }
191
205
  .i-home-edit { --icon: var(--i-home-edit); }
206
+ .i-id { --icon: var(--i-id); }
207
+ .i-id-badge-2 { --icon: var(--i-id-badge-2); }
192
208
  .i-key { --icon: var(--i-key); }
193
209
  .i-mail { --icon: var(--i-mail); }
194
210
  .i-mail-check { --icon: var(--i-mail-check); }
@@ -202,6 +218,7 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
202
218
  .i-user-circle { --icon: var(--i-user-circle); }
203
219
  .i-user-edit { --icon: var(--i-user-edit); }
204
220
  .i-user-off { --icon: var(--i-user-off); }
221
+ .i-users { --icon: var(--i-users); }
205
222
 
206
223
  /* removes a ::before or ::after icon - [0011] specificity
207
224
  // ........................................................................... */
data/lib/assets/css/clairity/icons.css CHANGED
@@ -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>");
@@ -46,4 +48,5 @@
46
48
  --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
49
  --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
50
  --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>");
51
+ --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
52
  }
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.5.3'
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.5.3
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-06 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