BigW Consortium Gitlab

selects.scss 5.94 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
      background-color: $white-normal;
52
      border-color: $border-white-normal;
53
      color: $gl-text-color;
54
    }
55
  }
56
}
57

58
.select2-drop {
59
  box-shadow: $select2-drop-shadow1 0 0 1px 0, $select2-drop-shadow2 0 2px 18px 0;
Clement Ho committed
60
  border-radius: $border-radius-default;
61
  border: none;
62
  min-width: 175px;
63 64
}

65 66
.select2-results .select2-result-label,
.select2-more-results {
67
  padding: 10px 15px;
68 69
}

70
.select2-drop {
71
  color: $gl-grayish-blue;
72 73 74
}

.select2-highlighted {
75
  background: $gl-link-color !important;
76 77 78
}

.select2-results li.select2-result-with-children > .select2-result-label {
79
  font-weight: $gl-font-weight-bold;
80
  color: $gl-text-color;
81 82
}

83
.select2-container-active {
84 85
  .select2-choice,
  .select2-choices {
Clement Ho committed
86
    box-shadow: none;
87 88 89 90 91 92 93 94 95
  }
}

.select2-dropdown-open {
  .select2-choice {
    border-color: $border-white-normal;
    outline: 0;
    background-image: none;
    background-color: $white-dark;
Clement Ho committed
96
    box-shadow: $gl-btn-active-gradient;
97 98 99
  }
}

100 101
.select2-container-multi {
  .select2-choices {
Clement Ho committed
102
    border-radius: $border-radius-default;
103
    border-color: $input-border;
104
    background: none;
105

106
    .select2-search-field input {
Phil Hughes committed
107
      padding: 5px $gl-padding / 2;
108 109 110 111
      height: auto;
      font-family: inherit;
      font-size: inherit;
    }
112

113
    .select2-search-choice {
114
      margin: 5px 0 0 8px;
115 116 117 118
      box-shadow: none;
      border-color: $input-border;
      color: $gl-text-color;
      line-height: 15px;
119
      background-color: $gray-light;
120
      background-image: none;
121
      padding: 3px 18px 3px 5px;
122

123
      .select2-search-choice-close {
124 125 126
        top: 5px;
        left: initial;
        right: 3px;
127 128 129 130 131 132 133
      }

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

135 136 137
  &.select2-container-active .select2-choices,
  &.select2-dropdown-open .select2-choices {
    border-color: $border-white-normal;
Clement Ho committed
138
    box-shadow: $gl-btn-active-gradient;
139 140 141
  }
}

142
.select2-drop-active {
143 144
  margin-top: 6px;
  font-size: 14px;
145

146 147 148 149
  &.select2-drop-above {
    margin-bottom: 8px;
  }

150 151
  .select2-results {
    max-height: 350px;
152

153
    .select2-highlighted {
154
      background: $gl-primary;
155
    }
156
  }
157 158
}

159 160 161 162 163 164
.select2-search {
  padding: 15px 15px 5px;

  .select2-drop-auto-width & {
    padding: 15px 15px 5px;
  }
165 166
}

167 168
.select2-search input {
  padding: 2px 25px 2px 5px;
169
  background: $white-light image-url('select2.png');
170
  background-repeat: no-repeat;
171
  background-position: right 0 bottom 6px;
172
  border: 1px solid $input-border;
Clement Ho committed
173
  border-radius: $border-radius-default;
174
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
175 176 177 178

  &:focus {
    border-color: $input-border-focus;
  }
179 180
}

181
.select2-search input.select2-active {
182
  background-color: $white-light;
183
  background-image: image-url('select2-spinner.gif') !important;
184
  background-repeat: no-repeat;
185 186
  background-position: right 5px center !important;
  background-size: 16px 16px !important;
187 188
}

189 190 191 192 193 194 195 196 197 198 199 200 201
.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;
202
}
Dmitriy Zaporozhets committed
203 204 205 206 207 208 209 210 211 212 213 214 215

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

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

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

216 217 218
.select2-highlighted {
  .group-result {
    .group-path {
219
      color: $white-light;
220 221 222 223
    }
  }
}

224 225 226 227
.group-result {
  .group-image {
    float: left;
  }
228

229
  .group-name {
230
    font-weight: $gl-font-weight-bold;
231
  }
232

233
  .group-path {
234
    color: $group-path-color;
235 236 237
  }
}

Dmitriy Zaporozhets committed
238
.user-result {
239 240
  min-height: 24px;

Dmitriy Zaporozhets committed
241 242 243
  .user-image {
    float: left;
  }
244 245 246 247 248

  &.no-username {
    .user-name {
      line-height: 24px;
    }
Dmitriy Zaporozhets committed
249 250 251 252 253
  }
}

.namespace-result {
  .namespace-kind {
254
    color: $namespace-kind-color;
255
    font-weight: $gl-font-weight-normal;
Dmitriy Zaporozhets committed
256
  }
257

Dmitriy Zaporozhets committed
258 259
  .namespace-path {
    margin-left: 10px;
260
    font-weight: $gl-font-weight-bold;
Dmitriy Zaporozhets committed
261 262
  }
}
263 264

.ajax-users-dropdown {
265
  min-width: 250px !important;
266
}
267 268

// TODO: change global style
269
.ajax-project-dropdown,
270
body[data-page="projects:new"] #select2-drop,
271
body[data-page="projects:blob:new"] #select2-drop,
272
body[data-page="profiles:show"] #select2-drop,
273
body[data-page="projects:blob:edit"] #select2-drop {
274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289
  &.select2-drop {
    color: $gl-text-color;
  }

  .select2-results {
    .select2-no-results,
    .select2-searching,
    .select2-ajax-error,
    .select2-selection-limit {
      background: transparent;
    }

    .select2-result {
      padding: 0 1px;

      .select2-match {
290
        font-weight: $gl-font-weight-bold;
291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308
        text-decoration: none;
      }

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

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

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