@tacc/core-styles 0.7.0 → 0.8.0

package/src/lib/_imports/objects/o-fixed-header-table.css

@@ -0,0 +1,33 @@
+/*
+Fixed Header Table
+
+A table with a header that does not move, and a body that scrolls.
+
+Markup:
+<table class="o-fixed-header-table">
+    <thead>
+      <tr>
+        <th>A</th>
+        <th>B</th>
+        <th>C</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>A</td>
+        <td>B</td>
+        <td>C</td>
+      </tr>
+    </thead>
+</table>
+
+Styleguide Objects.FixedHeaderTable
+*/
+/* SEE: https://css-tricks.com/position-sticky-and-table-headers/ */
+.o-fixed-header-table th {
+  position: sticky;
+  top: 0;
+
+  z-index: 1; /* so table content (e.g. button)¹ does not scroll over <th> */
+  /* ¹ table content with a `position` value other than static */
+}

package/src/lib/_imports/objects/o-grid.css

@@ -15,8 +15,8 @@ Markup: o-grid.html
 
 Styleguide Objects.Grid
 */
-@import url("_imports/tools/media-queries.css");
-@import url("_imports/tools/x-grid.css");
+@import url("../tools/media-queries.css");
+@import url("../tools/x-grid.css");
 
 
 

package/src/lib/_imports/objects/o-offset-content.css

@@ -5,7 +5,7 @@ Content that should be offset from the flow of text within which it is placed.
 
 Styleguide Objects.OffsetContent
 */
-@import url("_imports/tools/media-queries.css");
+@import url("../tools/media-queries.css");
 
 
 

package/src/lib/_imports/objects/o-section.css

@@ -32,9 +32,9 @@ Markup: o-section.html
 
 Styleguide Objects.Section
 */
-@import url("_imports/tools/media-queries.css");
-@import url("_imports/tools/x-layout.css");
-@import url("_imports/tools/x-fake-border.css");
+@import url("../tools/media-queries.css");
+@import url("../tools/x-layout.css");
+@import url("../tools/x-fake-border.css");
 
 
 

package/src/lib/_imports/settings/font.css

