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

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

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

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

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

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

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

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

@@ -1,46 +0,0 @@
-// ********************************************
-// container definition
-$cmp-prefix: #{$prefix}-checkbox-group;
-$el-container: #{$prefix}-form-element-checkbox;
-.#{$cmp-prefix}-form-item-layout-wrapper {
-  display: inline-flex;
-  .#{$cmp-prefix} {
-    padding-top: space(xs);
-  }
-}
-.#{$cmp-prefix} {
-  display: flex;
-  flex-wrap: wrap;
-  &--vertical {
-    flex-direction: column;
-    label {
-      margin-bottom: space(xs);
-    }
-  }
-  &--horizontal {
-    .#{$el-container} {
-      margin-right: space(l);
-    }
-  }
-}
-// Mobile
-@include md {
-  .#{$cmp-prefix} {
-    &--horizontal {
-      .#{$el-container} {
-        margin-right: toMobile(space(s));
-      }
-    }
-  }
-  .#{$cmp-prefix}-form-item-layout-wrapper {
-    .#{$cmp-prefix} {
-      padding-top: toMobile(space(xs));
-    }
-  }
-}

@@ -1,52 +0,0 @@
-// ********************************************
-// container definition
-$el-container: #{$prefix}-date-input;
-$inputs-group: #{$prefix}-input-date-group;
-$inputs-group-divider: #{$inputs-group}__divider;
-.#{$el-container} {
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-.#{$inputs-group} {
-  display: flex;
-  align-items: center;
-  .#{$inputs-group-divider} {
-    font-style: italic;
-    color: color(neutral, 500);
-  }
-  .#{$inputs-group-divider}--value {
-    font-style: unset;
-    color: color(neutral, 800);
-  }
-  &__input {
-    @include placeholder {
-      color: color(neutral, 500);
-      font-style: italic;
-    }
-    text-align: center;
-    border: none;
-    max-width: space(m) * 1.1;
-    outline: none;
-    background: none;
-    user-select: none;
-    &.input-year {
-      min-width: space(m) * 1.4;
-      max-width: space(m) * 1.8;
-    }
-    &:focus {
-      background: color(brand-primary, 300);
-    }
-    &:active {
-      @include dsActive();
-    }
-  }
-}

@@ -1,88 +0,0 @@
-// ********************************************
-// container definition
-$expandable-container: #{$prefix}-expandable-input;
-$input-controller: #{$prefix}-input;
-$input-addon-wrapper: #{$prefix}-input-addon-wrapper;
-$btn-controller: #{$prefix}-button;
-$radius: $theme-base-border-radius;
-$border-type: border-size() solid;
-$input-height: space(m) * 1.17; // TODO: define global input sizes
-$btn-min-width: space(m) * 1.3;
-$btn-min-width-diff: space(m) * 1.3 - 0.3;
-.#{$expandable-container} {
-  display: flex;
-  position: relative;
-  height: $input-height;
-  outline: none;
-  color: color(neutral, 500);
-  box-sizing: border-box;
-  background: color(neutral, 000);
-  transition: all duration(base) easing(base);
-  width: $btn-min-width;
-  @include border-radius($radius);
-  .#{$input-controller}:focus,
-  .#{$btn-controller}:focus {
-    box-shadow: none;
-  }
-  > * {
-    width: 100%;
-  }
-  .#{$input-addon-wrapper} {
-    border: none;
-    height: initial;
-    flex: initial;
-    transition: all duration(base) easing(base);
-    .expandable-input__input {
-      width: 0;
-      position: relative;
-      opacity: 0;
-      border: none;
-      padding: 0;
-      flex: initial;
-      transition: all duration(base) easing(base);
-    }
-    &__addon:last-child {
-      position: absolute;
-      right: 0;
-    }
-  }
-  .#{$btn-controller} {
-    height: 100%;
-  }
-  &__wrapper {
-    width: 100%;
-  }
-  &--opened {
-    width: 100%;
-    @include dsFakeBorder();
-    .#{$input-addon-wrapper} {
-      .expandable-input__input {
-        opacity: 1;
-        width: calc(100% - #{$btn-min-width-diff});
-        padding: 0 space(xs);
-        position: relative;
-        z-index: 2;
-        &:focus,
-        &:focus-within {
-          @include dsFocus();
-        }
-        .expandable-input__input {
-          &:focus,
-          &:focus-within {
-            @include dsClearFocus();
-          }
-        }
-      }
-    }
-  }
-}

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