refactor: more icon alignment (#293)

* refactor: polish icon alignment * refactor: polish icon alignment, missing piece * fix: add space between icon links in a paragraph * fix: demo a paragraph with two links * docs: comment on an obtuse selector
TACC · Jan 10, 2024 · 99a6f66 · 99a6f66
1 parent ecf5fed
commit 99a6f66
Show file tree

Hide file tree

Showing 15 changed files with 25 additions and 16 deletions.
diff --git a/dist/components/c-button.css b/dist/components/c-button.css
diff --git a/dist/components/c-card.css b/dist/components/c-card.css
diff --git a/dist/components/c-form--login.css b/dist/components/c-form--login.css
diff --git a/dist/components/c-form.css b/dist/components/c-form.css
diff --git a/dist/components/cortal.icon.css b/dist/components/cortal.icon.css
diff --git a/dist/core-styles.base.css b/dist/core-styles.base.css
diff --git a/dist/core-styles.cms.css b/dist/core-styles.cms.css
diff --git a/dist/core-styles.docs.css b/dist/core-styles.docs.css
diff --git a/dist/core-styles.portal.css b/dist/core-styles.portal.css
diff --git a/dist/trumps/s-form--login.css b/dist/trumps/s-form--login.css
diff --git a/dist/trumps/s-form.css b/dist/trumps/s-form.css
diff --git a/src/lib/_imports/components/c-button.css b/src/lib/_imports/components/c-button.css
@@ -19,7 +19,8 @@
   --mid-width: 110px;
   --max-width: 130px;
 
-  display: inline-block;
+  display: inline-flex;
+  align-items: baseline;
 
   /* To ensure identical <button> and <a> instances have same width */
   box-sizing: border-box;

diff --git a/src/lib/_imports/components/c-card.css b/src/lib/_imports/components/c-card.css
@@ -104,8 +104,14 @@
 
 /* Elements */
 
-:--c-card > a:not(:--c-button), :--c-card > p > a:only-child:not(:--c-button) {
-    display: flex;
+:--c-card > a:not(:--c-button),
+:--c-card > p > a:not(:--c-button) {
+    display: inline-flex;
+    align-items: baseline;
+}
+/* I.e. one of multiple icon links within a p tag */
+:--c-card > p > a:not(:--c-button):has(.icon):not(:last-child) {
+    margin-right: 1rem;
 }
 :--c-card > :is(:--action) {
     vertical-align: middle;

diff --git a/src/lib/_imports/components/c-card/_c-card--many-variable.hbs b/src/lib/_imports/components/c-card/_c-card--many-variable.hbs
@@ -84,6 +84,8 @@
         <a href="#"><i class="icon icon-push-left">&gt;</i> Learn less</a>
         <a href="#"><i class="icon icon-push-right">&gt;</i> Learn more</a>
     </p>
+    <p>A regular paragraph with <a href="#">a link</a>
+and <a href="#">another link</a> before the end, should not be affected.</p>
 </article>
 <article class="c-card c-card--{{this._self.name}}">
     <h3>Card - {{this._self.label}}</h3>

diff --git a/src/lib/_imports/components/cortal.icon.css b/src/lib/_imports/components/cortal.icon.css
@@ -42,12 +42,12 @@ Styleguide Components.Cortal.Icon
 
 /* To tweak action icon appearance and layout */
 :--c-card > :is(:--action) > .icon:first-child,
-p > :is(:--action):only-child > .icon:first-child {
+p > :is(:--action) > .icon:first-child {
     margin-right: 10px;
     font-size: 1.2em;
 
     position: relative;
-    top: 0.05em;
+    top: 0.2em;
 }