diff options
| author | Daniil Baturin <daniil@vyos.io> | 2021-06-12 19:30:21 +0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-06-12 19:30:21 +0700 |
| commit | 1c6b21872791669a498f51acf163828adbd06768 (patch) | |
| tree | 2b2179274da3778e8cffa98a8052c31ce0935663 /sass/forms.sass | |
| parent | af7fa1daf5be256da3c61e5c87953277c0c13772 (diff) | |
| parent | be36c9e086561c5d892e7ee534459291b416064f (diff) | |
| download | community.vyos.net-1c6b21872791669a498f51acf163828adbd06768.tar.gz community.vyos.net-1c6b21872791669a498f51acf163828adbd06768.zip | |
Merge pull request #9 from Andrii-Moshenskyi/main
Add Hubspot forms styling
Diffstat (limited to 'sass/forms.sass')
| -rw-r--r-- | sass/forms.sass | 160 |
1 files changed, 160 insertions, 0 deletions
diff --git a/sass/forms.sass b/sass/forms.sass new file mode 100644 index 0000000..505bae5 --- /dev/null +++ b/sass/forms.sass @@ -0,0 +1,160 @@ +@import settings.sass + +div.hbspt-form + background-image: url(../img/forms/bg.svg) + padding-top: 25px + padding-bottom: 70px + margin-top: 50px + margin-bottom: 70px + +resp(sm) + padding-bottom: 50px + padding-top: 15px + +resp(esm) + margin-top: 30px + margin-bottom: 50px + + h1, h2, h3, h4, h5, h6 + color: $white + text-align: center + + h2 + +resp(sm) + margin-bottom: 12px !important + + form + max-width: 800px + margin-left: auto + margin-right: auto + +resp(md) + max-width: 100% + padding-left: 50px + padding-right: 50px + +resp(esm) + padding-left: 30px + padding-right: 30px + + > fieldset + max-width: 100% + margin-bottom: 20px + +resp(sm) + margin-bottom: 15px + + > div + + > label + color: $white + display: block + font-size: 16px + + > span + display: inline-block + margin-bottom: 10px + + &:empty + display: none + + > div.input + margin-right: 0 !important + display: flex + + textarea, input + width: 100% !important + color: $form-fields + font-size: 16px + font-family: sans-serif + +resp(sm) + font-size: 14px + + &.invalid + border: 2px solid red + + input + height: 46px + padding: 0 15px + +resp(sm) + height: 41px + + textarea + height: 58px + padding: 12px 15px + resize: none + line-height: 140% + +resp(sm) + height: 53px + + > ul.hs-error-msgs + padding: 0 !important + list-style-type: none + color: red + + > li + padding: 0 !important + margin: 7px 0 0 !important + font-size: 14px + +resp(sm) + margin-top: 5px !important + + &:before + content: none !important + + &.form-columns-2 + display: flex + justify-content: space-between + +resp(sm) + flex-direction: column + + > div + float: none !important + width: calc(50% - 10px) !important + +resp(sm) + width: 100% !important + + &:first-child + +resp(sm) + margin-bottom: 15px + + &.form-columns-3 + display: flex + justify-content: space-between + +resp(sm) + flex-direction: column + + > div + float: none !important + width: calc(33.33% - 13px) !important + +resp(sm) + width: 100% !important + margin-bottom: 15px + + &:last-child + +resp(sm) + margin-bottom: 0 + + > div.hs_recaptcha + display: none + + > div.hs_error_rollup + display: none + + > div.hs-submit + + > div.actions + text-align: center + + input[type=submit] + background-color: $orange + color: $black + font-weight: 700 + font-size: 16px + width: 245px + height: 60px + cursor: pointer + border: 1px solid $orange + transition: 0.3s + +resp(sm) + height: 50px + +resp(esm) + width: 100% + + &:hover + background-color: $white
\ No newline at end of file |