@elliemae/ds-basic 3.50.1-next.8 → 3.51.0-next.0

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

@@ -1,224 +0,0 @@
-$el-button: #{$el-container}__input-button;
-$el-label: #{$el-container}__label;
-
-@mixin withHover {
-  outline: none;
-  border: calc(#{space(xxs)} * 0.25) solid color(brand-primary, 600);
-}
-@mixin withActive {
-  outline: none;
-  background-color: color(brand-primary, 200);
-}
-
-.#{$el-label} {
-  &:hover {
-    .#{$el-button} {
-      @include withHover();
-
-      &.checkbox-true {
-        background-color: color(brand-primary, 200);
-      }
-    }
-  }
-
-  &:active {
-    .#{$el-button} {
-      @include withActive();
-    }
-  } 
-}
-
-.#{$el-button} {
-  position: relative;
-  transition: duration(base) easing(base);
-  width: $checkbox-size;
-  height: $checkbox-size;
-  border: $border-type color(neutral, 400);
-  border-radius: space(xxs) * 0.5;
-  background: color(neutral, 000);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-
-  &.checkbox-true {
-    
-    &:after {
-      width: space(xxs);
-      height: space(xs);
-      display: block;
-      content: '';
-      border-right: $border-type transparent;
-      border-bottom: $border-type transparent;
-      -webkit-transform: rotate(45deg);
-      -ms-transform: rotate(45deg);
-      transform: rotate(45deg);
-      position: absolute;
-      top: space(xxs) * 0.5;
-      left: space(xxs) * 1.25;
-      border-color: color(brand-primary, 600);
-    }
-  }
-  &.checkbox-mixed {
-    &:after {
-      width: space(xs);
-      height: space(xxs) * 0.25;
-      display: block;
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: space(xxs) * 0.8;
-      background: color(brand-primary, 600);
-    }
-  }
-
-  &:hover:not(.disabled) {
-    @include withHover();
-  }
-  &:focus {
-    outline: none;
-  }
-  &:focus:not(.disabled),
-  &.variant-focus:not(.disabled) {
-    @include dsFocus();
-  }
-  &:active:not(.disabled),
-  &.variant-active:not(.disabled) {
-    @include withActive();
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-}
-
-// ********************************************
-// Default container & elements           *****
-.#{$el-container} {
-}
-
-// ********************************************
-// Error container & elements             *****
-
-.#{$el-container-error} {
-  &:hover {
-    .#{$el-button} {
-      border-color: color(danger, 900);
-    }
-  }
-  &:active {
-    .#{$el-button} {
-      background-color: color(danger, 200);
-    }
-  }
-  .#{$el-button} {
-    border-color: color(danger, 900);
-    &.checkbox-mixed {
-      &:after {
-        background: color(danger, 900);
-      }
-    }
-    &.checkbox-true {
-      &:after {
-        border-color: color(danger, 900);
-      }
-    }
-  }
-}
-
-// ********************************************
-// Disabled container & elements          *****
-
-.#{$el-container-disabled} {
-  &:hover {
-    .#{$el-button} {
-      border-color: color(neutral, 400);
-    }
-  }
-  &:active {
-    .#{$el-button} {
-      background: color(neutral, 080);
-    }
-  }  
-}
-
-.#{$el-button} {
-  &.variant-disabled,
-  &[aria-disabled='true'] {
-    pointer-events: none;
-    border-color: color(neutral, 400);
-    background: color(neutral, 080);
-    color: color(neutral, 500);
-    &.checkbox-mixed {
-      &:after {
-        background: color(neutral, 500);
-      }
-    }
-    &.checkbox-true {
-      &:after {
-        border-color: color(neutral, 500);
-      }
-    }
-  }
-}
-
-// ********************************************
-// Read only container & elements         *****
-.#{$el-container-read-only} {
-}
-
-// Mobile
-@mixin withHoverM {
-  outline: none;
-  border: 2px solid color(brand-primary, 600);
-}
-
-@include md {
-  .#{$el-label} {
-    &:hover {
-      .#{$el-button} {
-        @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));
-    height: toMobile(space(m));
-    border: 2px solid color(neutral, 400);
-
-    &:focus:not(.disabled),
-    &.variant-focus:not(.disabled) {
-      @include withHoverM();
-      box-shadow: inset 0 0 0 1px lighten(color(brand-primary, 600), 30%);
-      border-radius: 2px;
-    }
-
-    &:hover:not(.disabled) {
-      @include withHoverM();
-    }
-
-    &.checkbox-true {
-      @include withHoverM();
-      &:after {
-        width: toMobile(space(xs));
-        height: toMobile(space(s));
-        top: toMobile(space(xxs) * 0.0625);
-        left: toMobile(space(xs) * 0.75);
-        border-right: solid 2px transparent;
-        border-bottom: solid 2px transparent;
-        border-color: color(brand-primary, 600);
-      }
-    }
-  }
-}

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

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

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

