@elliemae/ds-basic 2.3.0-next.2 → 2.3.0-next.6

package/styles/components/packages/ds-datagrids/node_modules/@elliemae/ds-basic/styles/components/packages/ds-form/RadioGroup/DSRadioGroup.scss

@@ -1,45 +0,0 @@
-$cmp-prefix: #{$prefix}-radio-group;
-$el-container: #{$prefix}-form-element-radio;
-
-
-.#{$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;
-  }
-
-  &--horizontal {
-    .#{$el-container} {
-      margin-right: space(l);
-    }
-  }
-}
-
-@include md {
-  .#{$cmp-prefix}-form-item-layout-wrapper{
-    .#{$cmp-prefix} {
-      padding-top: calc(#{space(xxs)} * 0.81);
-    }
-    .em-ds-em-ds-label__text {
-      font-size: 16px;
-      font-weight: font-weight(seminal);
-    }
-  }
-
-  .#{$cmp-prefix} {
-    &--horizontal {
-      .#{$el-container} {
-        margin-right: calc(#{space(s)} * 0.81);
-      }
-    }
-  }
-}

package/styles/components/packages/ds-datagrids/node_modules/@elliemae/ds-basic/styles/components/packages/ds-form/RequiredMark/RequiredMark.scss

@@ -1,19 +0,0 @@
-$el: #{$prefix}-form-required-mark;
-
-.#{$el} {
-  color: color(danger, 900);
-  font-size: font-size(100);
-  margin-left: space(xxs);
-  position: relative;
-  bottom: space(xxs);
-  &.optional-mark {
-    font-size: font-size(100);
-    color: color(brand-primary, 600);
-    font-weight: 600;
-  }
-}
-
-// PUI-5311 legend tag doesn't support flex on FF & safari
-legend.#{$prefix}-label--group .#{$el} {
-  bottom: 6px;
-}

package/styles/components/packages/ds-datagrids/node_modules/@elliemae/ds-basic/styles/components/packages/ds-form/SearchBox/DSSearchBox.scss

@@ -1,38 +0,0 @@
-// ********************************************
-// container definition
-$input-container: #{$prefix}-searchbox-toggle;
-$el-input: #{$prefix}-input;
-$expandable-input: #{$prefix}-expandable-input;
-$input-addons: #{$prefix}-input-addon-wrapper;
-
-$el-addon: #{$input-addons}__addon;
-$el-clearable-button: #{$el-input}__clearable;
-
-.#{$input-container} {
-  .#{$expandable-input} {
-    width: 2.2rem;
-  }
-  .#{$el-input}.expandable-input__input {
-    &:not(.floating-label-input-controller):hover {
-      @include dsClearFocus();
-    }
-    &:active {
-      @include dsClearFocus();
-    }
-  }
-
-  .#{$input-addons} {
-    &:focus-within,
-    &:active {
-      .#{$el-addon} .#{$el-clearable-button} {
-        @include dsClearFocus();
-      }
-    }
-
-    &:hover {
-      .#{$el-addon} .#{$el-clearable-button} {
-        @include dsClearFocus();
-      }
-    }
-  }
-}

package/styles/components/packages/ds-datagrids/node_modules/@elliemae/ds-basic/styles/components/packages/ds-form/TimeInput/DSTimeInput.scss

@@ -1,73 +0,0 @@
-// ********************************************
-// container definition
-$el-container: #{$prefix}-input-time;
-$inputs-group: #{$prefix}-input-times-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;
-    width: 25px;
-    outline: none;
-    background: none;
-    user-select: none;
-
-    &:focus {
-      background: color(brand-primary, 300);
-    }
-
-    &::placeholder {
-      text-align: center;
-      font-style: italic;
-    }
-
-    &:placeholder-shown {
-      text-align: left;
-      width: 25px;
-    }
-
-    &:nth-child(3) {
-      margin: 0 space(m) * 0.1;
-    }
-  }
-
-  &__am-pm-input {
-    &::-ms-expand {
-      display: none;
-    }
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    background: transparent;
-    border: none;
-    outline: none;
-    padding: space(xxs) * 0.5 space(xxs);
-
-    &:focus {
-      background: color(brand-primary, 300);
-    }
-  }
-}

package/styles/components/packages/ds-datagrids/node_modules/@elliemae/ds-basic/styles/components/packages/ds-form/Toggle/DSToggle.scss

