Choices: Bootstrap 4 theming

[michaelongithub]

Is your feature request related to a problem? Please describe.
Have many apps that use Bootstrap 4 styling. Need to comply to that

Describe the solution you'd like
Bootstrap 4 styling. Css file that can be added for that.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
not using choices
Additional context
Is there already one in this rep and I have not found it. Also in wiki no hints for theming.

Thanks for info, Michael

[dessalines]

A simple thing would just be a default adding of bs4 classes, I'm trying to do this now.

[dessalines]

This one is somewhat tolerable:

        let choices = new Choices(selectId, {
          shouldSort: false,
          classNames: {
            containerInner: 'choices__inner bg-secondary border-0',
            input: 'form-control',
            item: 'choices__item bg-secondary',
            highlightedState: 'text-info',
            selectedState: 'text-info',
          },
        });

[tegandbiscuits]

If your using Sass in your project, you can import the source styles and override the variables instead of including the built css.

This is what I'm setting.

// Assumes bootstrap variables are imported or overridden before here
$choices-font-size-lg: $font-size-lg;
$choices-font-size-md: $font-size-base;
$choices-font-size-sm: $font-size-sm;
$choices-guttering: $grid-gutter-width;

$choices-border-radius: 0;
$choices-border-radius-item: 0;
@if $enable-rounded {
  $choices-border-radius: $border-radius;
  $choices-border-radius-item: $rounded-pill;
}

$choices-bg-color: $input-bg;
$choices-bg-color-disabled: $input-disabled-bg;
$choices-bg-color-dropdown: $input-bg;
$choices-text-color: $input-color;
$choices-keyline-color: $input-border-color;
$choices-primary-color: $primary;
$choices-disabled-color: $input-disabled-bg;

Then after setting those you can import

@import '~choices.js/src/styles/choices';

Here's a link to the current variables.

$choices-highlight-color, $choices-button-dimension, and $choices-button-offset are the only other ones that look worth overriding.

[ryanmortier]

@tegandbiscuits I had to tweek it a bit as it was slightly off. Here is what I used in my Sass.

$choices-font-size-lg: $input-font-size-lg;
$choices-font-size-md: $input-font-size;
$choices-font-size-sm: $input-font-size-sm;
$choices-guttering: $form-grid-gutter-width;

$choices-border-radius: 0;
$choices-border-radius-item: 0;
@if $enable-rounded {
    $choices-border-radius: $input-border-radius;
    $choices-border-radius-item: $rounded-pill;
}

$choices-bg-color: $input-bg;
$choices-bg-color-disabled: $input-disabled-bg;
$choices-bg-color-dropdown: $input-bg;
$choices-text-color: $input-color;
$choices-keyline-color: $input-border-color;
$choices-primary-color: $primary;
$choices-disabled-color: $input-disabled-bg;

@import '~choices.js/src/styles/choices';

.choices__inner {
    color: $choices-text-color; // For some reason this needs to be manually specified or it grabs the body color?
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 8px !important;
    min-height: 38px !important;
}

.choices__list--single {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}