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

package/styles/components/packages/ds-indeterminate-progress-indicator/DSIndeterminateProgressIndicator.scss

@@ -1,167 +0,0 @@
-// ********************************************
-// container definition
-$indeterminate-progress-indicator: #{$prefix}-indeterminate-progress-indicator;
-$complete: #{$indeterminate-progress-indicator}-complete;
-$failed: #{$indeterminate-progress-indicator}-failed;
-$bar: #{$indeterminate-progress-indicator}__bar;
-$indicator: #{$indeterminate-progress-indicator}__bar-indicator;
-$tooltip-text: #{$indeterminate-progress-indicator}-tooltip-text;
-.#{$bar} {
-  background-color: color(neutral, 100);
-  overflow: hidden;
-}
-.#{$indicator} {
-  height: space(xxs);
-}
-
-@keyframes indeterminateAnimation {
-  0% {
-    transform: scaleX(0.015);
-    transform-origin: 0% 0%;
-    background-image: linear-gradient(to right, rgba(255,255,255,0.8) 10%, color(brand-primary, 500));
-  }
-
-  25% {
-    transform: scaleX(0.4);
-  }
-
-  50% {
-    transform: scaleX(0.015);
-    transform-origin: 100% 0%;
-    background-image: linear-gradient(to right, rgba(255,255,255,0.8) 10%, color(brand-primary, 500));
-  }
-
-  50.1% {
-    transform: scaleX(0.015);
-    transform-origin: 100% 0%;
-    background-image: linear-gradient(to left, rgba(255,255,255,0.8) 10%, color(brand-primary, 500));
-  }
-
-  75% {
-    transform: scaleX(0.4);
-  }
-
-  100% {
-    transform: scaleX(0.015);
-    transform-origin: 0% 0%;
-    background-image: linear-gradient(to left, rgba(255,255,255,0.8) 10%, color(brand-primary, 500));
-  }
-}
-
-
-@keyframes processingSuccess {
-  0%, 30% { transform: translateX(-50%); width: 50% }
-  15%     { transform: translateX(150%); width: 50% }
-  0%, 60% { transform: translateX(-50%); width: 50% }
-  45%     { transform: translateX(150%); width: 50% }
-  0%, 90% { transform: translateX(-50%); width: 50% }
-  75%     { transform: translateX(150%); width: 50% }
-  100%    { transform: translateX(0%); }
-}
-@keyframes processingSuccessEnd {
-  0%{ transform: translateX(-50%); width: 50% }
-  45%     { transform: translateX(150%); width: 50% }
-  100%    { transform: translateX(0%); background-color: color(success, 900); }
-}
-
-@keyframes processingFail {
-  0%, 30% { transform: translateX(-50%); width: 50% }
-  15%     { transform: translateX(150%); width: 50% }
-  0%, 60% { transform: translateX(-50%); width: 50% }
-  45%     { transform: translateX(150%); width: 50% }
-  0%, 90% { transform: translateX(-50%); width: 50% }
-  75%     { transform: translateX(150%); width: 50%; }
-  100%    { transform: translateX(0%); }
-}
-@keyframes processingFailEnd{
-  0%      { transform: translateX(-50%); width: 50% }
-  45%     { transform: translateX(150%); width: 50% }
-  100%    { transform: translateX(0%); background-color: #e34256; }
-}
-@keyframes labelAnimation {
-  0% { opacity: 1 }
-  92%     { opacity: 1 }
-  95%     { opacity: 0 }
-  100%    { opacity: 1 }
-}
-
-
-.#{$indeterminate-progress-indicator} {
-  width: 100%;
-  padding: space(xs) space(m);
-
-  &-default {
-    .#{$indicator} {
-      background-color: color(neutral, 500);
-      width: 50%;
-    }
-  }
-  &-complete {
-    .#{$indicator} {
-      background-color: color(success, 900);
-    }
-  }
-  &-failed {
-    .#{$indicator} {
-      background-color: #e34256;
-    }
-  }
-  &-processing {
-    .#{$indicator} {
-      background-color: color(brand-primary, 500);
-      width: 50%;
-    }
-    &.animated {
-      .#{$indicator} {
-        width: 100%;
-        animation: indeterminateAnimation 2s cubic-bezier(.645, .045, .355, 1) infinite;
-      }
-    }
-    &.#{$complete}{
-      .#{$indicator} {
-        animation: processingSuccessEnd 1s ease-in-out;
-        animation-fill-mode: forwards;
-      }
-      .#{$tooltip-text}{
-        animation: labelAnimation 1s ease-in-out;
-      }
-    }
-  }
-  &-processing-complete {
-    .#{$indicator} {
-      background-color: color(brand-primary, 500);
-      width: 50%;
-      animation: processingSuccess 4s infinite;
-      animation-fill-mode: forwards;
-    }
-    &.#{$complete}{
-      .#{$indicator} {
-        animation: processingSuccessEnd 1s ease-in-out;
-        animation-fill-mode: forwards;
-      }
-      .#{$tooltip-text}{
-        animation: labelAnimation 1s ease-in-out;
-      }
-    }
-  }
-  &-processing-fail {
-    .#{$indicator} {
-      background-color: color(brand-primary, 500);
-      width: 50%;
-      animation: processingFail 4s infinite;
-      animation-fill-mode: forwards;
-    }
-    &.#{$failed}{
-      .#{$indicator} {
-        animation: processingFailEnd 1s ease-in-out;
-        animation-fill-mode: forwards;
-      }
-      .#{$tooltip-text}{
-        animation: labelAnimation 1s ease-in-out;
-      }
-    }
-  }
-  &.line-only {
-    padding: 0;
-  }
-}

