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

package/dist/styles/components/packages/ds-form/Toggle/DSToggle.scss

@@ -0,0 +1,333 @@
+// ********************************************
+// container definition
+$el-container: #{$prefix}-form-element-toggle;
+
+
+// ********************************************
+// block
+$el-box: #{$el-container}-box;
+
+// ********************************************
+// elements
+$el-input: #{$el-container}__input;
+$el-on: #{$el-container}__icon-on;
+$el-off: #{$el-container}__icon-off;
+$el-checkbox: #{$el-container}__hidden-checkbox;
+
+// ********************************************
+// modifiers
+$el-container-checked: #{$el-container}--checked;
+$el-container-error: #{$el-container}--error;
+$el-container-disabled: #{$el-container}--disabled;
+$el-container-read-only: #{$el-container}--readonly;
+$el-container-s: #{$el-container}--s;
+$el-container-m: #{$el-container}--m;
+$el-container-l: #{$el-container}--l;
+
+
+// ********************************************
+// var
+$toggle-width-diff: calc(#{space(m)} * 0.9166);
+$toggle-width: calc((#{space(m)} * 0.9166) * 2);
+$toggle-width-m: calc((#{space(m)} * 0.9166) * 3);
+$toggle-width-l: calc((#{space(m)} * 0.9166) * 4);
+
+$toggle-height: space(s);
+$toggle-height-m: space(m);
+$toggle-height-l: space(l);
+
+$diff-spacing: calc(#{space(xxs)} * 0.5);
+$toggle-circle: calc(#{$toggle-height} - (#{space(xxs)} * 0.5));
+$toggle-circle-m: calc(#{$toggle-height-m} - (#{space(xxs)} * 0.5));
+$toggle-circle-l: calc(#{$toggle-height-l} - (#{space(xxs)} * 0.5));
+$toggle-circle-left-diff: calc((#{space(xxs)} * 0.5) * 0.5);
+$toggle-circle-right-diff:calc((#{space(xxs)} * 0.5) * (-0.5));
+
+$toggle-transition: background-color 0.1s ease 0s, box-shadow 0.1s ease 0s, opacity 0.1s ease 0s;
+
+$toggle-border-style: solid 1px;
+$toggle-border-neutral: $toggle-border-style color(neutral, 700);
+$toggle-border-on:  $toggle-border-style color(brand-primary, 700);
+$toggle-border-hover: $toggle-border-style color(brand-primary, 800);
+
+$background-neutral: color(neutral, 500);
+$background-on: color(brand-primary, 600);
+$background-hover: color(brand-primary, 700);
+
+$focus-neutral: 0 0 3px 2px rgba(color(neutral, 500),0.5);
+$focus-on: 0 0 3px 2px rgba(color(brand-primary, 700),0.5);
+
+@keyframes fadein {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+// ********************************************
+// Default state
+.#{$el-container}{
+  @include border-radius(space(xs));
+  position: relative;
+  display: inline-block;
+  opacity: 1;
+  outline: none;
+  touch-action: none;
+  user-select: none;
+  transition: $toggle-transition;
+  height: space(s);
+  width: $toggle-width;
+  &.ds-form-element-toggle-hide {
+    opacity: 0;
+  }
+  &.#{$el-container-s}.#{$el-input}{
+    left: 37px;
+  }
+  &.#{$el-container-m}.default-state-checked .#{$el-input}{    
+    left: 54px;
+  }
+  &.#{$el-container-l}.default-state-checked .#{$el-input}{
+    left: 71px
+  }
+  position: relative;
+  z-index: 0;
+  &:focus {
+    &:before{
+      display: block;
+      content: "";
+      position: absolute;
+      top: -2px;
+      left: -2px;
+      width: calc(100% + 4px);
+      height: calc(100% + 4px);
+      pointer-events: none;
+      border: solid 2px color(brand-primary, 600);
+    }
+    &:after{
+      display: block;
+      content: "";
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      width: calc(100% + 2px);
+      height: calc(100% + 2px);
+      pointer-events: none;
+      border: solid 1px color(brand-primary, 300);
+    }
+  }
+  &:after, &:before{
+    @include border-radius(space(s));
+  }
+}
+
+.#{$el-box}{
+  @include border-radius(space(xs));
+  border: $toggle-border-neutral;
+  height: space(s);
+  width: $toggle-width;
+  background: $background-neutral;
+  color:color-contrast($background-neutral,color(neutral, 900), color(neutral, 000));
+  transition: $toggle-transition;
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+  cursor: pointer;
+  &:hover{
+    background: color(neutral, 600);
+  }
+}
+
+.#{$el-input}{
+  @include border-radius(50%);
+  height: $toggle-circle;
+  width: $toggle-circle;
+  background: color(neutral, 000);
+  transition: $toggle-transition;
+  display: inline-block;
+  position: absolute;
+  top: calc(#{space(xxs)} * 0.25);  // show 1px of border
+  left: 0;
+  margin-left: $toggle-circle-left-diff;
+  cursor: pointer;
+  &.default-state-checked{
+    left: 58px;
+  }
+}
+
+.#{$el-on},
+.#{$el-off}{
+  width: 100%;
+  text-align: center;
+  @include body-micro-text-style(semibold);
+  padding: 0 space(xxs);
+  line-height: $toggle-height;
+}
+.#{$el-on}{
+  padding: 0 $toggle-circle 0 $diff-spacing;
+}
+.#{$el-off}{
+  padding: 0 $diff-spacing 0 $toggle-circle;
+}
+
+.#{$el-checkbox} {
+  display: none;
+}
+
+// ********************************************
+// Sizes
+.#{$el-container-m} {
+  @include border-radius(space(m));
+  width: $toggle-width-m;
+  height: space(m);
+
+  .#{$el-box}{
+    @include border-radius(space(m));
+    height: space(m);
+    width: $toggle-width-m;
+  }
+
+  .#{$el-input}{
+    height: $toggle-circle-m;
+    width: $toggle-circle-m;
+  }
+
+  .#{$el-on},
+  .#{$el-off}{
+    width: 100%;
+    text-align: center;
+    line-height: $toggle-height-m;
+    font-size: font-size(500);
+    padding: 0 space(xs);
+  }
+  .#{$el-on}{
+    padding: 0 $toggle-circle-m 0 space(xxs);
+  }
+  .#{$el-off}{
+    padding: 0 space(xxs) 0 $toggle-circle-m;
+  }
+  
+    &:after, &:before{
+      @include border-radius(space(m));
+    }
+  
+}
+
+.#{$el-container-l} {
+  @include border-radius(space(l));
+  width: $toggle-width-l;
+  height: space(l);
+
+  .#{$el-box}{
+    @include border-radius(space(l));
+    height: space(l);
+    width: $toggle-width-l;
+  }
+
+  .#{$el-input}{
+    height: $toggle-circle-l;
+    width: $toggle-circle-l;
+  }
+
+  .#{$el-on},
+  .#{$el-off}{
+    width: 100%;
+    text-align: center;
+    @include body-micro-text-style(semibold);
+    line-height: $toggle-height-l;
+    font-size: font-size(700);
+  }
+
+  .#{$el-on}{
+    padding: 0 $toggle-circle-l 0 space(xs);
+  }
+  .#{$el-off}{
+    padding: 0 space(xs) 0 $toggle-circle-l;
+  }
+
+    
+  &:after, &:before{
+    @include border-radius(space(l));
+  }
+}
+
+// ********************************************
+// Checked
+.#{$el-container-checked}{
+
+  .#{$el-box}{
+    justify-content: flex-start;
+    border: $toggle-border-on;
+    background: $background-on;
+    color:color-contrast($background-neutral, color(neutral, 900), color(neutral, 000));
+  }
+
+  .#{$el-input} {
+    margin-left: $toggle-circle-right-diff;
+  }
+
+  &:hover {
+    .#{$el-box}{
+      border: $toggle-border-hover;
+      background: $background-hover;
+    }
+  }
+  &:focus {
+    &:before{
+      border: solid 2px color(brand-primary, 700);
+    }
+    &:after{
+      border: solid 1px color(brand-primary, 300);
+    }
+  }
+
+  &:active{
+    background: color(brand-primary, 700);
+  }
+}
+
+// ********************************************
+// Disable
+.#{$el-container-disabled}{
+  .#{$el-box}{
+    cursor: not-allowed;
+    border: solid 1px transparent;
+    background: color(neutral, 100);
+    color: #5C6574;
+  }
+
+  .#{$el-input}{
+    background: color(neutral, 000);
+  }
+
+  &:hover {
+    .#{$el-box}{
+      border: solid 1px transparent;
+      background: color(neutral, 100);
+    }
+  }
+}
+
+
+// ********************************************
+// Read Only
+.#{$el-container-read-only}{
+
+  .#{$el-box}{
+    cursor: not-allowed;
+    border: $toggle-border-neutral;
+    background: $background-neutral;
+    color: color(neutral, 000);
+  }
+
+  .#{$el-input}{
+    background: color(neutral, 100);
+  }
+
+  &:hover {
+    .#{$el-box}{
+      border: $toggle-border-neutral;
+      background: $background-neutral;
+    }
+  }
+  &:focus {
+    @include box-shadow($focus-neutral);
+  }
+
+}

