@tacc/core-styles 2.6.2 → 2.7.0

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

@@ -7,6 +7,7 @@
     /* TODO: When Portal does not load core-styles.cms.css remove the :not(…) */
     .card:not(:is(:--portal-content, .modal) *),
     [class*="card--"];
+
 @custom-selector :--c-card--standard
     .c-card--standard,
     .card--standard;
@@ -23,6 +24,7 @@
     .c-card--standard-1,
     .c-card--standard-2,
     .c-card--standard-3;
+
 @custom-selector :--c-card--plain
     .c-card--plain,
     .card--plain,
@@ -33,6 +35,18 @@
 @custom-selector :--c-card--plain-hr-bottom
     .c-card--plain-hr-bottom,
     .card--plain-hr-bottom;
+
 @custom-selector :--c-card--image
-    .c-card--image,
-    .card--image;
+    [class*="card--image-"];
+@custom-selector :--c-card--image-top
+    .c-card--image-top,
+    .card--image-top;
+@custom-selector :--c-card--image-bottom
+    .c-card--image-bottom,
+    .card--image-bottom;
+@custom-selector :--c-card--image-left
+    .c-card--image-left,
+    .card--image-left;
+@custom-selector :--c-card--image-right
+    .c-card--image-right,
+    .card--image-right;

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

