diff --git a/package.json b/package.json index 7c2d00a..1ca6043 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "Respond.js": "github:scottjehl/Respond#1.4.2", "anchor-js": "^3.2.1", "autoprefixer": "^6.4.0", - "bootstrap": "^3.3.7", + "bootstrap": "^4.0.0-alpha.6", "bootstrap-sass": "^3.3.7", "diff": "^2.2.3", "grunt": "^1.0.1", diff --git a/src/build.scss b/src/build.scss index 68c0007..1a80d48 100755 --- a/src/build.scss +++ b/src/build.scss @@ -1,3 +1,6 @@ -@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables"; -@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins"; +@import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/mixins"; +$caret-width: .3rem; +@import "select2-bootstrap4.vars"; @import "select2-bootstrap.scss"; +@import "select2-bootstrap4.after"; diff --git a/src/select2-bootstrap.scss b/src/select2-bootstrap.scss index 1afafdc..029994a 100755 --- a/src/select2-bootstrap.scss +++ b/src/select2-bootstrap.scss @@ -541,7 +541,7 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in */ /* 1 */ - .select2-selection--single.input-sm, + .select2-selection--single.form-control-sm, .input-group-sm & .select2-selection--single, .form-group-sm & .select2-selection--single { border-radius: $s2bs-border-radius-small; @@ -556,7 +556,7 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in } } - .select2-selection--multiple.input-sm, + .select2-selection--multiple.form-control-sm, .input-group-sm & .select2-selection--multiple, .form-group-sm & .select2-selection--multiple { min-height: $s2bs-input-height-small; @@ -581,7 +581,7 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in } } - .select2-selection--single.input-lg, + .select2-selection--single.form-control-lg, .input-group-lg & .select2-selection--single, .form-group-lg & .select2-selection--single { border-radius: $s2bs-border-radius-large; @@ -603,7 +603,7 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in } } - .select2-selection--multiple.input-lg, + .select2-selection--multiple.form-control-lg, .input-group-lg & .select2-selection--multiple, .form-group-lg & .select2-selection--multiple { min-height: $s2bs-input-height-large; @@ -629,7 +629,7 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in } } - .select2-selection.input-lg.select2-container--open { + .select2-selection.form-control-lg.select2-container--open { @include dropdown-arrow; } diff --git a/src/select2-bootstrap4.after.scss b/src/select2-bootstrap4.after.scss new file mode 100644 index 0000000..85861bb --- /dev/null +++ b/src/select2-bootstrap4.after.scss @@ -0,0 +1,36 @@ +// Import this file after select2 bootstrap theme. Content won't be centered if you don't include this file. +.select2-container--bootstrap { + .select2-selection--multiple { + .select2-selection__choice { + margin-top: calc(#{$s2bs-padding-base-vertical} - 1px); + } + + .select2-search--inline .select2-search__field { + height: $s2bs-input-height-base; + } + } + + .select2-selection--multiple.form-control-sm, + .input-group-sm & .select2-selection--multiple, + .form-group-sm & .select2-selection--multiple { + .select2-selection__choice { + margin-top: calc(#{$s2bs-padding-small-vertical} - 1px); + } + + .select2-search--inline .select2-search__field { + height: $s2bs-input-height-small; + } + } + + .select2-selection--multiple.form-control-lg, + .input-group-lg & .select2-selection--multiple, + .form-group-lg & .select2-selection--multiple { + .select2-selection__choice { + margin-top: calc(#{$s2bs-padding-large-vertical} - 1px) ; + } + + .select2-search--inline .select2-search__field { + height: $s2bs-input-height-large; + } + } +} \ No newline at end of file diff --git a/src/select2-bootstrap4.vars.scss b/src/select2-bootstrap4.vars.scss new file mode 100644 index 0000000..0555f29 --- /dev/null +++ b/src/select2-bootstrap4.vars.scss @@ -0,0 +1,34 @@ +// Overrides of Select2 SASS variables to make it work with Bootstrap 4 and match its look. +// Import this BEFORE https://github.com/select2/select2-bootstrap-theme SASS files or SASS compilation will fail +// Since there is no official Bootstrap 4 theme for Select 2 this is a good fallback. + +$screen-sm-min: 576px !default; +$btn-default-color: $btn-secondary-color !default; + +$s2bs-input-border: $input-border-color !default; +$s2bs-clear-selection-hover-color: $btn-secondary-color !default; +$s2bs-remove-choice-hover-color: $btn-secondary-color !default; +$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-secondary-bg !default; +$s2bs-btn-default-border: $btn-secondary-border !default; +$s2bs-caret-width-base: .25rem !default; // 4px +$s2bs-caret-width-large: .3125rem !default; // 5px +$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: $input-line-height !default; +$s2bs-line-height-small: $input-line-height !default; +$s2bs-input-height-base: calc(#{$input-padding-y * 2 + $input-line-height} + #{$border-width * 2}) !default; +$s2bs-input-height-large: calc(#{$input-padding-y-lg * 2 + $input-line-height} + #{$border-width * 2}) !default; +$s2bs-input-height-small: calc(#{$input-padding-y-sm * 2 + $input-line-height} + #{$border-width * 2}) !default; + +$s2bs-selection-choice-border-radius: $border-radius !default; \ No newline at end of file