npm - @elliemae/ds-basic - Versions diffs - 3.50.1-next.8 → 3.51.0-beta.1 - Mend

Files changed (497) hide show

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-picker/components/DSDatePickerImpl.scss DELETED Viewed

@@ -1,246 +0,0 @@
-@import './DatePickerHeader/DatePickerHeader';
-@import './DatePickerRange/DatePickerRange';
-@import './DatePickerSingleDate/DatePickerSingleDate';
-@import './DatePickerRangeHeader/DatePickerRangeHeader';
-@import './SingleRangeDateSwitcher/SingleRangeDateSwitcher';
-// ********************************************
-// container definition
-$el-container: #{$prefix}-datepicker;
-$el-inputs: #{$prefix}-datepicker-inputs;
-$el-input: DateInput_input;
-$el-day-contents: #{$prefix}-datepicker__day-contents;
-$el-icon: #{$prefix}-datepicker__picker;
-$el-overlay-container: em-ds-datepicker-range-wrapper-day-picker-single-date-controller;
-$el-overlay-range: #{$prefix}-datepicker-wrapper-day-picker-single-date-controller;
-// $el-overlay-range: #{$prefix}-datepicker-wrap-day-picker;
-// ********************************************
-// container definition
-$el-focused: #{$el-container}--focused;
-// ********************************************
-// vars
-$border-type: solid 1px;
-$radius: calc(#{space(xxs)} * 0.5);
-$input-height: calc(#{space(m)} * 1.16666);
-// ********************************************
-// Input wrapperRef
-.#{$el-inputs} {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-}
-// ********************************************
-// Input Text Styling Vars
-.#{$el-input} {
-  @include border-radius($radius 0 0 $radius);
-  transition: border duration(base) easing(base);
-  border: $border-type color(neutral, 200);
-  border-right: none;
-  height: $input-height;
-  padding: 0 space(xs);
-  outline: none;
-  box-sizing: border-box;
-  &:focus,
-  &:hover {
-    border-color: color(brand-primary, 600);
-  }
-  &:active {
-    border-color: color(brand-primary, 700);
-    color: color(neutral, 800);
-  }
-  @include placeholder {
-    color: color(neutral, 500);
-    font-style: italic;
-  }
-}
-.#{$el-input}__disabled {
-  background: color(neutral, 000);
-  pointer-events: none;
-  border-color: color(neutral, 100);
-  color: color(neutral, 500);
-  cursor: not-allowed;
-  &:focus,
-  &:hover {
-    border-color: color(neutral, 100);
-  }
-  &:active {
-    border-color: color(neutral, 100);
-  }
-}
-// ********************************************
-// container
-.#{$el-container} {
-  z-index: 0;
-}
-.#{$el-container},
-.#{$picker-classname},
-.#{$date-range-selector},
-.#{$el-overlay-container},
-.#{$el-overlay-range} {
-  .DateInput {
-    width: auto;
-  }
-  .CalendarMonth {
-    background: color(neutral, 050);
-  }
-  .CalendarDay__default,
-  .CalendarDay__selected,
-  .CalendarDay__selected:active,
-  .CalendarDay__selected:hover {
-    background: color(neutral, 000);
-    text-align: center;
-    border: none;
-    &:focus {
-      outline: none;
-    }
-  }
-  .CalendarDay__default:hover,
-  .CalendarDay__default:focus {
-    background: color(neutral, 000);
-    border: none;
-    .#{$el-day-contents} {
-      background: color(neutral, 000);
-      border: $border-type color(brand-primary, 600);
-      color: color(brand-primary, 600);
-    }
-  }
-  .CalendarDay__selected {
-    background: #fff;
-    color: color(neutral, 000);
-    border: none;
-    .#{$el-day-contents},
-    .#{$prefix}-datepicker-range__day-contents {
-      background-color: color(brand-primary, 600);
-      border: $border-type color(brand-primary, 600);
-      color: color(neutral, 000);
-      &:hover {
-        box-shadow: inset 0 0 0 1px color(brand-primary, 300);
-      }
-    }
-    &.CalendarDay__selected_start.CalendarDay__selected_end {
-      &:after {
-        display: none;
-      }
-      .#{$el-day-contents},
-      .#{$prefix}-datepicker-range__day-contents {
-        background-color: color(brand-primary, 600);
-        border: $border-type color(brand-primary, 600);
-        color: color(neutral, 000);
-        // background: -moz-linear-gradient(-45deg, color(brand-primary, 600) 0%, color(brand-primary, 600) 50%, color(brand-primary, 800) 50%, color(brand-primary, 800) 100%);
-        // background: -webkit-linear-gradient(-45deg, color(brand-primary, 600) 0%,color(brand-primary, 600) 50%,color(brand-primary, 800) 50%,color(brand-primary, 800) 100%);
-        // background: linear-gradient(135deg, color(brand-primary, 600) 0%,color(brand-primary, 600) 50%,color(brand-primary, 800) 50%,color(brand-primary, 800) 100%);
-      }
-    }
-  }
-  .CalendarDay__selected:hover {
-    color: color(neutral, 000);
-    .#{$el-day-contents},
-    .#{$prefix}-datepicker-range__day-contents {
-      background-color: color(brand-primary, 600);
-      color: color(neutral, 000);
-    }
-  }
-  .CalendarDay.CalendarDay__blocked_calendar {
-    color: color(neutral, 500);
-    & > div.#{$prefix}-datepicker-range__day-contents {
-      border: none;
-      background-color: #fff;
-      color: color(neutral, 500);
-      pointer-events: none;
-      position: relative;
-      &::after {
-        // this renders the cross-line in disabled dys
-        content: '';
-        height: space(xxs) * 0.25;
-        width: 48%;
-        background: color(neutral, 500);
-        position: absolute;
-        pointer-events: none;
-        top: 50%;
-        margin-top: space(xxs) * (-0.15);
-        left: 26%;
-      }
-    }
-    cursor: not-allowed;
-  }
-  .CalendarDay.CalendarDay__outside {
-    color: color(neutral, 500);
-    & > div.#{$prefix}-datepicker-range__day-contents {
-      border: none;
-      color: color(neutral, 500);
-      pointer-events: none;
-    }
-    pointer-events: none;
-  }
-  .CalendarMonth_table {
-    border-collapse: collapse;
-    border-spacing: 0;
-    background-color: color(neutral, 000);
-    width: calc(#{space(l)} * 9.93) !important;
-    margin-left: calc(#{space(m)} * (-0.5));
-    margin-top: #{space(s)};
-  }
-  .DayPicker_weekHeader {
-    position: absolute;
-    color: color(neutral, 800);
-    height: space(m);
-    top: calc(#{space(l)} * 1.55);
-    z-index: 2; //required
-    text-align: left;
-  }
-  .DayPicker_weekHeader_ul {
-    font-size: font-size(500);
-  }
-  .DayPicker_weekHeader_li {
-    display: inline-block;
-    text-align: center;
-    width: calc(#{space(xs)} * 5.625) !important;
-  }
-  .DayPicker_weekHeader_li {
-    small {
-      font-size: font-size(400);
-    }
-  }
-  .DayPicker__withBorder {
-    box-shadow: depth(200);
-  }
-}
-// ********************************************
-// ON Focus
-.#{$el-focused} {
-  .#{$el-input} {
-    border-color: color(brand-primary, 600);
-    @include box-shadow(none);
-  }
-  .#{$el-icon}:not([disabled]) {
-    border-right-color: color(brand-primary, 600);
-    border-top-color: color(brand-primary, 600);
-    border-bottom-color: color(brand-primary, 600);
-    @include box-shadow(none);
-  }
-}

