selects.scss 4.69 KB
Newer Older
1
/** Select2 selectbox style override **/
2 3 4 5
.select2-container {
  width: 100% !important;
}

6
.select2-container, .select2-container.select2-drop-above {
7
  .select2-choice {
8
    background: #fff;
9 10
    border-color: $input-border;
    height: 35px;
11
    padding: $gl-vert-padding $gl-input-padding;
12
    font-size: $gl-font-size;
13
    line-height: 1.42857143;
14
    border-radius: $border-radius-base;
15 16

    .select2-arrow {
17 18 19
      background-image: none;
      background-color: transparent;
      border: none;
20 21
      padding-top: 6px;
      padding-right: 10px;
22 23

      b {
24 25 26 27 28 29 30 31
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 2px;
        vertical-align: middle;
        border-top: $caret-width-base dashed;
        border-right: $caret-width-base solid transparent;
        border-left: $caret-width-base solid transparent;
32 33
        color: $gray-darkest;
      }
34
    }
35 36

    .select2-chosen {
37
      margin-right: 15px;
38 39
    }

40 41 42
    &:hover {
      background-color: $gray-dark;
      border-color: $border-white-normal;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
43
      color: $gl-text-color;
44
    }
45
  }
46
}
47

48
.select2-drop {
Clement Ho's avatar
Clement Ho committed
49 50
  box-shadow: rgba(76, 86, 103, 0.247059) 0 0 1px 0, rgba(31, 37, 50, 0.317647) 0 2px 18px 0;
  border-radius: $border-radius-default;
51
  border: none;
52
  min-width: 175px;
53 54
}

55 56
.select2-results .select2-result-label,
.select2-more-results {
57
  padding: 10px 15px;
58 59
}

60
.select2-drop {
61 62 63 64 65 66 67 68 69
  color: #7f8fa4;
}

.select2-highlighted {
  background: #3084bb !important;
}

.select2-results li.select2-result-with-children > .select2-result-label {
  font-weight: 600;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
70
  color: $gl-text-color;
71 72
}

73 74
.select2-container-active {
  .select2-choice, .select2-choices {
Clement Ho's avatar
Clement Ho committed
75
    box-shadow: none;
76 77 78 79 80 81 82 83 84
  }
}

.select2-dropdown-open {
  .select2-choice {
    border-color: $border-white-normal;
    outline: 0;
    background-image: none;
    background-color: $white-dark;
Clement Ho's avatar
Clement Ho committed
85
    box-shadow: $gl-btn-active-gradient;
86 87 88
  }
}

89 90
.select2-container-multi {
  .select2-choices {
Clement Ho's avatar
Clement Ho committed
91
    border-radius: $border-radius-default;
92
    border-color: $input-border;
93
    background: none;
94

95
    .select2-search-field input {
Phil Hughes's avatar
Phil Hughes committed
96
      padding: 5px $gl-padding / 2;
97 98 99 100 101
      font-size: 13px;
      height: auto;
      font-family: inherit;
      font-size: inherit;
    }
102

103
    .select2-search-choice {
104
      margin: 5px 0 0 8px;
105 106 107 108
      box-shadow: none;
      border-color: $input-border;
      color: $gl-text-color;
      line-height: 15px;
109 110
      background-color: $background-color;
      background-image: none;
111

112
      .select2-search-choice-close {
113 114
        top: 4px;
        left: 3px;
115 116 117 118 119 120 121
      }

      &.select2-search-choice-focus {
        border-color: $gl-text-color;
      }
    }
  }
122

123 124 125
  &.select2-container-active .select2-choices,
  &.select2-dropdown-open .select2-choices {
    border-color: $border-white-normal;
Clement Ho's avatar
Clement Ho committed
126
    box-shadow: $gl-btn-active-gradient;
127 128 129
  }
}

130
.select2-drop-active {
131 132
  margin-top: 6px;
  font-size: 14px;
133

134 135 136 137
  &.select2-drop-above {
    margin-bottom: 8px;
  }

138 139
  .select2-results {
    max-height: 350px;
140

141
    .select2-highlighted {
142
      background: $gl-primary;
143
    }
144
  }
145 146
}

147 148 149 150 151 152
.select2-search {
  padding: 15px 15px 5px;

  .select2-drop-auto-width & {
    padding: 15px 15px 5px;
  }
153 154
}

155 156 157 158
.select2-search input {
  padding: 2px 25px 2px 5px;
  background: #fff image-url('select2.png');
  background-repeat: no-repeat;
159
  background-position: right 0 bottom 6px;
160
  border: 1px solid $input-border;
Clement Ho's avatar
Clement Ho committed
161
  border-radius: $border-radius-default;
162
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
163 164 165 166

  &:focus {
    border-color: $input-border-focus;
  }
167 168
}

169
.select2-search input.select2-active {
170 171
  background-color: #fff;
  background-image: image-url('select2-spinner.gif') !important;
172
  background-repeat: no-repeat;
173 174
  background-position: right 5px center !important;
  background-size: 16px 16px !important;
175 176
}

177 178 179 180 181 182 183 184 185 186 187 188 189
.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-ajax-error,
.select2-results .select2-selection-limit {
  background: $gray-light;
  display: list-item;
  padding: 10px 15px;
}


.select2-results {
  margin: 0;
  padding: 10px 0;
190
}
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
191 192 193 194 195 196 197 198 199 200 201 202 203

.ajax-users-select {
  width: 400px;

  &.input-large {
    width: 210px;
  }

  &.input-clamp {
    max-width: 100%;
  }
}

204 205 206 207 208 209 210 211
.select2-highlighted {
  .group-result {
    .group-path {
      color: #fff;
    }
  }
}

212 213 214 215
.group-result {
  .group-image {
    float: left;
  }
216

217 218 219
  .group-name {
    font-weight: bold;
  }
220

221 222 223 224 225
  .group-path {
    color: #999;
  }
}

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
226
.user-result {
227 228
  min-height: 24px;

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
229 230 231
  .user-image {
    float: left;
  }
232 233 234 235 236

  &.no-username {
    .user-name {
      line-height: 24px;
    }
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
237 238 239 240 241
  }
}

.namespace-result {
  .namespace-kind {
242
    color: #aaa;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
243 244
    font-weight: normal;
  }
245

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
246 247 248 249 250
  .namespace-path {
    margin-left: 10px;
    font-weight: bolder;
  }
}
251 252

.ajax-users-dropdown {
253
  min-width: 250px !important;
254
}