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

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-range-picker/components/DSDateRangePickerImpl.scss

@@ -1,296 +0,0 @@
-// ********************************************
-// container definition
-$el-container: #{$prefix}-datepicker-range;
-$el-icon: #{$prefix}-range-picker__icon;
-$el-nav-icon-left: #{$prefix}-range-picker__chevron-left;
-$el-nav-icon-right: #{$prefix}-range-picker__chevron-right;
-
-$el-day-contents: #{$prefix}-datepicker-range__day-contents;
-$el-non-selected-date: #{$prefix}-range-picker__non-selected;
-
-$el-container-inputs: #{$prefix}-datepicker-wrapper-input-date-range-picker-controller;
-$el-container-button: #{$prefix}-datepicker-wrapper-button-date-range-picker-controller;
-$el-overlay-range: #{$prefix}-datepicker-range-wrapper-day-picker-single-date-controller;
-
-// ********************************************
-// local vars
-$border-type: solid 1px;
-$border-range: calc(#{space(xxs)} * 0.75) solid color(neutral, 000);
-$primary200: color(brand-primary, 200);
-
-.#{$el-container-inputs} {
-  display: flex;
-  flex-direction: row;
-  div.#{$prefix}-form-item {
-    outline: none;
-    box-shadow: none;
-    margin-right: space(xs);
-  }
-}
-
-.#{$el-container-button} {
-  margin-bottom: space(xs);
-}
-
-.#{$el-container},
-.#{$date-range-selector-container},
-.#{$el-overlay-range} {
-  .DateRangePicker {
-    min-width: calc(#{space(xxl)} * (4.57));
-  }
-
-  .DateRangePickerInput {
-    border: none;
-    border-right: none;
-  }
-
-  .DateInput {
-    margin-right: #{space(s)};
-  }
-
-  .DateInput_input {
-    border: $border-type color(neutral, 200);
-    @include border-radius($radius);
-
-    &:disabled {
-      background-color: color(neutral, 000);
-    }
-  }
-
-  .DateRangePickerInput_arrow {
-    display: none;
-  }
-
-  .DateInput_input__focused {
-    border: $border-type color(brand-primary, 600);
-    box-shadow: color(brand-primary, 400);
-  }
-
-  .DateRangePickerInput__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);
-    }
-
-    .DateInput_input__focused {
-      border: $border-type color(neutral, 100) !important;
-      box-shadow: none;
-    }
-  }
-
-  .CalendarDay__default {
-    padding: 0 !important;
-    position: relative;
-    border: none;
-    background-color: color(neutral, 000);
-    text-align: center;
-    transition: all duration(fast) easing(excite);
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  .CalendarDay__default:hover,
-  .CalendarDay__default:focus {
-    color: color(neutral, 000);
-
-    .#{$el-day-contents} {
-      border: $border-type color(brand-primary, 600);
-      box-shadow: inset 0 0 0 1px color(brand-primary, 300);
-      color: color(brand-primary, 600);
-    }
-  }
-
-  .CalendarDay__selected {
-    color: color(neutral, 000);
-  }
-
-  .CalendarDay__selected:hover,
-  .CalendarDay__selected:focus {
-    color: color(neutral, 000);
-
-    .#{$el-day-contents} {
-      color: color(neutral, 000);
-      background: color(brand-primary, 600);
-      box-shadow: inset 0 0 0 1px color(brand-primary, 300);
-    }
-  }
-
-  .CalendarDay__selected_span {
-    &:after {
-      content: '';
-      border-top: $border-range;
-      border-bottom: $border-range;
-      @include target-ie {
-        border-top: none;
-        border-bottom: none;
-      }
-      position: absolute;
-      width: 100%;
-      z-index: 1;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      background: color(brand-primary, 200);
-    }
-    background: color(brand-primary, 200);
-    position: relative;
-    z-index: 3;
-  }
-
-  .CalendarDay.CalendarDay__blocked_calendar:focus,
-  .CalendarDay.CalendarDay__blocked_calendar:hover {
-    .#{$el-day-contents} {
-      box-shadow: none;
-      border: none;
-    }
-  }
-
-  .CalendarDay__selected_start,
-  .CalendarDay__selected_end {
-    &:before {
-      content: '';
-      position: absolute;
-      background-color: color(neutral, 000);
-      top: 0;
-      bottom: 0;
-      z-index: 2;
-    }
-
-    &:after {
-      content: '';
-      border-top: $border-range;
-      border-bottom: $border-range;
-      @include target-ie {
-        border-top: none;
-        border-bottom: none;
-      }
-      position: absolute;
-      width: 100%;
-      z-index: 1;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      background-color: color(brand-primary, 200);
-    }
-  }
-
-  .#{$el-non-selected-date} {
-    .CalendarDay__selected_start {
-      background-color: color(neutral, 000);
-    }
-  }
-
-  .CalendarDay__selected_start {
-    &.CalendarDay__selected_end {
-      background-color: color(neutral, 000);
-    }
-  }
-
-  .CalendarDay__selected_start {
-    &:before {
-      left: 0;
-      right: 50%;
-    }
-  }
-
-  .CalendarDay__selected_end {
-    &:before {
-      right: 0;
-      left: 50%;
-    }
-  }
-
-  .CalendarDay__hovered_span:hover,
-  .CalendarDay__hovered_span {
-    background: $primary200;
-    &:after {
-      content: '';
-      border-top: $border-range;
-      border-bottom: $border-range;
-      position: absolute;
-      width: 100%;
-      z-index: 1;
-      top: 0;
-      bottom: 0;
-      left: 0;
-    }
-  }
-
-  .CalendarDay__hovered_span:hover {
-    &:before {
-      content: '';
-      position: absolute;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      left: 50%;
-      background: color(neutral, 000);
-      z-index: 0;
-    }
-  }
-
-  .DateRangePicker + .em-ds-datepicker__picker {
-    @include border-radius($radius);
-  }
-
-  .CalendarMonth {
-    background: color(neutral, 050);
-    text-align: center;
-    vertical-align: top;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: 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(xxs)} * (-3));
-  }
-
-  .CalendarMonthGrid__horizontal {
-    left: 0 !important;
-  }
-
-  .DayPicker_weekHeaders {
-    margin-left: 0 !important;
-  }
-
-  .#{$el-icon} {
-    border: $border-type color(neutral, 200);
-    border-radius: #{space(xxs)};
-    display: inline-block;
-    padding: calc(#{space(s)} * (0.625));
-
-    &:hover {
-      border: $border-type color(brand-primary, 600);
-    }
-
-    &.disabled {
-      border: $border-type color(neutral, 100);
-    }
-  }
-}
-
-.#{$el-container}.#{$prefix}-datepicker--error {
-  .em-ds-form-item__feedback {
-    margin-right: -36px;
-  }
-  .#{$prefix}-datepicker__picker {
-    border: solid 1px color(danger, 900);
-  }
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-range-picker/components/DatePickerLabel/DatePickerLabel.scss

