@gsretail.com/gui-core/build/core/Layout/Air/LayoutSideMenu/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 o from"@emotion/styled";import{Box as r,IconButton as t}from"@mui/material";import"@mui/material/styles";import e from"../../../../assets/theme/basicStyle.js";var i,a,d,p,x=o(r)(i||(i=n(["\n  position: fixed;\n  width: 72px;\n  height: 100%;\n\n  transform: ","; //스크롤트랜지션제거\n  transition: ",";\n  // transform: translateY(51px);\n\n  border-right: 1px solid ",";\n  box-shadow: 0 5px 5px 0 rgb(0 0 0 / 10%);\n  background-color: ",";\n  z-index: ",";\n  padding-top: 23px;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  .MuiButton-root {\n    min-width: 55px;\n    max-width: 55px;\n    background-color: ",";\n    padding: 8px 2px;\n    margin-bottom: 5px;\n    .MuiButton-label {\n      word-break: break-word;\n    }\n    &.active {\n      background-color: ",";\n\n      .MuiTypography-root {\n        color:",";\n      }\n    }\n    .MuiTypography-root {\n      font-size: 12px;\n      color:",";\n    }\n  }\n"],["\n  position: fixed;\n  width: 72px;\n  height: 100%;\n\n  transform: ","; //스크롤트랜지션제거\n  transition: ",";\n  // transform: translateY(51px);\n\n  border-right: 1px solid ",";\n  box-shadow: 0 5px 5px 0 rgb(0 0 0 / 10%);\n  background-color: ",";\n  z-index: ",";\n  padding-top: 23px;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  .MuiButton-root {\n    min-width: 55px;\n    max-width: 55px;\n    background-color: ",";\n    padding: 8px 2px;\n    margin-bottom: 5px;\n    .MuiButton-label {\n      word-break: break-word;\n    }\n    &.active {\n      background-color: ",";\n\n      .MuiTypography-root {\n        color:",";\n      }\n    }\n    .MuiTypography-root {\n      font-size: 12px;\n      color:",";\n    }\n  }\n"])),(function(n){return n.verticalMove?"translateY(0)":"translateY(51px)"}),(function(n){n.verticalMove;return"all 0.03s ease"}),e.color.grey50,e.color.white,(function(n){return n.theme.zIndex.drawer}),e.color.white,e.color.blue,e.color.white,e.color.black),l=o(r)(a||(a=n(["\n  position: fixed;\n  left: 72px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  height: ","; //스크롤트랜지션제거\n  transform: ","; //스크롤트랜지션제거\n  transition: ",";\n  background-color: ",";\n  z-index: ",";\n  box-shadow: 0 5px 5px 0 rgb(0 0 0 / 10%);\n  border-right: 1px solid #e6eaf4;\n  // &:hover {\n  //   overflow-y: overlay;\n  // }\n\n  & .MuiListItemButton-root {\n    & svg {\n      margin-top: -2px;\n    }\n  }\n\n  ::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"],["\n  position: fixed;\n  left: 72px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  height: ","; //스크롤트랜지션제거\n  transform: ","; //스크롤트랜지션제거\n  transition: ",";\n  background-color: ",";\n  z-index: ",";\n  box-shadow: 0 5px 5px 0 rgb(0 0 0 / 10%);\n  border-right: 1px solid #e6eaf4;\n  // &:hover {\n  //   overflow-y: overlay;\n  // }\n\n  & .MuiListItemButton-root {\n    & svg {\n      margin-top: -2px;\n    }\n  }\n\n  ::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])),(function(n){return n.verticalMove?"100%":"calc(100% - 51px)"}),(function(n){return n.verticalMove?"translateY(0)":"translateY(51px)"}),(function(n){n.verticalMove;return"all 0.03s ease"}),e.color.white,(function(n){return n.theme.zIndex.drawer})),s=o(t)(d||(d=n(["\n  position: fixed;\n  background-color:",";\n  border: 1px solid ",";\n  z-index: ",";\n  transition: ","; //스크롤트랜지션제거\n  > svg {\n    transform: ",";\n  }\n  .MuiIconButton-label {\n    min-width: 16px;\n    min-height: 16px;\n  }\n  &:hover {\n    background-color:  ",";\n  }\n\n  left:  ",";\n  top : 96px;\n  border-radius: 0;\n  height: 50px;\n  padding: 0;\n  width: 20px;\n  box-shadow: none;\n  border-left: none;\n  border-top-right-radius: 8px;\n  border-bottom-right-radius: 8px;\n  box-shadow: 2px 3px 5px -2px rgb(0 0 0 / 10%);  // 21.10.12 추가\n"],["\n  position: fixed;\n  background-color:",";\n  border: 1px solid ",";\n  z-index: ",";\n  transition: ","; //스크롤트랜지션제거\n  > svg {\n    transform: ",";\n  }\n  .MuiIconButton-label {\n    min-width: 16px;\n    min-height: 16px;\n  }\n  &:hover {\n    background-color:  ",";\n  }\n\n  left:  ",";\n  top : 96px;\n  border-radius: 0;\n  height: 50px;\n  padding: 0;\n  width: 20px;\n  box-shadow: none;\n  border-left: none;\n  border-top-right-radius: 8px;\n  border-bottom-right-radius: 8px;\n  box-shadow: 2px 3px 5px -2px rgb(0 0 0 / 10%);  // 21.10.12 추가\n"])),e.color.white,e.color.grey300,(function(n){return n.theme.zIndex.drawer+1}),(function(n){n.hidden;return"all 0.03s ease"}),(function(n){return n.hidden?"rotate(180deg)":"rotate(0)"}),e.color.grey300,(function(n){return n.hidden?"71px":"302px"})),c=o(r)(p||(p=n(["\n  position: fixed;\n  top: ","; // 0 : 65px //스크롤트랜지션제거\n  // top: "," + 'px'\n  left: ","px; // 72px + 230px\n  width: 100%;\n  height: 100%;\n  background-color: black;\n  opacity: 0.5;\n  z-index: ",";\n\n  @media (min-width: 1024px) {\n    // display: none;\n  }\n"],["\n  position: fixed;\n  top: ","; // 0 : 65px //스크롤트랜지션제거\n  // top: "," + 'px'\n  left: ","px; // 72px + 230px\n  width: 100%;\n  height: 100%;\n  background-color: black;\n  opacity: 0.5;\n  z-index: ",";\n\n  @media (min-width: 1024px) {\n    // display: none;\n  }\n"])),(function(n){return n.verticalMove?0:e.layout.header.height+"px"}),e.layout.header.height,e.layout.side.firstMenu.width+e.layout.side.secondMenu.width,(function(n){return n.theme.zIndex.drawer}));export{x as IconMenuWrap,s as ShowButton,c as StyledBlind,l as TextMenuWrap};