Style input to fit Twitter Bootstrap

[qweluke]

I wonder if it is possible to style input element to fit it to the Twitter Bootstrap style?

<div class="form-group">
    <label class="label">
        {formatMessage(this.messages, 'widget.form.check_in_date')}
    </label>
    <div class="control">
        <date-picker auto-confirm={true}
                     on-mousedown="close"
                     min={'2019-04-29'}
                     id='checkInDate'
                     default={this.form.checkInDate}
                     max={this.form.checkOutDate}
                     class='form-control checkInDate'
        />
    </div>
</div>

and my custom styles:

date-picker {

  --input-color: $baseColor;
  --input-background: red;

  --input-picker-color: $baseColor;
  --input-picker-background: #fff;

  --input-focus-background: #fff;
  --input-focus-color: $baseColor;

  --inner-input-focus-background: #fff;
  --inner-input-focus-color: #000;
  --dropdown-background: #9bf1e1;

  --input-border-width: 0;

}

[qweluke]

for now i have dropped .form-control class and styled more-less it like this:

date-picker {

  --input-field-padding: 0.375rem 0.75rem;
  --input-padding: 0.075rem 0.8rem;
  --input-border-style: solid;

  --input-border-color: $baseColor;

  --input-color: $baseColor;
  --input-background: #fff;

  --input-picker-color: $baseColor;
  --input-picker-background: #fff;

  --input-focus-background: #fff;
  --input-focus-color: $baseColor;

  --inner-input-focus-background: #fff;
  --inner-input-focus-color: #000;
  --dropdown-background: transparent;
}