@elliemae/ds-basic 3.17.0-next.0 → 3.17.0-next.2

package/dist/styles/components/packages/ds-basic/index.scss

@@ -26,7 +26,6 @@
 @import '../../ds-truncated-tooltip-text/src/DSTruncatedTooltipText';
 @import '../../ds-toolbar/src/DSToolbar';
 @import '../../ds-time-picker/src/DSTimePicker';
-@import '../../ds-toast/src/DSToast';
 @import '../../ds-spinner/src/DSSpinner';
 @import '../../ds-loading-indicator/src/DSLoadingIndicator';
 @import '../../ds-tooltip/src/v1/DSTooltip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-basic",
-  "version": "3.17.0-next.0",
+  "version": "3.17.0-next.2",
   "license": "MIT",
   "description": "EllieMae UI Design System Library",
   "files": [

package/dist/styles/components/packages/ds-toast/DSToast.scss

@@ -1,389 +0,0 @@
-// ********************************************
-// container definition
-//$el-container: #{$prefix}-toast;
-
-$prefixCls: Toastify;
-$toast-container: #{$prefixCls}__toast-container;
-$toast-content: #{$prefix}-toast-content;
-
-// ********************************************
-// element definition
-
-$toast-el: #{$prefixCls}__toast;
-$toast-closeBtn: #{$prefixCls}__close-button;
-$toast-progressBar: #{$prefixCls}__progress-bar;
-$icon-message-el: #{$toast-content}__icon-message;
-
-// ********************************************
-// variables definition
-
-$toast-width: space(xxl) * 4.7;
-$min-height: space(xxl);
-$max-height: space(xxl) * 8;
-$container-opacity: 95%;
-$toast-mobile: "only screen and (max-width : 480px)" !default;
-$z-index: 9999;
-
-$defaultColor: color(neutral, 400);
-$infoColor: color(brand-primary, 400);
-$successColor: color(success, 900);
-$warningColor: color(warning, 900);
-$errorColor: color(danger, 900);
-
-$defaultColorLight: color(neutral, 300);
-$infoColorLight: color(brand-primary, 300);
-$successColorLight: color(success, 300);
-$warningColorLight: color(warning, 600);
-$errorColorLight: color(danger, 200);
-
-.#{$toast-container} {
-  z-index: $z-index;
-  position: fixed;
-  width: $toast-width;
-  box-sizing: border-box;
-  color: #fff;
-  &--top-left {
-    top: 1em;
-    left: 1em;
-  }
-  &--top-center {
-    top: 1em;
-    left: 50%;
-    margin-left: -($toast-width / 2);
-  }
-  &--top-right {
-    top: 1em;
-    right: 1em;
-  }
-  &--bottom-left {
-    bottom: 1em;
-    left: 1em;
-  }
-  &--bottom-center {
-    bottom: 1em;
-    left: 50%;
-    margin-left: -($toast-width / 2);
-  }
-  &--bottom-right {
-    bottom: 1em;
-    right: 1em;
-  }
-
-  .toast-close-button {
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    &:focus {
-      // fixes position relative applied to button on focus
-      position: absolute !important;
-    }
-
-    @include icon-color(color(neutral, 300))
-  }
-
-
-  &:not(.with-progressbar) {
-    .#{$toast-el} {
-      &--default {
-        border-color: $defaultColor;
-      }
-      &--info {
-        border-color: $infoColor;
-      }
-      &--success {
-        border-color: $successColor;
-      }
-      &--warning {
-        border-color: $warningColor;
-      }
-      &--error {
-        border-color: $errorColor;
-      }
-    }
-  }
-  &.with-progressbar {
-    .#{$toast-el} {
-      &--default {
-        border-color: $defaultColorLight;
-      }
-      &--info {
-        border-color: $infoColorLight;
-      }
-      &--success {
-        border-color: $successColorLight;
-      }
-      &--warning {
-        border-color: $warningColorLight;
-      }
-      &--error {
-        border-color: $errorColorLight;
-      }
-    }
-  }
-}
-
-@media #{$toast-mobile} {
-  .#{$toast-container} {
-    width: 100vw;
-    padding: 0;
-    left: 0;
-    margin: 0;
-    &--top-left,
-    &--top-center,
-    &--top-right {
-      top: 0;
-    }
-    &--bottom-left,
-    &--bottom-center,
-    &--bottom-right {
-      bottom: 0;
-    }
-    &--rtl{
-      right: 0;
-      left: initial;
-    }
-  }
-}
-
-.#{$toast-el} {
-  position: relative;
-  min-height: $min-height;
-  box-sizing: border-box;
-  margin-bottom: space(xs);
-  border-radius: 1px;
-  display: flex;
-  justify-content: space-between;
-  max-height: $max-height;
-  cursor: pointer;
-  direction: ltr;
-  background-color: color(neutral, 000);
-  border-left: space(xxs) solid;
-  @include depth(100);
-
-  &--default {
-    .#{$icon-message-el} svg{    
-      @include icon-color($defaultColor);
-    }
-  }
-  &--info {
-    .#{$icon-message-el} svg{
-      @include icon-color($infoColor);
-    }
-  }
-  &--success {
-    .#{$icon-message-el} svg{
-      @include icon-color($successColor)
-    }
-  }
-  &--warning {
-    .#{$icon-message-el} svg{
-      @include icon-color($warningColor);
-    }
-  }
-  &--error {
-    .#{$icon-message-el} svg{
-      @include icon-color($errorColor);
-    }
-  }
-
-  &--rtl {
-    direction: rtl;
-  }
-  &-body {
-    margin: auto 0;
-    flex: 1;
-  }
-}
-
-@media #{$toast-mobile} {
-  .#{$toast-el} {
-    margin-bottom: 0;
-  }
-}
-
-.#{$toast-progressBar} {
-    position: absolute;
-    bottom: 0;
-    left: space(xxs) * -1;
-    width: space(xxs);
-    height: 0;
-    z-index: $z-index;
-    opacity: 0.7;
-    animation: #{$prefixCls}__trackProgress linear 1;
-    background-color: color(brand-primary, 200);
-
-    &--rtl {
-      right: 0;
-      left: initial;
-    }
-    &--default{
-      background-color: $defaultColor;
-    }
-
-    &--info{
-      background-color: $infoColor;
-    }
-    &--success{
-      background-color: $successColor;
-    }
-    &--warning{
-      background-color: $warningColor;
-    }
-    &--error{
-      background-color: $errorColor;
-    }
-}
-
-@keyframes #{$prefixCls}__trackProgress {
-  0%{
-    height: 100%;
-  }
-  100%{
-    height: 0;
-  }
-}
-
-.#{$toast-content} {
-  display: flex;
-  padding: space(xs);
-  padding-right: 32px;
-
-  &__message-content {
-    flex: 1
-  }
-  &__icon-container {
-   margin-right: space(xs);
-  }
-
-  &__message-header {
-    color: color(neutral, 900);
-    @include h5-text-style();
-    font-weight: 600;
-    display: block;
-    margin-bottom: 8px;
-  }
-  &__message-text {
-    color: color(neutral, 500);
-    @include body-text-style()
-  }
-}
-
-
-@mixin transform {
-  transform: translate3d(0, 0, 0);
-}
-
-@keyframes #{$prefixCls}__slideInRight {
-  from {
-    transform: translate3d(110%, 0, 0);
-    visibility: visible;
-  }
-  to {
-    @include transform;
-  }
-}
-
-@keyframes #{$prefixCls}__slideInLeft {
-  from {
-    transform: translate3d(-110%, 0, 0);
-    visibility: visible;
-  }
-  to {
-    @include transform;
-  }
-}
-
-@keyframes #{$prefixCls}__slideInUp {
-  from {
-    transform: translate3d(0, 110%, 0);
-    visibility: visible;
-  }
-  to {
-    @include transform;
-  }
-}
-
-@keyframes #{$prefixCls}__slideInDown {
-  from {
-    transform: translate3d(0, -110%, 0);
-    visibility: visible;
-  }
-  to {
-    @include transform;
-  }
-}
-
-@keyframes #{$prefixCls}__slideOutRight {
-  from {
-    @include transform;
-  }
-  to {
-    visibility: hidden;
-    transform: translate3d(110%, 0, 0);
-  }
-}
-
-@keyframes #{$prefixCls}__slideOutLeft {
-  from {
-    @include transform;
-  }
-  to {
-    visibility: hidden;
-    transform: translate3d(-110%, 0, 0);
-  }
-}
-
-@keyframes #{$prefixCls}__slideOutDown {
-  from {
-    @include transform;
-  }
-  to {
-    visibility: hidden;
-    transform: translate3d(0, 500px, 0);
-  }
-}
-
-@keyframes #{$prefixCls}__slideOutUp {
-  from {
-    @include transform;
-  }
-  to {
-    visibility: hidden;
-    transform: translate3d(0, -500px, 0);
-  }
-}
-
-.#{$prefixCls}__slide-enter {
-  &--top-left,
-  &--bottom-left {
-    animation-name: #{$prefixCls}__slideInLeft;
-  }
-  &--top-right,
-  &--bottom-right {
-    animation-name: #{$prefixCls}__slideInRight;
-  }
-  &--top-center {
-    animation-name: #{$prefixCls}__slideInDown;
-  }
-  &--bottom-center {
-    animation-name: #{$prefixCls}__slideInUp;
-  }
-}
-
-.#{$prefixCls}__slide-exit {
-  &--top-left,
-  &--bottom-left {
-    animation-name: #{$prefixCls}__slideOutLeft;
-  }
-  &--top-right,
-  &--bottom-right {
-    animation-name: #{$prefixCls}__slideOutRight;
-  }
-  &--top-center {
-    animation-name: #{$prefixCls}__slideOutUp;
-  }
-  &--bottom-center {
-    animation-name: #{$prefixCls}__slideOutDown;
-  }
-}