@tacc/core-styles 2.4.1 → 2.6.0

package/dist/trumps/tacc-search-bar.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.4.1+ | MIT | github.com/TACC/Core-Styles */:host{--button-horz-pad:10px;--input-horz-pad:0.125em;--input-height:26px;--button-font-size:18px;--input-font-size:14px}:host{font-size:0}:host [part=form]{align-items:center;display:flex;font-family:Roboto;position:relative}:host [part=button]{align-items:center;background-color:transparent;border:none;box-sizing:content-box;color:var(--global-color-primary--xx-light);font-size:16px;font-size:var(--button-font-size);height:var(--input-height,38px);left:0;margin:0;padding:0 var(--button-horz-pad);position:absolute;top:50%;transform:translateY(-50%)}:host [part=input]{background-color:#313131;border:var(--global-border-width--normal) solid var(--global-color-primary--dark);border-radius:5px;color:var(--global-color-primary--xx-light);display:block;font-size:var(--input-font-size);height:var(--input-height);margin:0;padding-bottom:0;padding-left:calc(var(--button-horz-pad) + var(--button-font-size) + var(--button-horz-pad) + var(--input-horz-pad));padding-right:var(--input-horz-pad);padding-top:0;width:100%}:host [part=input]::-moz-placeholder{color:var(--global-color-primary--xx-light);opacity:.5}:host [part=input]::placeholder{color:var(--global-color-primary--xx-light);opacity:.5}
+/*! @tacc/core-styles 2.6.0+ | MIT | github.com/TACC/Core-Styles */:host{--button-horz-pad:10px;--input-horz-pad:0.125em;--input-height:26px;--button-font-size:18px;--input-font-size:14px}:host{font-size:0}:host [part=form]{align-items:center;display:flex;font-family:Roboto;position:relative}:host [part=button]{align-items:center;background-color:transparent;border:none;box-sizing:content-box;color:var(--global-color-primary--xx-light);font-size:16px;font-size:var(--button-font-size);height:var(--input-height,38px);left:0;margin:0;padding:0 var(--button-horz-pad);position:absolute;top:50%;transform:translateY(-50%)}:host [part=input]{background-color:#313131;border:var(--global-border-width--normal) solid var(--global-color-primary--dark);border-radius:5px;color:var(--global-color-primary--xx-light);display:block;font-size:var(--input-font-size);height:var(--input-height);margin:0;padding-bottom:0;padding-left:calc(var(--button-horz-pad) + var(--button-font-size) + var(--button-horz-pad) + var(--input-horz-pad));padding-right:var(--input-horz-pad);padding-top:0;width:100%}:host [part=input]::-moz-placeholder{color:var(--global-color-primary--xx-light);opacity:.5}:host [part=input]::placeholder{color:var(--global-color-primary--xx-light);opacity:.5}

package/dist/trumps/tacc-search-bar.theme-has-dark-logo.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.4.1+ | MIT | github.com/TACC/Core-Styles */:host{--button-horz-pad:10px;--input-horz-pad:0.125em;--input-height:26px;--button-font-size:18px;--input-font-size:14px}:host{font-size:0}:host [part=form]{align-items:center;display:flex;font-family:Roboto;position:relative}:host [part=button]{align-items:center;background-color:transparent;border:none;box-sizing:content-box;color:var(--global-color-primary--x-dark);font-size:16px;font-size:var(--button-font-size);height:var(--input-height,38px);left:0;margin:0;padding:0 var(--button-horz-pad);position:absolute;top:50%;transform:translateY(-50%)}:host [part=input]{background-color:var(--global-color-primary--xx-light);border:var(--global-border-width--normal) solid #d8d8d8;border-radius:5px;color:var(--global-color-primary--x-dark);display:block;font-size:var(--input-font-size);height:var(--input-height);margin:0;padding-bottom:0;padding-left:calc(var(--button-horz-pad) + var(--button-font-size) + var(--button-horz-pad) + var(--input-horz-pad));padding-right:var(--input-horz-pad);padding-top:0;width:100%}:host [part=input]::-moz-placeholder{color:var(--global-color-primary--x-dark);opacity:.5}:host [part=input]::placeholder{color:var(--global-color-primary--x-dark);opacity:.5}
+/*! @tacc/core-styles 2.6.0+ | MIT | github.com/TACC/Core-Styles */:host{--button-horz-pad:10px;--input-horz-pad:0.125em;--input-height:26px;--button-font-size:18px;--input-font-size:14px}:host{font-size:0}:host [part=form]{align-items:center;display:flex;font-family:Roboto;position:relative}:host [part=button]{align-items:center;background-color:transparent;border:none;box-sizing:content-box;color:var(--global-color-primary--x-dark);font-size:16px;font-size:var(--button-font-size);height:var(--input-height,38px);left:0;margin:0;padding:0 var(--button-horz-pad);position:absolute;top:50%;transform:translateY(-50%)}:host [part=input]{background-color:var(--global-color-primary--xx-light);border:var(--global-border-width--normal) solid #d8d8d8;border-radius:5px;color:var(--global-color-primary--x-dark);display:block;font-size:var(--input-font-size);height:var(--input-height);margin:0;padding-bottom:0;padding-left:calc(var(--button-horz-pad) + var(--button-font-size) + var(--button-horz-pad) + var(--input-horz-pad));padding-right:var(--input-horz-pad);padding-top:0;width:100%}:host [part=input]::-moz-placeholder{color:var(--global-color-primary--x-dark);opacity:.5}:host [part=input]::placeholder{color:var(--global-color-primary--x-dark);opacity:.5}

package/dist/trumps/u-empty.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.4.1+ | MIT | github.com/TACC/Core-Styles */
+/*! @tacc/core-styles 2.6.0+ | MIT | github.com/TACC/Core-Styles */

package/dist/trumps/u-hide.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.4.1+ | MIT | github.com/TACC/Core-Styles */.u-hide--visually:not(:focus,:active){clip:rect(0 0 0 0);border:none;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
+/*! @tacc/core-styles 2.6.0+ | MIT | github.com/TACC/Core-Styles */.u-hide--visually:not(:focus,:active){clip:rect(0 0 0 0);border:none;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

package/dist/trumps/u-mailto-text-replace.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.4.1+ | MIT | github.com/TACC/Core-Styles */.u-mailto-text-replace[data-user][data-domain]{font-size:0;visibility:hidden}.u-mailto-text-replace[data-user][data-domain]:before{content:attr(data-user) "@" attr(data-domain);display:inline;font-size:medium;visibility:visible}
+/*! @tacc/core-styles 2.6.0+ | MIT | github.com/TACC/Core-Styles */.u-mailto-text-replace[data-user][data-domain]{font-size:0;visibility:hidden}.u-mailto-text-replace[data-user][data-domain]:before{content:attr(data-user) "@" attr(data-domain);display:inline;font-size:medium;visibility:visible}

package/dist/trumps/u-nested-text-content.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.4.1+ | MIT | github.com/TACC/Core-Styles */.u-nested-text-content{padding-left:var(--global-space--list-indent)}
+/*! @tacc/core-styles 2.6.0+ | MIT | github.com/TACC/Core-Styles */.u-nested-text-content{padding-left:var(--global-space--list-indent)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tacc/core-styles",
-  "version": "2.4.1",
+  "version": "2.6.0",
   "license": "MIT",
   "author": "TACC ACI WMA <wma-portals@gmail.com>",
   "description": "CSS source and processor for TACC Core-CMS and Core-Portal.",

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

@@ -0,0 +1,21 @@
+<dl>
+  <dt>island</dt>
+  <dd>
+    <aside class="c-island">
+      <p>{{> @text-of-one-paragraph-short }}</p>
+    </aside>
+  </dd>
+  <dt>
+    island with paragraphs
+    <small>(and manual <code>&lt;hr /&gt;</code>'s)</small>
+  </dt>
+  <dd>
+    <aside class="c-island">
+      <p>{{> @text-of-one-paragraph-short }}</p>
+      <hr />
+      <p>{{> @text-of-one-paragraph-short }}</p>
+      <hr />
+      <p>{{> @text-of-one-paragraph-short }}</p>
+    </aside>
+  </dd>
+</dl>

package/src/lib/_imports/components/c-island/demo.css

@@ -0,0 +1,6 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+.c-tag {
+  color: var(--global-color-primary--xx-light);
+  background-color: var(--global-color-primary--xxx-dark);
+}

package/src/lib/_imports/components/c-island/readme.md

@@ -0,0 +1,12 @@
+A portion of a document whose content is only indirectly related to the document's main content.
+
+> **☞ Remember**
+>
+> The [`<aside>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) is usually the appropriate element for this pattern.
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

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

@@ -0,0 +1,22 @@
+@custom-selector :--c-island
+  .island,
+  .c-island;
+
+:--c-island {
+  padding: 1em 2em;
+
+  border-top-style: solid;
+  border-top-width: var(--global-border-width--thick);
+  border-top-color: var(--global-color-tertiary--normal);
+
+  background-color: var(--global-color-primary--x-light);
+
+  font-style: italic;
+}
+
+:--c-island hr {
+  margin-block: 2em;
+
+  border-top: none;
+  border-bottom: var(--global-border-width--normal) solid currentColor;
+}

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

@@ -0,0 +1,22 @@
+<dl>
+  <dt><code>&lt;span&gt;</code> <small>e.g. <code>display: inline</code></small></dt>
+  <dd>
+    <span class="c-tag">i am tag</span>
+  </dd>
+  <dt><code>&lt;span <small>style="display: inline-block"</small>&gt;</code></dt>
+  <dd>
+    <span class="c-tag" style="display: inline-block">i am tag</span>
+  </dd>
+  <dt><code>&lt;div&gt;</code> <small>e.g. <code>display: block</code></small></dt>
+  <dd>
+    <div class="c-tag">i am tag</div>
+  </dd>
+  <dt><code>&lt;a&gt;</code></dt>
+  <dd>
+    <a href="#" class="c-tag">i am tag</a>
+  </dd>
+  <dt><code>&lt;button&gt;</code></dt>
+  <dd>
+    <button class="c-tag">i am tag</button>
+  </dd>
+</dl>

package/src/lib/_imports/components/c-tag/demo.css

@@ -0,0 +1,6 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+.c-tag {
+  color: var(--global-color-primary--xx-light);
+  background-color: var(--global-color-primary--xxx-dark);
+}

package/src/lib/_imports/components/c-tag/readme.md

@@ -0,0 +1 @@
+To organize similar elements e.g. category, tag, type, group.

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

@@ -0,0 +1,15 @@
+@import url("./c-tag.selectors.css");
+
+:--c-tag {
+  /* Client must set display (inline-)block|flex|grid|etc. */
+  /* FAQ: We should not assume the display of an element client controls */
+  /* display: inline-block; */
+
+  line-height: 1; /* so padding-block can be consistent */
+  padding: 0.5rem;
+  width: min-content;
+
+  font-weight: var(--bold);
+  text-transform: uppercase;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,5 @@
+@import url("../tools/selectors.css");
+
+@custom-selector :--c-tag
+    .c-tag,
+    [class*="tag--"];

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

@@ -38,10 +38,12 @@
 @import url("./components/c-data-list.css");
 @import url("./components/c-footer.css");
 @import url("./components/c-form.css");
+@import url("./components/c-island.css");
 @import url("./components/c-nav.css");
 @import url("./components/c-page.css");
 @import url("./components/c-recognition.css");
 @import url("./components/c-see-all-link.css");
+@import url("./components/c-tag.css");
 
 /* TRUMPS */
 @import url("./trumps/s-blockquote.css");

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

@@ -0,0 +1,11 @@
+/*! core-styles.wysiwig.css */
+/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
+
+/* Organize via ITCSS */
+/* https://confluence.tacc.utexas.edu/x/IAA9Cw */
+
+/* SETTINGS */
+@import url("./core-styles.settings.css");
+
+/* COMPONENTS */
+@import url("./components/c-island.css");

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

@@ -13,5 +13,5 @@
   --global-font-size--large: 1.8rem;
   --global-font-size--x-large: 2.1rem;
   --global-font-size--xx-large: 2.8rem;
-  --global-font-size--xxx-large: var(--global-font-size--xx-large);
+  --global-font-size--xxx-large: 3.2rem;
 }