debian-mirror-gitlab/app/assets/stylesheets/lazy_bundles/select2_overrides.scss

362 lines
7.7 KiB
SCSS
Raw Normal View History

2021-01-29 00:20:46 +05:30
@import 'page_bundles/mixins_and_variables_and_functions';
/** Select2 selectbox style override **/
.select2-container {
width: 100% !important;
&.input-md,
&.input-lg {
display: block;
}
}
.select2-container,
.select2-container.select2-drop-above {
.select2-choice {
2021-04-29 21:17:54 +05:30
background: var(--white, $white);
color: var(--gl-text-color, $gl-text-color);
2021-10-27 15:23:28 +05:30
border-color: var(--gray-400, $gray-400);
2021-01-29 00:20:46 +05:30
height: 34px;
padding: $gl-vert-padding $gl-input-padding;
font-size: $gl-font-size;
line-height: 1.42857143;
border-radius: $gl-border-radius-base;
.select2-arrow {
padding-top: 12px;
padding-right: 20px;
2021-02-22 17:27:13 +05:30
/* stylelint-disable-next-line function-url-quotes */
background: url(asset_path('chevron-down.png')) no-repeat 2px 8px;
2021-01-29 00:20:46 +05:30
2021-04-29 21:17:54 +05:30
.gl-dark & {
filter: invert(0.9);
}
2021-01-29 00:20:46 +05:30
b {
display: none;
}
}
.select2-chosen {
margin-right: 15px;
}
&:hover {
2021-10-27 15:23:28 +05:30
border-color: var(--gray-400, $gray-400);
2021-04-29 21:17:54 +05:30
color: var(--gl-text-color, $gl-text-color);
2021-01-29 00:20:46 +05:30
}
}
// Essentially were doing @include form-control-focus here (from
// bootstrap/scss/mixins/_forms.scss), except that the bootstrap mixin adds a
// `&:focus` selector and were never actually focusing the .select2-choice
// link nor the .select2-container, the Select2 library focuses an off-screen
// .select2-focusser element instead.
&.select2-container-active:not(.select2-dropdown-open) {
.select2-choice {
2021-04-29 21:17:54 +05:30
color: var(--gray-700, $gray-700);
background-color: var(--white, $white);
2021-01-29 00:20:46 +05:30
border-color: $input-focus-border-color;
outline: 0;
}
// Reusable focus “glow” box-shadow
@mixin form-control-focus-glow {
@if $enable-shadows {
box-shadow: $input-box-shadow, $input-focus-box-shadow;
} @else {
box-shadow: $input-focus-box-shadow;
}
}
// Apply the focus “glow” shadow to the .select2-container if it also has
// the .block-truncated class as that applies an overflow: hidden, thereby
// hiding the glow of the nested .select2-choice element.
&.block-truncated {
@include form-control-focus-glow;
}
// Apply the glow directly to the .select2-choice link if were not
// block-truncating the container.
&:not(.block-truncated) .select2-choice {
@include form-control-focus-glow;
}
}
&.is-invalid {
~ .invalid-feedback {
display: block;
}
.select2-choices,
.select2-choice {
2021-04-29 21:17:54 +05:30
border-color: var(--red-500, $red-500);
2021-01-29 00:20:46 +05:30
}
}
}
.select2-drop,
.select2-drop.select2-drop-above {
2021-04-29 21:17:54 +05:30
background: var(--white, $white);
2021-01-29 00:20:46 +05:30
box-shadow: 0 2px 4px $dropdown-shadow-color;
border-radius: $gl-border-radius-base;
2021-10-27 15:23:28 +05:30
border: 1px solid var(--gray-400, $gray-400);
2021-01-29 00:20:46 +05:30
min-width: 175px;
2021-04-29 21:17:54 +05:30
color: var(--gl-text-color, $gl-text-color);
2021-01-29 00:20:46 +05:30
z-index: 999;
.modal-open & {
z-index: $zindex-modal + 200;
}
}
.select2-drop-mask {
z-index: 998;
.modal-open & {
z-index: $zindex-modal + 100;
}
}
.select2-drop.select2-drop-above.select2-drop-active {
2021-10-27 15:23:28 +05:30
border-top: 1px solid var(--gray-400, $gray-400);
2021-01-29 00:20:46 +05:30
margin-top: -6px;
}
.select2-container-active {
.select2-choice,
.select2-choices {
box-shadow: none;
}
}
.select2-dropdown-open,
.select2-dropdown-open.select2-drop-above {
.select2-choice {
2021-10-27 15:23:28 +05:30
border-color: var(--gray-400, $gray-400);
2021-01-29 00:20:46 +05:30
outline: 0;
}
}
.select2-container-multi {
.select2-choices {
border-radius: $border-radius-default;
2021-10-27 15:23:28 +05:30
border-color: var(--gray-400, $gray-400);
2021-01-29 00:20:46 +05:30
background: none;
.select2-search-field input {
padding: 5px $gl-input-padding;
height: auto;
font-family: inherit;
font-size: inherit;
}
.select2-search-choice {
margin: 5px 0 0 8px;
box-shadow: none;
2021-10-27 15:23:28 +05:30
border-color: var(--gray-400, $gray-400);
2021-04-29 21:17:54 +05:30
color: var(--gl-text-color, $gl-text-color);
2021-01-29 00:20:46 +05:30
line-height: 15px;
2021-04-29 21:17:54 +05:30
background-color: var(--gray-50, $gray-50);
2021-01-29 00:20:46 +05:30
background-image: none;
padding: 3px 18px 3px 5px;
.select2-search-choice-close {
top: 5px;
left: initial;
right: 3px;
}
&.select2-search-choice-focus {
2021-10-27 15:23:28 +05:30
border-color: var(--gray-400, $gray-400);
2021-01-29 00:20:46 +05:30
}
}
}
}
.select2-drop-active {
margin-top: $dropdown-vertical-offset;
font-size: 14px;
.select2-results {
max-height: 350px;
}
}
.select2-search {
padding: $grid-size;
.select2-drop-auto-width & {
padding: $grid-size;
}
input {
padding: $grid-size;
background: transparent image-url('select2.png');
2021-04-29 21:17:54 +05:30
color: var(--gl-text-color, $gl-text-color);
2021-01-29 00:20:46 +05:30
background-clip: content-box;
background-origin: content-box;
background-repeat: no-repeat;
background-position: right 0 bottom 0 !important;
2021-10-27 15:23:28 +05:30
border: 1px solid var(--gray-400, $gray-400);
2021-01-29 00:20:46 +05:30
border-radius: $border-radius-default;
line-height: 16px;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
&:focus {
2021-04-29 21:17:54 +05:30
border-color: var(--blue-300, $blue-300);
2021-01-29 00:20:46 +05:30
}
&.select2-active {
2021-04-29 21:17:54 +05:30
background-color: var(--white, $white);
2021-01-29 00:20:46 +05:30
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;
}
}
+ .select2-results {
padding-top: 0;
}
}
.select2-results {
margin: 0;
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;
2021-04-29 21:17:54 +05:30
color: var(--gl-text-color, $gl-text-color);
2021-01-29 00:20:46 +05:30
.select2-result-label {
2021-04-29 21:17:54 +05:30
background: var(--gray-50, $gray-50);
2021-01-29 00:20:46 +05:30
}
}
.select2-result {
padding: 0 1px;
}
li.select2-result-with-children > .select2-result-label {
font-weight: $gl-font-weight-bold;
2021-04-29 21:17:54 +05:30
color: var(--gl-text-color, $gl-text-color);
2021-01-29 00:20:46 +05:30
}
}
.select2-highlighted {
.group-result {
.group-path {
2021-04-29 21:17:54 +05:30
color: var(--gray-700, $gray-700);
2021-01-29 00:20:46 +05:30
}
}
}
.select2-result-selectable,
.select2-result-unselectable {
.select2-match {
font-weight: $gl-font-weight-bold;
text-decoration: none;
}
}
.input-group {
.select2-container {
display: table-cell;
max-width: 180px;
}
}
.file-editor {
.select2 {
float: right;
}
}
.import-namespace-select {
> .select2-choice {
border-radius: $border-radius-default 0 0 $border-radius-default;
position: relative;
left: 1px;
}
}
.issue-form {
.select2-container {
width: 250px !important;
}
}
.new_project,
.edit-project,
.import-project {
.input-group {
.select2-container {
display: unset;
max-width: unset;
flex-grow: 1;
}
}
.input-group-prepend,
.input-group-append {
+ .select2 a {
border-radius: 0 $gl-border-radius-base $gl-border-radius-base 0;
}
}
}
.project-path {
.select2-choice {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
.transfer-project .select2-container {
min-width: 200px;
}
.right-sidebar {
.block {
.select2-container span {
margin-top: 0;
}
}
}
.block-truncated {
> div:not(.block):not(.select2-display-none) {
display: inline;
}
}
2021-04-17 20:07:23 +05:30
.gl-select2-html5-required-fix {
.select2-container {
+ .select2 {
@include gl-opacity-0;
@include gl-border-0;
@include gl-bg-none;
@include gl-bg-transparent;
display: block !important;
width: 1px;
height: 1px;
z-index: -1;
margin: -3px auto 0;
}
}
}