@elliemae/ds-basic 3.22.0-rc.1 → 3.22.0-rc.11

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

@@ -2,6 +2,7 @@
 // container definition
 $el-container: #{$prefix}-form-element-toggle;
 
+
 // ********************************************
 // block
 $el-box: #{$el-container}-box;
@@ -23,6 +24,7 @@ $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);
@@ -39,33 +41,29 @@ $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-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-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);
+$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;
-  }
+  from { opacity: 0; }
+  to   { opacity: 1; }
 }
 // ********************************************
 // Default state
-.#{$el-container} {
+.#{$el-container}{
   @include border-radius(space(xs));
   position: relative;
   display: inline-block;
@@ -79,21 +77,21 @@ $focus-on: 0 0 3px 2px rgba(color(brand-primary, 700), 0.5);
   &.ds-form-element-toggle-hide {
     opacity: 0;
   }
-  &.#{$el-container-s}.#{$el-input} {
+  &.#{$el-container-s}.#{$el-input}{
     left: 37px;
   }
-  &.#{$el-container-m}.default-state-checked .#{$el-input} {
+  &.#{$el-container-m}.default-state-checked .#{$el-input}{    
     left: 54px;
   }
-  &.#{$el-container-l}.default-state-checked .#{$el-input} {
-    left: 71px;
+  &.#{$el-container-l}.default-state-checked .#{$el-input}{
+    left: 71px
   }
   position: relative;
   z-index: 0;
   &:focus {
-    &:before {
+    &:before{
       display: block;
-      content: '';
+      content: "";
       position: absolute;
       top: -2px;
       left: -2px;
@@ -102,9 +100,9 @@ $focus-on: 0 0 3px 2px rgba(color(brand-primary, 700), 0.5);
       pointer-events: none;
       border: solid 2px color(brand-primary, 600);
     }
-    &:after {
+    &:after{
       display: block;
-      content: '';
+      content: "";
       position: absolute;
       top: -1px;
       left: -1px;
@@ -114,30 +112,29 @@ $focus-on: 0 0 3px 2px rgba(color(brand-primary, 700), 0.5);
       border: solid 1px color(brand-primary, 300);
     }
   }
-  &:after,
-  &:before {
+  &:after, &:before{
     @include border-radius(space(s));
   }
 }
 
-.#{$el-box} {
+.#{$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));
+  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 {
+  &:hover{
     background: color(neutral, 600);
   }
 }
 
-.#{$el-input} {
+.#{$el-input}{
   @include border-radius(50%);
   height: $toggle-circle;
   width: $toggle-circle;
@@ -145,27 +142,27 @@ $focus-on: 0 0 3px 2px rgba(color(brand-primary, 700), 0.5);
   transition: $toggle-transition;
   display: inline-block;
   position: absolute;
-  top: calc(#{space(xxs)} * 0.25); // show 1px of border
+  top: calc(#{space(xxs)} * 0.25);  // show 1px of border
   left: 0;
   margin-left: $toggle-circle-left-diff;
   cursor: pointer;
-  &.default-state-checked {
+  &.default-state-checked{
     left: 58px;
   }
 }
 
 .#{$el-on},
-.#{$el-off} {
+.#{$el-off}{
   width: 100%;
   text-align: center;
   @include body-micro-text-style(semibold);
   padding: 0 space(xxs);
   line-height: $toggle-height;
 }
-.#{$el-on} {
+.#{$el-on}{
   padding: 0 $toggle-circle 0 $diff-spacing;
 }
-.#{$el-off} {
+.#{$el-off}{
   padding: 0 $diff-spacing 0 $toggle-circle;
 }
 
@@ -180,36 +177,36 @@ $focus-on: 0 0 3px 2px rgba(color(brand-primary, 700), 0.5);
   width: $toggle-width-m;
   height: space(m);
 
-  .#{$el-box} {
+  .#{$el-box}{
     @include border-radius(space(m));
     height: space(m);
     width: $toggle-width-m;
   }
 
-  .#{$el-input} {
+  .#{$el-input}{
     height: $toggle-circle-m;
     width: $toggle-circle-m;
   }
 
   .#{$el-on},
-  .#{$el-off} {
+  .#{$el-off}{
     width: 100%;
     text-align: center;
     line-height: $toggle-height-m;
     font-size: font-size(500);
     padding: 0 space(xs);
   }
-  .#{$el-on} {
+  .#{$el-on}{
     padding: 0 $toggle-circle-m 0 space(xxs);
   }
-  .#{$el-off} {
+  .#{$el-off}{
     padding: 0 space(xxs) 0 $toggle-circle-m;
   }
-
-  &:after,
-  &:before {
-    @include border-radius(space(m));
-  }
+  
+    &:after, &:before{
+      @include border-radius(space(m));
+    }
+  
 }
 
 .#{$el-container-l} {
@@ -217,19 +214,19 @@ $focus-on: 0 0 3px 2px rgba(color(brand-primary, 700), 0.5);
   width: $toggle-width-l;
   height: space(l);
 
-  .#{$el-box} {
+  .#{$el-box}{
     @include border-radius(space(l));
     height: space(l);
     width: $toggle-width-l;
   }
 
-  .#{$el-input} {
+  .#{$el-input}{
     height: $toggle-circle-l;
     width: $toggle-circle-l;
   }
 
   .#{$el-on},
-  .#{$el-off} {
+  .#{$el-off}{
     width: 100%;
     text-align: center;
     @include body-micro-text-style(semibold);
@@ -237,27 +234,28 @@ $focus-on: 0 0 3px 2px rgba(color(brand-primary, 700), 0.5);
     font-size: font-size(700);
   }
 
-  .#{$el-on} {
+  .#{$el-on}{
     padding: 0 $toggle-circle-l 0 space(xs);
   }
-  .#{$el-off} {
+  .#{$el-off}{
     padding: 0 space(xs) 0 $toggle-circle-l;
   }
 
-  &:after,
-  &:before {
+    
+  &:after, &:before{
     @include border-radius(space(l));
   }
 }
 
 // ********************************************
 // Checked
-.#{$el-container-checked} {
-  .#{$el-box} {
+.#{$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));
+    color:color-contrast($background-neutral, color(neutral, 900), color(neutral, 000));
   }
 
   .#{$el-input} {
@@ -265,63 +263,65 @@ $focus-on: 0 0 3px 2px rgba(color(brand-primary, 700), 0.5);
   }
 
   &:hover {
-    .#{$el-box} {
+    .#{$el-box}{
       border: $toggle-border-hover;
       background: $background-hover;
     }
   }
   &:focus {
-    &:before {
+    &:before{
       border: solid 2px color(brand-primary, 700);
     }
-    &:after {
+    &:after{
       border: solid 1px color(brand-primary, 300);
     }
   }
 
-  &:active {
+  &:active{
     background: color(brand-primary, 700);
   }
 }
 
 // ********************************************
 // Disable
-.#{$el-container-disabled} {
-  .#{$el-box} {
+.#{$el-container-disabled}{
+  .#{$el-box}{
     cursor: not-allowed;
     border: solid 1px transparent;
     background: color(neutral, 100);
-    color: #5c6574;
+    color: #5C6574;
   }
 
-  .#{$el-input} {
+  .#{$el-input}{
     background: color(neutral, 000);
   }
 
   &:hover {
-    .#{$el-box} {
+    .#{$el-box}{
       border: solid 1px transparent;
       background: color(neutral, 100);
     }
   }
 }
 
+
 // ********************************************
 // Read Only
-.#{$el-container-read-only} {
-  .#{$el-box} {
+.#{$el-container-read-only}{
+
+  .#{$el-box}{
     cursor: not-allowed;
     border: $toggle-border-neutral;
     background: $background-neutral;
     color: color(neutral, 000);
   }
 
-  .#{$el-input} {
+  .#{$el-input}{
     background: color(neutral, 100);
   }
 
   &:hover {
-    .#{$el-box} {
+    .#{$el-box}{
       border: $toggle-border-neutral;
       background: $background-neutral;
     }
@@ -329,4 +329,5 @@ $focus-on: 0 0 3px 2px rgba(color(brand-primary, 700), 0.5);
   &:focus {
     @include box-shadow($focus-neutral);
   }
-}
+
+}

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

@@ -5,7 +5,7 @@ $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';
+@import "./styles/wrapper.scss";
+@import "./styles/group.scss";
+@import "./styles/label.scss";
+@import "./styles/tree.scss";

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

@@ -13,10 +13,10 @@
     border: none;
   }
   &--no-border {
-    border: none;
-    .#{$group-box-label} {
-      border-bottom: none;
-    }
+      border: none;
+      .#{$group-box-label} {
+        border-bottom: none;
+      }
   }
 }
 
@@ -32,7 +32,7 @@
       .#{$group-box-content} {
         padding-left: 0;
       }
-    }
+  }
 
     .#{$group-box-wrapper} {
       flex: 1;

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

