@tacc/core-styles 2.15.0 → 2.16.0

package/dist/trumps/s-style-guide.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.15.0+ | MIT | github.com/TACC/Core-Styles */.s-style-guide section:not(.o-section)>h1:first-child,.s-style-guide section:not(.o-section)>h2:first-child,.s-style-guide section:not(.o-section)>h3:first-child,.s-style-guide section:not(.o-section)>h4:first-child,.s-style-guide section:not(.o-section)>h5:first-child,.s-style-guide section:not(.o-section)>h6:first-child,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h1,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h2,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h3,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h4,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h5,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h6{margin-top:var(--global-space--x-large)}.s-style-guide section>h1,.s-style-guide section>h2,.s-style-guide section>h3,.s-style-guide section>h4,.s-style-guide section>h5,.s-style-guide section>h6{margin-bottom:var(--global-space--normal)}
+/*! @tacc/core-styles 2.16.0+ | MIT | github.com/TACC/Core-Styles */.s-style-guide section:not(.o-section)>h1:first-child,.s-style-guide section:not(.o-section)>h2:first-child,.s-style-guide section:not(.o-section)>h3:first-child,.s-style-guide section:not(.o-section)>h4:first-child,.s-style-guide section:not(.o-section)>h5:first-child,.s-style-guide section:not(.o-section)>h6:first-child,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h1,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h2,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h3,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h4,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h5,.s-style-guide section>:not(h1,h2,h3,h4,h5,h6)+h6{margin-top:var(--global-space--x-large)}.s-style-guide section>h1,.s-style-guide section>h2,.s-style-guide section>h3,.s-style-guide section>h4,.s-style-guide section>h5,.s-style-guide section>h6{margin-bottom:var(--global-space--normal)}

package/dist/trumps/s-system-specs.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.15.0+ | MIT | github.com/TACC/Core-Styles */.s-system-specs{font-size:var(--global-font-size--small);font-weight:var(--global-font-weight--medium)}@media only screen and (min-width:768px){.s-system-specs{display:flow-root}.s-system-specs>*{display:inline-block}.s-system-specs>figure{float:left}}.s-system-specs{--row-height:32px}.s-system-specs>aside{margin-top:var(--row-height)}@media only screen and (max-width:991px){.s-system-specs>figure{margin-bottom:var(--row-height)}}@media only screen and (min-width:992px){.s-system-specs{--col-width--thin:42%;--col-width--wide:48%;--col-gutter:10%;--col-padding:40px;padding-inline:var(--col-padding)}.s-system-specs>aside,.s-system-specs>div{padding-inline:var(--col-padding)}.s-system-specs>div{width:var(--col-width--thin)}.s-system-specs>figure{margin-right:var(--col-gutter);width:var(--col-width--wide)}}@media only screen and (min-width:1200px){.s-system-specs>aside{width:var(--col-width--thin)}}.s-system-specs>figure>img{display:block;width:100%}.s-system-specs>figure>figcaption{margin-top:-40px;position:relative}@media only screen and (max-width:991px){.s-system-specs>figure>img{margin-left:auto;margin-right:auto;width:60%}}@media only screen and (min-width:992px){.s-system-specs>figure>figcaption{margin-left:auto;margin-right:auto;width:80%}}.s-system-specs .c-data-list__key a{font-weight:var(--medium)}
+/*! @tacc/core-styles 2.16.0+ | MIT | github.com/TACC/Core-Styles */.s-system-specs{font-size:var(--global-font-size--small);font-weight:var(--global-font-weight--medium)}@media only screen and (min-width:768px){.s-system-specs{display:flow-root}.s-system-specs>*{display:inline-block}.s-system-specs>figure{float:left}}.s-system-specs{--row-height:32px}.s-system-specs>aside{margin-top:var(--row-height)}@media only screen and (max-width:991px){.s-system-specs>figure{margin-bottom:var(--row-height)}}@media only screen and (min-width:992px){.s-system-specs{--col-width--thin:42%;--col-width--wide:48%;--col-gutter:10%;--col-padding:40px;padding-inline:var(--col-padding)}.s-system-specs>aside,.s-system-specs>div{padding-inline:var(--col-padding)}.s-system-specs>div{width:var(--col-width--thin)}.s-system-specs>figure{margin-right:var(--col-gutter);width:var(--col-width--wide)}}@media only screen and (min-width:1200px){.s-system-specs>aside{width:var(--col-width--thin)}}.s-system-specs>figure>img{display:block;width:100%}.s-system-specs>figure>figcaption{margin-top:-40px;position:relative}@media only screen and (max-width:991px){.s-system-specs>figure>img{margin-left:auto;margin-right:auto;width:60%}}@media only screen and (min-width:992px){.s-system-specs>figure>figcaption{margin-left:auto;margin-right:auto;width:80%}}.s-system-specs .c-data-list__key a{font-weight:var(--medium)}

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