@@ -1,31 +0,0 @@
-$el-label-from: #{$prefix}-datepicker__label-from;
-$el-label-to: #{$prefix}-datepicker__label-to;
-
-.#{$el-label-from},
-.#{$el-label-to} {
-  position: absolute;
-  margin-top: 0;
-  z-index: 1;
-  color: color(neutral, 200);
-  background: color(neutral, 000);
-  padding: 0px calc(#{space(xxs)} * 1.5);
-  max-height: #{space(xxs)};
-
-  span {
-    position: relative;
-    display: block;
-    top: calc(#{space(s)} * (-0.625));
-    max-width: calc(#{space(xl)} * 2);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow-y: hidden;
-  }
-}
-
-.#{$el-label-from} {
-  margin-left: calc(#{space(xs)} * 1.125);
-}
-
-.#{$el-label-to} {
-  margin-left: calc(#{space(xxl)} * 2.5);
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-range-picker/components/DatePickerRangeHeader/DatePickerRangeHeader.scss

@@ -1,10 +0,0 @@
-$date-range-picker: #{$prefix}-date-range-picker;
-
-.#{$date-range-picker} {
-  &__header {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    padding: space(xs);
-  }
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-range-selector/DSDateRangeSelector.scss

@@ -1 +0,0 @@
-@import './components/DateRangeSelectorImpl';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-time-picker/DSDateTimePicker.scss

@@ -1,20 +0,0 @@
-$date-time-picker-container: #{$prefix}-date-time-picker-wrap-day-picker;
-
-@import './components/DateTimePickerImpl';
-
-.#{$prefix}-datetimepicker {
-  min-width: 223px;
-}
-
-.#{$prefix}-form-item--error:not(:focus-within) {
-  .#{$prefix}-datetimepicker {
-    .#{$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-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-time-picker/components/DateTimePickerImpl.scss

@@ -1,43 +0,0 @@
-// ********************************************
-// container definition
-$date-time-picker: #{$prefix}-date-time-picker;
-$time-picker: #{$prefix}-time-picker-menu;
-$date-picker: #{$prefix}-datepicker-range-wrapper-day-picker-single-date-controller;
-
-// ********************************************
-// elements
-$date-time-picker-wrapper: #{$date-time-picker}__wrapper;
-$time-picker-wrapper: #{$date-time-picker}__time-picker-wrapper;
-$time-picker-header: #{$date-time-picker}__time-picker-header;
-$date-input: #{$date-time-picker}__date-input;
-
-.#{$date-time-picker-wrapper} {
-  display: flex;
-  flex-direction: row;
-  margin-top: space(xs);
-  box-shadow: depth(200);
-  background-color: color(neutral, 000);
-
-  .#{$time-picker-wrapper} {
-    background-color: color(neutral, 050);
-    display: flex;
-    flex-direction: column;
-
-    .#{$time-picker} {
-      border: unset;
-      box-shadow: unset;
-    }
-  }
-
-  .#{$date-picker} {
-    border-right: border-size(xs) solid color(neutral, 200);
-
-    .DayPicker {
-      box-shadow: unset;
-    }
-  }
-}
-
-.#{$date-input} {
-  padding-right: space(xs);
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-time-recurrence-picker/DSDateTimeRecurrenceSelector.scss

@@ -1,20 +0,0 @@
-$input-height: space(m) * 1.17; // TODO: define global input sizes
-
-@mixin labelStyle() {
-  line-height: $input-height;
-  color: color(neutral, 500);
-}
-$border-row-separator: dotted calc(#{space(xxs) * 0.5}) color(neutral, 080);
-
-@import './components/Forms/Forms';
-@import './components/DateTimeRecurrenceSelectorImpl';
-@import './components/RepeatPickerInput/RepeatPickerInput';
-@import './components/StartDateTime/StartDateTime';
-@import './components/EndDate/EndDate';
-@import './components/DaysOfWeekPicker/DaysOfWeekPicker';
-@import './components/DayOfMonthPicker/DayOfMonthPicker';
-@import './components/DayOfYearPicker/DayOfYearPicker';
-@import './components/TimeZonePicker/TimeZonePicker';
-@import './components/FieldWrapper/FieldWrapper';
-@import './components/LabelWrapper/LabelWrapper';
-@import './components/ValidationMessage/ValidationMessage';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-time-recurrence-picker/components/DateTimeRecurrenceSelectorImpl.scss

@@ -1,31 +0,0 @@
-$wrapper: #{$prefix}-date-time-predefined-range-selector;
-
-// component overrides
-$wrapper-datepicker-sp: SingleDatePickerInput;
-$wrapper-input-group: #{$prefix}-input-addon-group;
-$wrapper-datepicker: #{$prefix}-datepicker;
-$wrapper-datepicker-picker: #{$prefix}-datepicker__picker;
-$wrapper-datepicker-input: DateInput_input;
-$wrapper-select: #{$prefix}-selectbox__control;
-
-.#{$wrapper} {
-  hr {
-    margin: space(s) 0;
-    border: solid border-size() * 0.5 color(neutral, 100);
-  }
-  .#{$wrapper-datepicker-sp},
-  .#{$wrapper-input-group},
-  .#{$wrapper-datepicker},
-  .#{$wrapper-datepicker-picker},
-  .#{$wrapper-datepicker-input},
-  .#{$wrapper-select} {
-    height: $input-height;
-  }
-
-  .#{$wrapper-datepicker-sp} {
-    flex: 1;
-  }
-  .#{$wrapper-datepicker-input} {
-    width: 100%;
-  }
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-time-recurrence-picker/components/DayOfMonthPicker/DayOfMonthPicker.scss

@@ -1,10 +0,0 @@
-$wrapper: #{$prefix}-month-days-picker;
-
-.#{$wrapper} {
-  padding: space(s) 0;
-  margin: space(xs) 0;
-}
-
-.#{$prefix}-month-days-picker__label {
-  @include labelStyle();
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-time-recurrence-picker/components/DayOfYearPicker/DayOfYearPicker.scss

@@ -1,10 +0,0 @@
-$wrapper: #{$prefix}-year-days-picker;
-
-.#{$wrapper} {
-  padding: space(s) 0;
-  margin: space(xs) 0;
-}
-
-.#{$prefix}-year-days-picker__label {
-  @include labelStyle();
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-time-recurrence-picker/components/DaysOfWeekPicker/DaysOfWeekPicker.scss

@@ -1,131 +0,0 @@
-$wrapper: #{$prefix}-week-days-week-days-picker;
-$radio-group: #{$prefix}-radio-group;
-$checkbox-group: #{$prefix}-checkbox-group;
-// elements
-$el-container: #{$prefix}-form-element-radio;
-$el-input: #{$el-container}__input;
-$el-label: #{$el-container}__label;
-$el-button: #{$el-container}__input-button;
-$el-text: #{$el-container}__label-text;
-
-$cb-container: #{$prefix}-form-element-checkbox;
-$cb-input: #{$cb-container}__input;
-$cb-label: #{$cb-container}__label;
-$cb-button: #{$cb-container}__input-button;
-$cb-text: #{$cb-container}__label-text;
-
-$week-radio-size: space(l) * 1.2;
-
-.#{$wrapper} {
-  padding-top: space(xs);
-  padding-bottom: space(xxs);
-
-  .#{$el-text},
-  .#{$cb-text} {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: $week-radio-size;
-    height: $week-radio-size;
-    line-height: calc(#{$week-radio-size} * 1.1);
-    text-align: center;
-  }
-
-  .#{$radio-group},
-  .#{$checkbox-group} {
-    flex: 1;
-    height: $week-radio-size;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    .#{$el-container},
-    .#{$cb-container} {
-      margin-right: space(xxs);
-
-      .#{$cb-text} {
-        margin: 0;
-      }
-      .#{$cb-button} {
-        &[aria-checked='true'] {
-          color: color(neutral, 000);
-          background-color: color(brand-primary, 600);
-          border: $border-type color(brand-primary, 700);
-          & + .#{$el-text},
-          & + .#{$cb-text} {
-            color: color(neutral, 000);
-          }
-        }
-        &:focus,
-        &.#{$btn-el-vfocus} {
-          @include dsFocus();
-          @include border-radius(50%);
-        }
-      }
-
-      .#{$el-input},
-      .#{$cb-input} {
-        &:checked + .#{$el-button},
-        &:checked + .#{$cb-button} {
-          color: color(neutral, 000);
-          background-color: color(brand-primary, 600);
-          border: $border-type color(brand-primary, 700);
-          & + .#{$el-text},
-          & + .#{$cb-text} {
-            color: color(neutral, 000);
-          }
-        }
-        &:focus,
-        &.#{$btn-el-vfocus} {
-          @include dsFocus();
-        }
-      }
-    }
-  }
-
-  .#{$el-label},
-  .#{$cb-label} {
-    position: relative;
-    width: $week-radio-size;
-    height: $week-radio-size;
-    display: block;
-  }
-
-  .#{$el-button},
-  .#{$cb-button} {
-    @include border-radius(50%);
-    transition: duration(base) easing(base);
-    width: $week-radio-size;
-    height: $week-radio-size;
-    margin-right: space(xs);
-    background: color(neutral, 100);
-    border: none;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    align-self: flex-start;
-    cursor: pointer;
-
-    &:after {
-      display: none;
-    }
-
-    &:hover {
-      border: $border-type color(brand-primary, 600);
-    }
-
-    &:focus {
-      @include dsFocus();
-    }
-  }
-}
-
-.#{$prefix}-week-days-week-days-picker__label {
-  @include labelStyle();
-}
-.#{$prefix}-form-element-radio__input,
-.#{$el-button} {
-  &:focus {
-    @include dsFocus();
-  }
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-time-recurrence-picker/components/EndDate/EndDate.scss

@@ -1,32 +0,0 @@
-$wrapper: #{$prefix}-end-date-time-picker;
-$inputs: #{$prefix}-end-date-time-picker-inputs;
-
-$label: #{$wrapper}__label;
-$input-time-outline: #{$prefix}-labeled-outline;
-
-.#{$wrapper} {
-  padding: space(s) 0;
-  margin: space(xs) 0;
-  // border-bottom: $border-row-separator;
-
-  .#{$input-group} {
-    flex: 1;
-    & > div {
-      width: 50%;
-
-      .#{$input-time-outline} {
-        margin-top: 0;
-      }
-    }
-  }
-}
-
-.#{$inputs} {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 300px;
-}
-
-.#{$label} {
-  @include labelStyle();
-}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-date-time-recurrence-picker/components/FieldWrapper/FieldWrapper.scss

@@ -1,33 +0,0 @@
-.#{$prefix}-field-wrapper {
-  display: flex;
-  flex-direction: row;
-  .#{$prefix}-field-wrapper {
-    padding-right: space(xs);
-    flex: 1;
-  }
-  .#{$prefix}-field-wrapper:last-child {
-    padding-right: 0;
-  }
-}
-
-.#{$prefix}-field-wrapper {
-  .#{$prefix}-input,
-  .#{$prefix}-selectbox-wrapper,
-  .#{$prefix}-datepicker,
-  .#{$prefix}-time-picker .#{$prefix}-input-addon-wrapper {
-    width: 100%;
-  }
-  .#{$prefix}-selectbox__control {
-    padding-right: 0;
-  }
-  .#{$prefix}-input-addon-group *:not(:last-child) {
-    margin-right: 0;
-  }
-  .#{$prefix}-input-addon-wrapper__addon
-    .#{$prefix}-input-addon-wrapper__addon--default
-    .#{$prefix}-input-addon-wrapper__addon--right {
-    &:before {
-      display: none;
-    }
-  }
-}