search.scss 4.96 KB
Newer Older
1 2 3
$search-dropdown-max-height: 400px;
$search-avatar-size: 16px;

4 5
.search-results {
  .search-result-row {
6 7 8 9 10
    border-bottom: 1px solid $border-color;
    padding-bottom: $gl-padding;
    margin-bottom: $gl-padding;

    &:last-child {
11
      border-bottom: 0;
12
    }
13
  }
14 15 16 17

  .blob-result {
    margin: 5px 0;
  }
18
}
19

20 21 22 23
.search form:hover,
.file-finder-input:hover,
.issuable-search-form:hover,
.search-text-input:hover,
24 25
.form-control:hover,
:not[readonly] {
26
  border-color: lighten($blue-300, 20%);
27
  box-shadow: 0 0 4px lighten($dropdown-input-focus-shadow, 20%);
28 29
}

30
input[type='checkbox']:hover {
31 32
  box-shadow: 0 0 2px 2px lighten($dropdown-input-focus-shadow, 20%),
    0 0 0 1px lighten($dropdown-input-focus-shadow, 20%);
33 34
}

35
.search {
36
  margin: 0 8px;
37 38 39 40 41

  form {
    @extend .form-control;
    margin: 0;
    padding: 4px;
42
    width: $search-input-width;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
43
    line-height: 24px;
44 45 46
    height: 32px;
    border: 0;
    border-radius: $border-radius-default;
47 48 49
    transition: border-color ease-in-out $default-transition-duration,
      background-color ease-in-out $default-transition-duration,
      width ease-in-out $default-transition-duration;
50 51

    &:hover {
52
      box-shadow: none;
53
    }
54 55 56
  }

  .search-input {
57
    border: 0;
58
    font-size: 14px;
59
    padding: 0 20px 0 0;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
60
    margin-left: 5px;
61
    line-height: 25px;
62
    width: 98%;
63 64
    color: $white-light;
    background: none;
Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
65
    transition: color ease-in-out $default-transition-duration;
66 67
  }

68
  .search-input::placeholder {
Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
69
    transition: color ease-in-out $default-transition-duration;
70 71 72 73
  }

  .search-input-container {
    display: flex;
74
    position: relative;
75 76
  }

77
  .search-input-wrap {
78 79
    width: 100%;

80 81
    .search-icon,
    .clear-icon {
Alfredo Sumaran's avatar
Alfredo Sumaran committed
82 83
      position: absolute;
      right: 5px;
84
      top: 4px;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
85 86
    }

87
    .search-icon {
Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
88
      transition: color $default-transition-duration;
89 90 91
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
Tim Zallmann's avatar
Tim Zallmann committed
92
      user-select: none;
93 94 95 96 97 98
    }

    .clear-icon {
      display: none;
    }

99 100 101 102 103
    // Rewrite position. Dropdown menu should be relative to .search-input-container
    .dropdown {
      position: static;
    }

104
    .dropdown-header {
105 106 107 108 109
      // Necessary because glDropdown doesn't support a second style of headers
      font-weight: $gl-font-weight-bold;
      color: $gl-text-color;
      font-size: $gl-font-size;
      line-height: 16px;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
110
    }
111 112 113 114

    // Custom dropdown positioning
    .dropdown-menu {
      left: -5px;
115 116 117 118 119 120
      max-height: $search-dropdown-max-height;
      overflow: auto;

      @include media-breakpoint-up(xl) {
        width: $search-input-active-width;
      }
121 122 123
    }

    .dropdown-content {
124
      max-height: $search-dropdown-max-height - 18px;
125
    }
126
  }
127 128 129 130

  &.search-active {
    form {
      @extend .form-control:focus;
131
      border-color: $blue-300;
132 133
      box-shadow: none;

134 135 136 137
      @include media-breakpoint-up(xl) {
        width: $search-input-active-width;
      }

138 139 140 141
      .search-input-wrap {
        .search-icon,
        .clear-icon {
          color: $gl-text-color-tertiary;
Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
142
          transition: color ease-in-out $default-transition-duration;
143 144 145 146 147
        }
      }

      .search-input {
        color: $gl-text-color;
Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
148
        transition: color ease-in-out $default-transition-duration;
149 150 151 152 153
      }

      .search-input::placeholder {
        color: $gl-text-color-tertiary;
      }
154
    }
155
  }
156

157 158 159 160
  &.has-value {
    .search-icon {
      display: none;
    }
161

162 163 164
    .clear-icon {
      cursor: pointer;
      display: block;
165 166 167
    }
  }

168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184
  .inline-search-icon {
    position: relative;
    margin-right: 4px;
    color: $gl-text-color-secondary;
  }

  .identicon,
  .search-item-avatar {
    flex-basis: $search-avatar-size;
    flex-shrink: 0;
    margin-right: 4px;
  }

  .search-item-avatar {
    width: $search-avatar-size;
    height: $search-avatar-size;
    border-radius: 50%;
185
    border: 1px solid $gray-normal;
186
  }
187
}
Phil Hughes's avatar
Phil Hughes committed
188 189

.search-holder {
Clement Ho's avatar
Clement Ho committed
190
  @include media-breakpoint-up(sm) {
Phil Hughes's avatar
Phil Hughes committed
191
    display: flex;
192
  }
Phil Hughes's avatar
Phil Hughes committed
193

194 195
  .search-field-holder,
  .project-filter-form {
Phil Hughes's avatar
Phil Hughes committed
196
    flex: 1 0 auto;
Phil Hughes's avatar
Phil Hughes committed
197
    position: relative;
198 199
    margin-right: 0;

Clement Ho's avatar
Clement Ho committed
200
    @include media-breakpoint-up(sm) {
201 202
      margin-right: 5px;
    }
Phil Hughes's avatar
Phil Hughes committed
203 204
  }

Phil Hughes's avatar
Phil Hughes committed
205 206 207 208 209 210 211 212
  .search-icon {
    position: absolute;
    left: 10px;
    top: 10px;
    color: $gray-darkest;
    pointer-events: none;
  }

213 214
  .search-text-input,
  .project-filter-form-field {
Phil Hughes's avatar
Phil Hughes committed
215 216 217 218
    padding-left: $gl-padding + 15px;
    padding-right: $gl-padding + 15px;
  }

219
  .btn-search,
220
  .btn-success {
221 222 223
    width: 100%;
    margin-top: 5px;

Clement Ho's avatar
Clement Ho committed
224
    @include media-breakpoint-up(sm) {
225 226 227 228 229 230 231
      width: auto;
      margin-top: 0;
      margin-left: 5px;
    }
  }

  .dropdown {
Clement Ho's avatar
Clement Ho committed
232
    @include media-breakpoint-up(sm) {
233 234 235 236 237 238 239 240 241
      margin-left: 5px;
      margin-right: 5px;
    }
  }

  .dropdown-menu-toggle {
    width: 100%;
    margin-top: 5px;

Clement Ho's avatar
Clement Ho committed
242
    @include media-breakpoint-up(sm) {
243
      width: 180px;
244 245
      margin-top: 0;
    }
Phil Hughes's avatar
Phil Hughes committed
246 247
  }
}
Phil Hughes's avatar
Phil Hughes committed
248 249 250 251 252 253 254 255 256 257 258 259 260

.search-clear {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 0;
  color: $gray-darkest;
  line-height: 0;
  background: none;
  border: 0;

  &:hover,
  &:focus {
261
    color: $blue-600;
Phil Hughes's avatar
Phil Hughes committed
262 263
  }
}