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

package/styles/components/packages/ds-basic/node_modules/@elliemae/ds-basic/styles/components/packages/ds-icon/DSIcon.scss

@@ -0,0 +1,61 @@
+// ********************************************
+// block
+$el-icon: #{$prefix}-icon;
+
+.#{$el-icon} {
+  svg { @include icon() }
+  @include icon();
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+// ********************************************
+// modifiers
+$el-icon-xxs: #{$el-icon}--xxs;
+$el-icon-xs: #{$el-icon}--xs;
+$el-icon-s: #{$el-icon}--s;
+$el-icon-m: #{$el-icon}--m;
+$el-icon-l: #{$el-icon}--l;
+$el-icon-xl: #{$el-icon}--xl;
+$el-icon-xxl: #{$el-icon}--xxl;
+
+.#{$el-icon-xxs} {
+  @include icon(xxs);
+}
+.#{$el-icon-xs} {
+  @include icon(xs);
+}
+.#{$el-icon-s} {
+  @include icon(s);
+}
+.#{$el-icon-m} {
+  @include icon(m);
+}
+.#{$el-icon-l} {
+  @include icon(l);
+}
+.#{$el-icon-xl} {
+  @include icon(xl);
+}
+.#{$el-icon-xxl} {
+  @include icon(xxl);
+}
+
+@each $color, $saturationMap in $color-palette-data {
+  @each $saturation, $value in $saturationMap {
+    .#{$el-icon}--color-#{$color}-#{$saturation} {
+        fill: $value !important;
+    }
+
+    // PUI-4222
+    .#{$el-icon}--color-#{$color}-#{$saturation} svg {
+      fill: $value !important;
+    }
+  }
+}
+
+// override for sanitize.css
+// PUI-4222
+svg:not([fill]) {
+ fill: unset;
+}

package/styles/components/packages/ds-basic/node_modules/@elliemae/ds-basic/styles/components/packages/ds-imagelibrarymodal/DSImageLibraryModal.scss

@@ -0,0 +1,86 @@
+// TODO: Create global variables to be imported/reused
+
+// ********************************************
+// container definition
+$el-container: #{$prefix}-modal;
+
+// ********************************************
+// elements
+$el-body: #{$el-container}__body;
+$el-body-wrapper: #{$el-container}__body-wrapper;
+
+.#{$el-container}-image-library {
+  .#{$el-body} {
+    padding: 0px;
+    overflow-y: hidden;
+  }
+  .#{$el-body-wrapper} {
+    padding: 0px;
+  }
+  .wrapper {
+    display: flex;
+    .col-1 {
+      flex: 3;
+      margin: space(s) 0;
+      overflow-y: auto;
+      height: 60vh;
+      .title {
+        font-size: font-size(600);
+        font-weight: font-weight(semibold);
+        position: sticky;
+        padding: 0 space(s) space(s);
+        top: 0;
+        background-color: white;
+      }
+      .imglibmodal-element {
+        padding: space(xs) 0;
+        outline-style: none;
+        .content {
+          padding: 0 space(s);
+        }
+        &:hover {
+          background-color: color(neutral, 100);
+          cursor: pointer;
+        }
+        &:focus {
+          background-color: color(brand-primary, 200);
+        }
+      }
+    }
+    .col-2 {
+      flex: 5;
+      border-left: 1px solid #ebedf0;
+      padding: space(s);
+      height: 65vh;
+      .title {
+        text-align: center;
+        font-size: font-size(600);
+      }
+      img, .#{$el-icon}, .#{$spinner-container} {
+        margin: auto;
+        width: 100%;
+        height: 85%;
+        padding: space(s);
+        max-height: 85%;
+        object-fit: contain;
+        display: flex;
+        justify-content: center;
+      }
+      .info {
+        display: flex;
+        flex-direction: column;
+        height: 5vh;
+        justify-content: space-between;
+        .label {
+          color: color(neutral, 500);
+          padding-left: space(s);
+          padding-right: space(xs);
+          font-weight: font-weight(regular);
+        }
+        .value {
+          font-weight: font-weight(semibold);
+        }
+      }
+    }
+  }
+}

package/styles/components/packages/ds-basic/node_modules/@elliemae/ds-basic/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-basic/node_modules/@elliemae/ds-basic/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-basic/node_modules/@elliemae/ds-basic/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-basic/node_modules/@elliemae/ds-basic/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-basic/node_modules/@elliemae/ds-basic/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-basic/node_modules/@elliemae/ds-basic/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-basic/node_modules/@elliemae/ds-basic/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;
+  }
+}