From ced0eb9fc6d646ea98d172947405d2395b13818c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?= <43837214+Minsiki@users.noreply.github.com> Date: Wed, 2 Apr 2025 13:53:24 +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 --- .../static/images/canvas/hide-check-arr.svg | 3 + src/styles/_contents.scss | 8 ++ src/styles/_modal.scss | 91 +++++++++++++++---- src/styles/_reset.scss | 12 ++- src/styles/_table.scss | 10 ++ 5 files changed, 99 insertions(+), 25 deletions(-) create mode 100644 public/static/images/canvas/hide-check-arr.svg diff --git a/public/static/images/canvas/hide-check-arr.svg b/public/static/images/canvas/hide-check-arr.svg new file mode 100644 index 00000000..f2a16099 --- /dev/null +++ b/public/static/images/canvas/hide-check-arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 10a04637..bfd7b1f8 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -340,6 +340,14 @@ &.active{ top: calc(92.8px + 50px); } + .canvas-id{ + display: flex; + align-items: center; + padding: 9.6px 20px; + font-size: 12px; + color: #fff; + background-color: #1083E3; + } .canvas-plane-wrap{ display: flex; align-items: center; diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index f2b6503c..fef7c2fd 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -279,10 +279,11 @@ $alert-color: #101010; border-bottom: 1px solid #424242; } } -.grid-check-form-block{ - display: block; - > div{ - margin-bottom: 10px; +.grid-check-form-flex{ + display: flex; + gap: 10px; + .d-check-box{ + flex: 1; } } .grid-option-overflow{ @@ -1313,13 +1314,13 @@ $alert-color: #101010; .circle { position: absolute; - width: 12px; - height: 12px; + width: 10px; + height: 10px; border: 1px solid #fff; border-radius: 50%; - top: 95%; + top: 88%; left: 50%; - transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */ + transform-origin: 0 -76px; /* 중심에서 반지름 거리만큼 떨어져 위치 */ cursor:pointer; z-index: 3; /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */ @@ -1366,8 +1367,8 @@ $alert-color: #101010; top: 50%; left: 50%; transform: translate(-50%, -50%); - width: 5px; - height: 5px; + width: 4px; + height: 4px; background-color: #fff; border-radius: 50%; } @@ -1381,15 +1382,15 @@ $alert-color: #101010; top: 50%; left: 50%; transform: translate(-50%, -50%); - width: 148px; - height: 148px; + width: 121px; + height: 121px; 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; + background-size: 100px 100px; } } } @@ -1441,10 +1442,10 @@ $alert-color: #101010; .roof-module-compas{ margin-bottom: 24px; .compas-box-inner{ - width: 280px; - height: 253px; + width: 235px; + height: 215px; .circle{ - top: 86%; + top: 85%; // &:nth-child(1), // &:nth-child(7), // &:nth-child(13), @@ -1461,7 +1462,7 @@ $alert-color: #101010; // } // } i{ - top: 22px; + top: 19px; } &.act{ i{color: #8B8B8B;} @@ -1482,6 +1483,10 @@ $alert-color: #101010; .outline-form{ flex: 1; } + .non-flex{ + min-width: 300px; + flex: none; + } } .module-box-tab{ @@ -2183,14 +2188,20 @@ $alert-color: #101010; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; - margin-bottom: 24px; + margin-bottom: 10px; } &.non-flex{ display: flex; flex-direction: column; justify-content: flex-start; flex: none; - width: 260px; + width: 340px; + } + .flex-item-button{ + margin-top: 10px; + button{ + width: 100%; + } } } } @@ -2326,7 +2337,7 @@ $alert-color: #101010; grid-template-columns: repeat(2, 1fr); .outline-form{ span{ - width: 60px; + width: 65px; &.thin{ width: 20px; } @@ -2336,6 +2347,7 @@ $alert-color: #101010; } } + .module-table-block-wrap{ .roof-module-table{ &.self{ @@ -2371,4 +2383,43 @@ $alert-color: #101010; margin-left: 10px; color: #53a7eb; font-weight: 500; +} + +.hexagonal-flex-wrap{ + display: flex; + gap: 10px; + .non-flex{ + flex: none; + } +} + +.hexagonal-radio-wrap{ + padding: 17px 10px; +} + +.hide-check-guide{ + display: flex; + align-items: center; + font-size: 12px; + color: #fff; + margin-top: 10px; + font-weight: 500; + .arr{ + width: 13px; + height: 13px; + margin-left: 10px; + background: url(../../public/static/images/canvas/hide-check-arr.svg) no-repeat center; + background-size: contain; + transform: rotate(180deg); + &.act{ + transform: rotate(0deg); + } + } +} + +.module-table-box{ + &.hide{ + overflow: hidden; + height: 0; + } } \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 34dcaf33..fab3eb04 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -222,15 +222,16 @@ button{ padding: 0 10px; line-height: 28px; font-family: 'Noto Sans JP', sans-serif; - background-color: transparent; + background-color: #353535; border: 1px solid #484848; color: #fff; &.blue{ background-color: #4C6FBF; border: 1px solid #4C6FBF; &:hover{ - background-color: #414E6C; - border: 1px solid #414E6C; + background-color: #4C6FBF; + border: 1px solid #4C6FBF; + font-weight: normal; } } &.white{ @@ -241,13 +242,14 @@ button{ background-color: #fff; border: 1px solid #fff; color: #101010; + font-weight: normal; } } &:hover{ - font-weight: 400; - background-color: transparent; + background-color: #353535; border: 1px solid #484848; color: #fff; + font-weight: normal; } } &.self{ diff --git a/src/styles/_table.scss b/src/styles/_table.scss index 5efacd7c..5fe69afe 100644 --- a/src/styles/_table.scss +++ b/src/styles/_table.scss @@ -236,6 +236,16 @@ table{ .d-check-box{ opacity: 0.5; } + .color-wrap{ + display: flex; + align-items: center; + justify-content: center; + .color-box{ + width: 14px; + height: 14px; + margin-right: 8px; + } + } } } tbody{