Advertisement
Guest User

Untitled

a guest
Mar 16th, 2021
225
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.68 KB | None | 0 0
  1. .select2-container--bootstrap4 .select2-selection--single {
  2.   height: calc(1.5em + 0.75rem + 2px) !important; }
  3.   .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
  4.     color: #757575;
  5.     line-height: calc(1.5em + 0.75rem); }
  6.   .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
  7.     position: absolute;
  8.     top: 50%;
  9.     right: 3px;
  10.     width: 20px; }
  11.     .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
  12.       top: 60%;
  13.       border-color: #343a40 transparent transparent transparent;
  14.       border-style: solid;
  15.       border-width: 5px 4px 0 4px;
  16.       width: 0;
  17.       height: 0;
  18.       left: 50%;
  19.       margin-left: -4px;
  20.       margin-top: -2px;
  21.       position: absolute; }
  22.   .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  23.     line-height: calc(1.5em + 0.75rem); }
  24.  
  25. .select2-search--dropdown .select2-search__field {
  26.   border: 1px solid #ced4da;
  27.   border-radius: 0.25rem; }
  28.  
  29. .select2-results__message {
  30.   color: #6c757d; }
  31.  
  32. .select2-container--bootstrap4 .select2-selection--multiple {
  33.   min-height: calc(1.5em + 0.75rem + 2px) !important; }
  34.   .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
  35.     -webkit-box-sizing: border-box;
  36.             box-sizing: border-box;
  37.     list-style: none;
  38.     margin: 0;
  39.     padding: 0 8px;
  40.     width: 100%; }
  41.     .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered .select2-search__field {
  42.       width: 100% !important; }
  43.   .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
  44.     color: #343a40;
  45.     border: 1px solid #bdc6d0;
  46.     border-radius: 0.2rem;
  47.     padding: 0;
  48.     padding-right: 5px;
  49.     cursor: pointer;
  50.     float: left;
  51.     margin-top: 0.3em;
  52.     margin-right: 5px; }
  53.   .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
  54.     color: #bdc6d0;
  55.     font-weight: bold;
  56.     margin-left: 3px;
  57.     margin-right: 1px;
  58.     padding-right: 3px;
  59.     padding-left: 3px;
  60.     float: left; }
  61.     .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
  62.       color: #343a40; }
  63.   .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear {
  64.     float: none;
  65.     margin-right: 0;
  66.     position: absolute !important;
  67.     top: 0;
  68.     right: 0.7em; }
  69.  
  70. .select2-container {
  71.   display: block; }
  72.   .select2-container *:focus {
  73.     outline: 0; }
  74.  
  75. .input-group .select2-container--bootstrap4 {
  76.   -webkit-box-flex: 1;
  77.       -ms-flex-positive: 1;
  78.           flex-grow: 1; }
  79.  
  80. .input-group-prepend ~ .select2-container--bootstrap4 .select2-selection {
  81.   border-top-left-radius: 0;
  82.   border-bottom-left-radius: 0; }
  83.  
  84. .input-group > .select2-container--bootstrap4:not(:last-child) .select2-selection {
  85.   border-top-right-radius: 0;
  86.   border-bottom-right-radius: 0; }
  87.  
  88. .select2-container--bootstrap4 .select2-selection {
  89.   background-color: #fff;
  90.   border: 1px solid #ced4da;
  91.   border-radius: 0.25rem;
  92.   -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  93.   transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  94.   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  95.   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  96.   width: 100%; }
  97.   @media (prefers-reduced-motion: reduce) {
  98.     .select2-container--bootstrap4 .select2-selection {
  99.       -webkit-transition: none;
  100.       transition: none; } }
  101.  
  102. .select2-container--bootstrap4.select2-container--focus .select2-selection {
  103.   border-color: #80bdff;
  104.   -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  105.           box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
  106.  
  107. .select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection {
  108.   border-bottom: none;
  109.   border-bottom-left-radius: 0;
  110.   border-bottom-right-radius: 0; }
  111.  
  112. .select2-container--bootstrap4.select2-container--disabled .select2-selection, .select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-selection {
  113.   background-color: #e9ecef;
  114.   cursor: not-allowed;
  115.   border-color: #ced4da;
  116.   -webkit-box-shadow: none;
  117.           box-shadow: none; }
  118.  
  119. .select2-container--bootstrap4.select2-container--disabled .select2-search__field, .select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-search__field {
  120.   background-color: transparent; }
  121.  
  122. select.is-invalid ~ .select2-container--bootstrap4 .select2-selection,
  123. form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection {
  124.   border-color: #dc3545; }
  125.  
  126. select.is-valid ~ .select2-container--bootstrap4 .select2-selection,
  127. form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection {
  128.   border-color: #28a745; }
  129.  
  130. .select2-container--bootstrap4 .select2-dropdown {
  131.   border-color: #ced4da;
  132.   border-radius: 0; }
  133.   .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below {
  134.     border-top: none;
  135.     border-bottom-right-radius: 0.25rem;
  136.     border-bottom-left-radius: 0.25rem; }
  137.   .select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above {
  138.     border-top: 1px solid #ced4da;
  139.     border-top-left-radius: 0.25rem;
  140.     border-top-right-radius: 0.25rem; }
  141.   .select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true] {
  142.     background-color: #e9ecef; }
  143.  
  144. .select2-container--bootstrap4 .select2-results__option--highlighted,
  145. .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
  146.   background-color: #007bff;
  147.   color: #f8f9fa; }
  148.  
  149. .select2-container--bootstrap4 .select2-results__option[role=group] {
  150.   padding: 0; }
  151.   .select2-container--bootstrap4 .select2-results__option[role=group] .select2-results__options--nested .select2-results__option {
  152.     padding-left: 1em; }
  153.  
  154. .select2-container--bootstrap4 .select2-results > .select2-results__options {
  155.   max-height: 15em;
  156.   overflow-y: auto; }
  157.  
  158. .select2-container--bootstrap4 .select2-results__group {
  159.   padding: 6px;
  160.   display: list-item;
  161.   color: #6c757d; }
  162.  
  163. .select2-container--bootstrap4 .select2-selection__clear {
  164.   width: 0.9em;
  165.   height: 0.9em;
  166.   line-height: 0.75em;
  167.   padding-left: 0.15em;
  168.   margin-top: 0.7em;
  169.   border-radius: 100%;
  170.   background-color: #c8c8c8;
  171.   color: #f8f9fa;
  172.   float: right;
  173.   margin-right: 0.3em; }
  174.   .select2-container--bootstrap4 .select2-selection__clear:hover {
  175.     background-color: #afafaf; }
  176.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement