BigW Consortium Gitlab

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

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

    .select2-arrow {
18 19 20
      background-image: none;
      background-color: transparent;
      border: none;
21 22 23
      padding-top: 12px;
      padding-right: 20px;
      font-size: 10px;
24 25

      b {
26 27 28 29 30 31 32 33 34 35
        display: none;
      }

      &::after {
        content: "\f078";
        position: absolute;
        z-index: 1;
        text-align: center;
        pointer-events: none;
        box-sizing: border-box;
36
        color: $gray-darkest;
37 38 39 40 41 42
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
43
      }
44
    }
45 46

    .select2-chosen {
47
      margin-right: 15px;
48 49
    }

50
    &:hover {
51
      border-color: $gray-darkest;
52
      color: $gl-text-color;
53
    }
54
  }
55
}
56

57 58 59 60 61
.select2-drop,
.select2-drop.select2-drop-above {
  box-shadow: 0 2px 4px $dropdown-shadow-color;
  border-radius: $border-radius-base;
  border: 1px solid $dropdown-border-color;
62
  min-width: 175px;
63
  color: $gl-text-color;
64 65
}

66 67 68
.select2-drop.select2-drop-above.select2-drop-active {
  border-top: 1px solid $dropdown-border-color;
  margin-top: -6px;
69 70 71
}

.select2-results li.select2-result-with-children > .select2-result-label {
72
  font-weight: $gl-font-weight-bold;
73
  color: $gl-text-color;
74 75
}

76
.select2-container-active {
77 78
  .select2-choice,
  .select2-choices {
Clement Ho committed
79
    box-shadow: none;
80 81 82
  }
}

83 84
.select2-dropdown-open,
.select2-dropdown-open.select2-drop-above {
85
  .select2-choice {
86
    border-color: $gray-darkest;
87 88 89 90
    outline: 0;
  }
}

91 92
.select2-container-multi {
  .select2-choices {
Clement Ho committed
93
    border-radius: $border-radius-default;
94
    border-color: $input-border;
95
    background: none;
96

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

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

114
      .select2-search-choice-close {
115 116 117
        top: 5px;
        left: initial;
        right: 3px;
118 119 120 121 122 123 124
      }

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

127
.select2-drop-active {
128
  margin-top: $dropdown-vertical-offset;
129
  font-size: 14px;
130

131 132
  .select2-results {
    max-height: 350px;
133
  }
134 135
}

136 137 138 139 140 141
.select2-search {
  padding: 15px 15px 5px;

  .select2-drop-auto-width & {
    padding: 15px 15px 5px;
  }
142 143
}

144 145
.select2-search input {
  padding: 2px 25px 2px 5px;
146
  background: $white-light image-url('select2.png');
147
  background-repeat: no-repeat;
148
  background-position: right 0 bottom 6px;
149
  border: 1px solid $input-border;
Clement Ho committed
150
  border-radius: $border-radius-default;
151
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
152 153 154 155

  &:focus {
    border-color: $input-border-focus;
  }
156 157
}

158
.select2-search input.select2-active {
159
  background-color: $white-light;
160
  background-image: image-url('select2-spinner.gif') !important;
161
  background-repeat: no-repeat;
162 163
  background-position: right 5px center !important;
  background-size: 16px 16px !important;
164 165
}

166 167
.select2-results {
  margin: 0;
168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194
  padding: #{$gl-padding / 2} 0;

  .select2-no-results,
  .select2-searching,
  .select2-ajax-error,
  .select2-selection-limit {
    background: transparent;
    padding: #{$gl-padding / 2} $gl-padding;
  }

  .select2-result-label,
  .select2-more-results {
    padding: #{$gl-padding / 2} $gl-padding;
  }

  .select2-highlighted {
    background: transparent;
    color: $gl-text-color;

    .select2-result-label {
      background: $dropdown-item-hover-bg;
    }
  }

  .select2-result {
    padding: 0 1px;
  }
195
}
Dmitriy Zaporozhets committed
196 197 198 199 200 201 202 203 204 205 206 207 208

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

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

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

209 210 211
.select2-highlighted {
  .group-result {
    .group-path {
212
      color: $white-light;
213 214 215 216
    }
  }
}

217 218 219 220
.group-result {
  .group-image {
    float: left;
  }
221

222
  .group-name {
223
    font-weight: $gl-font-weight-bold;
224
  }
225

226
  .group-path {
227
    color: $group-path-color;
228 229 230
  }
}

Dmitriy Zaporozhets committed
231
.user-result {
232 233
  min-height: 24px;

Dmitriy Zaporozhets committed
234 235 236
  .user-image {
    float: left;
  }
237 238 239 240 241

  &.no-username {
    .user-name {
      line-height: 24px;
    }
Dmitriy Zaporozhets committed
242 243 244 245 246
  }
}

.namespace-result {
  .namespace-kind {
247
    color: $namespace-kind-color;
248
    font-weight: $gl-font-weight-normal;
Dmitriy Zaporozhets committed
249
  }
250

Dmitriy Zaporozhets committed
251 252
  .namespace-path {
    margin-left: 10px;
253
    font-weight: $gl-font-weight-bold;
Dmitriy Zaporozhets committed
254 255
  }
}
256 257

.ajax-users-dropdown {
258
  min-width: 250px !important;
259
}
260

261 262 263 264 265
.select2-result-selectable,
.select2-result-unselectable {
  .select2-match {
    font-weight: $gl-font-weight-bold;
    text-decoration: none;
266 267
  }
}