@@ -13,14 +13,6 @@ input, textarea, select, button, div[contenteditable=true], div[contenteditable=
1313 font-family : var (--font-face );
1414}
1515
16- .select2-container-multi .select2-choices .select2-search-field input , .select2-search input , .ui-widget {
17- font-family : var (--font-face ) !important ;
18- }
19-
20- .select2-container.select2-drop-above .select2-choice {
21- background-image : unset !important ;
22- }
23-
2416$opacity-disabled : .7 ;
2517
2618/* Simple selector to allow easy overriding */
@@ -61,7 +53,6 @@ input:not([type="range"]) {
6153}
6254
6355/* Default global values */
64- div .select2-drop .select2-search input , // TODO: REMOVE WHEN DROPPING SELECT2
6556input [type = ' submit' ],
6657input [type = ' button' ],
6758input [type = ' reset' ],
@@ -241,7 +232,6 @@ input:not(
241232 [type = ' button' ],
242233 [type = ' reset' ],
243234 .multiselect__input ,
244- .select2-input ,
245235 .action-input__input ,
246236 [class ^= " vs__" ]
247237),
@@ -269,11 +259,6 @@ textarea {
269259 }
270260}
271261
272- .multiselect__input , .select2-input {
273- background-color : var (--color-main-background );
274- color : var (--color-main-text );
275- }
276-
277262textarea , div [contenteditable = true ] {
278263 padding : 12px ;
279264 height : auto ;
@@ -548,185 +533,6 @@ input[type='radio'] {
548533 }
549534}
550535
551- /* Select2 overriding. Merged to core with vendor stylesheet */
552- div .select2-drop {
553- margin-top : -2px ;
554- background-color : var (--color-main-background );
555- & .select2-drop-active {
556- border-color : var (--color-border-dark );
557- }
558- .avatar {
559- display : inline-block ;
560- margin-inline-end : 8px ;
561- vertical-align : middle ;
562- img {
563- cursor : pointer ;
564- }
565- }
566- .select2-search input {
567- min-height : auto ;
568- background : var (--icon-search-dark ) no-repeat !important ;
569- background-origin : content-box !important ;
570- }
571- .select2-results {
572- max-height : 250px ;
573- margin : 0 ;
574- padding : 0 ;
575- .select2-result-label {
576- white-space : nowrap ;
577- overflow : hidden ;
578- text-overflow : ellipsis ;
579- span {
580- cursor : pointer ;
581- em {
582- cursor : inherit ;
583- background : unset ;
584- }
585- }
586- }
587- .select2-result ,
588- .select2-no-results ,
589- .select2-searching {
590- position : relative ;
591- display : list-item ;
592- padding : 12px ;
593- background-color : transparent ;
594- cursor : pointer ;
595- color : var (--color-text-maxcontrast );
596- }
597- .select2-result {
598- & .select2-selected {
599- background-color : var (--color-background-dark );
600- }
601- }
602- .select2-highlighted {
603- background-color : var (--color-background-dark );
604- color : var (--color-main-text );
605- }
606- }
607- }
608-
609- body [dir = ' ltr' ] div .select2-drop .select2-search input {
610- background-position : right center !important ;
611- }
612-
613- body [dir = ' rtl' ] div .select2-drop .select2-search input {
614- background-position : left center !important ;
615- }
616-
617- .select2-chosen ,
618- #select2-drop {
619- .avatar ,
620- .avatar img {
621- cursor : pointer ;
622- }
623- }
624-
625- div .select2-container-multi {
626- .select2-choices ,
627- & .select2-container-active .select2-choices {
628- box-shadow : none ;
629- white-space : nowrap ;
630- text-overflow : ellipsis ;
631- background : var (--color-main-background );
632- color : var (--color-text-maxcontrast ) !important ;
633- box-sizing : content-box ;
634- border-radius : var (--border-radius-large );
635- border : 2px solid var (--color-border-dark );
636- margin : 0 ;
637- padding : 6px ;
638- min-height : 44px ;
639- & :focus-within {
640- border-color : var (--color-primary-element )
641- }
642- .select2-search-choice {
643- line-height : 20px ;
644- padding-inline-start : 5px ;
645- & .select2-search-choice-focus ,
646- & :hover ,
647- & :active ,
648- & {
649- background-image : none ;
650- background-color : var (--color-main-background );
651- color : var (--color-text-maxcontrast );
652- border : 1px solid var (--color-border-dark );
653- }
654- .select2-search-choice-close {
655- display : none ;
656- }
657- }
658- .select2-search-field input {
659- line-height : 20px ;
660- min-height : 28px ;
661- max-height : 28px ;
662- color : var (--color-main-text );
663- & .select2-active {
664- background : none !important ;
665- }
666- }
667- }
668- }
669-
670- div .select2-container {
671- margin : 3px ;
672- margin-inline-start : 0 ;
673- & .select2-container-multi .select2-choices {
674- display : flex ;
675- flex-wrap : wrap ;
676- li {
677- float : none ;
678- }
679- }
680- a .select2-choice {
681- box-shadow : none ;
682- white-space : nowrap ;
683- text-overflow : ellipsis ;
684- background : var (--color-main-background );
685- color : var (--color-text-maxcontrast ) !important ;
686- box-sizing : content-box ;
687- border-radius : var (--border-radius-large );
688- border : 2px solid var (--color-border-dark );
689- margin : 0 ;
690- padding : 6px 12px ;
691- min-height : 44px ;
692- & :focus-within {
693- border-color : var (--color-primary-element )
694- }
695- .select2-search-choice {
696- line-height : 20px ;
697- padding-inline-start : 5px ;
698- background-image : none ;
699- background-color : var (--color-background-dark );
700- border-color : var (--color-background-dark );
701- .select2-search-choice-close {
702- display : none ;
703- }
704- & .select2-search-choice-focus ,
705- & :hover {
706- background-color : var (--color-border );
707- border-color : var (--color-border );
708- }
709- }
710- .select2-arrow {
711- background : none ;
712- border-radius : 0 ;
713- border : none ;
714- b {
715- background : var (--icon-triangle-s-dark ) no-repeat center !important ;
716- opacity : .5 ;
717- }
718- }
719- & :hover .select2-arrow b ,
720- & :focus .select2-arrow b ,
721- & :active .select2-arrow b {
722- opacity : .7 ;
723- }
724- .select2-search-field input {
725- line-height : 20px ;
726- }
727- }
728- }
729-
730536/* Vue v-select */
731537.v-select {
732538 margin : 3px ;
0 commit comments