├── .browserslistrc
├── public
    ├── favicon.ico
    └── index.html
├── babel.config.js
├── src
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── BaseButton.vue
    │   ├── BaseErrorMessage.vue
    │   ├── BaseRadioGroup.vue
    │   ├── BaseCheckbox.vue
    │   ├── BaseRadio.vue
    │   ├── BaseInput.vue
    │   └── BaseSelect.vue
    ├── features
    │   ├── UniqueID.js
    │   └── SetupFormComponent.js
    ├── main.js
    ├── views
    │   ├── SimpleForm.vue
    │   └── ComponentsForm.vue
    └── App.vue
├── .editorconfig
├── .gitignore
├── db.json
├── README.md
├── .eslintrc.js
└── package.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Pop/validating-vue3-forms/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Pop/validating-vue3-forms/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/BaseButton.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <button class="button">
3 |     <slot/>
4 |   </button>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/src/features/UniqueID.js:
--------------------------------------------------------------------------------
 1 | let UUID = 1
 2 | 
 3 | export default function UniqueID () {
 4 |   const getID = () => {
 5 |     UUID++
 6 |     return UUID
 7 |   }
 8 | 
 9 |   return {
10 |     getID
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/src/components/BaseErrorMessage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <p
 3 |     :id="id"
 4 |     aria-live="assertive"
 5 |     class="errorMessage"
 6 |   >
 7 |     <slot />
 8 |   </p>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   props: {
14 |     id: {
15 |       type: [String, Number],
16 |       required: true
17 |     }
18 |   }
19 | }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/features/SetupFormComponent.js:
--------------------------------------------------------------------------------
 1 | export default function SetupFormComponent (props, { emit }) {
 2 |   const updateValue = (event) => {
 3 |     let val = event.target.value
 4 | 
 5 |     if (event.target.type === 'checkbox') val = event.target.checked
 6 |     if (event.target.type === 'radio') val = props.value
 7 | 
 8 |     emit('update:modelValue', val)
 9 |   }
10 | 
11 |   return { updateValue }
12 | }
13 | 


--------------------------------------------------------------------------------
/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "events": [
 3 |         {
 4 |             "id": 1,
 5 |             "category": "animal welfare",
 6 |             "title": "Frenz of bunz",
 7 |             "description": "🐰 an frenz",
 8 |             "location": "Zoom - stay safe",
 9 |             "pets": 1,
10 |             "extras": {
11 |                 "catering": true,
12 |                 "music": true
13 |             }
14 |         }
15 |     ]
16 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue 3 Forms
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | yarn lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   parser: 'vue-eslint-parser',
 7 |   parserOptions: {
 8 |     parser: '@babel/eslint-parser',
 9 |     ecmaVersion: 2020,
10 |     sourceType: 'module',
11 |   },
12 |   extends: [
13 |     'eslint:recommended',
14 |     'plugin:vue/vue3-recommended',
15 |     'prettier',
16 |   ],
17 |   rules: {
18 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
19 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
20 |   }
21 | };


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import upperFirst from 'lodash/upperFirst'
 4 | import camelCase from 'lodash/camelCase'
 5 | 
 6 | const requireComponent = require.context(
 7 |   './components',
 8 |   false,
 9 |   /Base[A-Z]\w+\.(vue|js)$/
10 | )
11 | 
12 | const app = createApp(App)
13 | 
14 | requireComponent.keys().forEach(fileName => {
15 |   const componentConfig = requireComponent(fileName)
16 | 
17 |   const componentName = upperFirst(
18 |     camelCase(fileName.replace(/^\.\/(.*)\.\w+$/, '$1'))
19 |   )
20 | 
21 |   app.component(componentName, componentConfig.default || componentConfig)
22 | })
23 | 
24 | app.mount('#app')
25 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/components/BaseRadioGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <component
 4 |       :is="vertical ? 'div' : 'span'"
 5 |       v-for="opts in options"
 6 |       :key="opts.value"
 7 |       :style="vertical ? '' : 'margin-right: 20px;'"
 8 |     >
 9 |       <BaseRadio
