From d813bee5f15c07474e6a1971debfc742c38165b0 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 6 Jul 2022 12:29:36 -0500
Subject: [PATCH] fix(settings): tup-308, use new form css from #500

---
 .../css/src/_imports/components/c-button.css  |  7 ++
 .../_imports/components/django.cms.forms.css  | 77 +++++++++++++++++--
 .../css/src/_imports/elements/form.css        | 11 ++-
 taccsite_cms/static/site_cms/css/src/site.css |  4 +
 .../form_template/default.html                |  2 -
 5 files changed, 88 insertions(+), 13 deletions(-)
 create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/components/c-button.css

diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-button.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-button.css
new file mode 100644
index 000000000..f33d150ff
--- /dev/null
+++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-button.css
@@ -0,0 +1,7 @@
+@import url("@tacc/core-styles/src/lib/_imports/components/c-button.css");
+
+.c-button {
+  --max-width: unset;
+
+  font-size: 1.6rem;
+}
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.forms.css b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.forms.css
index c7ea23540..ddfebaba4 100644
--- a/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.forms.css
+++ b/taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.forms.css
@@ -11,25 +11,86 @@ Reference:
 Styleguide Components.DjangoCMS.Blog.App
 */
 
+
+
+/* Content */
+
 .description {
   margin-block: 25px;
 }
 
-.field-errors {
+.help-text {
   font-size: var(--global-font-size--small);
+  font-style: italic;
+  margin-top: 0.5rem; /* mimic Bootstrap _reboot.css label { margin-bottom } */
 }
+p.help-text:last-child {
+  margin-bottom: 0;
+}
+
+
+
+/* Field */
+
 .field-wrapper {
   margin-bottom: 2rem; /* mimic <p> `margin-bottom` */
 }
-.button-wrapper {
-  margin-top: 35px;
+
+.field-wrapper:not(.checkboxinput) {
+  display: flex;
+  flex-direction: column;
+  align-items: start; /* i.e. prevent stretch */
+}
+.field-wrapper:not(.checkboxinput) > .field-errors {
+  order: 1; /* i.e. move to end */
 }
 
-.help-text {
+.field-wrapper.checkboxinput {
+  display: inline-grid;
+
+  column-gap: 0.25em;
+  align-items: baseline;
+  grid-template-columns: min-content auto; /* shrink input, let label extend */
+  grid-template-areas:
+    'error _____'
+    'input label'
+    'notes notes';
+}
+.field-wrapper.checkboxinput .field-errors { grid-area: error; }
+.field-wrapper.checkboxinput input         { grid-area: input; }
+.field-wrapper.checkboxinput label         { grid-area: label; }
+.field-wrapper.checkboxinput .help-text    { grid-area: notes; }
+.field-wrapper.checkboxinput label {
+  margin-bottom: 0; /* overwrite forms.css label */
+}
+
+
+
+/* Errors */
+
+.field-errors {
   font-size: var(--global-font-size--small);
-  font-style: italic;
-  margin-top: 0.5rem; /* mimic Bootstrap _reboot.css label { margin-bottom } */
 }
-p.help-text:last-child {
-  margin-bottom: 0;
+.field-errors ul {
+  margin-top: 1rem; /* mimic ul margin-bottom */
+  margin-bottom: 0; /* overwrite ul margin-bottom */
+}
+
+
+
+/* Lists */
+
+ul.radioselect,
+ul.checkboxselectmultiple {
+  list-style: none;
+
+  padding-left: 0;
+}
+
+
+
+/* Layout */
+
+.button-wrapper {
+  margin-top: 35px;
 }
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css b/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css
index e612f094e..2dfffbdb5 100644
--- a/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css
+++ b/taccsite_cms/static/site_cms/css/src/_imports/elements/form.css
@@ -19,10 +19,12 @@ form {
 }
 
 label {
-  display: block;
   font-size: var(--global-font-size--small);
 }
-label:not(:first-child):not() {
+label:not(input[type="checkbox"] + label) {
+  display: block;
+}
+label:not(:first-child) {
   margin-top: 2rem; /* mimic <p> `margin-bottom` */
   /* margin-bottom: 0.5rem; *//* mimic Bootstrap _reboot.css */
 }
@@ -34,7 +36,10 @@ input,
 select,
 textarea {
   padding: 15px 10px;
+  border: var(--global-border--normal);
 }
-input[type="time"] {
+
+input[type="time"],
+input[type="date"] {
   font-family: var(--global-font-family--mono);
 }
diff --git a/taccsite_cms/static/site_cms/css/src/site.css b/taccsite_cms/static/site_cms/css/src/site.css
index ed6942229..5bca6fd9b 100644
--- a/taccsite_cms/static/site_cms/css/src/site.css
+++ b/taccsite_cms/static/site_cms/css/src/site.css
@@ -18,6 +18,8 @@
 /* ELEMENTS */
 /* Bootstrap performs much of this */
 @import url("_imports/elements/html-elements.css");
+/* Unique to CMS */
+@import url("./_imports/elements/form.css");
 /* Load custom element styles within custom element, not here */
 
 /* OBJECTS */
@@ -36,8 +38,10 @@
 @import url("_imports/components/bootstrap.container.css");
 @import url("_imports/components/bootstrap.figure.css");
 /* Unique to CMS */
+@import url("./_imports/components/c-button.css");
 @import url("./_imports/components/django.cms.css");
 @import url("./_imports/components/django.cms.blog.css");
+@import url("./_imports/components/django.cms.forms.css");
 @import url("./_imports/components/django.cms.post.css");
 @import url("./_imports/components/django.cms.picture.css");
 
diff --git a/taccsite_cms/templates/djangocms_forms/form_template/default.html b/taccsite_cms/templates/djangocms_forms/form_template/default.html
index 997ecd54d..8193562da 100644
--- a/taccsite_cms/templates/djangocms_forms/form_template/default.html
+++ b/taccsite_cms/templates/djangocms_forms/form_template/default.html
@@ -61,8 +61,6 @@ <h4>{% trans 'Submission successful' %}</h4>
 </div>
 
 {% addtoblock "css" %}
-    <link rel="stylesheet" href="{% static 'site_cms/css/build/app.forms.css' %}" />
-
     {% if instance.use_honeypot %}
         <style type="text/css">
             .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }