@elliemae/ds-basic 3.22.0-rc.7 → 3.22.0-rc.8

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

@@ -11,24 +11,18 @@ $btn-el: #{$prefix}-button;
 
   &--horizontal {
     &.#{$btn-group-container}--s {
-      & > .#{$btn-el} {
-        margin-right: space(s);
-      }
-    }
+      & > .#{$btn-el} { margin-right: space(s); }      
+    } 
 
-    &.#{$btn-group-container}--m {
-      & > .#{$btn-el} {
-        margin-right: space(m);
-      }
-    }
+    &.#{$btn-group-container}--m {   
+      & > .#{$btn-el} { margin-right: space(m); }         
+    }    
 
-    &.#{$btn-group-container}--l {
-      & > .#{$btn-el} {
-        margin-right: space(l);
-      }
-    }
+    &.#{$btn-group-container}--l {    
+      & > .#{$btn-el} { margin-right: space(l); }
+    }  
 
-    .#{$btn-el} {
+    .#{$btn-el} {            
       &:not(:last-child) {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
@@ -43,32 +37,23 @@ $btn-el: #{$prefix}-button;
 
   &--vertical {
     &.#{$btn-group-container}--s {
-      & > .#{$btn-el} {
-        margin-bottom: space(s);
-      }
-    }
+      & > .#{$btn-el} { margin-bottom: space(s); }      
+    } 
 
-    &.#{$btn-group-container}--m {
-      & > .#{$btn-el} {
-        margin-bottom: space(m);
-      }
-    }
+    &.#{$btn-group-container}--m {   
+      & > .#{$btn-el} { margin-bottom: space(m); }         
+    }    
 
-    &.#{$btn-group-container}--l {
-      & > .#{$btn-el} {
-        margin-bottom: space(l);
-      }
-    }
+    &.#{$btn-group-container}--l {    
+      & > .#{$btn-el} { margin-bottom: space(l); }
+    } 
 
     flex-direction: column;
   }
 
   .#{$btn-el} {
-    &:hover {
-      z-index: 3;
-    }
-    &:focus {
-      z-index: 2;
-    }
+    &:hover { z-index: 3; }
+    &:focus { z-index: 2; }
   }
+
 }

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

@@ -13,7 +13,6 @@ $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;
@@ -33,7 +32,6 @@ $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;
@@ -44,14 +42,13 @@ $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 {
+  &::after {
     content: '';
     position: absolute;
     top: 0;
@@ -59,6 +56,7 @@ $text-disabled: #5c6574;
     width: 100%;
     height: 100%;
     pointer-events: none;
+
     @include dsFocus($color);
   }
 }
@@ -68,12 +66,13 @@ $text-disabled: #5c6574;
 }
 
 div.#{$btn-el} {
-  -webkit-appearance: initial;
+  appearance: initial;
 }
 
 .#{$btn-el} {
   @include body-text-style(semibold);
-  @include center();
+  @include center;
+
   min-width: $button-width;
   line-height: unset;
   border-radius: $button-border-radius;
@@ -105,6 +104,7 @@ div.#{$btn-el} {
       margin-right: space(xs);
       margin-left: space(xs) * -1;
     }
+
     &:last-child:not(:first-child) {
       margin-left: space(xs);
       margin-right: space(xs) * -1;
@@ -128,6 +128,7 @@ div.#{$btn-el} {
   &.#{$btn-el}--icon-only {
     width: $s-size;
   }
+
   // https://jira.elliemae.io/browse/PUI-6990
   // & .#{$btn-icon} {
   //   height: 12px;
@@ -141,6 +142,7 @@ div.#{$btn-el} {
   &.#{$btn-el}--icon-only {
     width: $m-size;
   }
+
   // https://jira.elliemae.io/browse/PUI-6990
   // & .#{$btn-icon} {
   //   height: 14px;
@@ -188,7 +190,8 @@ div.#{$btn-el} {
     color: $text-disabled;
     background-color: color(neutral, 100);
     border-color: color(neutral, 100);
-    @include withDisabled();
+
+    @include withDisabled;
 
     .#{$btn-icon} {
       @include icon-color($text-disabled);
@@ -263,7 +266,8 @@ div.#{$btn-el} {
   &.#{$btn-el-vdisabled} {
     color: color(neutral, 500);
     background: color(neutral, 000);
-    @include withDisabled();
+
+    @include withDisabled;
 
     .#{$btn-icon} {
       @include icon-color(color(neutral, 500));
@@ -327,7 +331,8 @@ div.#{$btn-el} {
   &.#{$btn-el-vdisabled} {
     color: color(neutral, 500);
     background-color: color(neutral, 000);
-    @include withDisabled();
+
+    @include withDisabled;
 
     .#{$btn-icon} {
       @include icon-color(color(neutral, 500));
@@ -352,7 +357,8 @@ div.#{$btn-el} {
 // ********************************************
 // link
 .#{$btn-el-link} {
-  @include link-text-style();
+  @include link-text-style;
+
   padding: 0;
   color: color(brand-primary, 600);
   border: none;
@@ -373,14 +379,16 @@ div.#{$btn-el} {
 
   &:disabled {
     color: color(neutral, 400);
-    @include withDisabled();
+
+    @include withDisabled;
   }
 
   &.#{$btn-el}--icon-only {
     &:focus,
     &.#{$btn-el-vfocus} {
       span.label-wrapper {
-        @include withFocus();
+        @include withFocus;
+
         &::after {
           top: -2px;
           left: -2px;
@@ -427,7 +435,7 @@ $intent-colors: (
       color: $color;
 
       span.label-wrapper.no-icon {
-        &:before {
+        &::before {
           background-color: transparent;
           border-radius: 2px;
         }
@@ -457,7 +465,7 @@ $intent-colors: (
   }
 
   .#{$btn-el-m} {
-    font-size: toMobile(font-size(600));
+    font-size: tomobile(font-size(600));
     height: calc(#{space(m)} * 1.085);
 
     &.#{$btn-el}--icon-only {
@@ -473,7 +481,7 @@ $intent-colors: (
   }
 
   .#{$btn-el-l} {
-    font-size: toMobile(font-size(600));
+    font-size: tomobile(font-size(600));
     height: calc(#{space(l)} * 1.016);
 
     &.#{$btn-el}--icon-only {

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

@@ -17,7 +17,6 @@ $el-pull-right: #{$el-header}__pull-right;
 
   .#{$el-header} {
     color: color(neutral, 600);
-    background: color(neutral, 050);
     padding: 6px 15px;
     border-bottom: 1px solid transparent;
     @include border-radius(0);

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

@@ -9,31 +9,32 @@ $box: #{$card-array}__box;
   flex-direction: row;
   flex-wrap: wrap;
 
+
   @for $i from 1 through 4 {
-    &--cols-lg-#{$i} {
+    &--cols-lg-#{$i} { 
       .#{$box} {
         $width: 100 / #{$i};
-        width: calc(#{$width}% - (#{space(s)} * 2));
+        width: calc(#{$width}%  - (#{space(s)} * 2));
       }
     }
   }
 
   @media (max-width: 1024px) {
     @for $i from 1 through 4 {
-      &--cols-md-#{$i} {
+      &--cols-md-#{$i} { 
         .#{$box} {
           $width: 100 / #{$i};
-          width: calc(#{$width}% - (#{space(s)} * 2));
+          width: calc(#{$width}%  - (#{space(s)} * 2));
         }
       }
     }
   }
   @media (max-width: 800px) {
     @for $i from 1 through 4 {
-      &--cols-sm-#{$i} {
+      &--cols-sm-#{$i} { 
         .#{$box} {
           $width: 100 / #{$i};
-          width: calc(#{$width}% - (#{space(s)} * 2));
+          width: calc(#{$width}%  - (#{space(s)} * 2));
         }
       }
     }

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

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

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

@@ -11,59 +11,59 @@ $options-group: #{$el-container}-options-group;
 $ds-checkbox: #{$prefix}-form-element-checkbox;
 
 .#{$el-file-name} {
-  padding-bottom: space(s);
-  border-bottom: 1px solid color(neutral, 050);
+	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);
+    display: flex;
+    margin-top: space(s);
+    margin-bottom: space(s);
 
-  .em-ds-button:first-child {
-    margin-right: space(s);
-  }
+    .em-ds-button:first-child {
+    	margin-right: space(s);
+    }
 }
 
 .#{$el-next-back-btn},
 .#{$el-replace-btns} {
-  display: flex;
+	display: flex;
 }
 
 .#{$el-replace},
 .#{$el-replace-btns} {
-  margin-top: space(s);
+	margin-top: space(s);
 }
 
 .#{$el-replace-btns} {
-  margin-bottom: space(s);
-  .em-ds-button:first-child {
-    margin-right: space(s);
-  }
+	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;
+	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);
-    }
-  }
+		.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);
-  }
+	padding: 0 space(xs);
+	display: flex;
+	.#{$ds-checkbox}:not(:last-child) {
+		margin-right: space(s);
+	}
 }
 
 .ace_editor {
-  width: 100% !important;
+	width: 100% !important;
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/Checkbox/DSCheckbox.scss

@@ -12,20 +12,19 @@ $el-button: #{$el-container}__input-button;
 $el-text: #{$el-container}__label-text;
 $el-children: #{$el-container}__checkbox-children;
 
+
 // ********************************************
 // local
 $border-type: solid 1px;
 $checkbox-size: space(s);
 
+
 .#{$el-text} {
   position: relative;
   margin-left: space(xs);
-  bottom: space(xxs) * (-0.25); // todo: fix - extra pixel below the text. The font itself has some misalignment
+  bottom: space(xxs) * (-0.25);// todo: fix - extra pixel below the text. The font itself has some misalignment
 }