10 |         :name="name"
11 |         :label="opts.label"
12 |         :model-value="modelValue"
13 |         :value="opts.value"
14 |         @update:model-value="$emit('update:modelValue', $event)"
15 |       />
16 |     </component>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   props: {
23 |     vertical: {
24 |       type: Boolean,
25 |       default: false
26 |     },
27 |     modelValue: {
28 |       type: [String, Number],
29 |       required: true
30 |     },
31 |     options: {
32 |       type: Array,
33 |       required: true
34 |     },
35 |     name: {
36 |       type: String,
37 |       required: true
38 |     }
39 |   }
40 | }
41 | </script>
42 | 


--------------------------------------------------------------------------------
/src/components/BaseCheckbox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <input
 3 |     v-bind="{ ...$attrs, onChange: updateValue }"
 4 |     :id="uuid"
 5 |     :checked="modelValue"
 6 |     type="checkbox"
 7 |     class="field"
 8 |   />
 9 |   <label
10 |     v-if="label"
11 |     :for="uuid"
12 |   >
13 |     {{ label }}
14 |   </label>
15 |   <BaseErrorMessage
16 |     v-if="error"
17 |     :id="`${uuid}-error`"
18 |   >
19 |     {{ error }}
20 |   </BaseErrorMessage>
21 | </template>
22 | 
23 | <script>
24 | import UniqueID from '@/features/UniqueID'
25 | import SetupFormComponent from '@/features/SetupFormComponent'
26 | 
27 | export default {
28 |   props: {
29 |     label: {
30 |       type: String,
31 |       default: ''
32 |     },
33 |     modelValue: {
34 |       type: Boolean
35 |     },
36 |     error: {
37 |       type: String,
38 |       default: ''
39 |     }
40 |   },
41 |   setup (props, context) {
42 |     const uuid = UniqueID().getID()
43 |     const { updateValue } = SetupFormComponent(props, context)
44 | 
45 |     return {
46 |       updateValue,
47 |       uuid
48 |     }
49 |   }
50 | }
51 | </script>
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "validating-forms-vue-3",
 3 | 	"version": "0.1.0",
 4 | 	"private": true,
 5 | 	"scripts": {
 6 | 		"serve": "vue-cli-service serve",
 7 | 		"build": "vue-cli-service build",
 8 | 		"lint": "vue-cli-service lint"
 9 | 	},
10 | 	"dependencies": {
11 | 		"core-js": "^3.6.4",
12 | 		"vee-validate": "next",
13 | 		"vue": "^3.5.13"
14 | 	},
15 | 	"devDependencies": {
16 | 		"@babel/eslint-parser": "^7.26.5",
17 | 		"@vue/cli-plugin-babel": "^5.0.8",
18 | 		"@vue/cli-plugin-eslint": "^5.0.8",
19 | 		"@vue/cli-service": "^5.0.8",
20 | 		"@vue/compiler-sfc": "^3.5.13",
21 | 		"eslint": "^8.57.1",
22 | 		"eslint-config-prettier": "^10.0.1",
23 | 		"eslint-plugin-import": "^2.20.1",
24 | 		"eslint-plugin-node": "^11.0.0",
25 | 		"eslint-plugin-promise": "^4.2.1",
26 | 		"eslint-plugin-standard": "^4.0.0",
27 | 		"eslint-plugin-vue": "^9.32.0",
28 | 		"lodash": "^4.17.15",
29 | 		"prettier": "^3.4.2",
30 | 		"sass": "^1.25.0",
31 | 		"sass-loader": "^8.0.2",
32 | 		"vue-eslint-parser": "^9.4.3"
33 | 	},
34 | 	"resolutions": {
35 | 		"postcss": "^8.4.31",
36 | 		"cross-spawn": "^6.0.6"
37 | 	}
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/BaseRadio.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <input
 3 |       v-bind="{ ...$attrs, onChange: updateValue }"
 4 |       :id="uuid"
 5 |       type="radio"
 6 |       :checked="modelValue === value"
 7 |     />
 8 |   <label
 9 |     v-if="label"