@@ -20,6 +20,13 @@ Styleguide Settings.CustomProperties.Font
 */
 
 :root {
+  /* Family */
+  /* NOTE: Clients are expected to overwrite these values via their CSS */
+  --global-font-family--sans: sans-serif;
+  --global-font-family--serif: serif;
+  --global-font-family--mono: monospace;
+
+
   /* Size */
   /* SEE: https://confluence.tacc.utexas.edu/x/nh4FDg */
   /* CAVEAT: These font sizes assume root font is 10px or an equivalent value */

package/src/lib/_imports/tools/x-layout.css

@@ -11,7 +11,7 @@ Styles that allow re-usable layouts.
 
 Styleguide Tools.ExtendsAndMixins.Layout
 */
-@import url("_imports/tools/media-queries.css");
+@import url("../tools/media-queries.css");
 
 
 

package/src/lib/_imports/trumps/s-article-list.css

@@ -7,9 +7,9 @@ Markup: s-article-list.html
 
 Styleguide Trumps.Scopes.ArticleList
 */
-@import url("_imports/tools/x-truncate.css");
-@import url("_imports/tools/x-layout.css");
-@import url("_imports/tools/x-article-link.css");
+@import url("../tools/x-truncate.css");
+@import url("../tools/x-layout.css");
+@import url("../tools/x-article-link.css");
 
 
 

package/src/lib/_imports/trumps/s-article-preview.css

@@ -7,8 +7,8 @@ Markup: s-article-preview.html
 
 Styleguide Trumps.Scopes.ArticlePreview
 */
-@import url("_imports/tools/x-truncate.css");
-@import url("_imports/tools/x-article-link.css");
+@import url("../tools/x-truncate.css");
+@import url("../tools/x-article-link.css");
 
 
 

package/src/lib/_imports/trumps/s-breadcrumbs.css

@@ -25,7 +25,7 @@ Markup:
 
 Styleguide Trumps.Scopes.Breadcrumbs
 */
-@import url("_imports/tools/x-truncate.css");
+@import url("../tools/x-truncate.css");
 
 
 

package/src/lib/_imports/trumps/s-header.css

@@ -40,7 +40,7 @@ Styleguide Trumps.Scopes.Header
 
 /* Affiliation */
 
-/* SEE: taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css */
+/* SEE: ../branding_logos.css */
 
 /* Logo */
 

package/src/lib/_imports/trumps/s-system-specs.css

@@ -8,7 +8,7 @@ Styles for System Specifications content which assumes external code:
 
 Styleguide Trumps.Scopes.SystemSpecs
 */
-@import url("_imports/tools/media-queries.css");
+@import url("../tools/media-queries.css");
 
 
 

package/src/lib/_tests.css

@@ -5,7 +5,7 @@
 /* FAQ: This is a low-tech way to test plugins */
 /* USAGE:
    1. Build CSS.
-   2. Review `taccsite_cms/static/site_cms/css/build/_test.css` */
+   2. Review `../../build/_test.css` */
 /* NOTE: This file is not intended to be imported */
 
 @import url("_tests/postcss-extend.css");

package/dist/components/c-button/c-button_cms.css

@@ -1,2 +0,0 @@
-/*! @tacc/core-styles 0.6.0+ | MIT | github.com/TACC/Core-Styles */
-:root{--global-color-primary--xx-light:#fff;--global-color-primary--xx-light-rgb:255,255,255;--global-color-primary--x-light:#f4f4f4;--global-color-primary--x-light-rgb:244,244,244;--global-color-primary--light:#c6c6c6;--global-color-primary--normal:#afafaf;--global-color-primary--dark:#707070;--global-color-primary--x-dark:#484848;--global-color-primary--x-dark-rgb:72,72,72;--global-color-primary--xx-dark:#222;--global-color-primary--xx-dark-rgb:34,34,34;--global-color-accent--x-light:#e3d7fd;--global-color-accent--light:#a387ed;--global-color-accent--normal:#784fe8;--global-color-accent--dark:#6039cc;--global-color-accent--x-dark:#3d189b;--global-color-accent--alt:#d2cce7;--global-color-accent--weak:rgba(96,57,204,0.25098039215686274);--global-color-info--dark:var(--global-color-primary--x-dark);--global-color-info--normal:var(--global-color-primary--normal);--global-color-info--light:var(--global-color-primary--x-light);--global-color-success--normal:#43d130;--global-color-success--weak:rgba(67,209,48,0.12549019607843137);--global-color-success--alt:var(--global-color-warning--normal);--global-color-success--alt-weak:var(--global-color-warning--weak);--global-color-warning--normal:#c7ce1d;--global-color-warning--weak:rgba(199,206,29,0.12549019607843137);--global-color-warning--alt:var(--global-color-accent--dark);--global-color-warning--alt-weak:var(--global-color-accent--weak);--global-color-danger--normal:#eb6e6e;--global-color-danger--weak:rgba(235,110,110,0.12549019607843137);--global-color-background--app:var(--global-color-primary--xx-light)}:root{--global-border-width--normal:1px;--global-border--normal:var(--global-border-width--normal) solid var(--global-color-primary--normal);--global-border-width--thick:2px;--global-border--thick:var(--global-border-width--thick) solid var(--global-color-primary--normal);--global-border-width--x-thick:3px;--global-border--x-thick:var(--global-border-width--x-thick) solid var(--global-color-primary--normal)}:root{--global-color-accent--x-light:#f2dfbd;--global-color-accent--light:#bda374;--global-color-accent--normal:#877453;--global-color-accent--dark:#64563e;--global-color-accent--x-dark:#403014;--global-color-accent--alt:#e0d8c9;--global-color-accent--weak:rgba(157,112,33,0.25098039215686274)}

package/dist/settings/color.cms.css

@@ -1,2 +0,0 @@
-/*! @tacc/core-styles 0.6.0+ | MIT | github.com/TACC/Core-Styles */
-:root{--global-color-accent--x-light:#f2dfbd;--global-color-accent--light:#bda374;--global-color-accent--normal:#877453;--global-color-accent--dark:#64563e;--global-color-accent--x-dark:#403014;--global-color-accent--alt:#e0d8c9;--global-color-accent--weak:rgba(157,112,33,0.25098039215686274)}

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

@@ -1,35 +0,0 @@
-<button class="c-button c-button--secondary">
-  <i class="c-button__icon--before" data-icon="X">(clear input)</i>
-  <span class="c-button__text">Cancel</span>
-</button>
-
-<button class="c-button c-button--primary">
-  <i class="c-button__icon--before" data-icon="✓">(check input)</i>
-  <span class="c-button__text">Confirm</span>
-  <i class="c-button__icon--after" data-icon="→">(and exit)</i>
-</button>
-
-<button class="c-button c-button--secondary">
-  <span class="c-button__text">Skip</span>
-  <i class="c-button__icon--after" data-icon="→">(and move to next form)</i>
-</button>
-
-<div class="display: flex; gap: 5px">
-  <button class="c-button c-button--tertiary">1</button>
-  <button class="c-button c-button--tertiary">2</button>
-  <button class="c-button c-button--tertiary">3</button>
-</div>
-
-<button class="c-button c-button--is-active">
-  <span class="c-button__text">Current Item</span>
-</button>
-
-<button class="c-button c-button--as-link">Return to Previous Screen</button>
-
-<button class="c-button c-button--secondary c-button--is-busy">
-  <span class="c-button__text">Submit (Secondary)</span>
-</button>
-
-<button class="c-button c-button--primary c-button--is-busy">
-  <span class="c-button__text">Submit (Primary)</span>
-</button>