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

package/dist/styles/components/packages/ds-form/Radio/DSRadio.scss

@@ -1,247 +0,0 @@
-// ********************************************
-// container definition
-$el-container: #{$prefix}-form-element-radio;
-$el-container-error: #{$el-container}--error;
-$el-container-disabled: #{$el-container}--disabled;
-$el-container-read-only: #{$el-container}--readonly;
-
-// ********************************************
-// elements
-$el-input: #{$el-container}__input;
-$el-label: #{$el-container}__label;
-$el-button: #{$el-container}__input-button;
-$el-text: #{$el-container}__label-text;
-$el-children: #{$el-container}__radio-children;
-
-// ********************************************
-// local
-$border-type: solid 1px;
-$border-type-focus: solid 2px;
-$border-type-mobile: solid 2px;
-$border-type-focus-mobile: solid 3px;
-
-.#{$el-input} {
-  position: absolute;
-  opacity: 0;
-  right: 0;
-}
-
-.#{$el-text} {
-  @include body-text-style();
-  transition: duration(base) easing(base);
-  color: color(neutral, 800);
-  line-height: 100%;
-  position: relative;
-  bottom: -1px; // fix - extra pixel below the text
-}
-
-.#{$el-button} {
-  border-radius: 50% !important;
-  transition: duration(base) easing(base);
-  width: space(s);
-  min-width: space(s);
-  height: space(s);
-  margin-right: space(xs);
-  border: $border-type color(neutral, 400);
-  background: color(neutral, 000);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  align-self: flex-start;
-  position: relative;
-}
-
-.#{$el-label} {
-  position: relative;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-
-.#{$el-children} {
-  padding-left: space(m);
-}
-
-// ********************************************
-// Default container & elements           *****
-.#{$el-container} {
-  width: fit-content;
-  padding-bottom: space(s);
-  circle.unchecked {
-    fill: color(neutral, 000);
-  }
-
-  .#{$el-label} {
-    &:hover {
-      .#{$el-button} {
-        border-color: color(brand-primary, 600);
-        background-color: color(brand-primary, 200);
-      }
-      circle.unchecked {
-        fill: color(brand-primary, 200);
-      }
-    }
-    .#{$el-button} {
-      &:focus {
-        box-shadow: none;
-      }
-
-      &:focus:not(:active) {
-        border: $border-type-focus color(brand-primary, 700);
-      }
-
-      &:active {
-          background-color: color(neutral, 000);
-        circle.unchecked {
-          fill: color(neutral, 000);
-        }
-      }
-    }
-  }
-
-  .#{$el-input} {
-    &:checked + .#{$el-button} {
-      circle.checked {
-        fill: color(brand-primary, 600);
-      }
-    }
-  }
-}
-
-// ********************************************
-// Error container & elements             *****
-.#{$el-container-error} {
-  .#{$el-button} {
-    border-color: color(danger, 900);
-  }
-
-  .#{$el-label} {
-    &:hover {
-      .#{$el-button}:not(:focus) {
-        border-color: color(danger, 900);
-      }
-    }
-    &:active {
-      .#{$el-button} {
-        border-color: color(danger, 900);;
-      }
-      circle.unchecked {
-        fill: color(neutral, 080);
-      }
-    }
-  }
-
-  .#{$el-input} {
-    &:checked + .#{$el-button} {
-      circle.checked {
-        fill: color(danger, 900);
-      }
-    }
-  }
-}
-
-// ********************************************
-// Disabled container & elements          *****
-.#{$el-container-disabled} {
-  circle.checked {
-    fill: color(neutral, 400);
-  }
-  circle.unchecked {
-    fill: color(neutral, 080);
-  }
-
-  .#{$el-label} {
-    cursor: not-allowed;
-    &:hover {
-      .#{$el-button} {
-        border-color: color(neutral, 400);
-        background-color: color(neutral, 080);
-      }
-      circle.unchecked {
-        fill: color(neutral, 080);
-      }
-    }
-    &:active {
-      .#{$el-button} {
-        background-color: color(neutral, 080);
-      }
-      circle.unchecked {
-        fill: color(neutral, 080);
-      }
-    }
-
-    .#{$el-input} {
-      &:checked + .#{$el-button} {
-        background-color: color(neutral, 080);
-      }
-    }
-  }
-
-  .#{$el-text} {
-    color: color(neutral, 500);
-  }
-
-  .#{$el-button} {
-    pointer-events: none;
-    background: color(neutral, 080);
-    &:hover {
-      border-color: color(neutral, 400);
-    }
-  }
-}
-
-// ********************************************
-// Read only container & elements         *****
-.#{$el-container-read-only} {
-  .#{$el-label} {
-    &:hover {
-      .#{$el-button} {
-        border-color:  color(neutral, 400);
-      }
-    }
-  }
-  .#{$el-input} {
-    &:checked + .#{$el-button} {
-      circle.checked {
-        fill: color(neutral, 500);
-      }
-    }
-  }
-}
-
-@include md {
-  .#{$el-text} {
-    font-size: 16px;
-  }
-
-  .#{$el-container} {
-    padding-bottom: calc(#{space(m)} * 0.4);
-    -webkit-tap-highlight-color: transparent;
-
-    .#{$el-label} {
-      padding: calc(#{space(xxs)} * 0.81) 0;
-      .#{$el-button} {
-        border: $border-type-mobile color(neutral, 400);
-        &:focus {
-          border: $border-type-focus-mobile color(brand-primary, 700);
-        }
-      }
-    }
-  }
-  
-  .#{$el-button} {
-    width: calc(#{space(s)} * 1.22);
-    min-width: calc(#{space(s)} * 1.22);
-    height: calc(#{space(s)} * 1.22);
-    border: $border-type-mobile color(neutral, 400);
-    margin-right: calc(#{space(s)} * 0.81);
-  }
-
-  .#{$el-container-error} {
-    .#{$el-label} { // added this specificity so it correctly overwrites the error state
-      .#{$el-button} {
-        border: $border-type-mobile color(danger, 900);
-      }
-    }
-  }
-}

package/dist/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/dist/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/dist/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/dist/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/dist/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";