package/styles/components/packages/ds-label-value/DSLabelValue.scss

@@ -1,132 +0,0 @@
-// ********************************************
-// container definition
-$el-label-value: #{$prefix}-labelValue;
-$el-label-value-group: #{$prefix}-labelValueGroup;
-
-// ********************************************
-// elements definition
-$el-wrapper: #{$el-label-value}__wrapper;
-$el-label-value-group-wrapper: #{$el-label-value-group}__wrapper;
-$el-label-value-wrapper: #{$el-label-value}__label-value-wrapper;
-$el-label-value-label: #{$el-label-value}__label;
-$el-label-value-value: #{$el-label-value}__value;
-
-.#{$el-label-value-group-wrapper} {
-  display: flex;
-  flex-direction: column;
-  width: fit-content; 
-  max-width: 100%;
-}
-
-.#{$el-label-value-group-wrapper}--horizontal {
-  flex-direction: row;
-
-  &.#{$el-label-value-group-wrapper}--inline {
-    .#{$el-wrapper} {
-      .#{$el-label-value-wrapper} {
-        flex-direction: row;
-  
-        .#{$el-label-value-label} {
-          margin-right: space(xs)
-        }
-      }
-    }
-  }  
-}
-
-.#{$el-label-value-group-wrapper}--vertical {
-  align-items: flex-end;
-
-  &.#{$el-label-value-group-wrapper}--inline {
-    align-items: unset;
-    .#{$el-wrapper} {
-      margin: space(xs);
-
-      .#{$el-label-value-wrapper} {
-        flex-direction: row;
-  
-        .#{$el-label-value-label} {
-          margin-right: space(xs)
-        }
-      }
-    }
-  }  
-}
-
-.#{$el-wrapper} {
-  display: flex;
-  flex-direction: row;
-  width: auto; 
-  max-width: 100%;
-  margin: space(s);
-
-  .em-ds-icon {
-    margin-top: 1rem;
-    fill: color(neutral, 500);
-    height: auto;
-    margin-right: space(xxs);
-    
-    svg {
-      height: auto;
-    }
-  }
-
-  &.#{$el-wrapper}--inverted {
-    .em-ds-icon {
-      margin-bottom: 1rem;
-      margin-top: unset;
-    }
-  }
-
-  .#{$el-label-value-wrapper} {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    flex-direction: column;
-
-    .#{$el-label-value-value} {
-      display: inline-flex;
-    }
-  
-    .#{$el-label-value-label}--neutral500,
-    .#{$el-label-value-value}--neutral500 {
-      color: color(neutral, 500);
-    }
-  
-    .#{$el-label-value-label}--left,
-    .#{$el-label-value-value}--left {
-      text-align: left;
-    }
-  
-    .#{$el-label-value-label}--right,
-    .#{$el-label-value-value}--right {
-      text-align: right;
-    }
-  
-    .#{$el-label-value-label}--center,
-    .#{$el-label-value-value}--center {
-      text-align: center;
-    } 
-  
-    .#{$el-label-value-label}--neutral700,
-    .#{$el-label-value-value}--neutral700 {
-      color: color(neutral, 700);
-    } 
-    
-    .#{$el-label-value-value}--s {
-      font-size: 1rem;
-    }   
-  
-    .#{$el-label-value-value}--m {
-      font-size: 1.0769rem;
-    }  
-    
-    .#{$el-label-value-value}--l {    
-      font-size: space(s);
-    }
-  
-    .#{$el-label-value-value}--semibold {    
-      font-weight: 600;
-    }     
-  }
-}

package/styles/components/packages/ds-loading-indicator/DSLoadingIndicator.scss

@@ -1,11 +0,0 @@
-// ********************************************
-// container definition
-$el-container: #{$prefix}-loading-indicator;
-
-.#{$el-container} {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 201; // loading indicator trumps all modals / overlays; https://jira.elliemae.io/browse/PUI-1712
-}

package/styles/components/packages/ds-menu/Menu.scss

@@ -1,75 +0,0 @@
-$menu-container: #{$prefix}-menu;
-$select-container: #{$prefix}-selectbox;
-
-$border-style: 1px solid;
-$border-radius: $theme-base-border-radius;
-
-// dimsum components
-$dsseparator: #{$prefix}-separator;
-
-.#{$menu-container}-separator {
-  margin: space(xs) * 0.25 space(s);
-  &__title {
-    margin: 0;
-    margin-top: space(xs);
-    margin-bottom: space(xs);
-    padding: 0 space(s);
-    color: color(neutral, 500);
-  }
-  &:after {
-    content: "";
-    display: block;
-    height: 1px;
-    width: 100%;
-    background-color: color(neutral, 100);
-  }
-  &:first-child {
-    display: none;
-  }
-}
-.#{$menu-container} {
-  .#{$prefix}-separator-wrapper{
-    margin: 0;
-  }
-}
-
-.menu-component-internal-wrapper{
-  min-width: space(l) * 5;
-  max-width: space(l) * 14;
-}
-
-.#{$menu-container} {
-  border: $border-style color(neutral, 200);
-  margin: 0;
-  //display: inline-block;
-  padding: space(xs) 0;
-  background: color(neutral, 000);
-  color: color(neutral, 800);
-  list-style: none;
-  min-width: space(xxl) * 2;
-  @include border-radius($border-radius);
-  @include box-shadow(depth(300));
-
-  .#{$dsseparator} {
-    border-color: color(neutral, 300);
-  }
-  &--type-phone{
-    margin-top: space(xxs);
-  }
-}
-
-// MenuCombobox styles
-.#{$menu-container} {
-  .#{$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);
-  }
-}
-
-@import "MenuItems/MenuItem";
-@import "MenuItems/SearchableGroup";
-@import "./MenuCombobox.scss";

package/styles/components/packages/ds-menu/MenuCombobox.scss

@@ -1,20 +0,0 @@
-$menu-combo: #{$menu-container}--menu-combo-box;
-
-.#{$menu-combo}{
-  padding: 0;
-  padding-top: space(xs);
-  border: $theme-base-border-style color(neutral, 200);
-  .#{$prefix}-combobox-container{
-    height: auto;
-  }
-  .#{$prefix}-combobox__menu{
-    margin-bottom: 0;
-    position: initial;
-    border: none;
-    box-shadow: none;
-  }
-  .#{$prefix}-combobox__control{
-    margin-left: space(xs);
-    margin-right: space(xs);
-  }
-}

package/styles/components/packages/ds-menu/MenuItems/MenuItem.scss

@@ -1,151 +0,0 @@
-$menu-item: #{$prefix}-menu-item;
-$menu-item-content: #{$menu-item}__content;
-$menu-item-custom-render: #{$menu-item}--customRenderer;
-$menu-item-phone: #{$menu-item}__custom-phone-render;
-// dimsum components
-$dsicon: #{$prefix}-icon;
-
-$addon: #{$prefix}-menu-item__addon;
-
-.#{$menu-item}{      
-  display: flex;
-  transition: background-color duration(fast) easing(base);
-  align-items: center;
-  padding: 0 space(xxs);
-  height: space(l);
-  min-width: space(l) * 4.2;
-  max-width: space(l) * 12;
-  border: 1px solid transparent;
-  &:hover, &[aria-expanded="true"] {
-    border-color: color(brand-primary, 600);
-    .#{$menu-item}__addon--fixedItem {
-      span {
-        transition: unset;
-        background-color: inherit;
-      }
-    }
-
-    .#{$addon}:last-child {
-      opacity: 1;
-    }
-  }
-
-  .#{$menu-item-content} {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    user-select: none;
-    height: space(m);
-    margin-left: space(xs) * 1.5;
-    margin-right: space(xs);
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    flex: 1;
-  }
-
-  &--disabled {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-  
-  .#{$menu-item-custom-render}{
-    &:not(:hover) .#{$addon}:last-child {
-      opacity: 1;
-    }
-  }
-
-  &--fixedItem:active {
-    pointer-events: none;
-  }
-
-  &:focus-within {
-    .#{$addon}:last-child {
-      opacity: 1;
-    }
-  }
-
-  &:focus {
-    background-color: color(brand-primary, 200);
-    outline: none;
-
-    .#{$addon}:last-child {
-      opacity: 1;
-    }
-  }
-
-  &:active {
-    background-color: color(brand-primary, 200);
-
-    .#{$addon}:last-child {
-      opacity: 1;
-    }    
-  }
-
-  &[role='menuitemcheckbox'], &[role='menuitemradio'] {
-    .checkable-mark {
-      svg {
-        stroke: color(brand-primary, 600);
-      }
-    }
-    .#{$menu-item}__addon:last-child {      
-      margin-left: space(xxs);
-    }
-    .#{$menu-item}__addon--fixedItem {
-      span {
-        border: unset;
-      }
-    }
-  }
-  &.no-options{
-    pointer-events: none;
-    color: color(neutral, 500);
-  }
-  
-
-
-  &__addon {    
-    min-width: space(s);
-  }
-
-  &__addon:first-child {
-    margin-left: space(xs);
-  }
-
- // todo: maybe we don't need this if we use addon-block
-  >.#{$dsicon}:first-child {
-    margin-right: space(xs);
-  }
-
-  >.#{$dsicon}:last-child {
-    margin-left: space(xs);
-  }
-
-  // Phone
-  &--menu-type-phone{
-    padding: 0 space(s);
-    cursor: pointer;
-    .#{$menu-item-content} {
-      margin: 0 space(xs) 0 0;
-      justify-content: flex-end;
-      color: color(neutral, 500);
-      font-weight: 600;
-      font-size: font-size(300);
-    }
-    .#{$menu-item-phone}{
-      margin: 0;
-      padding: 0;
-      color: color(brand-primary, 700);
-      font-weight: 600;
-      font-size: font-size(400);
-    }
-    &:active {
-      .#{$menu-item-content} {
-        color: color(neutral, 000);
-      }
-      .#{$menu-item-phone}{
-        color: color(neutral, 000);
-      }
-    }
-  }
-
-}

package/styles/components/packages/ds-menu/MenuItems/SearchableGroup.scss

@@ -1,14 +0,0 @@
-$search-group: #{$prefix}-menu-search-group;
-
-.#{$search-group}{
-  &__search-wrapper {
-    padding: 0 space(xs) space(xs);
-  }
-
-  &__no-options {
-    height: space(l);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}

package/styles/components/packages/ds-mobile/node_modules/@elliemae/ds-basic/styles/base/_elements/_elements.scss

@@ -1,65 +0,0 @@
-$primary-text-color: color(neutral, 900);
-
-:root {
-  font-family: $theme-font-family;
-  font-size: $theme-base-font-size;
-  color: $primary-text-color;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-}
-
-h1 {
-  @include h1-text-style;
-}
-
-h2 {
-  @include h2-text-style;
-}
-
-h3 {
-  @include h3-text-style;
-}
-
-h4 {
-  @include h4-text-style;
-}
-
-p {
-  @include body-text-style;
-}
-
-a {
-  @include link-text-style;
-}
-
-.#{$prefix}-h1-text-style {
-  @include h1-text-style;
-}
-
-.#{$prefix}-h2-text-style {
-  @include h2-text-style;
-}
-
-.#{$prefix}-h3-text-style {
-  @include h3-text-style;
-}
-
-.#{$prefix}-h4-text-style {
-  @include h4-text-style;
-}
-
-.#{$prefix}-section-header-text-style {
-  @include section-header-text-style;
-}
-
-.#{$prefix}-body-text-style {
-  @include body-text-style;
-}
-
-.#{$prefix}-body-small-text-style {
-  @include body-small-text-style;
-}
-
-.#{$prefix}-link-text-style {
-  @include link-text-style;
-}