@@ -1 +1 @@
-/*! @tacc/core-styles 2.15.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(--header-text-color);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(--header-search-bkgd-color);border:var(--global-border-width--normal) solid var(--header-search-brdr-color);border-radius:5px;color:var(--header-text-color);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(--header-text-color);opacity:.5}:host [part=input]::placeholder{color:var(--header-text-color);opacity:.5}
+/*! @tacc/core-styles 2.16.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(--header-text-color);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(--header-search-bkgd-color);border:var(--global-border-width--normal) solid var(--header-search-brdr-color);border-radius:5px;color:var(--header-text-color);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(--header-text-color);opacity:.5}:host [part=input]::placeholder{color:var(--header-text-color);opacity:.5}

package/dist/trumps/u-empty.css

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

package/dist/trumps/u-hide.css

@@ -1 +1 @@
-/*! @tacc/core-styles 2.15.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}
+/*! @tacc/core-styles 2.16.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.15.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}
+/*! @tacc/core-styles 2.16.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.15.0+ | MIT | github.com/TACC/Core-Styles */.u-nested-text-content{padding-left:var(--global-space--list-indent)}
+/*! @tacc/core-styles 2.16.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.15.0",
+  "version": "2.16.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/_partials/form--login.hbs

@@ -0,0 +1,84 @@
+{{#message}}
+{{> @message content=. }}
+{{/message}}
+
+<form action="" class="{{ class.root }} {{ class.modifier }}">
+  <h3 {{#if class.title }}class="{{ class.title }}"{{/if}}>
+    <img
+      src="https://www.tacc.utexas.edu/static/assets/TACC-formal-Black-1c-5602fc8f.svg"
+      alt="TACC Logo"
+    />
+    <span>Log In</span>
+  </h3>
+  <p {{#if class.desc }}class="{{ class.desc }}"{{/if}}>to continue to the TACC User Portal</p>
+
+  {{> @form-errors class=class.errors wrapClass=class.form_errors_wrap }}
+
+  <div class="{{ class.field }} {{ class.has_required }}">
+    <label for="username">
+      User Name
+      <span class="{{ class.badge }}">Required</span>
+    </label>
+    <input
+      name="username"
+      type="text"
+      autocomplete="username"
+      id="username"
+      required
+    >
+  </div>
+  <div class="{{ class.field }} {{ class.has_required }}">
+    <label for="password">
+      Password
+      <span {{#if class.badge }}class="{{ class.badge }}"{{/if}}>Required</span>
+    </label>
+    <input
+      name="password"
+      type="password"
+      autocomplete="current-password"
+      id="password"
+      required
+    >
+  </div>
+  <footer {{#if class.buttons }}class="{{ class.buttons }}"{{/if}}>
+    <a
+      href="https://accounts.tacc.utexas.edu/register"
+      rel="noreferrer"
+      target="_blank"
+    >
+      Create Account
+    </a>
+    <button {{#if class.button }}class="{{ class.button }}"{{/if}} type="submit">
+      Log In
+    </button>
+  </footer>
+  <nav {{#if class.nav }}class="{{ class.nav }}"{{/if}}>
+    <p>Having trouble logging in?</p>
+    <a
+      href="https://example.com"
+      rel="noreferrer"
+      target="_blank"
+    >
+      Reset Password
+    </a>
+    <a
+      href="https://example.com"
+      rel="noreferrer"
+      target="_blank"
+    >
+      Account Help
+    </a>
+  </nav>
+</form>
+<script type="module">
+  import toggleFieldErrors from '{{ path "/components/raw/c-form/toggle-field-errors.js" }}';
+
+  const form = document.querySelector('form');
+  const selector = '{{{ selectors.errorList }}}';
+
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    console.log({ form, selector });
+    toggleFieldErrors( form, selector );
+  });
+</script>

package/src/lib/_imports/_partials/form-errors.hbs

@@ -1,7 +1,7 @@
 {{#if wrapClass}}
 <div class="{{ wrapClass }}" style="display:none;">
 {{/if}}
-  <ul class="{{ class }}"{{#unless wrapClass}} style="display:none;"{{/unless}}>
+  <ul {{#if class }}class="{{ class }}"{{/if}}{{#unless wrapClass}} style="display:none;"{{/unless}}>
     <li>
       Sample <strong>{{#if typeName}}{{typeName}}{{else}}form{{/if}}</strong>
       error. <a href="https://example.com" target="_blank">Link.</a>

package/src/lib/_imports/_partials/form.hbs

@@ -7,8 +7,12 @@
 {{else}}
 <form action="" method="POST" enctype="multipart/form-data" class="{{ class.root }}">
 
-  <h3 class="{{ class.title }}">(Optional) Title of Form</h3>
-  <p class="{{ class.desc }}">(Optional) Description of the form.</p>
+  <h3 {{#if class.title }}class="{{ class.title }}"{{/if}}>
+    (Optional) Title of Form
+  </h3>
+  <p {{#if class.desc }}class="{{ class.desc }}"{{/if}}>
+    (Optional) Description of the form.
+  </p>
 {{/if}}
 
   {{> @form-errors class=class.errors wrapClass=class.form_errors_wrap }}
@@ -19,7 +23,9 @@
     {{/if}}
 
     <label for="name">
-      Name<span class="{{ class.badge }}" aria-label="(required)">*</span>
+      Name
+      <span {{#if class.badge }}class="{{ class.badge }}"{{/if}}
+        aria-label="(required)">*</span>
     </label>
 
     <input
@@ -41,7 +47,7 @@
     {{/with}}
   </div>
 
-  <div class="{{ class.field }}">
+  <div {{#if class.field }}class="{{ class.field }}"{{/if}}>
     {{#if (eq errorLoc "top")}}
       {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
     {{/if}}
@@ -71,7 +77,7 @@
     {{/with}}
   </div>
 
-  <div class="{{ class.field }}">
+  <div {{#if class.field }}class="{{ class.field }}"{{/if}}>
     {{#if (eq errorLoc "top")}}
       {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
     {{/if}}
@@ -95,7 +101,7 @@
     {{/with}}
   </div>
 
-  <div class="{{ class.field }}">
+  <div {{#if class.field }}class="{{ class.field }}"{{/if}}>
     {{#if (eq errorLoc "top")}}
       {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
     {{/if}}
@@ -103,7 +109,10 @@
     <label>Radio stations</label>
 
     {{#with inputListTag as | tag |}}
-    <{{#if tag}}{{tag}}{{else}}menu{{/if}} class="{{../class.radio_menu}}" id="radio-stations">
+    <{{#if tag}}{{tag}}{{else}}menu{{/if}}
+      {{#if ../class.radio_menu }}class="{{../class.radio_menu}}"{{/if}}
+      id="radio-stations"
+    >
       <li>
         <label for="radio-stations-0">
           <input
@@ -175,7 +184,7 @@
     {{/with}}
   </div>
 
-  <div class="{{ class.field }}">
+  <div {{#if class.field }}class="{{ class.field }}"{{/if}}>
     {{#if (eq errorLoc "top")}}
       {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
     {{/if}}
@@ -185,7 +194,10 @@
     </label>
 
     {{#with inputListTag as | tag |}}
-    <{{#if tag}}{{tag}}{{else}}menu{{/if}} class="{{../class.check_menu}}" id="which-fish-do-you-want">
+    <{{#if tag}}{{tag}}{{else}}menu{{/if}}
+      {{#if ../class.check_menu }}class="{{../class.check_menu}}"{{/if}}
+      id="which-fish-do-you-want"
+    >
       <li>
         <label for="which-fish-do-you-want-0">
           <input
@@ -249,7 +261,7 @@
     {{/unless}}
   </div>
 
-  <div class="{{ class.field }}">
+  <div {{#if class.field }}class="{{ class.field }}"{{/if}}>
     {{#if (eq errorLoc "top")}}
       {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
     {{/if}}
@@ -279,7 +291,7 @@
     {{/with}}
   </div>
 
-  <div class="{{ class.field }}">
+  <div {{#if class.field }}class="{{ class.field }}"{{/if}}>
     {{#if (eq errorLoc "top")}}
       {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
     {{/if}}
@@ -304,7 +316,7 @@
     {{/with}}
   </div>
 
-  <div class="{{ class.field }}">
+  <div {{#if class.field }}class="{{ class.field }}"{{/if}}>
     {{#if (eq errorLoc "top")}}
       {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
     {{/if}}
@@ -328,7 +340,7 @@
     {{/with}}
   </div>
 
-  <div class="{{ class.field }}">
+  <div {{#if class.field }}class="{{ class.field }}"{{/if}}>
     {{#if (eq errorLoc "top")}}
       {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
     {{/if}}
@@ -358,7 +370,9 @@
 
   <div class="{{ class.field }} {{ class.has_spam_filter }} {{ class.has_required }}">
     <label for="recaptcha_g9y93gP8">
-      Are you a robot?<span class="{{ class.badge }}" aria-label="(required)">*</span>
+      Are you a robot?
+      <span {{#if class.badge }}class="{{ class.badge }}"{{/if}}
+        aria-label="(required)">*</span>
     </label>
 
     <script src="https://www.google.com/recaptcha/api.js"></script>
@@ -370,14 +384,25 @@
     <div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" required="" id="recaptcha_g9y93gP8" data-widget-uuid="9e32f28ccb9545109ff6ae891f9af324" data-callback="onSubmit_9e32f28ccb9545109ff6ae891f9af324" data-size="normal"></div>
   </div>
 
-  <footer class="{{ class.buttons }}">
-    <button class="{{ class.button }}" type="submit">
+  <footer {{#if class.buttons }}class="{{ class.buttons }}"{{/if}}>
+    <button
+      {{#if class.button }}class="{{ class.button }}"{{/if}}
+      type="submit"
+    >
       Submit
     </button>
-    <button id="toggle-field-errors" class="{{ class.button }}" type="button">
+    <button
+      id="toggle-field-errors"
+      {{#if class.button }}class="{{ class.button }}"{{/if}}
+      type="button"
+    >
       Toggle Field Errors
     </button>
-    <button id="toggle-required-fields" class="{{ class.button }}" type="button">
+    <button
+      id="toggle-required-fields"
+      {{#if class.button }}class="{{ class.button }}"{{/if}}
+      type="button"
+    >
       Toggle Required Fields
     </button>
   </footer>

package/src/lib/_imports/components/c-form/c-form--login.hbs

@@ -0,0 +1 @@
+{{> @form--login class=classNames selectors=selectors message=message }}

package/src/lib/_imports/components/c-form/config.yml

@@ -17,6 +17,7 @@ context:
     has_spam_filter: has-spam-check
     buttons: c-form__buttons
     button: c-form__button
+    nav: c-form__nav
 variants:
   - name: default
     status: prototype
@@ -28,3 +29,11 @@ variants:
     status: ready
     context:
       shouldLoadCMS: true
+  - name: login
+    context:
+      classNames:
+        modifier: c-form--login
+        nav: c-form__nav
+      shouldLoadPortal: true
+      supportStyles:
+        - ../../assets/components/c-form--login.css

package/src/lib/_imports/components/c-form--login.css

@@ -0,0 +1,111 @@
+@import url("../components/c-button.css");
+@import url("../tools/selectors.form.css");
+
+:--form--login {
+
+
+
+/* CONTAINER */
+
+& {
+  font-size: 1.6rem;
+  font-family: var(--global-font-family--sans--cms);
+}
+
+
+
+/* TITLE */
+
+& :--form__title,
+& :--form__desc {
+  text-align: center;
+  color: var(--global-color-primary--xx-dark);
+}
+& :--form__title {
+  font-size: 2.4rem;
+  font-weight: var(--black);
+}
+& :--form__desc {
+  font-size: 1.6rem;
+}
+
+& :--form__title img {
+  display: block; /* to collapse margins with heading */
+  margin-inline: auto; /* to re-center image */
+  height: 75px;
+  margin-bottom: 45px;
+}
+
+& :--form__desc {
+  font-weight: var(--medium); /* mimics value (not appearance) from design */
+  margin-block: 25px; /* mimics django-cms-forms.css `.description` */
+}
+
+
+
+/* FORM */
+
+/* To hide "(required)" (which is an obvious attribute on a login form) */
+& :--form__badge {
+  display: none;
+}
+
+/* To make elements bigger */
+& :--form__field {
+  /* To stretch input field width */
+  display: flex;
+  flex-direction: column;
+}
+/* To always use larger field inputs (not just on coarse pointer devices) */
+& input {
+  padding: 12px 12px; /* mimic Core Styles forms.css @media (pointer: coarse) */
+}
+
+
+
+& :--form__buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  @extend :--c-button--width-long;
+}
+& :--form__button[type="submit"] {
+  padding-block: 10px; /* overrides core-styles.base.css button styles */
+}
+
+
+
+/* FOOTER */
+
+& :--form__nav {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 12px;
+
+  margin-top: 35px; /* mimics django-cms-forms.css `.button-wrapper` */
+}
+& :--form__nav > p {
+  margin-block: 0; /* overwrite browser */
+}
+
+
+/* ERRORS */
+
+/* & :--form_errors { */
+& :--form__errors--form {
+  margin-bottom: 2rem; /* TODO: move to @tacc/core-styles */
+}
+
+
+
+/* LINKS */
+
+& a {
+  font-weight: var(--medium);
+}
+
+
+
+}

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

