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

package/{styles → dist/styles}/components/packages/ds-basic/styles/components/index.scss

@@ -11,7 +11,6 @@
 @import "../../../ds-filterbar/src/DSFilterBar.scss";
 @import "../../../ds-modal/src/DSModal.scss";
 @import "../../../ds-modal-slide/src/DSModalSlide.scss";
-@import "../../../ds-dropdownmenu/src/DSDropdownMenu.scss";
 @import "../../../ds-datagrids/src/DataGrids.scss";
 @import "../../../ds-treeview/src/Tree";
 @import "../../../ds-query-builder/src/DSQueryBuilder.scss";

package/{styles → dist/styles}/components/packages/ds-basic/styles/dist-index.scss

@@ -38,6 +38,7 @@
 @import 'packages/ds-form/RadioGroup/DSRadioGroup';
 @import 'packages/ds-form/CheckboxGroup/DSCheckboxGroup';
 @import 'packages/ds-form/RequiredMark/RequiredMark';
+@import 'packages/ds-dropdownmenu/DSDropdownMenu';
 @import 'packages/ds-menu/Menu';
 @import 'packages/ds-page-header/DSPageHeader';
 @import 'packages/ds-pills/DSPills';
@@ -53,7 +54,6 @@
 @import 'packages/ds-shuttle/DSShuttle';
 @import 'packages/ds-modal/DSModal';
 @import 'packages/ds-modal-slide/DSModalSlide';
-@import 'packages/ds-dropdownmenu/DSDropdownMenu';
 @import 'packages/ds-datagrids/DataGrids';
 @import 'packages/ds-treeview/Tree';
 @import 'packages/ds-query-builder/DSQueryBuilder';

package/{styles → dist/styles}/components/packages/ds-button/DSButton.scss

@@ -52,7 +52,7 @@ $text-disabled: #5c6574;
   position: relative;
 
   &:after {
-    content: "";
+    content: '';
     position: absolute;
     top: 0;
     left: 0;
@@ -288,7 +288,7 @@ div.#{$btn-el} {
 
 // ********************************************
 // Secondary
-.#{$btn-el-secondary}{
+.#{$btn-el-secondary} {
   color: color(brand-primary, 600);
   background-color: color(neutral, 000);
   border: $border-type color(neutral, 400);
@@ -393,10 +393,10 @@ div.#{$btn-el} {
 }
 
 $intent-colors: (
-  "success": color("success", 900),
-  "danger": color("danger", 900),
-  "warning": color("warning", 900),
-  "info": color("brand-primary", 600),
+  'success': color('success', 900),
+  'danger': color('danger', 900),
+  'warning': color('warning', 900),
+  'info': color('brand-primary', 600),
 );
 
 @each $intent, $color in $intent-colors {
@@ -425,7 +425,7 @@ $intent-colors: (
     &:hover:not([disabled]),
     &.#{$btn-el-vhover} {
       color: $color;
-      
+
       span.label-wrapper.no-icon {
         &:before {
           background-color: transparent;

package/{styles/components/packages/ds-form → dist/styles/components/packages/ds-common}/Input/DSInput.scss

@@ -37,15 +37,24 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
 @mixin withActive() {
   border: calc(#{space(xxs)} * 0.25) solid color(brand-primary, 600);
 }
+
 @mixin withDisabled() {
-  border: calc(#{space(xxs)} * 0.25) solid color(neutral, 400);
-  background: color(neutral, 100) !important;
+  border: 1px solid color(neutral, 400);
+  background: color(neutral, 080) !important;
   color: #616b7f;
+  -webkit-text-fill-color: #616b7f;
+  opacity: 1;
 }
+
 @mixin withReadOnly() {
   border: none;
-  border-top: calc(#{space(xxs)} * 0.25) solid color(neutral, 400);
+  border-top: 1px solid color(neutral, 400);
+  border-bottom: 1px solid transparent;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
   background: none;
+  border-radius: 0;
+  color: color(neutral, 500);
 }
 
 @mixin withError() {
@@ -67,13 +76,13 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
   @include border-radius($radius);
   border: $border-type color(neutral, 400);
   text-overflow: ellipsis;
-  
+
   &::-ms-clear {
     display: none;
   }
   &:-webkit-autofill,
   &:-webkit-autofill:hover,
-  &:-webkit-autofill:focus textarea:-webkit-autofill{
+  &:-webkit-autofill:focus textarea:-webkit-autofill {
     margin: 2px;
     height: calc(#{$input-height} - 4px);
     // -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important; // fix chrome autocomplete
@@ -82,11 +91,12 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
   &:not(.floating-label-input-controller):hover {
     @include dsHover();
 
-    &:active, &:focus {
-      @include dsFocus(); 
+    &:active,
+    &:focus {
+      @include dsFocus();
     }
   }
-   
+
   &:active {
     color: color(neutral, 800);
     @include dsActive();
@@ -103,11 +113,16 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
     @include dsFocus();
   }
 
-  &:disabled, &.input-disabled {
+  &:disabled,
+  &.input-disabled {
     @include withDisabled();
     @include placeholder {
-      color: #5C6574;
-    }   
+      color: #5c6574;
+    }
+  }
+
+  &.read-only {
+    @include withReadOnly();
   }
 }
 
@@ -123,24 +138,24 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
       color: color(brand-primary, 600);
       background-color: transparent;
       .em-ds-icon {
-        fill: color(brand-primary, 600);  
-      }   
+        fill: color(brand-primary, 600);
+      }
       &:focus {
         border: unset;
       }
-    }    
+    }
   }
 
   &:hover {
     .#{$el-addon} .#{$el-clearable-button} {
       opacity: 1;
-      @include dsHover();    
+      @include dsHover();
       background-color: transparent;
       .em-ds-icon {
-        fill: color(brand-primary, 600);  
-      } 
-    }    
-  }  
+        fill: color(brand-primary, 600);
+      }
+    }
+  }
 }
 
 .#{$el-input} {
@@ -150,7 +165,6 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
   border: none;
 }
 
-
 .#{$input-addons} {
   .#{$el-clearable-button} {
     margin-left: auto;
@@ -160,9 +174,10 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
     max-height: 100%;
     outline: none;
     .em-ds-icon {
-      fill: color(brand-primary, 600);  
-    }   
-    &:hover, &:hover::after {
+      fill: color(brand-primary, 600);
+    }
+    &:hover,
+    &:hover::after {
       opacity: 1;
       border: none;
     }
@@ -174,8 +189,8 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
   border-color: transparent;
   background: none;
   .em-ds-icon {
-    fill: color(brand-primary, 600);  
-  }   
+    fill: color(brand-primary, 600);
+  }
   &:hover {
     opacity: 1;
   }
@@ -215,10 +230,8 @@ $input-height: space(m) * 1.17; // TODO: define global input sizes
 // ********************************************
 // ReadOnly container & elements          *****
 .#{$input-read-only} {
-  border-color: color(neutral, 100);
-  cursor: not-allowed;
   .#{$el-input} {
-    color: color(neutral, 500);
+    @include withReadOnly();
   }
 }
 

package/{styles → dist/styles}/components/packages/ds-date-picker/components/DatePickerPicker/DatePickerPicker.scss

@@ -2,7 +2,7 @@
   @include border-radius(0 $radius $radius 0);
   padding: 0 calc(#{space(xxs)} * 0.5);
 
-  &:hover:not([disabled]) {    
+  &:hover:not([disabled]) {
     border: $border-type color(brand-primary, 600);
   }
 

package/dist/styles/components/packages/ds-dropdownmenu/DSDropdownMenu.scss

@@ -0,0 +1 @@
+@import '../../ds-common/src/DropdownMenu/DSDropdownMenu';

package/dist/styles/components/packages/ds-form/Checkbox/DSCheckbox.scss

@@ -0,0 +1 @@
+@import '../../../ds-common/src/Checkbox/DSCheckbox';

package/dist/styles/components/packages/ds-form/Checkbox/elements/CheckMark.scss

@@ -0,0 +1 @@
+@import '../../../../ds-common/src/Checkbox/elements/CheckMark';

package/dist/styles/components/packages/ds-form/ComboBox/DSComboBox.scss

@@ -0,0 +1 @@
+@import '../../../ds-common/src/ComboBox/DSComboBox';

package/dist/styles/components/packages/ds-form/ComboBox/v1/DSComboBox.scss

@@ -0,0 +1 @@
+@import '../../../../ds-common/src/ComboBox/v1/DSComboBox';

package/dist/styles/components/packages/ds-form/ComboBox/v2/DSComboBox.scss

@@ -0,0 +1 @@
+@import '../../../../ds-common/src/ComboBox/v2/DSComboBox';

package/dist/styles/components/packages/ds-form/ComboBox/v2/styles/container.scss

@@ -0,0 +1 @@
+@import '../../../../../ds-common/src/ComboBox/v2/styles/container';

package/dist/styles/components/packages/ds-form/ComboBox/v2/styles/customOptions.scss

@@ -0,0 +1 @@
+@import '../../../../../ds-common/src/ComboBox/v2/styles/customOptions';

package/dist/styles/components/packages/ds-form/ComboBox/v2/styles/dropdownIndicator.scss

@@ -0,0 +1 @@
+@import '../../../../../ds-common/src/ComboBox/v2/styles/dropdownIndicator.scss';

package/dist/styles/components/packages/ds-form/ComboBox/v2/styles/indicatorSeparator.scss

@@ -0,0 +1 @@
+@import '../../../../../ds-common/src/ComboBox/v2/styles/indicatorSeparator';

package/dist/styles/components/packages/ds-form/ComboBox/v2/styles/menu.scss

@@ -0,0 +1 @@
+@import '../../../../../ds-common/src/ComboBox/v2/styles/menu';

package/dist/styles/components/packages/ds-form/ComboBox/v2/styles/optionMultiple.scss

@@ -0,0 +1 @@
+@import '../../../../../ds-common/src/ComboBox/v2/styles/optionMultiple';

package/dist/styles/components/packages/ds-form/ComboBox/v2/styles/placeholder.scss

@@ -0,0 +1 @@
+@import '../../../../../ds-common/src/ComboBox/v2/styles/placeholder';

package/dist/styles/components/packages/ds-form/ComboBox/v2/styles/valueContainer.scss

@@ -0,0 +1 @@
+@import '../../../../../ds-common/src/ComboBox/v2/styles/valueContainer';

package/dist/styles/components/packages/ds-form/ComboBox/v2/styles/wrapper.scss

@@ -0,0 +1 @@
+@import '../../../../../ds-common/src/ComboBox/v2/styles/wrapper';