diff --git a/public/static/images/canvas/plane_shape01.svg b/public/static/images/canvas/plane_shape01.svg index a32d0c39..33408815 100644 --- a/public/static/images/canvas/plane_shape01.svg +++ b/public/static/images/canvas/plane_shape01.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape010.svg b/public/static/images/canvas/plane_shape010.svg index a17616fb..8d46bdfb 100644 --- a/public/static/images/canvas/plane_shape010.svg +++ b/public/static/images/canvas/plane_shape010.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape011.svg b/public/static/images/canvas/plane_shape011.svg index 4068d35a..6888ecb7 100644 --- a/public/static/images/canvas/plane_shape011.svg +++ b/public/static/images/canvas/plane_shape011.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape012.svg b/public/static/images/canvas/plane_shape012.svg index b7136002..e139be5d 100644 --- a/public/static/images/canvas/plane_shape012.svg +++ b/public/static/images/canvas/plane_shape012.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape013.svg b/public/static/images/canvas/plane_shape013.svg index 6ef6e1a4..b12be00f 100644 --- a/public/static/images/canvas/plane_shape013.svg +++ b/public/static/images/canvas/plane_shape013.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape014.svg b/public/static/images/canvas/plane_shape014.svg index 68789f56..c1c59644 100644 --- a/public/static/images/canvas/plane_shape014.svg +++ b/public/static/images/canvas/plane_shape014.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape015.svg b/public/static/images/canvas/plane_shape015.svg index 76e89b3d..2b5c626e 100644 --- a/public/static/images/canvas/plane_shape015.svg +++ b/public/static/images/canvas/plane_shape015.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape016.svg b/public/static/images/canvas/plane_shape016.svg index 54b8259c..50dd2351 100644 --- a/public/static/images/canvas/plane_shape016.svg +++ b/public/static/images/canvas/plane_shape016.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/public/static/images/canvas/plane_shape017.svg b/public/static/images/canvas/plane_shape017.svg index d0378c1f..6aebee57 100644 --- a/public/static/images/canvas/plane_shape017.svg +++ b/public/static/images/canvas/plane_shape017.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape018.svg b/public/static/images/canvas/plane_shape018.svg index 4e48f83d..384a6c53 100644 --- a/public/static/images/canvas/plane_shape018.svg +++ b/public/static/images/canvas/plane_shape018.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape02.svg b/public/static/images/canvas/plane_shape02.svg index aa0a756f..e8dc3290 100644 --- a/public/static/images/canvas/plane_shape02.svg +++ b/public/static/images/canvas/plane_shape02.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape03.svg b/public/static/images/canvas/plane_shape03.svg index fb6c7d0a..d817097b 100644 --- a/public/static/images/canvas/plane_shape03.svg +++ b/public/static/images/canvas/plane_shape03.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape04.svg b/public/static/images/canvas/plane_shape04.svg index 3cbf25c8..f2aa9929 100644 --- a/public/static/images/canvas/plane_shape04.svg +++ b/public/static/images/canvas/plane_shape04.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape05.svg b/public/static/images/canvas/plane_shape05.svg index 36f1448c..31731b35 100644 --- a/public/static/images/canvas/plane_shape05.svg +++ b/public/static/images/canvas/plane_shape05.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape06.svg b/public/static/images/canvas/plane_shape06.svg index a87e30b8..8048344d 100644 --- a/public/static/images/canvas/plane_shape06.svg +++ b/public/static/images/canvas/plane_shape06.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape07.svg b/public/static/images/canvas/plane_shape07.svg index 526c95bc..a2a33ae3 100644 --- a/public/static/images/canvas/plane_shape07.svg +++ b/public/static/images/canvas/plane_shape07.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape08.svg b/public/static/images/canvas/plane_shape08.svg index 8ad3bf5a..7a9b07e7 100644 --- a/public/static/images/canvas/plane_shape08.svg +++ b/public/static/images/canvas/plane_shape08.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/static/images/canvas/plane_shape09.svg b/public/static/images/canvas/plane_shape09.svg index 519294ef..bc0ad775 100644 --- a/public/static/images/canvas/plane_shape09.svg +++ b/public/static/images/canvas/plane_shape09.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 97f69dbe..4adebc7c 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -769,6 +769,22 @@ .btn-area{ padding-bottom: 15px; border-bottom: 1px solid #ECF0F4; + .file-upload{ + display: inline-block; + height: 30px; + background-color: #94A0AD; + padding: 0 10px; + border-radius: 2px; + font-size: 13px; + line-height: 30px; + color: #fff; + font-weight: 500; + cursor: pointer; + transition: background .15s ease-in-out; + &:hover{ + background-color: #607F9A; + } + } } .drag-file-area{ position: relative; diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 51f55fb0..7fc9c095 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -60,6 +60,9 @@ $alert-color: #101010; &.lr{ width: 440px; } + &.lr-2{ + width: 450px; + } &.lrr{ width: 480px; } @@ -880,17 +883,26 @@ $alert-color: #101010; } // 면형상 배치 +.plane-frame-wrap{ + display: flex; + gap: 10px; + .plane-shape-wrap{ + flex: none; + width: 73px; + } +} + .plane-shape-menu{ display: grid; - grid-template-columns: repeat(6, 1fr); - grid-template-rows: repeat(3, 90px); - gap: 10px; - margin-bottom: 10px; + grid-template-columns: repeat(2, 1fr); + gap: 5px; .shape-menu-box{ border-radius: 2px; - background-color: #3D3D3D; - padding: 8px; - transition: all .15s ease-in-out; + width: 34px; + height: 34px; + background-color: #373737; + border: 1px solid #676767; + transition: background .15s ease-in-out, border .15s ease-in-out; .shape-box{ display: flex; justify-content: center; @@ -898,11 +910,11 @@ $alert-color: #101010; position: relative; width: 100%; height: 100%; - background-color: #313131; border-radius: 2px; } &.act, &:hover{ + border-color: #008BFF; background-color: #008BFF; } } @@ -910,24 +922,23 @@ $alert-color: #101010; .shape-library{ display: flex; + flex-direction: column; align-items: center; justify-content: center; gap: 5px; - padding: 5px; - background-color: #3D3D3D; - margin-bottom: 24px; + padding-top: 5px; .library-btn{ - width: 30px; - height: 30px; + width: 100%; + height: 34px; border: 1px solid #6C6C6C; border-radius: 2px; - background-color: transparent; + background-color: #373737; 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;} + &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;} + &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;} + &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;} &:hover{ border-color: #1083E3; background-color: #1083E3; @@ -935,13 +946,22 @@ $alert-color: #101010; } } -.plane-shape-wrapper{ +.plane-detail-wrap{ display: flex; + flex-direction: column; + flex: 1; +} +.plane-shape-wrapper{ + flex: 1; + display: flex; + flex-direction: column; gap: 10px; .plane-box{ - padding: 10px; + width: 100%; + padding: 10px 18px; border-radius: 2px; - background-color: #3D3D3D; + background-color: #313131; + border: 1px solid #484848; .plane-box-tit{ font-size: $pop-normal-size; font-weight: 600; @@ -949,14 +969,14 @@ $alert-color: #101010; margin-bottom: 10px; } &.shape-box{ - flex: 1; .shape-box-inner{ display: flex; - gap:10px; + gap:15px; min-height: 140px; .shape-img{ position: relative; - flex: 1; + flex: none; + width: 150px; background-color: #fff; border-radius: 2px; img{ @@ -967,11 +987,7 @@ $alert-color: #101010; } } .shape-data{ - flex: none; - width: 190px; - background-color: #313131; - border-radius: 2px; - padding: 15px; + flex: 1; .eaves-keraba-table{ .eaves-keraba-item{ .eaves-keraba-th, @@ -990,17 +1006,15 @@ $alert-color: #101010; } } &.direction-box{ + flex: 1; 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; } } } @@ -1046,9 +1060,15 @@ $alert-color: #101010; font-size: $pop-normal-size; font-weight: $pop-normal-weight; color: $pop-color; - margin-top: 24px; - padding-bottom: 14px; - border-bottom: 1px solid #424242; + margin-top: 10px; +} +.plane-shape-btn{ + padding-top: 10px; + margin-top: auto; + button{ + display: block; + width: 100%; + } } // 오브젝트 배치