@tacc/core-styles 0.8.0-beta → 0.8.0

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

@@ -1,2 +1,2 @@
-/*! @tacc/core-styles 0.8.0-beta+ | 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]{font-family:Roboto;display:flex;align-items:center;position:relative}:host [part=button]{font-size:16px;position:absolute;left:0;top:50%;transform:translateY(-50%);box-sizing:content-box;height:var(--input-height,38px);align-items:center;margin:0;padding:0 var(--button-horz-pad);background-color:transparent;border:none;color:var(--global-color-primary--xx-light);font-size:var(--button-font-size)}:host [part=input]{display:block;width:100%;height:var(--input-height);margin:0;padding-top: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);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);font-size:var(--input-font-size)}: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 0.8.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]{font-family:Roboto;display:flex;align-items:center;position:relative}:host [part=button]{font-size:16px;position:absolute;left:0;top:50%;transform:translateY(-50%);box-sizing:content-box;height:var(--input-height,38px);align-items:center;margin:0;padding:0 var(--button-horz-pad);background-color:transparent;border:none;color:var(--global-color-primary--xx-light);font-size:var(--button-font-size)}:host [part=input]{display:block;width:100%;height:var(--input-height);margin:0;padding-top: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);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);font-size:var(--input-font-size)}:host [part=input]::-moz-placeholder{color:var(--global-color-primary--xx-light);opacity:.5}:host [part=input]:-ms-input-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/u-empty.css

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

package/dist/trumps/u-hide.css

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

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

@@ -1,2 +1,2 @@
-/*! @tacc/core-styles 0.8.0-beta+ | MIT | github.com/TACC/Core-Styles */
+/*! @tacc/core-styles 0.8.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": "0.8.0-beta",
+  "version": "0.8.0",
   "license": "MIT",
   "author": "TACC ACI WMA <wma-portals@gmail.com>",
   "description": "CSS source and processor for TACC Core-CMS and Core-Portal.",
@@ -19,9 +19,9 @@
   "scripts": {
     "start": "fractal start --sync",
     "build": "npm run build:css && npm run build:demo",
-    "build:css": "bin/build-css.js",
+    "build:css": "bin/build.js",
     "build:demo": "fractal build",
-    "test": "bin/test-css.js && echo \"Test output at 'dist/_tests' (compare to test input)",
+    "test": "bin/test.js && echo \"Test output at 'dist/_tests' (compare to test input)\"",
     "prepublishOnly": "npm run build # && npm test && npm run lint"
   },
   "engines": {
@@ -54,7 +54,7 @@
     "postcss-extend": "To extend CSS rule sets at build-time",
     "postcss-preset-env": "To use future CSS features now"
   },
-  "peerDependencies": {
+  "devDependencies": {
     "@frctl/fractal": "^1.5.13",
     "@frctl/mandelbrot": "^1.10.1"
   }

package/src/lib/_imports/_preview.hbs

@@ -8,15 +8,12 @@
 
 {{! styles: global (for every component) }}
 {{! (manually configured) }}
-{{#if styles.external.global}}
-  {{#each styles.external.global}}
-    <link rel='stylesheet' href='{{this}}' />
-  {{/each}}
-{{else if styles.internal.global}}
-  {{#each styles.internal.global}}
-    <link rel='stylesheet' href='{{path this}}' />
-  {{/each}}
-{{/if}}
+{{#each styles.external.global}}
+  <link rel='stylesheet' href='{{this}}' />
+{{/each}}
+{{#each styles.internal.global}}
+  <link rel='stylesheet' href='{{path this}}' />
+{{/each}}
 
 {{! styles: local (for current component) }}
 {{! (automatically found) }}
@@ -47,4 +44,4 @@
 {{/each}}
 
 {{! markup }}
-{{{yield}}}
+{{{yield}}}

package/src/lib/_imports/components/bootstrap.container.css

@@ -7,7 +7,7 @@ Add to Bootstrap styles. See:
 
 Styleguide Components.Bootstrap.Grid
 */
