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

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

@@ -0,0 +1,167 @@
+// ********************************************
+// 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

@@ -0,0 +1,132 @@
+// ********************************************
+// 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

@@ -0,0 +1,11 @@
+// ********************************************
+// 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

@@ -0,0 +1,75 @@
+$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

@@ -0,0 +1,20 @@
+$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

@@ -0,0 +1,151 @@
+$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

@@ -0,0 +1,14 @@
+$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

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