@@ -1,333 +0,0 @@
-// ********************************************
-// container definition
-$el-container: #{$prefix}-form-element-toggle;
-
-
-// ********************************************
-// block
-$el-box: #{$el-container}-box;
-
-// ********************************************
-// elements
-$el-input: #{$el-container}__input;
-$el-on: #{$el-container}__icon-on;
-$el-off: #{$el-container}__icon-off;
-$el-checkbox: #{$el-container}__hidden-checkbox;
-
-// ********************************************
-// modifiers
-$el-container-checked: #{$el-container}--checked;
-$el-container-error: #{$el-container}--error;
-$el-container-disabled: #{$el-container}--disabled;
-$el-container-read-only: #{$el-container}--readonly;
-$el-container-s: #{$el-container}--s;
-$el-container-m: #{$el-container}--m;
-$el-container-l: #{$el-container}--l;
-
-
-// ********************************************
-// var
-$toggle-width-diff: calc(#{space(m)} * 0.9166);
-$toggle-width: calc((#{space(m)} * 0.9166) * 2);
-$toggle-width-m: calc((#{space(m)} * 0.9166) * 3);
-$toggle-width-l: calc((#{space(m)} * 0.9166) * 4);
-
-$toggle-height: space(s);
-$toggle-height-m: space(m);
-$toggle-height-l: space(l);
-
-$diff-spacing: calc(#{space(xxs)} * 0.5);
-$toggle-circle: calc(#{$toggle-height} - (#{space(xxs)} * 0.5));
-$toggle-circle-m: calc(#{$toggle-height-m} - (#{space(xxs)} * 0.5));
-$toggle-circle-l: calc(#{$toggle-height-l} - (#{space(xxs)} * 0.5));
-$toggle-circle-left-diff: calc((#{space(xxs)} * 0.5) * 0.5);
-$toggle-circle-right-diff:calc((#{space(xxs)} * 0.5) * (-0.5));
-
-$toggle-transition: background-color 0.1s ease 0s, box-shadow 0.1s ease 0s, opacity 0.1s ease 0s;
-
-$toggle-border-style: solid 1px;
-$toggle-border-neutral: $toggle-border-style color(neutral, 700);
-$toggle-border-on:  $toggle-border-style color(brand-primary, 700);
-$toggle-border-hover: $toggle-border-style color(brand-primary, 800);
-
-$background-neutral: color(neutral, 500);
-$background-on: color(brand-primary, 600);
-$background-hover: color(brand-primary, 700);
-
-$focus-neutral: 0 0 3px 2px rgba(color(neutral, 500),0.5);
-$focus-on: 0 0 3px 2px rgba(color(brand-primary, 700),0.5);
-
-@keyframes fadein {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-// ********************************************
-// Default state
-.#{$el-container}{
-  @include border-radius(space(xs));
-  position: relative;
-  display: inline-block;
-  opacity: 1;
-  outline: none;
-  touch-action: none;
-  user-select: none;
-  transition: $toggle-transition;
-  height: space(s);
-  width: $toggle-width;
-  &.ds-form-element-toggle-hide {
-    opacity: 0;
-  }
-  &.#{$el-container-s}.#{$el-input}{
-    left: 37px;
-  }
-  &.#{$el-container-m}.default-state-checked .#{$el-input}{    
-    left: 54px;
-  }
-  &.#{$el-container-l}.default-state-checked .#{$el-input}{
-    left: 71px
-  }
-  position: relative;
-  z-index: 0;
-  &:focus {
-    &:before{
-      display: block;
-      content: "";
-      position: absolute;
-      top: -2px;
-      left: -2px;
-      width: calc(100% + 4px);
-      height: calc(100% + 4px);
-      pointer-events: none;
-      border: solid 2px color(brand-primary, 600);
-    }
-    &:after{
-      display: block;
-      content: "";
-      position: absolute;
-      top: -1px;
-      left: -1px;
-      width: calc(100% + 2px);
-      height: calc(100% + 2px);
-      pointer-events: none;
-      border: solid 1px color(brand-primary, 300);
-    }
-  }
-  &:after, &:before{
-    @include border-radius(space(s));
-  }
-}
-
-.#{$el-box}{
-  @include border-radius(space(xs));
-  border: $toggle-border-neutral;
-  height: space(s);
-  width: $toggle-width;
-  background: $background-neutral;
-  color:color-contrast($background-neutral,color(neutral, 900), color(neutral, 000));
-  transition: $toggle-transition;
-  display: flex;
-  justify-content: flex-end;
-  position: relative;
-  cursor: pointer;
-  &:hover{
-    background: color(neutral, 600);
-  }
-}
-
-.#{$el-input}{
-  @include border-radius(50%);
-  height: $toggle-circle;
-  width: $toggle-circle;
-  background: color(neutral, 000);
-  transition: $toggle-transition;
-  display: inline-block;
-  position: absolute;
-  top: calc(#{space(xxs)} * 0.25);  // show 1px of border
-  left: 0;
-  margin-left: $toggle-circle-left-diff;
-  cursor: pointer;
-  &.default-state-checked{
-    left: 58px;
-  }
-}
-
-.#{$el-on},
-.#{$el-off}{
-  width: 100%;
-  text-align: center;
-  @include body-micro-text-style(semibold);
-  padding: 0 space(xxs);
-  line-height: $toggle-height;
-}
-.#{$el-on}{
-  padding: 0 $toggle-circle 0 $diff-spacing;
-}
-.#{$el-off}{
-  padding: 0 $diff-spacing 0 $toggle-circle;
-}
-
-.#{$el-checkbox} {
-  display: none;
-}
-
-// ********************************************
-// Sizes
-.#{$el-container-m} {
-  @include border-radius(space(m));
-  width: $toggle-width-m;
-  height: space(m);
-
-  .#{$el-box}{
-    @include border-radius(space(m));
-    height: space(m);
-    width: $toggle-width-m;
-  }
-
-  .#{$el-input}{
-    height: $toggle-circle-m;
-    width: $toggle-circle-m;
-  }
-
-  .#{$el-on},
-  .#{$el-off}{
-    width: 100%;
-    text-align: center;
-    line-height: $toggle-height-m;
-    font-size: font-size(500);
-    padding: 0 space(xs);
-  }
-  .#{$el-on}{
-    padding: 0 $toggle-circle-m 0 space(xxs);
-  }
-  .#{$el-off}{
-    padding: 0 space(xxs) 0 $toggle-circle-m;
-  }
-  
-    &:after, &:before{
-      @include border-radius(space(m));
-    }
-  
-}
-
-.#{$el-container-l} {
-  @include border-radius(space(l));
-  width: $toggle-width-l;
-  height: space(l);
-
-  .#{$el-box}{
-    @include border-radius(space(l));
-    height: space(l);
-    width: $toggle-width-l;
-  }
-
-  .#{$el-input}{
-    height: $toggle-circle-l;
-    width: $toggle-circle-l;
-  }
-
-  .#{$el-on},
-  .#{$el-off}{
-    width: 100%;
-    text-align: center;
-    @include body-micro-text-style(semibold);
-    line-height: $toggle-height-l;
-    font-size: font-size(700);
-  }
-
-  .#{$el-on}{
-    padding: 0 $toggle-circle-l 0 space(xs);
-  }
-  .#{$el-off}{
-    padding: 0 space(xs) 0 $toggle-circle-l;
-  }
-
-    
-  &:after, &:before{
-    @include border-radius(space(l));
-  }
-}
-
-// ********************************************
-// Checked
-.#{$el-container-checked}{
-
-  .#{$el-box}{
-    justify-content: flex-start;
-    border: $toggle-border-on;
-    background: $background-on;
-    color:color-contrast($background-neutral, color(neutral, 900), color(neutral, 000));
-  }
-
-  .#{$el-input} {
-    margin-left: $toggle-circle-right-diff;
-  }
-
-  &:hover {
-    .#{$el-box}{
-      border: $toggle-border-hover;
-      background: $background-hover;
-    }
-  }
-  &:focus {
-    &:before{
-      border: solid 2px color(brand-primary, 700);
-    }
-    &:after{
-      border: solid 1px color(brand-primary, 300);
-    }
-  }
-
-  &:active{
-    background: color(brand-primary, 700);
-  }
-}
-
-// ********************************************
-// Disable
-.#{$el-container-disabled}{
-  .#{$el-box}{
-    cursor: not-allowed;
-    border: solid 1px transparent;
-    background: color(neutral, 100);
-    color: #5C6574;
-  }
-
-  .#{$el-input}{
-    background: color(neutral, 000);
-  }
-
-  &:hover {
-    .#{$el-box}{
-      border: solid 1px transparent;
-      background: color(neutral, 100);
-    }
-  }
-}
-
-
-// ********************************************
-// Read Only
-.#{$el-container-read-only}{
-
-  .#{$el-box}{
-    cursor: not-allowed;
-    border: $toggle-border-neutral;
-    background: $background-neutral;
-    color: color(neutral, 000);
-  }
-
-  .#{$el-input}{
-    background: color(neutral, 100);
-  }
-
-  &:hover {
-    .#{$el-box}{
-      border: $toggle-border-neutral;
-      background: $background-neutral;
-    }
-  }
-  &:focus {
-    @include box-shadow($focus-neutral);
-  }
-
-}

