gitlab-org--gitlab-foss/app/assets/stylesheets/framework/selects.scss

283 lines
5.2 KiB
SCSS
Raw Normal View History

/** Select2 selectbox style override **/
2016-02-22 09:58:04 -05:00
.select2-container {
width: 100% !important;
}
.select2-container,
.select2-container.select2-drop-above {
.select2-choice {
2016-11-30 08:25:25 -05:00
background: $white-light;
2016-02-19 21:46:18 -05:00
border-color: $input-border;
height: 34px;
2016-06-06 14:11:49 -04:00
padding: $gl-vert-padding $gl-input-padding;
font-size: $gl-font-size;
2015-03-09 21:45:36 -04:00
line-height: 1.42857143;
border-radius: $border-radius-base;
.select2-arrow {
2016-02-19 21:46:18 -05:00
background-image: none;
background-color: transparent;
2017-11-02 19:59:51 -04:00
border: 0;
padding-top: 12px;
padding-right: 20px;
font-size: 10px;
2016-02-19 21:46:18 -05:00
b {
display: none;
}
&::after {
content: "\f078";
position: absolute;
z-index: 1;
text-align: center;
pointer-events: none;
box-sizing: border-box;
2016-02-19 21:46:18 -05:00
color: $gray-darkest;
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;
2016-02-19 21:46:18 -05:00
}
}
.select2-chosen {
2016-02-19 21:46:18 -05:00
margin-right: 15px;
}
2016-02-19 21:46:18 -05:00
&:hover {
2017-10-04 15:52:42 -04:00
border-color: $gray-darkest;
2016-02-22 12:59:32 -05:00
color: $gl-text-color;
}
}
}
2017-10-04 15:52:42 -04:00
.select2-drop,
.select2-drop.select2-drop-above {
box-shadow: 0 2px 4px $dropdown-shadow-color;
border-radius: $border-radius-base;
border: 1px solid $border-color;
min-width: 175px;
2017-11-05 18:13:11 -05:00
color: $gl-text-color;
z-index: 999;
}
2017-11-05 18:13:11 -05:00
.select2-drop-mask {
z-index: 998;
}
.select2-drop.select2-drop-above.select2-drop-active {
border-top: 1px solid $border-color;
2017-11-05 18:13:11 -05:00
margin-top: -6px;
}
2016-02-22 09:58:04 -05:00
.select2-container-active {
.select2-choice,
.select2-choices {
2016-09-09 12:59:36 -04:00
box-shadow: none;
2016-02-22 09:58:04 -05:00
}
}
2017-10-04 15:52:42 -04:00
.select2-dropdown-open,
.select2-dropdown-open.select2-drop-above {
2016-02-22 09:58:04 -05:00
.select2-choice {
2017-10-04 15:52:42 -04:00
border-color: $gray-darkest;
2016-02-22 09:58:04 -05:00
outline: 0;
}
}
2015-12-02 08:24:44 -05:00
.select2-container-multi {
.select2-choices {
2016-09-09 12:59:36 -04:00
border-radius: $border-radius-default;
2015-12-02 08:24:44 -05:00
border-color: $input-border;
2016-02-22 09:58:04 -05:00
background: none;
2015-12-02 08:24:44 -05:00
.select2-search-field input {
2016-08-31 10:28:58 -04:00
padding: 5px $gl-padding / 2;
2015-12-02 08:24:44 -05:00
height: auto;
font-family: inherit;
font-size: inherit;
}
2015-12-02 08:24:44 -05:00
.select2-search-choice {
margin: 5px 0 0 8px;
2015-12-02 08:24:44 -05:00
box-shadow: none;
border-color: $input-border;
color: $gl-text-color;
line-height: 15px;
2016-12-12 17:26:21 -05:00
background-color: $gray-light;
2016-02-22 09:58:04 -05:00
background-image: none;
padding: 3px 18px 3px 5px;
2015-12-02 08:24:44 -05:00
.select2-search-choice-close {
top: 5px;
left: initial;
right: 3px;
2015-12-02 08:24:44 -05:00
}
&.select2-search-choice-focus {
border-color: $gl-text-color;
}
}
}
2016-02-19 21:46:18 -05:00
}
.select2-drop-active {
2017-10-04 15:52:42 -04:00
margin-top: $dropdown-vertical-offset;
2016-02-22 09:58:04 -05:00
font-size: 14px;
.select2-results {
max-height: 350px;
}
}
2016-02-22 09:58:04 -05:00
.select2-search {
2017-11-29 08:12:32 -05:00
padding: $grid-size;
2016-02-22 09:58:04 -05:00
.select2-drop-auto-width & {
2017-11-29 08:12:32 -05:00
padding: $grid-size;
2016-02-22 09:58:04 -05:00
}
2016-02-19 21:46:18 -05:00
2017-07-12 05:50:26 -04:00
input {
2017-11-29 08:12:32 -05:00
padding: $grid-size;
2017-07-12 05:50:26 -04:00
background: $white-light image-url('select2.png');
2017-11-29 08:12:32 -05:00
background-clip: content-box;
background-origin: content-box;
2017-07-12 05:50:26 -04:00
background-repeat: no-repeat;
2017-11-29 08:12:32 -05:00
background-position: right 0 bottom 0 !important;
2017-07-12 05:50:26 -04:00
border: 1px solid $input-border;
border-radius: $border-radius-default;
2017-11-29 08:12:32 -05:00
line-height: 16px;
2017-07-12 05:50:26 -04:00
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
&:focus {
border-color: $blue-300;
2017-07-12 05:50:26 -04:00
}
&.select2-active {
background-color: $white-light;
background-image: image-url('select2-spinner.gif') !important;
2017-11-29 08:12:32 -05:00
background-origin: content-box;
2017-07-12 05:50:26 -04:00
background-repeat: no-repeat;
2017-11-29 08:12:32 -05:00
background-position: right 6px center !important;
2017-07-12 05:50:26 -04:00
background-size: 16px 16px !important;
}
2016-02-22 09:58:04 -05:00
}
2017-11-29 08:12:32 -05:00
+ .select2-results {
padding-top: 0;
}
2016-02-19 21:46:18 -05:00
}
2016-02-22 09:58:04 -05:00
.select2-results {
margin: 0;
2017-11-05 18:13:11 -05:00
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: $gray-darker;
2017-11-05 18:13:11 -05:00
}
}
.select2-result {
padding: 0 1px;
}
2017-10-04 15:52:42 -04:00
2017-07-12 05:50:26 -04:00
li.select2-result-with-children > .select2-result-label {
font-weight: $gl-font-weight-bold;
2017-10-04 15:52:42 -04:00
color: $gl-text-color;
}
}
.ajax-users-select {
width: 400px;
&.input-large {
width: 210px;
}
&.input-clamp {
max-width: 100%;
}
}
.select2-highlighted {
.group-result {
.group-path {
2016-11-30 08:25:25 -05:00
color: $white-light;
}
}
}
.group-result {
.group-image {
float: left;
}
.group-name {
font-weight: $gl-font-weight-bold;
}
.group-path {
color: $gl-gray-400;
}
}
.user-result {
min-height: 24px;
display: flex;
align-items: center;
.user-image {
float: left;
}
&.no-username {
.user-name {
line-height: 24px;
}
}
}
.namespace-result {
.namespace-kind {
color: $gl-gray-350;
font-weight: $gl-font-weight-normal;
}
.namespace-path {
margin-left: 10px;
font-weight: $gl-font-weight-bold;
}
}
.ajax-users-dropdown {
min-width: 250px !important;
}
2017-10-04 15:52:42 -04:00
.select2-result-selectable,
.select2-result-unselectable {
.select2-match {
font-weight: $gl-font-weight-bold;
text-decoration: none;
}
}