@tacc/core-styles 0.7.0 → 0.8.0

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

@@ -1,33 +1,19 @@
-/*
-Button
-
-A button that may have icon(s) before and/or after its text.
-
-.c-button--primary - A primary (expected) user action
-.c-button--secondary - For an optional user action
-.c-button--tertiary - A button that represents inactive buttons among many
-.c-button--is-active - A button that represents the one active button among many
-.c-button--as-link - A button that visually resembles a link
-.c-button--is-busy - A clicked button that started an incomplete process
-
-Markup: c-button.html
-
-Styleguide Components.Button
-*/
-@import url("_imports/tools/x-truncate.css");
+@import url("../tools/x-truncate.css");
 
+@custom-selector :--disabled
+  :disabled,
+  :where(a[disabled]);
 
 
 
 
 /* Base */
 
-[class*='c-button'] {
+.c-button {
   --min-width: 75px;
   --mid-width: 110px;
   --max-width: 130px;
-}
-.c-button {
+
   display: inline-block;
 
   border-width: var(--global-border-width--normal);
@@ -38,17 +24,20 @@ Styleguide Components.Button
 
   @extend %x-truncate--one-line;
 }
+a.c-button {
+  text-decoration: none;
+}
 
-.c-button:not(:disabled) {
+.c-button:not(:--disabled) {
   cursor: pointer; /* WARNING: Opinionated */
 }
-.c-button:disabled:not(.c-button--is-busy) {
+.c-button:--disabled:not(.c-button--is-busy) {
   color: var(--global-color-primary--dark);
   border-color: var(--global-color-primary--dark);
 
   pointer-events: none;
 }
-.c-button:disabled:not(.c-button--is-busy, .c-button--as-link) {
+.c-button:--disabled:not(.c-button--is-busy, .c-button--as-link) {
   background-color: var(--global-color-primary--xx-light);
 }
 
@@ -58,6 +47,8 @@ Styleguide Components.Button
 
 /* Modifiers */
 
+
+
 /* Modifiers: Types */
 
 .c-button--primary,
@@ -101,7 +92,7 @@ Styleguide Components.Button
   .c-button:hover,
   .c-button:focus,
   .c-button:active,
-  .c-button:disabled
+  .c-button:--disabled
 ) {
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-accent--normal);
@@ -136,13 +127,13 @@ Styleguide Components.Button
 }
 
 .c-button--secondary.c-button--is-busy,
-.c-button--secondary:not(.c-button:hover, .c-button:focus, .c-button:active, .c-button:disabled) {
+.c-button--secondary:not(.c-button:hover, .c-button:focus, .c-button:active, .c-button:--disabled) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-primary--x-light);
   border-color: var(--global-color-primary--xx-dark);
 }
 
-.c-button/* for specificity to override */.c-button--secondary:disabled {
+.c-button/* for specificity to override */.c-button--secondary:--disabled {
   background-color: var(--global-color-primary--x-light);
 }
 
@@ -178,7 +169,7 @@ Styleguide Components.Button
   .c-button:hover,
   .c-button:focus,
   .c-button:active,
-  .c-button:disabled
+  .c-button:--disabled
 ) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-primary--xx-light);
@@ -217,7 +208,7 @@ Styleguide Components.Button
   .c-button:hover,
   .c-button:focus,
   .c-button:active,
-  .c-button:disabled
+  .c-button:--disabled
 ) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-accent--x-light);
@@ -233,7 +224,7 @@ Styleguide Components.Button
   border: unset;
   padding-inline: unset;
 }
-.c-button--as-link:not(:disabled):hover {
+.c-button--as-link:not(:--disabled):hover {
   text-decoration: underline;
 }
 
@@ -246,8 +237,17 @@ Styleguide Components.Button
   opacity: 0.3;
 }
 
+
+
 /* Modifiers: Sizes */
 
+.c-button:not(
+  .c-button--width-short,
+  .c-button--width-medium,
+  .c-button--width-long,
+  .c-button--size-small,
+  .c-button--as-link
+),
 .c-button--width-short {
   width: var(--min-width);
 }
@@ -269,6 +269,10 @@ Styleguide Components.Button
 
 /* Elements */
 
