Contents

@import "../../tokens/animation-curves";
@import "../../tokens/colors";
@import "../../tokens/typography";
@import "../../tokens/titles";

// used to display dropdown on the left of the calender
.quick-pick-drop-down {
  width: auto;
  display: grid;
}

.quick-pick-ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav-item {
  list-style: none;
  border-radius: 6px;
  border-bottom: 0;
  margin: 8px 14px;
}

.nav-item-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  border: none;
  padding: 8px 14px;
  transition-property: color, background-color;
  transition-duration: 0.15s;
  transition-timing-function: $bezier;
  border-radius: 6px;
  line-height: 1.4;
  color: $charcoal;
  font-size: $font_default;
  font-weight: $regular;
  &.active {
    background-color: rgba($primary, 0.03);
    color: $primary;
    letter-spacing: normal;
  }
  @media (hover:hover) {
    &:hover {
      cursor: pointer;
      background-color: rgba($primary, 0.03);
      color: $primary;
    }
  }
}

// Hide the calendar
.quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
  display: none;
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
playbook_ui-12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown457	app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss
playbook_ui-12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown456	app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss