@tacc/core-styles 0.5.1

package/source/_imports/trumps/icon.css

@@ -0,0 +1,31 @@
+/* WARNING: This file is copied from Portal repo */
+/* TODO: Share source code between CMS, Portal, & User Guide */
+/* SEE: https://github.com/TACC/Frontera-Portal/blob/master/client/src/styles/trumps/icon.css */
+
+/* TRUMPS: Icons */
+@import url('./icon.fonts.css');
+
+.icon {
+  width: 1em;
+  height: 1em;
+  font-size: 1.125em; /* ~18px (16px design * 1.2 design-to-app ratio) (rounded) */
+  vertical-align: middle;
+  display: inline-flex; /* `flex` to align `::before`; `inline` to not trigger new line */
+                        /* a modern slimmer alternative to `&::before { display: block; }` */
+}
+
+/* Aliases */
+/* .icon-contract */.icon-collapse::before {
+  content: "\e915";
+}
+
+
+
+/* Overrides */
+
+/* Align wrapped button text in buttons that have icons */
+/* HACK: Placeholder style until UI is finalized and componetized */
+.btn .icon + span,
+.btn .loading-icon + span {
+  vertical-align: middle;
+}

package/source/_imports/trumps/icon.fonts.css

@@ -0,0 +1,316 @@
+/* WARNING: This file is copied from Portal repo */
+/* TODO: Share source code between CMS, Portal, & User Guide */
+/* SEE: https://github.com/TACC/Frontera-Portal/blob/master/client/src/styles/trumps/icon.fonts.css */
+
+@font-face {
+  font-family: 'Cortal-Icons';
+  /* TACC: Use `woff` because it is `ttf` optimized for web, and browser support */
+  /* TACC: Renamed to include version and correct path */
+  src: url('../../fonts/Cortal-Icons-1.2.woff?vrusnv') format('woff');
+  /*
+  src:  url('fonts/Cortal-Icons.eot?vrusnv');
+  src:  url('fonts/Cortal-Icons.eot?vrusnv#iefix') format('embedded-opentype'),
+    url('fonts/Cortal-Icons.ttf?vrusnv') format('truetype'),
+    url('fonts/Cortal-Icons.woff?vrusnv') format('woff'),
+    url('fonts/Cortal-Icons.svg?vrusnv#Cortal-Icons') format('svg');
+  */
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'Cortal-Icons' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* TACC: Remove support for extra icon that should not be used */
+/*
+.icon-jobs-history:before {
+  content: "\e95a";
+}
+*/
+.icon-jobs:before {
+  content: "\e95b";
+}
+.icon-zipped:before {
+  content: "\e957";
+}
+.icon-compress:before {
+  content: "\e958";
+}
+.icon-extract:before {
+  content: "\e959";
+}
+.icon-add-file:before {
+  content: "\e900";
+}
+.icon-add-folder:before {
+  content: "\e901";
+}
+.icon-add-project:before {
+  content: "\e902";
+}
+.icon-add:before {
+  content: "\e903";
+}
+.icon-alert:before {
+  content: "\e904";
+}
+.icon-allocations:before {
+  content: "\e905";
+}
+.icon-applications:before {
+  content: "\e906";
+}
+.icon-approved-boxed-reverse:before {
+  content: "\e907";
+}
+.icon-approved-boxed:before {
+  content: "\e908";
+}
+.icon-approved-reverse:before {
+  content: "\e909";
+}
+.icon-approved:before {
+  content: "\e90a";
+}
+.icon-bar-graph:before {
+  content: "\e90b";
+}
+.icon-boxed:before {
+  content: "\e90c";
+}
+.icon-browser:before {
+  content: "\e90d";
+}
+.icon-bulb:before {
+  content: "\e90e";
+}
+.icon-burger:before {
+  content: "\e90f";
+}
+.icon-calendar:before {
+  content: "\e910";
+}
+.icon-close-boxed:before {
+  content: "\e911";
+}
+.icon-close:before {
+  content: "\e912";
+}
+.icon-code:before {
+  content: "\e913";
+}
+.icon-compass:before {
+  content: "\e914";
+}
+.icon-contract:before {
+  content: "\e915";
+}
+.icon-conversation:before {
+  content: "\e916";
+}
+.icon-copy:before {
+  content: "\e917";
+}
+.icon-coversation-wait:before {
+  content: "\e918";
+}
+.icon-dashboard:before {
+  content: "\e919";
+}
+.icon-data-files:before {
+  content: "\e91a";
+}
+.icon-data-processing:before {
+  content: "\e91b";
+}
+.icon-denied-reverse:before {
+  content: "\e91c";
+}
+.icon-denied:before {
+  content: "\e91d";
+}
+.icon-dna:before {
+  content: "\e91e";
+}
+.icon-document:before {
+  content: "\e91f";
+}
+.icon-download:before {
+  content: "\e920";
+}
+.icon-edit-document:before {
+  content: "\e921";
+}
+.icon-exit:before {
+  content: "\e922";
+}
+.icon-expand:before {
+  content: "\e923";
+}
+.icon-file:before {
+  content: "\e924";
+}
+.icon-folder:before {
+  content: "\e925";
+}
+.icon-gear:before {
+  content: "\e926";
+}
+.icon-globe:before {
+  content: "\e927";
+}
+.icon-history-reverse:before {
+  content: "\e928";
+}
+.icon-history:before {
+  content: "\e929";
+}
+.icon-image:before {
+  content: "\e92a";
+}
+.icon-jupyter:before {
+  content: "\e92b";
+}
+.icon-link:before {
+  content: "\e92c";
+}
+.icon-lock:before {
+  content: "\e92d";
+}
+.icon-monitor:before {
+  content: "\e92e";
+}
+.icon-move:before {
+  content: "\e92f";
+}
+.icon-multiple-coversation:before {
+  content: "\e930";
+}
+/* TACC: This is meant for non-published storage. regardless of which system it lives on */
+.icon-my-data:before {
+  content: "\e931";
+}
+.icon-new-browser:before {
+  content: "\e932";
+}
+.icon-no-alert:before {
+  content: "\e933";
+}
+.icon-pending:before {
+  content: "\e934";
+}
+.icon-pie-graph-open:before {
+  content: "\e935";
+}
+.icon-pie-graph-reverse:before {
+  content: "\e936";
+}
+.icon-pie-graph:before {
+  content: "\e937";
+}
+.icon-project:before {
+  content: "\e938";
+}
+.icon-proposal-approved:before {
+  content: "\e939";
+}
+.icon-proposal-denied:before {
+  content: "\e93a";
+}
+.icon-proposal-pending:before {
+  content: "\e93b";
+}
+.icon-publications:before {
+  content: "\e93c";
+}
+.icon-push-left:before {
+  content: "\e93d";
+}
+.icon-push-right:before {
+  content: "\e93e";
+}
+.icon-refresh:before {
+  content: "\e93f";
+}
+.icon-rename:before {
+  content: "\e940";
+}
+.icon-reverse-order:before {
+  content: "\e941";
+}
+.icon-rotate-ccw:before {
+  content: "\e942";
+}
+.icon-rotate-cw:before {
+  content: "\e943";
+}
+.icon-save:before {
+  content: "\e944";
+}
+.icon-script:before {
+  content: "\e945";
+}
+.icon-search-folder:before {
+  content: "\e946";
+}
+.icon-search:before {
+  content: "\e947";
+}
+.icon-share:before {
+  content: "\e948";
+}
+.icon-sillouette:before {
+  content: "\e949";
+}
+.icon-simulation-reverse:before {
+  content: "\e94a";
+}
+.icon-simulation:before {
+  content: "\e94b";
+}
+.icon-subtract-file:before {
+  content: "\e94c";
+}
+.icon-toolbox:before {
+  content: "\e94d";
+}
+.icon-trash:before {
+  content: "\e94e";
+}
+.icon-trophy:before {
+  content: "\e94f";
+}
+.icon-unlock:before {
+  content: "\e950";
+}
+.icon-upload:before {
+  content: "\e951";
+}
+.icon-user-reverse:before {
+  content: "\e952";
+}
+.icon-user:before {
+  content: "\e953";
+}
+.icon-visualization:before {
+  content: "\e954";
+}
+.icon-zoom-in:before {
+  content: "\e955";
+}
+.icon-zoom-out:before {
+  content: "\e956";
+}

package/source/_imports/trumps/s-article-list.css

@@ -0,0 +1,240 @@
+/*
+Article List
+
+A list of article previews. Content __must__ use the tags defined by the example markup.
+
+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");
+
+
+
+
+
+/* Block */
+
+[class*="s-article-list--"] {
+  /* … */
+}
+
+
+
+
+
+/* Children */
+
+
+
+/* Children: All */
+
+/* Not "Title" & Not "See More" */
+.s-article-list--layout-e > :not(h2):not(p:last-child) {
+  /* To shrink heading */
+  flex-grow: 1;
+}
+
+
+
+/* Children: Title */
+
+.s-article-list--layout-a > h2,
+.s-article-list--layout-b > h2,
+.s-article-list--layout-c > h2,
+.s-article-list--layout-d > h2 {
+  /* To span all columns */
+  grid-column-start: 1;
+  grid-column-end: -1;
+}
+
+[class*="s-article-list--"] > h2 {
+  margin-top: 0; /* overwrite Bootstrap */
+  margin-bottom: 3.0rem; /* overwrite Bootstrap */
+
+  color: var(--global-color-accent--normal);
+
+  font-size: 1.6rem;
+  font-weight: var(--bold);
+  text-transform: uppercase;
+
+  @extend .x-truncate--one-line;
+}
+/* Add a fake short border above title */
+[class*="s-article-list--"] > h2 {
+  position: relative;
+  padding-top: 1em;
+}
+[class*="s-article-list--"] > h2::before {
+  content: '';
+  display: block;
+
+  position: absolute;
+  top: 0;
+  height: 0.5em;
+  width: 2.5em;
+
+  background-color: var(--global-color-accent--normal);
+}
+
+
+
+/* Children: "See More" */
+
+/* Anchor */
+
+.s-article-list--layout-a > p:last-child,
+.s-article-list--layout-b > p:last-child,
+.s-article-list--layout-c > p:last-child,
+.s-article-list--layout-d > p:last-child {
+  /* To span all columns */
+  grid-column-start: 1;
+  grid-column-end: -1;
+}
+
+[class*="s-article-list--"] > p:last-child {
+  border-top-width: var(--global-border-width--thick);
+  border-top-style: solid;
+
+  margin-top: 3.0rem; /* GH-99: Use standard spacing value */
+  margin-bottom: -1.0rem; /* to "undo" space added from `padding-bottom` */
+
+  font-size: 1.2rem;
+  font-weight: var(--bold);
+}
+[class*="s-article-list--"] > p:last-child a {
+  display: inline-block;
+
+  padding-top: 1.0rem;
+  padding-bottom: 1.0rem;
+  padding-right: 1.0rem;
+
+  @extend .x-truncate--one-line;
+  max-width: 100%; /* SEE: https://stackoverflow.com/a/44521595 */
+}
+/* Dark section */
+.o-section--style-dark[class*="s-article-list--"] > p:last-child,
+.o-section--style-dark [class*="s-article-list--"] > p:last-child {
+  border-color: var(--global-color-primary--xx-light);
+}
+.o-section--style-dark[class*="s-article-list--"] > p:last-child a,
+.o-section--style-dark [class*="s-article-list--"] > p:last-child a {
+  color: var(--global-color-primary--xx-light);
+}
+/* Light section */
+.o-section--style-light[class*="s-article-list--"] > p:last-child,
+.o-section--style-light [class*="s-article-list--"] > p:last-child {
+  border-color: var(--global-color-primary--xx-dark);
+}
+.o-section--style-light[class*="s-article-list--"] > p:last-child a,
+.o-section--style-light [class*="s-article-list--"] > p:last-child a {
+  color: var(--global-color-primary--xx-dark);
+}
+
+/* Icon */
+
+[class*="s-article-list--"] > p:last-child a::before {
+  font-family: "Font Awesome 5 Free";
+  content: "\f35a";
+  margin-right: 10px;
+
+  font-size: 1.4rem;
+  vertical-align: middle;
+
+  /* To hide the `text-decoration: underline` of the anchor */
+  /* SEE: https://stackoverflow.com/a/15688237/11817077 */
+  display: inline-block;
+}
+
+
+
+
+
+/* Modifiers */
+
+
+
+/* Modifiers: Links */
+
+.s-article-list--links {
+  font-size: 1.4rem;
+  color: var(--global-color-primary--xx-dark);
+}
+.s-article-list--links p:not(:last-child) {
+  margin: 0; /* Overwrite Bootstrap and browser */
+}
+.s-article-list--links p:not(:last-child) a {
+  font-weight: var(--bold);
+  color: var(--global-color-primary--xx-dark);
+}
+
+/* Expand link to cover its container */
+.s-article-list--links p:not(:last-child) { position: relative; }
+.s-article-list--links p:not(:last-child) a::before {
+  content: '';
+
+  @extend .x-article-link-stretch;
+}
+.s-article-list--layout-gapless.s-article-list--links p:not(:last-child) a::before {
+  @extend .x-article-link-stretch--gapless;
+}
+/* Give link state (pseudo-class) feedback */
+.s-article-list--links p:not(:last-child) a:hover::before {
+  @extend .x-article-link-hover;
+}
+.s-article-list--layout-gapless.s-article-list--links p:not(:last-child) a:hover::before {
+  @extend .x-article-link-hover--gapless;
+}
+
+
+/* Modifiers: Layout */
+
+.s-article-list--layout-a { @extend .x-layout--a; }
+.s-article-list--layout-b { @extend .x-layout--b; }
+.s-article-list--layout-c { @extend .x-layout--c; }
+.s-article-list--layout-d { @extend .x-layout--d; }
+.s-article-list--layout-e { @extend .x-layout--e; }
+
+/* Modifiers: Layout: Column-Based */
+
+.s-article-list--layout-a,
+.s-article-list--layout-b,
+.s-article-list--layout-c,
+.s-article-list--layout-d {
+  column-gap: 3.0rem; /* GH-99: Use standard spacing value */
+}
+
+/* Modifiers: Layout: Row-Based */
+
+.s-article-list--layout-e {
+  /* … */
+}
+
+/* Modifiers: Layout: Options */
+
+.s-article-list--layout-gapless {
+  gap: 0;
+}
+
+.s-article-list--layout-compact > p:last-child {
+  margin-top: 0;
+}
+
+.s-article-list--layout-divided > :not(h2):not(p:last-child) {
+  padding-top: 0.8rem;
+
+  border-width: var(--global-border-width--normal) 0 0;
+  border-style: solid;
+}
+/* Dark section */
+.o-section--style-dark.s-article-list--layout-divided > :not(h2):not(p:last-child),
+.o-section--style-dark .s-article-list--layout-divided > :not(h2):not(p:last-child) {
+  border-color: var(--global-color-primary--light);
+}
+/* Light section */
+.o-section--style-light.s-article-list--layout-divided > :not(h2):not(p:last-child),
+.o-section--style-light .s-article-list--layout-divided > :not(h2):not(p:last-child) {
+  border-color: var(--global-color-primary--dark);
+}

package/source/_imports/trumps/s-article-list.html

@@ -0,0 +1,20 @@
+<article class="s-article-list">
+  <h2>
+    News &amp; Stuff
+  </h2>
+  <article>
+    Article Placeholder
+  </article>
+</article>
+
+<!-- TODO: Use a component (requires a plugin) -->
+<!--
+<article class="c-article-list">
+  <h2 class="c-article-list__title">
+    News &amp; Stuff
+  </h2>
+  <article class="c-article-list__item">
+    Article Placeholder
+  </article>
+</article>
+-->