From e6d2733a1227ec70b4d58384d3280ea3f16af9f3 Mon Sep 17 00:00:00 2001 From: minsik Date: Wed, 16 Oct 2024 17:50:52 +0900 Subject: [PATCH] =?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 | 118 +- src/styles/_grid-detail.scss | 181 +- src/styles/_modal.scss | 3333 +++++++++++++++------------------- src/styles/_reset.scss | 15 + src/styles/_submodal.scss | 119 ++ src/styles/_table.scss | 151 ++ src/styles/contents.scss | 3 +- src/styles/grid.scss | 1 - 8 files changed, 1965 insertions(+), 1956 deletions(-) diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index dc02fc85..37233d13 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -627,9 +627,9 @@ justify-content: flex-end; margin-top: 20px; } - .pagination-wrap{ - margin-top: 24px; - } +} +.pagination-wrap{ + margin-top: 24px; } .infomation-wrap{ @@ -811,7 +811,10 @@ font-size: 12px; font-weight: 400; color: #45576F; - margin-bottom: 5px; + margin-bottom: 8px; + &:last-child{ + margin-bottom: 0; + } } } &::-webkit-scrollbar { @@ -1090,4 +1093,111 @@ } } } +} + +.community-search-warp{ + display: flex; + flex-direction: column; + align-items: center; + padding: 10px 0 30px 0; + border-bottom: 1px solid #E5E5E5; + margin-bottom: 24px; + .community-search-box{ + position: relative; + display: flex; + align-items: center; + width: 580px; + height: 45px; + padding: 0 45px 0 20px; + margin-bottom: 20px; + border-radius: 2px; + border: 1px solid #101010; + .community-input{ + width: 100%; + height: 100%; + font-size: 13px; + font-weight: 400; + color: #101010; + &::placeholder{ + color: #C8C8C8; + } + } + .community-search-ico{ + position: absolute; + top: 50%; + right: 20px; + transform: translateY(-50%); + flex: none; + width: 21px; + height: 100%; + background: url(../../public/static/images/sub/community_search.svg)no-repeat center; + background-size: 21px 21px; + z-index: 3; + } + } + .community-search-keyword{ + font-size: 13px; + font-weight: 400; + color: #45576F; + span{ + font-weight: 600; + color: #F16A6A; + } + } +} + +// 자료 다운로드 +.file-down-list{ + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 14px; + .file-down-item{ + display: flex; + align-items: center; + padding: 24px; + border-radius: 4px; + border: 1px solid #E5E5E5; + background: #FFF; + transition: all .15s ease-in-out; + cursor: pointer; + .file-item-info{ + .item-num{ + display: inline-block; + padding: 6px 17.5px; + border-radius: 60px; + background-color: #F4F4F7; + font-size: 13px; + font-weight: 600; + color: #101010; + margin-bottom: 15px; + } + .item-name{ + font-size: 16px; + color: #101010; + font-weight: 500; + margin-bottom: 13px; + } + .item-date{ + font-size: 13px; + font-weight: 400; + color: #344356; + } + } + .file-down-box{ + display: flex; + align-items: center; + flex: none; + margin-left: auto; + height: 100%; + .file-down-btn{ + width: 36px; + height: 36px; + background: url(../../public/static/images/sub/file_down_btn.svg)no-repeat center; + background-size: cover; + } + } + &:hover{ + background-color: #F4F4F7; + } + } } \ No newline at end of file diff --git a/src/styles/_grid-detail.scss b/src/styles/_grid-detail.scss index 79a8cb9a..048a1946 100644 --- a/src/styles/_grid-detail.scss +++ b/src/styles/_grid-detail.scss @@ -1,63 +1,128 @@ -.q-grid { - height: fit-content; - .ag-theme-quartz { - outline: none; - border: none; - --ag-border-radius: 0px; - --ag-wrapper-border-radius: 0px; - --ag-header-height: 40px; - --ag-header-foreground-color: white; - --ag-header-background-color: #5d6a76; - // --ag-header-cell-hover-background-color: rgb(80, 40, 140); - --ag-header-cell-moving-background-color: #5d6a76; - .ag-root-wrapper { - outline: none; - border: none; +.q-grid{ + position: relative; + .ag-theme-quartz { + outline: none; + border: none; + --ag-border-radius: 0px; + --ag-wrapper-border-radius: 0px; + --ag-header-height: 40px; + --ag-header-foreground-color: white; + --ag-header-background-color: #5D6A76; + // --ag-header-cell-hover-background-color: rgb(80, 40, 140); + --ag-header-cell-moving-background-color: #5D6A76; + .ag-root-wrapper{ + outline: none; + border: none; + + } + .ag-header{ + border-bottom: none; + border-radius: 4px; + } + .ag-header-cell{ + font-size: 13px; + color: #fff; + } + .ag-header-cell-label{ + justify-content: center; + } + .ag-header-cell-resize{ + &:after{ + display: none; + } + } + .ag-row{ + border-bottom: 1px solid #ECF0F4; + &:nth-child(2n){ + background-color: #F7F9FA; + } + &.important_row{ + background-color: #e7e7e7; + } + } + .ag-cell{ + font-size: 13px; + color: #45576F; + } + .ag-icon-desc::before, + .ag-icon-asc::before, + .ag-icon-filter::before{ + color: #fff; + } } - .ag-header { - border-bottom: none; - border-radius: 4px; + .copy-ico-wrap{ + display: flex; + align-items: center; + .copy_ico{ + width: 18px; + height: 18px; + background: url(../../public/static/images/sub/copy_grid_ico.svg)no-repeat center; + background-size: cover; + margin-left: 12px; + } } - .ag-header-cell { - font-size: 13px; - color: #fff; + &.no-cols{ + .ag-row{ + &:nth-child(2n){ + background-color: #fff; + } + } } - .ag-header-cell-label { - justify-content: center; + .form-flex-wrap{ + display: flex; + align-items: center; + width: 100%; + .grid-tip{ + margin-left: auto; + } } - .ag-header-cell-resize { - &:after { - display: none; - } - } - .ag-row { - border-bottom: 1px solid #ecf0f4; - &:nth-child(2n) { - background-color: #f7f9fa; - } - &.important_row { - background-color: #e7e7e7; - } - } - .ag-cell { - font-size: 13px; - color: #45576f; - } - .ag-icon-desc::before, - .ag-icon-asc::before, - .ag-icon-filter::before { - color: #fff; - } - } - .copy-ico-wrap { - display: flex; - align-items: center; - .copy_ico { - width: 18px; - height: 18px; - background: url(../../public/static/images/sub/copy_grid_ico.svg) no-repeat center; - background-size: cover; - margin-left: 12px; - } - } } + +// grid-button +.grid-cell-btn{ + display: flex; + flex-direction: column; + gap: 5px; + width: 117px; + margin: 0 auto; + .grid-btn{ + display: block; + width: 100%; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + background-color: #fff; + border: 1px solid #94A0AD; + background-color: transparent; + border-radius: 2px; + font-size: 13px; + color: #94A0AD; + font-weight: 400; + text-align: center; + span{ + display: block; + margin-right: 5px; + &.file{ + width: 13px; + height: 14px; + background: url(../../public/static/images/sub/grid-btn-file.svg)no-repeat center; + background-size: cover; + } + &.excel{ + width: 14px; + height: 13px; + background: url(../../public/static/images/sub/grid-btn-excel.svg)no-repeat center; + background-size: cover; + } + } + } +} + +.grid-tip{ + display: block; + width: 15px; + height: 15px; + background: url(../../public/static/images/sub/grid_tip.svg)no-repeat center; + background-size: cover; +} \ No newline at end of file diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index d70732b8..9bd59e3d 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -4,1965 +4,1514 @@ $pop-bold-weight: 500; $pop-normal-size: 12px; $alert-color: #101010; -@keyframes mountpop { - from { - opacity: 0; - scale: 0.95; - } - to { - opacity: 1; - scale: 1; - } +@keyframes mountpop{ + from{opacity: 0; scale: 0.95;} + to{opacity: 1; scale: 1;} +} +@keyframes unmountpop{ + from{opacity: 1; scale: 1;} + to{opacity: 0; scale: 0.95;} } -@keyframes unmountpop { - from { - opacity: 1; - scale: 1; - } - to { - opacity: 0; - scale: 0.95; - } -} - -.normal-font { - font-size: 12px; - font-weight: 400; - color: #fff; -} - -.bold-font { - font-size: 12px; - font-weight: 500; - color: #fff; -} - -.modal-pop-wrap { - position: fixed; - width: 100%; - height: -webkit-fit-content; - height: -moz-fit-content; - height: fit-content; - border: 1px solid #000; - border-radius: 4px; - background-color: #272727; - z-index: 9999999; - - &.xxxm { - width: 240px; - } - - &.xxm { - width: 270px; - } - - &.xm { - width: 300px; - } - - &.ssm { - width: 380px; - } - - &.sm { - width: 580px; - } - - &.r { - width: 400px; - } - - &.lr { - width: 440px; - } - - &.lrr { - width: 480px; - } - - &.ml { - width: 530px; - } - - &.l-2 { - width: 640px; - } - - &.lx-2 { - width: 740px; - } - - &.lx { - width: 770px; - } - - &.l { - width: 800px; - } - - &.mount { - animation: mountpop .17s ease-in-out forwards; - } - - &.unmount { - animation: unmountpop .17s ease-in-out forwards; - } - - &.alert { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: transparent; - border: none; - - .modal-head { - background-color: transparent; - padding: 0 0 8px; - - .modal-close { - width: 20px; - height: 20px; - background: url(../../public/static/images/canvas/alert_close.svg) no-repeat center; - } - } - - .modal-body { - background-color: #fff; - padding: 22px; - border-radius: 4px; - border: 1px solid #101010; - color: $alert-color; - - .alert-title { - font-size: 13px; - font-weight: 700; - color: $alert-color; - margin-bottom: 15px; - } - } - } -} - -.modal-head { - display: flex; - align-items: center; - padding: 10px 24px; - background-color: #000; - // overflow: hidden; - h1.title { - font-size: 13px; - color: $pop-color; - font-weight: 700; - } - - .modal-close { - margin-left: auto; - color: transparent; - font-size: 0; - width: 10px; - height: 10px; - background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center; - } -} - -.modal-body { - padding: 24px; - - .modal-btn-wrap { - display: flex; - align-items: center; - gap: 5px; - - button { - flex: 1; - } - - &.sub { - button { - flex: 1 1 auto; - padding: 0; - } - - margin-bottom: 14px; - } - } - - .modal-check-btn-wrap { - margin-top: 15px; - - .check-wrap-title { - font-size: $pop-normal-size; - color: $pop-color; - font-weight: 600; - - &.light { - font-weight: $pop-normal-weight; - } - } - - .flex-check-box { - display: flex; - flex-wrap: wrap; - gap: 10px; - margin-top: 15px; - - &.for2 { - justify-content: flex-end; - - button { - width: calc(50% - 5px); - } - - &.btn { - gap: 5px; - - button { - width: calc(50% - 2.5px); - } - } - } - - &.for-line { - button { - flex: 1; - } - } - } - } - - .outer-line-wrap { - border-top: 1px solid #3C3C3C; - margin-top: 10px; - padding-top: 15px; - margin-bottom: 15px; - - > div { - margin-bottom: 15px; - - &:last-child { - margin-bottom: 0; - } - } - } - - .modal-guide { - display: block; - font-size: $pop-normal-size; - color: $alert-color; - font-weight: $pop-normal-weight; - } -} - -.adsorption-point { - display: flex; - align-items: center; - background-color: #3A3A3A; - border-radius: 3px; - padding-left: 11px; - overflow: hidden; - transition: all 0.17s ease-in-out; - - span { - font-size: $pop-normal-size; - color: #898989; - } - - i { - display: flex; - align-items: center; - padding: 0 7px; - margin-left: auto; - height: 100%; - font-size: 13px; - color: #898989; - } - - &.act { - i { - color: $pop-color; - background-color: #1083E3; - } - } -} - -// grid-option -.grid-check-form { - display: flex; - align-items: center; - gap: 15px; - padding-bottom: 15px; - - &.border { - border-bottom: 1px solid #424242; - } -} - -.grid-option-wrap { - .grid-option-box { - display: flex; - align-items: center; - background-color: transparent; - border: 1px solid #3D3D3D; - border-radius: 2px; - padding: 15px 10px; - gap: 20px; - margin-bottom: 10px; - - .grid-input-form { - display: flex; - align-items: center; - - span { - flex: none; - font-size: $pop-normal-size; - color: $pop-color; - font-weight: $pop-bold-weight; - } - - .input-grid { - width: 54px; - - input { - width: 100%; - } - } - } - - &:last-child { - margin-bottom: 0; - } - } -} - -.select-form { - .sort-select { - width: 100%; - } -} - -.grid-select { - flex: 1; - - &.no-flx { - flex: unset; - } - - .sort-select { - width: 100%; - background-color: #313131; - min-width: auto; +.normal-font{ font-size: 12px; - border: none; - - p { - font-size: 12px; - } - - > ul { - border: none; - } - } - - &.right { - p { - text-align: right; - } - - ul { - li { - justify-content: flex-end; - } - } - } + font-weight: 400; + color: #fff; } - -.grid-btn-wrap { - padding-top: 15px; - text-align: right; - - button { - padding: 0 10px; - } -} - -// grid copy -.grid-option-tit { - font-size: $pop-normal-size; - color: $pop-color; - font-weight: $pop-normal-weight; - padding-bottom: 15px; - -} - -.grid-direction { - display: flex; - align-items: center; - gap: 5px; - flex: 1; -} - -.direction { - width: 22px; - height: 22px; - background-color: #757575; - background-image: url(../../public/static/images/canvas/grid_option_arr.svg); - background-repeat: no-repeat; - background-position: center; - background-size: 16px 15px; - border-radius: 50%; - transition: all .15s ease-in-out; - opacity: 0.6; - - &.down { - transform: rotate(180deg); - } - - &.left { - transform: rotate(-90deg); - } - - &.right { - transform: rotate(90deg); - } - - &:hover, - &.act { - opacity: 1; - } -} - -// grid-move -.move-form { - p { - font-size: $pop-normal-size; - color: $pop-color; - font-weight: $pop-bold-weight; - } -} - -.input-move-wrap { - display: flex; - align-items: center; - gap: 5px; - - span { - color: $pop-color; - font-size: $pop-normal-size; - } - - .input-move { - width: 130px; - - input { - width: 100%; - } - } -} - -.direction-move-wrap { - flex: none; - display: grid; - grid-template-columns: 1fr 1fr; - gap: 10px; -} - -// 배치면 초기 설정 -.placement-table { - table { - table-layout: fixed; - - tr { - th { - display: flex; - align-items: center; - font-size: $pop-normal-size; - color: $pop-color; - font-weight: $pop-bold-weight; - padding: 18px 0; - border-bottom: 1px solid #424242; - } - - td { - font-size: $pop-normal-size; - color: $pop-color; - border-bottom: 1px solid #424242; - padding-left: 20px; - } - - &:first-child { - td, - th { - padding-top: 0; - } - } - } - } - - .tooltip { - position: relative; - display: block; - width: 15px; - height: 15px; - margin-left: 5px; - background: url(../../public/static/images/canvas/pop_tip.svg) no-repeat center; - background-size: cover; - } - - &.light { - padding: 0; - - th, td { - color: $alert-color; - border-bottom: none; - border-top: 1px solid #EFEFEF; - } - - th { - padding: 14px 0; - } - - tr { - &:first-child { - td, - th { - padding-top: 14px; - } - } - - &:last-child { - td, - th { - padding-bottom: 0px; - } - } - } - } -} - -.pop-form-radio { - display: flex; - align-items: center; - gap: 10px; -} - -.placement-option { - display: flex; - align-items: center; - gap: 20px; -} - -.select-wrap { - div { - width: 100%; - } -} - -.flex-ment { - display: flex; - align-items: center; - gap: 5px; - - span { - font-size: $pop-normal-size; - color: $pop-color; - font-weight: $pop-normal-weight; - } -} - -// 외벽선 그리기 -.outline-wrap { - padding: 24px 0; - border-top: 1px solid #424242; - - .outline-inner { - display: flex; - align-items: center; - margin-bottom: 14px; - - &:last-child { - margin-bottom: 0; - } - - .outline-form { - // width: 50%; - margin-right: 15px; - } - } - - &:last-child { - border-bottom: 1px solid #424242; - } -} - -.outline-form { - display: flex; - align-items: center; - - span { - width: 60px; - flex: none; - font-size: $pop-normal-size; - font-weight: $pop-bold-weight; - color: $pop-color; - margin-right: 10px; - - &.thin { - width: auto; - font-weight: $pop-normal-weight; - margin-right: 0; - } - } - - .reset-btn { - flex: none; - width: 30px; - height: 30px; - background: transparent; - border: 1px solid #484848; - border-radius: 2px; - margin-left: 5px; - background-image: url(../../public/static/images/canvas/reset_ico.svg); - background-repeat: no-repeat; - background-size: 12px 12px; - background-position: center; - } - - &:last-child { - margin-right: 0; - } -} - -.cul-wrap { - display: flex; - - .outline-box { - width: 50%; - margin-right: 15px; - - .outline-form { - width: 100%; - margin-bottom: 14px; - margin-right: 0; - - &:last-child { - margin-bottom: 0; - } - } - } - - .cul-box { - display: flex; - align-items: center; - justify-content: center; - width: 50%; - background-color: #3D3D3D; - border-radius: 2px; - } -} - -// 외벽선 속성 설정 -.properties-guide { - font-size: $pop-normal-size; - color: #AAA; - font-weight: $pop-normal-weight; - margin-bottom: 14px; -} - -.setting-tit { - font-size: 13px; - color: $pop-color; - font-weight: $pop-bold-weight; - margin-bottom: 10px; -} - -.properties-setting-wrap { - &.outer { - margin-top: 24px; - } - - .setting-btn-wrap { - display: flex; - align-items: center; - padding: 14px 0; - border-top: 1px solid #424242; - border-bottom: 1px solid #424242; - - .setting-btn { - display: block; - width: 100%; - height: 40px; - font-size: 13px; - color: #fff; - font-weight: 700; - border-radius: 2px; - transition: all .15s ease-in-out; - - &.green { - background-color: #305941; - border: 1px solid #45CD7D; - - &:hover { - background-color: #3a6b4e; - } - } - - &.blue { - background-color: #2E5360; - border: 1px solid #3FBAE6; - - &:hover { - background-color: #365f6e; - } - } - } - } -} - -// 지붕형상 설정 -.roof-shape-menu { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-template-rows: 1fr 1fr; - gap: 24px 10px; - margin-bottom: 24px; - - .shape-box { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - padding: 13px; - background-color: #3D3D3D; - transition: background .15s ease-in-out; - - img { - max-width: 100%; - } - } - - .shape-title { - font-size: $pop-normal-size; - font-weight: $pop-bold-weight; - color: $pop-color; - margin-top: 10px; - text-align: center; - transition: color .15s ease-in-out; - } - - .shape-menu-box { - &.act, - &:hover { - .shape-box { - background-color: #008BFF; - } - - .shape-title { - color: #008BFF; - } - } - } -} - -.setting-box { - padding: 14px 0; - border-top: 1px solid #424242; - border-bottom: 1px solid #424242; -} - -.padding-form { - padding-left: 23px; -} - -.discrimination-box { - padding: 16px 12px; - border: 1px solid #3D3D3D; - border-radius: 2px; -} - -.modal-bottom-border-bx { - margin-top: 24px; - padding-bottom: 14px; - border-bottom: 1px solid #424242; -} - -// 처마∙케라바 변경 -.eaves-keraba-table { - display: table; - border-collapse: collapse; - - .eaves-keraba-item { - display: table-row; - - .eaves-keraba-th, - .eaves-keraba-td { - font-size: $pop-normal-size; - color: $pop-color; - font-weight: $pop-normal-weight; - display: table-cell; - vertical-align: middle; - padding-bottom: 14px; - } - - .eaves-keraba-td { - padding-left: 10px; - } - - .eaves-keraba-ico { - display: flex; - align-items: center; - justify-content: center; - padding: 5px; - background-color: #3D3D3D; - border: 1px solid #3D3D3D; - border-radius: 2px; - cursor: pointer; - - &.act { - border: 1px solid #ED0004; - } - } - - &:last-child { - .eaves-keraba-th, - .eaves-keraba-td { - padding-bottom: 0; - } - } - } -} - -.guide { - font-size: $pop-normal-size; - font-weight: $pop-normal-weight; - color: $pop-color; - margin-bottom: 24px; - - &.sm { - margin-bottom: 15px; - } - - span { - display: block; - } -} - -// 지붕면 할당 -.allocation-select-wrap { - display: flex; - align-items: center; - padding-bottom: 14px; - border-bottom: 1px solid #424242; - margin-bottom: 14px; - - span { - font-size: $pop-normal-size; - color: $pop-color; - font-weight: $pop-bold-weight; - margin-right: 10px; - } - - .allocation-edit { - display: flex; - align-items: center; - height: 30px; - padding: 0 10px; - margin-left: 5px; - font-size: $pop-normal-size; - color: $pop-color; - font-weight: $pop-normal-weight; - border: 1px solid #484848; - background-color: #323234; - - i { - display: block; - width: 12px; - height: 12px; - margin-right: 5px; - background: url(../../public/static/images/canvas/allocation_edit.svg) no-repeat center; - background-size: cover; - } - } -} - -.block-box { - display: flex; - align-items: center; - gap: 10px; - margin-bottom: 10px; - - .flex-ment { - gap: 10px; - - .dec { - text-decoration: underline; - } - - .delete { - display: block; - width: 15px; - height: 15px; - background: url(../../public/static/images/canvas/allocation_delete.svg) no-repeat center; - background-size: cover; - } - } - - &:last-child { - margin-bottom: 0; - } -} - -.icon-btn-wrap { - flex: 1; - display: flex; - align-items: center; - gap: 5px; - - button { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 30px; - font-size: $pop-normal-size; - font-weight: $pop-normal-weight; - color: $pop-color; - border: 1px solid #646464; - border-radius: 2px; - padding: 0 10px; - transition: all .15s ease-in-out; - - i { - height: 15px; - display: block; - margin-left: 10px; - background-repeat: no-repeat; - background-position: center; - background-size: cover; - transition: all .15s ease-in-out; - - &.allocation01 { - background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg); - width: 15px; - } - - &.allocation02 { - background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg); - width: 18px; - } - } - - &.act, - &:hover { - color: #101010; - border: 1px solid #101010; - background-color: #fff; - - i { - &.allocation01 { - background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg); - } - - &.allocation02 { - background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg); - } - } - } - } -} - -// 경사설정 -.slope-wrap { - padding-bottom: 24px; - border-bottom: 1px solid #424242; -} - -// 면형상 배치 -.plane-shape-menu { - display: grid; - grid-template-columns: repeat(6, 1fr); - grid-template-rows: repeat(3, 90px); - gap: 10px; - margin-bottom: 10px; - - .shape-menu-box { - border-radius: 2px; - background-color: #3D3D3D; - padding: 8px; - transition: all .15s ease-in-out; - - .shape-box { - display: flex; - justify-content: center; - align-items: center; - position: relative; - width: 100%; - height: 100%; - background-color: #313131; - border-radius: 2px; - } - - &.act, - &:hover { - background-color: #008BFF; - } - } -} - -.shape-library { - display: flex; - align-items: center; - justify-content: center; - gap: 5px; - padding: 5px; - background-color: #3D3D3D; - margin-bottom: 24px; - - .library-btn { - width: 30px; - height: 30px; - border: 1px solid #6C6C6C; - border-radius: 2px; - background-color: transparent; - background-repeat: no-repeat; - background-position: center; - transition: all .15s ease-in-out; - - &.ico01 { - background-image: url(../../public/static/images/canvas/shape_labrary01.svg); - background-size: 14px 14px; - } - - &.ico02 { - background-image: url(../../public/static/images/canvas/shape_labrary02.svg); - background-size: 13px 17px; - } - - &.ico03 { - background-image: url(../../public/static/images/canvas/shape_labrary03.svg); - background-size: 17px 13px; - } - - &:hover { - border-color: #1083E3; - background-color: #1083E3; - } - } -} - -.plane-shape-wrapper { - display: flex; - gap: 10px; - - .plane-box { - padding: 10px; - border-radius: 2px; - background-color: #3D3D3D; - - .plane-box-tit { - font-size: $pop-normal-size; - font-weight: 600; - color: $pop-color; - margin-bottom: 10px; - } - - &.shape-box { - flex: 1; - - .shape-box-inner { - display: flex; - gap: 10px; - min-height: 140px; - - .shape-img { - position: relative; - flex: 1; - background-color: #fff; - border-radius: 2px; - - img { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - } - - .shape-data { - flex: none; - width: 190px; - background-color: #313131; - border-radius: 2px; - padding: 15px; - - .eaves-keraba-table { - .eaves-keraba-item { - .eaves-keraba-th, - .eaves-keraba-td { - padding-bottom: 10px; - } - - &:last-child { - .eaves-keraba-th, - .eaves-keraba-td { - padding-bottom: 0px; - } - } - } - } - } - } - } - - &.direction-box { - display: flex; - flex-direction: column; - flex: none; - width: 180px; - - .plane-direction-box { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - width: 100%; - padding: 10px 5px; - } - } - } -} - -.plane-direction { - width: 150px; - position: relative; - height: 120px; - - span { - position: absolute; +.bold-font{ font-size: 12px; font-weight: 500; - color: #B1B1B1; - - &.top { - top: 0; - left: 50%; - transform: translateX(-50%); - } - - &.right { - top: 50%; - right: 0; - transform: translateY(-50%); - } - - &.bottom { - bottom: 0; - left: 50%; - transform: translateX(-50%); - } - - &.left { - top: 50%; - left: 0; - transform: translateY(-50%); - } - } - - .plane-btn { - position: absolute; - width: 28px; - height: 28px; - background-color: #777777; - background-image: url(../../public/static/images/canvas/plane_arr.svg); - background-size: 12px 13px; - background-repeat: no-repeat; - background-position: center; - border-radius: 50%; - transition: all .15s ease-in-out; - - &.up { - top: 22px; - left: 50%; - transform: translateX(-50%); - } - - &.right { - top: 50%; - right: 32px; - transform: translateY(-50%) rotate(90deg); - } - - &.down { - bottom: 22px; - left: 50%; - transform: translateX(-50%) rotate(180deg); - } - - &.left { - top: 50%; - left: 32px; - transform: translateY(-50%) rotate(270deg); - } - - &:hover, - &.act { - background-color: #fff; - background-image: url(../../public/static/images/canvas/plane_arr_act.svg); - } - } + color: #fff; } -.plane-tab-guide { - font-size: $pop-normal-size; - font-weight: $pop-normal-weight; - color: $pop-color; - margin-top: 24px; - padding-bottom: 14px; - border-bottom: 1px solid #424242; -} - -// 오브젝트 배치 -.mb-box { - margin-bottom: 24px; -} - -.object-direction-wrap { - display: flex; - align-items: center; - justify-content: center; -} - -.discrimination-tit { - font-size: 13px; - color: #fff; - font-weight: 500; -} - -.object-size-wrap { - display: flex; - min-height: 206px; - gap: 24px; - margin-top: 14px; - - .object-size-img { - position: relative; - flex: none; - width: 200px; - background-color: #fff; - - img { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); +.modal-pop-wrap{ + position: fixed; + width: 100%; + height: -webkit-fit-content; + height: -moz-fit-content; + height: fit-content; + border: 1px solid #000; + border-radius: 4px; + background-color: #272727; + z-index: 9999999; + &.xxxm{ + width: 240px; } - } -} - -// 표시변경 -.display-change-wrap { - margin: 24px 0; -} - -.warning { - font-size: $pop-normal-size; - font-weight: $pop-normal-weight; - color: #FFAFAF; -} - -// 각 변 속성 변경 -.radio-grid-wrap { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 24px 15px; -} - -// 면 흐름 설정 -.drawing-flow-wrap { - display: flex; - gap: 10px; - - .discrimination-box { - flex: 1; - display: flex; - flex-direction: column; - - .object-direction-wrap { - flex: 1; + &.xxm{ + width: 270px; } - } -} - -.compas-box { - display: flex; - align-items: center; - justify-content: center; -} - -.compas-box-inner { - position: relative; - width: 200px; - height: 200px; - border-radius: 50%; - - .circle { - position: absolute; - width: 12px; - height: 12px; - border: 1px solid #fff; - border-radius: 50%; - top: 95%; - left: 50%; - transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */ - cursor: pointer; - z-index: 3; - /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */ - i { - position: absolute; - top: 12.5px; - left: 50%; - font-size: 11px; - color: #8B8B8B; - font-weight: 500; - -webkit-user-select: none; - -moz-user-select: none; - -ms-use-select: none; - user-select: none; + &.xm{ + width: 300px; } - - &:nth-child(1) { - transform: rotate(180deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(180deg); - } + &.ssm{ + width: 380px; } - - &:nth-child(2) { - transform: rotate(195deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(165deg); - } + &.sm{ + width: 580px; } - - &:nth-child(3) { - transform: rotate(210deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(150deg); - } + &.r{ + width: 400px; } - - &:nth-child(4) { - transform: rotate(225deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(135deg); - } + &.lr{ + width: 440px; } - - &:nth-child(5) { - transform: rotate(240deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(120deg); - } + &.lrr{ + width: 480px; } - - &:nth-child(6) { - transform: rotate(255deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(105deg); - } + &.ml{ + width: 530px; } - - &:nth-child(7) { - transform: rotate(270deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(90deg); - } + &.l-2{ + width: 640px; } - - &:nth-child(8) { - transform: rotate(285deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(75deg); - } + &.lx-2{ + width: 740px; } - - &:nth-child(9) { - transform: rotate(300deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(60deg); - } + &.lx{ + width: 770px; } - - &:nth-child(10) { - transform: rotate(315deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(45deg); - } + &.l{ + width: 800px; } - - &:nth-child(11) { - transform: rotate(330deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(30deg); - } + &.mount{ + animation: mountpop .17s ease-in-out forwards; } - - &:nth-child(12) { - transform: rotate(345deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(15deg); - } + &.unmount{ + animation: unmountpop .17s ease-in-out forwards; } - - &:nth-child(13) { - transform: rotate(0deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(0deg); - } - } - - &:nth-child(14) { - transform: rotate(15deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(-15deg); - } - } - - &:nth-child(15) { - transform: rotate(30deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(-30deg); - } - } - - &:nth-child(16) { - transform: rotate(45deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(-45deg); - } - } - - &:nth-child(17) { - transform: rotate(60deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(-60deg); - } - } - - &:nth-child(18) { - transform: rotate(75deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(-75deg); - } - } - - &:nth-child(19) { - transform: rotate(90deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(-90deg); - } - } - - &:nth-child(20) { - transform: rotate(105deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(-105deg); - } - } - - &:nth-child(21) { - transform: rotate(120deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(-120deg); - } - } - - &:nth-child(22) { - transform: rotate(135deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(-135deg); - } - } - - &:nth-child(23) { - transform: rotate(150deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(-150deg); - } - } - - &:nth-child(24) { - transform: rotate(165deg) translate(-50%, -50%); - - i { - transform: translateX(-50%) rotate(-165deg); - } - } - - &.act { - &::after { - content: ''; + &.alert{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - width: 5px; - height: 5px; - background-color: #fff; - } - - i { - color: #fff; - } + background-color: transparent; + border: none; + .modal-head{ + background-color: transparent; + padding: 0 0 8px; + .modal-close{ + width: 20px; + height: 20px; + background: url(../../public/static/images/canvas/alert_close.svg)no-repeat center; + } + } + .modal-body{ + background-color: #fff; + padding: 22px; + border-radius: 4px; + border: 1px solid #101010; + color: $alert-color; + .alert-title{ + font-size: 13px; + font-weight: 700; + color: $alert-color; + margin-bottom: 15px; + } + } } - } +} +.modal-head{ + display: flex; + align-items: center; + padding: 10px 24px; + background-color: #000; + // overflow: hidden; + h1.title{ + font-size: 13px; + color: $pop-color; + font-weight: 700; + } + .modal-close{ + margin-left: auto; + color: transparent; + font-size: 0; + width: 10px; + height: 10px; + background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center; + } +} +.modal-body{ + padding: 24px; + .modal-btn-wrap{ + display: flex; + align-items: center; + gap: 5px; + button{ + flex: 1; + } + &.sub{ + button{ + flex: 1 1 auto; + padding: 0; + } + margin-bottom: 14px; + } + } + .modal-check-btn-wrap{ + margin-top: 15px; + .check-wrap-title{ + font-size: $pop-normal-size; + color: $pop-color; + font-weight: 600; + &.light{ + font-weight: $pop-normal-weight; + } + } + .flex-check-box{ + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 15px; + &.for2{ + justify-content: flex-end; + button{ + width: calc(50% - 5px); + } + &.btn{ + gap: 5px; + button{ + width: calc(50% - 2.5px); + } + } + } + &.for-line{ + button{ + flex: 1; + } + } + } + } + .outer-line-wrap{ + border-top: 1px solid #3C3C3C; + margin-top: 10px; + padding-top: 15px; + margin-bottom: 15px; + > div{ + margin-bottom: 15px; + &:last-child{ + margin-bottom: 0; + } + } + } + .modal-guide{ + display: block; + font-size: $pop-normal-size; + color: $alert-color; + font-weight: $pop-normal-weight; + } +} - .compas { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 148px; - height: 148px; - border: 4px solid #fff; +.adsorption-point{ + display: flex; + align-items: center; + background-color: #3A3A3A; + border-radius: 3px; + padding-left: 11px; + overflow: hidden; + transition: all 0.17s ease-in-out; + span{ + font-size: $pop-normal-size; + color: #898989; + } + i{ + display: flex; + align-items: center; + padding: 0 7px; + margin-left: auto; + height: 100%; + font-size: 13px; + color: #898989; + } + &.act{ + i{ + color: $pop-color; + background-color: #1083E3; + } + } +} + +// grid-option +.grid-check-form{ + display: flex; + align-items: center; + gap: 15px; + padding-bottom: 15px; + &.border{ + border-bottom: 1px solid #424242; + } +} +.grid-option-wrap{ + .grid-option-box{ + display: flex; + align-items: center; + background-color: transparent; + border: 1px solid #3D3D3D; + border-radius: 2px; + padding: 15px 10px; + gap: 20px; + margin-bottom: 10px; + .grid-input-form{ + display: flex; + align-items: center; + span{ + flex: none; + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-bold-weight; + } + .input-grid{ + width: 54px; + input{ + width: 100%; + } + } + } + &:last-child{ + margin-bottom: 0; + } + } +} +.select-form{ + .sort-select{width: 100%;} +} +.grid-select{ + flex: 1; + &.no-flx{ + flex: unset; + } + .sort-select{ + width: 100%; + background-color: #313131; + min-width: auto; + font-size: 12px; + border: none; + p{ + font-size: 12px; + } + > ul{ + border: none; + } + } + &.right{ + p{ + text-align: right; + } + ul{ + li{ + justify-content: flex-end; + } + } + } +} +.grid-btn-wrap{ + padding-top: 15px; + text-align: right; + button{ + padding: 0 10px; + } +} + +// grid copy +.grid-option-tit{ + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-normal-weight; + padding-bottom: 15px; + +} +.grid-direction{ + display: flex; + align-items: center; + gap: 5px; + flex: 1; +} +.direction{ + width: 22px; + height: 22px; + background-color: #757575; + background-image: url(../../public/static/images/canvas/grid_option_arr.svg); + background-repeat: no-repeat; + background-position: center; + background-size: 16px 15px; border-radius: 50%; - - .compas-arr { - width: 100%; - height: 100%; - background: url(../../public/static/images/canvas/compas.svg) no-repeat center; - background-size: 122px 122px; + transition: all .15s ease-in-out; + opacity: 0.6; + &.down{transform: rotate(180deg);} + &.left{transform: rotate(-90deg);} + &.right{transform: rotate(90deg);} + &:hover, + &.act{ + opacity: 1; + } +} + +// grid-move +.move-form{ + p{ + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-bold-weight; + } +} +.input-move-wrap{ + display: flex; + align-items: center; + gap: 5px; + span{ + color: $pop-color; + font-size: $pop-normal-size; + } + .input-move{ + width: 130px; + input{ + width: 100%; + } + } +} +.direction-move-wrap{ + flex: none; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; +} + +// 배치면 초기 설정 +.placement-table{ + table{ + table-layout: fixed; + tr{ + th{ + display: flex; + align-items: center; + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-bold-weight; + padding: 18px 0; + border-bottom: 1px solid #424242; + } + td{ + font-size: $pop-normal-size; + color: $pop-color; + border-bottom: 1px solid #424242; + padding-left: 20px; + } + &:first-child{ + td, + th{ + padding-top: 0; + } + } + } + } + .tooltip{ + position: relative; + display: block; + width: 15px; + height: 15px; + margin-left: 5px; + background: url(../../public/static/images/canvas/pop_tip.svg)no-repeat center; + background-size: cover; + } + &.light{ + padding: 0; + th,td{ + color: $alert-color; + border-bottom: none; + border-top: 1px solid #EFEFEF; + } + th{ + padding: 14px 0; + } + tr{ + &:first-child{ + td, + th{ + padding-top: 14px; + } + } + &:last-child{ + td, + th{ + padding-bottom: 0px; + } + } + } + } +} + +.pop-form-radio{ + display: flex; + align-items: center; + gap: 10px; +} +.placement-option{ + display: flex; + align-items: center; + gap: 20px; +} +.select-wrap{ + div{ + width: 100%; + } +} +.flex-ment{ + display: flex; + align-items: center; + gap: 5px; + span{ + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-normal-weight; + } +} + +// 외벽선 그리기 +.outline-wrap{ + padding: 24px 0; + border-top: 1px solid #424242; + + .outline-inner{ + display: flex; + align-items: center; + margin-bottom: 14px; + &:last-child{ + margin-bottom: 0; + } + .outline-form{ + // width: 50%; + margin-right: 15px; + } + } + &:last-child{ + border-bottom: 1px solid #424242; + } +} +.outline-form{ + display: flex; + align-items: center; + + span{ + width: 60px; + flex: none; + font-size: $pop-normal-size; + font-weight: $pop-bold-weight; + color: $pop-color; + margin-right: 10px; + &.thin{ + width: auto; + font-weight: $pop-normal-weight; + margin-right: 0; + } + } + + .reset-btn{ + flex: none; + width: 30px; + height: 30px; + background: transparent; + border: 1px solid #484848; + border-radius: 2px; + margin-left: 5px; + background-image: url(../../public/static/images/canvas/reset_ico.svg); + background-repeat: no-repeat; + background-size: 12px 12px; + background-position: center; + } + &:last-child{ + margin-right: 0; + } +} + +.cul-wrap{ + display: flex; + .outline-box{ + width: 50%; + margin-right: 15px; + .outline-form{ + width: 100%; + margin-bottom: 14px; + margin-right: 0; + &:last-child{ + margin-bottom: 0; + } + } + } + .cul-box{ + display: flex; + align-items: center; + justify-content: center; + width: 50%; + background-color: #3D3D3D; + border-radius: 2px ; + } +} + +// 외벽선 속성 설정 +.properties-guide{ + font-size: $pop-normal-size; + color: #AAA; + font-weight: $pop-normal-weight; + margin-bottom: 14px; +} + +.setting-tit{ + font-size: 13px; + color: $pop-color; + font-weight: $pop-bold-weight; + margin-bottom: 10px; +} +.properties-setting-wrap{ + &.outer{ + margin-top: 24px; + } + .setting-btn-wrap{ + display: flex; + align-items: center; + padding: 14px 0; + border-top: 1px solid #424242; + border-bottom: 1px solid #424242; + .setting-btn{ + display: block; + width: 100%; + height: 40px; + font-size: 13px; + color: #fff; + font-weight: 700; + border-radius: 2px; + transition: all .15s ease-in-out; + &.green{ + background-color: #305941; + border: 1px solid #45CD7D; + &:hover{ + background-color: #3a6b4e; + } + } + &.blue{ + background-color: #2E5360; + border: 1px solid #3FBAE6; + &:hover{ + background-color: #365f6e; + } + } + } + } +} + +// 지붕형상 설정 +.roof-shape-menu{ + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 24px 10px; + margin-bottom: 24px; + .shape-box{ + display: flex; + align-items: center; + justify-content: center; + width: 100%; + padding: 13px; + background-color: #3D3D3D; + transition: background .15s ease-in-out; + img{ + max-width: 100%; + } + } + .shape-title{ + font-size: $pop-normal-size; + font-weight: $pop-bold-weight; + color: $pop-color; + margin-top: 10px; + text-align: center; + transition: color .15s ease-in-out; + } + .shape-menu-box{ + &.act, + &:hover{ + .shape-box{background-color: #008BFF;} + .shape-title{color: #008BFF;} + } + } +} + +.setting-box{ + padding: 14px 0; + border-top: 1px solid #424242; + border-bottom: 1px solid #424242; +} +.padding-form{ + padding-left: 23px; +} +.discrimination-box{ + padding: 16px 12px; + border: 1px solid #3D3D3D; + border-radius: 2px; +} + +.modal-bottom-border-bx{ + margin-top: 24px; + padding-bottom: 14px; + border-bottom: 1px solid #424242; +} + +// 처마∙케라바 변경 +.eaves-keraba-table{ + display: table; + border-collapse: collapse; + .eaves-keraba-item{ + display: table-row; + .eaves-keraba-th, + .eaves-keraba-td{ + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-normal-weight; + display: table-cell; + vertical-align: middle; + padding-bottom: 14px; + } + .eaves-keraba-td{ + padding-left: 10px; + } + .eaves-keraba-ico{ + display: flex; + align-items: center; + justify-content: center; + padding: 5px; + background-color: #3D3D3D; + border: 1px solid #3D3D3D; + border-radius: 2px; + cursor: pointer; + &.act{ + border: 1px solid #ED0004; + } + } + &:last-child{ + .eaves-keraba-th, + .eaves-keraba-td{ + padding-bottom: 0; + } + } + } +} +.guide{ + font-size: $pop-normal-size; + font-weight: $pop-normal-weight; + color: $pop-color; + margin-bottom: 24px; + &.sm{ + margin-bottom: 15px; + } + span{ + display: block; + } +} + +// 지붕면 할당 +.allocation-select-wrap{ + display: flex; + align-items: center; + padding-bottom: 14px; + border-bottom: 1px solid #424242; + margin-bottom: 14px; + span{ + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-bold-weight; + margin-right: 10px; + } + .allocation-edit{ + display: flex; + align-items: center; + height: 30px; + padding: 0 10px; + margin-left: 5px; + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-normal-weight; + border: 1px solid #484848; + background-color: #323234; + i{ + display: block; + width: 12px; + height: 12px; + margin-right: 5px; + background: url(../../public/static/images/canvas/allocation_edit.svg)no-repeat center; + background-size: cover; + } + } +} + +.block-box{ + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 10px; + .flex-ment{ + gap: 10px; + .dec{ + text-decoration: underline; + } + .delete{ + display: block; + width: 15px; + height: 15px; + background: url(../../public/static/images/canvas/allocation_delete.svg)no-repeat center; + background-size: cover; + } + } + &:last-child{ + margin-bottom: 0; + } +} + +.icon-btn-wrap{ + flex: 1; + display: flex; + align-items: center; + gap: 5px; + button{ + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 30px; + font-size: $pop-normal-size; + font-weight: $pop-normal-weight; + color: $pop-color; + border: 1px solid #646464; + border-radius: 2px; + padding: 0 10px; + transition: all .15s ease-in-out; + i{ + height: 15px; + display: block; + margin-left: 10px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + transition: all .15s ease-in-out; + &.allocation01{ + background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg); + width: 15px; + } + &.allocation02{ + background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg); + width: 18px; + } + } + &.act, + &:hover{ + color: #101010; + border: 1px solid #101010; + background-color: #fff; + i{ + &.allocation01{ + background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg); + } + &.allocation02{ + background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg); + } + } + } + } +} + +// 경사설정 +.slope-wrap{ + padding-bottom: 24px; + border-bottom: 1px solid #424242; +} + +// 면형상 배치 +.plane-shape-menu{ + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(3, 90px); + gap: 10px; + margin-bottom: 10px; + .shape-menu-box{ + border-radius: 2px; + background-color: #3D3D3D; + padding: 8px; + transition: all .15s ease-in-out; + .shape-box{ + display: flex; + justify-content: center; + align-items: center; + position: relative; + width: 100%; + height: 100%; + background-color: #313131; + border-radius: 2px; + } + &.act, + &:hover{ + background-color: #008BFF; + } + } +} + +.shape-library{ + display: flex; + align-items: center; + justify-content: center; + gap: 5px; + padding: 5px; + background-color: #3D3D3D; + margin-bottom: 24px; + .library-btn{ + width: 30px; + height: 30px; + border: 1px solid #6C6C6C; + border-radius: 2px; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + transition: all .15s ease-in-out; + &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 14px 14px;} + &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 13px 17px;} + &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 17px 13px;} + &:hover{ + border-color: #1083E3; + background-color: #1083E3; + } + } +} + +.plane-shape-wrapper{ + display: flex; + gap: 10px; + .plane-box{ + padding: 10px; + border-radius: 2px; + background-color: #3D3D3D; + .plane-box-tit{ + font-size: $pop-normal-size; + font-weight: 600; + color: $pop-color; + margin-bottom: 10px; + } + &.shape-box{ + flex: 1; + .shape-box-inner{ + display: flex; + gap:10px; + min-height: 140px; + .shape-img{ + position: relative; + flex: 1; + background-color: #fff; + border-radius: 2px; + img{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + .shape-data{ + flex: none; + width: 190px; + background-color: #313131; + border-radius: 2px; + padding: 15px; + .eaves-keraba-table{ + .eaves-keraba-item{ + .eaves-keraba-th, + .eaves-keraba-td{ + padding-bottom: 10px; + } + &:last-child{ + .eaves-keraba-th, + .eaves-keraba-td{ + padding-bottom: 0px; + } + } + } + } + } + } + } + &.direction-box{ + display: flex; + flex-direction: column; + flex: none; + width: 180px; + .plane-direction-box{ + flex: 1; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + padding: 10px 5px; + } + } + } +} +.plane-direction{ + width: 150px; + position: relative; + height: 120px; + span{ + position: absolute; + font-size: 12px; + font-weight: 500; + color: #B1B1B1; + &.top{top: 0; left: 50%; transform: translateX(-50%);} + &.right{top: 50%; right: 0; transform: translateY(-50%);} + &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);} + &.left{top: 50%; left: 0; transform: translateY(-50%);} + } + .plane-btn{ + position: absolute; + width: 28px; + height: 28px; + background-color: #777777; + background-image: url(../../public/static/images/canvas/plane_arr.svg); + background-size: 12px 13px; + background-repeat: no-repeat; + background-position: center; + border-radius: 50%; + transition: all .15s ease-in-out; + &.up{top: 22px; left: 50%; transform: translateX(-50%);} + &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);} + &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);} + &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);} + &:hover, + &.act{ + background-color: #fff; + background-image: url(../../public/static/images/canvas/plane_arr_act.svg); + } + } +} + +.plane-tab-guide{ + font-size: $pop-normal-size; + font-weight: $pop-normal-weight; + color: $pop-color; + margin-top: 24px; + padding-bottom: 14px; + border-bottom: 1px solid #424242; +} + +// 오브젝트 배치 +.mb-box{ + margin-bottom: 24px; +} + +.object-direction-wrap{ + display: flex; + align-items: center; + justify-content: center; +} +.discrimination-tit{ + font-size: 13px; + color: #fff; + font-weight: 500; +} + +.object-size-wrap{ + display: flex; + min-height: 206px; + gap: 24px; + margin-top: 14px; + .object-size-img{ + position: relative; + flex: none; + width: 200px; + background-color: #fff; + img{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } +} + +// 표시변경 +.display-change-wrap{ + margin: 24px 0; +} +.warning{ + font-size: $pop-normal-size; + font-weight: $pop-normal-weight; + color: #FFAFAF; +} + +// 각 변 속성 변경 +.radio-grid-wrap{ + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px 15px; +} + +// 면 흐름 설정 +.drawing-flow-wrap{ + display: flex; + gap: 10px; + .discrimination-box{ + flex: 1; + display: flex; + flex-direction: column; + .object-direction-wrap{ + flex: 1; + } + } +} + +.compas-box{ + display: flex; + align-items: center; + justify-content: center; +} +.compas-box-inner { + position: relative; + width: 200px; + height: 200px; + border-radius: 50%; + + .circle { + position: absolute; + width: 12px; + height: 12px; + border: 1px solid #fff; + border-radius: 50%; + top: 95%; + left: 50%; + transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */ + cursor:pointer; + z-index: 3; + /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */ + i{ + position: absolute; + top: 12.5px; + left: 50%; + font-size: 11px; + color: #8B8B8B; + font-weight: 500; + -webkit-user-select: none; + -moz-user-select: none; + -ms-use-select: none; + user-select: none; + } + &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}} + &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}} + &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}} + &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}} + &:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}} + &:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}} + &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}} + &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}} + &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}} + &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}} + &:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}} + &:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}} + &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}} + &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}} + &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}} + &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}} + &:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}} + &:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}} + &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}} + &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}} + &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}} + &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}} + &:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}} + &:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}} + &.act{ + &::after{ + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 5px; + height: 5px; + background-color: #fff; + } + i{ + color: #fff; + } + } + } + .compas{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 148px; + height: 148px; + border: 4px solid #fff; + border-radius: 50%; + .compas-arr{ + width: 100%; + height: 100%; + background: url(../../public/static/images/canvas/compas.svg)no-repeat center; + background-size: 122px 122px; + } } - } } // 지붕모듈선택 -.roof-module-tab { - display: flex; - align-items: center; - gap: 10px; - margin-bottom: 14px; +.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); + } + } +} - .module-tab-bx { +.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; + .outline-form{ + flex: 1; + } +} + +.module-box-tab{ + display: flex; + .module-btn{ + flex: 1; + border-top: 1px solid #505050; + border-bottom: 1px solid #505050; + border-right: 1px solid #505050; + background-color: #454545; + color: #fff; + height: 30px; + font-size: 12px; + font-weight: 400; + transition: all .15s ease-in-out; + &:first-child{ + border-left: 1px solid #505050; + } + &.act{ + border-color: #fff; + background-color: #fff; + color: #101010; + } + } +} + +.module-table-box{ flex: 1; - height: 34px; - line-height: 31px; - border: 1px solid #484848; + background-color: #3D3D3D; 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; + .module-table-inner{ + padding: 10px; + .outline-form{ + span{ + width: auto; + } } - } - - i { - top: 32px; - } - - &.act { - i { - color: #8B8B8B; + .module-table-tit{ + padding: 10px 0; + font-size: 12px; + color: #fff; + border-bottom: 1px solid #4D4D4D; + } + .eaves-keraba-table{ + width: 100%; + margin-top: 15px; + .eaves-keraba-th{ + width: 72px; + } + .eaves-keraba-th, + .eaves-keraba-td{ + padding-bottom: 5px; + } + } + .self-table-tit{ + font-size: 12px; + font-weight: 500; + color: #fff; + padding-bottom: 15px; + } + } + .warning-guide{ + padding: 20px; + .warning{ + color: #FFCACA; + max-height: 55px; + overflow-y: auto; + padding-right: 30px; + &::-webkit-scrollbar { + width: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #D9D9D9; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } } - } } - } } -.center-wrap { - display: flex; - flex-direction: column; - align-items: center; - gap: 20px; +.module-self-table{ + display: table; + border-top: 1px solid #4D4D4D; + border-collapse: collapse; + width: 100%; + .self-table-item{ + display: table-row; + .self-item-td, + .self-item-th{ + display: table-cell; + vertical-align: middle; + border-bottom: 1px solid #4D4D4D; + } + .self-item-th{ + width: 60px; + font-size: 12px; + font-weight: 500; + color: #fff; + } + .self-item-td{ + font-size: 12px; + font-weight: 400; + color: #fff; + padding: 15px 20px; + } + } } -.module-table-flex-wrap { - display: flex; - gap: 10px; - - .outline-form { - flex: 1; - } -} - -.module-box-tab { - display: flex; - - .module-btn { - flex: 1; - border-top: 1px solid #505050; - border-bottom: 1px solid #505050; - border-right: 1px solid #505050; - background-color: #454545; - color: #fff; - height: 30px; - font-size: 12px; - font-weight: 400; - transition: all .15s ease-in-out; - - &:first-child { - border-left: 1px solid #505050; - } - - &.act { - border-color: #fff; - background-color: #fff; - color: #101010; - } - } -} - -.module-table-box { - flex: 1; - background-color: #3D3D3D; - border-radius: 2px; - - .module-table-inner { - padding: 10px; - - .outline-form { - span { - width: auto; - } - } - - .module-table-tit { - padding: 10px 0; - font-size: 12px; - color: #fff; - border-bottom: 1px solid #4D4D4D; - } - - .eaves-keraba-table { - width: 100%; - margin-top: 15px; - - .eaves-keraba-th { - width: 72px; - } - - .eaves-keraba-th, - .eaves-keraba-td { - padding-bottom: 5px; - } - } - - .self-table-tit { - font-size: 12px; - font-weight: 500; - color: #fff; - padding-bottom: 15px; - } - } - - .warning-guide { - padding: 20px; - - .warning { - color: #FFCACA; - max-height: 55px; - overflow-y: auto; - padding-right: 30px; - - &::-webkit-scrollbar { - width: 4px; - background-color: transparent; - } - - &::-webkit-scrollbar-thumb { - background-color: #D9D9D9; - } - - &::-webkit-scrollbar-track { - background-color: transparent; - } - } - } -} - -.module-self-table { - display: table; - border-top: 1px solid #4D4D4D; - border-collapse: collapse; - width: 100%; - - .self-table-item { - display: table-row; - - .self-item-td, - .self-item-th { - display: table-cell; - vertical-align: middle; - border-bottom: 1px solid #4D4D4D; - } - - .self-item-th { - width: 60px; - font-size: 12px; - font-weight: 500; - color: #fff; - } - - .self-item-td { - font-size: 12px; - font-weight: 400; - color: #fff; - padding: 15px 20px; - } - } -} - -.self-table-flx { - display: flex; - align-items: center; - margin-top: 15px; - - button { - margin-left: auto; - } -} - -.hexagonal-wrap { - .hexagonal-item { - padding: 15px 0; - border-bottom: 1px solid #4D4D4D; - - &:first-child { - padding-top: 0; - } - - &:last-child { - padding-bottom: 0; - border: none; - } - - .hexagonal-flx-auto { - display: flex; - justify-content: space-between; - } - - .hexagonal-flx { - display: flex; - align-items: center; - - button { +.self-table-flx{ + display: flex; + align-items: center; + margin-top: 15px; + button{ margin-left: auto; - } } - } +} +.hexagonal-wrap{ + .hexagonal-item{ + padding: 15px 0; + border-bottom: 1px solid #4D4D4D; + &:first-child{ + padding-top: 0; + } + &:last-child{ + padding-bottom: 0; + border: none; + } + .hexagonal-flx-auto{ + display: flex; + justify-content: space-between; + } + .hexagonal-flx{ + display: flex; + align-items: center; + button{ + margin-left: auto; + } + } + } } // 회로 및 가대설정 -.circuit-check-inner { - padding: 5px 0; +.circuit-check-inner{ + padding: 5px 0; } -.x-scroll-table { - overflow-x: auto; - padding-bottom: 5px; - - .roof-module-table { - min-width: 1200px; - } - - &::-webkit-scrollbar { - height: 4px; - background-color: transparent; - } - - &::-webkit-scrollbar-thumb { - background-color: #D9D9D9; - } - - &::-webkit-scrollbar-track { - background-color: transparent; - } +.x-scroll-table{ + overflow-x: auto; + padding-bottom: 5px; + .roof-module-table{ + min-width: 1200px; + } + &::-webkit-scrollbar { + height: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #D9D9D9; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } } -.circuit-right-wrap { - display: flex; - justify-content: flex-end; +.circuit-right-wrap{ + display: flex; + justify-content: flex-end; } -.circuit-data-form { - display: flex; - flex-direction: column; - gap: 5px; - min-height: 60px; - padding: 12px; - border: 1px solid rgba(255, 255, 255, 0.20); -} - -.circuit-table-tit { - color: #fff; - font-size: 12px; - font-weight: 600; - padding: 11px 10px; - background-color: #474747; - border: 1px solid #505050; - border-bottom: none; -} - -.circuit-overflow { - max-height: 560px; - overflow-y: auto; - margin-bottom: 15px; - - &::-webkit-scrollbar { - width: 4px; - background-color: transparent; - } - - &::-webkit-scrollbar-thumb { - background-color: #D9D9D9; - } - - &::-webkit-scrollbar-track { - background-color: transparent; - } -} - -.circuit-table-flx-wrap { - display: flex; - gap: 10px; - margin-bottom: 10px; - - .circuit-table-flx-box { - flex: 1; +.circuit-data-form{ display: flex; flex-direction: column; - - .bottom-wrap { - margin-top: auto; + gap: 5px; + min-height: 60px; + padding: 12px; + border: 1px solid rgba(255, 255, 255, 0.20); + span{ + display: inline-flex; + align-items: center; + .del{ + display: block; + margin-left: 10px; + width: 15px; + height: 15px; + background: url(../../public/static/images/canvas/circuit_del.svg)no-repeat center; + background-size: cover; + } } - - .roof-module-table { - table { - table-layout: fixed; - } - } - } +} +.circuit-table-tit{ + color: #fff; + font-size: 12px; + font-weight: 600; + padding: 11px 10px; + background-color: #474747; + border: 1px solid #505050; + border-bottom: none; } -.circuit-count-input { - display: flex; - align-items: center; - gap: 10px; +.circuit-overflow{ + max-height: 400px; + overflow-y: auto; + margin-bottom: 15px; + &::-webkit-scrollbar { + width: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #D9D9D9; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } +} + +.circuit-table-flx-wrap{ + display: flex; + gap: 10px; + margin-bottom: 10px; + .circuit-table-flx-box{ + flex: 1; + display: flex; + flex-direction: column; + .bottom-wrap{ + margin-top: auto; + } + .roof-module-table{ + table{ + table-layout: fixed; + } + } + } +} + +.circuit-count-input{ + display: flex; + align-items: center; + gap: 10px; } // 모듈부가기능 -.additional-radio-wrap { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 15px 0; - margin-bottom: 24px; +.additional-radio-wrap{ + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px 0; + margin-bottom: 24px; +} +.additional-wrap{ + padding: 24px 0; + border-top: 1px solid #424242; } -.additional-wrap { - padding: 24px 0; - border-top: 1px solid #424242; -} - -.additional-color-wrap { - display: flex; - align-items: center; - padding: 5px 0; - gap: 15px; - - .additional-color-box { +.additional-color-wrap{ display: flex; align-items: center; - gap: 8px; - - .additional-color { - display: block; - width: 16px; - height: 16px; - - &.pink { - border: 2px solid #EA10AC; - background-color: #16417D; - } - - &.white { - border: 2px solid #FFF; - background-color: #001027; - } + padding: 5px 0; + gap: 15px; + .additional-color-box{ + display: flex; + align-items: center; + gap: 8px; + .additional-color{ + display: block; + width: 16px; + height: 16px; + &.pink{ + border: 2px solid #EA10AC; + background-color: #16417D; + } + &.white{ + border: 2px solid #FFF; + background-color: #001027; + } + } } - } } \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index b575113b..d345f643 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -308,6 +308,20 @@ button{ background-color: #607F9A; } } + &.green{ + background-color: #A6BBA8; + &:hover{ + background-color: #98af9b; + } + } + &.white{ + border: 1px solid #94A0AD; + background-color: #fff; + color: #94A0AD; + &:hover{ + background-color: #fff; + } + } } // select @@ -437,6 +451,7 @@ button{ margin-bottom: 10px; } } +input[type=password], input[type=number], input[type=text]{ &.input-origin{ diff --git a/src/styles/_submodal.scss b/src/styles/_submodal.scss index 34d0e9ce..5b18f74a 100644 --- a/src/styles/_submodal.scss +++ b/src/styles/_submodal.scss @@ -71,8 +71,33 @@ } } } + &.community{ + .modal-dialog{ + .modal-content{ + .modal-header{ + padding: 19px 24px; + background-color: #fff; + .modal-close{ + background: url(../../public/static/images/sub/community_pop_close.svg)no-repeat center; + } + } + .modal-body{ + padding: 0 30px 30px; + } + } + } + } } +.explane{ + font-size: 13px; + font-weight: 400; + color: #101010; + margin-bottom: 20px; +} +.red{ + color: #F00; +} // modal-contents // 비밀번호 변경 @@ -186,6 +211,19 @@ } // 설계의뢰 불러오기 +.design-tit-wrap{ + display: flex; + align-items: center; + margin-bottom: 10px; + h3{ + font-size: 13px; + font-weight: 600; + color: #101010; + } + .design-search-wrap{ + margin-left: auto; + } +} .design-request-table{ margin-bottom: 20px; } @@ -196,4 +234,85 @@ color: #101010; margin-bottom: 15px; } +} + +// 제품 특이사항 팝업 +.calculation-estimate{ + &.usemodal{ + margin-bottom: 0; + border: none; + padding: 0; + } +} + +// 내정보 조회 팝업 +.password-input{ + flex: 1; + display: flex; + align-items: center; + height: 30px; + border: 1px solid #EEE; + padding: 0 10px; + border-radius: 2px; + input{ + width: 100%; + height: 100%; + font-size: 13px; + color: #45576F; + font-family: 'Noto Sans JP', sans-serif; + font-weight: 400; + &::placeholder{ + color: #D1D7E0; + } + } + .blink{ + flex: none; + width: 19px; + height: 100%; + background-image: url(../../public/static/images/main/password_hidden.svg); + background-size: 19px 13px; + background-repeat: no-repeat; + background-position: center; + &.on{ + background-image: url(../../public/static/images/main/password_visible.svg); + } + } +} + +// 커뮤니티 +.community_detail{ + .community_detail-tit{ + font-size: 16px; + color: #101010; + font-weight: 600; + padding-bottom: 14px; + border-bottom: 2px solid #101010; + } + .community_detail-file-wrap{ + padding: 24px 0; + border-bottom: 1px solid #E5E5E5; + dt{ + font-size: 13px; + color: #101010; + font-weight: 500; + margin-bottom: 15px; + } + dd{ + font-size: 12px; + font-weight: 400; + margin-bottom: 3px; + color: #344356; + &:last-child{ + margin-bottom: 0; + } + } + } + .community_detail-inner{ + padding-top: 20px; + padding-bottom: 20px; + font-size: 13px; + font-weight: 400; + color: #45576F; + line-height: 26px; + } } \ No newline at end of file diff --git a/src/styles/_table.scss b/src/styles/_table.scss index 5aa068d0..d7e1c407 100644 --- a/src/styles/_table.scss +++ b/src/styles/_table.scss @@ -115,7 +115,40 @@ table{ cursor: pointer; span{ position: absolute; + top: 50%; + transform: translateY(-50%); + left: 25px; + padding: 11px 7px; + font-size: 12px; + font-weight: 400; + color: #45576F; + background-color: #fff; + border: 2px solid #45576F; + border-radius: 2px; white-space: nowrap; + opacity: 0; + visibility: hidden; + z-index: 99; + transition: all .15s ease-in-out; + &::before{ + content: ''; + position: absolute; + top: 50%; + left: -6px; + transform: translateY(-50%) rotate(45deg); + width: 9px; + height: 9px; + border: 2px solid #45576F; + background-color: #fff; + border-top: none; + border-right: none; + } + } + &:hover{ + span{ + opacity: 1; + visibility: visible; + } } } } @@ -279,4 +312,122 @@ table{ } } } +} + +// 커뮤니티 테이블 +.community-table{ + margin-bottom: 24px; + table{ + table-layout: fixed; + border-collapse: collapse; + border-top: 2px solid #101010; + tbody{ + td{ + font-size: 13px; + font-weight: 400; + color: #45576F; + padding: 10.5px 10px; + border-bottom: 1px solid #ECF0F4; + vertical-align: middle; + .text-frame{ + display: flex; + align-items: center; + .text-overflow{ + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + text-overflow: ellipsis; + overflow: hidden; + } + .clip{ + flex: none; + display: block; + margin-left: 10px; + width: 14px; + height: 14px; + background: url(../../public/static/images/sub/community_clip.svg)no-repeat center; + background-size: cover; + } + } + } + tr{ + background-color: transparent; + transition: all .15s ease-in-out; + cursor: pointer; + &:hover{ + background: #F7F9FA; + } + } + } + } +} + +// 풍속 선택 테이블 +.wind-table{ + margin-top: 20px; + table{ + width: 100%; + table-layout: fixed; + border-collapse: separate; + thead{ + display: table; + table-layout: fixed; + width: 100%; + tr{ + th{ + text-align: center; + font-size: 13px; + font-weight: 600; + color: #344356; + background-color: #F7F9FA; + padding: 10.5px 10px; + vertical-align: middle; + border-bottom: 1px solid #ECF0F4; + border-top: 1px solid #ECF0F4; + &:first-child{ + border-left: 1px solid #ECF0F4; + border-radius: 4px 0 0 4px; + } + &:last-child{ + border-right: 1px solid #ECF0F4; + border-radius: 0 4px 4px 0; + } + } + } + } + tbody{ + display: block; + max-height: 200px; + overflow-y: auto; + tr{ + display: table; + table-layout: fixed; + width: 100%; + td{ + padding: 13.5px 10px; + font-size: 13px; + font-weight: 400; + color: #45576F; + vertical-align: middle; + border-bottom: 1px solid #ECF0F4; + &:nth-child(2){ + width: 110px; + } + &:nth-child(1){ + width: 50px; + } + } + } + &::-webkit-scrollbar { + width: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #ECF0F4; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } + } + } } \ No newline at end of file diff --git a/src/styles/contents.scss b/src/styles/contents.scss index 613c0644..2f690380 100644 --- a/src/styles/contents.scss +++ b/src/styles/contents.scss @@ -2,4 +2,5 @@ @import '_modal.scss'; @import '_submodal.scss'; @import '_table.scss'; -@import '_canvasside.scss'; \ No newline at end of file +@import '_canvasside.scss'; +@import '_pagination.scss'; \ No newline at end of file diff --git a/src/styles/grid.scss b/src/styles/grid.scss index 71f42715..4b20cd8c 100644 --- a/src/styles/grid.scss +++ b/src/styles/grid.scss @@ -1,2 +1 @@ @import '_grid-detail.scss'; -@import '_pagination.scss'; \ No newline at end of file