@elliemae/ds-basic 2.3.0-next.3 → 3.0.0-alpha.0

package/styles/components/packages/ds-dropdownmenu/node_modules/@elliemae/ds-basic/styles/components/packages/ds-form/Input/InputAddonWrapper.scss

@@ -1,127 +0,0 @@
-// ********************************************
-// container definition
-$input-addon-wrapper: #{$prefix}-input-addon-wrapper;
-
-// dimsum components
-$ds-input: #{$prefix}-input;
-
-// ********************************************
-// elements
-$el-addon: #{$input-addon-wrapper}__addon;
-$el-addon-right: #{$input-addon-wrapper}__addon--right;
-$el-clearable-button: #{$input-addon-wrapper}__clearable;
-$input-controller: addon-input-controller;
-
-// ********************************************
-// modifiers
-$input-error: #{$input-addon-wrapper}--error;
-$input-disabled: #{$input-addon-wrapper}--disabled;
-$input-read-only: #{$input-addon-wrapper}--readonly;
-$input-fuild: #{$input-addon-wrapper}--fluid-width;
-
-// ********************************************
-// local
-$border-type: solid 1px;
-$radius: $theme-base-border-radius;
-$input-height: space(m) * 1.17; // TODO: define global input sizes
-
-// TODO: reduce duplicity with input styles
-.#{$input-addon-wrapper} {
-  @include border-radius($radius);
-  display: flex;
-  box-shadow: inset 0 0 0 1px color(neutral, 400);
-  height: $input-height;
-  width: 100%;
-
-  > * {
-    height: 100%;
-
-  }
-// PUI-3948
-  & .#{$el-addon}--error {
-    border: 1px solid color(danger, 900);
-    border-radius: 2px;
-    border-top-left-radius: unset;
-    border-bottom-left-radius: unset;
-    border-left: none;
-    &:focus {
-      border: inherit;
-    }
-  }
-// PUI-3948
-  &:focus-within .#{$el-addon}--error {
-    border: inherit;
-  }
-
-  .#{$ds-input} {
-    width: 100%;
-    flex: 1;
-    background: none;
-
-    &.#{$ds-input}--clearable.#{$ds-input}--value:not(.input-disabled) {
-      border-right: unset;
-      border-top-right-radius: unset;
-      border-bottom-right-radius: unset;
-    }
-  }
-
-  &::-ms-clear {
-    display: none;
-  }
-
-  &:focus-within {
-  }
-}
-
-
-.#{$input-addon-wrapper}:hover, .#{$input-addon-wrapper}:focus, .#{$input-addon-wrapper}:active {
-  & .#{$el-addon}--error {
-    border: none;
-  }
-}
-
-.#{$el-clearable-button} {
-  opacity: 0;
-  transition: duration(fast) easing(base);
-  &:hover {
-    opacity: 1;
-    @include dsHover();
-  }
-}
-
-.#{$el-addon} {
-  display: flex;
-  > * {
-    height: 100%;
-  }
-
-  &:hover {
-    @include dsHover();
-  }
-  
-  &.#{$el-addon-right}>.#{$el-clearable-button}:not(.em-ds-input__clearable) {   
-    position: relative;
-    &:before {
-      content: '';
-      position: absolute;
-      height: 80%;
-      top: 10%;
-      right: space(m) * 1.17;
-      width: calc(#{space(xxs)} * 0.25);
-      background: color(neutral, 200);
-      pointer-events: none;
-    }
-    &:focus-within {
-      &:before {
-        display:  none;
-      }  
-    }
-  }
-}
-
-// Mobile
-@include md {
-  .#{$input-addon-wrapper} {
-    height: toMobile(space(l));
-  }
-}

package/styles/components/packages/ds-dropdownmenu/node_modules/@elliemae/ds-basic/styles/components/packages/ds-form/InputGroup/DSInputGroup.scss

