summaryrefslogtreecommitdiff
path: root/assets/sass/_form.sass
blob: 1e5e663d495107d9de9a87ea25d95a57adc5deab (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
161
162
163
164
165
166
167
@import variables
@import mixins

fieldset
  border: 1px solid #ccc
  margin-top: 20px

legend
  font-weight: 500
  font-size: size('medium')

label
  cursor: pointer
  display: block
  margin-top: 10px
  font-weight: 400

input
  &[type="number"], &[type="date"], &[type="email"], &[type="password"], &[type="text"]:not(.input-addon-field)
    color: color('light')
    border: 1px solid #ccc
    width: 300px
    max-width: 95%
    font-size: size('normal')
    height: 25px
    padding-bottom: 0
    padding-left: 4px
    font-family: sans-serif
    +appearance
    @include placeholder
      color: color('lighter')
  &[type="number"]:focus, &[type="date"]:focus, &[type="email"]:focus, &[type="password"]:focus, &[type="text"]:focus
    color: color('dark')
    border-color: rgba(82, 168, 236, 0.8)
    outline: 0
    box-shadow: 0 0 8px rgba(82, 168, 236, 0.6)

input[type="number"]
  width: 70px

input[type="text"]:not(.input-addon-field)
  &.form-numeric
    width: 70px
  &.form-datetime, &.form-date
    width: 150px
  &.form-input-large
    width: 400px
  &.form-input-small
    width: 150px

textarea:focus
  color: color('dark')
  border-color: rgba(82, 168, 236, 0.8)
  outline: 0
  box-shadow: 0 0 8px rgba(82, 168, 236, 0.6)

textarea
  padding: 4px
  border: 1px solid #ccc
  width: 400px
  max-width: 99%
  height: 200px
  font-family: sans-serif
  font-size: size('normal')
  @include placeholder
    color: color('lighter')

select
  font-size: 1.0em
  max-width: 95%
  &:focus
    outline: 0

select[multiple]
  width: 300px

.tag-autocomplete
  width: 400px

span.select2-container
  margin-top: 2px

.form-actions
  padding-top: 20px
  clear: both

.form-required
  color: red
  padding-left: 5px
  font-weight: bold

  @include xs-device
    display: none

input[type="text"].form-max-width
  width: 100%

input.form-error, textarea.form-error
  border: 2px solid #b94a48

input.form-error:focus, textarea.form-error:focus
  box-shadow: none
  border: 2px solid #b94a48

.form-errors
  color: color('error')
  list-style-type: none

ul.form-errors li
  margin-left: 0

.form-help
  font-size: size('small')
  color: brown
  margin-bottom: 15px

.form-inline
  padding: 0
  margin: 0
  border: none
  label
    display: inline
    padding-right: 3px
  input, select
    margin: 0 15px 0 0
  .form-required
    display: none
  .form-actions
    display: inline-block
  .js-submit-buttons-rendered
    display: inline-block

.form-inline-group
  display: inline

.form-columns
  +display-flex
  +flex-direction(row)
  +flex-wrap
  +justify-content(flex-start)

  .form-column
    margin-right: 25px
    flex-grow: 1

  fieldset
    margin-top: 0

.form-login
  max-width: 350px
  margin: 5% auto 0

  @include xs-device
    margin-left: 5px

  li
    margin-left: 25px
    line-height: 25px
  h2
    margin-bottom: 30px
    font-weight: bold

.reset-password
  margin-top: 20px
  margin-bottom: 20px
  a
    color: color('light')