kitchen-simulator 5.0.0-test.17 → 5.0.0-test.19

package/src/components/toolbar/main/styles.js

@@ -0,0 +1,696 @@
+import styled from 'styled-components';
+import Dialog from '@material-ui/core/Dialog';
+import * as SharedStyle from '../../../shared-style';
+import {
+  BG_COLOR_1,
+  BG_COLOR_HOVER,
+  DEFAULT_FONT_FAMILY,
+  SECONDARY_PURPLE_COLOR,
+  SHADE_LIGHT_PURPLE_COLOR,
+  TEXT_COLOR_NEUTRAL_0,
+  TEXT_COLOR_NEUTRAL_3,
+  TEXT_COLOR_NEUTRAL_1,
+  BG_COLOR_0,
+  STATUS_WARNING_COLOR,
+  STATUS_NEGATIVE_COLOR,
+  STATUS_NEGATIVE_LIGHT_COLOR,
+  STATUS_WARNING_LIGHT_COLOR,
+  TEXT_COLOR_NEUTRAL_2
+} from '../../../constants';
+
+export const PanelWrapper = styled.div`
+  position: fixed;
+  z-index: 9;
+  top: 0;
+  margin-left: 85px;
+  width: 310px;
+  top: 370px;
+  background-color: ${SharedStyle.TOOLBAR_COLOR.focus};
+`;
+
+export const Title = styled.span`
+  color: ${TEXT_COLOR_NEUTRAL_0};
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 26px;
+  font-weight: 700;
+  line-height: 36px;
+  text-align: left;
+  padding: 15px 10px;
+  user-select: none;
+`;
+
+export const Head = styled.p`
+  display: inline-block;
+  float: right;
+  padding-right: 12px;
+  font-size: 80%;
+`;
+
+export const Close = styled.a`
+  border-radius: 50%;
+  width: 15px;
+  height: 15px;
+  /* color: this.state.closeover ? black : white; */
+  background-color: ${SharedStyle.MATERIAL_COLORS['500'].red};
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+`;
+
+export const hintText = styled.p`
+  position: fixed;
+  top: 65px;
+  background-color: #222222;
+  padding: 12px;
+  border-radius: 6px;
+  text-align: center;
+  z-index: 11;
+  color: white;
+  font-weight: 500;
+  left: calc(50% - 136px);
+`;
+
+export const Direction = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  // position: fixed;
+  cursor: pointer;
+  // background-color: #fff;
+  color: white;
+  border-radius: 32px;
+  margin-right: 15px;
+  right: 260px;
+  bottom: 25px;
+  :hover {
+    border-radius: 40px;
+    box-shadow:
+      0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+      0px 6px 10px 0px rgba(0, 0, 0, 0.39),
+      0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  }
+
+  :active {
+    box-shadow: none !important;
+  }
+`;
+
+export const TakePictureDialog = styled(Dialog)`
+  .never-show-check {
+    color: white;
+  }
+
+  .never-show-check > .MuiTypography-body1 {
+    font-size: 0.7rem;
+  }
+
+  .never-show-check .MuiSvgIcon-root {
+    width: 0.7em;
+    height: 0.7em;
+  }
+
+  .never-show-check .MuiCheckbox-colorPrimary.Mui-checked {
+    color: white;
+  }
+
+  .t_modal {
+    z-index: 0 !important;
+  }
+
+  .MuiDialogTitle-root {
+    background-color: #41403f !important;
+  }
+
+  .MuiDialogContent-root {
+    background-color: #41403f !important;
+    margin: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 14px;
+    font-family:
+      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+      Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+      'Segoe UI Symbol', 'Noto Color Emoji';
+    font-variant: tabular-nums;
+    line-height: 1.5715;
+    background-color: #fff;
+    -webkit-font-feature-settings: 'tnum';
+    font-feature-settings: 'tnum';
+  }
+
+  .MuiDialog-root p {
+    margin-top: 0;
+    margin-bottom: 1em;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    /* margin-top: 0; */
+    /* margin-bottom: 0.5em; */
+    color: rgba(255, 255, 255, 0.85);
+    /* font-weight: 500; */
+  }
+
+  .MuiButton-textPrimary {
+    color: white !important;
+  }
+
+  .MuiDialog-paperWidthSm {
+    min-width: 90vw !important;
+    height: 95vh !important;
+  }
+`;
+
+export const ToolbarWrapper = styled.div`
+  background-color: white;
+  display: flex;
+  z-index: 1;
+  box-shadow:
+    0px 3px 5px -1px rgba(156, 154, 154, 0.2),
+    0px 6px 10px 0px rgba(156, 154, 154, 0.39),
+    0px 1px 18px 0px rgba(156, 154, 154, 0.12);
+  border-radius: 10px;
+  padding: 25px 10px;
+  left: 15px;
+  top: 90px;
+  user-select: none;
+  max-height: calc(100vh - 110px);
+  overflow: auto;
+`;
+
+export const SubToolbarWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-left: 50px;
+  min-width: 250px;
+`;
+
+export const ToolbarButton = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 115px;
+  height: 115px;
+  justify-content: center;
+  cursor: pointer;
+
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+    border-radius: 10px;
+  }
+`;
+
+export const ToolbarButtonImage = styled.div`
+  width: 35px;
+  height: 35px;
+  -webkit-mask-image: url(${props => props.maskImage});
+  -webkit-mask-size: 100%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+`;
+
+export const ToolbarButtonImageWrapper = styled.div`
+  height: 50px;
+  display: flex;
+  align-items: center;
+  width: 50px;
+  justify-content: center;
+`;
+
+export const ToolbarButtonTitle = styled.span`
+  color: ${SECONDARY_PURPLE_COLOR};
+  font-family: ${DEFAULT_FONT_FAMILY};
+
+  @media screen and (min-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (max-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (min-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (max-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (min-width: 1440) {
+    font-size: 16px;
+  }
+  @media screen and (max-width: 1440) {
+    font-size: 16px;
+  }
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 22px;
+  text-align: center;
+`;
+
+export const SubCategoryTitle = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 21px;
+  font-weight: 700;
+  line-height: 36px;
+  text-align: left;
+  padding: 10px 30px;
+  padding-left: 0px;
+`;
+
+export const SubCategoryItemWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  margin-top: 20px;
+  flex-direction: column;
+  overflow-y: overlay;
+`;
+
+export const ContentCheckImage = styled.img`
+  position: absolute;
+  padding: 20px;
+  width: 70px;
+  color: ${SHADE_LIGHT_PURPLE_COLOR};
+  border: 3px solid ${SHADE_LIGHT_PURPLE_COLOR};
+`;
+
+export const SubCategoryItem = styled.div`
+  display: flex;
+  min-width: 200px;
+  padding: 15px;
+  margin-bottom: 5px;
+  align-items: center;
+  border-radius: 10px;
+  cursor: pointer;
+  position: relative;
+  margin-right: 15px;
+
+  img#check {
+    display: none;
+  }
+
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+
+    img#check {
+      display: block;
+    }
+  }
+`;
+
+export const SubCategoryItemImage = styled.img`
+  background-color: ${SECONDARY_PURPLE_COLOR};
+  height: 30px;
+  width: 30px;
+  -webkit-mask-image: url(${props => props.maskImage + '?nocache=2025'});
+  -webkit-mask-size: calc(100% - 2px) calc(100% - 2px);
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 1px 1px;
+`;
+
+export const SubCategoryItemLabel = styled.span`
+  @media screen and (min-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (max-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (min-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (max-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (min-width: 1440) {
+    font-size: 16px;
+  }
+  @media screen and (max-width: 1440) {
+    font-size: 16px;
+  }
+  font-size: 14px;
+  font-weight: 600;
+  margin-left: 10px;
+  line-height: 22px;
+  text-align: center;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${SECONDARY_PURPLE_COLOR};
+  position: relative;
+`;
+
+export const Div = styled.div`
+  position: fixed;
+  top: calc(50% - 150px);
+  left: calc(50% - 200px);
+  z-index: 200;
+  background: #2b2b2ddf;
+  align-items: space-around;
+  justify-content: center;
+  color: white;
+  width: 350px;
+  height: 140px;
+`;
+
+export const IconButton = styled.button`
+  color: ${BG_COLOR_1};
+  font-size: 12px;
+  border: 0px;
+  border-radius: 3px;
+  background: #000;
+  border: 1px solid #000;
+  padding: 4px 4px 1px 4px;
+  cursor: pointer;
+`;
+
+export const ButtonTitle1 = styled.span`
+  position: absolute;
+  padding-left: 20px;
+  margin-top: 3px;
+  font-size: 12px;
+  cursor: pointer;
+`;
+
+export const ButtonTitle2 = styled.span`
+  position: absolute;
+  padding-left: 20px;
+  margin-top: 3px;
+  font-size: 12px;
+  cursor: pointer;
+`;
+
+export const RightButtonImage = styled.img`
+  height: 18px;
+  width: 18px;
+  cursor: pointer;
+  user-select: none;
+`;
+
+export const RightButton = styled.div`
+  background-color: ${BG_COLOR_1};
+  height: 50px;
+  display: flex;
+  box-shadow:
+    0px 3px 5px -1px rgba(156, 154, 154, 0.2),
+    0px 6px 10px 0px rgba(156, 154, 154, 0.39),
+    0px 1px 18px 0px rgba(156, 154, 154, 0.12);
+  border-radius: 10px;
+  padding: 0px 20px;
+  margin-left: 10px;
+  cursor: pointer;
+  user-select: none;
+  align-items: center;
+
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+  }
+`;
+
+export const NumberInputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 5px;
+  position: relative;
+`;
+
+export const NumberInputTitle = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 15px;
+  text-align: left;
+  color: ${TEXT_COLOR_NEUTRAL_0};
+  margin-right: auto;
+  user-select: none;
+  width: 180px;
+`;
+
+export const CeilingHeight = styled.input`
+  padding: 15px 15px;
+  color: #000f33;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+  width: 167px;
+  text-align: left;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  border: 2px solid #8791ab;
+  border-radius: 5px;
+  outline: 0;
+
+  :focus {
+    border-color: ${SECONDARY_PURPLE_COLOR};
+  }
+
+  :hover {
+    border-color: ${SECONDARY_PURPLE_COLOR};
+  }
+`;
+
+export const MeasurementUnitSelect = styled.div`
+  cursor: pointer;
+  width: 180px;
+  padding: 15px 15px;
+  color: ${TEXT_COLOR_NEUTRAL_1};
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+  text-align: left;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  border-radius: 5px;
+  border: 2px solid ${TEXT_COLOR_NEUTRAL_3};
+`;
+
+export const SelectArrow = styled.img`
+  position: absolute;
+  right: 15px;
+  width: 15px;
+  height: 9px;
+  background-color: ${TEXT_COLOR_NEUTRAL_3};
+  -webkit-mask-image: url(${props => props.maskImage + '?nocache=2025'});
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+`;
+
+export const MeasurementUnitOption = styled.div`
+  padding: 12px 20px;
+  font-size: 13px;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  color: ${TEXT_COLOR_NEUTRAL_0};
+  line-height: 18px;
+  text-align: left;
+  font-weight: 600;
+  cursor: pointer;
+
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+  }
+`;
+
+export const ItemCustomImageWrapper = styled.div`
+  display: none;
+  z-index: 10;
+  position: absolute;
+`;
+
+export const ItemCustomImage = styled.img`
+  background-color: ${BG_COLOR_0};
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  box-shadow:
+    3px 1px 3px 0px rgba(0, 0, 0, 0.2),
+    -1px -1px 1px 0px rgba(0, 0, 0, 0.14),
+    0px 2px 1px -1px rgba(0, 0, 0, 0.12);
+  padding: 3px;
+  cursor: pointer;
+  user-select: none;
+
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+
+    div#warning_box {
+      display: block;
+    }
+  }
+`;
+export const WarningItem = styled.div`
+  opacity: 0.8;
+  position: absolute;
+  border-radius: 6px;
+  z-index: 11;
+  background-color: #ff7400;
+  width: max-content;
+  align-items: center;
+  padding: 10px;
+  display: none;
+  box-shadow:
+    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0px 6px 10px 0px rgba(0, 0, 0, 0.39),
+    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  top: -50px;
+  left: 5px;
+  color: white;
+`;
+
+export const DoorStyleSubToolBarWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  overflow-y: scroll;
+  align-content: flex-start;
+  height: 100%;
+`;
+
+export const DoorstyleCategoryItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-right: 20px;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  margin-bottom: 15px;
+  padding: 10px;
+  border-radius: 10px;
+
+  img#check {
+    display: none;
+  }
+
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+
+    img#check {
+      display: block;
+    }
+  }
+`;
+
+export const ReviewQuoteTable = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ReviewQuoteThead = styled.div`
+  background-color: ${BG_COLOR_0};
+  display: flex;
+  align-items: center;
+`;
+
+export const ReviewQuoteTh = styled.div`
+  font-family: ${DEFAULT_FONT_FAMILY};
+
+  @media screen and (min-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (max-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (min-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (max-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (min-width: 1440) {
+    font-size: 16px;
+  }
+  @media screen and (max-width: 1440) {
+    font-size: 16px;
+  }
+  font-size: 12px;
+  line-height: 13px;
+  text-align: center;
+  font-weight: 600;
+  margin: 5px 0px;
+  line-height: normal;
+  color: ${TEXT_COLOR_NEUTRAL_3};
+`;
+
+export const ReviewQuoteTh2 = styled(ReviewQuoteTh)`
+  font-size: 14px;
+  color: ${TEXT_COLOR_NEUTRAL_2};
+`;
+
+export const ReviewQuoteItem = styled.div`
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: center;
+`;
+
+export const ReviewQuoteItemLabel = styled(SubCategoryItemLabel)`
+  font-size: 12px;
+`;
+
+export const DistcountedPriceWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  background-color: ${props => props.bgColor};
+
+  :hover {
+    border: 2px solid ${props => props.borderHoverColor};
+  }
+`;
+
+export const Button = styled.button`
+  //margin: auto;
+  display: flex;
+  justify-content: center;
+  padding: 10px 25px;
+  color: ${SECONDARY_PURPLE_COLOR};
+  font-size: 16px;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-weight: 600;
+  line-height: 16px;
+  outline: 0;
+  background-color: ${BG_COLOR_1};
+  text-align: center;
+  border: 1px solid ${BG_COLOR_1};
+  cursor: pointer;
+  border-radius: 5px;
+  align-items: center;
+
+  :hover {
+    background-color: ${BG_COLOR_0};
+  }
+
+  :active {
+    background-color: ${BG_COLOR_0};
+  }
+
+  // :focus{
+  //   box-shadow: 0px 0px 8px 2px ${SECONDARY_PURPLE_COLOR};
+  // }
+  word-wrap: break-word;
+`;
+
+export const ToggleWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-top: 15px;
+  margin-bottom: 10px;
+`;
+
+export const ToggleLabel = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-weight: 400;
+  line-height: 15px;
+  text-align: left;
+  color: ${TEXT_COLOR_NEUTRAL_2};
+`;
+
+export const testJsonItemWrapper = styled.div`
+  display: flex;
+  font-size: 16px;
+  font-weight: 700;
+  padding: 15px;
+  border-radius: 10px;
+  width: 100%;
+  color: ${SECONDARY_PURPLE_COLOR};
+
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+    cursor: pointer;
+  }
+`;