@@ -1,70 +0,0 @@
-// ********************************************
-// container definition
-$input-addon-group: #{$prefix}-input-addon-group;
-
-// ********************************************
-// input control types
-$input-control: #{$prefix}-input;
-$input-combox:  #{$prefix}-selectbox-wrapper;
-$floating-label-input: #{$prefix}-labeled-outline;
-$button-control: #{$prefix}-button;
-$icon-button-control: #{$prefix}-icon-button;
-$combobox-control: #{$prefix}-selectbox__control;
-$form-item: #{$prefix}-form-item;
-
-$component-selectors:"
-  .#{$floating-label-input}__idle,
-  .#{$input-control},
-  .#{$button-control},
-  .#{$icon-button-control},
-  .#{$combobox-control},
-";
-
-.#{$input-addon-group} {
-  display: flex;
-  align-items: flex-start;
-
-  &__addon {
-    position: relative;
-    &:hover,
-    &:focus-within {
-      z-index: 3;
-    }
-  }
-
-  * {
-    &:not(:last-child) {
-      margin-right: -1px;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      #{$component-selectors}{
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-
-    &:not(:first-child) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      #{$component-selectors}{
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-  }
-
-  .#{$floating-label-input},
-  .#{$input-control},
-  .#{$input-combox},
-  .#{$form-item} {
-    position: relative;
-    flex: 1;
-    margin-top: 0;
-    &:focus-within {
-      z-index: 3;
-    }
-    &:hover {
-      z-index: 3;
-    }
-  }
-}

package/styles/components/packages/ds-dropdownmenu/node_modules/@elliemae/ds-basic/styles/components/packages/ds-form/InputMask/DSInputMask.scss

@@ -1,133 +0,0 @@
-// ********************************************
-// container definition
-$input-container: #{$prefix}-input-mask;
-
-// ********************************************
-// elements
-$el-input: #{$input-container}__input;
-$el-addon: #{$input-container}__addon;
-$el-clearable-button: #{$input-container}__clearable;
-
-// ********************************************
-// modifiers
-$input-error: #{$input-container}--error;
-$input-disabled: #{$input-container}--disabled;
-$input-read-only: #{$input-container}--readonly;
-$input-fuild: #{$input-container}--fluid-width;
-
-// ********************************************
-// local
-$border-type: solid 1px;
-$radius: $theme-base-border-radius;
-$input-height: space(m) * 1.17; // TODO: define global input sizes
-
-.#{$input-container} {
-  position: relative;
-  height: $input-height;
-  width: 100%;
-  outline: none;
-  color: color(neutral, 500);
-  box-sizing: border-box;
-  display: block;
-  border: $border-type color(neutral, 200);
-  background: color(neutral, 000);
-  transition: border duration(base) easing(base);
-  @include border-radius($radius);
-
-  // FOCUS TO BE DEFINED
-  &:focus-within {
-    @include box-shadow(0 0 4px 0 rgba(color(brand-primary, 500),0.7));
-  }
-
-  &:focus-within,
-  &:hover,
-  &:active {
-    @include dsFocus();
-
-    .#{$el-addon} .#{$el-clearable-button} {
-      opacity: 1;
-    }
-  }
-}
-
-.#{$el-input} {
-  height: 100%;
-  width: 100%;
-  outline: none;
-  border: none;
-  padding: 0 space(xs);
-
-  &:active {
-    color: color(neutral, 800);
-  }
-
-  @include placeholder {
-    color: color(neutral, 500);
-    font-style: italic;
-  }
-}
-
-.#{$el-clearable-button} {
-  opacity: 0;
-  transition: duration(fast) easing(base);
-  &:hover {
-    opacity: 1;
-  }
-}
-
-.#{$el-addon} {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  @include center();
-
-  &--left {
-    left: 0;
-  }
-  &--right {
-    right: 0;
-  }
-}
-
-// ********************************************
-// Disabled container & elements          *****
-.#{$input-disabled} {
-  border-color: color(neutral, 100);
-  &:focus-within,
-  &:hover {
-    border-color: color(neutral, 100);
-  }
-  &:active {
-    border-color: color(neutral, 100);
-  }
-
-  .#{$el-input} {
-    color: color(neutral, 500);
-    cursor: not-allowed;
-  }
-}
-
-// ********************************************
-// Error container & elements             *****
-.#{$input-error} {
-  border-color:color(danger, 900);
-  &:focus,
-  &:hover,
-  &:active {
-    border-color:color(danger, 900);
-  }
-
-  .#{$el-input} {
-    color: color(neutral, 500);
-  }
-}
-
-// ********************************************
-// ReadOnly container & elements          *****
-.#{$input-read-only} {
-  border-color: color(neutral, 100);
-  cursor: not-allowed;
-  .#{$el-input} {
-    color: color(neutral, 500);
-  }
-}

package/styles/components/packages/ds-dropdownmenu/node_modules/@elliemae/ds-basic/styles/components/packages/ds-form/LargeInputText/DSLargeInputText.scss

