Contents

@import "../../../../node_modules/flatpickr/dist/flatpickr.min.css";
@import "../pb_textarea/textarea_mixin";
@import "../pb_title/title_mixin";
@import "../tokens/colors";
@import "../pb_caption/caption_mixin";

[class^=pb_date_picker] {
  // input styles
  [class^=pb_caption_kit] {
    margin-bottom: $space_xs;
    display: block;
  }
  .input_wrapper {
    margin-bottom: $space_sm;
    
    .flatpickr-wrapper {
      display: block;
      input::placeholder {
        @include pb_body_light;
      }
  
      > input:first-child {
        @include pb_textarea_light;
        @include pb_title_4;
        overflow: hidden;
      }
  
      input:focus, input:-webkit-autofill:focus {
        @include pb_textarea_focus;
        -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
        transition: background-color 5000s ease-in-out 0s;
      }
    }
  }

  &.error {
    [class^=pb_body_kit] {
      margin-top: $space_xs / 2;
    }
    .flatpickr-wrapper {
      > input:first-child {
        border-color: $error;
      }
    }
  }
}

// date-picker styles

div.flatpickr-weekdays {
  margin-top: 5px;
}
span.flatpickr-weekday {
  @include caption;
}

.pb_popover_body {
  overflow: visible !important;
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
playbook_ui-5.5.1.pre.alpha2	app/pb_kits/playbook/pb_date_picker/_date_picker.scss
playbook_ui-5.5.1.pre.alpha1	app/pb_kits/playbook/pb_date_picker/_date_picker.scss