forms.scss 4.36 KB
Newer Older
1 2 3 4
textarea {
  resize: vertical;
}

5
input {
Jacob Schatz's avatar
Jacob Schatz committed
6
  border-radius: $border-radius-base;
7 8
}

9
input[type='text'].danger {
10
  background: $input-danger-bg !important;
11
  border-color: $red-400;
12
  text-shadow: 0 1px 1px $white-light;
13 14
}

15 16 17 18 19
.datetime-controls {
  select {
    width: 100px;
  }
}
20 21

.form-actions {
22 23 24
  margin-top: 0;
  margin-bottom: -$gl-padding;
  padding: $gl-padding;
25
  background-color: $gray-light;
26
  border-top: 1px solid $border-color;
27 28
}

29 30 31 32
label {
  &.inline-label {
    margin: 0;
  }
Phil Hughes's avatar
Phil Hughes committed
33

34
  &.label-bold {
35
    font-weight: $gl-font-weight-bold;
Phil Hughes's avatar
Phil Hughes committed
36
  }
37
}
38

39 40 41 42 43 44 45 46 47
.label-wrapper {
  display: block;
  margin: 0;
}

.form-label {
  @extend label;
}

Clement Ho's avatar
Clement Ho committed
48 49
.form-control-label {
  @extend .col-md-2;
50 51
}

52 53 54
.inline-input-group {
  width: 250px;
}
55

56 57 58 59
.custom-form-control {
  width: 150px;
}

Clement Ho's avatar
Clement Ho committed
60
@include media-breakpoint-up(sm) {
61 62 63 64 65 66
  .custom-form-control {
    width: 150px;
  }
}

/* Medium devices (desktops, 992px and up) */
Clement Ho's avatar
Clement Ho committed
67
@include media-breakpoint-up(md) {
68 69 70 71 72 73
  .custom-form-control {
    width: 170px;
  }
}

/* Large devices (large desktops, 1200px and up) */
Clement Ho's avatar
Clement Ho committed
74
@include media-breakpoint-up(lg) {
75 76 77 78
  .custom-form-control {
    width: 200px;
  }
}
79

80 81 82
.help-form .form-group {
  margin-left: 0;
  margin-right: 0;
83

Clement Ho's avatar
Clement Ho committed
84
  .form-control-label {
85
    font-weight: $gl-font-weight-bold;
86 87
    padding-top: 4px;
  }
88

89 90 91
  .form-control {
    height: 29px;
    background: $white-light;
92
    font-family: $monospace-font;
93
  }
94

95 96
  .input-group-prepend .btn,
  .input-group-append .btn {
97 98 99 100 101 102 103 104
    padding: 3px $gl-btn-padding;
    background-color: $gray-light;
    border: 1px solid $border-color;
  }

  .text-block {
    line-height: 0.8;
    padding-top: 9px;
105

106 107
    code {
      line-height: 1.8;
108
    }
109 110 111 112

    img {
      margin-right: $gl-padding;
    }
113
  }
114

Clement Ho's avatar
Clement Ho committed
115
  @include media-breakpoint-down(xs) {
116
    padding: 0 $gl-padding;
117

Clement Ho's avatar
Clement Ho committed
118
    .form-control-label,
119 120
    .text-block {
      padding-left: 0;
121 122 123 124
    }
  }
}

125 126 127
.fieldset-form fieldset {
  margin-bottom: 20px;
}
128 129

.form-control {
130
  @include box-shadow(none);
131
  border-radius: $border-radius-default;
132
  padding: $gl-vert-padding $gl-input-padding;
133 134 135 136

  &.input-short {
    width: $input-short-width;

Clement Ho's avatar
Clement Ho committed
137
    @include media-breakpoint-up(md) {
138 139 140
      width: $input-short-md-width;
    }
  }
141
}
142

143 144 145
.select-wrapper {
  position: relative;

146
  .fa-chevron-down {
147
    position: absolute;
148
    font-size: 10px;
149
    right: 10px;
150
    top: 12px;
151 152 153 154 155 156 157 158
    color: $gray-darkest;
    pointer-events: none;
  }
}

.select-control {
  padding-left: 10px;
  padding-right: 10px;
159 160 161 162 163
  appearance: none;

  &::-ms-expand {
    display: none;
  }
164 165
}

166 167 168 169
.form-control-inline {
  display: inline;
}

yglukhov's avatar
yglukhov committed
170
.wiki-content {
171 172
  margin-top: 35px;
}
173

Clement Ho's avatar
Clement Ho committed
174 175
.form-group .form-control-label,
.form-group .form-control-label-full-width {
176
  font-weight: $gl-font-weight-normal;
177 178
}

Tim Zallmann's avatar
Tim Zallmann committed
179 180

.form-control::placeholder {
181
  color: $gl-text-color-tertiary;
182 183 184
}

.input-group {
185 186
  .select2-container {
    display: table-cell;
187
    max-width: 180px;
188
  }
189

190 191
  .input-group-prepend,
  .input-group-append {
192
    background-color: $input-group-addon-bg;
193
  }
194

195 196
  .input-group-prepend:not(:first-child):not(:last-child),
  .input-group-append:not(:first-child):not(:last-child) {
197 198 199
    border-left: 0;
    border-right: 0;
  }
200
}
201

202
.form-text.text-muted {
203
  margin-bottom: 0;
204
  margin-top: #{$grid-size / 2};
205 206
}

207 208
.gl-field-error,
.invalid-feedback {
209
  color: $red-500;
210
  font-size: $gl-font-size;
211 212
}

213
.gl-show-field-errors {
Luke Bennett's avatar
Luke Bennett committed
214
  .form-control:not(textarea) {
215 216 217
    height: 34px;
  }

218
  .gl-field-success-outline {
219
    border: 1px solid $green-600;
220 221

    &:focus {
222
      box-shadow: 0 0 0 1px $green-600 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-600;
223 224 225 226 227
      border: 0 none;
    }
  }

  .gl-field-error-outline {
228
    border: 1px solid $red-500;
229 230

    &:focus {
231
      box-shadow: 0 0 0 1px $red-500 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $gl-field-focus-shadow-error;
232 233 234 235 236
      border: 0 none;
    }
  }

  .gl-field-success-message {
237
    color: $green-600;
238 239 240
  }

  .gl-field-error-message {
241
    color: $red-500;
242 243 244 245 246 247
  }

  .gl-field-hint {
    color: $gl-text-color;
  }
}
248

Clement Ho's avatar
Clement Ho committed
249
@include media-breakpoint-down(xs) {
250 251 252 253 254 255
  .remember-me {
    .remember-me-checkbox {
      margin-top: 0;
    }
  }
}
256 257 258 259 260 261 262 263 264

.input-icon-wrapper {
  position: relative;

  .input-icon-right {
    position: absolute;
    right: 0.8em;
    top: 50%;
    transform: translateY(-50%);
265
    color: $gray-600;
266 267
  }
}
268

269 270 271 272 273
.input-md {
  max-width: $input-md-width;
  width: 100%;
}

274
.input-lg {
275
  max-width: $input-lg-width;
276 277
  width: 100%;
}
278 279 280 281

.input-group-text {
  max-height: $input-height;
}