+.c-button > * {
+  vertical-align: middle;
+}
+
 .c-button__icon--before {
   margin-right: 0.5em;
 }

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

@@ -7,8 +7,8 @@ Markup: c-callout.html
 
 Styleguide Components.Callout
 */
-@import url("_imports/tools/media-queries.css");
-@import url("_imports/tools/x-article-link.css");
+@import url("../tools/media-queries.css");
+@import url("../tools/x-article-link.css");
 
 
 

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

@@ -11,7 +11,7 @@ Markup: c-card.html
 
 Styleguide Components.Card
 */
-@import url("_imports/tools/x-article-link.css");
+@import url("../tools/x-article-link.css");
 
 /* Modifiers */
 

package/src/lib/_imports/components/c-data-list.css

@@ -29,7 +29,7 @@ Markup: c-data-list.html
 
 Styleguide Components.DataList
 */
-@import url("_imports/tools/x-truncate.css");
+@import url("../tools/x-truncate.css");
 
 
 

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

@@ -17,7 +17,7 @@ Markup: c-nav.html
 
 Styleguide Components.Nav
 */
-@import url("_imports/tools/media-queries.css");
+@import url("../tools/media-queries.css");
 
 
 

package/src/lib/_imports/components/c-see-all-link.css

@@ -11,7 +11,7 @@ Markup:
 
 Styleguide Components.SeeAllLink
 */
-@import url("_imports/tools/x-truncate.css");
+@import url("../tools/x-truncate.css");
 
 
 

package/src/lib/_imports/components/c-show-more.css

@@ -11,7 +11,7 @@ A CSS-only way to support a "Show More…" feature. It requires a container and
 
 Styleguide: Components.ShowMore
 */
-@import url("_imports/tools/x-truncate.css");
+@import url("../tools/x-truncate.css");
 
 /* Truncation */
 

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

@@ -0,0 +1,79 @@
+/*
+Container (Bootstrap)
+
+Provide Cortal Icon styles. See:
+
+- [Cortal Icons (Confluence)](https://confluence.tacc.utexas.edu/x/MCAFDg)
+
+Styleguide Components.Cortal.Icon
+*/
+@import url('./cortal.icon.font.css');
+
+
+
+/* IMPORTANT: Do not add support for icons that neglect `.icon` class */
+/* FAQ: Users should build their icons to spec */
+
+
+
+/* Aliases */
+/* SEE: https://github.com/TACC/Core-Portal/blob/22405ca/client/src/styles/trumps/icon.css#L57 */
+
+/* CAVEAT: Urgent use only; always prefer official icon names */
+
+
+
+/* Overrides */
+
+/* To overwrite `cortal.icon.fonts.css` icon sizes */
+/* SEE: https://confluence.tacc.utexas.edu/x/dgB_CQ */
+/* CAVEAT: Assumes 1rem = 10px */
+/* relative units */
+.icon-sm {
+  font-size: 1.8rem;
+}
+.icon-md {
+  font-size: 2.4rem;
+}
+.icon-lg {
+  font-size: 6.4rem;
+}
+/* absolute units */
+.icon-18 {
+  font-size: 18px;
+}
+.icon-24 {
+  font-size: 24px;
+}
+.icon-64 {
+  font-size: 64px;
+}
+.icon-16,
+.icon-32 { font-size: unset /* to disallow unsupported font sizes */ }
+
+
+
+/* Placeholders */
+/* FAQ: Some icons do not exist, but can be faked (with caveats) */
+
+/* To create a small "chevron" */
+/* CAVEAT: Use `--color` to set color */
+[class*='icon-nav-'] {
+  border: solid var(--color, var(--global-color-primary--xx-dark));
+  border-width: 0 0.25em 0.25em 0;
+  font-size: 8px;
+  /* display: inline-block; */ /* let `.icon`'s `display: inline-flex;` do it */
+  /* padding: var(--size); */ /* let `.icon`'s equal `width` & `height` do it */
+}
+.icon-nav-up {
+  transform: rotate(-135deg);
+}
+.icon-nav-left {
+  transform: rotate(135deg);
+}
+.icon-nav-down {
+  transform: rotate(45deg);
+}
+.icon-nav-right {
+  transform: rotate(-45deg);
+}