BigW Consortium Gitlab

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

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

9
input[type='text'].danger {
10 11 12
  background: $input-danger-bg !important;
  border-color: $input-danger-border;
  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 committed
33

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

Clement Ho committed
39 40
.form-control-label {
  @extend .col-md-2;
41 42
}

43 44 45
.inline-input-group {
  width: 250px;
}
46

47 48 49 50
.custom-form-control {
  width: 150px;
}

Clement Ho committed
51
@include media-breakpoint-up(sm) {
52 53 54 55 56 57
  .custom-form-control {
    width: 150px;
  }
}

/* Medium devices (desktops, 992px and up) */
Clement Ho committed
58
@include media-breakpoint-up(md) {
59 60 61 62 63 64
  .custom-form-control {
    width: 170px;
  }
}

/* Large devices (large desktops, 1200px and up) */
Clement Ho committed
65
@include media-breakpoint-up(lg) {
66 67 68 69
  .custom-form-control {
    width: 200px;
  }
}
70

71 72 73
.help-form .form-group {
  margin-left: 0;
  margin-right: 0;
74

Clement Ho committed
75
  .form-control-label {
76
    font-weight: $gl-font-weight-bold;
77 78
    padding-top: 4px;
  }
79

80 81 82 83 84
  .form-control {
    height: 29px;
    background: $white-light;
    font-family: $monospace_font;
  }
85

86 87
  .input-group-prepend .btn,
  .input-group-append .btn {
88 89 90 91 92 93 94 95
    padding: 3px $gl-btn-padding;
    background-color: $gray-light;
    border: 1px solid $border-color;
  }

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

97 98
    code {
      line-height: 1.8;
99
    }
100 101 102 103

    img {
      margin-right: $gl-padding;
    }
104
  }
105

Clement Ho committed
106
  @include media-breakpoint-down(xs) {
107
    padding: 0 $gl-padding;
108

Clement Ho committed
109
    .form-control-label,
110 111
    .text-block {
      padding-left: 0;
112 113 114 115
    }
  }
}

116 117 118
.fieldset-form fieldset {
  margin-bottom: 20px;
}
119 120

.form-control {
121 122
  @include box-shadow(none);
  border-radius: 2px;
123
  padding: $gl-vert-padding $gl-input-padding;
124 125 126 127

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

Clement Ho committed
128
    @include media-breakpoint-up(md) {
129 130 131
      width: $input-short-md-width;
    }
  }
132
}
133

134 135 136
.select-wrapper {
  position: relative;

137
  .fa-chevron-down {
138
    position: absolute;
139
    font-size: 10px;
140
    right: 10px;
141
    top: 12px;
142 143 144 145 146 147 148 149 150
    color: $gray-darkest;
    pointer-events: none;
  }
}

.select-control {
  padding-left: 10px;
  padding-right: 10px;
  -webkit-appearance: none;
151 152 153 154 155 156
  -moz-appearance: none;
  appearance: none;

  &::-ms-expand {
    display: none;
  }
157 158
}

159 160 161 162
.form-control-inline {
  display: inline;
}

yglukhov committed
163
.wiki-content {
164 165
  margin-top: 35px;
}
166

Clement Ho committed
167 168
.form-group .form-control-label,
.form-group .form-control-label-full-width {
169
  font-weight: $gl-font-weight-normal;
170 171
}

172
.form-control::-webkit-input-placeholder {
173
  color: $gl-text-color-secondary;
174 175 176
}

.input-group {
177 178
  .select2-container {
    display: table-cell;
179
    max-width: 180px;
180
  }
181

182 183
  .input-group-prepend,
  .input-group-append {
184
    background-color: $input-group-addon-bg;
185
  }
186

187 188
  .input-group-prepend:not(:first-child):not(:last-child),
  .input-group-append:not(:first-child):not(:last-child) {
189 190 191
    border-left: 0;
    border-right: 0;
  }
192
}
193

194
.form-text.text-muted {
195
  margin-bottom: 0;
196
  margin-top: #{$grid-size / 2};
197 198 199
}

.gl-field-error {
200
  color: $red-500;
201 202
}

203
.gl-show-field-errors {
204
  .gl-field-success-outline {
205
    border: 1px solid $green-600;
206 207

    &:focus {
208
      box-shadow: 0 0 0 1px $green-600 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-600;
209 210 211 212 213
      border: 0 none;
    }
  }

  .gl-field-error-outline {
214
    border: 1px solid $red-500;
215 216

    &:focus {
217
      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;
218 219 220 221 222
      border: 0 none;
    }
  }

  .gl-field-success-message {
223
    color: $green-600;
224 225 226
  }

  .gl-field-error-message {
227
    color: $red-500;
228 229 230 231 232 233
  }

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

Clement Ho committed
235
@include media-breakpoint-down(xs) {
236 237 238 239 240 241
  .remember-me {
    .remember-me-checkbox {
      margin-top: 0;
    }
  }
}