package/styles/components/packages/ds-datagrids/node_modules/@elliemae/ds-basic/styles/components/packages/ds-group-box/DSGroupBox.scss

@@ -1,11 +0,0 @@
-// ********************************************
-// container definition
-$group-box-wrapper: #{$prefix}-group-box__wrapper;
-$group-box-content: #{$prefix}-group-box__content;
-$group-box-label: #{$prefix}-group-box__label;
-
-// ********************************************
-@import "./styles/wrapper.scss";
-@import "./styles/group.scss";
-@import "./styles/label.scss";
-@import "./styles/tree.scss";

package/styles/components/packages/ds-datagrids/node_modules/@elliemae/ds-basic/styles/components/packages/ds-group-box/styles/group.scss

@@ -1,59 +0,0 @@
-.#{$group-box-content} {
-  padding: space(m) 0;
-  border: $theme-base-border-style color(neutral, 200);
-
-  &--no-border-top {
-    border-top: none;
-  }
-
-  &.#{$group-box-content}--group-box {
-    padding: space(m) 0;
-  }
-  &--only-header {
-    border: none;
-  }
-  &--no-border {
-      border: none;
-      .#{$group-box-label} {
-        border-bottom: none;
-      }
-  }
-}
-
-// as row
-.#{$group-box-content} {
-  &--as-row {
-    display: flex;
-    flex-direction: row;
-    padding-left: 0;
-    padding-right: 0;
-
-    .#{$group-box-wrapper}.#{$group-box-wrapper}--main-box {
-      .#{$group-box-content} {
-        padding-left: 0;
-      }
-  }
-
-    .#{$group-box-wrapper} {
-      flex: 1;
-      margin-left: space(m);
-    }
-    .#{$group-box-wrapper}:first-child {
-      margin-left: 0;
-      border-left: none;
-    }
-    .#{$group-box-wrapper}:last-child {
-      border-right: none;
-    }
-  }
-  &--no-padding {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  &--no-border {
-    border: none;
-    .#{$group-box-wrapper} {
-      border: none;
-    }
-  }
-}