@@ -1,265 +0,0 @@
-// ********************************************
-// container definition
-$el-container: #{$prefix}-selectbox;
-
-// elements
-$control-el: #{$el-container}__control;
-$menu-el: #{$el-container}__menu;
-$menu-list-el: #{$el-container}__menu-list;
-$menu-option-el: #{$el-container}__option;
-$dropdown-indicator-el: #{$el-container}__dropdown-indicator;
-$indicators-el: #{$el-container}__indicators;
-$indicator-el: #{$el-container}__indicator;
-$indicator-separator: #{$el-container}__indicator-separator;
-$placeholder-el: #{$el-container}__placeholder;
-$value-container: #{$el-container}__value-container;
-
-// ********************************************
-// local
-$border-type: solid 1px;
-$radius: 2px;
-$input-height: 28px;
-
-.#{$control-el} {
-  @include border-radius($radius);
-  border: solid 1px color(neutral, 400);
-  transition: all duration(base) easing(base);
-  background: transparent;
-  height: space(m) * 1.17;
-  outline: none;
-  color: color(neutral, 800);
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  position: relative;
-  padding-right: 0;
-
-  & + div {
-    position: absolute;
-    z-index: 1000;
-    width: 100%;
-  }
-
-  &:focus-within {
-    .#{$indicator-separator} {
-      background-color: transparent;
-    }
-  }
-
-  &:active {
-    border-color: color(brand-primary, 700);
-    color: color(neutral, 800);
-
-    .#{$indicator-el} {
-      color: color(neutral, 000);
-    }
-  }
-
-  &:disabled,
-  &--is-disabled {
-    @include dsDisabledFakeBorder();
-    .#{$indicator-separator} {
-      background-color: color(neutral, 400);
-    }
-  }
-
-  &--is-focused {
-    .#{$indicator-separator} {
-      background-color: transparent;
-    }
-  }
-}
-
-.#{$placeholder-el} {
-  @include body-text-style(regular);
-  color: color(neutral, 500);
-  font-style: italic;
-  position: absolute;
-  pointer-events: none;
-  top: space(xxs) * 1.3;
-}
-
-.#{$menu-option-el} {
-  padding: space(xs);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-break: break-all;
-  word-wrap: break-word;
-  cursor: pointer;
-  display: block;
-  &--is-focused {
-    background-color: color(brand-primary, 200);
-  }
-
-  &--is-selected {
-    background-color: color(brand-primary, 600);
-    color: color(neutral, 000);
-    svg, svg:not([fill]) {
-      fill: color(neutral, 000);
-    }
-  }
-
-  overflow: hidden;
-}
-
-.floating-label-input-controller {
-  .#{$dropdown-indicator-el} {
-    margin-top: space(xxs) * -0.5;
-  }
-}
-
-.#{$control-el} {
-  .dropdown-indicator {
-    width: space(m) * 1.16;
-  }
-  .#{$indicators-el} {
-    position: relative;
-    .clear-indicator {
-      svg, svg:not([fill]) {
-        padding: 0;
-        margin-top: calc(#{space(xxs)} * (-0.5));
-      }
-    }
-  }
-
-  &--is-focused:not(&--menu-is-open) {
-    // on focus
-    .#{$value-container} {
-      @include dsFocus();
-    }
-  }
-}
-
-.#{$indicators-el} {
-  &:focus-within {
-    .#{$indicator-separator} {
-      background-color: transparent;
-    }
-  }
-  // & > button:focus{
-  //   // @include dsFocus();
-  // }
-}
-
-.#{$indicator-separator} {
-  margin-top: 0%;
-  margin-bottom: 0;
-  height: 60%;
-  width: 1px;
-  background-color: color(neutral, 200);
-}
-
-/**
-VARIANTS
-**/
-.#{$el-container}--variant-focus-input {
-  .#{$indicator-separator} {
-    background-color: transparent;
-  }
-  .#{$value-container} {
-    @include dsFocus();
-  }
-}
-
-.#{$el-container}--variant-active-input {
-  .#{$indicator-separator} {
-    background-color: transparent;
-  }
-  .#{$value-container} {
-    @include dsActive();
-  }
-}
-
-.#{$control-el}--menu-is-open,
-.#{$el-container}--variant-active-icon {
-  &:not(&:focus-within) {
-    .#{$indicator-separator} {
-      background-color: transparent;
-    }
-    .#{$indicators-el} {
-      @include dsActive();
-    }
-  }
-}
-.#{$el-container}--variant-focus-icon {
-  .#{$indicators-el} {
-    @include dsFocus();
-  }
-}
-
-.#{$el-container}--variant-disabled {
-  .#{$el-container}__single-value {
-    @include dsDisabled();
-  }
-}
-.#{$el-container}--variant-error {
-  .#{$control-el} {
-    @include dsWithErrorFakeBorder();
-  }
-}
-
-.combobox-menu-menu {
-  @include dsActive();
-  padding: 0;
-  box-shadow: none;
-  margin-top: space(xxs);
-}
-
-.combobox-menu-list {
-  .#{$menu-option-el} {
-    overflow: hidden; // avoid overflow inside option
-    &--is-selected {
-      background-color: color(brand-primary, 600);
-      color: color(neutral, 000);
-      svg, svg:not([fill]) {
-        fill: color(neutral, 000);
-      }
-    }
-  }
-  &.combobox-menu-list-is-multi {
-    .#{$menu-option-el} {
-      &--is-selected {
-        background-color: transparent;
-      }
-    }
-  }
-}
-
-.combobox-multi-select-header {
-  padding: space(s);
-}
-.#{$el-container}__value-container{
-  &:focus-within {
-    @include dsFakeActive();
-  }
-}
-.#{$el-container}__value-container.#{$el-container}__value-container--has-value {
-  flex-wrap: nowrap;
-  flex-direction: row;
-  align-items: center;
-  color: color(neutral, 800);
-  &:focus-within {
-    // @include dsFakeActive();
-  }
-}
-.#{$el-container}__value-container--is-multi.#{$el-container}__value-container--has-value {
-  flex-wrap: nowrap;
-  .#{$el-container}__multi-value {
-    div {
-      max-width: 100%;
-    }
-  }
-  .#{$el-container}__multi-value__remove {
-    background: none !important;
-    padding-left: 0;
-  }
-}
-
-
-// ValueContainer
-.combobox-value-container{
-  width: 100%;
-  &:focus {
-    @include dsFocus();
-  }
-}

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

