From 3cc5d7ba1de7aee2c5c1684fdccc2b1ce12bf241 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Wed, 9 Aug 2023 11:22:52 +1000
Subject: [PATCH] Copy form styles to v3

---
 app/webpacker/css/admin_v3/all.scss          |   2 +-
 app/webpacker/css/admin_v3/shared/forms.scss | 261 +++++++++++++++++++
 2 files changed, 262 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/shared/forms.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 7f93f602ad..0f48247044 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -31,7 +31,7 @@
 @import "shared/typography"; // admin_v3
 @import "shared/tables"; // admin_v3
 @import "shared/icons"; // admin_v3
-@import "../admin/shared/forms";
+@import "shared/forms"; // admin_v3
 @import "shared/layout"; // admin_v3
 @import "../admin/shared/scroll_bar";
 
diff --git a/app/webpacker/css/admin_v3/shared/forms.scss b/app/webpacker/css/admin_v3/shared/forms.scss
new file mode 100644
index 0000000000..da593e3300
--- /dev/null
+++ b/app/webpacker/css/admin_v3/shared/forms.scss
@@ -0,0 +1,261 @@
+$text-inputs: "input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel]";
+
+#{$text-inputs},
+input[type="date"],
+input[type="datetime"],
+input[type="time"],
+input[type="number"],
+textarea,
+fieldset {
+  @include border-radius($border-radius);
+  padding: $vpadding-txt $hpadding-txt;
+  border: 1px solid $color-txt-brd;
+  color: $color-txt-text;
+  font-size: 90%;
+
+  &:focus {
+    outline: none;
+    border-color: $color-txt-hover-brd;
+  }
+
+  &[disabled] {
+    opacity: 0.7;
+  }
+}
+
+textarea {
+  line-height: 19px;
+}
+
+.fullwidth {
+  width: 100%;
+}
+
+label {
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 85%;
+  display: inline;
+  margin-bottom: 5px;
+  color: $color-4;
+
+  &.inline {
+    display: inline-block !important;
+  }
+
+  &.block {
+    display: block !important;
+  }
+}
+
+.label-block label {
+  display: block;
+}
+
+span.info {
+  font-style: italic;
+  font-size: 85%;
+  color: lighten($color-body-text, 15);
+  display: block;
+  line-height: 20px;
+  margin: 5px 0;
+}
+
+.field {
+  padding: 10px 0;
+
+  &.checkbox {
+    min-height: 70px;
+
+    input[type="checkbox"] {
+      display: inline-block;
+      width: auto;
+    }
+
+    label {
+      cursor: pointer;
+      display: block;
+    }
+  }
+
+  ul {
+    border-top: 1px solid $color-border;
+    list-style: none;
+    padding-top: 5px;
+
+    li {
+      display: inline-block;
+      padding-right: 10px;
+
+      label {
+        font-weight: normal;
+        text-transform: none;
+      }
+      &.white-space-nowrap {
+        white-space: nowrap;
+      }
+    }
+  }
+
+  &.withError {
+    .field_with_errors {
+      label {
+        color: $color-error;
+      }
+
+      input {
+        border-color: $color-error;
+      }
+    }
+    .formError {
+      color: $color-error;
+      font-style: italic;
+      font-size: 85%;
+    }
+  }
+}
+
+fieldset {
+  box-shadow: none;
+  box-sizing: border-box;
+  border-color: $color-border;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  margin-left: 0;
+  margin-right: 0;
+  position: relative;
+  margin-bottom: 35px;
+  padding: 10px 0 15px 0;
+  background-color: transparent;
+  border-left: none;
+  border-right: none;
+  border-radius: 0;
+
+  &.no-border-bottom {
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+
+  &.no-border-top {
+    border-top: none;
+    padding-top: 0;
+  }
+
+  legend {
+    background-color: $color-1;
+    color: $color-2;
+    font-size: 14px;
+    font-weight: 600;
+    text-transform: uppercase;
+    text-align: center;
+    padding: 8px 15px;
+    margin: 0 auto;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    i {
+      color: $color-link;
+    }
+  }
+
+  label {
+    color: lighten($color-body-text, 8);
+  }
+
+  .filter-actions {
+    margin-bottom: -32px;
+    margin-top: 15px;
+    text-align: center;
+
+    form {
+      display: inline-block;
+    }
+
+    button,
+    .button,
+    input[type="submit"],
+    input[type="button"],
+    span.or {
+      @include border-radius($border-radius);
+
+      -webkit-box-shadow: 0 0 0 15px $color-1;
+      -moz-box-shadow: 0 0 0 15px $color-1;
+      -ms-box-shadow: 0 0 0 15px $color-1;
+      -o-box-shadow: 0 0 0 15px $color-1;
+      box-shadow: 0 0 0 15px $color-1;
+
+      &:hover {
+        border-color: $color-1;
+      }
+
+      &:first-of-type {
+        margin-right: 1.25em;
+      }
+    }
+
+    span.or {
+      background-color: $color-1;
+      border-width: 5px;
+      margin-left: 5px;
+      margin-right: 5px;
+      position: relative;
+
+      -webkit-box-shadow: 0 0 0 5px $color-1;
+      -moz-box-shadow: 0 0 0 5px $color-1;
+      -ms-box-shadow: 0 0 0 5px $color-1;
+      -o-box-shadow: 0 0 0 5px $color-1;
+      box-shadow: 0 0 0 5px $color-1;
+    }
+  }
+
+  &.labels-inline {
+    .field {
+      margin-bottom: 0;
+      display: table;
+      width: 100%;
+
+      label,
+      input {
+        display: table-cell !important;
+      }
+      input {
+        width: 100%;
+      }
+
+      &.checkbox {
+        input {
+          width: auto !important;
+        }
+      }
+    }
+    .actions {
+      padding: 0;
+      text-align: right;
+    }
+  }
+}
+
+.form-buttons {
+  text-align: center;
+}
+
+select {
+  @extend input, [type="text"];
+  background-color: white;
+}
+
+.inline-checkbox {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 3px;
+
+  input,
+  label {
+    cursor: pointer;
+  }
+  label {
+    margin: 0;
+    padding-left: 0.4rem;
+  }
+}