package/styles/components/packages/ds-datagrids/node_modules/@elliemae/ds-basic/styles/components/packages/ds-group-box/styles/label.scss

@@ -1,28 +0,0 @@
-$group-box-label: #{$prefix}-group-box__label;
-
-.#{$group-box-label} {
-  &--category-box {
-    width: 100%;
-    height: space(l) * 1.1252;
-    padding:0 0;
-    color: color(neutral, 800);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    border-bottom: $theme-base-border-style color(neutral, 200);
-  }
-
-  &--no-border{
-    border: none;
-  }
-
-  &.#{$group-box-label}--group-box {
-    border: unset;
-    font-size: font-size(500);
-    padding: 12px 0;
-
-    &.#{$group-box-label}--border-bottom {
-      border-bottom: $theme-base-border-style color(neutral, 200);
-    }
-  }
-}

package/styles/components/packages/ds-datagrids/node_modules/@elliemae/ds-basic/styles/components/packages/ds-group-box/styles/tree.scss

@@ -1,57 +0,0 @@
-$cat: #{$group-box-content}--category-box;
-$group: #{$group-box-wrapper}--group-box;
-
-.#{$cat} {
-  .#{$group}:first-child {
-    border-left: none;
-  }
-  .#{$group}:last-child {
-    border-right: none;
-  }
-
-  .#{$group-box-wrapper} {
-    .#{$group-box-content} {
-      padding-left: space(s);
-    }
-  }
-  .#{$group-box-wrapper}:first-child {
-    .#{$group-box-content} {
-      border-left: none;
-    }
-  }
-  .#{$group-box-wrapper}:last-child {
-    .#{$group-box-content} {
-      border-right: none;
-    }
-  }
-}
-
-.#{$group-box-wrapper}--no-border {
-  .#{$cat} {
-    .#{$group-box-wrapper}:first-child {
-      .#{$group-box-content} {
-        border-left: $theme-base-border-style color(neutral, 200);
-      }
-      .#{$group-box-content}--no-border {
-        border-left: none;
-      }
-    }
-
-    .#{$group-box-wrapper}:last-child {
-      .#{$group-box-content} {
-        border-right: $theme-base-border-style color(neutral, 200);
-      }
-      .#{$group-box-content}--no-border {
-        border-right: none;
-      }
-    }
-  }
-}
-
-
-
-.#{$group} {
-  & > .#{$cat} {
-    padding-top: 0;
-  }
-}

package/styles/components/packages/ds-datagrids/node_modules/@elliemae/ds-basic/styles/components/packages/ds-group-box/styles/wrapper.scss

@@ -1,17 +0,0 @@
-.#{$group-box-wrapper} {
-  display: flex;
-  flex-direction: column;
-  &--no-border {
-    border: none;
-  }
-
-  &--main-box {
-    > .#{$group-box-content} {
-      //padding-left: space(s);
-      &--as-row{
-        padding-left: 0;
-        padding-right: 0;
-      }
-    }
-  }
-}