-*::-ms-backdrop,
-.#{$el-text} {
-  bottom: 0;
-} /* IE11 */
+*::-ms-backdrop, .#{$el-text} { bottom: 0; } /* IE11 */
 
 .#{$el-label} {
   @include body-text-style();
@@ -42,13 +41,13 @@ $checkbox-size: space(s);
   &:first-child:not(:last-child) {
     margin-right: space(xs);
   }
-
+  
   & > span:first-child {
     height: 16px;
   }
 }
 
-.#{$el-children} {
+.#{$el-children}{
   padding-left: space(m);
 }
 
@@ -61,11 +60,13 @@ $checkbox-size: space(s);
 // ********************************************
 // Error container & elements             *****
 .#{$el-container-error} {
+
 }
 
 // ********************************************
 // Disabled container & elements          *****
 .#{$el-container-disabled} {
+
   .#{$el-label} {
     cursor: not-allowed;
   }
@@ -73,13 +74,16 @@ $checkbox-size: space(s);
   .#{$el-text} {
     color: color(neutral, 500);
   }
+
 }
 
 // ********************************************
 // Read only container & elements         *****
 .#{$el-container-read-only} {
+
 }
 
+
 @import './elements/CheckMark';
 
 // Mobile
@@ -91,4 +95,4 @@ $checkbox-size: space(s);
   .#{$el-container} {
     padding-bottom: toMobile(space(s));
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/Checkbox/elements/CheckMark.scss

@@ -25,7 +25,7 @@ $el-label: #{$el-container}__label;
     .#{$el-button} {
       @include withActive();
     }
-  }
+  } 
 }
 
 .#{$el-button} {
@@ -42,6 +42,7 @@ $el-label: #{$el-container}__label;
   cursor: pointer;
 
   &.checkbox-true {
+    
     &:after {
       width: space(xxs);
       height: space(xs);
@@ -139,7 +140,7 @@ $el-label: #{$el-container}__label;
     .#{$el-button} {
       background: color(neutral, 080);
     }
-  }
+  }  
 }
 
 .#{$el-button} {
@@ -180,15 +181,16 @@ $el-label: #{$el-container}__label;
         @include withHoverM();
       }
     }
-
+  
     &:active {
       .#{$el-button} {
         outline: none;
         border: 2px solid color(brand-primary, 600);
       }
-    }
+    } 
   }
 
+
   .#{$el-button} {
     -webkit-tap-highlight-color: transparent;
     width: toMobile(space(m));
@@ -219,4 +221,4 @@ $el-label: #{$el-container}__label;
       }
     }
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/ComboBox/DSComboBox.scss

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

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/ComboBox/v1/DSComboBox.scss

