@tacc/core-styles 0.10.0 → 0.12.0

package/src/lib/_imports/tools/x-link.css

@@ -11,8 +11,28 @@
 .x-link--hover {
   text-decoration-line: underline;
   text-decoration-style: solid;
+
+  /* To overwrite Bootstrap (on Client) */
+  color: var(--global-color-link-on-light--normal);
+  text-decoration-thickness: var(--global-border-width--normal);
 }
 .x-link--active {
   text-decoration-line: underline;
   text-decoration-style: dotted;
 }
+
+.x-link--irregular {
+  @extend .x-link;
+
+  text-decoration-line: underline;
+}
+.x-link--irregular--hover {
+  @extend .x-link--hover;
+
+  text-decoration-style: dashed;
+}
+.x-link--irregular--active {
+  @extend .x-link--active;
+
+  text-decoration-style: dotted;
+}

package/src/lib/_imports/trumps/s-affixed-input-wrapper/config.yml

@@ -1,2 +1,5 @@
 # The form elements used rely on Bootstrap and CMS
 preview: '@preview.bootstrap-cms'
+context:
+  supportStyles:
+    - /assets/elements/form.cms.css

package/src/lib/_imports/trumps/s-affixed-input-wrapper/s-affixed-input-wrapper.hbs

@@ -1,5 +1,3 @@
-<link rel="stylesheet" href="{{path '/elements/form.cms.css'}}" />
-
 <dl>
   <dt>Prefix</dt>
   <dd class="s-affixed-input-wrapper s-affixed-input-wrapper--prefix">

package/src/lib/_imports/trumps/s-irregular-links/config.yml

@@ -1,8 +1,8 @@
 context:
   supportStyles:
-    - /elements/links.css
-    - /elements/links/docs.css
-    - /components/c-button.css
+    - /assets/elements/links.css
+    - /assets/elements/links/docs.css
+    - /assets/components/c-button.css
 label: Links (Irregular)
 variants:
   - name: default

package/src/lib/_imports/trumps/s-irregular-links.css

@@ -1,19 +1,14 @@
-.s-irregular-links a {
-  text-decoration-line: underline;
-}
-.s-irregular-links a:hover {
-  text-decoration-style: dashed;
-}
-.s-irregular-links a:active {
-  text-decoration-style: dotted;
-}
+@import url('../tools/x-link.css');
 
+.s-irregular-links a,
 .s-irregular-links .c-button--as-link {
-  text-decoration-line: underline;
+  @extend .x-link--irregular;
 }
+.s-irregular-links a:hover,
 .s-irregular-links .c-button--as-link:hover {
-  text-decoration-style: dashed;
+  @extend .x-link--irregular--hover;
 }
+.s-irregular-links a:active,
 .s-irregular-links .c-button--as-link:active {
-  text-decoration-style: dotted;
+  @extend .x-link--irregular--active;
 }

package/src/lib/_imports/trumps/u-mailto-text-replace/config.yml

@@ -1,4 +1,4 @@
 label: Mailto Link Text Replacement
 context:
   supportStyles:
-    - /elements/links.css
+    - /assets/elements/links.css

package/dist/components/bootstrap/bootstrap.modal/docs.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 0.10.0+ | MIT | github.com/TACC/Core-Styles */#exampleModalStatic{bottom:auto;display:block;height:auto;left:auto;position:relative;right:auto;top:auto;z-index:1}

package/dist/components/bootstrap/portal/bootstrap.form/docs.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 0.10.0+ | MIT | github.com/TACC/Core-Styles */form{margin:1em}

package/dist/elements/table/docs.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 0.9.0+ | MIT | github.com/TACC/Core-Styles */

package/dist/elements/table/table.docs.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 0.9.0+ | MIT | github.com/TACC/Core-Styles */

package/dist/elements/table copy.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 0.9.0+ | MIT | github.com/TACC/Core-Styles */table{--thead-height:33px;border-collapse:collapse;font-family:var(--global-font-family--sans--portal);font-size:var(--global-font-size--small)}thead tr,tr:not(:last-of-type){border-bottom:var(--global-border--normal)}tr:nth-child(2n){background:var(--global-color-primary--x-light)}td,th{color:var(--global-color-primary--dark);line-height:var(--global-font-size--medium);padding-block:8px;padding-inline:16px;vertical-align:top}th{color:var(--global-color-primary--x-dark);text-align:inherit}thead>tr>th{font-weight:var(--bold)}tbody>tr>th{font-weight:var(--normal)}caption{font-size:var(--global-font-size--small);text-align:unset}td ul{-webkit-padding-start:0;list-style:none;margin-block:0;padding-inline-start:0}td li:not(:last-of-type){margin-bottom:.25em}td button{font-size:inherit}

package/dist/fractal.server.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 0.9.0+ | MIT | github.com/TACC/Core-Styles */

package/dist/fractal.server.refresh.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 0.10.0+ | MIT | github.com/TACC/Core-Styles */

package/dist/fractal.server.reload.css

@@ -1 +0,0 @@
-/*! @tacc/core-styles 0.9.0+ | MIT | github.com/TACC/Core-Styles */

package/src/lib/_imports/components/bootstrap/bootstrap.container/config.yml

@@ -1,3 +0,0 @@
-preview: '@preview.bootstrap'
-label: Container
-status: ready

package/src/lib/_imports/components/bootstrap/bootstrap.modal/config.yml

@@ -1,2 +0,0 @@
-preview: '@preview.bootstrap'
-label: Modal

package/src/lib/_imports/components/bootstrap/portal/bootstrap.form/config.yml