@@ -1,22 +0,0 @@
-// ********************************************
-// container definition
-$combo: #{$prefix}-combobox;
-$elements-prefix: combobox-v2;
-
-$height: space(m) * 1.17;
-@import './styles/container.scss';
-@import './styles/wrapper.scss';
-@import './styles/placeholder.scss';
-@import './styles/valueContainer.scss';
-@import './styles/indicatorSeparator.scss';
-@import './styles/menu.scss';
-@import './styles/optionMultiple.scss';
-@import './styles/dropdownIndicator.scss';
-
-$menu-inside: #{$prefix}-menu;
-.combobox-menu-wrapper-external {
-  .#{$menu-inside} {
-    padding: 0;
-  }
-}
-@import './styles/customOptions.scss';

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

@@ -1,10 +0,0 @@
-$container: #{$combo}-container;
-.#{$container} {
-  width: 100%;
-  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-common/ComboBox/v2/styles/customOptions.scss

@@ -1,39 +0,0 @@
-$menu-option: #{$combo}__option;
-.#{$menu-option} {
-  height: space(l) * 1.093;
-  line-height: space(l) * 1.093;
-  cursor: pointer;
-  padding: 0 space(s);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-break: break-all;
-  word-wrap: break-word;
-  overflow: hidden; // avoid overflow inside option
-  display: flex;
-  flex-direction: column;
-  &--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]) {
-      fill: color(neutral, 000);
-    }
-  }
-}
-
-
-$menu-list-multi: combobox-menu-list-is-multi;
-
-.#{$menu-list-multi}{
-  .#{$menu-option} {
-    &--is-selected {
-      background-color: color(brand-primary, 200);
-    }
-  }
-  
-}

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

