search.scss 4.46 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 {
dimitrieh's avatar
dimitrieh committed
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's avatar
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's avatar
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's avatar
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's avatar
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's avatar
Alfredo Sumaran committed
87

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

95
      &::before {
Alfredo Sumaran's avatar
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's avatar
Alfredo Sumaran committed
123
    }
Alfredo Sumaran's avatar
Alfredo Sumaran committed
124 125 126

    // Custom dropdown positioning
    .dropdown-menu {
127
      top: 37px;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
128
      left: -5px;
129 130 131 132 133 134 135 136
      padding: 0;

      ul {
        padding: 10px 0;
      }
    }

    .dropdown-content {
Alfredo Sumaran's avatar
Alfredo Sumaran committed
137
      max-height: 350px;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
138
    }
139
  }
140 141 142 143

  &.search-active {
    form {
      @extend .form-control:focus;
144 145
      border-color: $dropdown-input-focus-border;
      box-shadow: 0 0 4px $search-input-focus-shadow-color;
146 147 148
    }

    .location-badge {
149
      transition: all 0.15s;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
150
      background-color: $location-badge-active-bg;
151 152 153 154 155
      color: $white-light;
    }

    .search-input-wrap {
      i {
156
        color: $layout-link-gray;
157 158
      }
    }
159
  }
160

161 162 163 164
  &.has-value {
    .search-icon {
      display: none;
    }
165

166 167 168
    .clear-icon {
      cursor: pointer;
      display: block;
169 170 171
    }
  }

172 173
  &.has-location-badge {
    .search-input-wrap {
174
      width: 68%;
175 176
    }
  }
177
}
Phil Hughes's avatar
Phil Hughes committed
178 179

.search-holder {
Phil Hughes's avatar
Phil Hughes committed
180 181
  @media (min-width: $screen-sm-min) {
    display: -webkit-flex;
Phil Hughes's avatar
Phil Hughes committed
182
    display: flex;
Phil Hughes's avatar
Phil Hughes committed
183
  }
Phil Hughes's avatar
Phil Hughes committed
184 185

  .search-field-holder {
Phil Hughes's avatar
Phil Hughes committed
186 187
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
Phil Hughes's avatar
Phil Hughes committed
188
    position: relative;
Phil Hughes's avatar
Phil Hughes committed
189 190 191 192 193
    margin-right: 0;

    @media (min-width: $screen-sm-min) {
      margin-right: 5px;
    }
Phil Hughes's avatar
Phil Hughes committed
194 195
  }

Phil Hughes's avatar
Phil Hughes committed
196 197 198 199 200 201 202 203 204 205 206 207 208
  .search-icon {
    position: absolute;
    left: 10px;
    top: 10px;
    color: $gray-darkest;
    pointer-events: none;
  }

  .search-text-input {
    padding-left: $gl-padding + 15px;
    padding-right: $gl-padding + 15px;
  }

209 210
  .btn-search,
  .btn-new {
Phil Hughes's avatar
Phil Hughes committed
211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232
    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) {
233
      width: 180px;
Phil Hughes's avatar
Phil Hughes committed
234 235
      margin-top: 0;
    }
Phil Hughes's avatar
Phil Hughes committed
236 237
  }
}
Phil Hughes's avatar
Phil Hughes committed
238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253

.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;
  }
}