diff --git a/src/less/selectize.bootstrap2.less b/src/less/selectize.bootstrap2.less index 8b3feea62..41827236f 100644 --- a/src/less/selectize.bootstrap2.less +++ b/src/less/selectize.bootstrap2.less @@ -32,6 +32,7 @@ @selectize-shadow-input: none; @selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15); @selectize-border-radius: @inputBorderRadius; +@selectize-border-radius-item: @selectize-border-radius - 1px; @selectize-padding-x: 10px; @selectize-padding-y: 7px; @@ -134,7 +135,7 @@ .gradientBar(@btnBackground, @btnBackgroundHighlight, @selectize-color-item-text, none); *background-color: @selectize-color-item; border: @selectize-width-item-border solid @selectize-color-item-border; - .border-radius(@baseBorderRadius); + .border-radius(@selectize-border-radius-item); .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); &.active { .box-shadow(~"0 1px 2px rgba(0,0,0,.05)"); diff --git a/src/less/selectize.bootstrap3.less b/src/less/selectize.bootstrap3.less index d9cd73276..a79f82190 100644 --- a/src/less/selectize.bootstrap3.less +++ b/src/less/selectize.bootstrap3.less @@ -31,6 +31,7 @@ @selectize-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@selectize-color-input-error, 20%); @selectize-border: 1px solid @input-border; @selectize-border-radius: @input-border-radius; +@selectize-border-radius-item: @selectize-border-radius - 1px; @selectize-width-item-border: 0; @selectize-padding-x: @padding-base-horizontal; @@ -119,7 +120,7 @@ padding-right: @selectize-padding-x - @selectize-padding-item-x; } .selectize-input > div { - .selectize-border-radius(@selectize-border-radius - 1px); + .selectize-border-radius(@selectize-border-radius-item); } } } diff --git a/src/less/selectize.less b/src/less/selectize.less index 76e8c378d..473ab9383 100644 --- a/src/less/selectize.less +++ b/src/less/selectize.less @@ -36,6 +36,7 @@ @selectize-border: 1px solid @selectize-color-border; @selectize-dropdown-border: 1px solid @selectize-color-dropdown-border; @selectize-border-radius: 3px; +@selectize-border-radius-item: @selectize-border-radius - 1px; @selectize-width-item-border: 0; @selectize-max-height-dropdown: 200px; diff --git a/src/plugins/remove_button/plugin.less b/src/plugins/remove_button/plugin.less index fd11abd25..f1c506ea8 100644 --- a/src/plugins/remove_button/plugin.less +++ b/src/plugins/remove_button/plugin.less @@ -19,7 +19,7 @@ display: inline-block; padding: @selectize-padding-item-y 0 0 0; border-left: 1px solid @selectize-color-item-border; - .selectize-border-radius(0 @selectize-border-radius @selectize-border-radius 0); + .selectize-border-radius(0 @selectize-border-radius-item @selectize-border-radius-item 0); .selectize-box-sizing(border-box); } [data-value] .remove:hover { diff --git a/src/plugins/remove_button/plugin.scss b/src/plugins/remove_button/plugin.scss index 6e8d24e62..e60bd8208 100644 --- a/src/plugins/remove_button/plugin.scss +++ b/src/plugins/remove_button/plugin.scss @@ -12,7 +12,7 @@ display: inline-block; padding: $select-padding-item-y $select-padding-item-x; border-left: 1px solid $select-color-item-border; - border-radius: 0 2px 2px 0; + border-radius: 0 $select-border-radius-item $select-border-radius-item 0; box-sizing: border-box; margin-left: $select-padding-item-x; } diff --git a/src/scss/selectize.bootstrap3.scss b/src/scss/selectize.bootstrap3.scss index 180079107..5021ceadb 100644 --- a/src/scss/selectize.bootstrap3.scss +++ b/src/scss/selectize.bootstrap3.scss @@ -33,6 +33,7 @@ $select-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px lighten($select-color-input-error, 20%); $select-border: 1px solid $input-border; $select-border-radius: $input-border-radius; +$select-border-radius-item: $select-border-radius - 1px; $select-width-item-border: 0px; $select-padding-x: $padding-base-horizontal; @@ -123,7 +124,7 @@ $select-arrow-offset: $select-padding-x + 5px; padding-right: $select-padding-x - $select-padding-item-x; } .#{$selectize}-input > div { - border-radius: $select-border-radius - 1px; + border-radius: $select-border-radius-item; } } } diff --git a/src/scss/selectize.bootstrap4.scss b/src/scss/selectize.bootstrap4.scss index 0c7fa1c3b..519825ac6 100644 --- a/src/scss/selectize.bootstrap4.scss +++ b/src/scss/selectize.bootstrap4.scss @@ -42,6 +42,7 @@ $select-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px lighten($select-color-input-error, 20%) !default; $select-border: 1px solid $input-border-color !default; $select-border-radius: $input-border-radius !default; +$select-border-radius-item: calc(#{$select-border-radius} - 1px); $select-width-item-border: 0px !default; $select-padding-x: $input-btn-padding-x !default; @@ -153,7 +154,7 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default; padding-right: calc(#{$select-padding-x} - #{$select-padding-item-x}); } .#{$selectize}-input > div { - border-radius: calc(#{$select-border-radius} - 1px); + border-radius: $select-border-radius-item; } } } diff --git a/src/scss/selectize.bootstrap5.scss b/src/scss/selectize.bootstrap5.scss index ac37fff51..a449f4a91 100644 --- a/src/scss/selectize.bootstrap5.scss +++ b/src/scss/selectize.bootstrap5.scss @@ -42,6 +42,7 @@ $select-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px lighten($select-color-input-error, 20%) !default; $select-border: 1px solid $input-border-color !default; $select-border-radius: $input-border-radius !default; +$select-border-radius-item: calc(#{$select-border-radius} - 1px); $select-width-item-border: 0px !default; $select-padding-x: $input-btn-padding-x !default; @@ -153,7 +154,7 @@ $select-arrow-offset: calc(#{$select-padding-x} + 5px) !default; padding-right: calc(#{$select-padding-x} - #{$select-padding-item-x}); } .#{$selectize}-input > div { - border-radius: calc(#{$select-border-radius} - 1px); + border-radius: $select-border-radius-item; } } } diff --git a/src/scss/selectize.scss b/src/scss/selectize.scss index afda72426..917caa84b 100644 --- a/src/scss/selectize.scss +++ b/src/scss/selectize.scss @@ -43,6 +43,7 @@ $select-shadow-input-focus: inset 0 1px 2px rgba(0, 0, 0, 0.15) !default; $select-border: 1px solid $select-color-border !default; $select-dropdown-border: 1px solid $select-color-dropdown-border !default; $select-border-radius: 3px !default; +$select-border-radius-item: calc(#{$select-border-radius} - 1px); $select-width-item-border: 0px !default; $select-max-height-dropdown: 200px !default;