@elliemae/ds-basic 3.51.0-next.0 → 3.51.0-next.1

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

@@ -0,0 +1,150 @@
+$menu-item: #{$prefix}-menu-item;
+$menu-item-content: #{$menu-item}__content;
+$menu-item-custom-render: #{$menu-item}--customRenderer;
+$menu-item-phone: #{$menu-item}__custom-phone-render;
+// dimsum components
+$dsicon: #{$prefix}-icon;
+
+$addon: #{$prefix}-menu-item__addon;
+
+.#{$menu-item} {
+  display: flex;
+  transition: background-color duration(fast) easing(base);
+  align-items: center;
+  padding: 0 space(xxs);
+  height: space(l);
+  min-width: space(l) * 4.2;
+  max-width: space(l) * 12;
+  border: 1px solid transparent;
+  &:hover,
+  &[aria-expanded='true'] {
+    border-color: color(brand-primary, 600);
+    .#{$menu-item}__addon--fixedItem {
+      span {
+        transition: unset;
+        background-color: inherit;
+      }
+    }
+
+    .#{$addon}:last-child {
+      opacity: 1;
+    }
+  }
+
+  .#{$menu-item-content} {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    user-select: none;
+    height: space(m);
+    margin-left: space(xs) * 1.5;
+    margin-right: space(xs);
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
+
+  &--disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  .#{$menu-item-custom-render} {
+    &:not(:hover) .#{$addon}:last-child {
+      opacity: 1;
+    }
+  }
+
+  &--fixedItem:active {
+    pointer-events: none;
+  }
+
+  &:focus-within {
+    .#{$addon}:last-child {
+      opacity: 1;
+    }
+  }
+
+  &:focus {
+    background-color: color(brand-primary, 200);
+    outline: none;
+
+    .#{$addon}:last-child {
+      opacity: 1;
+    }
+  }
+
+  &:active {
+    background-color: color(brand-primary, 200);
+
+    .#{$addon}:last-child {
+      opacity: 1;
+    }
+  }
+
+  &[role='menuitemcheckbox'],
+  &[role='menuitemradio'] {
+    .checkable-mark {
+      svg {
+        stroke: color(brand-primary, 600);
+      }
+    }
+    .#{$menu-item}__addon:last-child {
+      margin-left: space(xxs);
+    }
+    .#{$menu-item}__addon--fixedItem {
+      span {
+        border: unset;
+      }
+    }
+  }
+  &.no-options {
+    pointer-events: none;
+    color: color(neutral, 500);
+  }
+
+  &__addon {
+    min-width: space(s);
+  }
+
+  &__addon:first-child {
+    margin-left: space(xs);
+  }
+
+  // todo: maybe we don't need this if we use addon-block
+  > .#{$dsicon}:first-child {
+    margin-right: space(xs);
+  }
+
+  > .#{$dsicon}:last-child {
+    margin-left: space(xs);
+  }
+
+  // Phone
+  &--menu-type-phone {
+    padding: 0 space(s);
+    cursor: pointer;
+    .#{$menu-item-content} {
+      margin: 0 space(xs) 0 0;
+      justify-content: flex-end;
+      color: color(neutral, 500);
+      font-weight: 600;
+      font-size: font-size(300);
+    }
+    .#{$menu-item-phone} {
+      margin: 0;
+      padding: 0;
+      color: color(brand-primary, 700);
+      font-weight: 600;
+      font-size: font-size(400);
+    }
+    &:active {
+      .#{$menu-item-content} {
+        color: color(neutral, 000);
+      }
+      .#{$menu-item-phone} {
+        color: color(neutral, 000);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+$search-group: #{$prefix}-menu-search-group;
+
+.#{$search-group} {
+  &__search-wrapper {
+    padding: 0 space(xs) space(xs);
+  }
+
+  &__no-options {
+    height: space(l);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/components/packages/ds-common/SearchBox/DSSearchBox.scss

@@ -0,0 +1,38 @@
+// ********************************************
+// container definition
+$input-container: #{$prefix}-searchbox-toggle;
+$el-input: #{$prefix}-input;
+$expandable-input: #{$prefix}-expandable-input;
+$input-addons: #{$prefix}-input-addon-wrapper;
+
+$el-addon: #{$input-addons}__addon;
+$el-clearable-button: #{$el-input}__clearable;
+
+.#{$input-container} {
+  .#{$expandable-input} {
+    width: 2.2rem;
+  }
+  .#{$el-input}.expandable-input__input {
+    &:not(.floating-label-input-controller):hover {
+      @include dsClearFocus();
+    }
+    &:active {
+      @include dsClearFocus();
+    }
+  }
+
+  .#{$input-addons} {
+    &:focus-within,
+    &:active {
+      .#{$el-addon} .#{$el-clearable-button} {
+        @include dsClearFocus();
+      }
+    }
+
+    &:hover {
+      .#{$el-addon} .#{$el-clearable-button} {
+        @include dsClearFocus();
+      }
+    }
+  }
+}