@tacc/core-styles 0.7.1 → 0.8.2

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-float-content.css

@@ -0,0 +1,45 @@
+/*
+Float Content (Responsive)
+
+Content that should be:
+1. floated in the flow of text within which it is placed
+2. not floated at certain viewports
+
+Styleguide Objects.FloatContent
+*/
+@import url("../tools/media-queries.css");
+
+
+
+@custom-selector :--o-float-content
+  .o-float-content--left,
+  .o-float-content--right;
+
+
+
+:--o-float-content {
+	--buffer: calc( 2 * var(--global-space--grid-gap) );
+}
+
+@media only screen and (--medium-and-above) {
+	.o-float-content--right {
+		float: right;
+		margin-left: var(--buffer);
+	}
+	.o-float-content--right + .o-float-content--right { clear: right; }
+
+	.o-float-content--left {
+		float: left;
+		margin-right: var(--buffer);
+	}
+	.o-float-content--left + .o-float-content--left { clear: left; }
+
+  .figure:is(:--o-float-content) .figure-caption {
+    padding-right: 125px;
+  }
+}
+@media only screen and (--medium-and-above) and (--max-wide-and-below) {
+  :--o-float-content {
+    max-width: 560px;
+  }
+}

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

@@ -1,11 +1,13 @@
 /*
-Offset Content
+Offset Content (Responsive)
 
-Content that should be offset from the flow of text within which it is placed.
+Content that should be:
+1. offset from the flow of text within which it is placed
+2. not offset at certain viewports
 
 Styleguide Objects.OffsetContent
 */
-@import url("_imports/tools/media-queries.css");
+@import url("../tools/media-queries.css");
 
 
 
@@ -16,7 +18,7 @@ Styleguide Objects.OffsetContent
 
 
 :--o-offset-content {
-  --offset-distance: min(15vw, 410px);
+  	--offset-distance: min(15vw, 410px);
 	--buffer: calc( 2 * var(--global-space--grid-gap) );
 }
 

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/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>