diff --git a/public/static/images/canvas/compas.svg b/public/static/images/canvas/compas.svg new file mode 100644 index 00000000..fc9bccb1 --- /dev/null +++ b/public/static/images/canvas/compas.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/static/images/canvas/compas_num.svg b/public/static/images/canvas/compas_num.svg new file mode 100644 index 00000000..5deeea27 --- /dev/null +++ b/public/static/images/canvas/compas_num.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/object_img01.svg b/public/static/images/canvas/object_img01.svg new file mode 100644 index 00000000..a4ebac98 --- /dev/null +++ b/public/static/images/canvas/object_img01.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/object_img02.svg b/public/static/images/canvas/object_img02.svg new file mode 100644 index 00000000..ab1e8f43 --- /dev/null +++ b/public/static/images/canvas/object_img02.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_arr.svg b/public/static/images/canvas/plane_arr.svg new file mode 100644 index 00000000..c3131c01 --- /dev/null +++ b/public/static/images/canvas/plane_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_arr_act.svg b/public/static/images/canvas/plane_arr_act.svg new file mode 100644 index 00000000..2c91a0bc --- /dev/null +++ b/public/static/images/canvas/plane_arr_act.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape01.svg b/public/static/images/canvas/plane_shape01.svg new file mode 100644 index 00000000..a32d0c39 --- /dev/null +++ b/public/static/images/canvas/plane_shape01.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape010.svg b/public/static/images/canvas/plane_shape010.svg new file mode 100644 index 00000000..a17616fb --- /dev/null +++ b/public/static/images/canvas/plane_shape010.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape011.svg b/public/static/images/canvas/plane_shape011.svg new file mode 100644 index 00000000..4068d35a --- /dev/null +++ b/public/static/images/canvas/plane_shape011.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape012.svg b/public/static/images/canvas/plane_shape012.svg new file mode 100644 index 00000000..b7136002 --- /dev/null +++ b/public/static/images/canvas/plane_shape012.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape013.svg b/public/static/images/canvas/plane_shape013.svg new file mode 100644 index 00000000..6ef6e1a4 --- /dev/null +++ b/public/static/images/canvas/plane_shape013.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape014.svg b/public/static/images/canvas/plane_shape014.svg new file mode 100644 index 00000000..68789f56 --- /dev/null +++ b/public/static/images/canvas/plane_shape014.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape015.svg b/public/static/images/canvas/plane_shape015.svg new file mode 100644 index 00000000..76e89b3d --- /dev/null +++ b/public/static/images/canvas/plane_shape015.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape016.svg b/public/static/images/canvas/plane_shape016.svg new file mode 100644 index 00000000..54b8259c --- /dev/null +++ b/public/static/images/canvas/plane_shape016.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/images/canvas/plane_shape017.svg b/public/static/images/canvas/plane_shape017.svg new file mode 100644 index 00000000..d0378c1f --- /dev/null +++ b/public/static/images/canvas/plane_shape017.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape018.svg b/public/static/images/canvas/plane_shape018.svg new file mode 100644 index 00000000..4e48f83d --- /dev/null +++ b/public/static/images/canvas/plane_shape018.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape02.svg b/public/static/images/canvas/plane_shape02.svg new file mode 100644 index 00000000..aa0a756f --- /dev/null +++ b/public/static/images/canvas/plane_shape02.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape03.svg b/public/static/images/canvas/plane_shape03.svg new file mode 100644 index 00000000..fb6c7d0a --- /dev/null +++ b/public/static/images/canvas/plane_shape03.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape04.svg b/public/static/images/canvas/plane_shape04.svg new file mode 100644 index 00000000..3cbf25c8 --- /dev/null +++ b/public/static/images/canvas/plane_shape04.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape05.svg b/public/static/images/canvas/plane_shape05.svg new file mode 100644 index 00000000..36f1448c --- /dev/null +++ b/public/static/images/canvas/plane_shape05.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape06.svg b/public/static/images/canvas/plane_shape06.svg new file mode 100644 index 00000000..a87e30b8 --- /dev/null +++ b/public/static/images/canvas/plane_shape06.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape07.svg b/public/static/images/canvas/plane_shape07.svg new file mode 100644 index 00000000..526c95bc --- /dev/null +++ b/public/static/images/canvas/plane_shape07.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape08.svg b/public/static/images/canvas/plane_shape08.svg new file mode 100644 index 00000000..8ad3bf5a --- /dev/null +++ b/public/static/images/canvas/plane_shape08.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape09.svg b/public/static/images/canvas/plane_shape09.svg new file mode 100644 index 00000000..519294ef --- /dev/null +++ b/public/static/images/canvas/plane_shape09.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_tab01.svg b/public/static/images/canvas/plane_tab01.svg new file mode 100644 index 00000000..f768a207 --- /dev/null +++ b/public/static/images/canvas/plane_tab01.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab02.svg b/public/static/images/canvas/plane_tab02.svg new file mode 100644 index 00000000..61891248 --- /dev/null +++ b/public/static/images/canvas/plane_tab02.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab03.svg b/public/static/images/canvas/plane_tab03.svg new file mode 100644 index 00000000..295e0d89 --- /dev/null +++ b/public/static/images/canvas/plane_tab03.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab04.svg b/public/static/images/canvas/plane_tab04.svg new file mode 100644 index 00000000..894bb55c --- /dev/null +++ b/public/static/images/canvas/plane_tab04.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab05.svg b/public/static/images/canvas/plane_tab05.svg new file mode 100644 index 00000000..63b3c201 --- /dev/null +++ b/public/static/images/canvas/plane_tab05.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab06.svg b/public/static/images/canvas/plane_tab06.svg new file mode 100644 index 00000000..1bad98a0 --- /dev/null +++ b/public/static/images/canvas/plane_tab06.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab07.svg b/public/static/images/canvas/plane_tab07.svg new file mode 100644 index 00000000..a358f766 --- /dev/null +++ b/public/static/images/canvas/plane_tab07.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab08.svg b/public/static/images/canvas/plane_tab08.svg new file mode 100644 index 00000000..22a72ab6 --- /dev/null +++ b/public/static/images/canvas/plane_tab08.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab09.svg b/public/static/images/canvas/plane_tab09.svg new file mode 100644 index 00000000..756c3bfa --- /dev/null +++ b/public/static/images/canvas/plane_tab09.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab10.svg b/public/static/images/canvas/plane_tab10.svg new file mode 100644 index 00000000..fe4073ea --- /dev/null +++ b/public/static/images/canvas/plane_tab10.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab11.svg b/public/static/images/canvas/plane_tab11.svg new file mode 100644 index 00000000..0ac2cf59 --- /dev/null +++ b/public/static/images/canvas/plane_tab11.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab12.svg b/public/static/images/canvas/plane_tab12.svg new file mode 100644 index 00000000..a68e7a39 --- /dev/null +++ b/public/static/images/canvas/plane_tab12.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab13.svg b/public/static/images/canvas/plane_tab13.svg new file mode 100644 index 00000000..027e91e8 --- /dev/null +++ b/public/static/images/canvas/plane_tab13.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab14.svg b/public/static/images/canvas/plane_tab14.svg new file mode 100644 index 00000000..7a3cef86 --- /dev/null +++ b/public/static/images/canvas/plane_tab14.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab15.svg b/public/static/images/canvas/plane_tab15.svg new file mode 100644 index 00000000..c0c1b0bb --- /dev/null +++ b/public/static/images/canvas/plane_tab15.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab16.svg b/public/static/images/canvas/plane_tab16.svg new file mode 100644 index 00000000..c66484e3 --- /dev/null +++ b/public/static/images/canvas/plane_tab16.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab17.svg b/public/static/images/canvas/plane_tab17.svg new file mode 100644 index 00000000..ae8ddd0f --- /dev/null +++ b/public/static/images/canvas/plane_tab17.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab18.svg b/public/static/images/canvas/plane_tab18.svg new file mode 100644 index 00000000..12bd0ad3 --- /dev/null +++ b/public/static/images/canvas/plane_tab18.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/shape_labrary01.svg b/public/static/images/canvas/shape_labrary01.svg new file mode 100644 index 00000000..c55fecfc --- /dev/null +++ b/public/static/images/canvas/shape_labrary01.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/shape_labrary02.svg b/public/static/images/canvas/shape_labrary02.svg new file mode 100644 index 00000000..88e1eadc --- /dev/null +++ b/public/static/images/canvas/shape_labrary02.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/shape_labrary03.svg b/public/static/images/canvas/shape_labrary03.svg new file mode 100644 index 00000000..194fd06b --- /dev/null +++ b/public/static/images/canvas/shape_labrary03.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 30e19173..be8b4185 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -38,7 +38,7 @@ $alert-color: #101010; z-index: 9999999; &.xxxm { - width: 230px; + width: 240px; } &.xxm { @@ -65,6 +65,10 @@ $alert-color: #101010; width: 440px; } + &.lrr { + width: 480px; + } + &.ml { width: 530px; } @@ -73,6 +77,10 @@ $alert-color: #101010; width: 640px; } + &.lx { + width: 770px; + } + &.l { width: 800px; } @@ -308,9 +316,19 @@ $alert-color: #101010; } } +.select-form { + .sort-select { + width: 100%; + } +} + .grid-select { flex: 1; + &.no-flx { + flex: unset; + } + .sort-select { width: 100%; background-color: #313131; @@ -768,7 +786,7 @@ $alert-color: #101010; } .eaves-keraba-td { - padding-left: 15px; + padding-left: 10px; } .eaves-keraba-ico { @@ -779,6 +797,7 @@ $alert-color: #101010; background-color: #3D3D3D; border: 1px solid #3D3D3D; border-radius: 2px; + cursor: pointer; &.act { border: 1px solid #ED0004; @@ -803,6 +822,10 @@ $alert-color: #101010; &.sm { margin-bottom: 15px; } + + span { + display: block; + } } // 지붕면 할당 @@ -936,9 +959,587 @@ $alert-color: #101010; } // 면형상 배치 -.roof-shape-menu { - &.plane { - grid-template-columns: 1fr 1fr 1fr 1fr 1fr; - grid-template-rows: 1fr 1fr 1fr; +.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 { + position: relative; + width: 100%; + height: 100%; + background-color: #313131; + border-radius: 2px; + + img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + + &.act, + &:hover { + background-color: #008BFF; + } } -} \ No newline at end of file +} + +.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; + } + } +}