@gsretail.com/gui-core/build/core/Select/GuiSelect.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 i,e=function(e){return t(e)(i||(i=n(["\n\n  &.gui-select {\n    & .MuiInputBase-root {\n      width: 0;\n      min-width: 100%;\n\n      min-height: 32px;\n      font-size: 0.8125rem; //13px\n      line-height: 1.5;\n      letter-spacing: -0.5px;\n\n      & .MuiInputBase-input {\n        padding: 7px 26px 5.5px 8px;\n      }\n      &.MuiInputBase-sizeSmall {\n        min-height: 24px;\n\n        .MuiInputBase-inputSizeSmall {\n          padding: ",";\n        }\n      }\n    }\n\n    // placeholder\n    .MuiInputLabel-root {\n      top: -8px;\n      left: -6px;\n      transition: none;\n      font-size: 0.8125rem;  //13px\n      font-style: normal;\n      font-weight: 500;\n      color: ",";\n\n      &.MuiInputLabel-sizeSmall {\n        top: -5px;\n      }\n\n      &.Mui-focused,\n      &.MuiFormLabel-filled {\n        opacity: 0;\n      }\n    }\n\n    & .MuiSelect-icon {\n      width: 14px;\n      height: 14px;\n      top: calc(50% - 7px);\n      right: 8px;\n    }\n\n    & .gui-select-body {\n      position: relative;\n      flex-grow: 1;\n\n      &:hover {\n        & .btnClear {\n          display: block;\n        }\n      }\n\n      & .btnClear {\n        display: none;\n        position: absolute;\n        top: 0px;\n        right: 22px;\n\n        & > .MuiIconButton-root {\n          padding: 4px;\n          border-radius: 25px;\n\n          &:hover {\n            background-color: rgba(0, 0, 0, 0.04);\n          }\n        }\n      }\n    }\n  }\n"],["\n\n  &.gui-select {\n    & .MuiInputBase-root {\n      width: 0;\n      min-width: 100%;\n\n      min-height: 32px;\n      font-size: 0.8125rem; //13px\n      line-height: 1.5;\n      letter-spacing: -0.5px;\n\n      & .MuiInputBase-input {\n        padding: 7px 26px 5.5px 8px;\n      }\n      &.MuiInputBase-sizeSmall {\n        min-height: 24px;\n\n        .MuiInputBase-inputSizeSmall {\n          padding: ",";\n        }\n      }\n    }\n\n    // placeholder\n    .MuiInputLabel-root {\n      top: -8px;\n      left: -6px;\n      transition: none;\n      font-size: 0.8125rem;  //13px\n      font-style: normal;\n      font-weight: 500;\n      color: ",";\n\n      &.MuiInputLabel-sizeSmall {\n        top: -5px;\n      }\n\n      &.Mui-focused,\n      &.MuiFormLabel-filled {\n        opacity: 0;\n      }\n    }\n\n    & .MuiSelect-icon {\n      width: 14px;\n      height: 14px;\n      top: calc(50% - 7px);\n      right: 8px;\n    }\n\n    & .gui-select-body {\n      position: relative;\n      flex-grow: 1;\n\n      &:hover {\n        & .btnClear {\n          display: block;\n        }\n      }\n\n      & .btnClear {\n        display: none;\n        position: absolute;\n        top: 0px;\n        right: 22px;\n\n        & > .MuiIconButton-root {\n          padding: 4px;\n          border-radius: 25px;\n\n          &:hover {\n            background-color: rgba(0, 0, 0, 0.04);\n          }\n        }\n      }\n    }\n  }\n"])),(function(n){return n?"2.5px 44px 2px 8px":"2.5px 26px 2px 8px"}),(function(n){return n.theme.palette.grey[500]}))};export{e as default};