@@ -1,14 +0,0 @@
-$dg-group-header: #{$data-grid}-group-row-header;
-.#{$dg-group-header} {
-  min-height: 24px;
-  background-color: color(brand-primary, 200);
-  display: flex;
-  align-items: center;
-  padding: 0 $data-grid-cell-horizontal-padding;
-  border-top: solid 1px color(brand-primary, 500);
-  &__title {
-    font-weight: font-weight(semibold);
-    font-size: 12px;
-  }
-}

@@ -1,22 +0,0 @@
-$picker-classname: SingleDatePicker_picker;
-$day-picker-classname: DayPicker;
-$date-range-selector: #{$prefix}-date-range-selector-wrap-day-picker;
-@import './components/helpers/clean';
-@import './components/DSDatePickerImpl';
-@import './components/DatePickerDay/DatePickerDay';
-@import './components/DatePickerNavigation/DatePickerNavigation';
-@import './components/DatePickerPicker/DatePickerPicker';
-.#{$prefix}-form-item--error:not(:focus-within) {
-  .#{$prefix}-datepicker {
-    .#{$prefix}-input {
-      border-right-color: transparent;
-    }
-    .#{$prefix}-datepicker-range__picker {
-      border-top-color: color(danger, 900);
-      border-right-color: color(danger, 900);
-      border-bottom-color: color(danger, 900);
-    }
-  }
-}

