@elliemae/ds-basic 2.3.0-alpha.9 → 2.3.0-next.3

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

@@ -0,0 +1,33 @@
+$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/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/styles/components/packages/ds-date-range-selector/DSDateRangeSelector.scss

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

package/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 {
+  .#{$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/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/styles/components/packages/ds-date-time-recurrence-picker/DSDateTimeRecurrenceSelector.scss

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

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

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

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

package/styles/components/packages/ds-date-time-recurrence-picker/components/Forms/Forms.scss

@@ -0,0 +1,44 @@
+$form-group: #{$prefix}-form-group;
+$form-label: #{$prefix}-form-label;
+$form-field: #{$prefix}-form-field;
+$form-field-group: #{$prefix}-form-field-group;
+
+// ********************************************
+// dimsum components
+$dsinput: #{$prefix}-input;
+
+.#{$form-group} {
+  display: flex;
+  align-items: center;
+  margin-bottom: space(s);
+
+   .#{$dsinput} {
+     width: 100%;
+   }
+
+   .#{$form-label} {
+     @include labelStyle();
+     text-align: right;
+     padding-right: space(m);
+     min-width: space(xxl) * 2;
+   }
+   .#{$form-field-group} {
+     flex: 1;
+     display: flex;
+     justify-content: space-between;
+
+     > div {
+       flex: 1;
+     }
+
+     .#{$form-field} {
+       flex: 1;
+
+       &:first-child {
+         margin-right: space(xs);
+       }
+     }
+   }
+}
+
+

package/styles/components/packages/ds-date-time-recurrence-picker/components/LabelWrapper/LabelWrapper.scss

@@ -0,0 +1,4 @@
+.#{$prefix}-label-wrapper{
+  text-align: right;
+  padding-right: space(m);
+}

package/styles/components/packages/ds-date-time-recurrence-picker/components/RepeatPickerInput/RepeatPickerInput.scss

@@ -0,0 +1,12 @@
+$wrapper: #{$prefix}-repeat-picker-input-range-selector;
+$label: #{$wrapper}__label;
+$input-group: #{$prefix}-input-addon-group;
+
+
+.#{$wrapper}{
+  margin-bottom: space(xs);
+}
+
+.#{$label}{
+  @include labelStyle();
+}

package/styles/components/packages/ds-date-time-recurrence-picker/components/StartDateTime/StartDateTime.scss

@@ -0,0 +1,47 @@
+$wrapper: #{$prefix}-start-date-time-picker;
+$inputs: #{$prefix}-start-date-time-picker-inputs;
+
+
+$label: #{$wrapper}__label;
+$input-time-outline: #{$prefix}-labeled-outline;
+$icon-btn:  #{$prefix}-icon-button;
+
+.#{$wrapper}{
+  padding: space(s) 0;
+  margin: space(xs) 0;
+  // border-top: $border-row-separator;
+  // border-bottom: $border-row-separator;
+
+  .#{$input-group}{
+    flex: 1;
+    & > div{
+      width: 50%;
+
+      .#{$input-time-outline}{
+        margin-top: 0;
+      }
+    }
+    .#{$icon-btn}{
+      outline: none;
+    }
+  }
+}
+
+.#{$label}{
+  @include labelStyle();
+}
+
+.#{$prefix}-datepicker-range-inputs{
+  display: flex;
+  .SingleDatePicker{
+    flex: 1;
+    .SingleDatePickerInput,
+    .DateInput{
+      width: 100%;
+    }
+  }
+}
+
+.#{$prefix}-modal.datetime-alert-modal{
+  z-index: 112;
+}

package/styles/components/packages/ds-date-time-recurrence-picker/components/TimeZonePicker/TimeZonePicker.scss