@@ -1,17 +0,0 @@
-$btn: #{$prefix}-button;
-$btn-dropdown: dropdown-indicator;
-
-
-
-.#{$btn}.#{$btn-dropdown} {
-  &.active {
-    border: none;
-    box-shadow: none;
-    &:after {
-      box-shadow: none !important;
-      border-color: transparent;
-    }
-    @include dsBorderAfter(color(brand-primary, 700), 1);
-    border-color: solid color(brand-primary, 700) 1px;
-  }
-}

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

@@ -1,8 +0,0 @@
-$separator: #{$combo}__indicator-separator;
-.#{$separator} {
-  align-self: stretch;
-  background-color: color(neutral, 400);
-  margin-bottom: space(xxs);
-  margin-top: space(xxs);
-  width: 1px;
-}

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

@@ -1,27 +0,0 @@
-
-$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;
-  }
-
-.#{$combo-trigger} {
-    position: relative;
-    top: -2.5rem;
-    height: $height;
-  }
-
-.em-ds-layout__header {
-  z-index: 1;
-}

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

@@ -1,16 +0,0 @@
-.combobox-v2-option-multiple-container {
-    pointer-events: none;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    .#{$prefix}-form-element-checkbox {
-        padding-bottom: 0;
-    }
-}
-
-.combobox-v2-option-multiple-truncated-label {
-    pointer-events: auto;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-}

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

@@ -1,12 +0,0 @@
-$placeholder: #{$combo}__placeholder;
-.#{$placeholder} {
-  color: color(neutral, 500);
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: $height;
-  display: flex;
-  align-items: center;
-  padding-left: space(xs);
-  font-style: italic;
-}

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

@@ -1,24 +0,0 @@
-$value-container: #{$combo}__value-container;
-.#{$value-container} {
-  color: color(neutral, 800);
-  height: $height;
-  //   line-height: $height;
-  padding: 0 space(xs) !important;
-  span {
-    line-height: calc(#{$height} - 1px);
-    pointer-events: none;
-  }
-}
-
-// multiselect
-.combobox-v2-value-container {
-  width: calc(100% - #{space(m) * 1.2});
-  margin-right: auto;
-  @include border-radius($radius);
-  &.has-value {
-    width: calc(100% - #{space(m) * 2.2});
-  }
-  &.dropdown-indicator-removed {
-    width: calc(100% - #{space(m) * 0});
-  }
-}