@@ -4,7 +4,7 @@ $group-box-label: #{$prefix}-group-box__label;
   &--category-box {
     width: 100%;
     height: space(l) * 1.1252;
-    padding: 0 0;
+    padding:0 0;
     color: color(neutral, 800);
     display: flex;
     flex-direction: row;
@@ -12,7 +12,7 @@ $group-box-label: #{$prefix}-group-box__label;
     border-bottom: $theme-base-border-style color(neutral, 200);
   }
 
-  &--no-border {
+  &--no-border{
     border: none;
   }
 

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

@@ -48,6 +48,8 @@ $group: #{$group-box-wrapper}--group-box;
   }
 }
 
+
+
 .#{$group} {
   & > .#{$cat} {
     padding-top: 0;

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

@@ -8,7 +8,7 @@
   &--main-box {
     > .#{$group-box-content} {
       //padding-left: space(s);
-      &--as-row {
+      &--as-row{
         padding-left: 0;
         padding-right: 0;
       }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-imagelibrarymodal/DSImageLibraryModal.scss

@@ -56,9 +56,7 @@ $el-body-wrapper: #{$el-container}__body-wrapper;
         text-align: center;
         font-size: font-size(600);
       }
-      img,
-      .#{$el-icon},
-      .#{$spinner-container} {
+      img, .#{$el-icon}, .#{$spinner-container} {
         margin: auto;
         width: 100%;
         height: 85%;
@@ -85,4 +83,4 @@ $el-body-wrapper: #{$el-container}__body-wrapper;
       }
     }
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-label-value/DSLabelValue.scss

@@ -14,7 +14,7 @@ $el-label-value-value: #{$el-label-value}__value;
 .#{$el-label-value-group-wrapper} {
   display: flex;
   flex-direction: column;
-  width: fit-content;
+  width: fit-content; 
   max-width: 100%;
 }
 
@@ -25,13 +25,13 @@ $el-label-value-value: #{$el-label-value}__value;
     .#{$el-wrapper} {
       .#{$el-label-value-wrapper} {
         flex-direction: row;
-
+  
         .#{$el-label-value-label} {
-          margin-right: space(xs);
+          margin-right: space(xs)
         }
       }
     }
-  }
+  }  
 }
 
 .#{$el-label-value-group-wrapper}--vertical {
@@ -44,19 +44,19 @@ $el-label-value-value: #{$el-label-value}__value;
 
       .#{$el-label-value-wrapper} {
         flex-direction: row;
-
+  
         .#{$el-label-value-label} {
-          margin-right: space(xs);
+          margin-right: space(xs)
         }
       }
     }
-  }
+  }  
 }
 
 .#{$el-wrapper} {
   display: flex;
   flex-direction: row;
-  width: auto;
+  width: auto; 
   max-width: 100%;
   margin: space(s);
 
@@ -65,7 +65,7 @@ $el-label-value-value: #{$el-label-value}__value;
     fill: color(neutral, 500);
     height: auto;
     margin-right: space(xxs);
-
+    
     svg {
       height: auto;
     }
@@ -87,46 +87,46 @@ $el-label-value-value: #{$el-label-value}__value;
     .#{$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 {
+    }  
+    
+    .#{$el-label-value-value}--l {    
       font-size: space(s);
     }
-
-    .#{$el-label-value-value}--semibold {
+  
+    .#{$el-label-value-value}--semibold {    
       font-weight: 600;
-    }
+    }     
   }
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-menu/Menu.scss

@@ -1 +1 @@
-@import '../../ds-common/src/Menu/Menu';
+@import '../../ds-common/src/Menu/Menu';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-menu/MenuCombobox.scss

@@ -1 +1 @@
-@import '../../ds-common/src/Menu/MenuCombobox';
+@import '../../ds-common/src/Menu/MenuCombobox';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-menu/MenuItems/MenuItem.scss

@@ -1 +1 @@
-@import '../../../ds-common/src/Menu/MenuItems/MenuItem';
+@import '../../../ds-common/src/Menu/MenuItems/MenuItem';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-menu/MenuItems/SearchableGroup.scss

@@ -1 +1 @@
-@import '../../../ds-common/src/Menu/MenuItems/SearchableGroup';
+@import '../../../ds-common/src/Menu/MenuItems/SearchableGroup';

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-modal/DSModal.scss

@@ -1,2 +1,2 @@
 @import './v1/DSModal';
-@import './v2/DSModal';
+@import './v2/DSModal';