From 8d25b6176f583fc9c176df51003426134913292d Mon Sep 17 00:00:00 2001 From: minsik Date: Mon, 7 Oct 2024 14:58:17 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/_contents.scss | 1879 +++++++++++++++++++++---------------- src/styles/_modal.scss | 117 +++ src/styles/_reset.scss | 1359 +++++++++++++++------------ src/styles/_table.scss | 354 +++---- 4 files changed, 2153 insertions(+), 1556 deletions(-) diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 3d503b0b..7a357be7 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -1,845 +1,1140 @@ // CanvasPage -.canvas-wrap{ - height: calc(100vh - 47px); - display: flex; - flex-direction: column; - .canvas-content{ - flex: 1 1 auto; - .canvas-layout{ - height: 100%; - } +.canvas-wrap { + height: calc(100vh - 47px); + display: flex; + flex-direction: column; + + .canvas-content { + flex: 1 1 auto; + + .canvas-layout { + height: 100%; } - &.sub-wrap{ - overflow: hidden; - .canvas-content{ - height: calc(100% - 47px); - } + } + + &.sub-wrap { + overflow: hidden; + + .canvas-content { + height: calc(100% - 47px); } + } } + // CanvasMenu -.canvas-menu-wrap{ +.canvas-menu-wrap { + position: relative; + display: block; + width: 100%; + padding-bottom: 0; + background-color: #383838; + transition: padding .17s ease-in-out; + + .canvas-menu-inner { position: relative; - display: block; - width: 100%; - padding-bottom: 0; - background-color: #383838; - transition: padding .17s ease-in-out; - .canvas-menu-inner{ - position: relative; - display: flex; - align-items: center; - padding: 0 40px 0 20px; - background-color: #2C2C2C; - z-index: 999; - .canvas-menu-list{ - display: flex; - align-items: center; - height: 100%; - .canvas-menu-item{ - display: flex; - align-items: center; - height: 100%; - button{ - display: flex; - align-items: center; - font-size: 12px; - height: 100%; - color: #fff; - font-weight: 600; - padding: 15px 20px; - opacity: 0.55; - transition: all .17s ease-in-out; - .menu-icon{ - display: block; - width: 16px; - height: 16px; - background-repeat: no-repeat; - background-position: center; - background-size: cover; - margin-right: 10px; - &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);} - &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);} - &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);} - &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);} - &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);} - &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);} - &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);} - } - } - &.active{ - background-color: #383838; - button{ - opacity: 1; - } - } - } - } - .canvas-side-btn-wrap{ - display: flex; - align-items: center; - margin-left: auto; - .select-box{ - width: 124px; - margin-right: 5px; - > div{ - width: 100%; - } - } - .btn-from{ - display: flex; - align-items: center; - gap: 5px; - button{ - display: block; - width: 30px; - height: 30px; - border-radius: 2px; - background-color: #3D3D3D; - background-position: center; - background-repeat: no-repeat; - background-size: 15px 15px; - transition: all .17s ease-in-out; - &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);} - &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);} - &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);} - &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);} - &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);} - &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);} - &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);} - &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);} - &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);} - &:hover{ - background-color: #1083E3; - } - &.active{ - background-color: #1083E3; - } - } - } - .ico-btn-from{ - display: flex; - align-items: center; - gap: 5px; - button{ - .ico{ - display: block; - width: 15px; - height: 15px; - background-repeat: no-repeat; - background-position: center; - background-size: contain; - &.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);} - &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);} - &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);} - &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);} - } - .name{ - font-size: 12px; - color: #fff; - } - } - &.form06{ - .name{ - font-size: 13px; - } - } - } - .vertical-horizontal{ - display: flex; - min-width: 170px; - height: 28px; - margin: 0 5px; - border-radius: 2px; - background: #373737; - line-height: 28px; - overflow: hidden; - span{ - padding: 0 10px; - font-size: 13px; - color: #fff; - } - button{ - margin-left: auto; - height: 100%; - background-color: #4B4B4B; - font-size: 13px; - font-weight: 400; - color: #fff; - padding: 0 7.5px; - transition: all .17s ease-in-out; - } - &.on{ - button{ - background-color: #1083E3; - } - } - } - .size-control{ - display: flex; - align-items: center; - justify-content: center; - gap: 10px; - background-color: #3D3D3D; - border-radius: 2px; - width: 100px; - height: 30px; - margin: 0 5px; - span{ - font-size: 13px; - color: #fff; - } - .control-btn{ - display: block; - width: 12px; - height: 12px; - background-repeat: no-repeat; - background-size: cover; - background-position: center; - &.minus{ - background-image: url(../../public/static/images/canvas/minus.svg); - } - &.plus{ - background-image: url(../../public/static/images/canvas/plus.svg); - } - } - } - } - } - .canvas-depth2-wrap{ - position: absolute; - top: -100%; - left: 0; - background-color: #383838; - width: 100%; - height: 50px; - transition: all .17s ease-in-out; - .canvas-depth2-inner{ - display: flex; - align-items: center; - padding: 0 40px; - height: 100%; - .canvas-depth2-list{ - display: flex; - align-items: center ; - height: 100%; - .canvas-depth2-item{ - display: flex; - align-items: center; - margin-right: 26px; - height: 100%; - button{ - position: relative; - opacity: 0.55; - color: #fff; - font-size: 12px; - font-weight: normal; - height: 100%; - padding-right: 12px; - } - &.active{ - button{ - opacity: 1; - font-weight: 600; - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 5px; - height: 8px; - background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; - } - } - } - } - } - .canvas-depth2-btn-list{ - display: flex; - align-items: center; - margin-left: auto; - height: 100%; - .depth2-btn-box{ - display: flex; - align-items: center; - margin-right: 34px; - height: 100%; - transition: all .17s ease-in-out; - button{ - position: relative; - font-size: 12px; - font-weight: 400; - height: 100%; - color: #fff; - padding-right: 12px; - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 5px; - height: 8px; - background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; - } - } - &:last-child{ - margin-right: 0; - } - &.mouse{ - opacity: 0.55; - } - } - } - } - &.active{ - top: 47px; - } - } - &.active{ - padding-bottom: 50px; - } -} - -// canvas-layout -.canvas-layout{ - .canvas-page-list{ - display: flex; - background-color: #1C1C1C; - border-top: 1px solid #000; - width: 100%; - .canvas-plane-wrap{ - display: flex; - align-items: center; - max-width: calc(100% - 45px); - .canvas-page-box{ - display: flex; - align-items: center; - background-color: #1c1c1c; - padding: 9.6px 20px; - border-right:1px solid #000; - min-width: 0; - transition: all .17s ease-in-out; - span{ - display: flex; - align-items: center; - width: 100%; - font-size: 12px; - font-family: 'Pretendard', sans-serif; - color: #AAA; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - .close{ - flex: none; - display: block; - width: 7px; - height: 8px; - margin-left: 15px; - background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center; - background-size: cover; - } - &.on{ - background-color: #fff; - span{ - font-weight: 600; - color: #101010; - } - .close{ - background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center; - } - &:hover{ - background-color: #fff; - } - } - &:hover{ - background-color: #000; - } - } - } - .plane-add{ - display: flex; - align-items: center; - justify-content: center; - width: 45px; - padding: 13.5px 0; - background-color: #1C1C1C; - border-right: 1px solid #000; - transition: all .17s ease-in-out; - span{ - display: block; - width: 9px; - height: 9px; - background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center; - background-size: cover; - } - &:hover{ - background-color: #000; - } - } - } -} - -.canvas-frame{ - position: relative; - height: calc(100% - 36.5px); - background-color: #fff; - canvas{ - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } -} - -// sub-page -.sub-header{ - position: fixed; - top: 46px; - left: 0; - width: 100%; - height: 46px; - border-bottom: 1px solid #000; - background: #2C2C2C; + display: flex; + align-items: center; + padding: 0 40px 0 20px; + background-color: #2C2C2C; z-index: 999; - .sub-header-inner{ + + .canvas-menu-list { + display: flex; + align-items: center; + height: 100%; + + .canvas-menu-item { display: flex; align-items: center; height: 100%; - padding: 0 100px; - .sub-header-title-wrap{ - display: flex; - align-items: center; - .title-item{ - position: relative; - padding: 0 24px; - a{ - display: flex; - align-items: center; - .icon{ - width: 22px; - height: 22px; - margin-right: 8px; - background-repeat: no-repeat; - background-position: center; - background-size: cover; - &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);} - } - } - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 1px; - height: 16px; - background-color: #D9D9D9; - } - &:first-child{ - padding-left: 0; - } - &:last-child{ - padding-right: 0; - &:after{ - display: none; - } - } - } - } - .sub-header-title{ - font-size: 16px; - color: #fff; - font-weight: 600; - } - .sub-header-location{ - margin-left: auto; - display: flex; - align-items: center; - .location-item{ - position: relative; - display: flex; - align-items: center; - padding: 0 10px; - span{ - display: flex; - font-size: 12px; - color: #AAA; - font-weight: normal; - cursor: default; - } - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 4px; - height: 6px; - background: url(../../public/static/images/main/loaction_arr.svg)no-repeat center; - } - &:first-child{ - padding-left: 0; - } - &:last-child{ - padding-right: 0; - span{ - color: #fff; - } - &:after{ - display: none; - } - } - } - } - } -} -// sub content -.sub-content{ - padding-top: 46px; - .sub-content-inner{ - max-width: 1720px; - margin: 0 auto; - padding-top: 20px; - .sub-content-box{ - margin-bottom: 20px; - &:last-child{ - margin-bottom: 0; + button { + display: flex; + align-items: center; + font-size: 12px; + height: 100%; + color: #fff; + font-weight: 600; + padding: 15px 20px; + opacity: 0.55; + transition: all .17s ease-in-out; + + .menu-icon { + display: block; + width: 16px; + height: 16px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + margin-right: 10px; + + &.con00 { + background-image: url(/static/images/canvas/menu_icon00.svg); } + + &.con01 { + background-image: url(/static/images/canvas/menu_icon01.svg); + } + + &.con02 { + background-image: url(/static/images/canvas/menu_icon02.svg); + } + + &.con03 { + background-image: url(/static/images/canvas/menu_icon03.svg); + } + + &.con04 { + background-image: url(/static/images/canvas/menu_icon04.svg); + } + + &.con05 { + background-image: url(/static/images/canvas/menu_icon05.svg); + } + + &.con06 { + background-image: url(/static/images/canvas/menu_icon06.svg); + } + } } - } - &.estimate{ - display: flex; - flex-direction: column; - height: calc(100% - 36.5px); - overflow-y: auto; - padding-top: 0; - .sub-content-inner{ - flex: 1; - width: 100%; + + &.active { + background-color: #383838; + + button { + opacity: 1; + } } + } } -} -.sub-table-box{ - padding: 20px; - border-radius: 6px; - border: 1px solid #E9EAED; - background: #FFF; - box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); - .table-box-title-wrap{ + + .canvas-side-btn-wrap { + display: flex; + align-items: center; + margin-left: auto; + + .select-box { + width: 124px; + margin-right: 5px; + + > div { + width: 100%; + } + } + + .btn-from { display: flex; align-items: center; - margin-bottom: 15px; - .title-wrap{ - display: flex; - align-items: center; - h3{ - display: block; - font-size: 15px; - color: #101010; - font-weight: 600; - margin-right: 14px; - } - .info-wrap{ - display: flex; - align-items: center; - li{ - position: relative; - padding: 0 6px; - font-size: 12px; - color: #101010; - font-weight: normal; - span{ - font-weight: 600; - &.red{ - color: #E23D70; - } - } - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 1px; - height: 11px; - background-color: #D9D9D9; - } - &:first-child{padding-left: 0;} - &:last-child{padding-right: 0;&::after{display: none;}} - } - } + gap: 5px; + + button { + display: block; + width: 30px; + height: 30px; + border-radius: 2px; + background-color: #3D3D3D; + background-position: center; + background-repeat: no-repeat; + background-size: 15px 15px; + transition: all .17s ease-in-out; + + &.btn01 { + background-image: url(../../public/static/images/canvas/side_icon03.svg); + } + + &.btn02 { + background-image: url(../../public/static/images/canvas/side_icon02.svg); + } + + &.btn03 { + background-image: url(../../public/static/images/canvas/side_icon01.svg); + } + + &.btn04 { + background-image: url(../../public/static/images/canvas/side_icon04.svg); + } + + &.btn05 { + background-image: url(../../public/static/images/canvas/side_icon05.svg); + } + + &.btn06 { + background-image: url(../../public/static/images/canvas/side_icon06.svg); + } + + &.btn07 { + background-image: url(../../public/static/images/canvas/side_icon07.svg); + } + + &.btn08 { + background-image: url(../../public/static/images/canvas/side_icon08.svg); + } + + &.btn09 { + background-image: url(../../public/static/images/canvas/side_icon09.svg); + } + + &:hover { + background-color: #1083E3; + } + + &.active { + background-color: #1083E3; + } } - } - .left-unit-box{ - margin-left: auto; + } + + .ico-btn-from { display: flex; align-items: center; - } - .promise-gudie{ - display: block; - font-size: 13px; - font-weight: 700; - color: #101010; - margin-bottom: 20px; - } - .important{ - color: #f00; - } - .sub-table-footer{ + gap: 5px; + + button { + .ico { + display: block; + width: 15px; + height: 15px; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + &.ico01 { + background-image: url(../../public/static/images/canvas/ico-flx01.svg); + } + + &.ico02 { + background-image: url(../../public/static/images/canvas/ico-flx02.svg); + } + + &.ico03 { + background-image: url(../../public/static/images/canvas/ico-flx03.svg); + } + + &.ico04 { + background-image: url(../../public/static/images/canvas/ico-flx04.svg); + } + } + + .name { + font-size: 12px; + color: #fff; + } + } + + &.form06 { + .name { + font-size: 13px; + } + } + } + + .vertical-horizontal { + display: flex; + min-width: 170px; + height: 28px; + margin: 0 5px; + border-radius: 2px; + background: #373737; + line-height: 28px; + overflow: hidden; + + span { + padding: 0 10px; + font-size: 13px; + color: #fff; + } + + button { + margin-left: auto; + height: 100%; + background-color: #4B4B4B; + font-size: 13px; + font-weight: 400; + color: #fff; + padding: 0 7.5px; + transition: all .17s ease-in-out; + } + + &.on { + button { + background-color: #1083E3; + } + } + } + + .size-control { display: flex; align-items: center; justify-content: center; - margin-top: 20px; - } - .pagination-wrap{ - margin-top: 24px; - } -} + gap: 10px; + background-color: #3D3D3D; + border-radius: 2px; + width: 100px; + height: 30px; + margin: 0 5px; -.infomation-box-wrap{ - display: flex; - align-items: center; - gap: 10px; - .sub-table-box{ - flex: 1 ; - } - .info-title{ - font-size: 14px; - font-weight: 500; - color: #344356; - margin-bottom: 10px; - } - .info-inner{ - position: relative; - font-size: 13px; - color: #344356; - .copy-ico{ - position: absolute; - bottom: 0; - right: 0; - width: 16px; - height: 16px; - background: url(../../public/static/images/sub/copy_ico.svg)no-repeat center; - background-size: cover; + span { + font-size: 13px; + color: #fff; } - } -} -// 견적서 -.estimate-list-wrap{ - display: flex; - align-items: center; - margin-bottom: 10px; - .estimate-box{ - flex: 1 ; + .control-btn { + display: block; + width: 12px; + height: 12px; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + &.minus { + background-image: url(../../public/static/images/canvas/minus.svg); + } + + &.plus { + background-image: url(../../public/static/images/canvas/plus.svg); + } + } + } + } + } + + .canvas-depth2-wrap { + position: absolute; + top: -100%; + left: 0; + background-color: #383838; + width: 100%; + height: 50px; + transition: all .17s ease-in-out; + + .canvas-depth2-inner { + display: flex; + align-items: center; + padding: 0 40px; + height: 100%; + + .canvas-depth2-list { display: flex; align-items: center; - &:last-child{ - flex: none; - min-width: 220px; - } - .estimate-tit{ - width: 105px; - height: 30px; - line-height: 30px; - background-color: #F4F4F7; - border-radius: 100px; - text-align: center; - font-size: 13px; - font-weight: 500; - color: #344356; - } - .estimate-name{ - font-size: 13px; - color: #344356; - margin-left: 14px; - font-weight: 400; - } - } - &:last-child{ - margin-bottom: 0; - } -} - -// file drag box -.drag-file-box{ - padding: 10px; - .btn-area{ - padding-bottom: 15px; - border-bottom: 1px solid #ECF0F4; - } - .drag-file-area{ - position: relative; - margin-top: 15px; - p{ - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 13px; - color: #ccc; - font-weight: 400; - cursor: default; - } - } - .file-list{ - .file-item{ - margin-bottom: 15px; - span{ - position: relative; - font-size: 13px; - color: #45576F; - font-weight: 400; - white-space: nowrap; - padding-right: 55px; - button{ - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 15px; - height: 15px; - background: url(../../public/static/images/sub/file_delete.svg)no-repeat center; - background-size: cover; - } - } - &:last-child{ - margin-bottom: 0; - } - } - } -} - -// 발전시물레이션 -.chart-wrap{ - display: flex; - gap: 20px; - width: 100%; - .sub-table-box{ height: 100%; - } - .chart-inner{ - flex: 1; - .chart-box{ - margin-bottom: 30px; - } - } - .chart-table-wrap{ - display: flex; - flex-direction: column; - flex: none; - width: 650px; - .sub-table-box{ - flex: 1; - &:first-child{ - margin-bottom: 20px; - } - } - } -} -.chart-month-table{ - table{ - table-layout: fixed; - border-collapse:collapse; - border: 1px solid #ECF0F4; - border-radius: 4px; - thead{ - th{ - padding: 4.5px 0; - border-bottom: 1px solid #ECF0F4; - text-align: center; - font-size: 13px; - color: #45576F; - font-weight: 500; - background-color: #F8F9FA; - } - } - tbody{ - td{ - font-size: 13px; - color: #45576F; - text-align: center; - padding: 4.5px 0; - } - } - } -} + .canvas-depth2-item { + display: flex; + align-items: center; + margin-right: 26px; + height: 100%; -.simulation-guide-wrap{ - display: flex; - padding: 20px; - .simulation-tit-wrap{ - padding-right: 40px; - border-right: 1px solid #EEEEEE; - span{ - display: block; + button { position: relative; - padding-left: 60px; - font-size: 15px; - color: #14324F; - font-weight: 600; - &::before{ + opacity: 0.55; + color: #fff; + font-size: 12px; + font-weight: normal; + height: 100%; + padding-right: 12px; + } + + &.active { + button { + opacity: 1; + font-weight: 600; + + &:after { content: ''; position: absolute; top: 50%; - left: 0; + right: 0; transform: translateY(-50%); - width: 40px; - height: 40px; - background: url(../../public/static/images/sub/simulation_guide.svg)no-repeat center; - background-size: cover; + width: 5px; + height: 8px; + background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; + } } + } } - } - .simulation-guide-box{ - padding-left: 40px; - dl{ - margin-bottom: 25px; - dt{ - font-size: 13px; - color: #101010; - font-weight: 600; - margin-bottom: 5px; - } - dd{ - font-size: 12px; - color: #45576F; - font-weight: 400; - line-height: 24px; - } - &:last-child{ - margin-bottom: 0; + } + + .canvas-depth2-btn-list { + display: flex; + align-items: center; + margin-left: auto; + height: 100%; + + .depth2-btn-box { + display: flex; + align-items: center; + margin-right: 34px; + height: 100%; + transition: all .17s ease-in-out; + + button { + position: relative; + font-size: 12px; + font-weight: 400; + height: 100%; + color: #fff; + padding-right: 12px; + + &:after { + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 5px; + height: 8px; + background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; } + } + + &:last-child { + margin-right: 0; + } + + &.mouse { + opacity: 0.55; + } } + } } + + &.active { + top: 47px; + } + } + + &.active { + padding-bottom: 50px; + } } -.module-total{ +// canvas-layout +.canvas-layout { + .canvas-page-list { + display: flex; + background-color: #1C1C1C; + border-top: 1px solid #000; + width: 100%; + + .canvas-plane-wrap { + display: flex; + align-items: center; + max-width: calc(100% - 45px); + + .canvas-page-box { + display: flex; + align-items: center; + background-color: #1c1c1c; + padding: 9.6px 20px; + border-right: 1px solid #000; + min-width: 0; + transition: all .17s ease-in-out; + + span { + display: flex; + align-items: center; + width: 100%; + font-size: 12px; + font-family: 'Pretendard', sans-serif; + color: #AAA; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + .close { + flex: none; + display: block; + width: 7px; + height: 8px; + margin-left: 15px; + background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center; + background-size: cover; + } + + &.on { + background-color: #fff; + + span { + font-weight: 600; + color: #101010; + } + + .close { + background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center; + } + + &:hover { + background-color: #fff; + } + } + + &:hover { + background-color: #000; + } + } + } + + .plane-add { + display: flex; + align-items: center; + justify-content: center; + width: 45px; + padding: 13.5px 0; + background-color: #1C1C1C; + border-right: 1px solid #000; + transition: all .17s ease-in-out; + + span { + display: block; + width: 9px; + height: 9px; + background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center; + background-size: cover; + } + + &:hover { + background-color: #000; + } + } + } +} + +.canvas-frame { + position: relative; + height: calc(100% - 36.5px); + background-color: #fff; + + canvas { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +// sub-page +.sub-header { + position: fixed; + top: 46px; + left: 0; + width: 100%; + height: 46px; + border-bottom: 1px solid #000; + background: #2C2C2C; + z-index: 999; + + .sub-header-inner { display: flex; align-items: center; - background-color: #F8F9FA; - padding: 9px 0; - margin-right: 4px; + height: 100%; + padding: 0 100px; + + .sub-header-title-wrap { + display: flex; + align-items: center; + + .title-item { + position: relative; + padding: 0 24px; + + a { + display: flex; + align-items: center; + + .icon { + width: 22px; + height: 22px; + margin-right: 8px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + &.drawing { + background-image: url(../../public/static/images/main/drawing_icon.svg); + } + } + } + + &:after { + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 1px; + height: 16px; + background-color: #D9D9D9; + } + + &:first-child { + padding-left: 0; + } + + &:last-child { + padding-right: 0; + + &:after { + display: none; + } + } + } + } + + .sub-header-title { + font-size: 16px; + color: #fff; + font-weight: 600; + } + + .sub-header-location { + margin-left: auto; + display: flex; + align-items: center; + + .location-item { + position: relative; + display: flex; + align-items: center; + padding: 0 10px; + + span { + display: flex; + font-size: 12px; + color: #AAA; + font-weight: normal; + cursor: default; + } + + &:after { + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 4px; + height: 6px; + background: url(../../public/static/images/main/loaction_arr.svg) no-repeat center; + } + + &:first-child { + padding-left: 0; + } + + &:last-child { + padding-right: 0; + + span { + color: #fff; + } + + &:after { + display: none; + } + } + } + } + } +} + +// sub content +.sub-content { + padding-top: 46px; + + .sub-content-inner { + max-width: 1720px; + margin: 0 auto; + padding-top: 20px; + + .sub-content-box { + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } + } + } + + &.estimate { + display: flex; + flex-direction: column; + height: calc(100% - 36.5px); + overflow-y: auto; + padding-top: 0; + + .sub-content-inner { + flex: 1; + width: 100%; + } + } +} + +.sub-table-box { + padding: 20px; + border-radius: 6px; + border: 1px solid #E9EAED; + background: #FFF; + box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); + + .table-box-title-wrap { + display: flex; + align-items: center; + margin-bottom: 15px; + + .title-wrap { + display: flex; + align-items: center; + + h3 { + display: block; + font-size: 15px; + color: #101010; + font-weight: 600; + margin-right: 14px; + } + + .info-wrap { + display: flex; + align-items: center; + + li { + position: relative; + padding: 0 6px; + font-size: 12px; + color: #101010; + font-weight: normal; + + span { + font-weight: 600; + + &.red { + color: #E23D70; + } + } + + &:after { + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 1px; + height: 11px; + background-color: #D9D9D9; + } + + &:first-child { + padding-left: 0; + } + + &:last-child { + padding-right: 0; + + &::after { + display: none; + } + } + } + } + } + } + + .left-unit-box { + margin-left: auto; + display: flex; + align-items: center; + } + + .promise-gudie { + display: block; + font-size: 13px; + font-weight: 700; + color: #101010; + margin-bottom: 20px; + } + + .important { + color: #f00; + } + + .sub-table-footer { + display: flex; + align-items: center; + justify-content: center; + margin-top: 20px; + } + + .pagination-wrap { + margin-top: 24px; + } +} + +.infomation-box-wrap { + display: flex; + align-items: center; + gap: 10px; + + .sub-table-box { + flex: 1; + } + + .info-title { + font-size: 14px; + font-weight: 500; + color: #344356; + margin-bottom: 10px; + } + + .info-inner { + position: relative; + font-size: 13px; + color: #344356; + + .copy-ico { + position: absolute; + bottom: 0; + right: 0; + width: 16px; + height: 16px; + background: url(../../public/static/images/sub/copy_ico.svg) no-repeat center; + background-size: cover; + } + } +} + +// 견적서 +.estimate-list-wrap { + display: flex; + align-items: center; + margin-bottom: 10px; + + .estimate-box { + flex: 1; + display: flex; + align-items: center; + + &:last-child { + flex: none; + min-width: 220px; + } + + .estimate-tit { + width: 105px; + height: 30px; + line-height: 30px; + background-color: #F4F4F7; + border-radius: 100px; + text-align: center; + font-size: 13px; + font-weight: 500; + color: #344356; + } + + .estimate-name { + font-size: 13px; + color: #344356; + margin-left: 14px; + font-weight: 400; + } + } + + &:last-child { + margin-bottom: 0; + } +} + +// file drag box +.drag-file-box { + padding: 10px; + + .btn-area { + padding-bottom: 15px; + border-bottom: 1px solid #ECF0F4; + } + + .drag-file-area { + position: relative; + margin-top: 15px; + + p { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 13px; + color: #ccc; + font-weight: 400; + cursor: default; + } + } + + .file-list { + .file-item { + margin-bottom: 15px; + + span { + position: relative; + font-size: 13px; + color: #45576F; + font-weight: 400; + white-space: nowrap; + padding-right: 55px; + + button { + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 15px; + height: 15px; + background: url(../../public/static/images/sub/file_delete.svg) no-repeat center; + background-size: cover; + } + } + + &:last-child { + margin-bottom: 0; + } + } + } +} + +// 발전시물레이션 +.chart-wrap { + display: flex; + gap: 20px; + width: 100%; + + .sub-table-box { + height: 100%; + } + + .chart-inner { + flex: 1; + + .chart-box { + margin-bottom: 30px; + } + } + + .chart-table-wrap { + display: flex; + flex-direction: column; + flex: none; + width: 650px; + + .sub-table-box { + flex: 1; + + &:first-child { + margin-bottom: 20px; + } + } + } +} + +.chart-month-table { + table { + table-layout: fixed; + border-collapse: collapse; border: 1px solid #ECF0F4; - border-top: none; - .total-title{ - flex: 1; + border-radius: 4px; + + thead { + th { + padding: 4.5px 0; + border-bottom: 1px solid #ECF0F4; text-align: center; font-size: 13px; - color: #344356; + color: #45576F; font-weight: 500; + background-color: #F8F9FA; + } } - .total-num{ - flex: none; - width: 121px; + + tbody { + td { + font-size: 13px; + color: #45576F; text-align: center; - font-size: 15px; - color: #344356; - font-weight: 500; + padding: 4.5px 0; + } } + } +} + +.simulation-guide-wrap { + display: flex; + padding: 20px; + + .simulation-tit-wrap { + padding-right: 40px; + border-right: 1px solid #EEEEEE; + + span { + display: block; + position: relative; + padding-left: 60px; + font-size: 15px; + color: #14324F; + font-weight: 600; + + &::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + width: 40px; + height: 40px; + background: url(../../public/static/images/sub/simulation_guide.svg) no-repeat center; + background-size: cover; + } + } + } + + .simulation-guide-box { + padding-left: 40px; + + dl { + margin-bottom: 25px; + + dt { + font-size: 13px; + color: #101010; + font-weight: 600; + margin-bottom: 5px; + } + + dd { + font-size: 12px; + color: #45576F; + font-weight: 400; + line-height: 24px; + } + + &:last-child { + margin-bottom: 0; + } + } + } +} + +.module-total { + display: flex; + align-items: center; + background-color: #F8F9FA; + padding: 9px 0; + margin-right: 4px; + border: 1px solid #ECF0F4; + border-top: none; + + .total-title { + flex: 1; + text-align: center; + font-size: 13px; + color: #344356; + font-weight: 500; + } + + .total-num { + flex: none; + width: 121px; + text-align: center; + font-size: 15px; + color: #344356; + font-weight: 500; + } +} + +// 패널 배치 집계 + +.penal-wrap { + position: fixed; + top: 200px; + left: 50px; + z-index: 999999; + width: 237px; + height: 40px; + line-height: 40px; + background-color: #fff; + border: 1px solid #DFDFDF; + padding: 0 34px 0 10px; + border-radius: 2px; + box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05); + cursor: pointer; + + &::before { + content: ''; + position: absolute; + top: 50%; + right: 12px; + transform: translateY(-50%); + width: 10px; + height: 6px; + background: url(../../public/static/images/canvas/penal_arr.svg) no-repeat center; + background-size: cover; + } + + h2 { + font-size: 12px; + font-weight: 500; + color: #3D3D3D; + } + + .penal-table-wrap { + display: none; + position: absolute; + top: 100%; + left: -1px; + min-width: calc(100% + 2px); + background-color: #3D3D3D; + border: 1px solid #3D3D3D; + padding: 20px; + + .penal-table { + table-layout: fixed; + border-collapse: collapse; + + thead { + th { + text-align: center; + background-color: rgba(255, 255, 255, 0.05); + font-size: 12px; + font-weight: 500; + color: #fff; + border: 1px solid #505050; + } + } + + tbody { + td { + font-size: 12px; + color: #fff; + font-weight: 400; + text-align: center; + padding: 0 10px; + border: 1px solid #505050; + } + } + } + } + + &.act { + border: 1px solid #3D3D3D; + background-color: #3D3D3D; + + h2 { + color: #fff; + } + + &::before { + background: url(../../public/static/images/canvas/penal_arr_white.svg) no-repeat center; + } + + .penal-table-wrap { + display: block; + } + } } \ No newline at end of file diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index be8b4185..16ef74e1 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -77,6 +77,10 @@ $alert-color: #101010; width: 640px; } + &.lx-2 { + width: 740px; + } + &.lx { width: 770px; } @@ -783,6 +787,7 @@ $alert-color: #101010; display: table-cell; vertical-align: middle; padding-bottom: 14px; + text-align: left; } .eaves-keraba-td { @@ -1543,3 +1548,115 @@ $alert-color: #101010; } } } + + +// 지붕모듈선택 +.roof-module-tab { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 14px; + + .module-tab-bx { + flex: 1; + height: 34px; + line-height: 31px; + border: 1px solid #484848; + border-radius: 2px; + background-color: transparent; + font-size: 12px; + color: #AAA; + text-align: center; + cursor: default; + transition: all .15s ease-in-out; + + &.act { + background-color: #1083E3; + border: 1px solid #1083E3; + color: #fff; + font-weight: 500; + } + } + + .tab-arr { + display: block; + width: 9px; + height: 14px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + background-image: url(../../public/static/images/canvas/module_tab_arr.svg); + transition: all .15s ease-in-out; + + &.act { + background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg); + } + } +} + +.roof-module-compas { + margin-bottom: 24px; + + .compas-box-inner { + width: 280px; + height: 253px; + + .circle { + top: 86%; + + &:nth-child(1), + &:nth-child(7), + &:nth-child(13), + &:nth-child(19) { + &::before { + content: ''; + position: absolute; + top: 20px; + left: 50%; + transform: translateX(-50%); + width: 1px; + height: 6px; + background-color: #8B8B8B; + } + } + + i { + top: 32px; + } + + &.act { + i { + color: #8B8B8B; + } + } + } + } +} + +.center-wrap { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} + +.module-table-flex-wrap { + display: flex; + gap: 10px; +} + +.module-table-box { + flex: 1; + background-color: #3D3D3D; + border-radius: 2px; + + .module-table-inneer { + padding: 10px; + + .outline-form { + span { + width: auto; + } + } + } +} \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 6d899458..bd76935a 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -1,18 +1,21 @@ * { - -webkit-text-size-adjust:none; - -moz-text-size-adjust:none; - -ms-text-size-adjust:none; - text-size-adjust: none; - box-sizing: content-box + -webkit-text-size-adjust: none; + -moz-text-size-adjust: none; + -ms-text-size-adjust: none; + text-size-adjust: none; + box-sizing: content-box } + *, ::after, ::before { - box-sizing: border-box; + box-sizing: border-box; } -html, body{ - width: 100%; - height: 100%; - font-size: 16px; + +html, body { + width: 100%; + height: 100%; + font-size: 16px; } + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -22,693 +25,837 @@ b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font: inherit; - vertical-align: baseline; - font-family: 'Noto Sans JP', sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-smooth: never; + margin: 0; + padding: 0; + border: 0; + font: inherit; + vertical-align: baseline; + font-family: 'Noto Sans JP', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-smooth: never; } + /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; + display: block; } + body { - line-height: 1.4; + line-height: 1.4; +} + +body:first-of-type caption { + display: none; } -body:first-of-type caption { display:none;} ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - width: 100%; - border-collapse: separate; - border-spacing:0; - border:0 none; -} -caption, th, td { - text-align:left; - font-weight: normal; - border:0; + list-style: none; } -a { - cursor:pointer; - color:#000; +blockquote, q { + quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + width: 100%; + border-collapse: separate; + border-spacing: 0; + border: 0 none; +} + +caption, th, td { + text-align: left; + font-weight: normal; + border: 0; +} + +a { + cursor: pointer; + color: #000; +} + a, a:hover, a:active { - text-decoration:none; - -webkit-tap-highlight-color: transparent; + text-decoration: none; + -webkit-tap-highlight-color: transparent; } + /*form_style*/ input, select, textarea, button, a, label { - -webkit-tap-highlight-color:rgba(0,0,0,0); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -button,input[type=text], input[type=button] { - -webkit-appearance: none; - -webkit-border-radius: 0; - -webkit-appearance:none; - appearance: none; - border-radius: 0 + +button, input[type=text], input[type=button] { + -webkit-appearance: none; + -webkit-border-radius: 0; + -webkit-appearance: none; + appearance: none; + border-radius: 0 } + input[type=checkbox], input[type=radio] { - box-sizing: border-box; - padding: 0; + box-sizing: border-box; + padding: 0; } + input, select, button { - border:0 none; - outline:none; - margin:0; + border: 0 none; + outline: none; + margin: 0; } + select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } + select::-ms-expand { - display: none; + display: none; } + ::-webkit-input-placeholder { - line-height:1; - font-weight:300; - font-size:0.938rem; - letter-spacing:-0.6px; - color:#8b8b8b; + line-height: 1; + font-weight: 300; + font-size: 0.938rem; + letter-spacing: -0.6px; + color: #8b8b8b; } -.log-box ::-webkit-input-placeholder{ - color:#8b8b8b; + +.log-box ::-webkit-input-placeholder { + color: #8b8b8b; } -button{ - background: transparent; - font-family: 'Noto Sans JP', sans-serif; - border: none; - padding: 0; - margin: 0; - line-height: 1.4; - color: inherit; - outline: none; - cursor: pointer; + +button { + background: transparent; + font-family: 'Noto Sans JP', sans-serif; + border: none; + padding: 0; + margin: 0; + line-height: 1.4; + color: inherit; + outline: none; + cursor: pointer; } -.pre{ - font-family: 'Pretendard', sans-serif !important; + +.pre { + font-family: 'Pretendard', sans-serif !important; } // margin -.mt5{margin-top: 5px !important;} -.mt10{margin-top: 10px !important;} -.mt15{margin-top: 15px !important;} -.mb5{margin-bottom: 5px !important;} -.mb10{margin-bottom: 10px !important;} -.mb15{margin-bottom: 15px !important;} -.mr5{margin-right: 5px !important;} -.mr10{margin-right: 10px !important;} -.mr15{margin-right: 15px !important;} -.ml5{margin-left: 5px !important;} -.ml10{margin-left: 10px !important;} -.ml15{margin-left: 15px !important;} - -// button -.btn-frame{ - display: inline-block; - padding: 0 7px; - height: 34px; - line-height: 34px; - border-radius: 2px; - color: #fff; - font-size: 12px; - font-weight: 400; - border: 1px solid #000; - text-align: center; - font-family: 'Pretendard', sans-serif; - transition: all .17s ease-in-out; - cursor: pointer; - &.block{ - width: 100%; - } - &.small{ - font-family: 'Noto Sans JP', sans-serif; - height: 30px; - line-height: 30px; - font-size: 13px; - } - - &.deepgray{ - background-color: #2C2C2C; - border: 1px solid #484848; - } - &.gray{ - background-color: #3C3C3C; - border: 1px solid #545454; - } - &.dark{ - background-color: #1C1C1C; - border: 1px solid #484848; - } - &.modal{ - font-family: 'Noto Sans JP', sans-serif; - background-color: #272727; - border: 1px solid #484848; - color: #aaa; - &:hover{ - background-color: #1083E3; - border: 1px solid #1083E3; - color: #fff; - font-weight: 500; - } - } - &.sub-tab{ - height: 30px; - padding: 0 10px; - line-height: 28px; - font-family: 'Noto Sans JP', sans-serif; - background-color: #2D2D2D; - border: 1px solid #393939; - color: #aaa; - &.act, - &:hover{ - background-color: #414E6C; - border: 1px solid #414E6C; - color: #fff; - font-weight: 500; - } - } - &:hover, - &.act{ - background-color: #1083E3; - border: 1px solid #1083E3; - color: #fff; - font-weight: 500; - } - &.block{ - display: block; - width: 100%; - } - &.ico-flx{ - display: flex; - align-items: center; - .ico{ - margin-right: 10px; - } - &:hover, - &.act{ - font-weight: 400; - } - } +.mt5 { + margin-top: 5px !important; } -.btn-origin{ - display: inline-block; +.mt10 { + margin-top: 10px !important; +} + +.mt15 { + margin-top: 15px !important; +} + +.mb5 { + margin-bottom: 5px !important; +} + +.mb10 { + margin-bottom: 10px !important; +} + +.mb15 { + margin-bottom: 15px !important; +} + +.mr5 { + margin-right: 5px !important; +} + +.mr10 { + margin-right: 10px !important; +} + +.mr15 { + margin-right: 15px !important; +} + +.ml5 { + margin-left: 5px !important; +} + +.ml10 { + margin-left: 10px !important; +} + +.ml15 { + margin-left: 15px !important; +} + +// align +.l { + text-align: left !important; +} + +.r { + text-align: right !important; +} + +.c { + text-align: center !important; +} + + +// button +.btn-frame { + display: inline-block; + padding: 0 7px; + height: 34px; + line-height: 34px; + border-radius: 2px; + color: #fff; + font-size: 12px; + font-weight: 400; + border: 1px solid #000; + text-align: center; + font-family: 'Pretendard', sans-serif; + transition: all .17s ease-in-out; + cursor: pointer; + + &.block { + width: 100%; + } + + &.small { + font-family: 'Noto Sans JP', sans-serif; height: 30px; - padding: 0 14px; - border-radius: 2px; - background-color: #101010; - color: #fff; + line-height: 30px; font-size: 13px; - font-weight: 400; - transition: all .15s ease-in-out; - &.navy{ - background-color: #304961; - &:hover{ - background-color: #1083E3; - } + } + + &.deepgray { + background-color: #2C2C2C; + border: 1px solid #484848; + } + + &.gray { + background-color: #3C3C3C; + border: 1px solid #545454; + } + + &.dark { + background-color: #1C1C1C; + border: 1px solid #484848; + } + + &.modal { + font-family: 'Noto Sans JP', sans-serif; + background-color: #272727; + border: 1px solid #484848; + color: #aaa; + + &:hover { + background-color: #1083E3; + border: 1px solid #1083E3; + color: #fff; + font-weight: 500; } - &.grey{ - background-color: #94A0AD; - &:hover{ - background-color: #607F9A; - } + } + + &.sub-tab { + height: 30px; + padding: 0 10px; + line-height: 28px; + font-family: 'Noto Sans JP', sans-serif; + background-color: #2D2D2D; + border: 1px solid #393939; + color: #aaa; + + &.act, + &:hover { + background-color: #414E6C; + border: 1px solid #414E6C; + color: #fff; + font-weight: 500; } + } + + &:hover, + &.act { + background-color: #1083E3; + border: 1px solid #1083E3; + color: #fff; + font-weight: 500; + } + + &.block { + display: block; + width: 100%; + } + + &.ico-flx { + display: flex; + align-items: center; + + .ico { + margin-right: 10px; + } + + &:hover, + &.act { + font-weight: 400; + } + } +} + +.btn-origin { + display: inline-block; + height: 30px; + padding: 0 14px; + border-radius: 2px; + background-color: #101010; + color: #fff; + font-size: 13px; + font-weight: 400; + transition: all .15s ease-in-out; + + &.navy { + background-color: #304961; + + &:hover { + background-color: #1083E3; + } + } + + &.grey { + background-color: #94A0AD; + + &:hover { + background-color: #607F9A; + } + } } // select -.sort-select{ - position: relative; - display: inline-block; - min-width: 100px; - height: 30px; - line-height: 30px; - padding: 0 25px 0 10px; +.sort-select { + position: relative; + display: inline-block; + min-width: 100px; + height: 30px; + line-height: 30px; + padding: 0 25px 0 10px; + background-color: #373737; + border: 1px solid #3F3F3F; + border-radius: 2px; + border-top-left-radius: 2px; + color: #fff; + cursor: pointer; + + p { + font-size: 13px; + color: #fff; + height: 100%; + } + + .select-item-wrap { + position: absolute; + top: 100%; + left: -1px; + clip-path: inset(0 0 100% 0); + width: calc(100% + 2px); + padding: 8px 0; + max-height: 100px; + overflow-y: auto; background-color: #373737; border: 1px solid #3F3F3F; border-radius: 2px; - border-top-left-radius: 2px; - color: #fff; - cursor: pointer; - p{ - font-size: 13px; + transition: all 0.17s ease-in-out; + visibility: hidden; + z-index: 999; + + .select-item { + display: flex; + align-items: center; + padding: 8px 20px; + line-height: 1.4; + transition: all .17s ease-in-out; + + button { + font-size: 12px; color: #fff; - height: 100%; + line-height: 1.4; + } + + &:hover { + background-color: #2C2C2C; + } } - .select-item-wrap{ - position: absolute; - top: 100%; - left: -1px; - clip-path:inset(0 0 100% 0); - width: calc(100% + 2px); - padding: 8px 0; - max-height: 100px; - overflow-y: auto; - background-color: #373737; - border: 1px solid #3F3F3F; - border-radius: 2px; - transition: all 0.17s ease-in-out; - visibility: hidden; - z-index: 999; - .select-item{ - display: flex; - align-items: center; - padding: 8px 20px; - line-height: 1.4; - transition: all .17s ease-in-out; - button{ - font-size: 12px; - color: #fff; - line-height: 1.4; - } - &:hover{ - background-color: #2C2C2C; - } - } - &::-webkit-scrollbar { - width: 2px; - background-color: transparent; - - } - &::-webkit-scrollbar-thumb { - background-color: #5a5a5a; - border-radius: 10px; - } - &::-webkit-scrollbar-track { - background-color: transparent; - } + + &::-webkit-scrollbar { + width: 2px; + background-color: transparent; + } - &::after{ - content: ''; - position: absolute; - top: 50%; - right: 7px; - transform: translateY(-50%); - width: 10px; - height: 6px; - background: url(/static/images/common/select-arr.svg) no-repeat center; - background-size: cover; - transition: all .17s ease-in-out; + + &::-webkit-scrollbar-thumb { + background-color: #5a5a5a; + border-radius: 10px; } - &.active{ - .select-item-wrap{ - clip-path: inset(0 0 0 0); - visibility: visible; - } - &:after{ - transform: translateY(-50%) rotate(-180deg); - } + + &::-webkit-scrollbar-track { + background-color: transparent; } + } + + &::after { + content: ''; + position: absolute; + top: 50%; + right: 7px; + transform: translateY(-50%); + width: 10px; + height: 6px; + background: url(/static/images/common/select-arr.svg) no-repeat center; + background-size: cover; + transition: all .17s ease-in-out; + } + + &.active { + .select-item-wrap { + clip-path: inset(0 0 0 0); + visibility: visible; + } + + &:after { + transform: translateY(-50%) rotate(-180deg); + } + } } -.select-light{ - position: relative; - display: block; - width: 100%; - height: 30px; - background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat; - background-size: 10px 6px; - border: 1px solid #eee; - padding: 0 30px 0 10px; - font-size: 13px; - color: #45576F; - font-family: 'Noto Sans JP', sans-serif; - cursor: pointer; - &:disabled{ - opacity: 1; - background-color: #FAFAFA; - color: #999; - cursor: default; - } - &.black{ - color: #101010; - } - &.dark{ - background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat; - color: #898989; - font-size: 12px; - border-radius: 2px; - border: none; - } +.select-light { + position: relative; + display: block; + width: 100%; + height: 30px; + background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat; + background-size: 10px 6px; + border: 1px solid #eee; + padding: 0 30px 0 10px; + font-size: 13px; + color: #45576F; + font-family: 'Noto Sans JP', sans-serif; + cursor: pointer; + + &:disabled { + opacity: 1; + background-color: #FAFAFA; + color: #999; + cursor: default; + } + + &.black { + color: #101010; + } + + &.dark { + background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat; + color: #898989; + font-size: 12px; + border-radius: 2px; + border: none; + } } // input -.form-input{ - label{ - display: block; - color: #aaa; - font-size: 12px; - font-weight: 500; - margin-bottom: 10px; - } -} -input[type=number], -input[type=text]{ - &.input-origin{ - display: inline-block; - height: 30px; - line-height: 30px; - border-radius: 2px; - background-color: #323234; - color: #fff; - font-size: 12px; - font-weight: 500; - font-family: 'Pretendard', sans-serif; - padding: 0 10px; - letter-spacing: 0px; - text-align: right; - &::placeholder{ - opacity: 1; - font-size: 12px; - letter-spacing: 0px; - } - &.block{ - width: 100%; - } - &:read-only{ - color: #AAA; - } - } - &.input-light{ - display: block; - width: 100%; - height: 30px; - padding: 0 10px; - border: 1px solid #eee; - border-radius: 2px; - background-color: #fff; - font-family: 'Noto Sans JP', sans-serif; - font-size: 13px; - color: #45576F; - font-weight: normal; - transition: border-color .17s ease-in-out; - text-align: left; - &:read-only{ - background-color: #FAFAFA; - color: #999999; - } - } +.form-input { + label { + display: block; + color: #aaa; + font-size: 12px; + font-weight: 500; + margin-bottom: 10px; + } } +input[type=number], +input[type=text] { + &.input-origin { + display: inline-block; + height: 30px; + line-height: 30px; + border-radius: 2px; + background-color: #323234; + color: #fff; + font-size: 12px; + font-weight: 500; + font-family: 'Pretendard', sans-serif; + padding: 0 10px; + letter-spacing: 0px; + text-align: right; + + &::placeholder { + opacity: 1; + font-size: 12px; + letter-spacing: 0px; + } + + &.block { + width: 100%; + } + + &:read-only { + color: #AAA; + } + + &.plane { + font-family: 'Noto Sans JP', sans-serif; + border: 1px solid #525252; + background-color: transparent; + } + } + + &.input-light { + display: block; + width: 100%; + height: 30px; + padding: 0 10px; + border: 1px solid #eee; + border-radius: 2px; + background-color: #fff; + font-family: 'Noto Sans JP', sans-serif; + font-size: 13px; + color: #45576F; + font-weight: normal; + transition: border-color .17s ease-in-out; + text-align: left; + + &:read-only { + background-color: #FAFAFA; + color: #999999; + } + } +} // check-btn -.check-btn{ - display: flex; - align-items: center; - height: 30px; - background-color: #3A3A3A; - border-radius: 3px; - transition: all .17s ease-in-out; - .check-area{ - flex: none; - width: 30px; - height: 100%; - border-right: 1px solid #272727; - background: url(../../public/static/images/canvas/check-grey.svg)no-repeat center; - background-size: 11px 9px; +.check-btn { + display: flex; + align-items: center; + height: 30px; + background-color: #3A3A3A; + border-radius: 3px; + transition: all .17s ease-in-out; + + .check-area { + flex: none; + width: 30px; + height: 100%; + border-right: 1px solid #272727; + background: url(../../public/static/images/canvas/check-grey.svg) no-repeat center; + background-size: 11px 9px; + } + + .title-area { + padding: 0 10px; + font-size: 12px; + color: #898989; + font-weight: 400; + } + + &.block { + width: 100%; + } + + &:hover, + &.act { + background-color: #fff; + + .check-area { + border-right: 1px solid #101010; + background: url(../../public/static/images/canvas/check-black.svg) no-repeat center; } - .title-area{ - padding: 0 10px; - font-size: 12px; - color: #898989; - font-weight: 400; - } - &.block{ - width: 100%; - } - &:hover, - &.act{ - background-color: #fff; - .check-area{ - border-right: 1px solid #101010; - background: url(../../public/static/images/canvas/check-black.svg)no-repeat center; - } - .title-area{ - color: #101010; - font-weight: 600; - } + + .title-area { + color: #101010; + font-weight: 600; } + } } // arr-btn -.arr-btn{ - display: block; - height: 30px; - border-radius: 3px; - background-color: #3A3A3A; - padding: 0 11px; - text-align: left; - transition: all .17s ease-in-out; - span{ - position: relative; - font-size: 12px; - color: #898989; - font-weight: 400; - padding-right: 15px; - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 5px; - height: 8px; - background: url(../../public/static/images/canvas/arr_btn_ico.svg)no-repeat center; - } +.arr-btn { + display: block; + height: 30px; + border-radius: 3px; + background-color: #3A3A3A; + padding: 0 11px; + text-align: left; + transition: all .17s ease-in-out; + + span { + position: relative; + font-size: 12px; + color: #898989; + font-weight: 400; + padding-right: 15px; + + &:after { + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 5px; + height: 8px; + background: url(../../public/static/images/canvas/arr_btn_ico.svg) no-repeat center; } + } + + &:hover, + &.act { + background-color: #fff; + + span { + color: #101010; + font-weight: 500; + + &:after { + background: url(../../public/static/images/canvas/arr_btn_ico_black.svg) no-repeat center; + } + } + } + + &.dark { + text-align: center; + background-color: #272727; + border: 1px solid #484848; + + span { + color: #Fff; + + &:after { + background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center; + } + } + &:hover, - &.act{ - background-color: #fff; - span{ - color: #101010; - font-weight: 500; - &:after{ - background: url(../../public/static/images/canvas/arr_btn_ico_black.svg)no-repeat center; - } - } - } - &.dark{ - text-align: center; - background-color: #272727; - border: 1px solid #484848; - span{ - color: #Fff; - &:after{ - background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center; - } - } - &:hover, - &.act{ - background-color: #1083E3; - border: 1px solid #1083E3; - } + &.act { + background-color: #1083E3; + border: 1px solid #1083E3; } + } } // radio .d-check-radio, -.d-check-box{ - line-height: 1.1; +.d-check-box { + line-height: 1.1; + cursor: pointer; + + input[type=checkbox], + input[type=radio] { + position: static; + margin-left: 0; cursor: pointer; - input[type=checkbox], - input[type=radio]{ - position: static; - margin-left: 0; - cursor: pointer; - opacity: 0; - z-index: 1; - flex: 0 0 auto; + opacity: 0; + z-index: 1; + flex: 0 0 auto; + } + + label { + position: relative; + padding-left: 10px; + margin-bottom: 0; + word-break: break-all; + line-height: 1.2; + display: inline; + vertical-align: top; + color: #fff; + font-size: 13px; + font-weight: 400; + cursor: pointer; + } + + &.light { + label { + color: #45576F; } - label{ - position: relative; - padding-left: 10px; - margin-bottom: 0; - word-break: break-all; - line-height: 1.2; - display: inline; - vertical-align: top; - color: #fff; - font-size: 13px; - font-weight: 400; - cursor: pointer; - } - &.light{ - label{ - color: #45576F; - } - } - &.no-text{ - label{ - padding-left: 0; - } + } + + &.no-text { + label { + padding-left: 0; } + } } .d-check-radio { - label{ - &::before{ - cursor: pointer; - content: ""; - display: inline-block; - position: absolute; - width: 17px; - height: 17px; - top:2px; - left: 0; - margin-left: -12px; - border: 1px solid #999999; - border-radius: 100%; - background-color: transparent; - text-align:center; - font-size:13px; - line-height:1.4; - transition: border 0.15s ease-in-out, color 0.15s ease-in-out; - } - &::after{ - cursor: pointer; - content: ""; - display: inline-block; - position: absolute; - width: 9px; - height: 9px; - top:6px; - left: 4px; - margin-left: -12px; - border: none; - border-radius: 100%; - background-color: #fff; - text-align:center; - font-size:13px; - line-height:1.4; - opacity: 0; - visibility: hidden; - transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out; - } + label { + &::before { + cursor: pointer; + content: ""; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + top: 2px; + left: 0; + margin-left: -12px; + border: 1px solid #999999; + border-radius: 100%; + background-color: transparent; + text-align: center; + font-size: 13px; + line-height: 1.4; + transition: border 0.15s ease-in-out, color 0.15s ease-in-out; } - &.light{ - label{ - &:before{ - border-color: #D6D6D7; - } - &:after{ - background-color: #697C8F; - } - } + + &::after { + cursor: pointer; + content: ""; + display: inline-block; + position: absolute; + width: 9px; + height: 9px; + top: 6px; + left: 4px; + margin-left: -12px; + border: none; + border-radius: 100%; + background-color: #fff; + text-align: center; + font-size: 13px; + line-height: 1.4; + opacity: 0; + visibility: hidden; + transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out; } - input[type=radio]:checked + label::after{ - opacity: 1; - visibility: visible; + } + + &.light { + label { + &:before { + border-color: #D6D6D7; + } + + &:after { + background-color: #697C8F; + } } - &.pop{ - label{ - font-size: 12px; - &:before{ - width: 16px; - height: 16px; - border-color: #fff; - } - &:after{ - width: 8px; - height: 8px; - background-color: #fff; - } - } + } + + input[type=radio]:checked + label::after { + opacity: 1; + visibility: visible; + } + + &.pop { + label { + font-size: 12px; + + &:before { + width: 16px; + height: 16px; + border-color: #fff; + } + + &:after { + width: 8px; + height: 8px; + background-color: #fff; + } } + } } // check-box -.d-check-box{ - label{ - &::before{ - cursor: pointer; - content: ""; - display: inline-block; - position: absolute; - width: 17px; - height: 17px; - top: 2px; - left: 0; - margin-left: -12px; - border: 1px solid #D6D6D7; - background-color: transparent; - transition: border 0.15s ease-in-out, color 0.15s ease-in-out; - } - &:after{ - cursor: pointer; - content: ""; - display: inline-block; - position: absolute; - width: 16px; - height: 16px; - top:0; - left: 0; - margin-left: -.8rem; - transition: border 0.05s ease-in-out, color 0.05s ease-in-out; - } +.d-check-box { + label { + &::before { + cursor: pointer; + content: ""; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + top: 2px; + left: 0; + margin-left: -12px; + border: 1px solid #D6D6D7; + background-color: transparent; + transition: border 0.15s ease-in-out, color 0.15s ease-in-out; } - input[type=checkbox]:checked + label::after{ - content: ""; - display: inline-block; - position: absolute; - top: 1px; - left: -1px; - width: 5px; - height: 8px; - border: 2px solid #697C8F; - border-left: none; - border-top: none; - transform: translate(7.75px,4.5px) rotate(45deg); - -ms-transform: translate(7.75px,4.5px) rotate(45deg); + + &:after { + cursor: pointer; + content: ""; + display: inline-block; + position: absolute; + width: 16px; + height: 16px; + top: 0; + left: 0; + margin-left: -.8rem; + transition: border 0.05s ease-in-out, color 0.05s ease-in-out; } - &.pop{ - input[type=checkbox]:checked + label::after{ - border-color: #fff; - } + } + + input[type=checkbox]:checked + label::after { + content: ""; + display: inline-block; + position: absolute; + top: 1px; + left: -1px; + width: 5px; + height: 8px; + border: 2px solid #697C8F; + border-left: none; + border-top: none; + transform: translate(7.75px, 4.5px) rotate(45deg); + -ms-transform: translate(7.75px, 4.5px) rotate(45deg); + } + + &.pop { + input[type=checkbox]:checked + label::after { + border-color: #fff; } + } } // date-picker -.date-picker{ - svg{display: none;} - .react-datepicker-wrapper{ - width: 100%; - } - input[type=text]{ - display: block; - width: 100%; - height: 30px; - padding: 0 34px 0 10px; - border-radius: 2px; - border: 1px solid #eee; - font-size: 13px; - color: #45576F; - font-weight: normal; - font-family: 'Noto Sans JP', sans-serif; - background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat; - background-size: 14px 15px; - cursor: pointer; - } +.date-picker { + svg { + display: none; + } + + .react-datepicker-wrapper { + width: 100%; + } + + input[type=text] { + display: block; + width: 100%; + height: 30px; + padding: 0 34px 0 10px; + border-radius: 2px; + border: 1px solid #eee; + font-size: 13px; + color: #45576F; + font-weight: normal; + font-family: 'Noto Sans JP', sans-serif; + background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat; + background-size: 14px 15px; + cursor: pointer; + } } \ No newline at end of file diff --git a/src/styles/_table.scss b/src/styles/_table.scss index d3c207a7..ceaea36b 100644 --- a/src/styles/_table.scss +++ b/src/styles/_table.scss @@ -1,177 +1,215 @@ -@mixin flexbox(){ - display: flex; - align-items: center; +@mixin flexbox() { + display: flex; + align-items: center; } -table{ - .overflow-lab{ - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - .al-l{ - text-align: left !important; - } +table { + .overflow-lab { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + .al-l { + text-align: left !important; + } } -.common-table{ - table{ - table-layout: fixed; +.common-table { + table { + table-layout: fixed; + border: 1px solid #ECF0F4; + border-radius: 3px; + border-collapse: collapse; + + tbody { + th { + font-size: 13px; + font-weight: 500; + color: #344356; + padding: 14px 12px; border: 1px solid #ECF0F4; - border-radius: 3px; - border-collapse:collapse; - tbody{ - th{ - font-size: 13px; - font-weight: 500; - color: #344356; - padding: 14px 12px; - border: 1px solid #ECF0F4 ; - background-color: #F7F9FA; - vertical-align: middle; - } - td{ - padding: 9px; - border: 1px solid #ECF0F4 ; - font-size: 13px; - font-weight: 400; - color: #45576F; - vertical-align: middle; - .radio-wrap{ - flex: none; - @include flexbox; - } - .form-flex-wrap{ - @include flexbox; - } - .date-picker-wrap{ - width: 100%; - @include flexbox; - span{ - margin: 0 4px; - } - } - } + background-color: #F7F9FA; + vertical-align: middle; + } + + td { + padding: 9px; + border: 1px solid #ECF0F4; + font-size: 13px; + font-weight: 400; + color: #45576F; + vertical-align: middle; + + .radio-wrap { + flex: none; + @include flexbox; } + + .form-flex-wrap { + @include flexbox; + } + + .date-picker-wrap { + width: 100%; + @include flexbox; + + span { + margin: 0 4px; + } + } + } } - &.bt-able{ - margin-bottom: 30px; - } + } + + &.bt-able { + margin-bottom: 30px; + } } -.infomation-table{ - table{ - border-top: 1px solid #DEE3EA; - border-bottom: 1px solid #DEE3EA; - border-collapse:collapse; - tbody{ - tr{ - th{ - font-size: 13px; - color: #344356; - font-weight: 500; - padding: 18px 0; - border-bottom: 1px solid #F4F4F7; - .title{ - margin-right: 8px; - } - } - td{ - padding: 0 0 0 15px; - border-bottom: 1px solid #F4F4F7; - - .guide{ - font-size: 13px; - color: #697C8F; - font-weight: normal; - margin-left: 15px; - } - span{ - font-size: 13px; - color: #697C8F; - font-weight: normal; - } - } - &:last-child{ - th,td{border-bottom: none;} - } - } +.infomation-table { + table { + border-top: 1px solid #DEE3EA; + border-bottom: 1px solid #DEE3EA; + border-collapse: collapse; + + tbody { + tr { + th { + font-size: 13px; + color: #344356; + font-weight: 500; + padding: 18px 0; + border-bottom: 1px solid #F4F4F7; + + .title { + margin-right: 8px; + } } - .flx-box{ - @include flexbox; + + td { + padding: 0 0 0 15px; + border-bottom: 1px solid #F4F4F7; + + .guide { + font-size: 13px; + color: #697C8F; + font-weight: normal; + margin-left: 15px; + } + + span { + font-size: 13px; + color: #697C8F; + font-weight: normal; + } } + + &:last-child { + th, td { + border-bottom: none; + } + } + } } - .tooltips{ - display: block; - width: 14px; - height: 14px; - display: inline-block; - background: url(../../public/static/images/sub/tooltips.svg)no-repeat center; - background-size: cover; - cursor: pointer; + + .flx-box { + @include flexbox; } + } + + .tooltips { + display: block; + width: 14px; + height: 14px; + display: inline-block; + background: url(../../public/static/images/sub/tooltips.svg) no-repeat center; + background-size: cover; + cursor: pointer; + } } -.module-table{ - table{ +.module-table { + table { + table-layout: fixed; + border-collapse: collapse; + + thead { + display: table; + table-layout: fixed; + width: 100%; + + th { + padding: 13px 0; + font-size: 13px; + color: #344356; + font-weight: 500; + border-bottom: 2px solid #E0E5EB; + text-align: center; + } + } + + tbody { + display: block; + overflow-y: auto; + + tr { + display: table; table-layout: fixed; - border-collapse: collapse; - thead{ - display: table; - table-layout: fixed; - width: 100%; - th{ - padding: 13px 0; - font-size: 13px; - color: #344356; - font-weight: 500; - border-bottom: 2px solid #E0E5EB; - text-align: center; - } - } - tbody{ - display: block; - overflow-y: auto; - tr{ - display: table; - table-layout: fixed; - width: 100%; - border: 1px solid #ECF0F4; - td{ - padding: 10px 0px; - font-size: 13px; - color: #45576F; - font-weight: 400; - text-align: center; - } - } - &::-webkit-scrollbar { - width: 4px; - background-color: transparent; - } - &::-webkit-scrollbar-thumb { - background-color: #C1CCD7; - } - &::-webkit-scrollbar-track { - background-color: transparent; - } - } - &.small{ - tbody{height: 120px;} - } - &.big{ - td, - th{ - &:nth-child(2){ - width: 121px; - } - } - tbody{ - height: 160px; - td{ - padding: 10px 20px; - } - } + width: 100%; + border: 1px solid #ECF0F4; + + td { + padding: 10px 0px; + font-size: 13px; + color: #45576F; + font-weight: 400; + text-align: center; } + } + + &::-webkit-scrollbar { + width: 4px; + background-color: transparent; + } + + &::-webkit-scrollbar-thumb { + background-color: #C1CCD7; + } + + &::-webkit-scrollbar-track { + background-color: transparent; + } } + + &.small { + tbody { + height: 120px; + } + } + + &.big { + td, + th { + &:nth-child(2) { + width: 121px; + } + } + + tbody { + height: 160px; + + td { + padding: 10px 20px; + } + } + } + } +} + +.roof-module-table { + table { + table-layout: fixed; + border-collapse: collapse; + } } \ No newline at end of file From 7ddcc91d1ff3b21fa69397158400b8eeb6d03f26 Mon Sep 17 00:00:00 2001 From: minsik Date: Mon, 7 Oct 2024 15:18:19 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/_contents.scss | 1892 ++++++++++++++++--------------------- src/styles/_modal.scss | 1 - src/styles/_reset.scss | 1330 ++++++++++++-------------- src/styles/_table.scss | 396 ++++---- 4 files changed, 1629 insertions(+), 1990 deletions(-) diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 7a357be7..034955f5 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -1,1140 +1,926 @@ // CanvasPage -.canvas-wrap { - height: calc(100vh - 47px); - display: flex; - flex-direction: column; - - .canvas-content { - flex: 1 1 auto; - - .canvas-layout { - height: 100%; - } - } - - &.sub-wrap { - overflow: hidden; - - .canvas-content { - height: calc(100% - 47px); - } - } -} - -// CanvasMenu -.canvas-menu-wrap { - position: relative; - display: block; - width: 100%; - padding-bottom: 0; - background-color: #383838; - transition: padding .17s ease-in-out; - - .canvas-menu-inner { - position: relative; +.canvas-wrap{ + height: calc(100vh - 47px); display: flex; - align-items: center; - padding: 0 40px 0 20px; - background-color: #2C2C2C; - z-index: 999; - - .canvas-menu-list { - display: flex; - align-items: center; - height: 100%; - - .canvas-menu-item { - display: flex; - align-items: center; - height: 100%; - - button { - display: flex; - align-items: center; - font-size: 12px; - height: 100%; - color: #fff; - font-weight: 600; - padding: 15px 20px; - opacity: 0.55; - transition: all .17s ease-in-out; - - .menu-icon { - display: block; - width: 16px; - height: 16px; - background-repeat: no-repeat; - background-position: center; - background-size: cover; - margin-right: 10px; - - &.con00 { - background-image: url(/static/images/canvas/menu_icon00.svg); - } - - &.con01 { - background-image: url(/static/images/canvas/menu_icon01.svg); - } - - &.con02 { - background-image: url(/static/images/canvas/menu_icon02.svg); - } - - &.con03 { - background-image: url(/static/images/canvas/menu_icon03.svg); - } - - &.con04 { - background-image: url(/static/images/canvas/menu_icon04.svg); - } - - &.con05 { - background-image: url(/static/images/canvas/menu_icon05.svg); - } - - &.con06 { - background-image: url(/static/images/canvas/menu_icon06.svg); - } - } + flex-direction: column; + .canvas-content{ + flex: 1 1 auto; + .canvas-layout{ + height: 100%; } - - &.active { - background-color: #383838; - - button { - opacity: 1; - } - } - } } - - .canvas-side-btn-wrap { - display: flex; - align-items: center; - margin-left: auto; - - .select-box { - width: 124px; - margin-right: 5px; - - > div { - width: 100%; - } - } - - .btn-from { - display: flex; - align-items: center; - gap: 5px; - - button { - display: block; - width: 30px; - height: 30px; - border-radius: 2px; - background-color: #3D3D3D; - background-position: center; - background-repeat: no-repeat; - background-size: 15px 15px; - transition: all .17s ease-in-out; - - &.btn01 { - background-image: url(../../public/static/images/canvas/side_icon03.svg); - } - - &.btn02 { - background-image: url(../../public/static/images/canvas/side_icon02.svg); - } - - &.btn03 { - background-image: url(../../public/static/images/canvas/side_icon01.svg); - } - - &.btn04 { - background-image: url(../../public/static/images/canvas/side_icon04.svg); - } - - &.btn05 { - background-image: url(../../public/static/images/canvas/side_icon05.svg); - } - - &.btn06 { - background-image: url(../../public/static/images/canvas/side_icon06.svg); - } - - &.btn07 { - background-image: url(../../public/static/images/canvas/side_icon07.svg); - } - - &.btn08 { - background-image: url(../../public/static/images/canvas/side_icon08.svg); - } - - &.btn09 { - background-image: url(../../public/static/images/canvas/side_icon09.svg); - } - - &:hover { - background-color: #1083E3; - } - - &.active { - background-color: #1083E3; - } - } - } - - .ico-btn-from { - display: flex; - align-items: center; - gap: 5px; - - button { - .ico { - display: block; - width: 15px; - height: 15px; - background-repeat: no-repeat; - background-position: center; - background-size: contain; - - &.ico01 { - background-image: url(../../public/static/images/canvas/ico-flx01.svg); - } - - &.ico02 { - background-image: url(../../public/static/images/canvas/ico-flx02.svg); - } - - &.ico03 { - background-image: url(../../public/static/images/canvas/ico-flx03.svg); - } - - &.ico04 { - background-image: url(../../public/static/images/canvas/ico-flx04.svg); - } - } - - .name { - font-size: 12px; - color: #fff; - } - } - - &.form06 { - .name { - font-size: 13px; - } - } - } - - .vertical-horizontal { - display: flex; - min-width: 170px; - height: 28px; - margin: 0 5px; - border-radius: 2px; - background: #373737; - line-height: 28px; + &.sub-wrap{ overflow: hidden; - - span { - padding: 0 10px; - font-size: 13px; - color: #fff; + .canvas-content{ + height: calc(100% - 47px); } - - button { - margin-left: auto; - height: 100%; - background-color: #4B4B4B; - font-size: 13px; - font-weight: 400; - color: #fff; - padding: 0 7.5px; - transition: all .17s ease-in-out; - } - - &.on { - button { - background-color: #1083E3; - } - } - } - - .size-control { - display: flex; - align-items: center; - justify-content: center; - gap: 10px; - background-color: #3D3D3D; - border-radius: 2px; - width: 100px; - height: 30px; - margin: 0 5px; - - span { - font-size: 13px; - color: #fff; - } - - .control-btn { - display: block; - width: 12px; - height: 12px; - background-repeat: no-repeat; - background-size: cover; - background-position: center; - - &.minus { - background-image: url(../../public/static/images/canvas/minus.svg); - } - - &.plus { - background-image: url(../../public/static/images/canvas/plus.svg); - } - } - } } - } - - .canvas-depth2-wrap { - position: absolute; - top: -100%; - left: 0; - background-color: #383838; +} +// CanvasMenu +.canvas-menu-wrap{ + position: relative; + display: block; width: 100%; - height: 50px; - transition: all .17s ease-in-out; - - .canvas-depth2-inner { - display: flex; - align-items: center; - padding: 0 40px; - height: 100%; - - .canvas-depth2-list { + padding-bottom: 0; + background-color: #383838; + transition: padding .17s ease-in-out; + .canvas-menu-inner{ + position: relative; display: flex; align-items: center; - height: 100%; - - .canvas-depth2-item { - display: flex; - align-items: center; - margin-right: 26px; - height: 100%; - - button { - position: relative; - opacity: 0.55; - color: #fff; - font-size: 12px; - font-weight: normal; + padding: 0 40px 0 20px; + background-color: #2C2C2C; + z-index: 999; + .canvas-menu-list{ + display: flex; + align-items: center; height: 100%; - padding-right: 12px; - } - - &.active { - button { - opacity: 1; - font-weight: 600; - - &:after { - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 5px; - height: 8px; - background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; - } + .canvas-menu-item{ + display: flex; + align-items: center; + height: 100%; + button{ + display: flex; + align-items: center; + font-size: 12px; + height: 100%; + color: #fff; + font-weight: 600; + padding: 15px 20px; + opacity: 0.55; + transition: all .17s ease-in-out; + .menu-icon{ + display: block; + width: 16px; + height: 16px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + margin-right: 10px; + &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);} + &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);} + &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);} + &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);} + &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);} + &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);} + &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);} + } + } + &.active{ + background-color: #383838; + button{ + opacity: 1; + } + } } - } } - } - - .canvas-depth2-btn-list { - display: flex; - align-items: center; - margin-left: auto; - height: 100%; - - .depth2-btn-box { - display: flex; - align-items: center; - margin-right: 34px; - height: 100%; - transition: all .17s ease-in-out; - - button { - position: relative; - font-size: 12px; - font-weight: 400; + .canvas-side-btn-wrap{ + display: flex; + align-items: center; + margin-left: auto; + .select-box{ + width: 124px; + margin-right: 5px; + > div{ + width: 100%; + } + } + .btn-from{ + display: flex; + align-items: center; + gap: 5px; + button{ + display: block; + width: 30px; + height: 30px; + border-radius: 2px; + background-color: #3D3D3D; + background-position: center; + background-repeat: no-repeat; + background-size: 15px 15px; + transition: all .17s ease-in-out; + &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);} + &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);} + &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);} + &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);} + &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);} + &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);} + &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);} + &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);} + &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);} + &:hover{ + background-color: #1083E3; + } + &.active{ + background-color: #1083E3; + } + } + } + .ico-btn-from{ + display: flex; + align-items: center; + gap: 5px; + button{ + .ico{ + display: block; + width: 15px; + height: 15px; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + &.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);} + &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);} + &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);} + &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);} + } + .name{ + font-size: 12px; + color: #fff; + } + } + &.form06{ + .name{ + font-size: 13px; + } + } + } + .vertical-horizontal{ + display: flex; + min-width: 170px; + height: 28px; + margin: 0 5px; + border-radius: 2px; + background: #373737; + line-height: 28px; + overflow: hidden; + span{ + padding: 0 10px; + font-size: 13px; + color: #fff; + } + button{ + margin-left: auto; + height: 100%; + background-color: #4B4B4B; + font-size: 13px; + font-weight: 400; + color: #fff; + padding: 0 7.5px; + transition: all .17s ease-in-out; + } + &.on{ + button{ + background-color: #1083E3; + } + } + } + .size-control{ + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + background-color: #3D3D3D; + border-radius: 2px; + width: 100px; + height: 30px; + margin: 0 5px; + span{ + font-size: 13px; + color: #fff; + } + .control-btn{ + display: block; + width: 12px; + height: 12px; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + &.minus{ + background-image: url(../../public/static/images/canvas/minus.svg); + } + &.plus{ + background-image: url(../../public/static/images/canvas/plus.svg); + } + } + } + } + } + .canvas-depth2-wrap{ + position: absolute; + top: -100%; + left: 0; + background-color: #383838; + width: 100%; + height: 50px; + transition: all .17s ease-in-out; + .canvas-depth2-inner{ + display: flex; + align-items: center; + padding: 0 40px; height: 100%; - color: #fff; - padding-right: 12px; - - &:after { - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 5px; - height: 8px; - background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; + .canvas-depth2-list{ + display: flex; + align-items: center ; + height: 100%; + .canvas-depth2-item{ + display: flex; + align-items: center; + margin-right: 26px; + height: 100%; + button{ + position: relative; + opacity: 0.55; + color: #fff; + font-size: 12px; + font-weight: normal; + height: 100%; + padding-right: 12px; + } + &.active{ + button{ + opacity: 1; + font-weight: 600; + &:after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 5px; + height: 8px; + background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; + } + } + } + } + } + .canvas-depth2-btn-list{ + display: flex; + align-items: center; + margin-left: auto; + height: 100%; + .depth2-btn-box{ + display: flex; + align-items: center; + margin-right: 34px; + height: 100%; + transition: all .17s ease-in-out; + button{ + position: relative; + font-size: 12px; + font-weight: 400; + height: 100%; + color: #fff; + padding-right: 12px; + &:after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 5px; + height: 8px; + background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; + } + } + &:last-child{ + margin-right: 0; + } + &.mouse{ + opacity: 0.55; + } + } } - } - - &:last-child { - margin-right: 0; - } - - &.mouse { - opacity: 0.55; - } } - } + &.active{ + top: 47px; + } } - - &.active { - top: 47px; + &.active{ + padding-bottom: 50px; } - } - - &.active { - padding-bottom: 50px; - } } // canvas-layout -.canvas-layout { - .canvas-page-list { - display: flex; - background-color: #1C1C1C; - border-top: 1px solid #000; - width: 100%; - - .canvas-plane-wrap { - display: flex; - align-items: center; - max-width: calc(100% - 45px); - - .canvas-page-box { +.canvas-layout{ + .canvas-page-list{ display: flex; - align-items: center; - background-color: #1c1c1c; - padding: 9.6px 20px; - border-right: 1px solid #000; - min-width: 0; - transition: all .17s ease-in-out; - - span { - display: flex; - align-items: center; - width: 100%; - font-size: 12px; - font-family: 'Pretendard', sans-serif; - color: #AAA; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; + background-color: #1C1C1C; + border-top: 1px solid #000; + width: 100%; + .canvas-plane-wrap{ + display: flex; + align-items: center; + max-width: calc(100% - 45px); + .canvas-page-box{ + display: flex; + align-items: center; + background-color: #1c1c1c; + padding: 9.6px 20px; + border-right:1px solid #000; + min-width: 0; + transition: all .17s ease-in-out; + span{ + display: flex; + align-items: center; + width: 100%; + font-size: 12px; + font-family: 'Pretendard', sans-serif; + color: #AAA; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + .close{ + flex: none; + display: block; + width: 7px; + height: 8px; + margin-left: 15px; + background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center; + background-size: cover; + } + &.on{ + background-color: #fff; + span{ + font-weight: 600; + color: #101010; + } + .close{ + background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center; + } + &:hover{ + background-color: #fff; + } + } + &:hover{ + background-color: #000; + } + } } - - .close { - flex: none; - display: block; - width: 7px; - height: 8px; - margin-left: 15px; - background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center; - background-size: cover; + .plane-add{ + display: flex; + align-items: center; + justify-content: center; + width: 45px; + padding: 13.5px 0; + background-color: #1C1C1C; + border-right: 1px solid #000; + transition: all .17s ease-in-out; + span{ + display: block; + width: 9px; + height: 9px; + background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center; + background-size: cover; + } + &:hover{ + background-color: #000; + } } - - &.on { - background-color: #fff; - - span { - font-weight: 600; - color: #101010; - } - - .close { - background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center; - } - - &:hover { - background-color: #fff; - } - } - - &:hover { - background-color: #000; - } - } } - - .plane-add { - display: flex; - align-items: center; - justify-content: center; - width: 45px; - padding: 13.5px 0; - background-color: #1C1C1C; - border-right: 1px solid #000; - transition: all .17s ease-in-out; - - span { - display: block; - width: 9px; - height: 9px; - background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center; - background-size: cover; - } - - &:hover { - background-color: #000; - } - } - } } -.canvas-frame { - position: relative; - height: calc(100% - 36.5px); - background-color: #fff; - - canvas { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } +.canvas-frame{ + position: relative; + height: calc(100% - 36.5px); + background-color: #fff; + canvas{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } } // sub-page -.sub-header { - position: fixed; - top: 46px; - left: 0; - width: 100%; - height: 46px; - border-bottom: 1px solid #000; - background: #2C2C2C; - z-index: 999; - - .sub-header-inner { - display: flex; - align-items: center; - height: 100%; - padding: 0 100px; - - .sub-header-title-wrap { - display: flex; - align-items: center; - - .title-item { - position: relative; - padding: 0 24px; - - a { - display: flex; - align-items: center; - - .icon { - width: 22px; - height: 22px; - margin-right: 8px; - background-repeat: no-repeat; - background-position: center; - background-size: cover; - - &.drawing { - background-image: url(../../public/static/images/main/drawing_icon.svg); - } - } - } - - &:after { - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 1px; - height: 16px; - background-color: #D9D9D9; - } - - &:first-child { - padding-left: 0; - } - - &:last-child { - padding-right: 0; - - &:after { - display: none; - } - } - } - } - - .sub-header-title { - font-size: 16px; - color: #fff; - font-weight: 600; - } - - .sub-header-location { - margin-left: auto; - display: flex; - align-items: center; - - .location-item { - position: relative; +.sub-header{ + position: fixed; + top: 46px; + left: 0; + width: 100%; + height: 46px; + border-bottom: 1px solid #000; + background: #2C2C2C; + z-index: 999; + .sub-header-inner{ display: flex; align-items: center; - padding: 0 10px; - - span { - display: flex; - font-size: 12px; - color: #AAA; - font-weight: normal; - cursor: default; + height: 100%; + padding: 0 100px; + .sub-header-title-wrap{ + display: flex; + align-items: center; + .title-item{ + position: relative; + padding: 0 24px; + a{ + display: flex; + align-items: center; + .icon{ + width: 22px; + height: 22px; + margin-right: 8px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);} + } + } + &:after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 1px; + height: 16px; + background-color: #D9D9D9; + } + &:first-child{ + padding-left: 0; + } + &:last-child{ + padding-right: 0; + &:after{ + display: none; + } + } + } } - - &:after { - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 4px; - height: 6px; - background: url(../../public/static/images/main/loaction_arr.svg) no-repeat center; - } - - &:first-child { - padding-left: 0; - } - - &:last-child { - padding-right: 0; - - span { + .sub-header-title{ + font-size: 16px; color: #fff; - } - - &:after { - display: none; - } + font-weight: 600; + } + .sub-header-location{ + margin-left: auto; + display: flex; + align-items: center; + .location-item{ + position: relative; + display: flex; + align-items: center; + padding: 0 10px; + span{ + display: flex; + font-size: 12px; + color: #AAA; + font-weight: normal; + cursor: default; + } + &:after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 4px; + height: 6px; + background: url(../../public/static/images/main/loaction_arr.svg)no-repeat center; + } + &:first-child{ + padding-left: 0; + } + &:last-child{ + padding-right: 0; + span{ + color: #fff; + } + &:after{ + display: none; + } + } + } } - } } - } } // sub content -.sub-content { - padding-top: 46px; - - .sub-content-inner { - max-width: 1720px; - margin: 0 auto; - padding-top: 20px; - - .sub-content-box { - margin-bottom: 20px; - - &:last-child { - margin-bottom: 0; - } +.sub-content{ + padding-top: 46px; + .sub-content-inner{ + max-width: 1720px; + margin: 0 auto; + padding-top: 20px; + .sub-content-box{ + margin-bottom: 20px; + &:last-child{ + margin-bottom: 0; + } + } } - } - - &.estimate { - display: flex; - flex-direction: column; - height: calc(100% - 36.5px); - overflow-y: auto; - padding-top: 0; - - .sub-content-inner { - flex: 1; - width: 100%; + &.estimate{ + display: flex; + flex-direction: column; + height: calc(100% - 36.5px); + overflow-y: auto; + padding-top: 0; + .sub-content-inner{ + flex: 1; + width: 100%; + } } - } } - -.sub-table-box { - padding: 20px; - border-radius: 6px; - border: 1px solid #E9EAED; - background: #FFF; - box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); - - .table-box-title-wrap { - display: flex; - align-items: center; - margin-bottom: 15px; - - .title-wrap { - display: flex; - align-items: center; - - h3 { - display: block; - font-size: 15px; - color: #101010; - font-weight: 600; - margin-right: 14px; - } - - .info-wrap { +.sub-table-box{ + padding: 20px; + border-radius: 6px; + border: 1px solid #E9EAED; + background: #FFF; + box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); + .table-box-title-wrap{ display: flex; align-items: center; - - li { - position: relative; - padding: 0 6px; - font-size: 12px; - color: #101010; - font-weight: normal; - - span { - font-weight: 600; - - &.red { - color: #E23D70; + margin-bottom: 15px; + .title-wrap{ + display: flex; + align-items: center; + h3{ + display: block; + font-size: 15px; + color: #101010; + font-weight: 600; + margin-right: 14px; } - } - - &:after { - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 1px; - height: 11px; - background-color: #D9D9D9; - } - - &:first-child { - padding-left: 0; - } - - &:last-child { - padding-right: 0; - - &::after { - display: none; + .info-wrap{ + display: flex; + align-items: center; + li{ + position: relative; + padding: 0 6px; + font-size: 12px; + color: #101010; + font-weight: normal; + span{ + font-weight: 600; + &.red{ + color: #E23D70; + } + } + &:after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 1px; + height: 11px; + background-color: #D9D9D9; + } + &:first-child{padding-left: 0;} + &:last-child{padding-right: 0;&::after{display: none;}} + } } - } } - } } - } - - .left-unit-box { - margin-left: auto; - display: flex; - align-items: center; - } - - .promise-gudie { - display: block; - font-size: 13px; - font-weight: 700; - color: #101010; - margin-bottom: 20px; - } - - .important { - color: #f00; - } - - .sub-table-footer { - display: flex; - align-items: center; - justify-content: center; - margin-top: 20px; - } - - .pagination-wrap { - margin-top: 24px; - } + .left-unit-box{ + margin-left: auto; + display: flex; + align-items: center; + } + .promise-gudie{ + display: block; + font-size: 13px; + font-weight: 700; + color: #101010; + margin-bottom: 20px; + } + .important{ + color: #f00; + } + .sub-table-footer{ + display: flex; + align-items: center; + justify-content: center; + margin-top: 20px; + } + .pagination-wrap{ + margin-top: 24px; + } } -.infomation-box-wrap { - display: flex; - align-items: center; - gap: 10px; - - .sub-table-box { - flex: 1; - } - - .info-title { - font-size: 14px; - font-weight: 500; - color: #344356; - margin-bottom: 10px; - } - - .info-inner { - position: relative; - font-size: 13px; - color: #344356; - - .copy-ico { - position: absolute; - bottom: 0; - right: 0; - width: 16px; - height: 16px; - background: url(../../public/static/images/sub/copy_ico.svg) no-repeat center; - background-size: cover; +.infomation-box-wrap{ + display: flex; + align-items: center; + gap: 10px; + .sub-table-box{ + flex: 1 ; + } + .info-title{ + font-size: 14px; + font-weight: 500; + color: #344356; + margin-bottom: 10px; + } + .info-inner{ + position: relative; + font-size: 13px; + color: #344356; + .copy-ico{ + position: absolute; + bottom: 0; + right: 0; + width: 16px; + height: 16px; + background: url(../../public/static/images/sub/copy_ico.svg)no-repeat center; + background-size: cover; + } } - } } // 견적서 -.estimate-list-wrap { - display: flex; - align-items: center; - margin-bottom: 10px; - - .estimate-box { - flex: 1; +.estimate-list-wrap{ display: flex; align-items: center; - - &:last-child { - flex: none; - min-width: 220px; + margin-bottom: 10px; + .estimate-box{ + flex: 1 ; + display: flex; + align-items: center; + &:last-child{ + flex: none; + min-width: 220px; + } + .estimate-tit{ + width: 105px; + height: 30px; + line-height: 30px; + background-color: #F4F4F7; + border-radius: 100px; + text-align: center; + font-size: 13px; + font-weight: 500; + color: #344356; + } + .estimate-name{ + font-size: 13px; + color: #344356; + margin-left: 14px; + font-weight: 400; + } } - - .estimate-tit { - width: 105px; - height: 30px; - line-height: 30px; - background-color: #F4F4F7; - border-radius: 100px; - text-align: center; - font-size: 13px; - font-weight: 500; - color: #344356; + &:last-child{ + margin-bottom: 0; } - - .estimate-name { - font-size: 13px; - color: #344356; - margin-left: 14px; - font-weight: 400; - } - } - - &:last-child { - margin-bottom: 0; - } } // file drag box -.drag-file-box { - padding: 10px; - - .btn-area { - padding-bottom: 15px; - border-bottom: 1px solid #ECF0F4; - } - - .drag-file-area { - position: relative; - margin-top: 15px; - - p { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 13px; - color: #ccc; - font-weight: 400; - cursor: default; +.drag-file-box{ + padding: 10px; + .btn-area{ + padding-bottom: 15px; + border-bottom: 1px solid #ECF0F4; } - } - - .file-list { - .file-item { - margin-bottom: 15px; - - span { + .drag-file-area{ position: relative; - font-size: 13px; - color: #45576F; - font-weight: 400; - white-space: nowrap; - padding-right: 55px; - - button { - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 15px; - height: 15px; - background: url(../../public/static/images/sub/file_delete.svg) no-repeat center; - background-size: cover; + margin-top: 15px; + p{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 13px; + color: #ccc; + font-weight: 400; + cursor: default; + } + } + .file-list{ + .file-item{ + margin-bottom: 15px; + span{ + position: relative; + font-size: 13px; + color: #45576F; + font-weight: 400; + white-space: nowrap; + padding-right: 55px; + button{ + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 15px; + height: 15px; + background: url(../../public/static/images/sub/file_delete.svg)no-repeat center; + background-size: cover; + } + } + &:last-child{ + margin-bottom: 0; + } } - } - - &:last-child { - margin-bottom: 0; - } } - } } // 발전시물레이션 -.chart-wrap { - display: flex; - gap: 20px; - width: 100%; - - .sub-table-box { - height: 100%; - } - - .chart-inner { - flex: 1; - - .chart-box { - margin-bottom: 30px; - } - } - - .chart-table-wrap { +.chart-wrap{ display: flex; - flex-direction: column; - flex: none; - width: 650px; - - .sub-table-box { - flex: 1; - - &:first-child { - margin-bottom: 20px; - } + gap: 20px; + width: 100%; + .sub-table-box{ + height: 100%; + } + .chart-inner{ + flex: 1; + .chart-box{ + margin-bottom: 30px; + } + } + .chart-table-wrap{ + display: flex; + flex-direction: column; + flex: none; + width: 650px; + .sub-table-box{ + flex: 1; + &:first-child{ + margin-bottom: 20px; + } + } } - } } -.chart-month-table { - table { - table-layout: fixed; - border-collapse: collapse; +.chart-month-table{ + table{ + table-layout: fixed; + border-collapse:collapse; + border: 1px solid #ECF0F4; + border-radius: 4px; + thead{ + th{ + padding: 4.5px 0; + border-bottom: 1px solid #ECF0F4; + text-align: center; + font-size: 13px; + color: #45576F; + font-weight: 500; + background-color: #F8F9FA; + } + } + tbody{ + td{ + font-size: 13px; + color: #45576F; + text-align: center; + padding: 4.5px 0; + } + } + } +} + +.simulation-guide-wrap{ + display: flex; + padding: 20px; + .simulation-tit-wrap{ + padding-right: 40px; + border-right: 1px solid #EEEEEE; + span{ + display: block; + position: relative; + padding-left: 60px; + font-size: 15px; + color: #14324F; + font-weight: 600; + &::before{ + content: ''; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + width: 40px; + height: 40px; + background: url(../../public/static/images/sub/simulation_guide.svg)no-repeat center; + background-size: cover; + } + } + } + .simulation-guide-box{ + padding-left: 40px; + dl{ + margin-bottom: 25px; + dt{ + font-size: 13px; + color: #101010; + font-weight: 600; + margin-bottom: 5px; + } + dd{ + font-size: 12px; + color: #45576F; + font-weight: 400; + line-height: 24px; + } + &:last-child{ + margin-bottom: 0; + } + } + } +} + +.module-total{ + display: flex; + align-items: center; + background-color: #F8F9FA; + padding: 9px 0; + margin-right: 4px; border: 1px solid #ECF0F4; - border-radius: 4px; - - thead { - th { - padding: 4.5px 0; - border-bottom: 1px solid #ECF0F4; + border-top: none; + .total-title{ + flex: 1; text-align: center; font-size: 13px; - color: #45576F; + color: #344356; font-weight: 500; - background-color: #F8F9FA; - } } - - tbody { - td { - font-size: 13px; - color: #45576F; + .total-num{ + flex: none; + width: 121px; text-align: center; - padding: 4.5px 0; - } + font-size: 15px; + color: #344356; + font-weight: 500; } - } -} - -.simulation-guide-wrap { - display: flex; - padding: 20px; - - .simulation-tit-wrap { - padding-right: 40px; - border-right: 1px solid #EEEEEE; - - span { - display: block; - position: relative; - padding-left: 60px; - font-size: 15px; - color: #14324F; - font-weight: 600; - - &::before { - content: ''; - position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%); - width: 40px; - height: 40px; - background: url(../../public/static/images/sub/simulation_guide.svg) no-repeat center; - background-size: cover; - } - } - } - - .simulation-guide-box { - padding-left: 40px; - - dl { - margin-bottom: 25px; - - dt { - font-size: 13px; - color: #101010; - font-weight: 600; - margin-bottom: 5px; - } - - dd { - font-size: 12px; - color: #45576F; - font-weight: 400; - line-height: 24px; - } - - &:last-child { - margin-bottom: 0; - } - } - } -} - -.module-total { - display: flex; - align-items: center; - background-color: #F8F9FA; - padding: 9px 0; - margin-right: 4px; - border: 1px solid #ECF0F4; - border-top: none; - - .total-title { - flex: 1; - text-align: center; - font-size: 13px; - color: #344356; - font-weight: 500; - } - - .total-num { - flex: none; - width: 121px; - text-align: center; - font-size: 15px; - color: #344356; - font-weight: 500; - } } // 패널 배치 집계 -.penal-wrap { - position: fixed; - top: 200px; - left: 50px; - z-index: 999999; - width: 237px; - height: 40px; - line-height: 40px; - background-color: #fff; - border: 1px solid #DFDFDF; - padding: 0 34px 0 10px; - border-radius: 2px; - box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05); - cursor: pointer; - - &::before { - content: ''; - position: absolute; - top: 50%; - right: 12px; - transform: translateY(-50%); - width: 10px; - height: 6px; - background: url(../../public/static/images/canvas/penal_arr.svg) no-repeat center; - background-size: cover; - } - - h2 { - font-size: 12px; - font-weight: 500; - color: #3D3D3D; - } - - .penal-table-wrap { - display: none; - position: absolute; - top: 100%; - left: -1px; - min-width: calc(100% + 2px); - background-color: #3D3D3D; - border: 1px solid #3D3D3D; - padding: 20px; - - .penal-table { - table-layout: fixed; - border-collapse: collapse; - - thead { - th { - text-align: center; - background-color: rgba(255, 255, 255, 0.05); - font-size: 12px; - font-weight: 500; - color: #fff; - border: 1px solid #505050; +.penal-wrap{ + position: fixed; + top: 200px; + left: 50px; + z-index: 999999; + width: 237px; + height: 40px; + line-height: 40px; + background-color: #fff; + border: 1px solid #DFDFDF; + padding: 0 34px 0 10px; + border-radius: 2px; + box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05); + cursor: pointer; + &::before{ + content: ''; + position: absolute; + top: 50%; + right: 12px; + transform: translateY(-50%); + width: 10px; + height: 6px; + background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center; + background-size: cover; + } + h2{ + font-size: 12px; + font-weight: 500; + color: #3D3D3D; + } + .penal-table-wrap{ + display: none; + position: absolute; + top: 100%; + left: -1px; + min-width: calc(100% + 2px); + background-color: #3D3D3D; + border: 1px solid #3D3D3D; + padding: 20px; + .penal-table{ + table-layout: fixed; + border-collapse: collapse; + thead{ + th{ + text-align: center; + background-color:rgba(255, 255, 255, 0.05); + font-size: 12px; + font-weight: 500; + color: #fff; + border: 1px solid #505050; + } + } + tbody{ + td{ + font-size: 12px; + color: #fff; + font-weight: 400; + text-align: center; + padding: 0 10px; + border: 1px solid #505050; + } + } } - } - - tbody { - td { - font-size: 12px; - color: #fff; - font-weight: 400; - text-align: center; - padding: 0 10px; - border: 1px solid #505050; + } + &.act{ + border: 1px solid #3D3D3D; + background-color: #3D3D3D; + h2{ + color: #fff; + } + &::before{ + background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center; + } + .penal-table-wrap{ + display: block; } - } } - } - - &.act { - border: 1px solid #3D3D3D; - background-color: #3D3D3D; - - h2 { - color: #fff; - } - - &::before { - background: url(../../public/static/images/canvas/penal_arr_white.svg) no-repeat center; - } - - .penal-table-wrap { - display: block; - } - } } \ No newline at end of file diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 16ef74e1..705550d5 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -787,7 +787,6 @@ $alert-color: #101010; display: table-cell; vertical-align: middle; padding-bottom: 14px; - text-align: left; } .eaves-keraba-td { diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index bd76935a..7804b800 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -1,21 +1,18 @@ * { - -webkit-text-size-adjust: none; - -moz-text-size-adjust: none; - -ms-text-size-adjust: none; - text-size-adjust: none; - box-sizing: content-box + -webkit-text-size-adjust:none; + -moz-text-size-adjust:none; + -ms-text-size-adjust:none; + text-size-adjust: none; + box-sizing: content-box } - *, ::after, ::before { - box-sizing: border-box; + box-sizing: border-box; } - -html, body { - width: 100%; - height: 100%; - font-size: 16px; +html, body{ + width: 100%; + height: 100%; + font-size: 16px; } - html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -25,837 +22,704 @@ b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font: inherit; - vertical-align: baseline; - font-family: 'Noto Sans JP', sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-smooth: never; + margin: 0; + padding: 0; + border: 0; + font: inherit; + vertical-align: baseline; + font-family: 'Noto Sans JP', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-smooth: never; } - /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; + display: block; } - body { - line-height: 1.4; -} - -body:first-of-type caption { - display: none; + line-height: 1.4; } +body:first-of-type caption { display:none;} ol, ul { - list-style: none; + list-style: none; } - blockquote, q { - quotes: none; + quotes: none; } - blockquote:before, blockquote:after, q:before, q:after { - content: ''; - content: none; + content: ''; + content: none; } - table { - width: 100%; - border-collapse: separate; - border-spacing: 0; - border: 0 none; + width: 100%; + border-collapse: separate; + border-spacing:0; + border:0 none; } - caption, th, td { - text-align: left; - font-weight: normal; - border: 0; + text-align:left; + font-weight: normal; + border:0; } -a { - cursor: pointer; - color: #000; +a { + cursor:pointer; + color:#000; } - a, a:hover, a:active { - text-decoration: none; - -webkit-tap-highlight-color: transparent; + text-decoration:none; + -webkit-tap-highlight-color: transparent; } - /*form_style*/ input, select, textarea, button, a, label { - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color:rgba(0,0,0,0); } - -button, input[type=text], input[type=button] { - -webkit-appearance: none; - -webkit-border-radius: 0; - -webkit-appearance: none; - appearance: none; - border-radius: 0 +button,input[type=text], input[type=button] { + -webkit-appearance: none; + -webkit-border-radius: 0; + -webkit-appearance:none; + appearance: none; + border-radius: 0 } - input[type=checkbox], input[type=radio] { - box-sizing: border-box; - padding: 0; + box-sizing: border-box; + padding: 0; } - input, select, button { - border: 0 none; - outline: none; - margin: 0; + border:0 none; + outline:none; + margin:0; } - select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } - select::-ms-expand { - display: none; + display: none; } - ::-webkit-input-placeholder { - line-height: 1; - font-weight: 300; - font-size: 0.938rem; - letter-spacing: -0.6px; - color: #8b8b8b; + line-height:1; + font-weight:300; + font-size:0.938rem; + letter-spacing:-0.6px; + color:#8b8b8b; } - -.log-box ::-webkit-input-placeholder { - color: #8b8b8b; +.log-box ::-webkit-input-placeholder{ + color:#8b8b8b; } - -button { - background: transparent; - font-family: 'Noto Sans JP', sans-serif; - border: none; - padding: 0; - margin: 0; - line-height: 1.4; - color: inherit; - outline: none; - cursor: pointer; +button{ + background: transparent; + font-family: 'Noto Sans JP', sans-serif; + border: none; + padding: 0; + margin: 0; + line-height: 1.4; + color: inherit; + outline: none; + cursor: pointer; } - -.pre { - font-family: 'Pretendard', sans-serif !important; +.pre{ + font-family: 'Pretendard', sans-serif !important; } // margin -.mt5 { - margin-top: 5px !important; -} - -.mt10 { - margin-top: 10px !important; -} - -.mt15 { - margin-top: 15px !important; -} - -.mb5 { - margin-bottom: 5px !important; -} - -.mb10 { - margin-bottom: 10px !important; -} - -.mb15 { - margin-bottom: 15px !important; -} - -.mr5 { - margin-right: 5px !important; -} - -.mr10 { - margin-right: 10px !important; -} - -.mr15 { - margin-right: 15px !important; -} - -.ml5 { - margin-left: 5px !important; -} - -.ml10 { - margin-left: 10px !important; -} - -.ml15 { - margin-left: 15px !important; -} +.mt5{margin-top: 5px !important;} +.mt10{margin-top: 10px !important;} +.mt15{margin-top: 15px !important;} +.mb5{margin-bottom: 5px !important;} +.mb10{margin-bottom: 10px !important;} +.mb15{margin-bottom: 15px !important;} +.mr5{margin-right: 5px !important;} +.mr10{margin-right: 10px !important;} +.mr15{margin-right: 15px !important;} +.ml5{margin-left: 5px !important;} +.ml10{margin-left: 10px !important;} +.ml15{margin-left: 15px !important;} // align -.l { - text-align: left !important; -} - -.r { - text-align: right !important; -} - -.c { - text-align: center !important; -} +.al-l{text-align: left !important;} +.al-r{text-align: right !important;} +.al-c{text-align: center !important;} // button -.btn-frame { - display: inline-block; - padding: 0 7px; - height: 34px; - line-height: 34px; - border-radius: 2px; - color: #fff; - font-size: 12px; - font-weight: 400; - border: 1px solid #000; - text-align: center; - font-family: 'Pretendard', sans-serif; - transition: all .17s ease-in-out; - cursor: pointer; - - &.block { - width: 100%; - } - - &.small { - font-family: 'Noto Sans JP', sans-serif; - height: 30px; - line-height: 30px; - font-size: 13px; - } - - &.deepgray { - background-color: #2C2C2C; - border: 1px solid #484848; - } - - &.gray { - background-color: #3C3C3C; - border: 1px solid #545454; - } - - &.dark { - background-color: #1C1C1C; - border: 1px solid #484848; - } - - &.modal { - font-family: 'Noto Sans JP', sans-serif; - background-color: #272727; - border: 1px solid #484848; - color: #aaa; - - &:hover { - background-color: #1083E3; - border: 1px solid #1083E3; - color: #fff; - font-weight: 500; - } - } - - &.sub-tab { - height: 30px; - padding: 0 10px; - line-height: 28px; - font-family: 'Noto Sans JP', sans-serif; - background-color: #2D2D2D; - border: 1px solid #393939; - color: #aaa; - - &.act, - &:hover { - background-color: #414E6C; - border: 1px solid #414E6C; - color: #fff; - font-weight: 500; - } - } - - &:hover, - &.act { - background-color: #1083E3; - border: 1px solid #1083E3; +.btn-frame{ + display: inline-block; + padding: 0 7px; + height: 34px; + line-height: 34px; + border-radius: 2px; color: #fff; - font-weight: 500; - } - - &.block { - display: block; - width: 100%; - } - - &.ico-flx { - display: flex; - align-items: center; - - .ico { - margin-right: 10px; + font-size: 12px; + font-weight: 400; + border: 1px solid #000; + text-align: center; + font-family: 'Pretendard', sans-serif; + transition: all .17s ease-in-out; + cursor: pointer; + &.block{ + width: 100%; + } + &.small{ + font-family: 'Noto Sans JP', sans-serif; + height: 30px; + line-height: 30px; + font-size: 13px; } + &.deepgray{ + background-color: #2C2C2C; + border: 1px solid #484848; + } + &.gray{ + background-color: #3C3C3C; + border: 1px solid #545454; + } + &.dark{ + background-color: #1C1C1C; + border: 1px solid #484848; + } + &.modal{ + font-family: 'Noto Sans JP', sans-serif; + background-color: #272727; + border: 1px solid #484848; + color: #aaa; + &:hover{ + background-color: #1083E3; + border: 1px solid #1083E3; + color: #fff; + font-weight: 500; + } + } + &.sub-tab{ + height: 30px; + padding: 0 10px; + line-height: 28px; + font-family: 'Noto Sans JP', sans-serif; + background-color: #2D2D2D; + border: 1px solid #393939; + color: #aaa; + &.act, + &:hover{ + background-color: #414E6C; + border: 1px solid #414E6C; + color: #fff; + font-weight: 500; + } + } &:hover, - &.act { - font-weight: 400; + &.act{ + background-color: #1083E3; + border: 1px solid #1083E3; + color: #fff; + font-weight: 500; } - } + &.block{ + display: block; + width: 100%; + } + &.ico-flx{ + display: flex; + align-items: center; + .ico{ + margin-right: 10px; + } + &:hover, + &.act{ + font-weight: 400; + } + } } -.btn-origin { - display: inline-block; - height: 30px; - padding: 0 14px; - border-radius: 2px; - background-color: #101010; - color: #fff; - font-size: 13px; - font-weight: 400; - transition: all .15s ease-in-out; - - &.navy { - background-color: #304961; - - &:hover { - background-color: #1083E3; +.btn-origin{ + display: inline-block; + height: 30px; + padding: 0 14px; + border-radius: 2px; + background-color: #101010; + color: #fff; + font-size: 13px; + font-weight: 400; + transition: all .15s ease-in-out; + &.navy{ + background-color: #304961; + &:hover{ + background-color: #1083E3; + } } - } - - &.grey { - background-color: #94A0AD; - - &:hover { - background-color: #607F9A; + &.grey{ + background-color: #94A0AD; + &:hover{ + background-color: #607F9A; + } } - } } // select -.sort-select { - position: relative; - display: inline-block; - min-width: 100px; - height: 30px; - line-height: 30px; - padding: 0 25px 0 10px; - background-color: #373737; - border: 1px solid #3F3F3F; - border-radius: 2px; - border-top-left-radius: 2px; - color: #fff; - cursor: pointer; - - p { - font-size: 13px; - color: #fff; - height: 100%; - } - - .select-item-wrap { - position: absolute; - top: 100%; - left: -1px; - clip-path: inset(0 0 100% 0); - width: calc(100% + 2px); - padding: 8px 0; - max-height: 100px; - overflow-y: auto; +.sort-select{ + position: relative; + display: inline-block; + min-width: 100px; + height: 30px; + line-height: 30px; + padding: 0 25px 0 10px; background-color: #373737; border: 1px solid #3F3F3F; border-radius: 2px; - transition: all 0.17s ease-in-out; - visibility: hidden; - z-index: 999; - - .select-item { - display: flex; - align-items: center; - padding: 8px 20px; - line-height: 1.4; - transition: all .17s ease-in-out; - - button { - font-size: 12px; + border-top-left-radius: 2px; + color: #fff; + cursor: pointer; + p{ + font-size: 13px; color: #fff; - line-height: 1.4; - } - - &:hover { - background-color: #2C2C2C; - } + height: 100%; } - - &::-webkit-scrollbar { - width: 2px; - background-color: transparent; - + .select-item-wrap{ + position: absolute; + top: 100%; + left: -1px; + clip-path:inset(0 0 100% 0); + width: calc(100% + 2px); + padding: 8px 0; + max-height: 100px; + overflow-y: auto; + background-color: #373737; + border: 1px solid #3F3F3F; + border-radius: 2px; + transition: all 0.17s ease-in-out; + visibility: hidden; + z-index: 999; + .select-item{ + display: flex; + align-items: center; + padding: 8px 20px; + line-height: 1.4; + transition: all .17s ease-in-out; + button{ + font-size: 12px; + color: #fff; + line-height: 1.4; + } + &:hover{ + background-color: #2C2C2C; + } + } + &::-webkit-scrollbar { + width: 2px; + background-color: transparent; + + } + &::-webkit-scrollbar-thumb { + background-color: #5a5a5a; + border-radius: 10px; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } } - - &::-webkit-scrollbar-thumb { - background-color: #5a5a5a; - border-radius: 10px; + &::after{ + content: ''; + position: absolute; + top: 50%; + right: 7px; + transform: translateY(-50%); + width: 10px; + height: 6px; + background: url(/static/images/common/select-arr.svg) no-repeat center; + background-size: cover; + transition: all .17s ease-in-out; } - - &::-webkit-scrollbar-track { - background-color: transparent; + &.active{ + .select-item-wrap{ + clip-path: inset(0 0 0 0); + visibility: visible; + } + &:after{ + transform: translateY(-50%) rotate(-180deg); + } } - } - - &::after { - content: ''; - position: absolute; - top: 50%; - right: 7px; - transform: translateY(-50%); - width: 10px; - height: 6px; - background: url(/static/images/common/select-arr.svg) no-repeat center; - background-size: cover; - transition: all .17s ease-in-out; - } - - &.active { - .select-item-wrap { - clip-path: inset(0 0 0 0); - visibility: visible; - } - - &:after { - transform: translateY(-50%) rotate(-180deg); - } - } } -.select-light { - position: relative; - display: block; - width: 100%; - height: 30px; - background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat; - background-size: 10px 6px; - border: 1px solid #eee; - padding: 0 30px 0 10px; - font-size: 13px; - color: #45576F; - font-family: 'Noto Sans JP', sans-serif; - cursor: pointer; - - &:disabled { - opacity: 1; - background-color: #FAFAFA; - color: #999; - cursor: default; - } - - &.black { - color: #101010; - } - - &.dark { - background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat; - color: #898989; - font-size: 12px; - border-radius: 2px; - border: none; - } +.select-light{ + position: relative; + display: block; + width: 100%; + height: 30px; + background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat; + background-size: 10px 6px; + border: 1px solid #eee; + padding: 0 30px 0 10px; + font-size: 13px; + color: #45576F; + font-family: 'Noto Sans JP', sans-serif; + cursor: pointer; + &:disabled{ + opacity: 1; + background-color: #FAFAFA; + color: #999; + cursor: default; + } + &.black{ + color: #101010; + } + &.dark{ + background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat; + color: #898989; + font-size: 12px; + border-radius: 2px; + border: none; + } } // input -.form-input { - label { - display: block; - color: #aaa; - font-size: 12px; - font-weight: 500; - margin-bottom: 10px; - } +.form-input{ + label{ + display: block; + color: #aaa; + font-size: 12px; + font-weight: 500; + margin-bottom: 10px; + } } - input[type=number], -input[type=text] { - &.input-origin { - display: inline-block; - height: 30px; - line-height: 30px; - border-radius: 2px; - background-color: #323234; - color: #fff; - font-size: 12px; - font-weight: 500; - font-family: 'Pretendard', sans-serif; - padding: 0 10px; - letter-spacing: 0px; - text-align: right; - - &::placeholder { - opacity: 1; - font-size: 12px; - letter-spacing: 0px; +input[type=text]{ + &.input-origin{ + display: inline-block; + height: 30px; + line-height: 30px; + border-radius: 2px; + background-color: #323234; + color: #fff; + font-size: 12px; + font-weight: 500; + font-family: 'Pretendard', sans-serif; + padding: 0 10px; + letter-spacing: 0px; + text-align: right; + &::placeholder{ + opacity: 1; + font-size: 12px; + letter-spacing: 0px; + } + &.block{ + width: 100%; + } + &:read-only{ + color: #AAA; + } + &.plane{ + font-family: 'Noto Sans JP', sans-serif; + border: 1px solid #525252; + background-color: transparent; + } } - - &.block { - width: 100%; + &.input-light{ + display: block; + width: 100%; + height: 30px; + padding: 0 10px; + border: 1px solid #eee; + border-radius: 2px; + background-color: #fff; + font-family: 'Noto Sans JP', sans-serif; + font-size: 13px; + color: #45576F; + font-weight: normal; + transition: border-color .17s ease-in-out; + text-align: left; + &:read-only{ + background-color: #FAFAFA; + color: #999999; + } } - - &:read-only { - color: #AAA; - } - - &.plane { - font-family: 'Noto Sans JP', sans-serif; - border: 1px solid #525252; - background-color: transparent; - } - } - - &.input-light { - display: block; - width: 100%; - height: 30px; - padding: 0 10px; - border: 1px solid #eee; - border-radius: 2px; - background-color: #fff; - font-family: 'Noto Sans JP', sans-serif; - font-size: 13px; - color: #45576F; - font-weight: normal; - transition: border-color .17s ease-in-out; - text-align: left; - - &:read-only { - background-color: #FAFAFA; - color: #999999; - } - } } + // check-btn -.check-btn { - display: flex; - align-items: center; - height: 30px; - background-color: #3A3A3A; - border-radius: 3px; - transition: all .17s ease-in-out; - - .check-area { - flex: none; - width: 30px; - height: 100%; - border-right: 1px solid #272727; - background: url(../../public/static/images/canvas/check-grey.svg) no-repeat center; - background-size: 11px 9px; - } - - .title-area { - padding: 0 10px; - font-size: 12px; - color: #898989; - font-weight: 400; - } - - &.block { - width: 100%; - } - - &:hover, - &.act { - background-color: #fff; - - .check-area { - border-right: 1px solid #101010; - background: url(../../public/static/images/canvas/check-black.svg) no-repeat center; +.check-btn{ + display: flex; + align-items: center; + height: 30px; + background-color: #3A3A3A; + border-radius: 3px; + transition: all .17s ease-in-out; + .check-area{ + flex: none; + width: 30px; + height: 100%; + border-right: 1px solid #272727; + background: url(../../public/static/images/canvas/check-grey.svg)no-repeat center; + background-size: 11px 9px; } - - .title-area { - color: #101010; - font-weight: 600; + .title-area{ + padding: 0 10px; + font-size: 12px; + color: #898989; + font-weight: 400; + } + &.block{ + width: 100%; + } + &:hover, + &.act{ + background-color: #fff; + .check-area{ + border-right: 1px solid #101010; + background: url(../../public/static/images/canvas/check-black.svg)no-repeat center; + } + .title-area{ + color: #101010; + font-weight: 600; + } } - } } // arr-btn -.arr-btn { - display: block; - height: 30px; - border-radius: 3px; - background-color: #3A3A3A; - padding: 0 11px; - text-align: left; - transition: all .17s ease-in-out; - - span { - position: relative; - font-size: 12px; - color: #898989; - font-weight: 400; - padding-right: 15px; - - &:after { - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 5px; - height: 8px; - background: url(../../public/static/images/canvas/arr_btn_ico.svg) no-repeat center; +.arr-btn{ + display: block; + height: 30px; + border-radius: 3px; + background-color: #3A3A3A; + padding: 0 11px; + text-align: left; + transition: all .17s ease-in-out; + span{ + position: relative; + font-size: 12px; + color: #898989; + font-weight: 400; + padding-right: 15px; + &:after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 5px; + height: 8px; + background: url(../../public/static/images/canvas/arr_btn_ico.svg)no-repeat center; + } } - } - - &:hover, - &.act { - background-color: #fff; - - span { - color: #101010; - font-weight: 500; - - &:after { - background: url(../../public/static/images/canvas/arr_btn_ico_black.svg) no-repeat center; - } - } - } - - &.dark { - text-align: center; - background-color: #272727; - border: 1px solid #484848; - - span { - color: #Fff; - - &:after { - background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center; - } - } - &:hover, - &.act { - background-color: #1083E3; - border: 1px solid #1083E3; + &.act{ + background-color: #fff; + span{ + color: #101010; + font-weight: 500; + &:after{ + background: url(../../public/static/images/canvas/arr_btn_ico_black.svg)no-repeat center; + } + } + } + &.dark{ + text-align: center; + background-color: #272727; + border: 1px solid #484848; + span{ + color: #Fff; + &:after{ + background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center; + } + } + &:hover, + &.act{ + background-color: #1083E3; + border: 1px solid #1083E3; + } } - } } // radio .d-check-radio, -.d-check-box { - line-height: 1.1; - cursor: pointer; - - input[type=checkbox], - input[type=radio] { - position: static; - margin-left: 0; +.d-check-box{ + line-height: 1.1; cursor: pointer; - opacity: 0; - z-index: 1; - flex: 0 0 auto; - } - - label { - position: relative; - padding-left: 10px; - margin-bottom: 0; - word-break: break-all; - line-height: 1.2; - display: inline; - vertical-align: top; - color: #fff; - font-size: 13px; - font-weight: 400; - cursor: pointer; - } - - &.light { - label { - color: #45576F; + input[type=checkbox], + input[type=radio]{ + position: static; + margin-left: 0; + cursor: pointer; + opacity: 0; + z-index: 1; + flex: 0 0 auto; } - } - - &.no-text { - label { - padding-left: 0; + label{ + position: relative; + padding-left: 10px; + margin-bottom: 0; + word-break: break-all; + line-height: 1.2; + display: inline; + vertical-align: top; + color: #fff; + font-size: 13px; + font-weight: 400; + cursor: pointer; + } + &.light{ + label{ + color: #45576F; + } + } + &.no-text{ + label{ + padding-left: 0; + } } - } } .d-check-radio { - label { - &::before { - cursor: pointer; - content: ""; - display: inline-block; - position: absolute; - width: 17px; - height: 17px; - top: 2px; - left: 0; - margin-left: -12px; - border: 1px solid #999999; - border-radius: 100%; - background-color: transparent; - text-align: center; - font-size: 13px; - line-height: 1.4; - transition: border 0.15s ease-in-out, color 0.15s ease-in-out; + label{ + &::before{ + cursor: pointer; + content: ""; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + top:2px; + left: 0; + margin-left: -12px; + border: 1px solid #999999; + border-radius: 100%; + background-color: transparent; + text-align:center; + font-size:13px; + line-height:1.4; + transition: border 0.15s ease-in-out, color 0.15s ease-in-out; + } + &::after{ + cursor: pointer; + content: ""; + display: inline-block; + position: absolute; + width: 9px; + height: 9px; + top:6px; + left: 4px; + margin-left: -12px; + border: none; + border-radius: 100%; + background-color: #fff; + text-align:center; + font-size:13px; + line-height:1.4; + opacity: 0; + visibility: hidden; + transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out; + } } - - &::after { - cursor: pointer; - content: ""; - display: inline-block; - position: absolute; - width: 9px; - height: 9px; - top: 6px; - left: 4px; - margin-left: -12px; - border: none; - border-radius: 100%; - background-color: #fff; - text-align: center; - font-size: 13px; - line-height: 1.4; - opacity: 0; - visibility: hidden; - transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out; + &.light{ + label{ + &:before{ + border-color: #D6D6D7; + } + &:after{ + background-color: #697C8F; + } + } } - } - - &.light { - label { - &:before { - border-color: #D6D6D7; - } - - &:after { - background-color: #697C8F; - } + input[type=radio]:checked + label::after{ + opacity: 1; + visibility: visible; } - } - - input[type=radio]:checked + label::after { - opacity: 1; - visibility: visible; - } - - &.pop { - label { - font-size: 12px; - - &:before { - width: 16px; - height: 16px; - border-color: #fff; - } - - &:after { - width: 8px; - height: 8px; - background-color: #fff; - } + &.pop{ + label{ + font-size: 12px; + &:before{ + width: 16px; + height: 16px; + border-color: #fff; + } + &:after{ + width: 8px; + height: 8px; + background-color: #fff; + } + } } - } } // check-box -.d-check-box { - label { - &::before { - cursor: pointer; - content: ""; - display: inline-block; - position: absolute; - width: 17px; - height: 17px; - top: 2px; - left: 0; - margin-left: -12px; - border: 1px solid #D6D6D7; - background-color: transparent; - transition: border 0.15s ease-in-out, color 0.15s ease-in-out; +.d-check-box{ + label{ + &::before{ + cursor: pointer; + content: ""; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + top: 2px; + left: 0; + margin-left: -12px; + border: 1px solid #D6D6D7; + background-color: transparent; + transition: border 0.15s ease-in-out, color 0.15s ease-in-out; + } + &:after{ + cursor: pointer; + content: ""; + display: inline-block; + position: absolute; + width: 16px; + height: 16px; + top:0; + left: 0; + margin-left: -.8rem; + transition: border 0.05s ease-in-out, color 0.05s ease-in-out; + } } - - &:after { - cursor: pointer; - content: ""; - display: inline-block; - position: absolute; - width: 16px; - height: 16px; - top: 0; - left: 0; - margin-left: -.8rem; - transition: border 0.05s ease-in-out, color 0.05s ease-in-out; + input[type=checkbox]:checked + label::after{ + content: ""; + display: inline-block; + position: absolute; + top: 1px; + left: -1px; + width: 5px; + height: 8px; + border: 2px solid #697C8F; + border-left: none; + border-top: none; + transform: translate(7.75px,4.5px) rotate(45deg); + -ms-transform: translate(7.75px,4.5px) rotate(45deg); } - } - - input[type=checkbox]:checked + label::after { - content: ""; - display: inline-block; - position: absolute; - top: 1px; - left: -1px; - width: 5px; - height: 8px; - border: 2px solid #697C8F; - border-left: none; - border-top: none; - transform: translate(7.75px, 4.5px) rotate(45deg); - -ms-transform: translate(7.75px, 4.5px) rotate(45deg); - } - - &.pop { - input[type=checkbox]:checked + label::after { - border-color: #fff; + &.pop{ + input[type=checkbox]:checked + label::after{ + border-color: #fff; + } } - } } // date-picker -.date-picker { - svg { - display: none; - } - - .react-datepicker-wrapper { - width: 100%; - } - - input[type=text] { - display: block; - width: 100%; - height: 30px; - padding: 0 34px 0 10px; - border-radius: 2px; - border: 1px solid #eee; - font-size: 13px; - color: #45576F; - font-weight: normal; - font-family: 'Noto Sans JP', sans-serif; - background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat; - background-size: 14px 15px; - cursor: pointer; - } +.date-picker{ + svg{display: none;} + .react-datepicker-wrapper{ + width: 100%; + } + input[type=text]{ + display: block; + width: 100%; + height: 30px; + padding: 0 34px 0 10px; + border-radius: 2px; + border: 1px solid #eee; + font-size: 13px; + color: #45576F; + font-weight: normal; + font-family: 'Noto Sans JP', sans-serif; + background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat; + background-size: 14px 15px; + cursor: pointer; + } } \ No newline at end of file diff --git a/src/styles/_table.scss b/src/styles/_table.scss index ceaea36b..a87bfc5b 100644 --- a/src/styles/_table.scss +++ b/src/styles/_table.scss @@ -1,215 +1,205 @@ -@mixin flexbox() { - display: flex; - align-items: center; +@mixin flexbox(){ + display: flex; + align-items: center; } -table { - .overflow-lab { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - .al-l { - text-align: left !important; - } +table{ + .overflow-lab{ + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + .al-l{ + text-align: left !important; + } } -.common-table { - table { - table-layout: fixed; - border: 1px solid #ECF0F4; - border-radius: 3px; - border-collapse: collapse; - - tbody { - th { - font-size: 13px; - font-weight: 500; - color: #344356; - padding: 14px 12px; - border: 1px solid #ECF0F4; - background-color: #F7F9FA; - vertical-align: middle; - } - - td { - padding: 9px; - border: 1px solid #ECF0F4; - font-size: 13px; - font-weight: 400; - color: #45576F; - vertical-align: middle; - - .radio-wrap { - flex: none; - @include flexbox; - } - - .form-flex-wrap { - @include flexbox; - } - - .date-picker-wrap { - width: 100%; - @include flexbox; - - span { - margin: 0 4px; - } - } - } - } - } - - &.bt-able { - margin-bottom: 30px; - } -} - -.infomation-table { - table { - border-top: 1px solid #DEE3EA; - border-bottom: 1px solid #DEE3EA; - border-collapse: collapse; - - tbody { - tr { - th { - font-size: 13px; - color: #344356; - font-weight: 500; - padding: 18px 0; - border-bottom: 1px solid #F4F4F7; - - .title { - margin-right: 8px; - } - } - - td { - padding: 0 0 0 15px; - border-bottom: 1px solid #F4F4F7; - - .guide { - font-size: 13px; - color: #697C8F; - font-weight: normal; - margin-left: 15px; - } - - span { - font-size: 13px; - color: #697C8F; - font-weight: normal; - } - } - - &:last-child { - th, td { - border-bottom: none; - } - } - } - } - - .flx-box { - @include flexbox; - } - } - - .tooltips { - display: block; - width: 14px; - height: 14px; - display: inline-block; - background: url(../../public/static/images/sub/tooltips.svg) no-repeat center; - background-size: cover; - cursor: pointer; - } -} - -.module-table { - table { - table-layout: fixed; - border-collapse: collapse; - - thead { - display: table; - table-layout: fixed; - width: 100%; - - th { - padding: 13px 0; - font-size: 13px; - color: #344356; - font-weight: 500; - border-bottom: 2px solid #E0E5EB; - text-align: center; - } - } - - tbody { - display: block; - overflow-y: auto; - - tr { - display: table; +.common-table{ + table{ table-layout: fixed; - width: 100%; border: 1px solid #ECF0F4; - - td { - padding: 10px 0px; - font-size: 13px; - color: #45576F; - font-weight: 400; - text-align: center; + border-radius: 3px; + border-collapse:collapse; + tbody{ + th{ + font-size: 13px; + font-weight: 500; + color: #344356; + padding: 14px 12px; + border: 1px solid #ECF0F4 ; + background-color: #F7F9FA; + vertical-align: middle; + } + td{ + padding: 9px; + border: 1px solid #ECF0F4 ; + font-size: 13px; + font-weight: 400; + color: #45576F; + vertical-align: middle; + .radio-wrap{ + flex: none; + @include flexbox; + } + .form-flex-wrap{ + @include flexbox; + } + .date-picker-wrap{ + width: 100%; + @include flexbox; + span{ + margin: 0 4px; + } + } + } } - } - - &::-webkit-scrollbar { - width: 4px; - background-color: transparent; - } - - &::-webkit-scrollbar-thumb { - background-color: #C1CCD7; - } - - &::-webkit-scrollbar-track { - background-color: transparent; - } } - - &.small { - tbody { - height: 120px; - } + &.bt-able{ + margin-bottom: 30px; } - - &.big { - td, - th { - &:nth-child(2) { - width: 121px; - } - } - - tbody { - height: 160px; - - td { - padding: 10px 20px; - } - } - } - } } -.roof-module-table { - table { - table-layout: fixed; - border-collapse: collapse; - } +.infomation-table{ + table{ + border-top: 1px solid #DEE3EA; + border-bottom: 1px solid #DEE3EA; + border-collapse:collapse; + tbody{ + tr{ + th{ + font-size: 13px; + color: #344356; + font-weight: 500; + padding: 18px 0; + border-bottom: 1px solid #F4F4F7; + .title{ + margin-right: 8px; + } + } + td{ + padding: 0 0 0 15px; + border-bottom: 1px solid #F4F4F7; + + .guide{ + font-size: 13px; + color: #697C8F; + font-weight: normal; + margin-left: 15px; + } + span{ + font-size: 13px; + color: #697C8F; + font-weight: normal; + } + } + &:last-child{ + th,td{border-bottom: none;} + } + } + } + .flx-box{ + @include flexbox; + } + } + .tooltips{ + display: block; + width: 14px; + height: 14px; + display: inline-block; + background: url(../../public/static/images/sub/tooltips.svg)no-repeat center; + background-size: cover; + cursor: pointer; + } +} + +.module-table{ + table{ + table-layout: fixed; + border-collapse: collapse; + thead{ + display: table; + table-layout: fixed; + width: 100%; + th{ + padding: 13px 0; + font-size: 13px; + color: #344356; + font-weight: 500; + border-bottom: 2px solid #E0E5EB; + text-align: center; + } + } + tbody{ + display: block; + overflow-y: auto; + tr{ + display: table; + table-layout: fixed; + width: 100%; + border: 1px solid #ECF0F4; + td{ + padding: 10px 0px; + font-size: 13px; + color: #45576F; + font-weight: 400; + text-align: center; + } + } + &::-webkit-scrollbar { + width: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #C1CCD7; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } + } + &.small{ + tbody{height: 120px;} + } + &.big{ + td, + th{ + &:nth-child(2){ + width: 121px; + } + } + tbody{ + height: 160px; + td{ + padding: 10px 20px; + } + } + } + } +} + +.roof-module-table{ + table{ + border-collapse: collapse; + thead{ + th{ + height: 40px; + padding: 0 10px; + font-size: 12px; + color: #fff; + font-weight: 500; + border: 1px solid #505050; + vertical-align: middle; + background-color: rgba(255, 255, 255, 0.05); + text-align: center; + word-break: keep-all; + } + } + tbody{ + td{ + font-size: 12px; + color: #fff; + font-weight: 400; + border: 1px solid #505050; + } + } + } } \ No newline at end of file From 547669384d99f449f0e06c1cc1afc74059f4aee1 Mon Sep 17 00:00:00 2001 From: minsik Date: Mon, 7 Oct 2024 15:18:46 +0900 Subject: [PATCH 3/6] =?UTF-8?q?=EC=B2=98=EB=A7=88.=EC=BC=80=EB=9D=BC?= =?UTF-8?q?=EB=B0=94=20=EB=B3=80=EA=B2=BD=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/static/images/canvas/eaves_icon09.svg | 10 ++++++++++ public/static/images/canvas/eaves_icon10.svg | 18 ++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 public/static/images/canvas/eaves_icon09.svg create mode 100644 public/static/images/canvas/eaves_icon10.svg diff --git a/public/static/images/canvas/eaves_icon09.svg b/public/static/images/canvas/eaves_icon09.svg new file mode 100644 index 00000000..fe4512b1 --- /dev/null +++ b/public/static/images/canvas/eaves_icon09.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/static/images/canvas/eaves_icon10.svg b/public/static/images/canvas/eaves_icon10.svg new file mode 100644 index 00000000..99147480 --- /dev/null +++ b/public/static/images/canvas/eaves_icon10.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + From 6edca86b6bbf8414bedd7df84463a684b6f5a5cd Mon Sep 17 00:00:00 2001 From: minsik Date: Mon, 7 Oct 2024 15:19:23 +0900 Subject: [PATCH 4/6] =?UTF-8?q?=ED=8C=A8=EB=84=90,=20=EB=AA=A8=EB=93=88=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/static/images/canvas/module_tab_arr.svg | 3 +++ public/static/images/canvas/module_tab_arr_white.svg | 3 +++ public/static/images/canvas/penal_arr.svg | 3 +++ public/static/images/canvas/penal_arr_white.svg | 3 +++ 4 files changed, 12 insertions(+) create mode 100644 public/static/images/canvas/module_tab_arr.svg create mode 100644 public/static/images/canvas/module_tab_arr_white.svg create mode 100644 public/static/images/canvas/penal_arr.svg create mode 100644 public/static/images/canvas/penal_arr_white.svg diff --git a/public/static/images/canvas/module_tab_arr.svg b/public/static/images/canvas/module_tab_arr.svg new file mode 100644 index 00000000..f1da9ab2 --- /dev/null +++ b/public/static/images/canvas/module_tab_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/module_tab_arr_white.svg b/public/static/images/canvas/module_tab_arr_white.svg new file mode 100644 index 00000000..49ac4437 --- /dev/null +++ b/public/static/images/canvas/module_tab_arr_white.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/penal_arr.svg b/public/static/images/canvas/penal_arr.svg new file mode 100644 index 00000000..0bd7560c --- /dev/null +++ b/public/static/images/canvas/penal_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/penal_arr_white.svg b/public/static/images/canvas/penal_arr_white.svg new file mode 100644 index 00000000..e267fb93 --- /dev/null +++ b/public/static/images/canvas/penal_arr_white.svg @@ -0,0 +1,3 @@ + + + From a6a81f76b012da18c9d951a3d5ec591769893256 Mon Sep 17 00:00:00 2001 From: minsik Date: Mon, 7 Oct 2024 15:20:20 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=EC=B2=98=EB=A7=88.=EC=BA=90=EB=9D=BC?= =?UTF-8?q?=EB=B0=94=20=EB=B3=80=EA=B2=BD=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasMenu.jsx | 3 + src/components/floor-plan/MenuDepth01.jsx | 2 + .../modal/eavesGable/EavesGableEdit.jsx | 46 ++++++++++ .../modal/eavesGable/type/Eaves.jsx | 81 +++++++++++++++++ .../modal/eavesGable/type/Gable.jsx | 87 +++++++++++++++++++ .../floor-plan/modal/eavesGable/type/Shed.jsx | 20 +++++ .../modal/eavesGable/type/WallMerge.jsx | 59 +++++++++++++ src/locales/ja.json | 5 ++ src/locales/ko.json | 5 ++ 9 files changed, 308 insertions(+) create mode 100644 src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx create mode 100644 src/components/floor-plan/modal/eavesGable/type/Eaves.jsx create mode 100644 src/components/floor-plan/modal/eavesGable/type/Gable.jsx create mode 100644 src/components/floor-plan/modal/eavesGable/type/Shed.jsx create mode 100644 src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index b0fedf65..622320a8 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -41,6 +41,7 @@ export default function CanvasMenu(props) { setShowRoofShapeSettingModal, setShowRoofShapePassivitySettingModal, setShowAuxiliaryModal, + setShowEavesGableEditModal, } = props const [menuNumber, setMenuNumber] = useState(null) @@ -88,6 +89,7 @@ export default function CanvasMenu(props) { setShowRoofShapeSettingModal, setShowRoofShapePassivitySettingModal, setShowAuxiliaryModal, + setShowEavesGableEditModal, setShowSlopeSettingModal, setShowPlaceShapeDrawingModal, type, @@ -116,6 +118,7 @@ export default function CanvasMenu(props) { const onClickPlacementInitialMenu = () => { setShowOutlineModal(false) setShowCanvasSettingModal(false) + setShowEavesGableEditModal(false) setShowPlaceShapeModal(true) } diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx index 4148ac5a..aa5c9f36 100644 --- a/src/components/floor-plan/MenuDepth01.jsx +++ b/src/components/floor-plan/MenuDepth01.jsx @@ -14,6 +14,7 @@ export default function MenuDepth01(props) { setShowRoofShapeSettingModal, setShowRoofShapePassivitySettingModal, setShowAuxiliaryModal, + setShowEavesGableEditModal, setShowSlopeSettingModal, setShowPlaceShapeDrawingModal, } = props @@ -31,6 +32,7 @@ export default function MenuDepth01(props) { setShowRoofShapeSettingModal(id === 1) setShowRoofShapePassivitySettingModal(id === 2) setShowAuxiliaryModal(id === 3) + setShowEavesGableEditModal(id === 4) setShowPlaceShapeDrawingModal(false) } diff --git a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx new file mode 100644 index 00000000..e144e717 --- /dev/null +++ b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx @@ -0,0 +1,46 @@ +import { useMessage } from '@/hooks/useMessage' +import WithDraggable from '@/components/common/draggable/withDraggable' +import { useState } from 'react' +import Eaves from '@/components/floor-plan/modal/eavesGable/type/Eaves' +import Gable from '@/components/floor-plan/modal/eavesGable/type/Gable' +import WallMerge from '@/components/floor-plan/modal/eavesGable/type/WallMerge' +import Shed from '@/components/floor-plan/modal/eavesGable/type/Shed' + +export default function EavesGableEdit({ setShowEavesGableEditModal }) { + const { getMessage } = useMessage() + const [buttonAct, setButtonAct] = useState(1) + const buttonMenu = [ + { id: 1, name: getMessage('eaves') }, + { id: 2, name: getMessage('gable') }, + { id: 3, name: getMessage('wall.merge') }, + { id: 4, name: getMessage('shed') }, + ] + return ( + +
+
+

