@tacc/core-styles 0.8.0 → 0.8.6

package/src/lib/_imports/_preview.hbs

@@ -2,7 +2,7 @@
 {{#unless styles.shouldSkipBase}}
   <link
     rel='stylesheet'
-    href='{{path "/components/{{ _target.baseHandle }}.css"}}'
+    href='{{path "/{{ subdir }}/{{ _target.baseHandle }}.css"}}'
   />
 {{/unless}}
 

package/src/lib/_imports/components/_components.config.yml

@@ -0,0 +1 @@
+preview: "@components.preview"

package/src/lib/_imports/components/_components.preview.hbs

@@ -0,0 +1 @@
+{{> @preview subdir="components" }}

package/src/lib/_imports/elements/_elements.config.yml

@@ -0,0 +1 @@
+preview: "@elements.preview"

package/src/lib/_imports/elements/_elements.preview.hbs

@@ -0,0 +1 @@
+{{> @preview subdir="elements" }}

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

@@ -69,20 +69,37 @@ body > main + footer {
   top: 100vh;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  margin-top: revert; /* to overwrite Bootstrap `_reboot.css` */
+/* Headings */
 
-  font-weight: var(--bold);
+h1, h2, h3, h4, h5, h6 {
   color: var(--global-color-primary--xx-dark);
 }
+h1, h2, h4, h5, h6 {
+  font-weight: var(--bold);
+}
+
+h1 {
+  margin-top: 27px;
+  margin-bottom: 27px;
+}
+h2 {
+  margin-top: 30px;
+  margin-bottom: var(--global-space--normal);
+}
+h1 + h2,
+h1 + hr {
+  margin-top: -12px;
+}
 h1 {
   font-size: var(--global-font-size--xxx-large);
 }
 h2 {
-  font-size: var(--global-font-size--xx-large);
+  font-size: var(--global-font-size--x-large);
 }
+
 h3, h4, h5, h6 {
-  margin-bottom: 15px; /* overwrite Bootstrap */
+  margin-top: var(--global-space--normal);
+  margin-bottom: var(--global-space--normal);
 }
 h3 {
   font-size: var(--global-font-size--x-large);
@@ -90,7 +107,7 @@ h3 {
 h4 {
   font-size: var(--global-font-size--large);
 }
-h4, h5 {
+h5 {
   text-transform: uppercase;
 }
 h5, h6 {
@@ -143,7 +160,9 @@ li {
 /* Misc. */
 
 hr {
-  margin-block: var(--global-space--hr-margin);
+  margin-top: var(--global-space--hr-buffer-above); /* overwrite Bootstrap */
+  border-top: 1px solid var(--global-color-primary--light);
+  margin-bottom: var(--global-space--hr-buffer-below); /* overwrite Bootstrap */
 }
 
 

package/src/lib/_imports/generics/_generics.config.yml

@@ -0,0 +1 @@
+preview: "@generics.preview"

package/src/lib/_imports/generics/_generics.preview.hbs

@@ -0,0 +1 @@
+{{> @preview subdir="generics" }}

package/src/lib/_imports/objects/_objects.config.yml

@@ -0,0 +1 @@
+preview: "@objects.preview"

package/src/lib/_imports/objects/_objects.preview.hbs

@@ -0,0 +1 @@
+{{> @preview subdir="objects" }}

package/src/lib/_imports/objects/o-float-content.css

@@ -0,0 +1,46 @@
+/*
+Float Content (Responsive)
+
+Content that should be:
+1. floated in the flow of text within which it is placed
+2. not floated at certain viewports
+
+Styleguide Objects.FloatContent
+*/
+@import url("../tools/media-queries.css");
+@import url("../settings/space.css");
+
+
+
+@custom-selector :--o-float-content
+  .o-float-content--left,
+  .o-float-content--right;
+
+
+
+:--o-float-content {
+	--buffer: calc( 2 * var(--global-space--grid-gap) );
+}
+
+@media only screen and (--medium-and-above) {
+	.o-float-content--right {
+		float: right;
+		margin-left: var(--buffer);
+	}
+	.o-float-content--right + .o-float-content--right { clear: right; }
+
+	.o-float-content--left {
+		float: left;
+		margin-right: var(--buffer);
+	}
+	.o-float-content--left + .o-float-content--left { clear: left; }
+
+  .figure:is(:--o-float-content) .figure-caption {
+    padding-right: 125px;
+  }
+}
+@media only screen and (--medium-and-above) and (--max-wide-and-below) {
+  :--o-float-content {
+    max-width: 560px;
+  }
+}

package/src/lib/_imports/objects/o-offset-content.css

@@ -1,7 +1,9 @@
 /*
-Offset Content
+Offset Content (Responsive)
 
-Content that should be offset from the flow of text within which it is placed.
+Content that should be:
+1. offset from the flow of text within which it is placed
+2. not offset at certain viewports
 
 Styleguide Objects.OffsetContent
 */
@@ -16,7 +18,7 @@ Styleguide Objects.OffsetContent
 
 
 :--o-offset-content {
-  --offset-distance: min(15vw, 410px);
+  	--offset-distance: min(15vw, 410px);
 	--buffer: calc( 2 * var(--global-space--grid-gap) );
 }
 

package/src/lib/_imports/settings/space.css

@@ -29,7 +29,7 @@ Styleguide Settings.CustomProperties.Space
   --global-space--x-small: 4px;    /* 0.25rem  (if base is 16px) */
   --global-space--small: 8px;      /* 0.5rem   (if base is 16px) */
   --global-space--normal: 16px;    /* 1.0rem   (if base is 16px) */
-  --global-space--large: 25px;     /* 1.5rem   (if base is 16px) */
+  --global-space--large: 24px;     /* 1.5rem   (if base is 16px) */
   --global-space--x-large: 48px;   /* 3.0rem   (if base is 16px) */
 
   /* Miscellaneous */
@@ -47,4 +47,8 @@ Styleguide Settings.CustomProperties.Space
     var(--global-space--section-right)
     var(--global-space--section-bottom)
     var(--global-space--section-left);
+
+  /* CMS Pages */
+  --global-space--hr-buffer-above: 10px;
+  --global-space--hr-buffer-below: 30px;
 }

package/src/lib/_imports/tools/x-mailto-text-replace.css

@@ -0,0 +1,18 @@
+/*
+Mailto Link Text Replacement
+
+Replace mailto link rendered text with virtual text from data-attributes
+
+Styleguide Tools.ExtendsAndMixins.MailtoTextReplace
+*/
+
+%x-mailto-text-replace {
+    visibility: hidden;
+    font-size: 0;
+}
+%x-mailto-text-replace::before {
+    display: inline;
+    content: attr(data-user) "@" attr(data-domain);
+    font-size: initial;
+    visibility: visible;
+}

package/src/lib/_imports/trumps/_trumps.config.yml

@@ -0,0 +1 @@
+preview: "@trumps.preview"

package/src/lib/_imports/trumps/_trumps.preview.hbs

@@ -0,0 +1 @@
+{{> @preview subdir="trumps" }}

package/src/lib/_imports/trumps/s-breadcrumbs.css

@@ -45,11 +45,11 @@ nav.s-breadcrumbs {
 
 /* Elements i.e. Content */
 
-/* To undo default list styles ONLY for major breadcrumbs */
-/* FAQ: Minor breadcrumbs have not been designed, so we should not unstyle it */
+/* To undo default list styles */
 nav.s-breadcrumbs ol {
   list-style: none; /* overwrite browser styles */
-  padding-left: 0; /* overwrite html-elements.css */
+  padding-left: unset; /* undo html-elements.css */
+  margin-bottom: unset; /* undo html-elements.css */
 
   font-weight: var(--global-font-weight--medium);
 }

package/src/lib/_imports/trumps/s-document.css

@@ -16,17 +16,6 @@ Styleguide Trumps.Scopes.Document
 
 /* ELEMENTS */
 
-
-/* ELEMENTS: Content Sectioning */
-
-.s-document h2 {
-  margin-bottom: var(--global-space--normal);
-}
-
-.s-document h3 {
-  margin-bottom: var(--global-space--normal);
-}
-
 /* ELEMENTS: Text Content */
 
 .s-document blockquote {

package/src/lib/_imports/trumps/s-guide-doc.css

@@ -15,13 +15,15 @@ Styleguide Trumps.Scopes.GuideDoc
 
 /* ELEMENTS: Content Sectioning */
 
-/* Fake <hr> above <h3> */
-.s-guide-doc h3::before {
+/* Fake <hr> above <h2> */
+.s-guide-doc h2:not(hr + h2)::before {
   display: block;
   content: '';
 
-  margin: var(--global-space--large) 0;
+  /* To mirror hr (site.css) */
+  margin-top: var(--global-space--hr-buffer-above);
   border-top: 1px solid var(--global-color-primary--light);
+  margin-bottom: var(--global-space--hr-buffer-below);
 }
 
 

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

@@ -0,0 +1,7 @@
+label: Mailto Link Text Replacement
+notes: |-
+  Replaces the display text of an `<a href="mailto:…" data-user="bob" data-domain="">` link with the e-mail address constructed from the `data-user` and `data-domain` attributes.
+
+  This can be used to render an accurate e-mail that will not be recognized by a generic web scraper. The default display text should be an inaccurate e-mail address.
+
+  _To make sure link is accessible if CSS does not load, make it obvious to humans what part of an e-mail is inaccurate, e.g. `__REMOVE_THIS__`._

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

@@ -0,0 +1,20 @@
+<dl>
+  <dt>No Attributes (thus no effect)</dt>
+  <dd>
+    <a
+      href="mailto:__REMOVE_THIS__someone@any.domain.ext"
+      class="u-mailto-text-replace">
+      __REMOVE_THIS__someone@any.domain.ext
+    </a>
+  </dt>
+
+  <dt>Has Attributes (<code>data-user</code>, <code>data-domain</code>)</dt>
+  <dd>
+    <a
+      href="mailto:__REMOVE_THIS__someone@any.domain.ext"
+      data-domain="any.domain.ext" data-user="someone"
+      class="u-mailto-text-replace">
+      __REMOVE_THIS__someone@any.domain.ext
+    </a>
+  </dt>
+</dl>

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

@@ -0,0 +1,7 @@
+/* Create utility class from `x-mailto-text-replace` */
+
+@import url("@tacc/core-styles/src/lib/_imports/tools/x-mailto-text-replace.css");
+
+.u-mailto-text-replace[data-user][data-domain] {
+    @extend %x-mailto-text-replace;
+}

package/dist/elements/bootstrap.css

@@ -1,2 +0,0 @@
-/*! @tacc/core-styles 0.7.1+ | MIT | github.com/TACC/Core-Styles */
-button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}

package/dist/elements/form.cms.css

@@ -1,2 +0,0 @@
-/*! @tacc/core-styles 0.7.1+ | MIT | github.com/TACC/Core-Styles */
-input,label,select,textarea{font-family:var(--global-font-family--sans--portal)}label{font-size:var(--global-font-size--small);line-height:normal;margin-bottom:.75em}:not(input[type=checkbox])+label{display:block}fieldset:not(:last-child){margin-bottom:3.5rem}input,select,textarea{border:var(--global-border--normal)}::-moz-placeholder{color:var(--global-color-primary--dark)}::placeholder{color:var(--global-color-primary--dark)}input[type=date],input[type=time]{font-family:var(--global-font-family--mono)}@media (pointer:coarse){input,select,textarea{padding:12px}}@media (pointer:fine),(pointer:none){input,select,textarea{padding:5px 10px}}

package/dist/elements/html-elements.cms.css

@@ -1,2 +0,0 @@
-/*! @tacc/core-styles 0.7.1+ | MIT | github.com/TACC/Core-Styles */
-@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");:root{--global-color-primary--xx-light:#fff;--global-color-primary--xx-light-rgb:255,255,255;--global-color-primary--x-light:#f4f4f4;--global-color-primary--x-light-rgb:244,244,244;--global-color-primary--light:#c6c6c6;--global-color-primary--normal:#afafaf;--global-color-primary--dark:#707070;--global-color-primary--x-dark:#484848;--global-color-primary--x-dark-rgb:72,72,72;--global-color-primary--xx-dark:#222;--global-color-primary--xx-dark-rgb:34,34,34;--global-color-accent--x-light:#e3d7fd;--global-color-accent--light:#a387ed;--global-color-accent--normal:#784fe8;--global-color-accent--dark:#6039cc;--global-color-accent--x-dark:#3d189b;--global-color-accent--alt:#d2cce7;--global-color-accent--weak:rgba(96,57,204,0.25098039215686274);--global-color-info--dark:var(--global-color-primary--x-dark);--global-color-info--normal:var(--global-color-primary--normal);--global-color-info--light:var(--global-color-primary--x-light);--global-color-success--normal:#43d130;--global-color-success--weak:rgba(67,209,48,0.12549019607843137);--global-color-success--alt:var(--global-color-warning--normal);--global-color-success--alt-weak:var(--global-color-warning--weak);--global-color-warning--normal:#c7ce1d;--global-color-warning--weak:rgba(199,206,29,0.12549019607843137);--global-color-warning--alt:var(--global-color-accent--dark);--global-color-warning--alt-weak:var(--global-color-accent--weak);--global-color-danger--dark:#ab1717;--global-color-danger--normal:#eb6e6e;--global-color-danger--weak:rgba(235,110,110,0.12549019607843137);--global-color-background--app:var(--global-color-primary--xx-light);--global-color-link-on-light--normal:var(--global-color-accent--normal);--global-color-link-on-dark--normal:var(--global-color-accent--light)}@font-face{font-family:Benton Sans;src:url(../../fonts/BentonSans-Regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Benton Sans;src:url(../../fonts/BentonSans-Bold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Benton Sans;src:url(../../fonts/BentonSans-Medium.otf) format("opentype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Benton Sans;src:url(../../fonts/BentonSans-MediumItalic.otf) format("opentype");font-weight:500;font-style:italic;font-display:swap}:root{--global-font-family--sans--cms:"Benton Sans","Roboto",sans-serif;--global-font-family--sans--portal:"Roboto",sans-serif;--global-font-family--serif:Times,sans-serif;--global-font-family--mono:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace;--global-font-size--x-small:1.1rem;--global-font-size--small:1.4rem;--global-font-size--medium:1.6rem;--global-font-size--large:2.0rem;--global-font-size--x-large:2.6rem;--global-font-size--xx-large:3.2rem;--global-font-size--xxx-large:4.1rem;--global-font-weight--regular:400;--global-font-weight--medium:500;--global-font-weight--bold:700;--regular:400;--medium:500;--bold:700}:root{--global-space--xx-small:2px;--global-space--x-small:4px;--global-space--small:8px;--global-space--normal:16px;--global-space--large:25px;--global-space--x-large:48px;--global-space--list-indent:40px;--global-space--section-gap:45px;--global-space--grid-gap:15px;--global-space--section-top:12px;--global-space--section-bottom:0;--global-space--section-left:24px;--global-space--section-right:36px;--global-space--section:var(--global-space--section-top) var(--global-space--section-right) var(--global-space--section-bottom) var(--global-space--section-left)}html{font-size:62.5%}body,html{height:100%}body{min-width:290px;color:var(--global-color-primary--x-dark);font-family:var(--global-font-family--sans--cms);font-size:var(--global-font-size--medium);line-height:1.4}body>main{margin-bottom:var(--global-space--section-gap)}body>main+footer{position:-webkit-sticky;position:sticky;top:100vh}h1,h2,h3,h4,h5,h6{margin-top:revert;font-weight:var(--bold);color:var(--global-color-primary--xx-dark)}h1{font-size:var(--global-font-size--xxx-large)}h2{font-size:var(--global-font-size--xx-large)}h3,h4,h5,h6{margin-bottom:15px}h3{font-size:var(--global-font-size--x-large)}h4{font-size:var(--global-font-size--large)}h4,h5{text-transform:uppercase}h5,h6{font-size:var(--global-font-size--medium)}p{margin-bottom:2rem}dl dl,ol,ul{padding-left:var(--global-space--list-indent)}ol ol,ol ul,ul ol,ul ul{margin:revert}dt{margin-bottom:.5rem;font-weight:400}li{line-height:1.6}hr{margin-block:var(--global-space--hr-margin)}a{color:var(--global-color-link-on-light--normal);text-decoration-thickness:var(--global-border-width--normal)}a:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:solid;text-decoration-style:solid}a:focus{-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dashed;text-decoration-style:dashed}code,kbd,pre,samp,var{font-family:var(--global-font-family--mono)}code kbd{display:inline-block;padding:.1rem .2rem;margin-left:.2rem;margin-right:.2rem;font-size:inherit}code,pre>samp{color:unset}:not(pre)>code{display:inline-block;padding:var(--global-space--xx-small) var(--global-space--x-small)}pre>code,pre>samp{display:inline-block;padding:var(--global-space--x-small) var(--global-space--small)}pre[style]>code,pre[style]>samp{min-width:100%}pre samp{opacity:.75;text-decoration:none}pre code u{opacity:.5;text-decoration:none}table,td,th{border:var(--global-border--normal)}details{margin-top:0;margin-bottom:1rem}

package/dist/generics/fonts.css

@@ -1,2 +0,0 @@
-/*! @tacc/core-styles 0.7.1+ | MIT | github.com/TACC/Core-Styles */
-@font-face{font-family:Benton Sans;src:url(../../fonts/BentonSans-Regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Benton Sans;src:url(../../fonts/BentonSans-Bold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Benton Sans;src:url(../../fonts/BentonSans-Medium.otf) format("opentype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Benton Sans;src:url(../../fonts/BentonSans-MediumItalic.otf) format("opentype");font-weight:500;font-style:italic;font-display:swap}