diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss index 0c4b414587..04c588d3ee 100644 --- a/app/webpacker/css/admin_v3/all.scss +++ b/app/webpacker/css/admin_v3/all.scss @@ -40,7 +40,6 @@ @import "../admin/plugins/flatpickr-customization"; @import "../admin/plugins/powertip"; @import "../admin/plugins/jstree"; -@import "../admin/plugins/select2"; @import "../admin/sections/orders"; @import "../admin/sections/products"; diff --git a/app/webpacker/css/admin_v3/components/select2.scss b/app/webpacker/css/admin_v3/components/select2.scss index 5c60863be1..ad7fec81a4 100644 --- a/app/webpacker/css/admin_v3/components/select2.scss +++ b/app/webpacker/css/admin_v3/components/select2.scss @@ -1,3 +1,193 @@ +.select2-container { + &:hover .select2-choice, + &.select2-container-active .select2-choice { + background-color: $color-sel-hover-bg !important; + border-color: $color-sel-hover-bg !important; + } + .select2-choice { + background-image: none !important; + background-color: $color-sel-bg; + border: none !important; + box-shadow: none !important; + @include border-radius($border-radius); + color: $color-1 !important; + font-size: 90%; + height: 31px; + line-height: inherit !important; + padding: 5px 15px 7px; + + span { + display: block; + padding: 2px; + } + + .select2-search-choice-close { + background-image: none !important; + font-size: 100% !important; + @extend .icon-remove; + @extend [class^="icon-"], :before; + margin-top: 2px; + } + } + + &.select2-container-active { + .select2-choice { + box-shadow: none !important; + } + + &.select2-dropdown-open .select2-choice div b { + @extend .icon-caret-up; + } + } +} + +.select2-drop { + border-color: $color-sel-hover-bg; + box-shadow: none !important; + z-index: 1000000; + + &.select2-drop-above { + border-color: $color-sel-hover-bg; + } +} + +.select2-search { + @extend .icon-search; + + font-size: 100%; + color: darken($color-border, 15); + padding: 0 9px 0 0; + + &:before { + @extend [class^="icon-"], :before; + + position: absolute; + top: 13px; + left: 13px; + } + + input { + @extend input, [type="text"]; + + padding: 6px 0 6px 25px; + margin: 5px 0 0 5px; + font-family: $base-font-family; + font-size: 90%; + box-shadow: none; + background-image: none; + } +} + +.select2-container .select2-choice .select2-arrow { + background-image: none; + background: transparent; + border: 0; + + b { + padding-top: 7px; + display: block; + width: 100%; + height: 100%; + background: none; + font-family: FontAwesome; + font-weight: 200 !important; + + &:before { + content: "\f0d7"; + } + } +} + +.select2-results { + padding-left: 0 !important; + + li { + font-size: 85% !important; + + &.select2-highlighted { + .select2-result-label { + &, + h6 { + color: $color-1 !important; + } + } + } + + .select2-result-label { + color: $color-body-text; + min-height: 22px; + clear: both; + overflow: auto; + } + + &.select2-no-results, + &.select2-searching { + padding: 5px; + background-color: transparent; + color: $color-body-text; + text-align: center; + font-weight: $font-weight-bold; + text-transform: uppercase; + } + } + + .select2-highlighted { + background-color: $color-sel-bg; + } +} + +.select2-container-multi { + &.select2-container-active, + &.select2-dropdown-open { + .select2-choices { + border-color: $color-sel-hover-bg !important; + box-shadow: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + } + .select2-choices { + @extend input, [type="text"]; + padding: 6px 3px 3px 3px; + box-shadow: none; + background-image: none !important; + + .select2-search-choice { + @include border-radius($border-radius); + margin: 0 0 3px 3px; + background-image: none; + background-color: $color-sel-bg; + border: none; + box-shadow: none; + color: $color-1 !important; + font-size: 85%; + + &:hover { + background-color: $color-sel-hover-bg; + } + + .select2-search-choice-close { + background-image: none !important; + font-size: 85% !important; + @extend .icon-remove; + @extend [class^="icon-"], :before; + margin-left: 2px; + color: $color-1; + } + } + } +} + +label .select2-container { + margin-top: -6px; + .select2-choice { + span { + text-transform: none; + font-weight: normal; + } + } +} + .select2-container { .select2-choice { height: $btn-relaxed-height;