/* Emporium skin for the Syncfusion EJ2 AutoComplete used by the address fields (customer info, register, checkout / address book). Scoped by the `ej2-emporium` class, which the shared address module passes to EJ2 as cssClass - EJ2 stamps it on both the field wrapper and the popup. We deliberately do NOT ship the stock Syncfusion theme (~1.3 MB, 86% of which is a base64 icon font we don't use). Only the structural rules AutoComplete needs are here, styled with the same values Emporium uses for native inputs in Content/css/styles.css: height 45px | border 1px solid #e7e7e7 | radius 3px | padding 0 20px font 15px Roboto | color #2c2c2c */ /* ---------- the field itself ---------- */ /* EJ2 wraps the original in this span, so the span becomes the visible "input". */ .e-input-group.e-control-wrapper.ej2-emporium { position: relative; display: inline-flex; align-items: center; box-sizing: border-box; width: 100%; height: 45px; border: 1px solid #e7e7e7; border-radius: 3px; background: #fff; vertical-align: middle; } /* Inner input must be flush: the wrapper owns the border and padding. */ .e-input-group.e-control-wrapper.ej2-emporium > input.e-input { flex: 1 1 auto; width: 100%; height: 100%; min-width: 0; margin: 0; border: 0; border-radius: 3px; padding: 0 20px; outline: none; background: transparent; box-shadow: none; font-family: 'Roboto', 'Open Sans', 'Arial', sans-serif; font-size: 15px; color: #2c2c2c; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .e-input-group.e-control-wrapper.ej2-emporium > input.e-input::placeholder { color: #9b9b9b; opacity: 1; } /* Emporium has no focus ring of its own; keep it subtle and on-brand. */ .e-input-group.e-control-wrapper.ej2-emporium.e-input-focus { border-color: #c9c9c9; } .e-input-group.e-control-wrapper.ej2-emporium.e-disabled { background: #f5f5f5; color: #9b9b9b; } /* EJ2 renders a hidden mirror input for value handling; never let it take space. */ .e-input-group.e-control-wrapper.ej2-emporium > .e-ddl-hidden { display: none !important; } /* ---------- clear ("x") button ---------- */ /* Drawn in pure CSS instead of pulling in the e-icons webfont. EJ2 adds .e-clear-icon-hide when there is nothing to clear. */ .e-input-group.e-control-wrapper.ej2-emporium .e-clear-icon { flex: 0 0 auto; position: relative; width: 30px; height: 100%; margin: 0; border: 0; padding: 0; background: transparent; cursor: pointer; font-size: 0; } .e-input-group.e-control-wrapper.ej2-emporium .e-clear-icon:before, .e-input-group.e-control-wrapper.ej2-emporium .e-clear-icon:after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 1px; background: #8b8b8b; } .e-input-group.e-control-wrapper.ej2-emporium .e-clear-icon:before { transform: translate(-50%, -50%) rotate(45deg); } .e-input-group.e-control-wrapper.ej2-emporium .e-clear-icon:after { transform: translate(-50%, -50%) rotate(-45deg); } .e-input-group.e-control-wrapper.ej2-emporium .e-clear-icon:hover:before, .e-input-group.e-control-wrapper.ej2-emporium .e-clear-icon:hover:after { background: #2c2c2c; } .e-input-group.e-control-wrapper.ej2-emporium .e-clear-icon.e-clear-icon-hide { display: none; } /* ---------- suggestion popup ---------- */ /* The popup is appended to , outside the form, so it is styled off the same cssClass. JS sets top/left/width/z-index inline; position:absolute must come from CSS. */ .e-ddl.e-popup.ej2-emporium { position: absolute; box-sizing: border-box; border: 1px solid #e7e7e7; border-radius: 3px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); overflow: hidden; } .e-ddl.e-popup.ej2-emporium .e-dropdownbase { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; } .e-ddl.e-popup.ej2-emporium .e-list-parent.e-ul { margin: 0; padding: 0; list-style: none; } .e-ddl.e-popup.ej2-emporium .e-list-item { box-sizing: border-box; display: block; min-height: 38px; line-height: 38px; padding: 0 20px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-family: 'Roboto', 'Open Sans', 'Arial', sans-serif; font-size: 15px; color: #2c2c2c; } /* e-hover follows the mouse, e-item-focus follows the keyboard; treat them the same. */ .e-ddl.e-popup.ej2-emporium .e-list-item.e-hover, .e-ddl.e-popup.ej2-emporium .e-list-item.e-item-focus, .e-ddl.e-popup.ej2-emporium .e-list-item.e-active { background: #f5f5f5; color: #2c2c2c; } /* AutoComplete bolds the matched substring when highlight is on. */ .e-ddl.e-popup.ej2-emporium .e-list-item .e-highlight { font-weight: 700; } .e-ddl.e-popup.ej2-emporium .e-nodata { padding: 12px 20px; text-align: left; font-family: 'Roboto', 'Open Sans', 'Arial', sans-serif; font-size: 15px; color: #9b9b9b; } /* ---------- live border validation ---------- */ /* The storefront address forms colour required fields green/red on blur. For wrapped fields the border lives on .e-input-group, so the scripts toggle these classes on the wrapper instead of setting inline styles on the inner input. */ .e-input-group.e-control-wrapper.ej2-emporium.field-valid { border-color: #6abf69; box-shadow: 0 0 0 2px rgba(106, 191, 105, 0.25); } .e-input-group.e-control-wrapper.ej2-emporium.field-invalid { border-color: #e53935; box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.20); }