<NME> bootstrap4.scss
<BEF> ADDFILE
<MSG> feat: update styles for dropdowns, lists, multiselect

match bootstrap 4 for defaults

modernize the styles using flexbox

BREAKING CHANGE: rename/add/remove many sass variables

<DFF> @@ -0,0 +1,120 @@
+$white: #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+
+$component-active-color: $white !default;
+$component-active-bg: #007bff !default;
+
+$font-size: 16px;
+$font-family: inherit;
+$text-color: $gray-900;
+
+$border-radius: 0.25em;
+$border-radius-sm: 0.2em;
+
+$widget-bg: #fff;
+$widget-border: $gray-400;
+
+$btn-bg: #fff;
+$btn-color: $text-color;
+$btn-border: #ccc;
+$btn-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+
+$icon-color: inherit;
+
+//
+// Widget States
+//
+$state-select-bg: #337ab7;
+$state-select-border-color: $state-select-bg;
+$state-select-color: white;
+
+$state-hover-bg: darken($btn-bg, 10%);
+$state-hover-border-color: $state-hover-bg;
+$state-hover-color: $text-color;
+
+//
+// Picker inputs
+//
+$input-color: $gray-700;
+$input-padding-x: 0.375em;
+
+$input-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+
+$input-height: 38px; // 2.5em is good for 16px roots
+
+$input-bg: $widget-bg;
+$input-disabled-bg: $gray-200;
+$input-color-placeholder: #999;
+
+$input-border-radius: $border-radius;
+$input-border: $widget-border;
+$input-border-width: 1px;
+
+$input-hover-bg: $gray-200;
+$input-hover-border: $input-border;
+
+// $input-focus-width: 3px;
+// $input-focus-border: $state-focus-border;
+// $input-focus-color: $state-focus-color;
+// $input-focus-box-shadow: 0 0 0 $input-focus-width $input-focus-color;
+
+//
+// List
+//
+$list-font-size: $font-size;
+$list-color: $text-color;
+
+$list-hover-color: darken($gray-900, 5%);
+$list-hover-bg: $gray-100;
+$list-hover-border-color: $gray-100;
+
+// $list-focus-color: $state-focus-color;
+// $list-focus-bg: $state-focus-bg;
+// $list-focus-border: $state-focus-border;
+
+$list-select-color: $component-active-color;
+$list-select-bg: $component-active-bg;
+$list-select-border-color: $component-active-bg;
+
+$list-option-padding-y: 0.25em;
+$list-option-padding-x: 1.5em;
+
+//
+// Popup
+//
+$popup-bg: $widget-bg;
+$popup-border: $widget-border;
+$popup-box-shadow-offset: 6px;
+$popup-box-shadow: 0 ($popup-box-shadow-offset - 1px) $popup-box-shadow-offset
+  rgba(0, 0, 0, 0.2);
+$popup-box-shadow-up: 0 -2px $popup-box-shadow-offset rgba(0, 0, 0, 0.2);
+
+$popup-zindex: 1005;
+$popup-zindex-focused: $popup-zindex + 1;
+
+//
+// Multiselect
+//
+$multiselect-gutter-pt: 0.115;
+$multiselect-tag-padding-left: 0.35em;
+$multiselect-tag-padding-right: 0.35em;
+$multiselect-tag-color: inherit;
+$multiselect-tag-border: $btn-border;
+$multiselect-tag-bg: $gray-200;
+$multiselect-tag-height-pt: 1 - ($multiselect-gutter-pt * 2);
+$multiselect-tag-gutter-fallback: $input-height * $multiselect-gutter-pt;
+$multiselect-tag-height: $input-height * $multiselect-tag-height-pt;
+$multiselect-tag-border-radius: $border-radius-sm;
+
+$multiselect-tag-bg-hover: $state-hover-bg;
+$multiselect-tag-border-hover: $state-hover-border-color;
+$multiselect-tag-color-hover: $state-hover-color;

feat: update styles for dropdowns, lists, multiselect