playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss

@@ -0,0 +1,116 @@
+@import "../../tokens/titles";
+
+// Header Styles
+.flatpickr-months {
+  border-bottom: solid 1px $border_light;
+}
+.flatpickr-month {
+  height: $space_xl;
+}
+.flatpickr-current-month {
+  left: $space_xs;
+  display: flex;
+  padding-top: 0;
+}
+.flatpickr-monthDropdown-months {
+  appearance: none;
+  -webkit-appearance: none;
+  @include pb_title_4;
+  height: $space_xl;
+  width: $space_xs * 12;
+  padding-left: 0;
+  padding-right: $space_xs;
+  margin-left: $space_sm;
+  margin-top: 0;
+  margin-bottom: 0;
+  @media (hover: hover) {
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+.numInputWrapper {
+  display: contents;
+  display: -webkit-box;
+  display: -webkit-flex;
+  .numInput {
+    @include pb_title_4;
+    border: 0;
+    appearance: none;
+    -webkit-appearance: none;
+    border-radius: 0;
+    background-color: transparent;
+    border-left: solid 1px $border_light;
+    padding-left: $space_md - 1.5;
+    padding-right: $space_sm;
+    margin-left: $space_xs;
+    height: $space_xl;
+    &:focus {
+      outline: none;
+    }
+    @media (hover: hover) {
+      &:hover {
+        cursor: pointer;
+        background-color: $white;
+      }
+    }
+  }
+}
+// Icon for Select Tags
+.month-dropdown-icon {
+  align-self: center;
+  margin-top: $space_xs - 3;
+  width: $space_xs + 2;
+  position: relative;
+  right: $space_xs + 2;
+  pointer-events: none;
+  color: $text_lt_light;
+}
+.year-dropdown-icon {
+  align-self: center;
+  -webkit-align-self: center;
+  margin-top: $space_xs - 3;
+  width: $space_xs + 2;
+  position: relative;
+  right: $space_xs + 4;
+  pointer-events: none;
+  color: $text_lt_light;
+}
+
+// Left - Right Arrow Styling
+.flatpickr-prev-month {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  left: $space_xs * 29.25 !important;
+  padding-right: $space_sm;
+  border-left: solid 1px $border_light;
+  height: $space_xl;
+  svg path {
+    fill: $text_lt_light;
+  }
+  @media (hover: hover) {
+    &:hover {
+      svg {
+        fill: inherit;
+      }
+    }
+  }
+}
+.flatpickr-next-month {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: $space_sm;
+  height: $space_xl;
+  svg path {
+    fill: $text_lt_light;
+  }
+  @media (hover: hover) {
+    &:hover{
+      svg {
+        fill: inherit;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss

@@ -0,0 +1,173 @@
+  /*
+    === Date Picker States ===
+    Default - No value in date picker - display grey Plus icon
+    Hover - No value in date picker - display blue Plus icon
+   - After Value in Date Picker -
+      Default - display grey caret icon
+      Hover - display blue caret icon
+  */
+[class^=pb_date_picker_kit] {
+  /*Default - No value in date picker*/
+  &.inline-date-picker {
+    [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper input::placeholder,
+    [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
+      opacity: 1;
+    }
+    &:not(:hover) {
+      #date-picker-inline-angle-down {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          color: $slate;
+          display: inline-block;
+        }
+      }
+    }
+    &:hover {
+      [class^="pb_text_input_kit"] .text_input_wrapper input,
+      [class^="pb_text_input_kit"] .text_input_wrapper .text_input,
+      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper input::placeholder,
+      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
+        color: $primary;
+      }
+      #date-picker-inline-angle-down {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          display: inline-block;
+          color: $primary;
+        }
+      }
+    }
+    &.show-angle-down-icon {
+      &:not(:hover) {
+        #date-picker-inline-angle-down {
+          svg {
+            display: inline-block;
+            color: $text_lt_light;
+          }
+        }
+        #date-picker-inline-icon-plus {
+          svg {
+            display: none;
+          }
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-angle-down {
+        svg {
+          display: inline-block;
+          color: $primary;
+        }
+      }
+    }
+    #date-picker-inline,
+    #date-picker-inline .active {
+      border: none;
+      padding: 5px 5px 5px 10px;
+      background-color: #FFF;
+      &:hover {
+        background: rgba(0,130,255,0.1);
+        transition: background-color 0.2s ease;
+        box-shadow: none;
+      }
+    }
+    #date-picker-inline-angle-down,
+    #date-picker-inline-icon-plus {
+      height: 33px;
+      border: none;
+    }
+  }
+}
+
+/*
+  DARK MODE
+*/
+[class^=pb_date_picker_kit].dark {
+  &.inline-date-picker {
+    &:not(:hover) {
+      #date-picker-inline-angle-down {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          display: inline-block;
+          color: $white;
+        }
+      }
+    }
+    &:hover {
+      [class^="pb_text_input_kit"] .text_input_wrapper input,
+      [class^="pb_text_input_kit"] .text_input_wrapper .text_input,
+      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper input::placeholder,
+      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
+        color: $white;
+      }
+      #date-picker-inline-angle-down {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          display: inline-block;
+          color: $white;
+        }
+      }
+    }
+    &.show-angle-down-icon {
+      &:not(:hover) {
+        #date-picker-inline-angle-down {
+          svg {
+            display: inline-block;
+            color: $white;
+          }
+        }
+        #date-picker-inline-icon-plus {
+          svg {
+            display: none;
+          }
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-angle-down {
+        svg {
+          display: inline-block;
+          color: $white;
+        }
+      }
+    }
+    #date-picker-inline,
+    #date-picker-inline .active {
+      background-color: rgba($white,.10);
+      border: none;
+      padding: 5px 5px 5px 10px;
+      &:hover {
+        background: rgba(0,130,255,0.1);
+        transition: background-color 0.2s ease;
+        box-shadow: none;
+      }
+    }
+    #date-picker-inline-angle-down,
+    #date-picker-inline-icon-plus {
+      height: 33px;
+      border: none;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss

