Last active
July 21, 2017 08:52
-
-
Save DaleMckeown/e40d62c798544b886ee1bdfd0694131b to your computer and use it in GitHub Desktop.
Modification of judetucker's select2-bootstrap-v4.0.0-alpha.6.scss to fix Bootstrap border-radius issue. This uses the Bootstrap border-radius mixin to ensure $enable-rounded is honored.
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
// | |
// Mixins - we need to override the Bootstrap mixins to set border-radius to 0 if $enable-rounded is false. | |
// -------------------------------------------------- | |
@mixin border-radius($radius: $border-radius) { | |
@if $enable-rounded { | |
border-radius: $radius; | |
} | |
@else { | |
border-radius: 0; | |
} | |
} | |
@mixin border-right-radius($radius) { | |
@if $enable-rounded { | |
border-bottom-right-radius: $radius; | |
border-top-right-radius: $radius; | |
} | |
@else { | |
border-radius: 0; | |
} | |
} | |
@mixin border-left-radius($radius) { | |
@if $enable-rounded { | |
border-bottom-left-radius: $radius; | |
border-top-left-radius: $radius; | |
} | |
@else { | |
border-radius: 0; | |
} | |
} | |
// | |
// Variables | |
// -------------------------------------------------- | |
/* To avoid mixing em and rem units during compilation */ | |
$caret-width: .3rem; | |
// Variables directly translating Bootstrap variables | |
// ------------------------- | |
$s2bs-border-radius-base: $border-radius !default; | |
$s2bs-border-radius-large: $border-radius-lg !default; | |
$s2bs-border-radius-small: $border-radius-sm !default; | |
$s2bs-btn-default-bg: $btn-info-bg !default; | |
$s2bs-btn-default-border: $btn-info-border !default; | |
$s2bs-btn-default-color: $btn-info-color !default; | |
$s2bs-caret-width-base: $caret-width !default; | |
$s2bs-caret-width-large: $caret-width !default; | |
$s2bs-cursor-disabled: $cursor-disabled !default; | |
$s2bs-dropdown-header-color: $dropdown-header-color !default; | |
$s2bs-dropdown-link-active-bg: $dropdown-link-active-bg !default; | |
$s2bs-dropdown-link-active-color: $dropdown-link-active-color !default; | |
$s2bs-dropdown-link-disabled-color: $dropdown-link-disabled-color !default; | |
$s2bs-dropdown-link-hover-bg: $dropdown-link-hover-bg !default; | |
$s2bs-dropdown-link-hover-color: $dropdown-link-hover-color !default; | |
$s2bs-font-size-base: $font-size-base !default; | |
$s2bs-font-size-large: $font-size-lg !default; | |
$s2bs-font-size-small: $font-size-sm !default; | |
$s2bs-padding-base-horizontal: $input-padding-x !default; | |
$s2bs-padding-large-horizontal: $input-padding-x-lg !default; | |
$s2bs-padding-small-horizontal: $input-padding-x-sm !default; | |
$s2bs-padding-base-vertical: $input-padding-y !default; | |
$s2bs-padding-large-vertical: $input-padding-y-lg !default; | |
$s2bs-padding-small-vertical: $input-padding-y-sm !default; | |
$s2bs-line-height-base: $input-line-height !default; | |
$s2bs-line-height-large: $line-height-lg !default; | |
$s2bs-line-height-small: $line-height-sm !default; | |
$s2bs-input-bg: $input-bg !default; | |
$s2bs-input-bg-disabled: $input-bg-disabled !default; | |
$s2bs-input-color: $input-color !default; | |
$s2bs-input-color-placeholder: $input-color-placeholder !default; | |
$s2bs-input-border: $input-border-color !default; | |
$s2bs-input-border-focus: $input-border-focus !default; | |
$s2bs-input-border-radius: $border-radius !default; | |
$s2bs-input-height-base: $input-height !default; | |
$s2bs-input-height-large: $input-height-lg !default; | |
$s2bs-input-height-small: $input-height-sm !default; | |
$s2bs-screen-size-sm: 540px !default; | |
// Theme-specific variables | |
// ------------------------- | |
$s2bs-dropdown-arrow-color: $s2bs-input-color-placeholder !default; | |
$s2bs-dropdown-box-shadow: 0 6px 12px rgba(0,0,0,.175) !default; | |
$s2bs-dropdown-box-shadow-above: 0px -6px 12px rgba(0,0,0,.175) !default; | |
$s2bs-clear-selection-color: $s2bs-dropdown-arrow-color !default; | |
$s2bs-clear-selection-hover-color: $s2bs-btn-default-color !default; | |
$s2bs-remove-choice-color: $s2bs-btn-default-color !default; | |
$s2bs-remove-choice-hover-color: $s2bs-btn-default-color !default; | |
$s2bs-selection-choice-border-radius: $s2bs-border-radius-base !default; | |
$s2bs-dropdown-header-padding-vertical: $s2bs-padding-base-vertical !default; | |
$s2bs-dropdown-header-font-size: $s2bs-font-size-small !default; | |
// Bootstrap defaults not available as pre-defined variables | |
// These should not be overridden. | |
// ------------------------- | |
// @see https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_forms.scss#L126 | |
$s2bs-form-control-default-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; | |
// @see https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/mixins/_forms.scss#L60 | |
$s2bs-form-control-focus-box-shadow: $s2bs-form-control-default-box-shadow, 0 0 8px rgba($s2bs-input-border-focus, 0.6) !default; | |
// @see https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_forms.scss#L127 | |
$s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default; | |
// | |
// Mixins | |
// -------------------------------------------------- | |
// @see https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_forms.scss#L115 | |
@mixin bootstrap-input-defaults { | |
@include box-shadow($s2bs-form-control-default-box-shadow); | |
background-color: $s2bs-input-bg; | |
border: 1px solid $s2bs-input-border; | |
color: $s2bs-input-color; | |
font-size: $s2bs-font-size-base; | |
@include border-radius($s2bs-input-border-radius); | |
} | |
// @see http://getbootstrap.com/css/#forms-control-validation | |
// @see https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_forms.scss#L388 | |
@mixin validation-state-focus($color) { | |
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($color, 20%); | |
.select2-dropdown, | |
.select2-selection { | |
border-color: $color; | |
} | |
.select2-container--focus .select2-selection, | |
.select2-container--open .select2-selection { | |
@include box-shadow($shadow); | |
border-color: darken($color, 10%); | |
} | |
&.select2-drop-active { | |
border-color: darken($color, 10%); | |
&.select2-drop.select2-drop-above { | |
border-top-color: darken($color, 10%); | |
} | |
} | |
} | |
// dropdown arrow when dropdown is open | |
@mixin dropdown-arrow { | |
.select2-selection--single { | |
/** | |
* Make the dropdown arrow point up while the dropdown is visible. | |
*/ | |
.select2-selection__arrow b { | |
border-color: transparent transparent $s2bs-dropdown-arrow-color transparent; | |
border-width: 0 $s2bs-caret-width-large $s2bs-caret-width-large $s2bs-caret-width-large; | |
} | |
} | |
} | |
.select2-container--bootstrap { | |
display: block; | |
/*------------------------------------*\ | |
#COMMON STYLES | |
\*------------------------------------*/ | |
.select2-selection { | |
@include bootstrap-input-defaults; | |
outline: 0; | |
&.form-control { | |
@include border-radius($s2bs-input-border-radius); | |
} | |
} | |
/** | |
* Search field in the Select2 dropdown. | |
*/ | |
.select2-search--dropdown { | |
.select2-search__field { | |
@include bootstrap-input-defaults; | |
} | |
} | |
/** | |
* No outline for all search fields - in the dropdown | |
* and inline in multi Select2s. | |
*/ | |
.select2-search__field { | |
outline: 0; | |
&::-webkit-input-placeholder { | |
color: $s2bs-input-color-placeholder; | |
} | |
/* Firefox 18- */ | |
&:-moz-placeholder { | |
color: $s2bs-input-color-placeholder; | |
} | |
/** | |
* Firefox 19+ | |
* | |
* @see http://stackoverflow.com/questions/24236240/color-for-styled-placeholder-text-is-muted-in-firefox | |
*/ | |
&::-moz-placeholder { | |
color: $s2bs-input-color-placeholder; | |
opacity: 1; | |
} | |
&:-ms-input-placeholder { | |
color: $s2bs-input-color-placeholder; | |
} | |
} | |
/** | |
* Adjust Select2's choices hover and selected styles to match | |
* Bootstrap 3's default dropdown styles. | |
* | |
* @see http://getbootstrap.com/components/#dropdowns | |
*/ | |
.select2-results__option { | |
padding: $s2bs-padding-base-vertical $s2bs-padding-base-horizontal; | |
&[role=group] { | |
padding: 0; | |
} | |
/** | |
* Disabled results. | |
* | |
* @see https://select2.github.io/examples.html#disabled-results | |
*/ | |
&[aria-disabled=true] { | |
color: $s2bs-dropdown-link-disabled-color; | |
cursor: $s2bs-cursor-disabled; | |
} | |
/** | |
* Hover state. | |
*/ | |
&[aria-selected=true] { | |
background-color: $s2bs-dropdown-link-hover-bg; | |
color: $s2bs-dropdown-link-hover-color; | |
} | |
/** | |
* Selected state. | |
*/ | |
&--highlighted[aria-selected] { | |
background-color: $s2bs-dropdown-link-active-bg; | |
color: $s2bs-dropdown-link-active-color; | |
} | |
.select2-results__option { | |
padding: $s2bs-padding-base-vertical $s2bs-padding-base-horizontal; | |
.select2-results__group { | |
padding-left: 0; | |
} | |
.select2-results__option { | |
margin-left: -$s2bs-padding-base-horizontal; | |
padding-left: $s2bs-padding-base-horizontal*2; | |
.select2-results__option { | |
margin-left: -$s2bs-padding-base-horizontal*2; | |
padding-left: $s2bs-padding-base-horizontal*3; | |
.select2-results__option { | |
margin-left: -$s2bs-padding-base-horizontal*3; | |
padding-left: $s2bs-padding-base-horizontal*4; | |
.select2-results__option { | |
margin-left: -$s2bs-padding-base-horizontal*4; | |
padding-left: $s2bs-padding-base-horizontal*5; | |
.select2-results__option { | |
margin-left: -$s2bs-padding-base-horizontal*5; | |
padding-left: $s2bs-padding-base-horizontal*6; | |
} | |
} | |
} | |
} | |
} | |
} | |
} | |
.select2-results__group { | |
color: $s2bs-dropdown-header-color; | |
display: block; | |
padding: $s2bs-dropdown-header-padding-vertical $s2bs-padding-base-horizontal; | |
font-size: $s2bs-dropdown-header-font-size; | |
line-height: $s2bs-line-height-base; | |
white-space: nowrap; | |
} | |
&.select2-container--focus, | |
&.select2-container--open { | |
.select2-selection { | |
@include box-shadow($s2bs-form-control-focus-box-shadow); | |
@include transition($s2bs-form-control-transition); | |
border-color: $s2bs-input-border-focus; | |
} | |
} | |
&.select2-container--open { | |
/** | |
* Make the dropdown arrow point up while the dropdown is visible. | |
*/ | |
.select2-selection .select2-selection__arrow b { | |
border-color: transparent transparent $s2bs-dropdown-arrow-color transparent; | |
border-width: 0 $s2bs-caret-width-base $s2bs-caret-width-base $s2bs-caret-width-base; | |
} | |
/** | |
* Handle border radii of the container when the dropdown is showing. | |
*/ | |
&.select2-container--below { | |
.select2-selection { | |
@include border-bottom-radius(0); | |
border-bottom-color: transparent; | |
} | |
} | |
&.select2-container--above { | |
.select2-selection { | |
@include border-top-radius(0); | |
border-top-color: transparent; | |
} | |
} | |
} | |
/** | |
* Clear the selection. | |
*/ | |
.select2-selection__clear { | |
color: $s2bs-clear-selection-color; | |
cursor: pointer; | |
float: right; | |
font-weight: bold; | |
margin-right: 10px; | |
&:hover { | |
color: $s2bs-clear-selection-hover-color; | |
} | |
} | |
/** | |
* Address disabled Select2 styles. | |
* | |
* @see https://select2.github.io/examples.html#disabled | |
* @see http://getbootstrap.com/css/#forms-control-disabled | |
*/ | |
&.select2-container--disabled { | |
.select2-selection { | |
border-color: $s2bs-input-border; | |
@include box-shadow(none); | |
} | |
.select2-selection, | |
.select2-search__field { | |
cursor: $s2bs-cursor-disabled; | |
} | |
.select2-selection, | |
.select2-selection--multiple .select2-selection__choice { | |
background-color: $s2bs-input-bg-disabled; | |
} | |
.select2-selection__clear, | |
.select2-selection--multiple .select2-selection__choice__remove { | |
display: none; | |
} | |
} | |
/*------------------------------------*\ | |
#DROPDOWN | |
\*------------------------------------*/ | |
/** | |
* Dropdown border color and box-shadow. | |
*/ | |
.select2-dropdown { | |
@include box-shadow($s2bs-dropdown-box-shadow); | |
border-color: $s2bs-input-border-focus; | |
overflow-x: hidden; | |
margin-top: -1px; | |
/*here1!*/ | |
@include border-radius($s2bs-input-border-radius); | |
/*here1!*/ | |
&--above { | |
@include box-shadow($s2bs-dropdown-box-shadow-above); | |
margin-top: 1px; | |
} | |
} | |
/** | |
* Limit the dropdown height. | |
*/ | |
.select2-results > .select2-results__options { | |
max-height: 200px; | |
overflow-y: auto; | |
} | |
/*------------------------------------*\ | |
#SINGLE SELECT2 | |
\*------------------------------------*/ | |
.select2-selection--single { | |
height: $s2bs-input-height-base; | |
line-height: $s2bs-line-height-base; | |
padding: $s2bs-padding-base-vertical ($s2bs-padding-base-horizontal + $s2bs-caret-width-base*3) $s2bs-padding-base-vertical $s2bs-padding-base-horizontal; | |
/** | |
* Adjust the single Select2's dropdown arrow button appearance. | |
*/ | |
.select2-selection__arrow { | |
position: absolute; | |
bottom: 0; | |
right: $s2bs-padding-base-horizontal; | |
top: 0; | |
width: $s2bs-caret-width-base; | |
b { | |
border-color: $s2bs-dropdown-arrow-color transparent transparent transparent; | |
border-style: solid; | |
border-width: $s2bs-caret-width-base $s2bs-caret-width-base 0 $s2bs-caret-width-base; | |
height: 0; | |
left: 0; | |
margin-left: -$s2bs-caret-width-base; | |
margin-top: -$s2bs-caret-width-base/2; | |
position: absolute; | |
top: 50%; | |
width: 0; | |
} | |
} | |
.select2-selection__rendered { | |
color: $s2bs-input-color; | |
padding: 0; | |
} | |
.select2-selection__placeholder { | |
color: $s2bs-input-color-placeholder; | |
} | |
} | |
/*------------------------------------*\ | |
#MULTIPLE SELECT2 | |
\*------------------------------------*/ | |
.select2-selection--multiple { | |
min-height: $s2bs-input-height-base; | |
padding: 0; | |
height: auto; | |
.select2-selection__rendered { | |
box-sizing: border-box; | |
display: block; | |
line-height: $s2bs-line-height-base; | |
list-style: none; | |
margin: 0; | |
overflow: hidden; | |
padding: 0; | |
width: 100%; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
.select2-selection__placeholder { | |
color: $s2bs-input-color-placeholder; | |
float: left; | |
margin-top: 5px; | |
} | |
/** | |
* Make Multi Select2's choices match Bootstrap 3's default button styles. | |
*/ | |
.select2-selection__choice { | |
color: $s2bs-btn-default-color; | |
background: $s2bs-btn-default-bg; | |
border: 1px solid $s2bs-btn-default-border; | |
cursor: default; | |
float: left; | |
margin: -($s2bs-padding-base-vertical - 1) 0 0 $s2bs-padding-base-horizontal/2; | |
padding: 0 $s2bs-padding-base-vertical; | |
@include border-radius($s2bs-selection-choice-border-radius); | |
} | |
/** | |
* Minus 2px borders. | |
*/ | |
.select2-search--inline { | |
.select2-search__field { | |
background: transparent; | |
padding: 0 $s2bs-padding-base-horizontal; | |
height: $s2bs-input-height-base; | |
line-height: $s2bs-line-height-base; | |
margin-top: 0; | |
min-width: 5em; | |
} | |
} | |
.select2-selection__choice__remove { | |
color: $s2bs-remove-choice-color; | |
cursor: pointer; | |
display: inline-block; | |
font-weight: bold; | |
margin-right: $s2bs-padding-base-vertical / 2; | |
&:hover { | |
color: $s2bs-remove-choice-hover-color; | |
} | |
} | |
/** | |
* Clear the selection. | |
*/ | |
.select2-selection__clear { | |
margin-top: $s2bs-padding-base-vertical; | |
} | |
} | |
/** | |
* 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 */ | |
.select2-selection--single.input-sm, | |
.input-group-sm & .select2-selection--single, | |
.form-group-sm & .select2-selection--single { | |
@include border-radius($s2bs-border-radius-small); | |
font-size: $s2bs-font-size-small; | |
height: $s2bs-input-height-small; | |
line-height: $s2bs-line-height-small; | |
padding: $s2bs-padding-small-vertical $s2bs-padding-small-horizontal + $s2bs-caret-width-base*3 $s2bs-padding-small-vertical $s2bs-padding-small-horizontal; | |
/* 2 */ | |
.select2-selection__arrow b { | |
margin-left: -$s2bs-padding-small-vertical; | |
} | |
} | |
.select2-selection--multiple.input-sm, | |
.input-group-sm & .select2-selection--multiple, | |
.form-group-sm & .select2-selection--multiple { | |
min-height: $s2bs-input-height-small; | |
@include border-radius($s2bs-border-radius-small); | |
.select2-selection__choice { | |
font-size: $s2bs-font-size-small; | |
line-height: $s2bs-line-height-small; | |
margin: ($s2bs-padding-small-vertical) 0 0 $s2bs-padding-small-horizontal/2; | |
padding: 0 $s2bs-padding-small-vertical; | |
} | |
.select2-search--inline .select2-search__field { | |
padding: 0 $s2bs-padding-small-horizontal; | |
font-size: $s2bs-font-size-small; | |
height: $s2bs-input-height-small - 2; | |
line-height: $s2bs-line-height-small; | |
} | |
.select2-selection__clear { | |
margin-top: $s2bs-padding-small-vertical; | |
} | |
} | |
.select2-selection--single.input-lg, | |
.input-group-lg & .select2-selection--single, | |
.form-group-lg & .select2-selection--single { | |
@include border-radius($s2bs-border-radius-large); | |
font-size: $s2bs-font-size-large; | |
height: $s2bs-input-height-large; | |
line-height: $s2bs-line-height-large; | |
padding: $s2bs-padding-large-vertical $s2bs-padding-large-horizontal + $s2bs-caret-width-large*3 $s2bs-padding-large-vertical $s2bs-padding-large-horizontal; | |
/* 1 */ | |
.select2-selection__arrow { | |
width: $s2bs-caret-width-large; | |
b { | |
border-width: $s2bs-caret-width-large $s2bs-caret-width-large 0 $s2bs-caret-width-large; | |
margin-left: -$s2bs-caret-width-large; | |
margin-left: -$s2bs-padding-large-vertical; | |
margin-top: -$s2bs-caret-width-large/2; | |
} | |
} | |
} | |
.select2-selection--multiple.input-lg, | |
.input-group-lg & .select2-selection--multiple, | |
.form-group-lg & .select2-selection--multiple { | |
min-height: $s2bs-input-height-large; | |
@include border-radius($s2bs-border-radius-large); | |
.select2-selection__choice { | |
font-size: $s2bs-font-size-large; | |
line-height: $s2bs-line-height-large; | |
@include border-radius($s2bs-selection-choice-border-radius); | |
margin: ($s2bs-padding-large-vertical - 1) 0 0 $s2bs-padding-large-horizontal/2; | |
padding: 0 $s2bs-padding-large-vertical; | |
} | |
.select2-search--inline .select2-search__field { | |
padding: 0 $s2bs-padding-large-horizontal; | |
font-size: $s2bs-font-size-large; | |
height: $s2bs-input-height-large - 2; | |
line-height: $s2bs-line-height-large; | |
} | |
.select2-selection__clear { | |
margin-top: $s2bs-padding-large-vertical; | |
} | |
} | |
.select2-selection.input-lg.select2-container--open { | |
@include dropdown-arrow; | |
} | |
.input-group-lg & .select2-selection { | |
&.select2-container--open { | |
@include dropdown-arrow; | |
} | |
} | |
/*------------------------------------*\ | |
#RTL SUPPORT | |
\*------------------------------------*/ | |
&[dir="rtl"] { | |
/** | |
* Single Select2 | |
* | |
* 1. Makes sure that .select2-selection__placeholder is positioned | |
* correctly. | |
*/ | |
.select2-selection--single { | |
padding-left: $s2bs-padding-base-horizontal + $s2bs-caret-width-base*3; | |
padding-right: $s2bs-padding-base-horizontal; | |
.select2-selection__rendered { | |
padding-right: 0; | |
padding-left: 0; | |
text-align: right; /* 1 */ | |
} | |
.select2-selection__clear { | |
float: left; | |
} | |
.select2-selection__arrow { | |
left: $s2bs-padding-base-horizontal; | |
right: auto; | |
b { | |
margin-left: 0; | |
} | |
} | |
} | |
/** | |
* Multiple Select2 | |
*/ | |
.select2-selection--multiple { | |
.select2-selection__choice, | |
.select2-selection__placeholder, | |
.select2-search--inline { | |
float: right; | |
} | |
.select2-selection__choice { | |
margin-left: 0; | |
margin-right: $s2bs-padding-base-horizontal/2; | |
} | |
.select2-selection__choice__remove { | |
margin-left: 2px; | |
margin-right: auto; | |
} | |
} | |
} | |
} | |
/*------------------------------------*\ | |
#ADDITIONAL GOODIES | |
\*------------------------------------*/ | |
/** | |
* Address Bootstrap's validation states | |
* | |
* If a Select2 widget parent has one of Bootstrap's validation state modifier | |
* classes, adjust Select2's border colors and focus states accordingly. | |
* You may apply said classes to the Select2 dropdown (body > .select2-container) | |
* via JavaScript match Bootstraps' to make its styles match. | |
* | |
* @see http://getbootstrap.com/css/#forms-control-validation | |
*/ | |
.has-warning { | |
@include validation-state-focus($state-warning-text); | |
} | |
.has-error { | |
@include validation-state-focus($state-danger-text); | |
} | |
.has-success { | |
@include validation-state-focus($state-success-text); | |
} | |
/** | |
* Select2 widgets in Bootstrap Input Groups | |
* | |
* @see http://getbootstrap.com/components/#input-groups | |
* @see https://github.com/twbs/bootstrap/blob/master/less/input-groups.less | |
*/ | |
/** | |
* Reset rounded corners | |
*/ | |
.input-group > .select2-hidden-accessible { | |
&:first-child + .select2-container--bootstrap > .selection > .select2-selection, | |
&:first-child + .select2-container--bootstrap > .selection > .select2-selection.form-control { | |
@include border-right-radius(0); | |
} | |
&:not(:first-child) + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection, | |
&:not(:first-child) + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection.form-control { | |
@include border-radius(0); | |
} | |
&:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection, | |
&:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection.form-control { | |
@include border-left-radius(0); | |
} | |
} | |
.input-group > .select2-container--bootstrap { | |
display: table; | |
table-layout: fixed; | |
position: relative; | |
z-index: 2; | |
width: 100%; | |
margin-bottom: 0; | |
> .selection > .select2-selection.form-control { | |
float: none; | |
} | |
/** | |
* Adjust z-index like Bootstrap does to show the focus-box-shadow | |
* above appended buttons in .input-group and .form-group. | |
*/ | |
&.select2-container--open, /* .form-group */ | |
&.select2-container--focus /* .input-group */ { | |
z-index: 3; | |
} | |
/** | |
* Adjust alignment of Bootstrap buttons in Bootstrap Input Groups to address | |
* Multi Select2's height which - depending on how many elements have been selected - | |
* may grow taller than its initial size. | |
* | |
* @see http://getbootstrap.com/components/#input-groups | |
*/ | |
&, | |
.input-group-btn, | |
.input-group-btn .btn { | |
vertical-align: top; | |
} | |
} | |
/** | |
* Temporary fix for https://github.com/select2/select2-bootstrap-theme/issues/9 | |
* | |
* Provides `!important` for certain properties of the class applied to the | |
* original `<select>` element to hide it. | |
* | |
* @see https://github.com/select2/select2/pull/3301 | |
* @see https://github.com/fk/select2/commit/31830c7b32cb3d8e1b12d5b434dee40a6e753ada | |
*/ | |
.form-control.select2-hidden-accessible { | |
position: absolute !important; | |
width: 1px !important; | |
} | |
/** | |
* Display override for inline forms | |
*/ | |
.form-inline .select2-container--bootstrap { | |
@media (min-width: $s2bs-screen-size-sm) { | |
display: inline-block; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Apologies, I had no notification you had commented.
I've made a few changes to this, after realising it needs to override the border-radius mixins from Bootstrap, to explicitly set border-radius to 0 if $enable-rounded == false.
I've compiled the css, but this is based on $enable-rounded being false (so no border-radius). If you want rounded corners, either compile the scss yourself or modify thr border-radius properties to match what you want.
Anyway, the css file is here:
https://gist.github.com/DaleMckeown/ce5a8d32bd0c1d44462090eb12c554cc