@@ -94,8 +94,7 @@ $input-height: 28px;
   &--is-selected {
     background-color: color(brand-primary, 600);
     color: color(neutral, 000);
-    svg,
-    svg:not([fill]) {
+    svg, svg:not([fill]) {
       fill: color(neutral, 000);
     }
   }
@@ -116,8 +115,7 @@ $input-height: 28px;
   .#{$indicators-el} {
     position: relative;
     .clear-indicator {
-      svg,
-      svg:not([fill]) {
+      svg, svg:not([fill]) {
         padding: 0;
         margin-top: calc(#{space(xxs)} * (-0.5));
       }
@@ -213,8 +211,7 @@ VARIANTS
     &--is-selected {
       background-color: color(brand-primary, 600);
       color: color(neutral, 000);
-      svg,
-      svg:not([fill]) {
+      svg, svg:not([fill]) {
         fill: color(neutral, 000);
       }
     }
@@ -231,7 +228,7 @@ VARIANTS
 .combobox-multi-select-header {
   padding: space(s);
 }
-.#{$el-container}__value-container {
+.#{$el-container}__value-container{
   &:focus-within {
     @include dsFakeActive();
   }
@@ -258,10 +255,11 @@ VARIANTS
   }
 }
 
+
 // ValueContainer
-.combobox-value-container {
+.combobox-value-container{
   width: 100%;
   &:focus {
     @include dsFocus();
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/ComboBox/v2/styles/container.scss

@@ -1,9 +1,9 @@
 $container: #{$combo}-container;
 .#{$container} {
   width: 100%;
-  input[type='text'] {
-    background: color(neutral, 000) !important; // accessibility
-    color: color(neutral, 800) !important; // accessibility
+  input[type="text"] {
+    background: color(neutral, 000)!important; // accessibility
+    color: color(neutral, 800)!important; // accessibility
   }
   height: $height;
   background: color(neutral, 000);

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/ComboBox/v2/styles/customOptions.scss

@@ -11,29 +11,29 @@ $menu-option: #{$combo}__option;
   overflow: hidden; // avoid overflow inside option
   display: flex;
   flex-direction: column;
-  &--is-focused,
-  &:hover {
+  &--is-focused, &:hover {
     @include dsHover();
   }
   &:active {
     background-color: color(brand-primary, 200);
-  }
+  }  
   &--is-selected {
     background-color: color(brand-primary, 200);
     color: color(neutral, 800);
-    svg,
-    svg:not([fill]) {
+    svg, svg:not([fill]) {
       fill: color(neutral, 000);
     }
   }
 }
 
+
 $menu-list-multi: combobox-menu-list-is-multi;
 
-.#{$menu-list-multi} {
+.#{$menu-list-multi}{
   .#{$menu-option} {
     &--is-selected {
       background-color: color(brand-primary, 200);
     }
   }
+  
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/ComboBox/v2/styles/dropdownIndicator.scss

@@ -1,6 +1,8 @@
 $btn: #{$prefix}-button;
 $btn-dropdown: dropdown-indicator;
 
+
+
 .#{$btn}.#{$btn-dropdown} {
   &.active {
     border: none;

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/ComboBox/v2/styles/menu.scss

@@ -1,25 +1,26 @@
+
 $menu: #{$combo}__menu;
 $combo-trigger: #{$combo}-trigger;
 
 .#{$menu} {
-  margin: 0;
-  top: 100%;
-  background: color(neutral, 0);
-  @include border-radius($radius);
-  border: solid 1px color(neutral, 400);
-  @include box-shadow(depth(300));
-  margin-bottom: 8px;
-  margin-top: space(xs);
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-}
+    margin: 0;
+    top: 100%;
+    background: color(neutral, 0);
+    @include border-radius($radius);
+    border: solid 1px color(neutral, 400);
+    @include box-shadow(depth(300));
+    margin-bottom: 8px;
+    margin-top: space(xs);
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+  }
 
 .#{$combo-trigger} {
-  position: relative;
-  top: -2.5rem;
-  height: $height;
-}
+    position: relative;
+    top: -2.5rem;
+    height: $height;
+  }
 
 .em-ds-layout__header {
   z-index: 1;