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

package/styles/components/packages/ds-datagrids/node_modules/@elliemae/ds-basic/styles/components/packages/ds-toast/DSToast.scss

@@ -1,388 +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(bold);
-    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;
-  }
-}

package/styles/components/packages/ds-datagrids/node_modules/@elliemae/ds-basic/styles/components/packages/ds-toolbar/DSToolbar.scss

@@ -1,70 +0,0 @@
-// ********************************************
-// container definition
-$toolbar-container: #{$prefix}-toolbar;
-$toolbar-group: #{$prefix}-toolbar-group;
-
-// ********************************************
-// element definition
-$divider-el: #{$prefix}-toolbar__divider;
-$toolbar-button-el: #{$prefix}-toolbar__button;
-
-
-.#{$toolbar-container} {
-  display: inline-block;
-  background: color(neutral, 000);
-  @include border-radius($theme-base-border-radius);
-  @include center();
-  height: space(l) * 1.125;
-  padding: 0 space(xs);
-
-  &:not(&--without-depth) {
-    @include box-shadow(depth(100));
-  }
-
-  & > *:not(:last-child) {
-    margin-right: space(xs)
-  }
-
-  &__button {
-    &:not(:last-child) {
-      margin-right: space(xxs);
-    }
-  }
-
-  &--right {
-    justify-content: flex-end;
-  }
-
-  &--left {
-    justify-content: flex-start;
-  }
-
-  &--compact{
-    padding: 0;
-    height: space(m) * 1.16666;
-  }
-
-
-  .toolbar-item {
-    position: relative;
-  }
-}
-
-.#{$toolbar-group} {
-  display: flex;
-
-  & > *:focus {
-    z-index: 3;
-  }
-
-  &--space-xs {
-    & > *:not(:last-child) {
-      margin-right: space(xs)
-    }
-  }
-}
-
-.#{$divider-el} {
-  width: border-size(xs);
-  height: 100%;
-}

package/styles/components/packages/ds-datagrids/node_modules/@elliemae/ds-basic/styles/components/packages/ds-tooltip/v1/DSTooltip.scss

@@ -1,92 +0,0 @@
-// ********************************************
-// container definition
-$tooltip-container: #{$prefix}-tooltip;
-$tooltip-toolbar: tooltip-container--toolbar;
-
-// ********************************************
-// container definition
-$el-text: #{$prefix}-tooltip__text;
-
-$radius: $theme-base-border-radius;
-
-$max-width: space(xxl) * 3.9;
-
-.#{$tooltip-container} {
-  text-align: middle;
-  max-width: $max-width;
-  min-width: space(xl) * 1.17;
-  padding: space(xxs) space(s);
-  position: relative;
-  background-color: color(neutral, 000);
-  @include border-radius($radius);
-  @include box-shadow(depth(100));
-  @include filter-shadow(drop-shadow-depth(100));
-}
-
-.#{$tooltip-container}__arrow {
-  position: absolute;
-  font-size: 30px;
-  height: space(m) * 1.1;
-  width: 25px;
-  pointer-events: none;
-  background-color: transparent;
-  & .stroke {
-    fill: color(neutral, 000);
-  }
-  & .fill {
-    fill: color(neutral, 000);
-  }
-
-  &[data-placement^="top"] {
-    transform: rotateZ(180deg);
-  }
-  &[data-placement^="right"] {
-    transform: rotateZ(-90deg);
-    height: space(s) * 1.2;
-  }
-  &[data-placement^="bottom"] {
-    transform: rotateZ(360deg);
-    height: space(s) * 1.5;
-  }
-  &[data-placement^="left"] {
-    transform: rotateZ(90deg);
-    height: space(s) * 1.2;
-  }
-}
-
-.#{$el-text} {
-  white-space: normal;
-  word-wrap: break-word;
-  display: inline-block;
-  color: color(neutral, 600);
-  max-width: $max-width - (space(s) * 2);
-}
-
-.#{$tooltip-toolbar} {
-  padding: 0;
-}
-
-@include md {
-  .#{$tooltip-container} {
-    padding: space(xxs) 8px;
-    border-radius: 3px;
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.38);
-    min-width: 16vw;
-    max-width: 90vw;
-    min-height: 20px;
-    font-size: 14px;
-    text-align: left;
-    vertical-align: middle;
-  }
-
-  .#{$el-text} {
-    color: color(neutral, 800);
-  }
-
-  .#{$tooltip-container}__arrow {
-    &[data-placement^="top"],
-    &[data-placement^="bottom"] {
-      height: space(s) * 1.2;
-    }
-  }
-}