{getMessage('modal.eaves.gable.edit')}

+ +
+
+
+ {buttonMenu.map((item) => ( + + ))} +
+
+
{getMessage('setting')}
+ {buttonAct === 1 && } + {buttonAct === 2 && } + {buttonAct === 3 && } + {buttonAct === 4 && } +
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/eavesGable/type/Eaves.jsx b/src/components/floor-plan/modal/eavesGable/type/Eaves.jsx new file mode 100644 index 00000000..37ffd5e9 --- /dev/null +++ b/src/components/floor-plan/modal/eavesGable/type/Eaves.jsx @@ -0,0 +1,81 @@ +import { useMessage } from '@/hooks/useMessage' +import Image from 'next/image' +import { useState } from 'react' + +export default function Eaves() { + const { getMessage } = useMessage() + const [type, setType] = useState() + const onChange = (e) => { + console.log(e) + setType(e.target.value) + } + return ( + <> +
+
+ + {getMessage('slope')} + +
+ +
+ 寸 +
+
+ + {getMessage('offset')} + +
+ +
+ mm +
+
+
+
+
+
+
+ onChange(e)} /> + +
+
+
+
+ react +
+
+
+
+
+
+ onChange(e)} /> + +
+
+
+
+ react +
+
+
+
+
+
+
+ +
+ mm +
+
+
+
+ react +
+
+
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/eavesGable/type/Gable.jsx b/src/components/floor-plan/modal/eavesGable/type/Gable.jsx new file mode 100644 index 00000000..03a35f32 --- /dev/null +++ b/src/components/floor-plan/modal/eavesGable/type/Gable.jsx @@ -0,0 +1,87 @@ +import { useMessage } from '@/hooks/useMessage' +import Image from 'next/image' + +export default function Gable() { + const { getMessage } = useMessage() + return ( + <> +
+
+ + {getMessage('offset')} + +
+ +
+ mm +
+
+
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ + {getMessage('slope')} + +
+ +
+ 寸 +
+
+
+
+ react +
+
+
+
+
+
+ + {getMessage('offset')} + +
+ +
+ mm +
+
+
+
+ react +
+
+
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/eavesGable/type/Shed.jsx b/src/components/floor-plan/modal/eavesGable/type/Shed.jsx new file mode 100644 index 00000000..ebf20417 --- /dev/null +++ b/src/components/floor-plan/modal/eavesGable/type/Shed.jsx @@ -0,0 +1,20 @@ +import { useMessage } from '@/hooks/useMessage' + +export default function Shed() { + const { getMessage } = useMessage() + return ( + <> +
+
+ + {getMessage('offset')} + +
+ +
+ mm +
+
+ + ) +} diff --git a/src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx b/src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx new file mode 100644 index 00000000..fbc335e6 --- /dev/null +++ b/src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx @@ -0,0 +1,59 @@ +import { useMessage } from '@/hooks/useMessage' +import Image from 'next/image' + +export default function WallMerge() { + const { getMessage } = useMessage() + return ( + <> +
+
{getMessage('modal.eaves.gable.edit.wall.merge.info')}
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ + {getMessage('offset')} + +
+ +
+ mm +
+
+
+
+ react +
+
+
+
+
+ + ) +} diff --git a/src/locales/ja.json b/src/locales/ja.json index e7840358..1c681ff1 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -144,6 +144,9 @@ "modal.canvas.setting.wallline.properties.setting.info": "※属性を変更する外壁線を選択し、軒で設定またはケラバで設定 ボタンをクリックして設定値を適用します。", "modal.canvas.setting.wallline.properties.setting.eaves": "軒で設定", "modal.canvas.setting.wallline.properties.setting.edge": "ケラバに設定", + "modal.eaves.gable.edit": "軒・ケラバ変更", + "modal.eaves.gable.edit.basic": "通常", + "modal.eaves.gable.edit.wall.merge.info": "家屋などの壁に面する屋根を作成します。", "setting": "設定", "common.message.no.data": "No data", "common.message.no.dataDown": "ダウンロードするデータがありません", @@ -300,11 +303,13 @@ "slope": "傾斜", "eaves.offset": "軒の", "gable.offset": "ケラバ出幅", + "offset": "出幅", "size": "寸", "size.angle": "寸(度)", "eaves": "軒", "gable": "ケラバ", "wall": "壁", + "wall.merge": "壁取り", "hajebichi": "ハゼビーチ", "straight.line": "直線", "right.angle": "直角", diff --git a/src/locales/ko.json b/src/locales/ko.json index 675ec655..4f320cdc 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -151,6 +151,9 @@ "modal.canvas.setting.wallline.properties.setting.info": "※ 속성을 변경할 외벽선을 선택하고, 처마로 설정 또는 케라바로 설정\n 버튼을 클릭하여 설정값을 적용하십시오.\n", "modal.canvas.setting.wallline.properties.setting.eaves": "처마로 설정", "modal.canvas.setting.wallline.properties.setting.edge": "케라바로 설정", + "modal.eaves.gable.edit": "처마・케라바 변경", + "modal.eaves.gable.edit.basic": "통상", + "modal.eaves.gable.edit.wall.merge.info": "하옥 등 벽에 접하는 지붕을 작성합니다.", "setting": "설정", "common.message.no.data": "No data", "common.message.no.dataDown": "No data to download", @@ -307,11 +310,13 @@ "slope": "경사", "eaves.offset": "처마 출폭", "gable.offset": "케라바 출폭", + "offset": "출폭", "size": "치수", "size.angle": "寸(度)", "eaves": "처마", "gable": "케라바", "wall": "벽", + "wall.merge": "벽취합", "hajebichi": "하제비치", "straight.line": "직선", "right.angle": "직각", From 6f6ba1ace82109440dc33ad38bdedd5cefc8b745 Mon Sep 17 00:00:00 2001 From: minsik Date: Mon, 7 Oct 2024 15:21:33 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=EB=8F=99=EC=84=A0=EC=9D=B4=EB=8F=99.?= =?UTF-8?q?=ED=98=95=EC=98=AC=EB=A6=BC=EB=82=BC=EB=AF=B8=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EC=B6=94=EA=B0=80(=EC=9E=91=EC=97=85=EC=A4=91)=20?= =?UTF-8?q?=EC=A7=80=EB=B6=95=ED=98=95=EC=83=81=20=EC=88=98=EB=8F=99=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80(?= =?UTF-8?q?=EC=9E=91=EC=97=85=EC=A4=91)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/FloorPlan.jsx | 6 +++ .../floor-plan/modal/movement/Movement.jsx | 40 +++++++++++++++ .../roofShape/RoofShapePassivitySetting.jsx | 50 +++++++++++++++++++ .../modal/roofShape/passivity/eaves.jsx | 42 ++++++++++++++++ .../modal/roofShape/passivity/gable.jsx | 42 ++++++++++++++++ .../modal/roofShape/passivity/shed.js | 42 ++++++++++++++++ 6 files changed, 222 insertions(+) create mode 100644 src/components/floor-plan/modal/movement/Movement.jsx create mode 100644 src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx create mode 100644 src/components/floor-plan/modal/roofShape/passivity/eaves.jsx create mode 100644 src/components/floor-plan/modal/roofShape/passivity/gable.jsx create mode 100644 src/components/floor-plan/modal/roofShape/passivity/shed.js diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index debfa4da..2c9a99c9 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -19,6 +19,8 @@ import PlacementShapeDrawing from '@/components/floor-plan/modal/placementShape/ import Slope from '@/components/floor-plan/modal/Slope' import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting' import AuxiliaryDrawing from '@/components/floor-plan/modal/auxiliary/AuxiliaryDrawing' +import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableEdit' +import Movement from '@/components/floor-plan/modal/movement/Movement' export default function FloorPlan() { const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false) @@ -30,6 +32,7 @@ export default function FloorPlan() { const [showAuxiliaryModal, setShowAuxiliaryModal] = useState(false) const [showSlopeSettingModal, setShowSlopeSettingModal] = useState(false) const [showPlaceShapeDrawingModal, setShowPlaceShapeDrawingModal] = useState(false) + const [showEavesGableEditModal, setShowEavesGableEditModal] = useState(false) const globalLocaleState = useRecoilValue(globalLocaleStore) const { get } = useAxios(globalLocaleState) @@ -62,6 +65,7 @@ export default function FloorPlan() { setShowRoofShapeSettingModal, setShowRoofShapePassivitySettingModal, setShowAuxiliaryModal, + setShowEavesGableEditModal, } useEffect(() => { @@ -128,6 +132,8 @@ export default function FloorPlan() { {showAuxiliaryModal && } {showSlopeSettingModal && } {showPlaceShapeDrawingModal && } + {showEavesGableEditModal && } + diff --git a/src/components/floor-plan/modal/movement/Movement.jsx b/src/components/floor-plan/modal/movement/Movement.jsx new file mode 100644 index 00000000..a8a7cde4 --- /dev/null +++ b/src/components/floor-plan/modal/movement/Movement.jsx @@ -0,0 +1,40 @@ +import { useMessage } from '@/hooks/useMessage' +import WithDraggable from '@/components/common/draggable/WithDraggable' +import { useState } from 'react' + +export default function Movement({}) { + const { getMessage } = useMessage() + const [buttonAct, setButtonAct] = useState(1) + const buttonMenu = [ + { id: 1, name: '銅線の移動軒' }, + { id: 2, name: '型上げ・降り' }, + ] + + return ( + +
+
+

軒・ケラバ変更

+ +
+
+
+ {buttonMenu.map((item) => ( + + ))} +
+
+
設定
+ {/*{buttonAct === 1 && }*/} + {/*{buttonAct === 2 && }*/} +
+
+ +
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx new file mode 100644 index 00000000..2bd4988a --- /dev/null +++ b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx @@ -0,0 +1,50 @@ +import { useState } from 'react' +import WithDraggable from '@/components/common/draggable/WithDraggable' +import Eaves from '@/components/floor-plan/modal/roofShape/passivity/eaves' +import Gable from '@/components/floor-plan/modal/roofShape/passivity/gable' +import Shed from '@/components/floor-plan/modal/roofShape/passivity/shed' + +export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySettingModal }) { + const [buttonAct, setButtonAct] = useState(1) + const buttons = [ + { id: 1, name: '軒' }, + { id: 2, name: 'ケラバ' }, + { id: 3, name: '漂流' }, + ] + return ( + +
+
+

屋根形状の設定

+ +
+
+
+ {buttons.map((button) => ( + + ))} +
+
+
設定
+
+ {buttonAct === 1 && } + {buttonAct === 2 && } + {buttonAct === 3 && } +
+
+ + +
+
+
+ +
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/roofShape/passivity/eaves.jsx b/src/components/floor-plan/modal/roofShape/passivity/eaves.jsx new file mode 100644 index 00000000..99286117 --- /dev/null +++ b/src/components/floor-plan/modal/roofShape/passivity/eaves.jsx @@ -0,0 +1,42 @@ +export default function Eaves() { + return ( + <> +
+ + 傾斜 + +
+ +
+ 寸法 +
+
+ + 軒の + +
+ +
+ mm +
+
+ + ケラバ 出幅 + +
+ +
+ mm +
+
+ + 片流幅 + +
+ +
+ mm +
+ + ) +} diff --git a/src/components/floor-plan/modal/roofShape/passivity/gable.jsx b/src/components/floor-plan/modal/roofShape/passivity/gable.jsx new file mode 100644 index 00000000..848d5d73 --- /dev/null +++ b/src/components/floor-plan/modal/roofShape/passivity/gable.jsx @@ -0,0 +1,42 @@ +export default function Gable() { + return ( + <> +
+ + 傾斜 + +
+ +
+ 寸法 +
+
+ + 軒の + +
+ +
+ mm +
+
+ + ケラバ 出幅 + +
+ +
+ mm +
+
+ + 片流幅 + +
+ +
+ mm +
+ + ) +} diff --git a/src/components/floor-plan/modal/roofShape/passivity/shed.js b/src/components/floor-plan/modal/roofShape/passivity/shed.js new file mode 100644 index 00000000..8e767772 --- /dev/null +++ b/src/components/floor-plan/modal/roofShape/passivity/shed.js @@ -0,0 +1,42 @@ +export default function Shed() { + return ( + <> +
+ + 傾斜 + +
+ +
+ 寸法 +
+
+ + 軒の + +
+ +
+ mm +
+
+ + ケラバ 出幅 + +
+ +
+ mm +
+
+ + 片流幅 + +
+ +
+ mm +
+ + ) +}