@elliemae/ds-basic 3.51.0-next.0 → 3.51.0-next.1

package/dist/styles/components/packages/ds-button-v1/DSButton.scss

@@ -0,0 +1,491 @@
+// ********************************************
+// container definition
+$btn-el: #{$prefix}-button;
+$input-addon-group: #{$prefix}-input-addon-group;
+
+// ********************************************
+// element definition
+$btn-icon: #{$prefix}-icon;
+
+// ********************************************
+// modifiers
+$btn-el-s: #{$btn-el}--s;
+$btn-el-m: #{$btn-el}--m;
+$btn-el-l: #{$btn-el}--l;
+$btn-el-fluid: #{$btn-el}--fluid-width;
+$btn-el-primary: #{$btn-el}--primary;
+$btn-el-text: #{$btn-el}--text;
+$btn-el-secondary: #{$btn-el}--secondary;
+$btn-el-link: #{$btn-el}--link;
+
+// variants
+$btn-el-vfocus: #{$btn-el}--variant-focus;
+$btn-el-vdefault: #{$btn-el}--variant-default;
+$btn-el-vactive: #{$btn-el}--variant-active;
+$btn-el-vdisabled: #{$btn-el}--variant-disabled;
+$btn-el-vhover: #{$btn-el}--variant-hover;
+$btn-el-focus-poc: #{$btn-el}--focus-poc;
+
+// ********************************************
+// Vars
+$button-height: space(m) * 1.17;
+$button-border-radius: $theme-base-border-radius;
+$button-width: space(l) * 1.3;
+$button-padding: 0 space(s);
+$s-size: space(s) * 1.125; //18px;
+$m-size: space(m) * 1.17; //28px
+$l-size: space(l) * 1.25; //40px;
+
+$s-font: font-size(300); //12px
+$m-font: font-size(500); //14px;
+$l-font: font-size(600); //16px;
+
+$border-type: solid border-size(xs);
+$border-type-2: solid border-size(m);
+$text-disabled: #5c6574;
+
+@mixin withFocus($color: color(brand-primary, 600)) {
+  outline: none;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+
+    @include dsFocus($color);
+  }
+}
+
+@mixin withDisabled() {
+  cursor: not-allowed;
+}
+
+div.#{$btn-el} {
+  appearance: initial;
+}
+
+.#{$btn-el} {
+  @include body-text-style(semibold);
+  @include center;
+
+  min-width: $button-width;
+  line-height: unset;
+  border-radius: $button-border-radius;
+  padding: $button-padding;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: duration(base) easing(base);
+  position: relative;
+
+  & .label-wrapper {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &--icon-only {
+    min-width: auto;
+    min-width: initial;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .#{$btn-icon} {
+    &:first-child:not(:last-child) {
+      margin-right: space(xs);
+      margin-left: space(xs) * -1;
+    }
+
+    &:last-child:not(:first-child) {
+      margin-left: space(xs);
+      margin-right: space(xs) * -1;
+    }
+
+    &:last-child,
+    &:first-child {
+      .#{$btn-el} {
+        padding-left: space(s) * -1;
+        padding-right: space(s) * -1;
+      }
+    }
+  }
+}
+
+// ********************************************
+// Sizes
+.#{$btn-el-s} {
+  height: $s-size;
+  font-size: $s-font;
+  &.#{$btn-el}--icon-only {
+    width: $s-size;
+  }
+
+  // https://jira.elliemae.io/browse/PUI-6990
+  // & .#{$btn-icon} {
+  //   height: 12px;
+  //   width: 12px;
+  //   margin-bottom: 5px;
+  // }
+}
+.#{$btn-el-m} {
+  height: $m-size;
+  font-size: $m-font;
+  &.#{$btn-el}--icon-only {
+    width: $m-size;
+  }
+
+  // https://jira.elliemae.io/browse/PUI-6990
+  // & .#{$btn-icon} {
+  //   height: 14px;
+  //   width: 14px;
+  //   margin-bottom: 4px;
+  // }
+}
+.#{$btn-el-l} {
+  height: $l-size;
+  font-size: $l-font;
+  &.#{$btn-el}--icon-only {
+    width: $l-size;
+  }
+}
+.#{$btn-el-fluid} {
+  width: 100%;
+}
+
+// ********************************************
+// Primary
+
+.#{$btn-el-primary} {
+  color: color(neutral, 000);
+  background-color: color(brand-primary, 600);
+  border: $border-type color(brand-primary, 600);
+
+  .#{$btn-icon} {
+    @include icon-color(color(neutral, 000));
+  }
+
+  &:hover:not([disabled]),
+  &.#{$btn-el-vhover} {
+    background-color: color(brand-primary, 700);
+    border: $border-type color(brand-primary, 700);
+  }
+
+  &:active,
+  &.#{$btn-el-vactive} {
+    background-color: color(brand-primary, 700);
+    border: $border-type color(brand-primary, 700);
+  }
+
+  &:disabled,
+  &.#{$btn-el-vdisabled} {
+    color: $text-disabled;
+    background-color: color(neutral, 100);
+    border-color: color(neutral, 100);
+
+    @include withDisabled;
+
+    .#{$btn-icon} {
+      @include icon-color($text-disabled);
+    }
+  }
+
+  &:focus,
+  &.#{$btn-el-vfocus} {
+    &::after {
+      position: absolute;
+      content: '';
+      top: 1px;
+      left: 1px;
+      width: calc(100% - 2px);
+      height: calc(100% - 2px);
+      border: $border-type-2 color(neutral, 000);
+    }
+  }
+
+  &.#{$btn-el-s} {
+    &:focus,
+    &.#{$btn-el-vfocus} {
+      &::after {
+        position: absolute;
+        content: '';
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border: $border-type color(neutral, 000);
+      }
+    }
+  }
+}
+
+// ********************************************
+// Text
+.#{$btn-el-text} {
+  color: color(brand-primary, 600);
+  text-transform: uppercase;
+  letter-spacing: 0;
+  background-color: transparent;
+  border: none;
+  font-weight: 600;
+
+  @at-root .#{$input-addon-group}__addon {
+    .#{$btn-el-text} {
+      border: $border-type color(neutral, 400);
+    }
+  }
+
+  .#{$btn-icon} {
+    @include icon-color(color(brand-primary, 600));
+  }
+
+  &:hover:not([disabled]),
+  &.#{$btn-el-vhover} {
+    color: color(brand-primary, 700);
+    background-color: color(brand-primary, 200);
+  }
+
+  &:active,
+  &.#{$btn-el-vactive} {
+    color: color(brand-primary, 700);
+
+    .#{$btn-icon} {
+      @include icon-color(color(brand-primary, 700));
+    }
+  }
+
+  &:disabled,
+  &.#{$btn-el-vdisabled} {
+    color: color(neutral, 500);
+    background: color(neutral, 000);
+
+    @include withDisabled;
+
+    .#{$btn-icon} {
+      @include icon-color(color(neutral, 500));
+    }
+  }
+
+  &:focus,
+  &:focus:not([disabled]),
+  &.#{$btn-el-vfocus} {
+    &::after {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 2px;
+      border: $border-type-2 color(brand-primary, 700);
+    }
+  }
+}
+
+// ********************************************
+// Secondary
+.#{$btn-el-secondary} {
+  color: color(brand-primary, 600);
+  background-color: color(neutral, 000);
+  border: $border-type color(neutral, 400);
+  border-radius: 2px;
+
+  @at-root .#{$input-addon-group}__addon {
+    .#{$btn-el-secondary} {
+      border: $border-type color(neutral, 400);
+    }
+  }
+
+  .#{$btn-icon} {
+    @include icon-color(color(brand-primary, 600));
+  }
+
+  &:hover:not([disabled]),
+  &.#{$btn-el-vhover} {
+    border: $border-type color(brand-primary, 700);
+
+    .#{$btn-icon} {
+      @include icon-color(color(brand-primary, 700));
+    }
+  }
+
+  &:active,
+  &.#{$btn-el-vactive} {
+    color: color(brand-primary, 700);
+    border: $border-type color(brand-primary, 700);
+
+    .#{$btn-icon} {
+      @include icon-color(color(brand-primary, 700));
+    }
+  }
+
+  &:disabled,
+  &.#{$btn-el-vdisabled} {
+    color: color(neutral, 500);
+    background-color: color(neutral, 000);
+
+    @include withDisabled;
+
+    .#{$btn-icon} {
+      @include icon-color(color(neutral, 500));
+    }
+  }
+
+  &:focus,
+  &.#{$btn-el-vfocus} {
+    &::after {
+      position: absolute;
+      content: '';
+      top: -1px;
+      left: -1px;
+      width: calc(100% + 2px);
+      height: calc(100% + 2px);
+      border-radius: 2px;
+      border: $border-type-2 color(brand-primary, 700);
+    }
+  }
+}
+
+// ********************************************
+// link
+.#{$btn-el-link} {
+  @include link-text-style;
+
+  padding: 0;
+  color: color(brand-primary, 600);
+  border: none;
+  display: inline;
+  height: unset;
+  line-height: unset;
+  background: transparent;
+  min-width: auto;
+  min-width: initial;
+
+  &:hover:not([disabled]) {
+    text-decoration-line: underline;
+  }
+
+  &:active {
+    color: color(brand-primary, 700);
+  }
+
+  &:disabled {
+    color: color(neutral, 400);
+
+    @include withDisabled;
+  }
+
+  &.#{$btn-el}--icon-only {
+    &:focus,
+    &.#{$btn-el-vfocus} {
+      span.label-wrapper {
+        @include withFocus;
+
+        &::after {
+          top: -2px;
+          left: -2px;
+          width: calc(100% + 4px);
+          height: calc(100% + 4px);
+        }
+      }
+    }
+  }
+}
+
+$intent-colors: (
+  'success': color('success', 900),
+  'danger': color('danger', 900),
+  'warning': color('warning', 900),
+  'info': color('brand-primary', 600),
+);
+
+@each $intent, $color in $intent-colors {
+  // button text
+  .#{$btn-el}-#{$intent}.#{$btn-el-text} {
+    color: $color;
+
+    &:focus,
+    &:focus:not([disabled]),
+    &.#{$btn-el-vfocus} {
+      color: $color;
+
+      &::after {
+        position: absolute;
+        content: '';
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 2px;
+        border: $border-type-2 $color;
+      }
+    }
+
+    &:hover,
+    &:hover:not([disabled]),
+    &.#{$btn-el-vhover} {
+      color: $color;
+
+      span.label-wrapper.no-icon {
+        &::before {
+          background-color: transparent;
+          border-radius: 2px;
+        }
+      }
+    }
+
+    &:active {
+      color: darken($color, 10%);
+
+      .#{$btn-icon} {
+        @include icon-color(darken($color, 10%));
+      }
+    }
+  }
+}
+
+// ********************************************
+// Mobile
+@include md {
+  // Sizes
+  .#{$btn-el-s} {
+    height: calc(#{space(s)} * 1.22);
+
+    &.#{$btn-el}--icon-only {
+      width: calc(#{space(s)} * 1.22);
+    }
+  }
+
+  .#{$btn-el-m} {
+    font-size: tomobile(font-size(600));
+    height: calc(#{space(m)} * 1.085);
+
+    &.#{$btn-el}--icon-only {
+      width: calc(#{space(m)} * 1.085);
+    }
+  }
+
+  .#{$btn-el-m}:not(.#{$btn-el}--icon-only) {
+    &.#{$btn-el-primary},
+    &.#{$btn-el-secondary} {
+      min-width: calc(#{space(l)} * 1.016 * 2);
+    }
+  }
+
+  .#{$btn-el-l} {
+    font-size: tomobile(font-size(600));
+    height: calc(#{space(l)} * 1.016);
+
+    &.#{$btn-el}--icon-only {
+      width: calc(#{space(l)} * 1.016);
+    }
+  }
+}