@@ -0,0 +1,19 @@
+$wrapper: #{$prefix}-timezone-picker-input-range-selector;
+$label: #{$wrapper}__label;
+$input-group: #{$prefix}-input-addon-group;
+
+
+.#{$wrapper}{
+  padding: 0 0 space(s) 0;
+  margin: 0 0 space(xs) 0;
+  .#{$input-group}{
+    flex: 1;
+    & > div{
+      width: 50%;
+    }
+  }
+}
+
+.#{$label}{
+  @include labelStyle();
+}

package/styles/components/packages/ds-date-time-recurrence-picker/components/ValidationMessage/ValidationMessage.scss

@@ -0,0 +1,4 @@
+.#{$prefix}-recurrence-selector-validation-message{
+    text-align: center;
+    padding: space(xs);
+}

package/styles/components/packages/ds-dropdownmenu/DSDropdownMenu.scss

@@ -0,0 +1,128 @@
+// ********************************************
+// container definition
+$menu-container: #{$prefix}-menu;
+$menu-select-container: #{$prefix}-menu-select;
+$item-container: #{$prefix}-menu-item;
+$backdrop-el: #{$prefix}-menu__backdrop;
+$select-container: #{$prefix}-selectbox;
+
+$border-radius: $theme-base-border-radius;
+
+.#{$backdrop-el} {
+  width: 100%;
+  height: 100%;
+  opacity: 0.5;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.#{$menu-container}-s {
+  &--is-root {
+    margin: space(xxs) 0
+  }
+  border: 1px solid color(neutral, 200);
+  margin: 0;
+  display: inline-block;
+  padding: space(xs) 0;
+  background: color(neutral, 000);
+  color: color(neutral, 800);
+  list-style: none;
+  width: 100%;
+  min-width: space(xxl) * 2;
+  @include border-radius($border-radius);
+  @include box-shadow(depth(200));
+
+  .#{$select-container}__control {
+    margin: 0 space(xs)
+  }
+
+  .#{$select-container}__option {
+    // todo: we need a way to avoid doing arithmetic here
+    padding: space(xs) * 1.25 space(l) space(xs) * 1.25 space(s);
+  }
+}
+
+.#{$menu-container}__separator1 {
+  margin: space(xs) 0;
+  small {
+    padding: 0 space(s);
+    color: color(neutral, 500)
+  }
+  &:after {
+    content: '';
+    display: block;
+    height: 1px;
+    width: 100%;
+    background-color: color(neutral, 100);
+  }
+}
+
+.#{$item-container}s {
+  display: flex;
+  padding: space(xs) space(xs) * 1.5 space(xs) space(xs) * 1.5;
+  transition: background-color duration(fast) easing(base);
+  align-items: center;
+  height: space(l);
+
+  &__content {
+    cursor: pointer;
+    display: flex;
+    flex: 1;
+    align-items: center;
+  }
+
+  &__selectable-container {
+    padding-right: space(xs);
+    min-width: space(m);
+    svg, svg:not([fill]) {
+      @include icon(s, color(brand-primary, 600));
+    }
+  }
+
+  &:hover, &--active {
+    background-color: color(brand-primary, 200);
+  }
+
+  .menu-item-icon {
+    @include icon(s, color(neutral, 600));
+    margin-right: space(xs) * 1.5;
+  }
+
+  .drill-down-icon {
+    @include icon(s, color(brand-primary, 600));
+    margin-left: space(xs);
+    margin-right: space(xxs) * -1;
+  }
+
+  &__label {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    user-select: none;
+    margin-right: space(s);
+    margin-top: space(xxs) * 0.5;
+    flex: 1;
+  }
+
+  &--selected {
+    background: color(brand-primary, 600);
+    color: color(neutral, 000);
+    svg, svg:not([fill]) {
+      fill: color(neutral, 000);
+    }
+  }
+
+  &:active {
+    background-color: color(brand-primary, 600);
+    color: color(neutral, 000);
+    svg, svg:not([fill]) {
+      fill: color(neutral, 000);
+    }
+  }
+
+}
+
+.#{$menu-select-container} {
+  &__icon {
+    padding: 0 space(xxs) 0 space(xxs);
+  }
+}