@tacc/core-styles 2.15.0 → 2.16.1

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

@@ -0,0 +1,48 @@
+@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;
+  box-sizing: border-box;
+
+  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);