BigW Consortium Gitlab

search.scss 4.91 KB
Newer Older
1 2
.search-results {
  .search-result-row {
3 4 5 6 7 8 9
    border-bottom: 1px solid $border-color;
    padding-bottom: $gl-padding;
    margin-bottom: $gl-padding;

    &:last-child {
      border-bottom: none;
    }
10
  }
11 12 13 14

  .blob-result {
    margin: 5px 0;
  }
15
}
16

17 18 19 20 21 22 23 24 25 26
.search form:hover,
.file-finder-input:hover,
.issuable-search-form:hover,
.search-text-input:hover,
.form-control:hover {
  border-color: lighten($dropdown-input-focus-border, 20%);
  box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%);
}

input[type="checkbox"]:hover {
27
  box-shadow: 0 0 2px 2px lighten($search-input-focus-shadow-color, 20%), 0 0 0 1px lighten($search-input-focus-shadow-color, 20%);
28 29
}

30 31 32 33 34 35 36 37 38
.search {
  margin-right: 10px;
  margin-left: 10px;
  margin-top: ($header-height - 35) / 2;

  form {
    @extend .form-control;
    margin: 0;
    padding: 4px;
39
    width: $search-input-width;
Alfredo Sumaran committed
40
    line-height: 24px;
41 42 43 44 45

    &:hover {
      border-color: lighten($dropdown-input-focus-border, 20%);
      box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%);
    }
46 47 48 49 50 51 52 53 54
  }

  .location-text {
    font-style: normal;
  }

  .search-input {
    border: none;
    font-size: 14px;
55
    padding: 0 20px 0 0;
Alfredo Sumaran committed
56
    margin-left: 5px;
57
    line-height: 25px;
58
    width: 98%;
59 60 61 62 63
  }

  .location-badge {
    line-height: 25px;
    padding: 0 5px;
Alfredo Sumaran committed
64
    border-radius: $border-radius-default;
65 66
    font-size: 14px;
    font-style: normal;
67
    color: $note-disabled-comment-color;
68
    display: inline-block;
69
    background-color: $gray-normal;
70
    vertical-align: top;
71
    cursor: default;
72 73 74
  }

  .search-input-container {
Alfredo Sumaran committed
75
    display: -webkit-flex;
76
    display: flex;
77
    position: relative;
78 79
  }

80
  .search-input-wrap {
81
    // Fallback if flexbox is not supported
82 83 84 85 86
    display: inline-block;
  }

  .search-input-wrap {
    width: 100%;
Alfredo Sumaran committed
87

88 89
    .search-icon,
    .clear-icon {
Alfredo Sumaran committed
90 91
      position: absolute;
      right: 5px;
92
      top: 0;
93
      color: $location-icon-color;
Alfredo Sumaran committed
94

95
      &::before {
Alfredo Sumaran committed
96 97 98 99 100 101
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;
      }
    }

102 103
    .search-icon {
      @extend .fa-search;
104
      transition: color 0.15s;
105 106 107 108 109 110 111 112 113 114
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
    }

    .clear-icon {
      @extend .fa-times;
      display: none;
    }

115 116 117 118 119
    // Rewrite position. Dropdown menu should be relative to .search-input-container
    .dropdown {
      position: static;
    }

120 121 122
    .dropdown-header {
      text-transform: uppercase;
      font-size: 11px;
Alfredo Sumaran committed
123
    }
124 125 126

    // Custom dropdown positioning
    .dropdown-menu {
127 128 129 130 131 132 133
      transition-property: opacity, transform;
      transition-duration: 250ms, 250ms;
      transition-delay: 0ms, 25ms;
      transition-timing-function: $dropdown-animation-timing;
      transform: translateY(0);
      opacity: 0;
      display: block;
134
      left: -5px;
135 136 137 138 139 140 141 142
      padding: 0;

      ul {
        padding: 10px 0;
      }
    }

    .dropdown-content {
Alfredo Sumaran committed
143
      max-height: 350px;
144
    }
145
  }
146 147 148 149

  &.search-active {
    form {
      @extend .form-control:focus;
150 151
      border-color: $dropdown-input-focus-border;
      box-shadow: 0 0 4px $search-input-focus-shadow-color;
152 153 154
    }

    .location-badge {
155
      transition: all 0.15s;
Alfredo Sumaran committed
156
      background-color: $location-badge-active-bg;
157 158 159 160 161
      color: $white-light;
    }

    .search-input-wrap {
      i {
162
        color: $layout-link-gray;
163 164
      }
    }
165 166 167 168 169 170 171

    .dropdown-menu {
      transition-duration: 100ms, 75ms;
      transition-delay: 75ms, 100ms;
      transform: translateY(13px);
      opacity: 1;
    }
172
  }
173

174 175 176 177
  &.has-value {
    .search-icon {
      display: none;
    }
178

179 180 181
    .clear-icon {
      cursor: pointer;
      display: block;
182 183 184
    }
  }

185 186
  &.has-location-badge {
    .search-input-wrap {
187
      width: 68%;
188 189
    }
  }
190
}
191 192

.search-holder {
193 194
  @media (min-width: $screen-sm-min) {
    display: -webkit-flex;
Phil Hughes committed
195
    display: flex;
196
  }
197

198 199
  .search-field-holder,
  .project-filter-form {
Phil Hughes committed
200 201
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
202
    position: relative;
203 204 205 206 207
    margin-right: 0;

    @media (min-width: $screen-sm-min) {
      margin-right: 5px;
    }
208 209
  }

Phil Hughes committed
210 211 212 213 214 215 216 217
  .search-icon {
    position: absolute;
    left: 10px;
    top: 10px;
    color: $gray-darkest;
    pointer-events: none;
  }

218 219
  .search-text-input,
  .project-filter-form-field {
Phil Hughes committed
220 221 222 223
    padding-left: $gl-padding + 15px;
    padding-right: $gl-padding + 15px;
  }

224 225
  .btn-search,
  .btn-new {
226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247
    width: 100%;
    margin-top: 5px;

    @media (min-width: $screen-sm-min) {
      width: auto;
      margin-top: 0;
      margin-left: 5px;
    }
  }

  .dropdown {
    @media (min-width: $screen-sm-min) {
      margin-left: 5px;
      margin-right: 5px;
    }
  }

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

    @media (min-width: $screen-sm-min) {
248
      width: 180px;
249 250
      margin-top: 0;
    }
251 252
  }
}
Phil Hughes committed
253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268

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

  &:hover,
  &:focus {
    color: $gl-link-color;
  }
}