Created
July 21, 2017 08:49
-
-
Save DaleMckeown/ce5a8d32bd0c1d44462090eb12c554cc to your computer and use it in GitHub Desktop.
This file contains hidden or 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