10 |     :for="uuid"
11 |   >
12 |     {{ label }}
13 |   </label>
14 |   <BaseErrorMessage
15 |     v-if="error"
16 |     :id="`${uuid}-error`"
17 |   >
18 |     {{ error }}
19 |   </BaseErrorMessage>
20 | </template>
21 | 
22 | <script>
23 | import UniqueID from '@/features/UniqueID'
24 | import SetupFormComponent from '@/features/SetupFormComponent'
25 | 
26 | export default {
27 |   props: {
28 |     label: {
29 |       type: String,
30 |       default: ''
31 |     },
32 |     modelValue: {
33 |       type: [String, Number]
34 |     },
35 |     value: {
36 |       type: [String, Number]
37 |     },
38 |     error: {
39 |       type: String,
40 |       default: ''
41 |     }
42 |   },
43 |   setup (props, context) {
44 |     const uuid = UniqueID().getID()
45 |     const { updateValue } = SetupFormComponent(props, context)
46 | 
47 |     return {
48 |       updateValue,
49 |       uuid
50 |     }
51 |   }
52 | }
53 | </script>
54 | 


--------------------------------------------------------------------------------
/src/components/BaseInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <label
 3 |     v-if="label"
 4 |     :for="uuid"
 5 |   >
 6 |     {{ label }}
 7 |   </label>
 8 |   <input
 9 |     v-bind="{
10 |       ...$attrs,
11 |       onInput: updateValue
12 |     }"
13 |     :id="uuid"
14 |     class="field"
15 |     :value="modelValue"
16 |     :placeholder="label"
17 |     :aria-describedby="error ? `${uuid}-error` : null"
18 |     :aria-invalid="error ? true : false"
19 |     :class="{ error }"
20 |   >
21 |   <BaseErrorMessage
22 |     v-if="error"
23 |     :id="`${uuid}-error`"
24 |   >
25 |     {{ error }}
26 |   </BaseErrorMessage>
27 | </template>
28 | 
29 | <script>
30 | import SetupFormComponent from '@/features/SetupFormComponent'
31 | import UniqueID from '@/features/UniqueID'
32 | 
33 | export default {
34 |   props: {
35 |     label: {
36 |       type: String,
37 |       default: ''
38 |     },
39 |     error: {
40 |       type: String,
41 |       default: ''
42 |     },
43 |     modelValue: {
44 |       type: [String, Number],
45 |       default: ''
46 |     }
47 |   },
48 |   setup (props, context) {
49 |     const { updateValue } = SetupFormComponent(props, context)
50 |     const uuid = UniqueID().getID()
51 | 
52 |     return {
53 |       updateValue,
54 |       uuid
55 |     }
56 |   }
57 | }
58 | </script>
59 | 


--------------------------------------------------------------------------------
/src/components/BaseSelect.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <label
 3 |     v-if="label"
 4 |     :for="uuid"
 5 |   >
 6 |     {{ label }}
 7 |   </label>
 8 |   <select
 9 |     v-bind="{
10 |       ...$attrs,
11 |       onChange: updateValue
12 |     }"
13 |     :id="uuid"
14 |     class="field"
15 |     :value="modelValue"
16 |     :aria-describedby="error ? `${uuid}-error` : null"
17 |     :aria-invalid="error ? true : false"
18 |     :class="{ error }"
19 |   >
20 |     <option
21 |       v-for="option in options"
22 |       :key="option"
23 |       :value="option"
24 |       :selected="option === modelValue"
25 |     >
26 |       {{ option }}
27 |     </option>
28 |   </select>
29 |   <BaseErrorMessage
30 |     v-if="error"
31 |     :id="`${uuid}-error`"
32 |   >
33 |     {{ error }}
34 |   </BaseErrorMessage>
35 | </template>
36 | 
37 | <script>
38 | import SetupFormComponent from '@/features/SetupFormComponent'
39 | import UniqueID from '@/features/UniqueID'
40 | 
41 | export default {
42 |   props: {
43 |     options: {
44 |       type: Array,
45 |       required: true
46 |     },
47 |     label: {
48 |       type: String,
49 |       default: ''
50 |     },
51 |     error: {
52 |       type: String,
53 |       default: ''
54 |     },
55 |     modelValue: {
56 |       type: [String, Number]
57 |     }
58 |   },
59 |   setup (props, context) {
60 |     const { updateValue } = SetupFormComponent(props, context)
61 |     const uuid = UniqueID().getID()
62 | 
63 |     return {
64 |       updateValue,
65 |       uuid
66 |     }
67 |   }
68 | }
69 | </script>
70 | 


--------------------------------------------------------------------------------
/src/views/SimpleForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <h1>Create an event</h1>
  4 |     <form>
  5 | 
  6 |       <label>Select a category</label>
  7 |       <select v-model="event.category">
  8 |         <option
  9 |           v-for="option in categories"
 10 |           :key="option"
 11 |           :value="option"
 12 |           :selected="option === event.category"
 13 |         >{{ option }}</option>
 14 |       </select>
 15 | 
 16 |       <h3>Name & describe your event</h3>
 17 | 
 18 |       <label>Title</label>
 19 |       <input
 20 |         v-model="event.title"
 21 |         type="text"
 22 |         placeholder="Title"
 23 |         class="field"
 24 |       >
 25 | 
 26 |       <label>Description</label>
 27 |       <input
 28 |         v-model="event.description"
 29 |         type="text"
 30 |         placeholder="Description"
 31 |         class="field"
 32 |       />
 33 | 
 34 |       <h3>Where is your event?</h3>
 35 | 
 36 |       <label>Location</label>
 37 |       <input
 38 |         v-model="event.location"
 39 |         type="text"
 40 |         placeholder="Location"
 41 |         class="field"
 42 |       />
 43 | 
 44 |       <h3>Are pets allowed?</h3>
 45 |       <div>
 46 |         <input
 47 |             v-model="event.pets"
 48 |             type="radio"
 49 |             :value="1"
 50 |             name="pets"
 51 |           />
 52 |         <label>Yes</label>
 53 |       </div>
 54 | 
 55 |       <div>
 56 |         <input
 57 |           v-model="event.pets"
 58 |           type="radio"
 59 |           :value="0"
 60 |           name="pets"
 61 |         />
 62 |         <label>No</label>
 63 |       </div>
 64 | 
 65 |       <h3>Extras</h3>
 66 |       <div>
 67 |         <input
 68 |           v-model="event.extras.catering"
 69 |           type="checkbox"
 70 |           class="field"
 71 |         />
 72 |         <label>Catering</label>
 73 |       </div>
 74 | 
 75 |       <div>
 76 |         <input
 77 |           v-model="event.extras.music"
 78 |           type="checkbox"
 79 |           class="field"
 80 |         />
 81 |         <label>Live music</label>
 82 |       </div>
 83 | 
 84 |       <button type="submit">Submit</button>
 85 |     </form>
 86 | 
 87 |     <pre>{{ event }}</pre>
 88 |   </div>
 89 | </template>
 90 | 
 91 | <script>
 92 | export default {
 93 |   data () {
 94 |     return {
 95 |       categories: [
 96 |         'sustainability',
 97 |         'nature',
 98 |         'animal welfare',
 99 |         'housing',
100 |         'education',
101 |         'food',
102 |         'community'
103 |       ],
104 |       event: {
105 |         category: '',
106 |         title: '',
107 |         description: '',
108 |         location: '',
109 |         pets: 1,
110 |         extras: {
111 |           catering: false,
112 |           music: false
113 |         }
114 |       }
115 |     }
116 |   }
117 | }
118 | </script>
119 | 


--------------------------------------------------------------------------------
/src/views/ComponentsForm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <h1>Create an Event</h1>
  4 |     <form @submit.prevent="createEvent">
  5 |       <BaseSelect
  6 |         v-model="event.category"
  7 |         label="Select a category"
  8 |         :options="categories"
  9 |         error="This field is required"
 10 |       />
 11 | 
 12 |       <h3>Name & describe your event</h3>
 13 |       <BaseInput
 14 |         v-model="event.title"
 15 |         label="Title"
 16 |         type="text"
 17 |         error="This field is required"
 18 |       />
 19 | 
 20 |       <BaseInput
 21 |         v-model="event.description"
 22 |         label="Description"
 23 |         type="text"
 24 |       />
 25 | 
 26 |       <h3>Where is your event?</h3>
 27 |       <BaseInput
 28 |         v-model="event.location"
 29 |         label="Location"
 30 |         type="text"
 31 |       />
 32 | 
 33 |       <h3>Are pets allowed?</h3>
 34 |       <BaseRadioGroup
 35 |         v-model="event.pets"
 36 |         name="pets"
 37 |         :options="[
 38 |           { value: 1, label: 'Yes' },
 39 |           { value: 0, label: 'No' }
 40 |         ]"
 41 |       />
 42 | 
 43 |       <template v-if="event.pets === 0">
 44 |         <h3>Are you sure? 🐶</h3>
 45 |         <BaseRadioGroup
 46 |           v-model="event.petsagain"
 47 |           name="petsagain"
 48 |           :options="[
 49 |             { value: 1, label: 'Yes' },
 50 |             { value: 0, label: 'No' }
 51 |           ]"
 52 |         />
 53 |       </template>
 54 | 
 55 |       <h3>Extras</h3>
 56 |       <div>
 57 |         <BaseCheckbox
 58 |           v-model="event.extras.catering"
 59 |           label="Catering"
 60 |         />
 61 |       </div>
 62 | 
 63 |       <div>
 64 |         <BaseCheckbox
 65 |           v-model="event.extras.music"
 66 |           label="Live music"
 67 |         />
 68 |       </div>
 69 | 
 70 |       <div>
 71 |         <BaseButton
 72 |           type="submit"
 73 |           class="-fill-gradient"
 74 |           something="else"
 75 |         >
 76 |           Submit
 77 |         </BaseButton>
 78 |       </div>
 79 |     </form>
 80 | 
 81 |     <pre>{{ event }}</pre>
 82 |   </div>
 83 | </template>
 84 | 
 85 | <script>
 86 | export default {
 87 |   data () {
 88 |     return {
 89 |       categories: [
 90 |         'sustainability',
 91 |         'nature',
 92 |         'animal welfare',
 93 |         'housing',
 94 |         'education',
 95 |         'food',
 96 |         'community'
 97 |       ],
 98 |       event: {
 99 |         category: '',
100 |         title: '',
101 |         description: '',
102 |         location: '',
103 |         pets: 1,
104 |         extras: {
105 |           catering: false,
106 |           music: false
107 |         }
108 |       }
109 |     }
110 |   },
111 |   methods: {
112 |     createEvent () {
113 |       console.log('submit')
114 |     }
115 |   }
116 | }
117 | </script>
118 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <SimpleForm />
  4 | 
  5 |     <hr>
  6 | 
  7 |     <ComponentsForm />
  8 |   </div>
  9 | </template>
 10 | 
 11 | <script>
 12 | import SimpleForm from '@/views/SimpleForm'
 13 | import ComponentsForm from '@/views/ComponentsForm'
 14 | 
 15 | export default {
 16 |   components: { SimpleForm, ComponentsForm }
 17 | }
 18 | </script>
 19 | 
 20 | <style>
 21 | html {
 22 |   -webkit-text-size-adjust: 100%;
 23 |   -webkit-font-smoothing: antialiased;
 24 |   -moz-osx-font-smoothing: grayscale;
 25 | }
 26 | body {
 27 |   margin: 0;
 28 |   font-family: "Open Sans", sans-serif;
 29 |   font-size: 16px;
 30 |   line-height: 1.5;
 31 | }
 32 | #app {
 33 |   box-sizing: border-box;
 34 |   width: 500px;
 35 |   padding: 0 20px 20px;
 36 |   margin: 0 auto;
 37 | }
 38 | hr {
 39 |   box-sizing: content-box;
 40 |   height: 0;
 41 |   overflow: visible;
 42 | }
 43 | a {
 44 |   color: #39b982;
 45 |   font-weight: 600;
 46 |   background-color: transparent;
 47 | }
 48 | img {
 49 |   border-style: none;
 50 |   width: 100%;
 51 | }
 52 | h1,
 53 | h2,
 54 | h3,
 55 | h4,
 56 | h5,
 57 | h6 {
 58 |   display: flex;
 59 |   align-items: center;
 60 |   font-family: "Montserrat", sans-serif;
 61 | }
 62 | h1 {
 63 |   font-size: 50px;
 64 |   font-weight: 700;
 65 | }
 66 | h2 {
 67 |   font-size: 38px;
 68 |   font-weight: 700;
 69 | }
 70 | h3 {
 71 |   font-size: 28px;
 72 |   font-weight: 700;
 73 | }
 74 | h4 {
 75 |   font-size: 21px;
 76 |   font-weight: 700;
 77 | }
 78 | h5 {
 79 |   font-size: 16px;
 80 |   font-weight: 700;
 81 | }
 82 | h6 {
 83 |   font-size: 15px;
 84 |   font-weight: 700;
 85 | }
 86 | b,
 87 | strong {
 88 |   font-weight: bolder;
 89 | }
 90 | small {
 91 |   font-size: 80%;
 92 | }
 93 | .eyebrow {
 94 |   font-size: 20px;
 95 | }
 96 | .-text-primary {
 97 |   color: #39b982;
 98 | }
 99 | .-text-base {
100 |   color: #000;
101 | }
102 | .-text-error {
103 |   color: tomato;
104 | }
105 | .-text-gray {
106 |   color: rgba(0, 0, 0, 0.5);
107 | }
108 | .-shadow {
109 |   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.13);
110 | }
111 | .badge {
112 |   display: inline-flex;
113 |   height: 26px;
114 |   width: auto;
115 |   padding: 0 7px;
116 |   margin: 0 5px;
117 |   background: transparent;
118 |   border-radius: 13px;
119 |   font-size: 13px;
120 |   font-weight: 400;
121 |   line-height: 26px;
122 | }
123 | .badge.-fill-gradient {
124 |   background: linear-gradient(to right, #16c0b0, #84cf6a);
125 |   color: #fff;
126 | }
127 | button,
128 | label,
129 | input,
130 | optgroup,
131 | select,
132 | textarea {
133 |   display: inline-flex;
134 |   font-family: "Open sans", sans-serif;
135 |   font-size: 100%;
136 |   line-height: 1.15;
137 |   margin: 0;
138 | }
139 | button,
140 | input {
141 |   overflow: visible;
142 | }
143 | button,
144 | select {
145 |   text-transform: none;
146 | }
147 | button,
148 | [type="button"],
149 | [type="reset"],
150 | [type="submit"] {
151 |   -webkit-appearance: none;
152 | }
153 | button::-moz-focus-inner,
154 | [type="button"]::-moz-focus-inner,
155 | [type="reset"]::-moz-focus-inner,
156 | [type="submit"]::-moz-focus-inner {
157 |   border-style: none;
158 |   padding: 0;
159 | }
160 | button:-moz-focusring,
161 | [type="button"]:-moz-focusring,
162 | [type="reset"]:-moz-focusring,
163 | [type="submit"]:-moz-focusring {
164 |   outline: 2px solid #39b982;
165 | }
166 | label {
167 |   color: rgba(0, 0, 0, 0.5);
168 |   font-weight: 700;
169 | }
170 | input,
171 | textarea {
172 |   box-sizing: border-box;
173 |   border: solid 1px rgba(0, 0, 0, 0.4);
174 | }
175 | input.error,
176 | select.error {
177 |   margin-bottom: 0;
178 | }
179 | input + p.errorMessage {
180 |   margin-bottom: 24px;
181 | }
182 | textarea {
183 |   width: 100%;
184 |   overflow: auto;
185 |   font-size: 20px;
186 | }
187 | [type="checkbox"],
188 | [type="radio"] {
189 |   box-sizing: border-box;
190 |   padding: 0;
191 |   margin-right: 0.5rem;
192 | }
193 | [type="number"]::-webkit-inner-spin-button,
194 | [type="number"]::-webkit-outer-spin-button {
195 |   height: auto;
196 | }
197 | [type="search"] {
198 |   -webkit-appearance: textfield;
199 |   outline-offset: -2px;
200 | }
201 | [type="search"]::-webkit-search-decoration {
202 |   -webkit-appearance: none;
203 | }
204 | [type="text"],
205 | [type="number"],
206 | [type="search"],
207 | [type="password"] {
208 |   height: 52px;
209 |   width: 100%;
210 |   padding: 0 10px;
211 |   font-size: 20px;
212 | }
213 | [type="text"]:focus,
214 | [type="number"]:focus,
215 | [type="search"]:focus,
216 | [type="password"]:focus {
217 |   border-color: #39b982;
218 | }
219 | ::-webkit-file-upload-button {
220 |   -webkit-appearance: button;
221 |   font: inherit;
222 | }
223 | [hidden] {
224 |   display: none;
225 | }
226 | .error {
227 |   border: 1px solid red;
228 | }
229 | select {
230 |   width: 100%;
231 |   height: 52px;
232 |   padding: 0 24px 0 10px;
233 |   vertical-align: middle;
234 |   background: #fff
235 |     url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
236 |     no-repeat right 12px center;
237 |   background-size: 8px 10px;
238 |   border: solid 1px rgba(0, 0, 0, 0.4);
239 |   border-radius: 0;
240 |   -webkit-appearance: none;
241 |   -moz-appearance: none;
242 |   appearance: none;
243 | }
244 | select:focus {
245 |   border-color: #39b982;
246 |   outline: 0;
247 | }
248 | select:focus::ms-value {
249 |   color: #000;
250 |   background: #fff;
251 | }
252 | select::ms-expand {
253 |   opacity: 0;
254 | }
255 | .field {
256 |   margin-bottom: 24px;
257 | }
258 | .error {
259 |   border: 1px solid red;
260 | }
261 | .errorMessage {
262 |   color: red;
263 | }
264 | .button {
265 |   display: inline-flex;
266 |   align-items: center;
267 |   justify-content: space-between;
268 |   height: 52px;
269 |   padding: 0 40px;
270 |   background: transparent;
271 |   border: none;
272 |   border-radius: 6px;
273 |   text-align: center;
274 |   font-weight: 600;
275 |   white-space: nowrap;
276 |   transition: all 0.2s linear;
277 | }
278 | .button:hover {
279 |   -webkit-transform: scale(1.02);
280 |   transform: scale(1.02);
281 |   box-shadow: 0 7px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
282 | }
283 | .button:active {
284 |   -webkit-transform: scale(1);
285 |   transform: scale(1);
286 |   box-shadow: none;
287 | }
288 | .button:focus {
289 |   outline: 0;
290 | }
291 | .button:disabled {
292 |   -webkit-transform: scale(1);
293 |   transform: scale(1);
294 |   box-shadow: none;
295 | }
296 | .button + .button {
297 |   margin-left: 1em;
298 | }
299 | .button.-fill-gradient {
300 |   background: linear-gradient(to right, #16c0b0, #84cf6a);
301 |   color: #ffffff;
302 | }
303 | .button.-fill-gray {
304 |   background: rgba(0, 0, 0, 0.5);
305 |   color: #ffffff;
306 | }
307 | .button.-size-small {
308 |   height: 32px;
309 | }
310 | .button.-icon-right {
311 |   text-align: left;
312 |   padding: 0 20px;
313 | }
314 | .button.-icon-right > .icon {
315 |   margin-left: 10px;
316 | }
317 | .button.-icon-left {
318 |   text-align: right;
319 |   padding: 0 20px;
320 | }
321 | .button.-icon-left > .icon {
322 |   margin-right: 10px;
323 | }
324 | .button.-icon-center {
325 |   padding: 0 20px;
326 | }
327 | </style>
328 | 


--------------------------------------------------------------------------------