-@import url("_imports/tools/media-queries.css");
+@import url("../tools/media-queries.css");
 
 @media (--x-wide-and-above) {
   .container { max-width: var(--global-max-width--x-wide); }

package/src/lib/_imports/components/bootstrap.form.css

@@ -0,0 +1,21 @@
+/*
+Form (Bootstrap)
+Override Bootstrap styles. See:
+- [ReactStrap Forms](https://reactstrap.github.io/components/form/)
+- [Bootstrap Forms](https://getbootstrap.com/docs/4.4/components/forms/)
+Styleguide Components.Bootstrap.Form
+*/
+@import url('../settings/border.css');
+
+.form-control {
+  border: var(--global-border--normal);
+  border-radius: 0;
+}
+input.form-control,
+textarea.form-control {
+  /* FAQ: Vertical padding reduced by 1px each to near input height of design * 1.2 */
+  padding: 6px 12px; /* 6px 10px design * 1.2 design-to-app ratio */
+}
+.input-group-prepend {
+  z-index: 1; /* so child button border is above sibling input border */
+}

package/src/lib/_imports/components/bootstrap.modal.css

@@ -0,0 +1,74 @@
+/* TODO: Migrate any other should-be-global Portal modal styles to here */
+/* FP-344: Consider a Modal component and a CSS module */
+/*
+Modal (Bootstrap)
+
+Override Bootstrap styles. See:
+
+- [ReactStrap Forms](https://reactstrap.github.io/components/modals/)
+- [Bootstrap Forms](https://getbootstrap.com/docs/4.4/components/modal/)
+
+Styleguide Components.Bootstrap.Modal
+*/
+@import url('../tools/x-truncate.css');
+
+.modal-content,
+.modal-header,
+.modal-body,
+.modal-footer {
+  border-radius: 0;
+}
+.modal-content,
+.modal-header,
+.modal-body {
+  border: none;
+}
+.modal-footer {
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+}
+
+.modal-header {
+  background-color: var(--global-color-primary--x-light);
+  padding: 1.35rem 1.75rem; /* (18px 23.5px design * 1.2 design-to-app ratio) */
+}
+.modal-title {
+  color: var(--global-color-primary--xx-dark);
+  font-weight: normal;
+  font-size: 1.2rem; /* 16px design * 1.2 design-to-app ratio */
+
+  @extend .x-truncate--one-line;
+}
+
+/* To darken close button */
+.modal-header .close {
+  color: var(--global-color-primary--x-dark);
+  opacity: 1;
+}
+/* FAQ: The specificity matches Bootstrap */
+.modal-header .close:not(:disabled):not(.disabled):focus,
+.modal-header .close:not(:disabled):not(.disabled):hover {
+  color: var(--global-color-primary--xx-dark);
+  opacity: 1;
+}
+
+/* To render modal close button icon as a Cortal icon */
+/* CAVEAT: Pass `charCode="&#xe912;"` to `<ModalHeader>` */
+.modal-header .close span {
+  /* To mimic `.icon` styles without `@extend` or `composes` (unavailable) */
+  /* HACK: Copied (and reduced and edited) from `src/styles/trumps/icon...` */
+  font-size: 1.5rem; /* bigger to match header text font height (like design) */
+  font-family: Cortal-Icons !important;
+}
+
+.modal-header.has-MuiTabs {
+  flex-direction: row;
+  position: relative;
+  height: 63.5px;
+  border-bottom: 1px solid #afafaf;
+  padding: 5px;
+}
+.modal-header.has-MuiTabs .close {
+  transform: translate(-25%, 25%);
+}

package/src/lib/_imports/components/bootstrap.pagination.css

@@ -7,7 +7,7 @@ Style Bootstrap pagination. See:
 
 Styleguide Components.Bootstrap.Pagination
 */
-@import url("_imports/components/c-page.css");
+@import url("../components/c-page.css");
 
 
 

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

@@ -1,91 +1,185 @@
 <dl>
   {{#if supports.type}}
   <dt>Type</dt>
-  <dd>
-    <button class="c-button c-button--{{this._self.name}} c-button--secondary"
-      {{#if disabled}}disabled{{/if}}>
-      <span class="c-button__text">--secondary</span>
-    </button>
-    {{#if small}}
-      <small>(no small primary allowed)</small>
-    {{else}}
-      <button class="c-button c-button--{{this._self.name}} c-button--primary"
-      {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--primary</span>
+  <dd><dl>
+    <dt><code>&lt;button&gt;</code></dt>
+    <dd>
+      <button class="c-button c-button--{{this._self.name}} c-button--secondary"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--secondary</span>
       </button>
-    {{/if}}
-    <button class="c-button c-button--{{this._self.name}} c-button--tertiary"
-      {{#if disabled}}disabled{{/if}}>
-      <span class="c-button__text">--tertiary</span>
-    </button>
-  </dd>
+      {{#if small}}
+        <small>(no small primary allowed)</small>
+      {{else}}
+        <button class="c-button c-button--{{this._self.name}} c-button--primary"
+        {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">--primary</span>
+        </button>
+      {{/if}}
+      <button class="c-button c-button--{{this._self.name}} c-button--tertiary"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--tertiary</span>
+      </button>
+    </dd>
+
+    <dt><code>&lt;a&gt;</code></dt>
+    <dd>
+      <a href="#" class="c-button c-button--{{this._self.name}} c-button--secondary"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--secondary</span>
+      </a>
+      {{#if small}}
+        <small>(no small primary allowed)</small>
+      {{else}}
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--primary"
+        {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">--primary</span>
+        </a>
+      {{/if}}
+      <a href="#" class="c-button c-button--{{this._self.name}} c-button--tertiary"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--tertiary</span>
+      </a>
+    </dd>
+  </dl><dd>
   {{/if}}
 
   {{#if supports.states}}
   <dt>States</dt>
-  <dd>
-    <button class="c-button c-button--{{this._self.name}}
-      {{#if type}}{{type}}{{/if}}"
-      {{#if disabled}}disabled{{/if}}>
-      <span class="c-button__text">default</span>
-    </button>
-    <button class="c-button c-button--{{this._self.name}} c-button--is-busy
-      {{#if type}}{{type}}{{/if}}"
-      disabled>
-      <span class="c-button__text">--is-busy</span>
-    </button>
-  </dd>
+  <dd><dl>
+    <dt><code>&lt;button&gt;</code></dt>
+    <dd>
+      <button class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">default</span>
+      </button>
+      <button class="c-button c-button--{{this._self.name}} c-button--is-busy
+        {{#if type}}{{type}}{{/if}}"
+        disabled>
+        <span class="c-button__text">--is-busy</span>
+    </dd>
+
+    <dt><code>&lt;a&gt;</code></dt>
+    <dd>
+      <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">default</span>
+      </a>
+      <a href="#" class="c-button c-button--{{this._self.name}} c-button--is-busy
+        {{#if type}}{{type}}{{/if}}"
+        disabled>
+        <span class="c-button__text">--is-busy</span>
+      </a>
+    </dd>
+  </dl><dd>
   {{/if}}
 
   {{#if supports.icons}}
   <dt>Icons</dt>
-  <dd>
-    <button class="c-button c-button--{{this._self.name}}
-      {{#if type}}{{type}}{{/if}}"
-      {{#if disabled}}disabled{{/if}}>
-      <i class="c-button__icon--before" aria-description="validate input">…</i>
-      <span class="c-button__text">__icon--before</span>
-    </button>
-    <button class="c-button c-button--{{this._self.name}}
-      {{#if type}}{{type}}{{/if}}"
-      {{#if disabled}}disabled{{/if}}>
-      <span class="c-button__text">__icon--after</span>
-      <i class="c-button__icon--after" aria-description="exit page">X</i>
-    </button>
-  </dd>
+  <dd><dl>
+    <dt><code>&lt;button&gt;</code></dt>
+    <dd>
+      <button class="c-button c-button--{{this._self.name}}
+        {{#if supports.width}}c-button--width-long{{/if}}
+        {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <i class="c-button__icon--before" aria-description="validate input">…</i>
+        <span class="c-button__text">__icon--before</span>
+      </button>
+      <button class="c-button c-button--{{this._self.name}}
+        {{#if supports.width}}c-button--width-long{{/if}}
+        {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">__icon--after</span>
+        <i class="c-button__icon--after" aria-description="exit page">X</i>
+    </dd>
+
+    <dt><code>&lt;a&gt;</code></dt>
+    <dd>
+      <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if supports.width}}c-button--width-long{{/if}}
+        {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <i class="c-button__icon--before" aria-description="validate input">…</i>
+        <span class="c-button__text">__icon--before</span>
+      </a>
+      <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if supports.width}}c-button--width-long{{/if}}
+        {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">__icon--after</span>
+        <i class="c-button__icon--after" aria-description="exit page">X</i>
+      </a>
+    </dd>
+  </dl><dd>
   {{/if}}
 
   {{#if supports.width}}
   <dt>Width</dt>
-  <dd>
-    <button class="c-button c-button--{{this._self.name}} c-button--width-short
-      {{#if type}}{{type}}{{/if}}"
-      {{#if disabled}}disabled{{/if}}>
-      <span class="c-button__text">--width-short</span>
-    </button>
-    <button class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
-      {{#if disabled}}disabled{{/if}}>
-      <span class="c-button__text">--width-medium</span>
-    </button>
-    <button class="c-button c-button--{{this._self.name}} c-button--width-large {{#if type}}{{type}}{{/if}}"
-      {{#if disabled}}disabled{{/if}}>
-      <span class="c-button__text">--width-large</span>
-    </button>
-  </dd>
+  <dd><dl>
+    <dt><code>&lt;button&gt;</code></dt>
+    <dd>
+      <button class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--width-short</span>
+      </button>
+      <button class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--width-medium</span>
+      </button>
+      <button class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--width-long</span>
+    </dd>
+
+    <dt><code>&lt;a&gt;</code></dt>
+    <dd>
+      <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--width-short</span>
+      </a>
+      <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--width-medium</span>
+      </a>
+      <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
+        {{#if disabled}}disabled{{/if}}>
+        <span class="c-button__text">--width-long</span>
+      </a>
+    </dd>
+  </dl><dd>
   {{/if}}
 
   {{#if supports.size}}
   <dt>Size</dt>
   <dd>
     {{#if supports.size-small}}
-    <button class="c-button c-button--{{this._self.name}} c-button--size-small
-      {{#if type}}{{type}}{{/if}}"
-      {{#if disabled}}disabled{{/if}}>
-      <span class="c-button__text">--size-small</span>
-    </button>
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}} c-button--size-small
+          {{#if type}}{{type}}{{/if}}"
+          {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">--size-small</span>
+        </button>
+      </dd>
+
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--size-small
+          {{#if type}}{{type}}{{/if}}"
+          {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">--size-small</span>
+        </a>
+      </dd>
+    </dl>
     {{else}}
-      <small>(no small size allowed)</small>
+    <small>(no small size allowed)</small>
     {{/if}}
-  </dd>
+  <dd>
   {{/if}}
 </dl>

package/src/lib/_imports/components/c-button/c-button_docs.css

@@ -1,3 +1,8 @@
 dd > * {
   margin-right: 0.5em;
+  vertical-align: middle;
+}
+
+.c-button > i {
+  font-style: normal;
 }

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

@@ -1,5 +1,8 @@
-@import url("_imports/tools/x-truncate.css");
+@import url("../tools/x-truncate.css");
 
+@custom-selector :--disabled
+  :disabled,
+  :where(a[disabled]);
 
 
 
@@ -21,17 +24,20 @@
 
   @extend %x-truncate--one-line;
 }
+a.c-button {
+  text-decoration: none;
+}
 
-.c-button:not(:disabled) {
+.c-button:not(:--disabled) {
   cursor: pointer; /* WARNING: Opinionated */
 }
-.c-button:disabled:not(.c-button--is-busy) {
+.c-button:--disabled:not(.c-button--is-busy) {
   color: var(--global-color-primary--dark);
   border-color: var(--global-color-primary--dark);
 
   pointer-events: none;
 }
-.c-button:disabled:not(.c-button--is-busy, .c-button--as-link) {
+.c-button:--disabled:not(.c-button--is-busy, .c-button--as-link) {
   background-color: var(--global-color-primary--xx-light);
 }
 
@@ -86,7 +92,7 @@
   .c-button:hover,
   .c-button:focus,
   .c-button:active,
-  .c-button:disabled
+  .c-button:--disabled
 ) {
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-accent--normal);
@@ -121,13 +127,13 @@
 }
 
 .c-button--secondary.c-button--is-busy,
-.c-button--secondary:not(.c-button:hover, .c-button:focus, .c-button:active, .c-button:disabled) {
+.c-button--secondary:not(.c-button:hover, .c-button:focus, .c-button:active, .c-button:--disabled) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-primary--x-light);
   border-color: var(--global-color-primary--xx-dark);
 }
 
-.c-button/* for specificity to override */.c-button--secondary:disabled {
+.c-button/* for specificity to override */.c-button--secondary:--disabled {
   background-color: var(--global-color-primary--x-light);
 }
 
@@ -163,7 +169,7 @@
   .c-button:hover,
   .c-button:focus,
   .c-button:active,
-  .c-button:disabled
+  .c-button:--disabled
 ) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-primary--xx-light);
@@ -202,7 +208,7 @@
   .c-button:hover,
   .c-button:focus,
   .c-button:active,
-  .c-button:disabled
+  .c-button:--disabled
 ) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-accent--x-light);
@@ -218,7 +224,7 @@
   border: unset;
   padding-inline: unset;
 }
-.c-button--as-link:not(:disabled):hover {
+.c-button--as-link:not(:--disabled):hover {
   text-decoration: underline;
 }
 
@@ -235,6 +241,13 @@
 
 /* Modifiers: Sizes */
 
+.c-button:not(
+  .c-button--width-short,
+  .c-button--width-medium,
+  .c-button--width-long,
+  .c-button--size-small,
+  .c-button--as-link
+),
 .c-button--width-short {
   width: var(--min-width);
 }
@@ -256,6 +269,10 @@
 
 /* Elements */
 
+.c-button > * {
+  vertical-align: middle;
+}
+
 .c-button__icon--before {
   margin-right: 0.5em;
 }

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

@@ -7,8 +7,8 @@ Markup: c-callout.html
 
 Styleguide Components.Callout
 */
-@import url("_imports/tools/media-queries.css");
-@import url("_imports/tools/x-article-link.css");
+@import url("../tools/media-queries.css");
+@import url("../tools/x-article-link.css");
 
 
 

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

@@ -11,7 +11,7 @@ Markup: c-card.html
 
 Styleguide Components.Card
 */
-@import url("_imports/tools/x-article-link.css");
+@import url("../tools/x-article-link.css");
 
 /* Modifiers */
 

package/src/lib/_imports/components/c-data-list.css

@@ -29,7 +29,7 @@ Markup: c-data-list.html
 
 Styleguide Components.DataList
 */
-@import url("_imports/tools/x-truncate.css");
+@import url("../tools/x-truncate.css");
 
 
 

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

@@ -17,7 +17,7 @@ Markup: c-nav.html
 
 Styleguide Components.Nav
 */
-@import url("_imports/tools/media-queries.css");
+@import url("../tools/media-queries.css");
 
 
 

package/src/lib/_imports/components/c-see-all-link.css

@@ -11,7 +11,7 @@ Markup:
 
 Styleguide Components.SeeAllLink
 */
-@import url("_imports/tools/x-truncate.css");
+@import url("../tools/x-truncate.css");
 
 
 

package/src/lib/_imports/components/c-show-more.css

@@ -11,7 +11,7 @@ A CSS-only way to support a "Show More…" feature. It requires a container and
 
 Styleguide: Components.ShowMore
 */
-@import url("_imports/tools/x-truncate.css");
+@import url("../tools/x-truncate.css");
 
 /* Truncation */