Created
July 21, 2017 08:49
-
-
Save DaleMckeown/ce5a8d32bd0c1d44462090eb12c554cc to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* To avoid mixing em and rem units during compilation */ | |
.select2-container--bootstrap { | |
display: block; | |
/*------------------------------------* #COMMON STYLES | |
\*------------------------------------*/ | |
/** | |
* Search field in the Select2 dropdown. | |
*/ | |
/** | |
* No outline for all search fields - in the dropdown | |
* and inline in multi Select2s. | |
*/ | |
/** | |
* Adjust Select2's choices hover and selected styles to match | |
* Bootstrap 3's default dropdown styles. | |
* | |
* @see http://getbootstrap.com/components/#dropdowns | |
*/ | |
/** | |
* Clear the selection. | |
*/ | |
/** | |
* Address disabled Select2 styles. | |
* | |
* @see https://select2.github.io/examples.html#disabled | |
* @see http://getbootstrap.com/css/#forms-control-disabled | |
*/ | |
/*------------------------------------* #DROPDOWN | |
\*------------------------------------*/ | |
/** | |
* Dropdown border color and box-shadow. | |
*/ | |
/** | |
* Limit the dropdown height. | |
*/ | |
/*------------------------------------* #SINGLE SELECT2 | |
\*------------------------------------*/ | |
/*------------------------------------* #MULTIPLE SELECT2 | |
\*------------------------------------*/ | |
/** | |
* Address Bootstrap control sizing classes | |
* | |
* 1. Reset Bootstrap defaults. | |
* 2. Adjust the dropdown arrow button icon position. | |
* | |
* @see http://getbootstrap.com/css/#forms-control-sizes | |
*/ | |
/* 1 */ | |
/*------------------------------------* #RTL SUPPORT | |
\*------------------------------------*/ | |
} | |
.select2-container--bootstrap .select2-selection { | |
background-color: #fff; | |
border: 1px solid rgba(0, 0, 0, 0.15); | |
color: #464a4c; | |
font-size: 1rem; | |
border-radius: 0; | |
outline: 0; | |
} | |
.select2-container--bootstrap .select2-selection.form-control { | |
border-radius: 0; | |
} | |
.select2-container--bootstrap .select2-search--dropdown .select2-search__field { | |
background-color: #fff; | |
border: 1px solid rgba(0, 0, 0, 0.15); | |
color: #464a4c; | |
font-size: 1rem; | |
border-radius: 0; | |
} | |
.select2-container--bootstrap .select2-search__field { | |
outline: 0; | |
/* Firefox 18- */ | |
/** | |
* Firefox 19+ | |
* | |
* @see http://stackoverflow.com/questions/24236240/color-for-styled-placeholder-text-is-muted-in-firefox | |
*/ | |
} | |
.select2-container--bootstrap .select2-search__field::-webkit-input-placeholder { | |
color: #636c72; | |
} | |
.select2-container--bootstrap .select2-search__field:-moz-placeholder { | |
color: #636c72; | |
} | |
.select2-container--bootstrap .select2-search__field::-moz-placeholder { | |
color: #636c72; | |
opacity: 1; | |
} | |
.select2-container--bootstrap .select2-search__field:-ms-input-placeholder { | |
color: #636c72; | |
} | |
.select2-container--bootstrap .select2-results__option { | |
padding: 0.5rem 0.75rem; | |
/** | |
* Disabled results. | |
* | |
* @see https://select2.github.io/examples.html#disabled-results | |
*/ | |
/** | |
* Hover state. | |
*/ | |
/** | |
* Selected state. | |
*/ | |
} | |
.select2-container--bootstrap .select2-results__option[role=group] { | |
padding: 0; | |
} | |
.select2-container--bootstrap .select2-results__option[aria-disabled=true] { | |
color: #636c72; | |
cursor: not-allowed; | |
} | |
.select2-container--bootstrap .select2-results__option[aria-selected=true] { | |
background-color: #f7f7f9; | |
color: #1d1e1f; | |
} | |
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] { | |
background-color: #34649D; | |
color: #fff; | |
} | |
.select2-container--bootstrap .select2-results__option .select2-results__option { | |
padding: 0.5rem 0.75rem; | |
} | |
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__group { | |
padding-left: 0; | |
} | |
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option { | |
margin-left: -0.75rem; | |
padding-left: 1.5rem; | |
} | |
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option { | |
margin-left: -1.5rem; | |
padding-left: 2.25rem; | |
} | |
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { | |
margin-left: -2.25rem; | |
padding-left: 3rem; | |
} | |
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { | |
margin-left: -3rem; | |
padding-left: 3.75rem; | |
} | |
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { | |
margin-left: -3.75rem; | |
padding-left: 4.5rem; | |
} | |
.select2-container--bootstrap .select2-results__group { | |
color: #636c72; | |
display: block; | |
padding: 0.5rem 0.75rem; | |
font-size: 0.875rem; | |
line-height: 1.25; | |
white-space: nowrap; | |
} | |
.select2-container--bootstrap.select2-container--focus .select2-selection, | |
.select2-container--bootstrap.select2-container--open .select2-selection { | |
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; | |
border-color: #7da5d4; | |
} | |
.select2-container--bootstrap.select2-container--open { | |
/** | |
* Make the dropdown arrow point up while the dropdown is visible. | |
*/ | |
/** | |
* Handle border radii of the container when the dropdown is showing. | |
*/ | |
} | |
.select2-container--bootstrap.select2-container--open .select2-selection .select2-selection__arrow b { | |
border-color: transparent transparent #636c72 transparent; | |
border-width: 0 0.3rem 0.3rem 0.3rem; | |
} | |
.select2-container--bootstrap.select2-container--open.select2-container--below .select2-selection { | |
border-bottom-color: transparent; | |
} | |
.select2-container--bootstrap.select2-container--open.select2-container--above .select2-selection { | |
border-top-color: transparent; | |
} | |
.select2-container--bootstrap .select2-selection__clear { | |
color: #636c72; | |
cursor: pointer; | |
float: right; | |
font-weight: bold; | |
margin-right: 10px; | |
} | |
.select2-container--bootstrap .select2-selection__clear:hover { | |
color: #fff; | |
} | |
.select2-container--bootstrap.select2-container--disabled .select2-selection { | |
border-color: rgba(0, 0, 0, 0.15); | |
} | |
.select2-container--bootstrap.select2-container--disabled .select2-selection, | |
.select2-container--bootstrap.select2-container--disabled .select2-search__field { | |
cursor: not-allowed; | |
} | |
.select2-container--bootstrap.select2-container--disabled .select2-selection, | |
.select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice { | |
background-color: #eceeef; | |
} | |
.select2-container--bootstrap.select2-container--disabled .select2-selection__clear, | |
.select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice__remove { | |
display: none; | |
} | |
.select2-container--bootstrap .select2-dropdown { | |
border-color: #7da5d4; | |
overflow-x: hidden; | |
margin-top: -1px; | |
/*here1!*/ | |
border-radius: 0; | |
/*here1!*/ | |
} | |
.select2-container--bootstrap .select2-dropdown--above { | |
margin-top: 1px; | |
} | |
.select2-container--bootstrap .select2-results > .select2-results__options { | |
max-height: 200px; | |
overflow-y: auto; | |
} | |
.select2-container--bootstrap .select2-selection--single { | |
height: 2.25rem; | |
line-height: 1.25; | |
padding: 0.5rem 1.65rem 0.5rem 0.75rem; | |
/** | |
* Adjust the single Select2's dropdown arrow button appearance. | |
*/ | |
} | |
.select2-container--bootstrap .select2-selection--single .select2-selection__arrow { | |
position: absolute; | |
bottom: 0; | |
right: 0.75rem; | |
top: 0; | |
width: 0.3rem; | |
} | |
.select2-container--bootstrap .select2-selection--single .select2-selection__arrow b { | |
border-color: #636c72 transparent transparent transparent; | |
border-style: solid; | |
border-width: 0.3rem 0.3rem 0 0.3rem; | |
height: 0; | |
left: 0; | |
margin-left: -0.3rem; | |
margin-top: -0.15rem; | |
position: absolute; | |
top: 50%; | |
width: 0; | |
} | |
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered { | |
color: #464a4c; | |
padding: 0; | |
} | |
.select2-container--bootstrap .select2-selection--single .select2-selection__placeholder { | |
color: #636c72; | |
} | |
.select2-container--bootstrap .select2-selection--multiple { | |
min-height: 2.25rem; | |
padding: 0; | |
height: auto; | |
/** | |
* Make Multi Select2's choices match Bootstrap 3's default button styles. | |
*/ | |
/** | |
* Minus 2px borders. | |
*/ | |
/** | |
* Clear the selection. | |
*/ | |
} | |
.select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered { | |
box-sizing: border-box; | |
display: block; | |
line-height: 1.25; | |
list-style: none; | |
margin: 0; | |
overflow: hidden; | |
padding: 0; | |
width: 100%; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
.select2-container--bootstrap .select2-selection--multiple .select2-selection__placeholder { | |
color: #636c72; | |
float: left; | |
margin-top: 5px; | |
} | |
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice { | |
color: #fff; | |
background: #5bc0de; | |
border: 1px solid #5bc0de; | |
cursor: default; | |
float: left; | |
margin: 0.5rem 0 0 0.375rem; | |
padding: 0 0.5rem; | |
border-radius: 0; | |
} | |
.select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field { | |
background: transparent; | |
padding: 0 0.75rem; | |
height: 2.25rem; | |
line-height: 1.25; | |
margin-top: 0; | |
min-width: 5em; | |
} | |
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove { | |
color: #fff; | |
cursor: pointer; | |
display: inline-block; | |
font-weight: bold; | |
margin-right: 0.25rem; | |
} | |
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove:hover { | |
color: #fff; | |
} | |
.select2-container--bootstrap .select2-selection--multiple .select2-selection__clear { | |
margin-top: 0.5rem; | |
} | |
.select2-container--bootstrap .select2-selection--single.input-sm, | |
.input-group-sm .select2-container--bootstrap .select2-selection--single, | |
.form-group-sm .select2-container--bootstrap .select2-selection--single { | |
border-radius: 0; | |
font-size: 0.875rem; | |
height: 1.8125rem; | |
line-height: 1.5; | |
padding: 0.25rem 1.4rem 0.25rem 0.5rem; | |
/* 2 */ | |
} | |
.select2-container--bootstrap .select2-selection--single.input-sm .select2-selection__arrow b, | |
.input-group-sm .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b, | |
.form-group-sm .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b { | |
margin-left: -0.25rem; | |
} | |
.select2-container--bootstrap .select2-selection--multiple.input-sm, | |
.input-group-sm .select2-container--bootstrap .select2-selection--multiple, | |
.form-group-sm .select2-container--bootstrap .select2-selection--multiple { | |
min-height: 1.8125rem; | |
border-radius: 0; | |
} | |
.select2-container--bootstrap .select2-selection--multiple.input-sm .select2-selection__choice, | |
.input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice, | |
.form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice { | |
font-size: 0.875rem; | |
line-height: 1.5; | |
margin: 0.25rem 0 0 0.25rem; | |
padding: 0 0.25rem; | |
} | |
.select2-container--bootstrap .select2-selection--multiple.input-sm .select2-search--inline .select2-search__field, | |
.input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field, | |
.form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field { | |
padding: 0 0.5rem; | |
font-size: 0.875rem; | |
height: -0.1875rem; | |
line-height: 1.5; | |
} | |
.select2-container--bootstrap .select2-selection--multiple.input-sm .select2-selection__clear, | |
.input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear, | |
.form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear { | |
margin-top: 0.25rem; | |
} | |
.select2-container--bootstrap .select2-selection--single.input-lg, | |
.input-group-lg .select2-container--bootstrap .select2-selection--single, | |
.form-group-lg .select2-container--bootstrap .select2-selection--single { | |
border-radius: 0; | |
font-size: 1.25rem; | |
height: 3.16667rem; | |
line-height: 1.33333; | |
padding: 0.75rem 2.4rem 0.75rem 1.5rem; | |
/* 1 */ | |
} | |
.select2-container--bootstrap .select2-selection--single.input-lg .select2-selection__arrow, | |
.input-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow, | |
.form-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow { | |
width: 0.3rem; | |
} | |
.select2-container--bootstrap .select2-selection--single.input-lg .select2-selection__arrow b, | |
.input-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b, | |
.form-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b { | |
border-width: 0.3rem 0.3rem 0 0.3rem; | |
margin-left: -0.3rem; | |
margin-left: -0.75rem; | |
margin-top: -0.15rem; | |
} | |
.select2-container--bootstrap .select2-selection--multiple.input-lg, | |
.input-group-lg .select2-container--bootstrap .select2-selection--multiple, | |
.form-group-lg .select2-container--bootstrap .select2-selection--multiple { | |
min-height: 3.16667rem; | |
border-radius: 0; | |
} | |
.select2-container--bootstrap .select2-selection--multiple.input-lg .select2-selection__choice, | |
.input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice, | |
.form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice { | |
font-size: 1.25rem; | |
line-height: 1.33333; | |
border-radius: 0; | |
margin: -0.25rem 0 0 0.75rem; | |
padding: 0 0.75rem; | |
} | |
.select2-container--bootstrap .select2-selection--multiple.input-lg .select2-search--inline .select2-search__field, | |
.input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field, | |
.form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field { | |
padding: 0 1.5rem; | |
font-size: 1.25rem; | |
height: 1.16667rem; | |
line-height: 1.33333; | |
} | |
.select2-container--bootstrap .select2-selection--multiple.input-lg .select2-selection__clear, | |
.input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear, | |
.form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear { | |
margin-top: 0.75rem; | |
} | |
.select2-container--bootstrap .select2-selection.input-lg.select2-container--open .select2-selection--single { | |
/** | |
* Make the dropdown arrow point up while the dropdown is visible. | |
*/ | |
} | |
.select2-container--bootstrap .select2-selection.input-lg.select2-container--open .select2-selection--single .select2-selection__arrow b { | |
border-color: transparent transparent #636c72 transparent; | |
border-width: 0 0.3rem 0.3rem 0.3rem; | |
} | |
.input-group-lg .select2-container--bootstrap .select2-selection.select2-container--open .select2-selection--single { | |
/** | |
* Make the dropdown arrow point up while the dropdown is visible. | |
*/ | |
} | |
.input-group-lg .select2-container--bootstrap .select2-selection.select2-container--open .select2-selection--single .select2-selection__arrow b { | |
border-color: transparent transparent #636c72 transparent; | |
border-width: 0 0.3rem 0.3rem 0.3rem; | |
} | |
.select2-container--bootstrap[dir="rtl"] { | |
/** | |
* Single Select2 | |
* | |
* 1. Makes sure that .select2-selection__placeholder is positioned | |
* correctly. | |
*/ | |
/** | |
* Multiple Select2 | |
*/ | |
} | |
.select2-container--bootstrap[dir="rtl"] .select2-selection--single { | |
padding-left: 1.65rem; | |
padding-right: 0.75rem; | |
} | |
.select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__rendered { | |
padding-right: 0; | |
padding-left: 0; | |
text-align: right; | |
/* 1 */ | |
} | |
.select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__clear { | |
float: left; | |
} | |
.select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__arrow { | |
left: 0.75rem; | |
right: auto; | |
} | |
.select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__arrow b { | |
margin-left: 0; | |
} | |
.select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice, | |
.select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, | |
.select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-search--inline { | |
float: right; | |
} | |
.select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice { | |
margin-left: 0; | |
margin-right: 0.375rem; | |
} | |
.select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { | |
margin-left: 2px; | |
margin-right: auto; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment