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

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

@@ -0,0 +1,296 @@
+// ********************************************
+// 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-date-range-picker/components/DatePickerLabel/DatePickerLabel.scss

@@ -0,0 +1,31 @@
+$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-date-range-picker/components/DatePickerRangeHeader/DatePickerRangeHeader.scss

@@ -0,0 +1,10 @@
+$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-date-range-selector/DSDateRangeSelector.scss

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

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

@@ -0,0 +1,20 @@
+$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-date-time-picker/components/DateTimePickerImpl.scss

@@ -0,0 +1,43 @@
+// ********************************************
+// 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-date-time-recurrence-picker/DSDateTimeRecurrenceSelector.scss

@@ -0,0 +1,20 @@
+$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-date-time-recurrence-picker/components/DateTimeRecurrenceSelectorImpl.scss

@@ -0,0 +1,31 @@
+$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-date-time-recurrence-picker/components/DayOfMonthPicker/DayOfMonthPicker.scss

@@ -0,0 +1,10 @@
+$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-date-time-recurrence-picker/components/DayOfYearPicker/DayOfYearPicker.scss

@@ -0,0 +1,10 @@
+$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-date-time-recurrence-picker/components/DaysOfWeekPicker/DaysOfWeekPicker.scss

@@ -0,0 +1,131 @@
+$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-date-time-recurrence-picker/components/EndDate/EndDate.scss

@@ -0,0 +1,32 @@
+$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-date-time-recurrence-picker/components/FieldWrapper/FieldWrapper.scss

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