package/dist/styles/components/packages/ds-group-box/DSGroupBox.scss

@@ -0,0 +1,11 @@
+// ********************************************
+// container definition
+$group-box-wrapper: #{$prefix}-group-box__wrapper;
+$group-box-content: #{$prefix}-group-box__content;
+$group-box-label: #{$prefix}-group-box__label;
+
+// ********************************************
+@import "./styles/wrapper.scss";
+@import "./styles/group.scss";
+@import "./styles/label.scss";
+@import "./styles/tree.scss";

package/dist/styles/components/packages/ds-group-box/styles/group.scss

@@ -0,0 +1,59 @@
+.#{$group-box-content} {
+  padding: space(m) 0;
+  border: $theme-base-border-style color(neutral, 200);
+
+  &--no-border-top {
+    border-top: none;
+  }
+
+  &.#{$group-box-content}--group-box {
+    padding: space(m) 0;
+  }
+  &--only-header {
+    border: none;
+  }
+  &--no-border {
+      border: none;
+      .#{$group-box-label} {
+        border-bottom: none;
+      }
+  }
+}
+
+// as row
+.#{$group-box-content} {
+  &--as-row {
+    display: flex;
+    flex-direction: row;
+    padding-left: 0;
+    padding-right: 0;
+
+    .#{$group-box-wrapper}.#{$group-box-wrapper}--main-box {
+      .#{$group-box-content} {
+        padding-left: 0;
+      }
+  }
+
+    .#{$group-box-wrapper} {
+      flex: 1;
+      margin-left: space(m);
+    }
+    .#{$group-box-wrapper}:first-child {
+      margin-left: 0;
+      border-left: none;
+    }
+    .#{$group-box-wrapper}:last-child {
+      border-right: none;
+    }
+  }
+  &--no-padding {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  &--no-border {
+    border: none;
+    .#{$group-box-wrapper} {
+      border: none;
+    }
+  }
+}