@@ -1,135 +0,0 @@
-// ********************************************
-// container definition
-$input-container: #{$prefix}-form-element-textarea;
-
-// ********************************************
-// elements
-$el-input: #{$input-container}__textarea;
-$el-wrapper: #{$input-container}-wrapper;
-$el-counter: #{$prefix}-counter__textarea;
-// ********************************************
-// modifiers
-$input-error: #{$input-container}--error;
-$input-disabled: #{$input-container}--disabled;
-$input-read-only: #{$input-container}--readonly;
-
-// ********************************************
-// local
-$border-type: solid 1px;
-$radius: $theme-base-border-radius;
-$min-height: space(m) * 1.17;
-
-.#{$el-wrapper}{
-  width: 100%;
-  display: flex;
-}
-
-.#{$input-container} {
-  position: relative;
-  width: 100%;
-  outline: none;
-  color: color(neutral, 500);
-  display: flex;
-  // border: $border-type color(neutral, 200);
-  background: color(neutral, 000);
-  transition: border duration(base) easing(base);
-  @include border-radius($radius);
-  box-shadow: inset 0 0 0 1px color(neutral, 400);
-  padding: 1px;
-  &:focus-within {
-    padding: 0;
-  }
-  &:hover{
-    @include dsFakeActive();
-  }
-  &--error{
-    box-shadow: inset 0 0 0 1px color(danger, 900);
-  }
-}
-
-.#{$el-input} {
-  min-height: $min-height;
-  width: 100%;
-  outline: none;
-  border: none;
-  padding: space(xxs) space(xs);
-  overflow: auto;
-  background: none;
-  &:focus {
-    @include dsFocus();
-  }
-
-
-
-  &:active {
-    color: color(neutral, 800);
-  }
-
-  @include placeholder {
-    color: color(neutral, 500);
-    font-style: italic;
-  }
-}
-
-// ********************************************
-// Disabled container & elements          *****
-.#{$input-disabled} {
-  border-color: color(neutral, 100);
-  &:focus-within,
-  &:hover {
-    border-color: color(neutral, 100);
-  }
-  &:active {
-    border-color: color(neutral, 100);
-  }
-
-  .#{$el-input} {
-    color: color(neutral, 500);
-    cursor: not-allowed;
-  }
-}
-
-// ********************************************
-// Error container & elements             *****
-.#{$input-error} {
-  border-color:color(danger, 900);
-  &:focus,
-  &:hover,
-  &:active {
-    border-color:color(danger, 900);
-  }
-
-  .#{$el-input} {
-    color: color(neutral, 500);
-  }
-}
-
-// ********************************************
-// ReadOnly container & elements          *****
-.#{$input-read-only} {
-  border-color: color(neutral, 100);
-  cursor: not-allowed;
-  .#{$el-input} {
-    color: color(neutral, 500);
-  }
-}
-
-.#{$el-counter}{
-  text-align: right;
-  padding: space(xxs);
-  span {
-    margin: 0 space(xxs) * 0.3;
-  }
-  &--limit-error{
-    color: color(danger, 900);
-  }
-}
-
-// Mobile
-@include md {
-  .#{$el-input} {
-    font-size: toMobile(font-size(600));
-    font-weight: 400;
-    min-height: toMobile(space(xxl));
-  }
-}

package/styles/components/packages/ds-dropdownmenu/node_modules/@elliemae/ds-basic/styles/components/packages/ds-form/Radio/DSRadio.scss

