add bs-placeholder for advanced styling

close snapappointments#1139, close snapappointments#1190
JoshLabs · May 14, 2020 · 5ee06f9 · 5ee06f9
1 parent 7deccf7
commit 5ee06f9
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 0 deletions.
diff --git a/js/bootstrap-select.js b/js/bootstrap-select.js
@@ -643,6 +643,8 @@
  that.setDisabled(index, this.disabled || this.parentNode.tagName === 'OPTGROUP' && this.parentNode.disabled, $lis);
  that.setSelected(index, this.selected, $lis);
  });
+
+ this.togglePlaceholder();
  }
 
  this.tabIndex();
@@ -990,6 +992,8 @@
  },
 
  setSelected: function (index, selected, $lis) {
+ if (!$lis) this.togglePlaceholder(); // check if setSelected is being called by changing the value of the select
+
  if (!$lis) {
  $lis = this.findLis().eq(this.liObj[index]);
  }
@@ -1035,6 +1039,11 @@
  });
  },
 
+ togglePlaceholder: function () {
+ var value = this.$element.val();
+ this.$button.toggleClass('bs-placeholder', value === null || value === '');
+ },
+
  tabIndex: function () {
  if (this.$element.data('tabindex') !== this.$element.attr('tabindex') && 
  (this.$element.attr('tabindex') !== -98 && this.$element.attr('tabindex') !== '-98')) {

diff --git a/less/bootstrap-select.less b/less/bootstrap-select.less
@@ -19,6 +19,10 @@ select.selectpicker {
  width: 100%;
  padding-right: 25px;
  z-index: 1;
+
+ &.bs-placeholder,
+ &.bs-placeholder:hover,
+ &.bs-placeholder:active { color: @input-color-placeholder; }
  }
 
  > select {

diff --git a/less/variables.less b/less/variables.less
@@ -4,3 +4,6 @@
 @width-default: 220px; // 3 960px-grid columns
 
 @zindex-select-dropdown: 1060; // must be higher than a modal background (1050)
+
+//** Placeholder text color
+@input-color-placeholder: #999;
diff --git a/sass/bootstrap-select.scss b/sass/bootstrap-select.scss
@@ -44,6 +44,10 @@ select.selectpicker {
  width: 100%;
  padding-right: 25px;
  z-index: 1;
+
+ &.bs-placeholder,
+ &.bs-placeholder:hover,
+ &.bs-placeholder:active { color: $input-color-placeholder; }
  }
 
  > select {

diff --git a/sass/variables.scss b/sass/variables.scss
@@ -4,3 +4,6 @@ $color-grey-arrow: rgba(204, 204, 204, 0.2);
 $width-default: 220px; // 3 960px-grid columns
 
 $zindex-select-dropdown: 1060; // must be higher than a modal background (1050)
+
+//** Placeholder text color
+$input-color-placeholder: #999;