From f7ba26f875e088d3eeac9fe193f474d68ef2b9f9 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <s@hybridvision.net>
Date: Wed, 5 Feb 2020 19:43:25 -0200
Subject: [PATCH] WIP #3383 @2.5

---
 .../assets/styles/common/spacing.styl         |   6 +
 .../assets/styles/components/forms.styl       | 142 ++++++++++++++++++
 wp-content/themes/CCV/tailwind.config.js      |   1 +
 3 files changed, 149 insertions(+)
 create mode 100644 wp-content/themes/CCV/resources/assets/styles/components/forms.styl

diff --git a/wp-content/themes/CCV/resources/assets/styles/common/spacing.styl b/wp-content/themes/CCV/resources/assets/styles/common/spacing.styl
index 516131f..e4329c5 100644
--- a/wp-content/themes/CCV/resources/assets/styles/common/spacing.styl
+++ b/wp-content/themes/CCV/resources/assets/styles/common/spacing.styl
@@ -1,3 +1,9 @@
+// Apply spacing between elements but not before first one
+// Ref: https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/
+.spaced * + *
+  margin-top: 1.5em
+
+
 // Generate utility classes for padding/margin based on vw units
 // This will generate classes like pt-1v, pt-2v, pr-1v etc.
 
diff --git a/wp-content/themes/CCV/resources/assets/styles/components/forms.styl b/wp-content/themes/CCV/resources/assets/styles/components/forms.styl
new file mode 100644
index 0000000..95bfe6b
--- /dev/null
+++ b/wp-content/themes/CCV/resources/assets/styles/components/forms.styl
@@ -0,0 +1,142 @@
+input, textarea
+  &::-webkit-input-placeholder /* Chrome/Opera/Safari */
+    @apply text-dark
+    .form-light &
+      @apply text-light
+
+  &::-moz-placeholder /* Firefox 19+ */
+    @apply text-dark
+    .form-light &
+      @apply text-light
+
+  &:-ms-input-placeholder /* IE 10+ */
+    @apply text-dark
+    .form-light &
+      @apply text-light
+
+  &:-moz-placeholder /* Firefox 18- */
+    @apply text-dark
+    .form-light &
+      @apply text-light
+
+
+input, textarea, select
+  @apply text-base font-body
+  outline: none
+  background-color: transparent
+
+input[type="text"], input[type="email"], input[type="number"], select
+  appearance: none
+  border: none
+  border-radius: 0
+  padding: 0.5em 0
+  border-bottom: 2px solid
+  width: 100%
+  font-smoothing()
+
+// Hide up and down arrows on number input fields
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button
+  -webkit-appearance: none
+  margin: 0
+input[type="number"]
+  -moz-appearance: textfield
+
+//select
+//  background: transparent url(../images/arrow-down.svg) center right no-repeat
+//  background-size: 1em auto
+
+textarea
+  border: 2px solid theme('colors.dark')
+  width: 100%
+  min-height: 200px
+  padding: 1em
+
+input[type="submit"]
+  @apply relative inline-block overflow-hidden
+  @apply bg-pink text-white rounded-none
+  @apply font-bold text-xs uppercase
+  @apply px-10 py-3
+  font-smoothing()
+  appearance: none
+  cursor: pointer
+  border: none
+
+  &:hover
+    opacity: 0.85
+
+
+// Custom checkbox
+.custom-checkbox
+  position: relative
+
+  label
+    &:before
+      content: ''
+      display: inline-block
+      vertical-align: middle
+      width: 24px
+      height: @width
+      margin-right: 0.5em
+      border: 2px solid #000
+      background-color: #fff
+      background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E")
+      background-repeat: no-repeat
+      background-position: 20% 20%
+      cursor: pointer
+
+  input:checked ~ label
+    &:before
+      background-color: #000
+      border-color: @background-color
+
+  input
+    position: absolute
+    left: 0
+    top: 50%
+    transform: translateY(-50%)
+    visibility: hidden
+
+
+// Common form styling
+.form-two-cols
+  display: flex
+  flex-wrap: wrap
+  justify-content: space-between
+  > *
+    flex-basis: 47%
+
+    +below(500px)
+      flex-basis: 100%
+
+
+// HTML Forms Plugin styling
+.hf-message
+  margin: 2em 0
+  border: 2px solid
+  padding: 1em
+  background-color: #ccc
+
+  &-success
+    background-color: #e8f5e9
+    color: #4caf50
+
+// ParsleyJS validation
+.parsley-errors-list
+  @apply text-pink
+  position: relative
+  top: -2.45em
+  list-style: none
+  padding: 0
+  font-size: 0.7em
+  text-align: right
+
+.parsley-error
+  border-color: theme('colors.red') !important
+
+
+/** Search form */
+// TODO: .search-form {}
+// TODO: .search-form label {}
+// TODO: .search-form .search-field {}
+// TODO: .search-form .search-submit {}
diff --git a/wp-content/themes/CCV/tailwind.config.js b/wp-content/themes/CCV/tailwind.config.js
index db1a845..5d9e958 100644
--- a/wp-content/themes/CCV/tailwind.config.js
+++ b/wp-content/themes/CCV/tailwind.config.js
@@ -28,6 +28,7 @@ module.exports = {
       'pink-light': '#FF7EC3', // Hover colour
       'teal': '#2CC4CF', // Accent colour
       'teal-light': '#71D3DF', // Hover colour
+      'red': '#EF413D', // Errors
     },
     fontFamily: {
       'display': ['Dosis', 'sans-serif'], // Headings, labels, menus etc
-- 
2.39.5