package/dist/styles/components/packages/ds-card/DSCard.scss

@@ -0,0 +1,35 @@
+@function separator-border($color: 200, $size: 1px) {
+  @return $size solid color(neutral, $color);
+}
+
+// ********************************************
+// container definition
+$el-container: #{$prefix}-card;
+$el-card-body: #{$prefix}-card-body;
+$el-header: #{$prefix}-card-header;
+$el-heading: #{$el-header}__heading;
+$el-pull-right: #{$el-header}__pull-right;
+
+.#{$el-container} {
+  border: 1px solid color(neutral, 050);
+  @include border-radius(0);
+  @include box-shadow(1px 1px 3px 1px rgba(0, 0, 0, 0.3));
+
+  .#{$el-header} {
+    color: color(neutral, 600);
+    padding: 6px 15px;
+    border-bottom: 1px solid transparent;
+    @include border-radius(0);
+    .#{$el-heading} {
+      color: color(neutral, 600);
+      font-family: inherit;
+      font-size: 18pt;
+    }
+    .#{$el-pull-right} {
+      float: right;
+    }
+  }
+  .#{$el-card-body} {
+    padding: 1rem;
+  }
+}

package/dist/styles/components/packages/ds-card-array/DSCardArray.scss

@@ -0,0 +1,50 @@
+$card-array: #{$prefix}-card-array;
+$wrapper: #{$card-array}__wrapper;
+$box: #{$card-array}__box;
+
+.#{$wrapper} {
+  padding: space(xs);
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+
+  @for $i from 1 through 4 {
+    &--cols-lg-#{$i} { 
+      .#{$box} {
+        $width: 100 / #{$i};
+        width: calc(#{$width}%  - (#{space(s)} * 2));
+      }
+    }
+  }
+
+  @media (max-width: 1024px) {
+    @for $i from 1 through 4 {
+      &--cols-md-#{$i} { 
+        .#{$box} {
+          $width: 100 / #{$i};
+          width: calc(#{$width}%  - (#{space(s)} * 2));
+        }
+      }
+    }
+  }
+  @media (max-width: 800px) {
+    @for $i from 1 through 4 {
+      &--cols-sm-#{$i} { 
+        .#{$box} {
+          $width: 100 / #{$i};
+          width: calc(#{$width}%  - (#{space(s)} * 2));
+        }
+      }
+    }
+  }
+}
+
+.#{$box} {
+  margin: space(s);
+  width: calc(33.33% - (#{space(s)} * 2));
+  @include box-shadow(depth(100));
+  background: color(neutral, 0);
+  padding: space(xs);
+}

package/dist/styles/components/packages/ds-circular-progress-indicator/DSCircularProgressIndicator.scss

@@ -0,0 +1,80 @@
+$circular-progress-indicator: #{$prefix}-circular-progress-indicator;
+$wrapper: #{$circular-progress-indicator}-wrapper;
+$track: #{$circular-progress-indicator}__track;
+$label: #{$circular-progress-indicator}__label;
+$arc-white: #{$circular-progress-indicator}__arc-white;
+$arc-gray: #{$circular-progress-indicator}__arc-gray;
+$arc-blue: #{$circular-progress-indicator}__arc-blue;
+
+.#{$wrapper} {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: fit-content;
+  margin: 0;
+}
+
+.#{$label} {
+  margin-top: space(s);
+}
+
+.#{$track} {
+  stroke: color(neutral, 100);
+}
+
+.#{$arc-blue} {
+  transform-origin: 33px 33px;
+  animation: rotation1 2.7s ease-out infinite;
+}
+
+.#{$arc-white} {
+  transform-origin: 33px 33px;
+  animation: rotation2 2.7s ease-out infinite;
+}
+
+.#{$arc-gray} {
+  transform-origin: 33px 33px;
+  animation: rotation2 2.7s ease-out infinite;
+}
+
+@keyframes rotation1 {
+  0% {
+    stroke: url(#grad1);
+    transform: rotate(0deg);
+  }
+  49% {
+    stroke: url(#grad1);
+  }
+  50% {
+    stroke: #5594e2;
+    transform: rotate(450deg);
+  }
+  51% {
+    stroke: url(#grad2);
+  }
+  100% {
+    stroke: url(#grad2);
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes rotation2 {
+  0% {
+    transform: rotate(0deg);
+  }
+  20% {
+    transform: rotate(0deg);
+  }
+  40% {
+    transform: rotate(90deg);
+  }
+  60% {
+    transform: rotate(90deg);
+  }
+  80% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}

package/dist/styles/components/packages/ds-codeeditor/DSCodeEditor.scss

@@ -0,0 +1 @@
+@import './components/DSCodeEditorImpl';

package/dist/styles/components/packages/ds-codeeditor/components/DSCodeEditorImpl.scss

@@ -0,0 +1,69 @@
+$el-container: #{$prefix}-code-editor;
+$el-file-name: #{$el-container}-file-name;
+$el-find-replace-btn: #{$el-container}-find-replace-btn;
+$el-next-back-btn: #{$el-container}-next-back-btn;
+$el-find: #{$el-container}-find;
+$el-replace: #{$el-container}-replace;
+$el-replace-btns: #{$el-container}-replace-btns;
+$options-group: #{$el-container}-options-group;
+
+// dimsum components
+$ds-checkbox: #{$prefix}-form-element-checkbox;
+
+.#{$el-file-name} {
+	padding-bottom: space(s);
+	border-bottom: 1px solid color(neutral, 050);
+}
+
+.#{$el-find-replace-btn} {
+    display: flex;
+    margin-top: space(s);
+    margin-bottom: space(s);
+
+    .em-ds-button:first-child {
+    	margin-right: space(s);
+    }
+}
+
+.#{$el-next-back-btn},
+.#{$el-replace-btns} {
+	display: flex;
+}
+
+.#{$el-replace},
+.#{$el-replace-btns} {
+	margin-top: space(s);
+}
+
+.#{$el-replace-btns} {
+	margin-bottom: space(s);
+	.em-ds-button:first-child {
+    	margin-right: space(s);
+    }
+}
+
+.#{$el-find} {
+	align-items: baseline;
+	.em-ds-input {
+		margin-right: space(xs);
+	}
+	.em-ds-form-element-checkbox {
+		flex: 0.5;
+
+		.em-ds-form-element-checkbox__input-button {
+			margin-right: space(xs);
+		}
+	}
+}
+
+.#{$options-group} {
+	padding: 0 space(xs);
+	display: flex;
+	.#{$ds-checkbox}:not(:last-child) {
+		margin-right: space(s);
+	}
+}
+
+.ace_editor {
+	width: 100% !important;
+}