@@ -1,9 +0,0 @@
-$date-picker-header: #{$prefix}-date-picker-header;
-.#{$date-picker-header} {
-  display: flex;
-  justify-content: flex-start;
-  width: 100%;
-  padding: 10px;
-  background: #fff;
-}

@@ -1,26 +0,0 @@
-$el-container: #{$prefix}-datepicker;
-.#{$el-container},
-.#{$picker-classname},
-.#{$day-picker-classname} {
-  .DayPickerNavigation {
-    display: flex;
-    justify-content: space-between;
-    position: absolute;
-    left: 25px;
-    right: 25px;
-    top: 10.9px;
-    padding: space(xxs) space(xs) 0 space(xs);
-  }
-  .CalendarMonth_caption {
-    padding-top: calc(#{space(xs)} * 1.25);
-    padding-bottom: calc(#{space(l)} * 1.187);
-    font-size: font-size(500);
-    line-height: 1;
-    strong {
-      position: relative;
-      top: 1px;
-    }
-  }
-}

@@ -1,13 +0,0 @@
-.#{$el-icon} {
-  @include border-radius(0 $radius $radius 0);
-  padding: 0 calc(#{space(xxs)} * 0.5);
-  &:hover:not([disabled]) {
-    border: $border-type color(brand-primary, 600);
-  }
-  &.disabled {
-    border: $border-type color(neutral, 100);
-    pointer-events: none;
-  }
-}

@@ -1,18 +0,0 @@
-$date-range: #{$prefix}-date-range;
-.#{$date-range} {
-  &__wrapper {
-    display: flex;
-    flex-direction: column;
-    border: none;
-    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.24);
-    & > * > .DayPicker {
-      box-shadow: none !important;
-    }
-  }
-  &__header {
-    display: flex;
-  }
-}

@@ -1,24 +0,0 @@
-$date-range-picker: #{$prefix}-date-range-picker;
-$input-addon-group: #{$prefix}-input-addon-group;
-.#{$date-range-picker} {
-  &__header {
-    display: flex;
-    justify-content: center;
-    width: fit-content;
-    flex-grow: 1;
-    width: 0;
-    background: #fff;
-    padding: space(xs);
-    .#{$input-addon-group} {
-      width: 100%;
-    }
-    &--invalidDate {
-      .#{$input-addon-group} {
-        .#{$prefix}-input {
-          border: solid 1px color(danger, 900);
-        }
-      }
-    }
-  }
-}

@@ -1,21 +0,0 @@
-$date-switcher: #{$prefix}-date-switcher;
-$date-header: #{$prefix}-date-picker-header;
-.#{$date-switcher} {
-  &__header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    background: #fff;
-  }
-  &__header > .#{$date-header} {
-    display: flex;
-    justify-content: flex-end;
-  }
-}
-.switch-header__checkbox {
-  padding: 0px;
-  margin-left: space(s) * 0.4;
-}

@@ -1,46 +0,0 @@
-// ********************************************
-// Clean default style
-.SingleDatePickerInput {
-  border: none;
-  border-right: none;
-}
-.CalendarDay__default {
-  padding: 0 !important;
-  position: relative;
-  border: none;
-  &:hover {
-    border: none;
-  }
-}
-.CalendarDay__outside {
-  pointer-events: none;
-}
-.CalendarMonth {
-  text-align: center;
-  vertical-align: top;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.CalendarMonthGrid__horizontal {
-  left: 0 !important;
-}
-.DayPicker_weekHeaders {
-  margin-left: 0 !important;
-}
-.DayPicker_weekHeader {
-  padding: 0 !important;
-}
-.DayPicker_weekHeader_ul {
-  list-style: none;
-  margin: 0;
-  padding-left: 0;
-  padding-right: 0;
-}

@@ -1,4 +0,0 @@
-$date-range-selector-container: #{$prefix}-date-range-selector-wrap-day-picker;
-@import './components/DSDateRangePickerImpl';
-@import './components/DatePickerLabel/DatePickerLabel';

@elliemae/ds-basic 3.50.1-next.8 → 3.51.0-beta.1