diff --git a/dist/select2-bootstrap4.css b/dist/select2-bootstrap4.css index 2ede516..408b5c2 100644 --- a/dist/select2-bootstrap4.css +++ b/dist/select2-bootstrap4.css @@ -55,10 +55,18 @@ select.is-invalid ~ .select2-container--bootstrap4 .select2-selection, form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection { border-color: #dc3545; } + select.is-invalid ~ .select2-container--bootstrap4 .select2-selection:focus, + form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection:focus { + border-color: #dc3545; + box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } select.is-valid ~ .select2-container--bootstrap4 .select2-selection, form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection { border-color: #28a745; } + select.is-valid ~ .select2-container--bootstrap4 .select2-selection:focus, + form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection:focus { + border-color: #28a745; + box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } .select2-container--bootstrap4 .select2-dropdown { border-color: #ced4da; diff --git a/dist/select2-bootstrap4.min.css b/dist/select2-bootstrap4.min.css index 2cb962d..0faff8e 100644 --- a/dist/select2-bootstrap4.min.css +++ b/dist/select2-bootstrap4.min.css @@ -1,2 +1,2 @@ -.select2-container{display:block}.select2-container *:focus{outline:0}.input-group .select2-container--bootstrap4{-ms-flex-positive:1;flex-grow:1}.input-group-prepend ~ .select2-container--bootstrap4 .select2-selection{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.select2-container--bootstrap4:not(:last-child) .select2-selection{border-top-right-radius:0;border-bottom-right-radius:0}.select2-container--bootstrap4 .select2-selection{width:100%;min-height:calc(1.5em + .75rem + 2px);padding:.375rem 1.75rem .375rem .75rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#495057;vertical-align:middle;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.select2-container--bootstrap4 .select2-selection{transition:none}}.select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#80bdff;box-shadow:0 0 0 .2rem rgba(0,123,255,0.25)}.select2-container--bootstrap4.select2-container--open.select2-container--above .select2-selection{border-top-left-radius:0;border-top-right-radius:0}.select2-container--bootstrap4.select2-container--open.select2-container--below .select2-selection{border-bottom-right-radius:0;border-bottom-left-radius:0}.select2-container--bootstrap4.select2-container--disabled .select2-selection,.select2-container--bootstrap4.select2-container--disabled .select2-search__field{cursor:not-allowed;background-color:#e9ecef;border-color:#ced4da;box-shadow:none}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection{border-color:#dc3545}select.is-valid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection{border-color:#28a745}.select2-container--bootstrap4 .select2-dropdown{border-color:#ced4da;border-radius:0}.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.select2-container--bootstrap4 .select2-results__option{padding:.375rem .75rem}.select2-container--bootstrap4 .select2-results__option--selected{color:#212529;background-color:#e9ecef}.select2-container--bootstrap4 .select2-results__option--disabled{color:#6c757d}.select2-container--bootstrap4 .select2-results__option--highlighted{color:#fff;background-color:#007bff}.select2-container--bootstrap4 .select2-results__option--group{padding:0}.select2-container--bootstrap4 .select2-results__option--group .select2-results__options--nested .select2-results__option{padding-left:.75rem}.select2-container--bootstrap4 .select2-results>.select2-results__options{max-height:15em;overflow-y:auto}.select2-container--bootstrap4 .select2-results__group{display:list-item;padding:.375rem .375rem;color:#6c757d}.select2-container--bootstrap4 .select2-selection__clear{float:right;width:1em;height:1em;padding:0;margin:.25em 0 0;font-weight:700;line-height:.75em;color:#495057;background:#e6e6e6 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'%3e%3cpath fill='%23495057' d='M1 12l4-4-4-4 3-3 4 4 4-4 3 3-4 4 4 4-3 3-4-4-4 4z'/%3e%3c/svg%3e") center no-repeat !important;border-radius:100%}.select2-container--bootstrap4 .select2-selection__clear span{display:none}.select2-container--bootstrap4 .select2-selection__clear:hover{background-color:#d9d9d9 !important}.select2-container--bootstrap4 .select2-results__message{color:#6c757d}.select2-container--bootstrap4 .select2-selection--single{background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat}.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{color:#6c757d}.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{padding:0;color:#495057}.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field{padding:.375rem .75rem;color:#495057;border:1px solid #ced4da;border-radius:.25rem}.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,0.25)}.select2-container--bootstrap4 .select2-selection--multiple{padding:0 .75rem}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered{margin:0}.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline{display:inline-block}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{position:relative;display:inline-block;padding:0 5px 0 21px;margin:.375rem .375rem .375rem 0;color:#fff;vertical-align:top;cursor:pointer;background-color:#6c757d;border-radius:.2rem}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__display{padding:0 5px}.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field{height:calc(1.5em + .75rem);padding-top:.375rem;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5;color:#495057}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove{position:absolute;top:0;left:0;padding:0 5px;margin:0;font-weight:700;color:rgba(255,255,255,0.75);cursor:pointer;background:none;border:none;border-right:1px solid #a1a8ae}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover{color:rgba(255,255,255,0.85)}.select2-container--bootstrap4 .select2-selection--multiple.select2-selection--clearable{padding-right:32px}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{position:absolute;top:.375rem;right:.75rem}.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice{padding-left:5px;cursor:not-allowed}.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove{display:none} +.select2-container{display:block}.select2-container *:focus{outline:0}.input-group .select2-container--bootstrap4{-ms-flex-positive:1;flex-grow:1}.input-group-prepend ~ .select2-container--bootstrap4 .select2-selection{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.select2-container--bootstrap4:not(:last-child) .select2-selection{border-top-right-radius:0;border-bottom-right-radius:0}.select2-container--bootstrap4 .select2-selection{width:100%;min-height:calc(1.5em + .75rem + 2px);padding:.375rem 1.75rem .375rem .75rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#495057;vertical-align:middle;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;transition:background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out}@media (prefers-reduced-motion: reduce){.select2-container--bootstrap4 .select2-selection{transition:none}}.select2-container--bootstrap4.select2-container--focus .select2-selection{border-color:#80bdff;box-shadow:0 0 0 .2rem rgba(0,123,255,0.25)}.select2-container--bootstrap4.select2-container--open.select2-container--above .select2-selection{border-top-left-radius:0;border-top-right-radius:0}.select2-container--bootstrap4.select2-container--open.select2-container--below .select2-selection{border-bottom-right-radius:0;border-bottom-left-radius:0}.select2-container--bootstrap4.select2-container--disabled .select2-selection,.select2-container--bootstrap4.select2-container--disabled .select2-search__field{cursor:not-allowed;background-color:#e9ecef;border-color:#ced4da;box-shadow:none}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection{border-color:#dc3545}select.is-invalid ~ .select2-container--bootstrap4 .select2-selection:focus,form.was-validated select:invalid ~ .select2-container--bootstrap4 .select2-selection:focus{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,0.25)}select.is-valid ~ .select2-container--bootstrap4 .select2-selection,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection{border-color:#28a745}select.is-valid ~ .select2-container--bootstrap4 .select2-selection:focus,form.was-validated select:valid ~ .select2-container--bootstrap4 .select2-selection:focus{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(220,53,69,0.25)}.select2-container--bootstrap4 .select2-dropdown{border-color:#ced4da;border-radius:0}.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--below{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.select2-container--bootstrap4 .select2-results__option{padding:.375rem .75rem}.select2-container--bootstrap4 .select2-results__option--selected{color:#212529;background-color:#e9ecef}.select2-container--bootstrap4 .select2-results__option--disabled{color:#6c757d}.select2-container--bootstrap4 .select2-results__option--highlighted{color:#fff;background-color:#007bff}.select2-container--bootstrap4 .select2-results__option--group{padding:0}.select2-container--bootstrap4 .select2-results__option--group .select2-results__options--nested .select2-results__option{padding-left:.75rem}.select2-container--bootstrap4 .select2-results>.select2-results__options{max-height:15em;overflow-y:auto}.select2-container--bootstrap4 .select2-results__group{display:list-item;padding:.375rem .375rem;color:#6c757d}.select2-container--bootstrap4 .select2-selection__clear{float:right;width:1em;height:1em;padding:0;margin:.25em 0 0;font-weight:700;line-height:.75em;color:#495057;background:#e6e6e6 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'%3e%3cpath fill='%23495057' d='M1 12l4-4-4-4 3-3 4 4 4-4 3 3-4 4 4 4-3 3-4-4-4 4z'/%3e%3c/svg%3e") center no-repeat !important;border-radius:100%}.select2-container--bootstrap4 .select2-selection__clear span{display:none}.select2-container--bootstrap4 .select2-selection__clear:hover{background-color:#d9d9d9 !important}.select2-container--bootstrap4 .select2-results__message{color:#6c757d}.select2-container--bootstrap4 .select2-selection--single{background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right .75rem center/8px 10px no-repeat}.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{color:#6c757d}.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{padding:0;color:#495057}.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field{padding:.375rem .75rem;color:#495057;border:1px solid #ced4da;border-radius:.25rem}.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,0.25)}.select2-container--bootstrap4 .select2-selection--multiple{padding:0 .75rem}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered{margin:0}.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline{display:inline-block}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice{position:relative;display:inline-block;padding:0 5px 0 21px;margin:.375rem .375rem .375rem 0;color:#fff;vertical-align:top;cursor:pointer;background-color:#6c757d;border-radius:.2rem}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__display{padding:0 5px}.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field{height:calc(1.5em + .75rem);padding-top:.375rem;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5;color:#495057}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove{position:absolute;top:0;left:0;padding:0 5px;margin:0;font-weight:700;color:rgba(255,255,255,0.75);cursor:pointer;background:none;border:none;border-right:1px solid #a1a8ae}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover{color:rgba(255,255,255,0.85)}.select2-container--bootstrap4 .select2-selection--multiple.select2-selection--clearable{padding-right:32px}.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__clear{position:absolute;top:.375rem;right:.75rem}.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice{padding-left:5px;cursor:not-allowed}.select2-container--bootstrap4.select2-container--disabled .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove{display:none} diff --git a/src/_layout.scss b/src/_layout.scss index f04897e..7aa83eb 100644 --- a/src/_layout.scss +++ b/src/_layout.scss @@ -1,11 +1,3 @@ -$s2bs4-selection-clear-icon: url("data:image/svg+xml,") !default; - -// `font-family` fallback. This is needed because `$custom-select-font-family` -// defaults to null, but this theme needs an existing value to override -// Select2's `font-family: sans-serif` rule -$s2bs4-font-family: $custom-select-font-family !default; -$s2bs4-font-family: $font-family-base !default; - // basic .select2-container { display: block; @@ -36,25 +28,25 @@ $s2bs4-font-family: $font-family-base !default; // input box .select2-selection { width: 100%; - min-height: $custom-select-height; - padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; - font-family: $s2bs4-font-family; - @include font-size($custom-select-font-size); - font-weight: $custom-select-font-weight; - line-height: $custom-select-line-height; - color: $custom-select-color; + min-height: $select2-bootstrap4-height; + padding: $select2-bootstrap4-padding-y ($select2-bootstrap4-padding-x + $select2-bootstrap4-indicator-padding) $select2-bootstrap4-padding-y $select2-bootstrap4-padding-x; + font-family: $select2-bootstrap4-font-family; + @include font-size($select2-bootstrap4-font-size); + font-weight: $select2-bootstrap4-font-weight; + line-height: $select2-bootstrap4-line-height; + color: $select2-bootstrap4-color; vertical-align: middle; - background-color: $custom-select-bg; - border: $custom-select-border-width solid $custom-select-border-color; - @include border-radius($custom-select-border-radius, 0); - @include box-shadow($custom-select-box-shadow); - @include transition($custom-forms-transition); + background-color: $select2-bootstrap4-bg; + border: $select2-bootstrap4-border-width solid $select2-bootstrap4-border-color; + @include border-radius($select2-bootstrap4-border-radius, 0); + @include box-shadow($select2-bootstrap4-box-shadow); + @include transition($select2-bootstrap4-transition); } &.select2-container--focus { .select2-selection { - border-color: $custom-select-focus-border-color; - box-shadow: $custom-select-focus-box-shadow; + border-color: $select2-bootstrap4-focus-border-color; + box-shadow: $select2-bootstrap4-focus-box-shadow; } } @@ -76,8 +68,8 @@ $s2bs4-font-family: $font-family-base !default; .select2-selection, .select2-search__field { cursor: not-allowed; - background-color: $custom-select-disabled-bg; - border-color: $custom-select-border-color; + background-color: $select2-bootstrap4-disabled-bg; + border-color: $select2-bootstrap4-border-color; box-shadow: none; } } @@ -87,50 +79,60 @@ $s2bs4-font-family: $font-family-base !default; select.is-invalid ~ & .select2-selection, form.was-validated select:invalid ~ & .select2-selection { border-color: $danger; + + &:focus { + border-color: $danger; + box-shadow: 0 0 0 $select2-bootstrap4-focus-width rgba($danger, .25); + } } select.is-valid ~ & .select2-selection, form.was-validated select:valid ~ & .select2-selection { border-color: $success; + + &:focus { + border-color: $success; + box-shadow: 0 0 0 $select2-bootstrap4-focus-width rgba($danger, .25); + } } // stylelint-enable selector-no-qualifying-type .select2-dropdown { - border-color: $custom-select-border-color; + border-color: $select2-bootstrap4-border-color; border-radius: 0; // overload select2.css &.select2-dropdown--below { - @include border-bottom-radius($custom-select-border-radius); + @include border-bottom-radius($select2-bootstrap4-border-radius); } &.select2-dropdown--above { - @include border-top-radius($custom-select-border-radius); + @include border-top-radius($select2-bootstrap4-border-radius); } } .select2-results__option { - padding: $custom-select-padding-y $custom-select-padding-x; + padding: $select2-bootstrap4-padding-y $select2-bootstrap4-padding-x; &--selected { - color: color-yiq($custom-select-disabled-bg); - background-color: $custom-select-disabled-bg; + color: color-yiq($select2-bootstrap4-disabled-bg); + background-color: $select2-bootstrap4-disabled-bg; } &--disabled { - color: $custom-select-disabled-color; + color: $select2-bootstrap4-disabled-color; } // hover &--highlighted { - color: color-yiq($primary); - background-color: $primary; + color: color-yiq($select2-bootstrap4-highlighted-bg); + background-color: $select2-bootstrap4-highlighted-bg; } &--group { padding: 0; .select2-results__options--nested .select2-results__option { - padding-left: $custom-select-padding-x; + padding-left: $select2-bootstrap4-padding-x; } } } @@ -143,8 +145,8 @@ $s2bs4-font-family: $font-family-base !default; .select2-results__group { display: list-item; - padding: $custom-select-padding-y $custom-select-padding-x / 2; - color: $secondary; + padding: $select2-bootstrap4-padding-y $select2-bootstrap4-padding-x / 2; + color: $select2-bootstrap4-disabled-color; } // clear all button @@ -153,11 +155,11 @@ $s2bs4-font-family: $font-family-base !default; width: 1em; height: 1em; padding: 0; - margin: subtract($custom-select-line-height * 1em, 1em) / 2 0 0; + margin: subtract($select2-bootstrap4-line-height * 1em, 1em) / 2 0 0; font-weight: 700; line-height: (12em / 16); - color: $custom-select-color; - background: darken($custom-select-bg, 10%) escape-svg($s2bs4-selection-clear-icon) center no-repeat !important; // stylelint-disable-line declaration-no-important + color: $select2-bootstrap4-color; + background: darken($select2-bootstrap4-bg, 10%) escape-svg($select2-bootstrap4-selection-clear-icon) center no-repeat !important; // stylelint-disable-line declaration-no-important border-radius: 100%; // hide default × entity @@ -166,7 +168,7 @@ $s2bs4-font-family: $font-family-base !default; } &:hover { - background-color: darken($custom-select-bg, 15%) !important; // stylelint-disable-line declaration-no-important + background-color: darken($select2-bootstrap4-bg, 15%) !important; // stylelint-disable-line declaration-no-important } } diff --git a/src/_multiple.scss b/src/_multiple.scss index 01d5925..5a32dd1 100644 --- a/src/_multiple.scss +++ b/src/_multiple.scss @@ -1,8 +1,6 @@ -$s2bs4-selection-choice-bg: $secondary !default; - .select2-container--bootstrap4 { .select2-selection--multiple { - padding: 0 $custom-select-padding-x; + padding: 0 $select2-bootstrap4-padding-x; // input box .select2-selection__rendered { @@ -18,12 +16,12 @@ $s2bs4-selection-choice-bg: $secondary !default; position: relative; display: inline-block; padding: 0 5px 0 21px; - margin: $custom-select-padding-y $custom-select-padding-x / 2 $custom-select-padding-y 0; - color: color-yiq($s2bs4-selection-choice-bg); + margin: $select2-bootstrap4-padding-y $select2-bootstrap4-padding-x / 2 $select2-bootstrap4-padding-y 0; + color: color-yiq($select2-bootstrap4-selection-choice-bg); vertical-align: top; cursor: pointer; - background-color: $s2bs4-selection-choice-bg; - @include border-radius($border-radius-sm); + background-color: $select2-bootstrap4-selection-choice-bg; + @include border-radius($select2-bootstrap4-selection-choice-border-radius); } .select2-selection__choice__display { @@ -31,12 +29,12 @@ $s2bs4-selection-choice-bg: $secondary !default; } .select2-search__field { - height: add($custom-select-line-height * 1em, $custom-select-padding-y * 2); - padding-top: $custom-select-padding-y; + height: add($select2-bootstrap4-line-height * 1em, $select2-bootstrap4-padding-y * 2); + padding-top: $select2-bootstrap4-padding-y; margin: 0; - font-family: $s2bs4-font-family; - line-height: $custom-select-line-height; - color: $custom-select-color; + font-family: $select2-bootstrap4-font-family; + line-height: $select2-bootstrap4-line-height; + color: $select2-bootstrap4-color; } // x button of each selected item in input box @@ -47,14 +45,14 @@ $s2bs4-selection-choice-bg: $secondary !default; padding: 0 5px; margin: 0; font-weight: 700; - color: fade-out(color-yiq($s2bs4-selection-choice-bg), .25); + color: fade-out(color-yiq($select2-bootstrap4-selection-choice-bg), .25); cursor: pointer; background: none; border: none; - border-right: 1px solid lighten($s2bs4-selection-choice-bg, 20%); + border-right: 1px solid lighten($select2-bootstrap4-selection-choice-bg, 20%); &:hover { - color: fade-out(color-yiq($s2bs4-selection-choice-bg), .15); + color: fade-out(color-yiq($select2-bootstrap4-selection-choice-bg), .15); } } @@ -64,8 +62,8 @@ $s2bs4-selection-choice-bg: $secondary !default; .select2-selection__clear { position: absolute; - top: $custom-select-padding-y; - right: $custom-select-padding-x; + top: $select2-bootstrap4-padding-y; + right: $select2-bootstrap4-padding-x; } } diff --git a/src/_single.scss b/src/_single.scss index 8395bb0..1020196 100644 --- a/src/_single.scss +++ b/src/_single.scss @@ -1,25 +1,25 @@ .select2-container--bootstrap4 { .select2-selection--single { - background: $custom-select-bg $custom-select-background; + background: $select2-bootstrap4-bg $select2-bootstrap4-background; .select2-selection__placeholder { - color: $input-placeholder-color; + color: $select2-bootstrap4-placeholder-color; } // selected item .select2-selection__rendered { padding: 0; - color: $custom-select-color; + color: $select2-bootstrap4-color; } } // search box .select2-search--dropdown { .select2-search__field { - padding: $custom-select-padding-y $custom-select-padding-x; - color: $custom-select-color; - border: $custom-select-border-width solid $custom-select-border-color; - @include border-radius($custom-select-border-radius); + padding: $select2-bootstrap4-padding-y $select2-bootstrap4-padding-x; + color: $select2-bootstrap4-color; + border: $select2-bootstrap4-border-width solid $select2-bootstrap4-border-color; + @include border-radius($select2-bootstrap4-border-radius); @include form-control-focus(true); } } diff --git a/src/_variables.scss b/src/_variables.scss new file mode 100644 index 0000000..cc9ffd9 --- /dev/null +++ b/src/_variables.scss @@ -0,0 +1,41 @@ +// Bootstrap variables +$select2-bootstrap4-placeholder-color: $input-placeholder-color !default; + +$select2-bootstrap4-transition: $custom-forms-transition !default; + +$select2-bootstrap4-focus-border-color: $custom-select-focus-border-color !default; +$select2-bootstrap4-focus-width: $custom-select-focus-width !default; +$select2-bootstrap4-focus-box-shadow: $custom-select-focus-box-shadow; + +$select2-bootstrap4-padding-y: $custom-select-padding-y !default; +$select2-bootstrap4-padding-x: $custom-select-padding-x !default; +$select2-bootstrap4-font-family: $custom-select-font-family !default; +$select2-bootstrap4-font-size: $custom-select-font-size !default; +$select2-bootstrap4-height: $custom-select-height !default; +$select2-bootstrap4-indicator-padding: $custom-select-indicator-padding !default; +$select2-bootstrap4-font-weight: $custom-select-font-weight !default; +$select2-bootstrap4-line-height: $custom-select-line-height !default; +$select2-bootstrap4-color: $custom-select-color !default; +$select2-bootstrap4-disabled-color: $custom-select-disabled-color !default; +$select2-bootstrap4-bg: $custom-select-bg !default; +$select2-bootstrap4-disabled-bg: $custom-select-disabled-bg !default; +$select2-bootstrap4-bg-size: $custom-select-bg-size !default; +$select2-bootstrap4-indicator-color: $custom-select-indicator-color !default; +$select2-bootstrap4-indicator: $custom-select-indicator !default; +$select2-bootstrap4-background: $custom-select-background !default; + +$select2-bootstrap4-border-width: $custom-select-border-width !default; +$select2-bootstrap4-border-color: $custom-select-border-color !default; +$select2-bootstrap4-border-radius: $custom-select-border-radius !default; +$select2-bootstrap4-box-shadow: $custom-select-box-shadow !default; + +// Font family fallback. This is needed because `$custom-select-font-family` +// defaults to null, but this theme needs an existing value to override +// Select2's default `font-family: sans-serif` rule +$select2-bootstrap4-font-family: $font-family-base !default; + +// New variables +$select2-bootstrap4-highlighted-bg: $primary !default; +$select2-bootstrap4-selection-choice-bg: $secondary !default; +$select2-bootstrap4-selection-choice-border-radius: $border-radius-sm !default; +$select2-bootstrap4-selection-clear-icon: url("data:image/svg+xml,") !default; diff --git a/src/select2-bootstrap4.scss b/src/select2-bootstrap4.scss index 39e1a3c..86fa2e6 100644 --- a/src/select2-bootstrap4.scss +++ b/src/select2-bootstrap4.scss @@ -1,3 +1,4 @@ +@import "variables"; @import "layout"; @import "single"; @import "multiple";