@@ -83,14 +83,15 @@
 }
 /* To replace asterisk character with text */
 :--form__badge {
-  width: 0;
   display: inline-block;
   visibility: hidden;
   line-height: 0;
+  font-size: 0;
 }
 :--form__badge::after {
   visibility: visible;
   line-height: initial;
+  font-size: var(--global-font-size--small); /* mimic elements/form.css label */
 }
 :--form__badge:where(:--form__field--has-required *)::after {
   content: '(required)';

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

@@ -1,6 +1,8 @@
 @custom-selector :--c-form
     .c-form;
 
+/* Generic */
+
 @custom-selector :--c-form__title
     .c-form__title;
 @custom-selector :--c-form__desc
@@ -35,3 +37,10 @@
     .c-form__buttons;
 @custom-selector :--c-form__button
     .c-form__button;
+
+/* Login */
+
+@custom-selector :--c-form--login
+    .c-form--login;
+@custom-selector :--c-form__nav
+    .c-form__nav;

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

@@ -30,4 +30,4 @@
 @import url("./components/c-message--compact.css");
 
 /* TRUMPS */
-/* (none) */
+@import url("./trumps/s-form-page.css");

package/src/lib/_imports/tools/selectors.form.css

@@ -7,6 +7,8 @@
     :--s-form,
     :--cms-form;
 
+/* Generic */
+
 @custom-selector :--form__title
     :--c-form__title,
     :--s-form__title,
@@ -69,3 +71,12 @@
     :--c-form__button,
     :--s-form__button,
     :--cms-form__button;
+
+/* Login */
+
+@custom-selector :--form--login
+    :--c-form--login,
+    :--s-form--login;
+@custom-selector :--form__nav
+    :--c-form__nav,
+    :--s-form__nav;

package/src/lib/_imports/trumps/s-form/config.yml

@@ -21,3 +21,10 @@ variants:
     status: wip
     context:
       shouldLoadCMS: true
+  - name: login
+    context:
+      classNames:
+        modifier: s-form--login
+      shouldLoadPortal: true
+      supportStyles:
+        - ../../assets/trumps/s-form--login.css

package/src/lib/_imports/trumps/s-form/s-form--login.hbs

@@ -0,0 +1 @@
+{{> @form--login class=classNames selectors=selectors message=message }}

package/src/lib/_imports/trumps/s-form--login.css

@@ -0,0 +1 @@
+@import url("../components/c-form--login.css");

package/src/lib/_imports/trumps/s-form-page/config.yml

@@ -0,0 +1,12 @@
+context:
+  shouldLoadPortal: true
+  # 📝 shouldLoadPortal: to get portal font sizes
+  # ❗️ shouldLoadPortal: how to provide portal font sizes to other clients?
+  shouldSkipPattern: false
+  # 📝 shouldSkipPattern: because core-styles.base.css does not import this
+variants:
+  - name: login
+    label: (Example) Login
+    context:
+      supportStyles:
+        - ../../assets/components/c-form--login.css

package/src/lib/_imports/trumps/s-form-page/example.css

@@ -0,0 +1,5 @@
+/* This CSS is EXAMPLE code for a client. It is NOT part of the pattern. */
+
+body {
+  background-color: var(--global-color-primary--light);
+}

package/src/lib/_imports/trumps/s-form-page/readme.md

@@ -0,0 +1,6 @@
+To style a page that has only a single form.
+
+> **☞ Remember**
+>
+> The `<body>` (or some other page-size wrapper) should have a background color.\
+> See "Assets" tab `example.css` file.

package/src/lib/_imports/trumps/s-form-page/s-form-page--login.hbs

@@ -0,0 +1,11 @@
+<div class="s-form-page">
+  {{ render '@s-form--login' }}
+  <footer>
+    <a href="https://tacc.utexas.edu/about/security-and-compliance/">
+      Security
+    </a>
+    <a href="https://tacc.utexas.edu/use-tacc/user-policies/">
+      Policies
+    </a>
+  </footer>
+</div>

package/src/lib/_imports/trumps/s-form-page/s-form-page.hbs

@@ -0,0 +1,13 @@
+<div class="s-form-page">
+  <form>
+    [ form goes here ]
+  </form>
+  <footer>
+    <a href="https://tacc.utexas.edu/about/security-and-compliance/">
+      Security
+    </a>
+    <a href="https://tacc.utexas.edu/use-tacc/user-policies/">
+      Policies
+    </a>
+  </footer>
+</div>

package/src/lib/_imports/trumps/s-form-page.css

@@ -0,0 +1,47 @@
+@import url("../tools/media-queries.css");
+
+.s-form-page {
+  padding-block: var(--global-space--section-gap);
+}
+
+.s-form-page > :where(form, div),
+.s-form-page > footer {
+  width: 100%;
+  max-width: 630px;
+
+  margin-inline: auto;
+}
+
+.s-form-page > :where(form, div) {
+  padding: 50px;
+
+  border: var(--global-border--normal);
+  border-color: var(--global-color-primary--dark);
+  background-color: var(--global-color-background--app);
+
+  /* To remove left+right borders when form hits page edge */
+  @media (width <= 630px) {
+    border-inline: 0;
+  }
+}
+
+.s-form-page > footer {
+  display: flex;
+  gap: 1.5em;
+  margin-top: var(--global-space--normal);
+
+  font-family: var(--global-font-family--sans--cms);
+  font-size: var(--global-font-size--small);
+  font-weight: var(--bold);
+
+  @media (--narrow-and-below) {
+    justify-content: center;
+  }
+  @media (--narrow-and-above) {
+    justify-content: flex-end;
+  }
+}
+.s-form-page > footer a {
+  color: var(--global-color-primary--x-dark);
+  font-weight: var(--bold);
+}

package/src/lib/_imports/trumps/s-form.selectors.css

@@ -1,6 +1,8 @@
 @custom-selector :--s-form
     .s-form;
 
+/* Generic */
+
 @custom-selector :--s-form__desc
     :where(.s-form > :is(h1, h2, h3, h4, h5, h6) + p);
 @custom-selector :--s-form__title
@@ -36,3 +38,10 @@
 
 @custom-selector :--s-form__button
     :where(.s-form button);
+
+/* Login */
+
+@custom-selector :--s-form--login
+    .s-form--login;
+@custom-selector :--s-form__nav
+    :where(.s-form > nav);