@@ -1,7 +1,5 @@
 {{#warning}}
-<p class="c-message c-message--scope-global">
-  {{{ this }}}
-</p>
+{{> @message tag="p" content=this }}
 {{/warning}}
 
 <form action="" method="POST" enctype="multipart/form-data" class="c-form">

package/src/lib/_imports/components/c-message/_c-message--single.hbs

@@ -1,3 +1,7 @@
-<div class="c-message c-message--type-{{ type }} c-message--scope-{{ scope }}">
-  <p><strong>{{ title }}:</strong> {{{ content }}} <a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.</p>
-</div>
+{{> @message
+    type=this.type
+    scope=this.scope
+    title=this.title
+    content=this.content
+    extra_content='<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.'
+}}

package/src/lib/_imports/components/django-cms-forms/django-cms-forms.hbs

@@ -1,6 +1,7 @@
-<p class="c-message c-message--scope-global">
-  This component is maintained simuiltaneously with <a href="{{path '../detail/c-form' }}" target="_parent">C Form</code></a> and should look identical. Eventually, the two should have a single source of truth. To learn more, read <a href="https://confluence.tacc.utexas.edu/x/vJd9E" target="_blank">(Confluence) APCD - Form Markup &amp; Styles</a>.
-</p>
+{{> @message
+    tag="p"
+    content='This component is maintained simuiltaneously with <a href="../detail/c-form" target="_parent">C Form</code></a> and should look identical. Eventually, the two should have a single source of truth. To learn more, read <a href="https://confluence.tacc.utexas.edu/x/vJd9E" target="_blank">(Confluence) APCD - Form Markup &amp; Styles</a>.'
+}}
 <div class="forms">
 
   <h3 class="title">Title of Form</h3>

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

@@ -18,6 +18,7 @@
 /* (none) */
 
 /* COMPONENTS */
+@import url("./components/c-message.css");
 @import url("./components/demo.css");
 
 /* TRUMPS */

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

@@ -22,12 +22,16 @@
 @import url("./elements/table.docs.css");
 
 /* OBJECTS */
-/* (none) */
+@import url("./objects/o-section.css");
+@import url("./objects/o-section--docs.css");
 
 /* COMPONENTS */
 @import url("./components/pymdownx--tabbed.css");
 @import url("./components/admonition.css");
 @import url("./components/align.css");
+@import url("./components/c-card.css");
+@import url("./components/c-card--from-tup-cms.css");
+@import url("./components/c-card--docs.css");
 @import url("./components/tacc-docs.css");
 
 /* TRUMPS */

package/src/lib/_imports/elements/html-elements.docs.css

@@ -2,11 +2,6 @@
 @import url("../tools/x-figure.css");
 @import url("../tools/x-blockquote.css");
 
-/* To scope these styles to main content (i.e. not header, not navbar) */
-:--main-content {
-  font-size: var(--global-font-size--medium);
-}
-
 /* To style elements that have captions */
 figure { @extend .x-figure; }
 figcaption { @extend .x-figure-caption; }

package/src/lib/_imports/objects/o-section/config.yml

@@ -16,3 +16,7 @@ variants:
     label: (Style) Dark
     context:
       modifier: style-dark
+  - name: docs
+    status: ready
+    context:
+      shouldLoadDocs: true

package/src/lib/_imports/objects/o-section/o-section--docs.hbs

@@ -0,0 +1,20 @@
+{{> @message
+    tag="p"
+    content="The <code>o-section--has-border</code> feature will be made available for all clients in the future."
+}}
+<section class="o-section o-section--style-light o-section--has-border">
+    <h2>Section (Style Light, Has Border)</h2>
+    <p>{{> @text-of-one-paragraph-with-actions }}</p>
+</section>
+<section class="o-section o-section--style-muted o-section--has-border">
+    <h2>Section (Style Muted, Has Border)</h2>
+    <p>{{> @text-of-one-paragraph-with-actions }}</p>
+</section>
+<section class="o-section o-section--style-light o-section--has-border">
+    <h2>Section (Style Light, Has Border)</h2>
+    <p>{{> @text-of-one-paragraph-with-actions }}</p>
+</section>
+<section class="o-section o-section--style-muted o-section--has-border">
+    <h2>Section (Style Muted, Has Border)</h2>
+    <p>{{> @text-of-one-paragraph-with-actions }}</p>
+</section>

package/src/lib/_imports/objects/o-section/o-section.readme.md

@@ -0,0 +1,8 @@
+Adds one fix and one feature to [default sections]({{path './o-section' }}):
+
+- Ensures section background is wide enough on "god-wide" viewports.
+- Adds border modifier:
+
+  | Class (Std.)              | Class (Alt.)     | Description
+  | - | - | - |
+  | `.o-section--has-border`  | `.section--border`  | add top and bottom border

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

@@ -0,0 +1,45 @@
+@import url("./o-section.selectors.css");
+
+
+
+/* To fix section background on god-wide screens */
+/* CAVEAT: This just pushes the problem to even wider screens */
+:--o-section--muted {
+  /* FAQ: Mimics Core-Styles except changes any "50" to "25" */
+  --box-shadow--fake-bkgd:
+    25vw 0 var(--color--bkgd), -25vw 0 var(--color--bkgd);
+}
+
+
+
+/* To add border to .o-section's */
+:--o-section--border {
+  --border-width: var(--global-border-width--normal);
+  --border-width-neg: calc( -1 * var(--border-width) );
+  --border-color: var(--global-color-primary--dark);
+
+  --line-top:
+    0 var(--border-width-neg) var(--border-color);
+  --line-top-left:
+    -25vw var(--border-width-neg) var(--border-color);
+  --line-top-right:
+    25vw var(--border-width-neg) var(--border-color);
+
+  --line-bottom:
+    0 var(--border-width) var(--border-color);
+  --line-bottom-left:
+    -25vw var(--border-width) var(--border-color);
+  --line-bottom-right:
+    25vw var(--border-width) var(--border-color);
+
+  --fake-bkgd: var(--box-shadow--fake-bkgd); /* from core-styles o-section */
+
+  box-shadow:
+    var(--fake-bkgd),
+    var(--line-top),
+    var(--line-top-left),
+    var(--line-top-right),
+    var(--line-bottom),
+    var(--line-bottom-left),
+    var(--line-bottom-right);
+}

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

@@ -18,3 +18,6 @@
 @custom-selector :--o-section--dark
     .o-section--style-dark,
     .section--dark;
+@custom-selector :--o-section--border
+    .o-section--has-border,
+    .section--border;

package/src/lib/_imports/objects/o-table-wrap/o-table-wrap.hbs

@@ -3,7 +3,12 @@
 </div>
 {{#> @partial-block}}
 <div>
-  <p class="c-message c-message--type-info c-message--scope-section">To render a table, choose a modifier class from the navigation panel.</p>
+  {{> @message
+      tag="p"
+      type="info"
+      scope="section"
+      content="To render a table, choose a modifier class from the navigation panel."
+  }}
 </div>
 {{/@partial-block}}
 <div>

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

@@ -1,7 +1,8 @@
 {{#if shouldShowSizeMessage}}
-<p class="c-message c-message--scope-global">
-  There are currently <em><strong>no</strong> default font sizes <strong>nor</strong> default font families</em>. A client must load <strong>CMS</strong> styles or <strong>Portal</strong> styles or their own custom font sizes.
-</p>
+{{> @message
+    tag="p"
+    content='There are currently <em><strong>no</strong> default font sizes <strong>nor</strong> default font families</em>. A client must load <strong>CMS</strong> styles or <strong>Portal</strong> styles or their own custom font sizes.'
+}}
 {{/if}}
 <dl>
   <dt>Family</dt>