clairity.css 0.3.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b6dfecc40f87b3e965d45a65ab3a0deff5a20c30bfd926687c9cc4c081e3140a
-  data.tar.gz: 5649183f29ca7a7075463b7be03d2137538ba276327aefe4feabdf2ba86e0886
+  metadata.gz: 8d704d6af159d7e27bc4335c02879082a51cd44de52386ba389e443f5f6c3b00
+  data.tar.gz: 5aeb1befabeee3ca01620860a7bbf07c4295b5b798d2528b1d5eb1eb883590d4
 SHA512:
-  metadata.gz: 8749996eeb6591996d31e714ba9407780bfd1796a609c20e3241755725870731fc074031d0b1ef075b07c668163a8ad86767247ec25f23e665057b84afb4b79c
-  data.tar.gz: db53f1e55534067439fc8b2675133ae572a6343d4f245dabb60e2f55c5a16b514be6191acd0998a73ad838614752759a8308d243def99dc16479f0d669f14ac6
+  metadata.gz: 8af3fc784433f394887e2b785017c18654bb117bf5ed19e456d83f9b465c769f500b56ef60c2f8260fe1db56fed0a4c1a2c850be4b4a2deb1e51f7d013cfb044
+  data.tar.gz: 06cdfb1f48eab9b1f3c9a5db6bdb4108be49a07b043c173e1267094522bdfb42f35b2ea4c4273f4e63dc3b66ac8e86337dcd78b52132332ef907403f02f19da5

data/CHANGELOG.md

@@ -29,6 +29,22 @@ This section is for recording changes committed since the last release.
 ### Security
 
 
+## [v0.4.0] - 20230622
+
+### Added
+
+* [icons.css]: `--i-key` icon and the associated icon class in [classes.css]
+* add `.button_to` example to `clairity.html` and `components.html`, tweaking `clairity.html.css` in the process
+  * note that forms cannot exist inside `<p>` tags, so a form button like `.button_to` has to go in a `<div>` or similar container-type tag
+
+### Fixed
+
+* [components.css]: `inline-block` `i[class^='i-']` elements to avoid background color bleed on buttons with non-square `svg` icons (safari)
+  * this makes the icon take up all of its reserved square (24×24px by default) even if the underlying svg is not square
+  * also add `vertical-align: middle;` to better align these icons with button text
+* [components.css]: `display: flex` on `.button_to` forms (rails-specific) allows such form buttons to inline properly with other buttons without added spacing (firefox) or overlap (safari)
+
+
 ## [v0.3.1] - 20230620
 
 ### Added
@@ -666,7 +682,8 @@ After a number of diversions, including developing a (as yet unreleased) Jekyll
 - `palette.css` - separate out the color scheme into its own css file
 
 
-[unreleased]: https://github.com/clairity/clairity.css/compare/v0.3.1...HEAD
+[unreleased]: https://github.com/clairity/clairity.css/compare/v0.4.0...HEAD
+[v0.4.0]: https://github.com/clairity/clairity.css/compare/v0.3.1...v0.4.0
 [v0.3.1]: https://github.com/clairity/clairity.css/compare/v0.3.0...v0.3.1
 [v0.3.0]: https://github.com/clairity/clairity.css/compare/v0.2.0...v0.3.0
 [v0.2.0]: https://github.com/clairity/clairity.css/compare/v0.1.2...v0.2.0

data/lib/assets/css/clairity/classes.css

@@ -193,6 +193,7 @@ CLASSES - Here is where we first deviate from the classless CSS directive. We'll
 .i-dash         { --icon: var(--i-dash);          }
 .i-edit         { --icon: var(--i-edit);          }
 .i-home-edit    { --icon: var(--i-home-edit);     }
+.i-key          { --icon: var(--i-key);           }
 .i-mail         { --icon: var(--i-mail);          }
 .i-mail-check   { --icon: var(--i-mail-check);    }
 .i-mail-x       { --icon: var(--i-mail-x);        }

data/lib/assets/css/clairity/components.css

@@ -179,6 +179,8 @@ i[class^='i-'] {
   background-color:       var(--icon-color);
   padding:                var(--inline-padding);
   min-height:             var(--ml); /* else naked icons collapse into a line */
+  display:                inline-block;
+  vertical-align:         middle;
 }
 
 
@@ -703,6 +705,7 @@ nav:has(.toggle[aria-expanded=false]) > menu {
 //              form width while maximizing the button within to that form width
 // .......................................................................... */
 .button_to {
+  display:                flex;
   width:                  min-content;
 /*HACK: an inline-size container-type make forms zero-width, so make it normal*/
   container-type:         normal;

data/lib/assets/css/clairity/icons.css

@@ -19,20 +19,20 @@
   --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>");
   --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>");
   /* modified tabler icons */ 
-  --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'><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>");
-  --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'><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>");
-  --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'><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>");
-  --i-calendar-time:      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'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4' /><circle cx='18' cy='18' r='4' /><path d='M15 3v4' /><path d='M7 3v4' /><path d='M3 11h16' /><path d='M18 16.496v1.504l1 1' /></svg>");
-  --i-external-link:      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'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5' /><line x1='10' y1='14' x2='20' y2='4' /><polyline points='15 4 20 4 20 9' /></svg>");
+  --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>");
+  --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>");
+  --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>");
+  --i-calendar-time:      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 time</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4' /><circle cx='18' cy='18' r='4' /><path d='M15 3v4' /><path d='M7 3v4' /><path d='M3 11h16' /><path d='M18 16.496v1.504l1 1' /></svg>");
+  --i-external-link:      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>external link</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5' /><line x1='10' y1='14' x2='20' y2='4' /><polyline points='15 4 20 4 20 9' /></svg>");
   --i-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>edit</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1' /><path d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z' /><path d='M16 5l3 3' /></svg>");
-  --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'><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>");
-  --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'><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>");
-  --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'><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>");
-  --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'><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>");
-  --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'><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>");
+  --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>");
+  --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>");
+  --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>");
+  --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>");
+  --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>");
+  --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>");
   --i-mail-check:         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 check</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M11 19h-6a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v6' /><path d='M3 7l9 6l9 -6' /><path d='M15 19l2 2l4 -4' /></svg>");
   --i-mail-x:             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 x</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M13.5 19h-8.5a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v6' /><path d='M3 7l9 6l9 -6' /><path d='M22 22l-5 -5' /><path d='M17 22l5 -5' /></svg>");
-
   --i-message-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>message 2</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M12 20l-3 -3h-2a3 3 0 0 1 -3 -3v-6a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-2l-3 3' /><line x1='8' y1='9' x2='16' y2='9' /><line x1='8' y1='13' x2='14' y2='13' /></svg>");
   --i-mood-kid:           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>mood kid</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /><path d='M9 10l.01 0' /><path d='M15 10l.01 0' /><path d='M9.5 15a3.5 3.5 0 0 0 5 0' /><path d='M12 3a2 2 0 0 0 0 4' /></svg>");
   --i-numbers:            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>numbers</title><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M8 10v-7l-2 2' /><path d='M6 16a2 2 0 1 1 4 0c0 .591 -.601 1.46 -1 2l-3 3.001h4' /><path d='M15 14a2 2 0 1 0 2 -2a2 2 0 1 0 -2 -2' /><path d='M6.5 10h3' /></svg>");

data/lib/clairity.css/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ClairityCss
-  VERSION = '0.3.1'
+  VERSION = '0.4.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: clairity.css
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 0.4.0
 platform: ruby
 authors:
 - clairity
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-06-21 00:00:00.000000000 Z
+date: 2023-06-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties