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

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

@@ -1,61 +0,0 @@
-// ********************************************
-// 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-dropdownmenu/node_modules/@elliemae/ds-basic/styles/components/packages/ds-imagelibrarymodal/DSImageLibraryModal.scss

@@ -1,86 +0,0 @@
-// 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-dropdownmenu/node_modules/@elliemae/ds-basic/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-dropdownmenu/node_modules/@elliemae/ds-basic/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-dropdownmenu/node_modules/@elliemae/ds-basic/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-dropdownmenu/node_modules/@elliemae/ds-basic/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-dropdownmenu/node_modules/@elliemae/ds-basic/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-dropdownmenu/node_modules/@elliemae/ds-basic/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-dropdownmenu/node_modules/@elliemae/ds-basic/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;
-  }
-}