Merge pull request #43 from apalfrey/sizing-update

Updated sizing to allow for use of Bootstrap sizing classes
apalfrey · Jul 27, 2021 · d63866a · d63866a
2 parents d8e7540 + cc992c4
commit d63866a
Show file tree

Hide file tree

Showing 9 changed files with 642 additions and 216 deletions.
diff --git a/README.md b/README.md
@@ -72,21 +72,33 @@ $("select").select2({
  theme: "bootstrap-5",
 });
 
-// Small
-$("select").select2({
+// Small using Select2 properties
+$("#form-select-sm").select2({
  theme: "bootstrap-5",
  containerCssClass: "select2--small", // For Select2 v4.0
  selectionCssClass: "select2--small", // For Select2 v4.1
  dropdownCssClass: "select2--small",
 });
 
-// Large
+// Small using Bootstrap 5 classes
+$("#form-select-sm").select2({
+ theme: "bootstrap-5",
+ dropdownParent: $("#form-select-sm").parent(), // Required for dropdown styling
+});
+
+// Large using Select2 properties
 $("select").select2({
  theme: "bootstrap-5",
  containerCssClass: "select2--large", // For Select2 v4.0
  selectionCssClass: "select2--large", // For Select2 v4.1
  dropdownCssClass: "select2--large",
 });
+
+// Large using Bootstrap 5 classes
+$("#form-select-lg").select2({
+ theme: "bootstrap-5",
+ dropdownParent: $("#form-select-lg").parent(), // Required for dropdown styling
+});
 ```
 
 ## Building

diff --git a/dist/select2-bootstrap-5-theme.css b/dist/select2-bootstrap-5-theme.css
diff --git a/dist/select2-bootstrap-5-theme.min.css b/dist/select2-bootstrap-5-theme.min.css
diff --git a/dist/select2-bootstrap-5-theme.rtl.css b/dist/select2-bootstrap-5-theme.rtl.css
diff --git a/dist/select2-bootstrap-5-theme.rtl.min.css b/dist/select2-bootstrap-5-theme.rtl.min.css
diff --git a/docs/select2-bootstrap-5-theme.css b/docs/select2-bootstrap-5-theme.css
diff --git a/docs/select2-bootstrap-5-theme.rtl.css b/docs/select2-bootstrap-5-theme.rtl.css
diff --git a/src/_sizing.scss b/src/_sizing.scss
@@ -1,48 +1,47 @@
-// Small
-.select2-container--bootstrap-5 .select2--small {
+@mixin s2bs5-sizing($size-list: $s2bs5-small) {
  // Layout
- &.select2-selection {
- min-height: $s2bs5-height-sm;
- padding: $s2bs5-padding-y-sm $s2bs5-padding-x-sm;
- @include font-size($s2bs5-font-size-sm);
+ .select2-selection {
+ min-height: map-get($size-list, height);
+ padding: map-get($size-list, padding-y) map-get($size-list, padding-x);
+ @include font-size(map-get($size-list, font-size));
  }
 
- &.select2-selection--single,
- &.select2-selection--multiple {
+ .select2-selection--single,
+ .select2-selection--multiple {
  .select2-selection__clear {
- width: $s2bs5-clear-width-sm;
- height: $s2bs5-clear-height-sm;
- padding: $s2bs5-clear-padding-y-sm $s2bs5-clear-padding-x-sm;
- background: $s2bs5-clear-bg-sm;
+ width: map-get($size-list, clear-width);
+ height: map-get($size-list, clear-height);
+ padding: map-get($size-list, clear-padding-y) map-get($size-list, clear-padding-x);
+ background: map-get($size-list, clear-bg);
 
  &:hover {
- background: $s2bs5-clear-hover-bg-sm;
+ background: map-get($size-list, clear-hover-bg);
  }
  }
  }
 
  // Dropdown
- &.select2-dropdown {
+ .select2-dropdown {
  .select2-search {
  .select2-search__field {
- padding: $s2bs5-padding-y-sm $s2bs5-padding-x-sm;
- @include font-size($s2bs5-font-size-sm);
+ padding: map-get($size-list, padding-y) map-get($size-list, padding-x);
+ @include font-size(map-get($size-list, font-size));
  }
  }
 
  .select2-results__options {
  .select2-results__option {
- padding: $s2bs5-item-padding-y-sm $s2bs5-item-padding-x-sm;
- @include font-size($s2bs5-font-size-sm);
+ padding: map-get($size-list, item-padding-y) map-get($size-list, item-padding-x);
+ @include font-size(map-get($size-list, font-size));
 
  &[role="group"] {
  .select2-results__group {
- padding: $s2bs5-group-padding-y-sm $s2bs5-group-padding-x-sm;
+ padding: map-get($size-list, group-padding-y) map-get($size-list, group-padding-x);
  }
 
  .select2-results__options--nested {
  .select2-results__option {
- padding: $s2bs5-item-padding-y-sm $s2bs5-item-padding-x-sm;
+ padding: map-get($size-list, item-padding-y) map-get($size-list, item-padding-x);
  }
  }
  }
@@ -51,123 +50,68 @@
  }
 
  // Single
- &.select2-selection--single {
- padding: $s2bs5-padding-y-sm $s2bs5-indicator-padding $s2bs5-padding-y-sm $s2bs5-padding-x-sm;
+ .select2-selection--single {
+ padding: map-get($size-list, padding-y) $s2bs5-indicator-padding map-get($size-list, padding-y) map-get($size-list, padding-x);
  }
 
  // Multiple
- &.select2-selection--multiple {
+ .select2-selection--multiple {
  .select2-selection__rendered {
  &:not(:empty) {
- padding-bottom: $s2bs5-padding-y-sm;
+ padding-bottom: map-get($size-list, padding-y);
  }
 
  .select2-selection__choice {
  padding: $s2bs5-multi-item-padding-y $s2bs5-multi-item-padding-x;
- @include font-size($s2bs5-font-size-sm);
+ @include font-size(map-get($size-list, font-size));
 
  .select2-selection__choice__remove {
- width: $s2bs5-clear-width-sm;
- height: $s2bs5-clear-height-sm;
- padding: $s2bs5-clear-padding-y-sm $s2bs5-clear-padding-x-sm;
- background: $s2bs5-clear-bg-sm;
+ width: map-get($size-list, clear-width);
+ height: map-get($size-list, clear-height);
+ padding: map-get($size-list, clear-padding-y) map-get($size-list, clear-padding-x);
+ background: map-get($size-list, clear-bg);
 
  &:hover {
- background: $s2bs5-clear-hover-bg-sm;
+ background: map-get($size-list, clear-hover-bg);
  }
  }
  }
  }
 
  .select2-selection__clear {
- right: $s2bs5-padding-x-sm;
+ right: map-get($size-list, padding-x);
  }
  }
 }
 
-// Large
-.select2-container--bootstrap-5 .select2--large {
- // Layout
- &.select2-selection {
- min-height: $s2bs5-height-lg;
- padding: $s2bs5-padding-y-lg $s2bs5-padding-x-lg;
- @include font-size($s2bs5-font-size-lg);
- }
-
- &.select2-selection--single,
- &.select2-selection--multiple {
- .select2-selection__clear {
- width: $s2bs5-clear-width-lg;
- height: $s2bs5-clear-height-lg;
- padding: $s2bs5-clear-padding-y-lg $s2bs5-clear-padding-x-lg;
- background: $s2bs5-clear-bg-lg;
-
- &:hover {
- background: $s2bs5-clear-hover-bg-lg;
- }
+// Using options
+.select2-container--bootstrap-5 {
+ // Small
+ .select2--small {
+ ~ {
+ @include s2bs5-sizing($s2bs5-small);
  }
  }
 
- // Dropdown
- &.select2-dropdown {
- .select2-search {
- .select2-search__field {
- padding: $s2bs5-padding-y-lg $s2bs5-padding-x-lg;
- @include font-size($s2bs5-font-size-lg);
- }
- }
-
- .select2-results__options {
- .select2-results__option {
- padding: $s2bs5-item-padding-y-lg $s2bs5-item-padding-x-lg;
- @include font-size($s2bs5-font-size-lg);
-
- &[role="group"] {
- .select2-results__group {
- padding: $s2bs5-group-padding-y-lg $s2bs5-group-padding-x-lg;
- }
-
- .select2-results__options--nested {
- .select2-results__option {
- padding: $s2bs5-item-padding-y-lg $s2bs5-item-padding-x-lg;
- }
- }
- }
- }
+ // Large
+ .select2--large {
+ ~ {
+ @include s2bs5-sizing($s2bs5-large);
  }
  }
+}
 
- // Single
- &.select2-selection--single {
- padding: $s2bs5-padding-y-lg $s2bs5-indicator-padding $s2bs5-padding-y-lg $s2bs5-padding-x-lg;
+// Using bootstrap classes
+// Small
+.form-select-sm {
+ ~.select2-container--bootstrap-5 {
+ @include s2bs5-sizing($s2bs5-small);
  }
+}
 
- // Multiple
- &.select2-selection--multiple {
- .select2-selection__rendered {
- &:not(:empty) {
- padding-bottom: $s2bs5-padding-y-lg;
- }
-
- .select2-selection__choice {
- padding: $s2bs5-multi-item-padding-y $s2bs5-multi-item-padding-x;
- @include font-size($s2bs5-font-size-lg);
-
- .select2-selection__choice__remove {
- width: $s2bs5-clear-width-lg;
- height: $s2bs5-clear-height-lg;
- padding: $s2bs5-clear-padding-y-lg $s2bs5-clear-padding-x-lg;
- background: $s2bs5-clear-bg-lg;
-
- &:hover {
- background: $s2bs5-clear-hover-bg-lg;
- }
- }
- }
- }
-
- .select2-selection__clear {
- right: $s2bs5-padding-x-lg;
- }
+// Large
+.form-select-lg {
+ ~.select2-container--bootstrap-5 {
+ @include s2bs5-sizing($s2bs5-large);
  }
 }
diff --git a/src/_variables.scss b/src/_variables.scss
@@ -92,6 +92,23 @@ $s2bs5-clear-padding-x-sm: .125rem !default;
 $s2bs5-clear-bg-sm: transparent escape-svg($s2bs5-clear-icon) center / $s2bs5-clear-height-sm auto no-repeat !default;
 $s2bs5-clear-hover-bg-sm: transparent escape-svg($btn-close-bg) center / $s2bs5-clear-height-sm auto no-repeat !default;
 
+$s2bs5-small: (
+ "height": $s2bs5-height-sm,
+ "padding-y": $s2bs5-padding-y-sm,
+ "padding-x": $s2bs5-padding-x-sm,
+ "font-size": $s2bs5-font-size-sm,
+ "item-padding-y": $s2bs5-item-padding-y-sm,
+ "item-padding-x": $s2bs5-item-padding-x-sm,
+ "group-padding-y": $s2bs5-group-padding-y-sm,
+ "group-padding-x": $s2bs5-group-padding-x-sm,
+ "clear-width": $s2bs5-clear-width-sm,
+ "clear-height": $s2bs5-clear-height-sm,
+ "clear-padding-y": $s2bs5-clear-padding-y-sm,
+ "clear-padding-x": $s2bs5-clear-padding-x-sm,
+ "clear-bg": $s2bs5-clear-bg-sm,
+ "clear-hover-bg": $s2bs5-clear-hover-bg-sm,
+) !default;
+
 // Large
 $s2bs5-height-lg: $input-height-lg !default;
 $s2bs5-padding-y-lg: $form-select-padding-y-lg !default;
@@ -107,3 +124,20 @@ $s2bs5-clear-padding-y-lg: .5rem !default;
 $s2bs5-clear-padding-x-lg: .5rem !default;
 $s2bs5-clear-bg-lg: transparent escape-svg($s2bs5-clear-icon) center / $s2bs5-clear-height-lg auto no-repeat !default;
 $s2bs5-clear-hover-bg-lg: transparent escape-svg($btn-close-bg) center / $s2bs5-clear-height-lg auto no-repeat !default;
+
+$s2bs5-large: (
+ "height": $s2bs5-height-lg,
+ "padding-y": $s2bs5-padding-y-lg,
+ "padding-x": $s2bs5-padding-x-lg,
+ "font-size": $s2bs5-font-size-lg,
+ "item-padding-y": $s2bs5-item-padding-y-lg,
+ "item-padding-x": $s2bs5-item-padding-x-lg,
+ "group-padding-y": $s2bs5-group-padding-y-lg,
+ "group-padding-x": $s2bs5-group-padding-x-lg,
+ "clear-width": $s2bs5-clear-width-lg,
+ "clear-height": $s2bs5-clear-height-lg,
+ "clear-padding-y": $s2bs5-clear-padding-y-lg,
+ "clear-padding-x": $s2bs5-clear-padding-x-lg,
+ "clear-bg": $s2bs5-clear-bg-lg,
+ "clear-hover-bg": $s2bs5-clear-hover-bg-lg,
+) !default;