@@ -1,3 +0,0 @@
-preview: '@preview.bootstrap'
-label: Form
-status: prototype

package/src/lib/_tests/README.md

@@ -1,38 +0,0 @@
-# TACC Core Styles - Library - Tests
-
-Styles here compare test input CSS to expected output CSS.
-
-_This allows developers to confirm whether CSS plugins are working._
-
-## Usage
-
-1. Add `/*! Some Unique Comment: */` above the test input CSS.
-2. Import stylesheets (in `../_tests.css`) (if not already).
-3. Build CSS (run `npm run build` from root).
-4. Compare input CSS to actual output CSS (in `./dist/_tests.css`).
-
-## Example
-
-**Input:**
-
-```css
-/*! Custom Media Narrow: */
-@custom-media --narrow-window (max-width: 30em);
-
-@media (--narrow-window) {
-  ._test {
-    background-color: red;
-  }
-}
-```
-
-**Output**:
-
-```css
-/*! Custom Media Narrow: */
-@media (max-width: 30em) {
-  ._test {
-    background-color: red;
-  }
-}
-```

package/src/lib/_tests/postcss-extend.css

@@ -1,80 +0,0 @@
-/*
-Test
-
-Styles for testing `postcss-extend`.
-
-Instructions:
-1. In this file, add code after "! Goal:" to show what the output should be.
-2. In this file, add code after "! Test:" to be transformed by plugins.
-3. In the output file, the code after "! Goal:" and "! Test:" should match.
-
-Styleguide _Test.Extend
-*/
-
-/*! Class Selector */
-
-/*! Goal: */
-._test_1,._test_mixin_1{color:red}
-
-/*! Test: */
-._test_mixin_1 {
-  color: red;
-}
-._test_1 {
-  @extend ._test_mixin_1;
-}
-
-/*! Placeholder Selector */
-
-/*! Goal: */
-._test_2{color:yellow}
-
-/*! Test: */
-%_test_mixin_2 {
-  color: yellow;
-}
-._test_2 {
-  @extend %_test_mixin_2;
-}
-
-/*! Class & Placeholder Selector, Use Class Selector */
-
-/*! Goal: */
-._test_3,._test_mixin_3{color:green}
-
-/*! Test: */
-%_test_mixin_3,
-._test_mixin_3 {
-  color: green;
-}
-._test_3 {
-  @extend ._test_mixin_3;
-}
-
-/*! Class & Placeholder Selector, Use Placeholder Selector */
-
-/*! Goal: */
-._test_4{color:blue}
-
-/*! Test: */
-%_test_mixin_4,
-._test_mixin_4 {
-  color: blue;
-}
-._test_4 {
-  @extend %_test_mixin_4;
-}
-
-
-/*! Define Placeholder */
-
-/*! Goal: */
-._test_5{color:white}
-
-/*! Test: */
-@define-placeholder _test_mixin_5 {
-  color: white;
-}
-._test_5 {
-  @extend _test_mixin_5;
-}

package/src/lib/_tests/postcss-preset-env.css

@@ -1,75 +0,0 @@
-/*
-Test
-
-Styles for testing `postcss-preset-env` plugins.
-
-Instructions:
-1. In this file, add code after "! Goal:" to show what the output should be.
-2. In this file, add code after "! Test:" to be transformed by plugins.
-3. In the output file, the code after "! Goal:" and "! Test:" should match.
-
-Styleguide _Test.PresetEnv
-*/
-
-/*! Custom Media Queries */
-/* SEE: https://preset-env.cssdb.org/features#custom-media-queries */
-
-/*! Goal: */
-@media (max-width:30em){._test{background-color:red}}
-
-/*! Test: */
-@custom-media --narrow-window (max-width: 30em);
-
-@media (--narrow-window) {
-  ._test {
-    background-color: red;
-  }
-}
-
-/*! Goal: */
-@media (max-width:60em){._test{background-color:red}}@media (max-width:60em){._test{background-color:blue}}
-
-/*! Test: */
-@custom-media --test-window (min-width: 30em);
-
-@media (--test-window) {
-  ._test {
-    background-color: red;
-  }
-}
-
-@custom-media --test-window (min-width: 60em);
-
-@media (--test-window) {
-  ._test {
-    background-color: blue;
-  }
-}
-
-/*! Media Query Ranges */
-/* SEE: https://preset-env.cssdb.org/features#media-query-ranges */
-
-/*! Goal: */@media (max-width:479px){._test{background-color:red}}@media (min-width:480px) and (max-width:767px){._test{background-color:blue}}@media (min-width:768px){._test{background-color:lime}}
-
-/*! Test: */
-@media (width < 480px) {
-  ._test{ background-color:red; }
-}
-@media (480px <= width < 768px) {
-  ._test{ background-color:blue; }
-}
-@media (width >= 768px) {
-  ._test{ background-color:lime; }
-}
-
-/*! Custom Media Queries & Media Query Ranges */
-
-/*! Goal: */
-@media (min-width:992px) and (max-width:1199px){._test{background-color:red}}
-
-/*! Test: */
-@custom-media --wide-window (992px <= width < 1200px);
-
-@media (--wide-window) {
-  ._test{ background-color:red; }
-}

package/src/lib/_tests.css

@@ -1,12 +0,0 @@
-/*! _test.css */
-
-/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
-
-/* FAQ: This is a low-tech way to test plugins */
-/* USAGE:
-   1. Build CSS.
-   2. Review `../../build/_test.css` */
-/* NOTE: This file is not intended to be imported */
-
-@import url("_tests/postcss-extend.css");
-@import url("_tests/postcss-preset-env.css");