@@ -0,0 +1,68 @@
+@import "../../pb_textarea/textarea_mixin";
+
+[class^=pb_date_picker_kit] {
+  margin-bottom: $space_sm;
+
+  .pb_date_picker_kit_label {
+    margin-bottom: $space_xs;
+    display: block;
+  }
+
+  .date_picker_input_wrapper {
+    display: block;
+
+    input::placeholder,
+    .date_picker_input .placeholder {
+      @include pb_body_light;
+    }
+
+    input,
+    .date_picker_input {
+      max-height: 45px;
+      @include pb_textarea_light;
+      overflow: hidden;
+    }
+
+    input:hover,
+    .date_picker_input:hover {
+      background-color: rgba($focus_input_light, $opacity_5);
+    }
+
+    input:focus,
+    .date_picker_input:focus,
+    input:-webkit-autofill:focus,
+    .date_picker_input:-webkit-autofill:focus {
+      @include pb_textarea_focus;
+      @include transition_default;
+      border-color: $primary;
+      background-color: rgba($focus_input_light, $opacity_5);
+    }
+  }
+
+  &.error {
+    .date_picker_input_wrapper {
+      [class*=pb_body_kit] {
+        margin-top: $space_xs / 2;
+      }
+
+      input,
+      .date_picker_input {
+        border-color: $error;
+      }
+    }
+  }
+
+  &.inline {
+    .date_picker_input_wrapper input::placeholder,
+    .date_picker_input_wrapper .date_picker_input .placeholder {
+      opacity: 1;
+    }
+
+    &:not(:hover) {
+      .date_picker_input_wrapper input:not(:focus) {
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss

@@ -0,0 +1,127 @@
+@import "../../tokens/colors";
+
+
+.numInput {
+  border-left: none !important;
+}
+
+// Manual Import
+.flatpickr-monthSelect-months {
+  margin: 10px 1px 3px 1px;
+  flex-wrap: wrap;
+}
+
+.flatpickr-monthSelect-month {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: $text_lt_default;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 400;
+  margin: 0.5px;
+  justify-content: center;
+  padding: 10px;
+  position: relative;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  text-align: center;
+  width: 33%;
+}
+
+.flatpickr-monthSelect-month.flatpickr-disabled {
+	color: #eee;
+}
+
+.flatpickr-monthSelect-month.flatpickr-disabled:hover,
+.flatpickr-monthSelect-month.flatpickr-disabled:focus {
+	cursor: not-allowed;
+	background: none !important;
+}
+
+.flatpickr-monthSelect-theme-dark {
+  background: #3f4458;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-current-month input.cur-year {
+  color: #fff;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-prev-month,
+.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-next-month {
+  color: #fff;
+  fill: #fff;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.flatpickr-monthSelect-month.today {
+  border-color: #959ea9;
+}
+
+.flatpickr-monthSelect-month.inRange,
+.flatpickr-monthSelect-month.inRange.today,
+.flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-month:focus {
+  background: $active_light;
+  font-weight: $bold;
+  color: $text_lt_default;
+  cursor: pointer;
+  outline: 0;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.inRange,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:focus {
+  background: #646c8c;
+  border-color: #646c8c;
+}
+
+.flatpickr-monthSelect-month.today:hover,
+.flatpickr-monthSelect-month.today:focus {
+  background: #959ea9;
+  border-color: #959ea9;
+  color: #fff;
+}
+
+.flatpickr-monthSelect-month.selected,
+.flatpickr-monthSelect-month.startRange,
+.flatpickr-monthSelect-month.endRange {
+  background-color: $primary;
+  font-weight: $bold;
+  box-shadow: none;
+  color: #fff;
+  border-color: $primary;
+}
+
+.flatpickr-monthSelect-month.startRange {
+  border-radius: 50px 0 0 50px;
+}
+
+.flatpickr-monthSelect-month.endRange {
+  border-radius: 0 50px 50px 0;
+}
+
+.flatpickr-monthSelect-month.startRange.endRange {
+  border-radius: 50px;
+}
+
+.flatpickr-monthSelect-month.inRange {
+  border-radius: 0;
+  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.startRange,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.endRange {
+  background: #80cbc4;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  color: #fff;
+  border-color: #80cbc4;
+}

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss

@@ -0,0 +1,47 @@
+@media (min-width: 500px) {
+  .flatpickr-calendar {
+    padding: $space_xs;
+    // width: 323.88px;
+  }
+  .dayContainer {
+    width: 315.88px
+  }
+  .flatpickr-months {
+    margin-left: $space_xs / 4;
+    margin-top: $space_xs / 3;
+    // width: 323.88px;
+  }
+}
+@media (max-width: 499px) {
+  .numInput.cur-year {
+    padding-left: $space_sm;
+  }
+  .flatpickr-prev-month {
+    left: $space_xs * 27.5 !important;
+  }
+}
+// Firefox Header Adjustments
+@supports (-moz-appearance:none) { 
+  select.flatpickr-monthDropdown-months {
+      width: 97px !important;
+      margin-left: $space_xs + 3;
+  }
+  select.numInput {
+    padding-left: $space_sm + 1.5 !important;
+    margin-left: $space_xs !important;
+  }
+}
+// Direct Overrides
+.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
+.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
+  cursor: not-allowed;
+}
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months:hover, .numInputWrapper:hover {
+  background-color: $white;
+}

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss

@@ -0,0 +1,64 @@
+@import "../../tokens/typography";
+@import "../../tokens/spacing";
+@import "../../tokens/colors";
+
+[class^=pb_date_picker_kit] {
+  .pb_time_selection {
+    color: inherit;
+    text-align: left;
+    margin-left: $space_sm;
+
+    .numInputWrapper {
+      width: auto;
+      input.numInput {
+        border: 1px solid $border_light !important;
+        border-radius: 5px;
+        text-align: center;
+        width: 60px;
+        margin-left: 0;
+        padding: 0;
+        &:focus {
+          border-color: $primary_action !important;
+        }
+      }
+      span {
+        &.arrowUp, &.arrowDown {
+          display: none;
+        }
+      }
+    }
+    [class^=pb_caption_kit_md], [class^=pb_caption_kit_xs] {
+      line-height: $text_larger;
+    }
+    [class^=pb_caption_kit_xs] {
+      clear: both;
+      display: block;
+    }
+    .flatpickr {
+      &-time-separator {
+        margin: 0 $space_xs;
+        text-align: center;
+      }
+    }
+    .meridiem {
+      [class^=pb_form_group_kit] {
+        margin-left: $space_sm;
+      }
+
+      .datePicker-AMPM {
+        display: none;
+      }
+      &:focus, &:hover {
+        background: transparent;
+      }
+
+      [class^=pb_selectable_card_kit] > label {
+        padding: 0;
+        margin: 0;
+        width: 60px;
+        height: 40px;
+        text-align: center;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss

@@ -0,0 +1,127 @@
+@import "../../tokens/colors";
+
+
+.numInput {
+  border-left: none !important;
+}
+
+// Manual Import
+.flatpickr-monthSelect-months {
+  margin: 10px 1px 3px 1px;
+  flex-wrap: wrap;
+}
+
+.flatpickr-monthSelect-month {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: $text_lt_default;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 400;
+  margin: 0.5px;
+  justify-content: center;
+  padding: 10px;
+  position: relative;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  text-align: center;
+  width: 33%;
+}
+
+.flatpickr-monthSelect-month.flatpickr-disabled {
+	color: #eee;
+}
+
+.flatpickr-monthSelect-month.flatpickr-disabled:hover,
+.flatpickr-monthSelect-month.flatpickr-disabled:focus {
+	cursor: not-allowed;
+	background: none !important;
+}
+
+.flatpickr-monthSelect-theme-dark {
+  background: #3f4458;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-current-month input.cur-year {
+  color: #fff;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-prev-month,
+.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-next-month {
+  color: #fff;
+  fill: #fff;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.flatpickr-monthSelect-month.today {
+  border-color: #959ea9;
+}
+
+.flatpickr-monthSelect-month.inRange,
+.flatpickr-monthSelect-month.inRange.today,
+.flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-month:focus {
+  background: $active_light;
+  font-weight: $bold;
+  color: $text_lt_default;
+  cursor: pointer;
+  outline: 0;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.inRange,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:focus {
+  background: #646c8c;
+  border-color: #646c8c;
+}
+
+.flatpickr-monthSelect-month.today:hover,
+.flatpickr-monthSelect-month.today:focus {
+  background: #959ea9;
+  border-color: #959ea9;
+  color: #fff;
+}
+
+.flatpickr-monthSelect-month.selected,
+.flatpickr-monthSelect-month.startRange,
+.flatpickr-monthSelect-month.endRange {
+  background-color: $primary;
+  font-weight: $bold;
+  box-shadow: none;
+  color: #fff;
+  border-color: $primary;
+}
+
+.flatpickr-monthSelect-month.startRange {
+  border-radius: 50px 0 0 50px;
+}
+
+.flatpickr-monthSelect-month.endRange {
+  border-radius: 0 50px 50px 0;
+}
+
+.flatpickr-monthSelect-month.startRange.endRange {
+  border-radius: 50px;
+}
+
+.flatpickr-monthSelect-month.inRange {
+  border-radius: 0;
+  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.startRange,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.endRange {
+  background: #80cbc4;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  color: #fff;
+  border-color: #80cbc4;
+}