summaryrefslogtreecommitdiff
path: root/sass/forms.sass
blob: 505bae586f4583c02f66ae36e2b148733606148c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
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