@tacc/core-styles 2.50.0 → 2.50.2

package/src/lib/_imports/bootstrap4/utilities/color/config.yml

@@ -4,6 +4,8 @@ variants:
   - name: text
 context:
   shouldLoadBootstrap: true
+  supportStyles:
+    - ../../assets/components/cortal-icon.css
   groups:
     - title: Types
       types:
@@ -42,3 +44,20 @@ context:
         text: Black 50%
       - type: white-50
         text: White 50%
+    - title: With Icons
+      types:
+      - type: primary
+        hasIconBefore: true
+        text: Before
+      - type: success
+        hasIconAfter: true
+        text: After
+      - type: danger
+        hasIconBefore: true
+        hasIconAfter: true
+        text: Before & After
+      - type: info
+        size: sm
+        hasIconBefore: true
+        text: Small
+

package/src/lib/_imports/components/c-button/c-button.hbs

@@ -6,13 +6,13 @@
       <dt><code>&lt;button&gt;</code></dt>
       <dd>
         <button class="c-button c-button--{{this._self.name}} c-button--secondary" {{#if disabled}}disabled{{/if}}>
-          <span class="c-button__text">--secondary</span>
+          --secondary
         </button>
         <button class="c-button c-button--{{this._self.name}} c-button--primary" {{#if disabled}}disabled{{/if}}>
-          <span class="c-button__text">--primary</span>
+          --primary
         </button>
         <button class="c-button c-button--{{this._self.name}} c-button--tertiary" {{#if disabled}}disabled{{/if}}>
-          <span class="c-button__text">--tertiary</span>
+          --tertiary
         </button>
       </dd>
 
@@ -21,15 +21,15 @@
       <dd>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--secondary" {{#if disabled}}disabled
           tabindex="-1" {{/if}}>
-          <span class="c-button__text">--secondary</span>
+          --secondary
         </a>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--primary" {{#if disabled}}disabled
           tabindex="-1" {{/if}}>
-          <span class="c-button__text">--primary</span>
+          --primary
         </a>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--tertiary" {{#if disabled}}disabled
           tabindex="-1" {{/if}}>
-          <span class="c-button__text">--tertiary</span>
+          --tertiary
         </a>
       </dd>
       {{/if}}
@@ -45,15 +45,15 @@
       <dd>
         <button class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
-          <span class="c-button__text">default</span>
+          default
         </button>
         <button class="c-button c-button--{{this._self.name}} 
         {{#if type}}{{type}}{{/if}}" disabled>
-          <span class="c-button__text">disabled-attr</span>
+          disabled-attr
         </button>
         <button class="c-button c-button--{{this._self.name}} c-button--is-busy
         {{#if type}}{{type}}{{/if}}" disabled>
-          <span class="c-button__text">--is-busy</span>
+          --is-busy
       </dd>
 
       {{#if supports.link-tag}}
@@ -61,15 +61,15 @@
       <dd>
         <a href="#" class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
-          <span class="c-button__text">default</span>
+          default
         </a>
         <a disabled tabindex="-1" href="#" class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}">
-          <span class="c-button__text">disabled-attr</span>
+          disabled-attr
         </a>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--is-busy
         {{#if type}}{{type}}{{/if}}" disabled tabindex="-1">
-          <span class="c-button__text">--is-busy</span>
+          --is-busy
         </a>
       </dd>
       {{/if}}
@@ -85,13 +85,13 @@
       <dd>
         <button class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
-          <i class="c-button__icon--before icon icon-push-right" aria-description="validate input">…</i>
-          <span class="c-button__text">__icon--before</span>
+          <i class="icon icon-push-right" aria-description="validate input">…</i>
+          __icon--before
         </button>
         <button class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
-          <span class="c-button__text">__icon--after</span>
-          <i class="c-button__icon--after icon icon-new-browser" aria-description="exit page">X</i>
+          __icon--after
+          <i class="icon icon-new-browser" aria-description="exit page">X</i>
       </dd>
 
       {{#if supports.link-tag}}
@@ -99,13 +99,13 @@
       <dd>
         <a href="#" class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
-          <i class="c-button__icon--before icon icon-push-right" aria-description="validate input">…</i>
-          <span class="c-button__text">__icon--before</span>
+          <i class="icon icon-push-right" aria-description="validate input">…</i>
+          __icon--before
         </a>
         <a href="#" class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
-          <span class="c-button__text">__icon--after</span>
-          <i class="c-button__icon--after icon icon-new-browser" aria-description="exit page">X</i>
+          __icon--after
+          <i class="icon icon-new-browser" aria-description="exit page">X</i>
         </a>
       </dd>
       {{/if}}
@@ -121,15 +121,15 @@
       <dd>
         <button class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}" {{#if
           disabled}}disabled{{/if}}>
-          <span class="c-button__text">--width-short</span>
+          --width-short
         </button>
         <button class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}" {{#if
           disabled}}disabled{{/if}}>
-          <span class="c-button__text">--width-medium</span>
+          --width-medium
         </button>
         <button class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}" {{#if
           disabled}}disabled{{/if}}>
-          <span class="c-button__text">--width-long</span>
+          --width-long
       </dd>
 
       {{#if supports.link-tag}}
@@ -137,15 +137,15 @@
       <dd>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}"
           {{#if disabled}}disabled tabindex="-1" {{/if}}>
-          <span class="c-button__text">--width-short</span>
+          --width-short
         </a>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
           {{#if disabled}}disabled tabindex="-1" {{/if}}>
-          <span class="c-button__text">--width-medium</span>
+          --width-medium
         </a>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
           {{#if disabled}}disabled tabindex="-1" {{/if}}>
-          <span class="c-button__text">--width-long</span>
+          --width-long
         </a>
       </dd>
       {{/if}}
@@ -162,7 +162,7 @@
       <dd>
         <button class="c-button c-button--{{this._self.name}} c-button--size-small
           {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
-          <span class="c-button__text">--size-small</span>
+          --size-small
         </button>
       </dd>
 
@@ -171,7 +171,7 @@
       <dd>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--size-small
           {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1"{{/if}}>
-          <span class="c-button__text">--size-small</span>
+          --size-small
         </a>
       </dd>
       {{/if}}

package/src/lib/_imports/components/c-button.css

@@ -23,6 +23,9 @@
   align-items: center;
   justify-content: center;
 
+  line-height: 1; /* to make consistent vertical alignment of icons */
+  gap: 0.5ch; /* to add space between icons and text */
+
   /* To ensure identical <button> and <a> instances have same width */
   box-sizing: border-box;
 
@@ -32,7 +35,9 @@
 :--c-button:where(:not(:--disabled)) {
   cursor: pointer; /* WARNING: Opinionated */
 }
-:--c-button:has(:--c-button__icon) {
+/* To align buttons that have icons */
+/* FAQ: Doing for all buttons, for consistent behavior in possible edge case */
+:--c-button/*:has(.icon)*/ {
   vertical-align: middle;
 }
 
@@ -292,12 +297,11 @@ a:--c-button--is-busy {
   opacity: 0.5;
   pointer-events: none;
 }
-:--c-button--is-busy :--c-button__text {
+:--c-button--is-busy * {
   opacity: 0.5;
 }
 
 
-
 /* Modifiers: Sizes */
 
 :--c-button:where(:not(
@@ -331,15 +335,7 @@ a:--c-button--is-busy {
 
 /* Elements */
 
-:--c-button__icon--before {
-  margin-right: 0.5em;
-}
-:--c-button__icon--after {
-  margin-left: 0.5em;
-}
-
 /* To position Bootstrap spinner inside TACC's flex-based button */
 :--c-button .spinner-border {
   align-self: center;
-  margin-left: 0.5ch;
 }

package/src/lib/_imports/components/c-button.selectors.css

@@ -56,13 +56,3 @@
     [class*="button--size-small"],
     /* WARN: borrowing file to support Bootstrap */
     .btn-sm;
-
-@custom-selector :--c-button__text
-    [class*="button__text"];
-
-@custom-selector :--c-button__icon
-    [class*="button__icon"];
-@custom-selector :--c-button__icon--before
-    [class*="button__icon--before"];
-@custom-selector :--c-button__icon--after
-    [class*="button__icon--after"];

package/src/lib/_imports/components/c-card/_c-card--many-variable.hbs

@@ -27,7 +27,7 @@
 
     <a href="#" class="c-button c-button--primary">Action</a>
     <a href="#" class="c-button c-button--primary">
-        <i class="c-button__icon--before icon icon-push-right">&gt;</i>
+        <i class="icon icon-push-right">&gt;</i>
         Action + Icon
     </a>
 </article>

package/src/lib/_imports/components/cortal-icon/cortal-icon.hbs

@@ -88,8 +88,8 @@
         <div class="demo-list">
           {{#each in_buttons}}
           <button class="c-button c-button--{{this.type}}">
-            <i class="icon icon-{{this.icon}} c-button__icon--before"></i>
-            <span class="c-button__text">{{this.text}}</span>
+            <i class="icon icon-{{this.icon}}"></i>
+            {{this.text}}
           </button>
           {{/each}}
         </div>

package/src/lib/_imports/components/cortal-icon.css

@@ -26,6 +26,8 @@
   /* To mirror cortal.icon.font.css font-size */
   width: 1em;
   height: 1em;
+  /* To center icon (use case: in a link or paragraph & not inside a button) */
+  vertical-align: middle;
 }
 
 

package/src/lib/_imports/core-styles.bootstrap4.css

@@ -1,5 +1,6 @@
-/*! core-styles.bootstrap.css */
+/*! core-styles.bootstrap4.css */
 /* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
 
 @import url("./bootstrap4/components/btn.css");
+@import url("./bootstrap4/components/card.css");
 @import url("./bootstrap4/utilities/color.css");