playbook_ui 12.19.0.pre.alpha.PLAY699zindexresponsive650 → 12.19.0.pre.alpha.movemarkdown637

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

@@ -1,116 +0,0 @@
-@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

@@ -1,173 +0,0 @@
-  /*
-    === 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

@@ -1,68 +0,0 @@
-@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

@@ -1,127 +0,0 @@
-@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

@@ -1,47 +0,0 @@
-@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

@@ -1,64 +0,0 @@
-@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

@@ -1,127 +0,0 @@
-@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;
-}