@elliemae/ds-basic 3.51.0-next.0 → 3.51.0-next.11

package/dist/styles/components/packages/ds-datagrids/plugins/grouping-grid/GroupingPlugin.scss

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

package/dist/styles/components/packages/ds-date-picker/DSDatePicker.scss

@@ -0,0 +1,22 @@
+$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);
+    }
+  }
+}

package/dist/styles/components/packages/ds-date-picker/components/DSDatePickerImpl.scss

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

package/dist/styles/components/packages/ds-date-picker/components/DatePickerDay/DatePickerDay.scss

@@ -0,0 +1,40 @@
+.#{$el-day-contents},
+.#{$prefix}-datepicker-range__day-contents {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: #{space(l)};
+  height: #{space(l)};
+  color: color(neutral, 800);
+  border-radius: 50%;
+  position: relative;
+  z-index: 2; // required
+  border: $border-type transparent;
+}
+
+
+.CalendarDay__outside {
+  .#{$el-day-contents} {
+    color: color(neutral, 200);  
+  }
+}
+.CalendarDay__default:hover,
+.CalendarDay__default:focus{
+
+  .#{$el-day-contents},
+  .#{$prefix}-datepicker-range__day-contents {
+    background: color(neutral, 000);
+    border: $border-type color(brand-primary, 600);
+    color: color(brand-primary, 600);
+  }
+}
+
+
+
+
+.without-selected-date .CalendarDay__today{
+  .#{$prefix}-datepicker-range__day-contents {    
+    border: $border-type color(neutral, 500);
+    color: color(neutral, 800);
+  }
+}

package/dist/styles/components/packages/ds-date-picker/components/DatePickerHeader/DatePickerHeader.scss

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

package/dist/styles/components/packages/ds-date-picker/components/DatePickerNavigation/DatePickerNavigation.scss

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

package/dist/styles/components/packages/ds-date-picker/components/DatePickerPicker/DatePickerPicker.scss

@@ -0,0 +1,13 @@
+.#{$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;
+  }
+}

package/dist/styles/components/packages/ds-date-picker/components/DatePickerRange/DatePickerRange.scss

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

package/dist/styles/components/packages/ds-date-picker/components/DatePickerRangeHeader/DatePickerRangeHeader.scss

@@ -0,0 +1,24 @@
+$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);
+        }
+      }
+    }
+  }
+}

package/dist/styles/components/packages/ds-date-picker/components/DatePickerSingleDate/DatePickerSingleDate.scss

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

package/dist/styles/components/packages/ds-date-picker/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.scss

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

package/dist/styles/components/packages/ds-date-picker/components/helpers/clean.scss

@@ -0,0 +1,46 @@
+// ********************************************
+// 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; 
+}

package/dist/styles/components/packages/ds-date-range-picker/DSDateRangePicker.scss

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