debian-mirror-gitlab/app/assets/stylesheets/framework/selects.scss

281 lines
5.3 KiB
SCSS
Raw Normal View History

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