package/dist/styles/components/packages/ds-group-box/styles/label.scss

@@ -0,0 +1,28 @@
+$group-box-label: #{$prefix}-group-box__label;
+
+.#{$group-box-label} {
+  &--category-box {
+    width: 100%;
+    height: space(l) * 1.1252;
+    padding:0 0;
+    color: color(neutral, 800);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: $theme-base-border-style color(neutral, 200);
+  }
+
+  &--no-border{
+    border: none;
+  }
+
+  &.#{$group-box-label}--group-box {
+    border: unset;
+    font-size: font-size(500);
+    padding: 12px 0;
+
+    &.#{$group-box-label}--border-bottom {
+      border-bottom: $theme-base-border-style color(neutral, 200);
+    }
+  }
+}

package/dist/styles/components/packages/ds-group-box/styles/tree.scss

@@ -0,0 +1,57 @@
+$cat: #{$group-box-content}--category-box;
+$group: #{$group-box-wrapper}--group-box;
+
+.#{$cat} {
+  .#{$group}:first-child {
+    border-left: none;
+  }
+  .#{$group}:last-child {
+    border-right: none;
+  }
+
+  .#{$group-box-wrapper} {
+    .#{$group-box-content} {
+      padding-left: space(s);
+    }
+  }
+  .#{$group-box-wrapper}:first-child {
+    .#{$group-box-content} {
+      border-left: none;
+    }
+  }
+  .#{$group-box-wrapper}:last-child {
+    .#{$group-box-content} {
+      border-right: none;
+    }
+  }
+}
+
+.#{$group-box-wrapper}--no-border {
+  .#{$cat} {
+    .#{$group-box-wrapper}:first-child {
+      .#{$group-box-content} {
+        border-left: $theme-base-border-style color(neutral, 200);
+      }
+      .#{$group-box-content}--no-border {
+        border-left: none;
+      }
+    }
+
+    .#{$group-box-wrapper}:last-child {
+      .#{$group-box-content} {
+        border-right: $theme-base-border-style color(neutral, 200);
+      }
+      .#{$group-box-content}--no-border {
+        border-right: none;
+      }
+    }
+  }
+}
+
+
+
+.#{$group} {
+  & > .#{$cat} {
+    padding-top: 0;
+  }
+}

package/dist/styles/components/packages/ds-group-box/styles/wrapper.scss

@@ -0,0 +1,17 @@
+.#{$group-box-wrapper} {
+  display: flex;
+  flex-direction: column;
+  &--no-border {
+    border: none;
+  }
+
+  &--main-box {
+    > .#{$group-box-content} {
+      //padding-left: space(s);
+      &--as-row{
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
+  }
+}

package/dist/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);
+        }
+      }
+    }
+  }
+}