scss Select2 Flat UI https://github.com/techhysahil/Select2-Flat-UI/blob/master/Overide.css

Posted 2021-05-18

/*********************************
Author : Techhysahil
Link : http://techhysahil.com
Gist: https://github.com/techhysahil/Select2-Flat-UI/blob/master/Overide.css
*********************************/

/* Assign min-width to container */
.select2-container{
  min-width:200px;
}
/*Theme Color override*/
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background: white !important;
  color: $sfe_primary_color;
}
.select2-container--default .select2-results__option[aria-selected=true]{
  background: white;
  color: $sfe_primary_color;
  opacity: 0.8;
}
.select2-container .select2-choice {
  border: 2px solid $sfe_primary_color;
  //height: 36px;
  border-radius: 0px ;
  font-family: $sfe_primary_font;
  //font-size: 14px;
  text-indent: 1px;
  box-shadow: none;
  background-image: none;
}
.select2-container *:focus{
  outline:0px;
}
.select2-container--default .select2-selection--single{
  border-radius:0px;
}
.select2-container.select2-drop-above .select2-choice {
  border-bottom-color: white;
  border-radius:0px;
}
.select2-drop {
  margin-top: -2px;
  border: 2px solid white;
  border-top: 0;
  border-radius: 0px !important;
  border-radius:0 0 6px 6px;
  box-shadow: none;
}
.select2-drop.select2-drop-above {
  margin-top: 2px;
  border-top: 2px solid white;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  box-shadow: none;
}
.select2-container .select2-choice div {
  border-left: 2px solid white;
  border-radius: 0 4px 4px 0;
  background-clip: padding-box;
}
.select2-search{
  margin-top: 3px;
}
.select2-search input {
  height: 30px !important;
  border: 2px solid white;
}
.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
  border: 2px solid white;
  outline: none;
  box-shadow: none;
}
.select2-dropdown-open .select2-choice {
  box-shadow: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.select2-dropdown-open .select2-choice div {
  background: transparent;
  border-left: none;
  filter: none;
}
.select2-results .select2-highlighted {
  background: white;
  color: $sfe_primary_color;
  border-radius: 0px;
}
.select2-results{
  padding: 0 0 0 0px;
  margin: 4px 0px 0px 0;
}
.select2-container-multi .select2-choices {
  height: auto !important;
  height: 1%;
  border: 2px solid white;
}
.select2-container-multi.select2-container-active .select2-choices {
  border: 2px solid white;
  border-radius: 6px;
  box-shadow: none;
}
.select2-container .select2-choice .select2-arrow{
  border: 0px;
  border-radius: 0px;
  background: transparent;
  background-image: none;
}

/*New Changes*/
.select2-container--default .select2-selection--single{
  background: white;
  border: 0px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
  color: white;
}
.select2-container--default .select2-selection--single .select2-selection__rendewhite{
  color: $sfe_primary_color;
  line-height:34px;
}
.select2-container .select2-selection--single{
  height:34px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b
{
  border-color: $sfe_primary_color transparent transparent transparent;
  top: 60%;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
  border-color: transparent transparent $sfe_primary_color transparent;
}

// Border above dropdown
.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above{
  background: white;
}

/*
Tags
*/
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background-color: white;
  color: $sfe_primary_color;
  border: 1px solid white;
  border-radius: 2px;
  padding: 5px 7px;
  @include rem(font-size, 12px);
  font-weight: bold;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
  color: $sfe_primary_color;
  margin-right: 6px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
  margin-left: 6px;
  float: right;
}


/*
Main input box
*/
.select2-container--default .select2-selection--multiple,.select2-container--default.select2-container--focus .select2-selection--multiple{
  border: 2px solid white;
  background-color: transparent;
  border-radius: 5px;
  padding: 2px;
}
//Placeholder text
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: $sfe_primary_color;
}