@@ -1,247 +0,0 @@
-// ********************************************
-// container definition
-$el-container: #{$prefix}-form-element-radio;
-$el-container-error: #{$el-container}--error;
-$el-container-disabled: #{$el-container}--disabled;
-$el-container-read-only: #{$el-container}--readonly;
-
-// ********************************************
-// elements
-$el-input: #{$el-container}__input;
-$el-label: #{$el-container}__label;
-$el-button: #{$el-container}__input-button;
-$el-text: #{$el-container}__label-text;
-$el-children: #{$el-container}__radio-children;
-
-// ********************************************
-// local
-$border-type: solid 1px;
-$border-type-focus: solid 2px;
-$border-type-mobile: solid 2px;
-$border-type-focus-mobile: solid 3px;
-
-.#{$el-input} {
-  position: absolute;
-  opacity: 0;
-  right: 0;
-}
-
-.#{$el-text} {
-  @include body-text-style();
-  transition: duration(base) easing(base);
-  color: color(neutral, 800);
-  line-height: 100%;
-  position: relative;
-  bottom: -1px; // fix - extra pixel below the text
-}
-
-.#{$el-button} {
-  border-radius: 50% !important;
-  transition: duration(base) easing(base);
-  width: space(s);
-  min-width: space(s);
-  height: space(s);
-  margin-right: space(xs);
-  border: $border-type color(neutral, 400);
-  background: color(neutral, 000);
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  align-self: flex-start;
-  position: relative;
-}
-
-.#{$el-label} {
-  position: relative;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-
-.#{$el-children} {
-  padding-left: space(m);
-}
-
-// ********************************************
-// Default container & elements           *****
-.#{$el-container} {
-  width: fit-content;
-  padding-bottom: space(s);
-  circle.unchecked {
-    fill: color(neutral, 000);
-  }
-
-  .#{$el-label} {
-    &:hover {
-      .#{$el-button} {
-        border-color: color(brand-primary, 600);
-        background-color: color(brand-primary, 200);
-      }
-      circle.unchecked {
-        fill: color(brand-primary, 200);
-      }
-    }
-    .#{$el-button} {
-      &:focus {
-        box-shadow: none;
-      }
-
-      &:focus:not(:active) {
-        border: $border-type-focus color(brand-primary, 700);
-      }
-
-      &:active {
-          background-color: color(neutral, 000);
-        circle.unchecked {
-          fill: color(neutral, 000);
-        }
-      }
-    }
-  }
-
-  .#{$el-input} {
-    &:checked + .#{$el-button} {
-      circle.checked {
-        fill: color(brand-primary, 600);
-      }
-    }
-  }
-}
-
-// ********************************************
-// Error container & elements             *****
-.#{$el-container-error} {
-  .#{$el-button} {
-    border-color: color(danger, 900);
-  }
-
-  .#{$el-label} {
-    &:hover {
-      .#{$el-button}:not(:focus) {
-        border-color: color(danger, 900);
-      }
-    }
-    &:active {
-      .#{$el-button} {
-        border-color: color(danger, 900);;
-      }
-      circle.unchecked {
-        fill: color(neutral, 080);
-      }
-    }
-  }
-
-  .#{$el-input} {
-    &:checked + .#{$el-button} {
-      circle.checked {
-        fill: color(danger, 900);
-      }
-    }
-  }
-}
-
-// ********************************************
-// Disabled container & elements          *****
-.#{$el-container-disabled} {
-  circle.checked {
-    fill: color(neutral, 400);
-  }
-  circle.unchecked {
-    fill: color(neutral, 080);
-  }
-
-  .#{$el-label} {
-    cursor: not-allowed;
-    &:hover {
-      .#{$el-button} {
-        border-color: color(neutral, 400);
-        background-color: color(neutral, 080);
-      }
-      circle.unchecked {
-        fill: color(neutral, 080);
-      }
-    }
-    &:active {
-      .#{$el-button} {
-        background-color: color(neutral, 080);
-      }
-      circle.unchecked {
-        fill: color(neutral, 080);
-      }
-    }
-
-    .#{$el-input} {
-      &:checked + .#{$el-button} {
-        background-color: color(neutral, 080);
-      }
-    }
-  }
-
-  .#{$el-text} {
-    color: color(neutral, 500);
-  }
-
-  .#{$el-button} {
-    pointer-events: none;
-    background: color(neutral, 080);
-    &:hover {
-      border-color: color(neutral, 400);
-    }
-  }
-}
-
-// ********************************************
-// Read only container & elements         *****
-.#{$el-container-read-only} {
-  .#{$el-label} {
-    &:hover {
-      .#{$el-button} {
-        border-color:  color(neutral, 400);
-      }
-    }
-  }
-  .#{$el-input} {
-    &:checked + .#{$el-button} {
-      circle.checked {
-        fill: color(neutral, 500);
-      }
-    }
-  }
-}
-
-@include md {
-  .#{$el-text} {
-    font-size: 16px;
-  }
-
-  .#{$el-container} {
-    padding-bottom: calc(#{space(m)} * 0.4);
-    -webkit-tap-highlight-color: transparent;
-
-    .#{$el-label} {
-      padding: calc(#{space(xxs)} * 0.81) 0;
-      .#{$el-button} {
-        border: $border-type-mobile color(neutral, 400);
-        &:focus {
-          border: $border-type-focus-mobile color(brand-primary, 700);
-        }
-      }
-    }
-  }
-  
-  .#{$el-button} {
-    width: calc(#{space(s)} * 1.22);
-    min-width: calc(#{space(s)} * 1.22);
-    height: calc(#{space(s)} * 1.22);
-    border: $border-type-mobile color(neutral, 400);
-    margin-right: calc(#{space(s)} * 0.81);
-  }
-
-  .#{$el-container-error} {
-    .#{$el-label} { // added this specificity so it correctly overwrites the error state
-      .#{$el-button} {
-        border: $border-type-mobile color(danger, 900);
-      }
-    }
-  }
-}