@gsretail.com/gui-core/build/core/AutoComplete/GuiAutoComplete.styled.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import{__makeTemplateObject as n}from"../../node_modules/tslib/tslib.es6.js";import t from"@emotion/styled";var e,i=function(i){return t(i)(e||(e=n(["\n\n  &.gui-autoComplete {\n    .MuiOutlinedInput-root {\n      padding: 2px 50px 2px 8px !important;\n      min-height: 32px;\n      font-size: 0.8125rem; //13px\n      letter-spacing: -0.5px;\n\n      .MuiAutocomplete-input {\n        padding: 0 !important;\n      }\n\n      &.MuiInputBase-sizeSmall {\n        padding: 2px 50px 2px 8px;\n        min-height: 24px;\n      }\n\n      .MuiChip-root {\n        height: 20px;\n        font-size: 0.8125rem; //13px\n        background: ",";\n\n        .MuiChip-label {\n          padding-left: 8px;\n          padding-right: 8px;\n          line-height: 1;\n        }\n\n        .MuiChip-deleteIcon {\n          font-size: 16px;\n          font-size: 1rem;  //16px\n          margin-right: 4px;\n          margin-left: -4px;\n        }\n\n        &.MuiAutocomplete-tag {\n          margin: 2px 4px 2px 0;\n        }\n\n        &.MuiChip-sizeSmall {\n          height: 16px;\n          font-size: 0.75rem; //12px\n\n          .MuiChip-deleteIcon {\n            font-size: 0.875rem;  //14px\n          }\n\n          &.MuiAutocomplete-tag {\n            margin: 1.5px 4px 1.5px 0;\n          }\n        }\n      }\n    }\n\n    & .Gui-readonly {\n      .MuiOutlinedInput-root {\n        background-color: ",";\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ",";\n        }\n        .MuiChip-root {\n          background-color: ",";\n        }\n      }\n      & + .readonly-wrap {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        border-radius: 4px;\n\n        &:hover {\n          border: 1px solid ",";\n        }\n      }\n      & svg {\n        color: "," !important;\n      }\n    }\n\n    .MuiAutocomplete-endAdornment {\n      right: 5px !important;\n      top: calc(50% - 12px);\n\n      & .MuiAutocomplete-clearIndicator,\n      & .MuiAutocomplete-popupIndicator {\n        width: 24px;\n        height: 24px;\n        padding: 5px;\n        & Svg {\n          width: 14px;\n          height: 14px;\n          font-size: 0.875rem;  //14px\n          color: inherit;\n        }\n      }\n    }\n\n    .MuiCircularProgress-root {\n      position: relative;\n      right: -20px;\n      color: ",";\n    }\n  }\n"],["\n\n  &.gui-autoComplete {\n    .MuiOutlinedInput-root {\n      padding: 2px 50px 2px 8px !important;\n      min-height: 32px;\n      font-size: 0.8125rem; //13px\n      letter-spacing: -0.5px;\n\n      .MuiAutocomplete-input {\n        padding: 0 !important;\n      }\n\n      &.MuiInputBase-sizeSmall {\n        padding: 2px 50px 2px 8px;\n        min-height: 24px;\n      }\n\n      .MuiChip-root {\n        height: 20px;\n        font-size: 0.8125rem; //13px\n        background: ",";\n\n        .MuiChip-label {\n          padding-left: 8px;\n          padding-right: 8px;\n          line-height: 1;\n        }\n\n        .MuiChip-deleteIcon {\n          font-size: 16px;\n          font-size: 1rem;  //16px\n          margin-right: 4px;\n          margin-left: -4px;\n        }\n\n        &.MuiAutocomplete-tag {\n          margin: 2px 4px 2px 0;\n        }\n\n        &.MuiChip-sizeSmall {\n          height: 16px;\n          font-size: 0.75rem; //12px\n\n          .MuiChip-deleteIcon {\n            font-size: 0.875rem;  //14px\n          }\n\n          &.MuiAutocomplete-tag {\n            margin: 1.5px 4px 1.5px 0;\n          }\n        }\n      }\n    }\n\n    & .Gui-readonly {\n      .MuiOutlinedInput-root {\n        background-color: ",";\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ",";\n        }\n        .MuiChip-root {\n          background-color: ",";\n        }\n      }\n      & + .readonly-wrap {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        border-radius: 4px;\n\n        &:hover {\n          border: 1px solid ",";\n        }\n      }\n      & svg {\n        color: "," !important;\n      }\n    }\n\n    .MuiAutocomplete-endAdornment {\n      right: 5px !important;\n      top: calc(50% - 12px);\n\n      & .MuiAutocomplete-clearIndicator,\n      & .MuiAutocomplete-popupIndicator {\n        width: 24px;\n        height: 24px;\n        padding: 5px;\n        & Svg {\n          width: 14px;\n          height: 14px;\n          font-size: 0.875rem;  //14px\n          color: inherit;\n        }\n      }\n    }\n\n    .MuiCircularProgress-root {\n      position: relative;\n      right: -20px;\n      color: ",";\n    }\n  }\n"])),(function(n){return n.theme.palette.grey[200]}),(function(n){return n.theme.palette.grey[200]}),(function(n){return n.theme.palette.grey[300]}),(function(n){return n.theme.palette.grey[300]}),(function(n){return n.theme.palette.grey[400]}),(function(n){return n.theme.palette.grey[500]}),(function(n){return n.theme.palette.primary.main}))};export{i as default};