+
{/*
*/}
diff --git a/src/components/floor-plan/modal/ImgLoad.jsx b/src/components/floor-plan/modal/ImgLoad.jsx
new file mode 100644
index 00000000..52ca977c
--- /dev/null
+++ b/src/components/floor-plan/modal/ImgLoad.jsx
@@ -0,0 +1,61 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+
+export default function ImgLoad() {
+ return (
+
+
+
+
画像を読み込む
+
+
+
+
+ サイズ調整と回転
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 6715d48b..441fccb4 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -17,1444 +17,1497 @@
// }
// }
// CanvasMenu
-.canvas-menu-wrap{
- position: fixed;
- top: 46px;
- left: 0;
- display: block;
- width: 100%;
- min-width: 1280px;
- padding-bottom: 0;
- background-color: #383838;
- transition: padding .17s ease-in-out;
- z-index: 999;
- .canvas-menu-inner{
- position: relative;
- display: flex;
- align-items: center;
- padding: 0 40px 0 20px;
- background-color: #2C2C2C;
- height: 46.8px;
- z-index: 999;
- .canvas-menu-list{
- display: flex;
- align-items: center;
- height: 100%;
- .canvas-menu-item{
- display: flex;
- align-items: center;
- height: 100%;
- button{
- display: flex;
- align-items: center;
- font-size: 12px;
- height: 100%;
- color: #fff;
- font-weight: 600;
- padding: 15px 20px;
- opacity: 0.55;
- transition: all .17s ease-in-out;
- .menu-icon{
- display: block;
- width: 14px;
- height: 14px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: contain;
- margin-right: 10px;
- &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
- &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
- &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
- &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
- &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
- &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
- &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
- }
- }
- &.active{
- background-color: #383838;
- button{
- opacity: 1;
- }
- }
- }
- }
- .canvas-side-btn-wrap{
- display: flex;
- align-items: center;
- margin-left: auto;
- .select-box{
- width: 124px;
- margin: 0 5px;
- height: 30px;
- > div{
- width: 100%;
- }
- }
- .btn-from{
- display: flex;
- align-items: center;
- gap: 5px;
- button{
- display: block;
- width: 30px;
- height: 30px;
- border-radius: 2px;
- background-color: #3D3D3D;
- background-position: center;
- background-repeat: no-repeat;
- background-size: 15px 15px;
- transition: all .17s ease-in-out;
- &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
- &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
- &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
- &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
- &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
- &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
- &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
- &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
- &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
- &:hover{
- background-color: #1083E3;
- }
- &.active{
- background-color: #1083E3;
- }
- }
- }
- .ico-btn-from{
- display: flex;
- align-items: center;
- gap: 5px;
- button{
- .ico{
- display: block;
- width: 15px;
- height: 15px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: contain;
- &.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);}
- &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);}
- &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);}
- &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
- }
- .name{
- font-size: 12px;
- color: #fff;
- }
- }
- &.form06{
- .name{
- font-size: 13px;
- }
- }
- }
- .vertical-horizontal{
- display: flex;
- min-width: 170px;
- height: 28px;
- margin-right: 5px;
- border-radius: 2px;
- background: #373737;
- line-height: 28px;
- overflow: hidden;
- span{
- padding: 0 10px;
- font-size: 13px;
- color: #fff;
- }
- button{
- margin-left: auto;
- height: 100%;
- background-color: #4B4B4B;
- font-size: 13px;
- font-weight: 400;
- color: #fff;
- padding: 0 7.5px;
- transition: all .17s ease-in-out;
- }
- &.on{
- button{
- background-color: #1083E3;
- }
- }
- }
- .size-control{
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 10px;
- background-color: #3D3D3D;
- border-radius: 2px;
- width: 100px;
- height: 30px;
- margin: 0 5px;
- span{
- font-size: 13px;
- color: #fff;
- }
- .control-btn{
- display: block;
- width: 12px;
- height: 12px;
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center;
- &.minus{
- background-image: url(../../public/static/images/canvas/minus.svg);
- }
- &.plus{
- background-image: url(../../public/static/images/canvas/plus.svg);
- }
- }
- }
- }
- }
- .canvas-depth2-wrap{
- position: absolute;
- top: -100%;
- left: 0;
- background-color: #383838;
- width: 100%;
- height: 50px;
- transition: all .17s ease-in-out;
- .canvas-depth2-inner{
- display: flex;
- align-items: center;
- padding: 0 40px;
- height: 100%;
- .canvas-depth2-list{
- display: flex;
- align-items: center ;
- height: 100%;
- .canvas-depth2-item{
- display: flex;
- align-items: center;
- margin-right: 26px;
- height: 100%;
- button{
- position: relative;
- opacity: 0.55;
- color: #fff;
- font-size: 12px;
- font-weight: normal;
- height: 100%;
- padding-right: 12px;
- }
- &.active{
- button{
- opacity: 1;
- font-weight: 600;
- &:after{
- content: '';
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 5px;
- height: 8px;
- background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
- }
- }
- }
- }
- }
- .canvas-depth2-btn-list{
- display: flex;
- align-items: center;
- margin-left: auto;
- height: 100%;
- .depth2-btn-box{
- display: flex;
- align-items: center;
- margin-right: 34px;
- height: 100%;
- transition: all .17s ease-in-out;
- button{
- position: relative;
- font-size: 12px;
- font-weight: 400;
- height: 100%;
- color: #fff;
- padding-right: 12px;
- &:after{
- content: '';
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 5px;
- height: 8px;
- background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
- }
- }
- &:last-child{
- margin-right: 0;
- }
- &.mouse{
- opacity: 0.55;
- }
- }
- }
- }
- &.active{
- top: 47px;
- }
- }
- &.active{
- padding-bottom: 50px;
- }
-}
-
-// canvas-layout
-.canvas-content{
- padding-top: 46.8px;
- transition: all .17s ease-in-out;
- .canvas-frame{
- height: calc(100vh - 129.3px);
- }
- &.active{
- padding-top: calc(46.8px + 50px);
- .canvas-frame{
- height: calc(100vh - 179.4px);
- }
- }
-}
-.canvas-layout{
- padding-top: 37px;
- .canvas-page-list{
- position: fixed;
- top: 92.8px;
- left: 0;
- display: flex;
- background-color: #1C1C1C;
- border-top: 1px solid #000;
- width: 100%;
- min-width: 1280px;
- transition: all .17s ease-in-out;
- z-index: 99;
- &.active{
- top: calc(92.8px + 50px);
- }
- .canvas-plane-wrap{
- display: flex;
- align-items: center;
- max-width: calc(100% - 45px);
- .canvas-page-box{
- display: flex;
- align-items: center;
- background-color: #1c1c1c;
- padding: 9.6px 20px;
- border-right:1px solid #000;
- min-width: 0;
- transition: all .17s ease-in-out;
- span{
- display: flex;
- align-items: center;
- width: 100%;
- font-size: 12px;
- font-family: 'Pretendard', sans-serif;
- color: #AAA;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- .close{
- flex: none;
- display: block;
- width: 7px;
- height: 8px;
- margin-left: 15px;
- background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center;
- background-size: cover;
- }
- &.on{
- background-color: #fff;
- span{
- font-weight: 600;
- color: #101010;
- }
- .close{
- background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center;
- }
- &:hover{
- background-color: #fff;
- }
- }
- &:hover{
- background-color: #000;
- }
- }
- }
- .plane-add{
- display: flex;
- align-items: center;
- justify-content: center;
- width: 45px;
- padding: 13.5px 0;
- background-color: #1C1C1C;
- border-right: 1px solid #000;
- transition: all .17s ease-in-out;
- span{
- display: block;
- width: 9px;
- height: 9px;
- background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center;
- background-size: cover;
- }
- &:hover{
- background-color: #000;
- }
- }
- }
-}
-
-.canvas-frame{
+.canvas-menu-wrap {
+ position: fixed;
+ top: 46px;
+ left: 0;
+ display: block;
+ width: 100%;
+ min-width: 1280px;
+ padding-bottom: 0;
+ background-color: #383838;
+ transition: padding 0.17s ease-in-out;
+ z-index: 999;
+ .canvas-menu-inner {
position: relative;
- // height: calc(100% - 36.5px);
- background-color: #F4F4F7;
- overflow: auto;
- transition: all .17s ease-in-out;
- // &::-webkit-scrollbar {
- // width: 10px;
- // height: 10px;
- // background-color: #fff;
- // }
- // &::-webkit-scrollbar-thumb {
- // background-color: #C1CCD7;
- // border-radius: 30px;
- // }
- // &::-webkit-scrollbar-track {
- // background-color: #fff;
- // }
- .canvas-container{
- margin: 0 auto;
- background-color: #fff;
- }
- canvas{
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
-}
-
-// sub-page
-.sub-header{
- position: fixed;
- top: 46px;
- left: 0;
- width: 100%;
- min-width: 1280px;
- height: 46px;
- border-bottom: 1px solid #000;
- background: #2C2C2C;
+ display: flex;
+ align-items: center;
+ padding: 0 40px 0 20px;
+ background-color: #2c2c2c;
+ height: 46.8px;
z-index: 999;
- .sub-header-inner{
+ .canvas-menu-list {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ .canvas-menu-item {
display: flex;
align-items: center;
height: 100%;
- padding: 0 100px;
- .sub-header-title-wrap{
- display: flex;
- align-items: center;
- .title-item{
- position: relative;
- padding: 0 24px;
- a{
- display: flex;
- align-items: center;
- .icon{
- width: 22px;
- height: 22px;
- margin-right: 8px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
- }
- }
- &:after{
- content: '';
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 1px;
- height: 16px;
- background-color: #D9D9D9;
- }
- &:first-child{
- padding-left: 0;
- }
- &:last-child{
- padding-right: 0;
- &:after{
- display: none;
- }
- }
+ button {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ height: 100%;
+ color: #fff;
+ font-weight: 600;
+ padding: 15px 20px;
+ opacity: 0.55;
+ transition: all 0.17s ease-in-out;
+ .menu-icon {
+ display: block;
+ width: 14px;
+ height: 14px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ margin-right: 10px;
+ &.con00 {
+ background-image: url(/static/images/canvas/menu_icon00.svg);
}
+ &.con01 {
+ background-image: url(/static/images/canvas/menu_icon01.svg);
+ }
+ &.con02 {
+ background-image: url(/static/images/canvas/menu_icon02.svg);
+ }
+ &.con03 {
+ background-image: url(/static/images/canvas/menu_icon03.svg);
+ }
+ &.con04 {
+ background-image: url(/static/images/canvas/menu_icon04.svg);
+ }
+ &.con05 {
+ background-image: url(/static/images/canvas/menu_icon05.svg);
+ }
+ &.con06 {
+ background-image: url(/static/images/canvas/menu_icon06.svg);
+ }
+ }
}
- .sub-header-title{
- font-size: 16px;
+ &.active {
+ background-color: #383838;
+ button {
+ opacity: 1;
+ }
+ }
+ }
+ }
+ .canvas-side-btn-wrap {
+ display: flex;
+ align-items: center;
+ margin-left: auto;
+ .select-box {
+ width: 124px;
+ margin: 0 5px;
+ height: 30px;
+ > div {
+ width: 100%;
+ }
+ }
+ .btn-from {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ button {
+ display: block;
+ width: 30px;
+ height: 30px;
+ border-radius: 2px;
+ background-color: #3d3d3d;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 15px 15px;
+ transition: all 0.17s ease-in-out;
+ &.btn01 {
+ background-image: url(../../public/static/images/canvas/side_icon03.svg);
+ }
+ &.btn02 {
+ background-image: url(../../public/static/images/canvas/side_icon02.svg);
+ }
+ &.btn03 {
+ background-image: url(../../public/static/images/canvas/side_icon01.svg);
+ }
+ &.btn04 {
+ background-image: url(../../public/static/images/canvas/side_icon04.svg);
+ }
+ &.btn05 {
+ background-image: url(../../public/static/images/canvas/side_icon05.svg);
+ }
+ &.btn06 {
+ background-image: url(../../public/static/images/canvas/side_icon06.svg);
+ }
+ &.btn07 {
+ background-image: url(../../public/static/images/canvas/side_icon07.svg);
+ }
+ &.btn08 {
+ background-image: url(../../public/static/images/canvas/side_icon08.svg);
+ }
+ &.btn09 {
+ background-image: url(../../public/static/images/canvas/side_icon09.svg);
+ }
+ &.btn10 {
+ background-image: url(../../public/static/images/canvas/side_icon10.svg);
+ background-size: 15px 14px;
+ }
+ &:hover {
+ background-color: #1083e3;
+ }
+ &.active {
+ background-color: #1083e3;
+ }
+ }
+ }
+ .ico-btn-from {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ button {
+ .ico {
+ display: block;
+ width: 15px;
+ height: 15px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ &.ico01 {
+ background-image: url(../../public/static/images/canvas/ico-flx01.svg);
+ }
+ &.ico02 {
+ background-image: url(../../public/static/images/canvas/ico-flx02.svg);
+ }
+ &.ico03 {
+ background-image: url(../../public/static/images/canvas/ico-flx03.svg);
+ }
+ &.ico04 {
+ background-image: url(../../public/static/images/canvas/ico-flx04.svg);
+ }
+ }
+ .name {
+ font-size: 12px;
color: #fff;
- font-weight: 600;
+ }
}
- .sub-header-location{
- margin-left: auto;
- display: flex;
- align-items: center;
- .location-item{
- position: relative;
- display: flex;
- align-items: center;
- padding: 0 10px;
- span{
- display: flex;
- font-size: 12px;
- color: #AAA;
- font-weight: normal;
- cursor: default;
- }
- &:after{
- content: '';
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 4px;
- height: 6px;
- background: url(../../public/static/images/main/loaction_arr.svg)no-repeat center;
- }
- &:first-child{
- padding-left: 0;
- }
- &:last-child{
- padding-right: 0;
- span{
- color: #fff;
- }
- &:after{
- display: none;
- }
- }
- }
+ &.form06 {
+ .name {
+ font-size: 13px;
+ }
}
- }
-}
-
-// sub content
-.sub-content{
- padding-top: 46px;
- .sub-content-inner{
- max-width: 1760px;
- margin: 0 auto;
- padding: 20px 20px 0;
- .sub-content-box{
- margin-bottom: 20px;
- &:last-child{
- margin-bottom: 0;
- }
- }
- }
- &.estimate{
+ }
+ .vertical-horizontal {
display: flex;
- flex-direction: column;
- padding-top: 0;
- .sub-content-inner{
- flex: 1;
- width: 100%;
+ min-width: 170px;
+ height: 28px;
+ margin-right: 5px;
+ border-radius: 2px;
+ background: #373737;
+ line-height: 28px;
+ overflow: hidden;
+ span {
+ padding: 0 10px;
+ font-size: 13px;
+ color: #fff;
}
- }
-}
-.sub-table-box{
- padding: 20px;
- border-radius: 6px;
- border: 1px solid #E9EAED;
- background: #FFF;
- box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
- .table-box-title-wrap{
- display: flex;
- align-items: center;
- margin-bottom: 15px;
- .title-wrap{
- display: flex;
- align-items: center;
- h3{
- display: block;
- font-size: 15px;
- color: #101010;
- font-weight: 600;
- margin-right: 14px;
- &.product{
- margin-right: 10px;
- }
- }
- .product_tit{
- position: relative;
- font-size: 15px;
- font-weight: 600;
- color: #1083E3;
- padding-left: 10px;
- &::before{
- content: '';
- position: absolute;
- top: 50%;
- left: 0;
- transform: translateY(-50%);
- width: 1px;
- height: 11px;
- background-color: #D9D9D9;
- }
- }
- .option{
- padding-left: 5px;
- font-size: 13px;
- color: #101010;
- font-weight: 400;
- }
- .info-wrap{
- display: flex;
- align-items: center;
- li{
- position: relative;
- padding: 0 6px;
- font-size: 12px;
- color: #101010;
- font-weight: normal;
- span{
- font-weight: 600;
- &.red{
- color: #E23D70;
- }
- }
- &:after{
- content: '';
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 1px;
- height: 11px;
- background-color: #D9D9D9;
- }
- &:first-child{padding-left: 0;}
- &:last-child{padding-right: 0;&::after{display: none;}}
- }
- }
+ button {
+ margin-left: auto;
+ height: 100%;
+ background-color: #4b4b4b;
+ font-size: 13px;
+ font-weight: 400;
+ color: #fff;
+ padding: 0 7.5px;
+ transition: all 0.17s ease-in-out;
}
- }
- .left-unit-box{
- margin-left: auto;
- display: flex;
- align-items: center;
- }
- .promise-gudie{
- display: block;
- font-size: 13px;
- font-weight: 700;
- color: #101010;
- margin-bottom: 20px;
- }
- .important{
- color: #f00;
- }
- .sub-center-footer{
+ &.on {
+ button {
+ background-color: #1083e3;
+ }
+ }
+ }
+ .size-control {
display: flex;
align-items: center;
justify-content: center;
- margin-top: 20px;
- }
- .sub-right-footer{
- display: flex;
- align-items: center;
- justify-content: flex-end;
- margin-top: 20px;
- }
-}
-.pagination-wrap{
- margin-top: 24px;
-}
-
-.infomation-wrap{
- margin-bottom: 30px;
-}
-
-.infomation-box-wrap{
- display: flex;
- gap: 10px;
- .sub-table-box{
- flex: 1 ;
- }
- .info-title{
- font-size: 14px;
- font-weight: 500;
- color: #344356;
- margin-bottom: 10px;
- }
- .info-inner{
- position: relative;
- font-size: 13px;
- color: #344356;
- .copy-ico{
- position: absolute;
- bottom: 0;
- right: 0;
- width: 16px;
- height: 16px;
- background: url(../../public/static/images/sub/copy_ico.svg)no-repeat center;
- background-size: cover;
+ gap: 10px;
+ background-color: #3d3d3d;
+ border-radius: 2px;
+ width: 100px;
+ height: 30px;
+ margin: 0 5px;
+ span {
+ font-size: 13px;
+ color: #fff;
}
- }
-}
-
-// 견적서
-.estimate-list-wrap{
- display: flex;
- align-items: center;
- margin-bottom: 10px;
- &.one{
- .estimate-box{
- &:last-child{
- min-width: unset;
- }
+ .control-btn {
+ display: block;
+ width: 12px;
+ height: 12px;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+ &.minus {
+ background-image: url(../../public/static/images/canvas/minus.svg);
+ }
+ &.plus {
+ background-image: url(../../public/static/images/canvas/plus.svg);
+ }
}
+ }
}
- .estimate-box{
- flex: 1 ;
- display: flex;
- align-items: center;
- &:last-child{
- flex: none;
- min-width: 220px;
- }
- .estimate-tit{
- width: 105px;
- height: 30px;
- line-height: 30px;
- background-color: #F4F4F7;
- border-radius: 100px;
- text-align: center;
- font-size: 13px;
- font-weight: 500;
- color: #344356;
- }
- .estimate-name{
- font-size: 13px;
- color: #344356;
- margin-left: 14px;
- font-weight: 400;
- &.blue{
- font-size: 16px;
- font-weight: 700;
- color: #1083E3;
- }
- &.red{
- font-size: 16px;
- font-weight: 700;
- color: #D72A2A;
- }
- }
- }
- &:last-child{
- margin-bottom: 0;
- }
-}
-
-// file drag box
-.drag-file-box{
- padding: 10px;
- .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;
- margin-top: 15px;
- p{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- font-size: 13px;
- color: #ccc;
- font-weight: 400;
- cursor: default;
- }
- }
- .file-list{
- .file-item{
- margin-bottom: 15px;
- span{
- position: relative;
- font-size: 13px;
- color: #45576F;
- font-weight: 400;
- white-space: nowrap;
- padding-right: 55px;
- button{
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 15px;
- height: 15px;
- background: url(../../public/static/images/sub/file_delete.svg)no-repeat center;
- background-size: cover;
- }
- }
- &:last-child{
- margin-bottom: 0;
- }
- }
- }
-}
-
-.estimate-arr-btn{
- display: block;
- width: 20px;
- height: 20px;
- background-color: #94A0AD;
- border: 1px solid #94A0AD;
- background-position: center;
- background-repeat: no-repeat;
- background-image: url(../../public/static/images/canvas/estiment_arr.svg);
- background-size: 11px 7px;
- border-radius: 2px;
- &.up{
- rotate: 180deg;
- }
- &.on{
- background-color: #fff;
- border-color: #C2D0DD;
- background-image: url(../../public/static/images/canvas/estiment_arr_color.svg)
- }
-}
-.estimate-check-wrap{
- .estimate-check-inner{
- display: block;
- }
- &.hide{
- border-bottom: 1px solid #ECF0F4;
- margin-bottom: 15px;
- .estimate-check-inner{
- display: none;
- }
- }
-}
-
-.special-note-check-wrap{
- display: grid;
- grid-template-columns: repeat(5, 1fr);
- border-radius: 3px;
- margin-bottom: 30px;
- .special-note-check-item{
- padding: 14px 10px;
- border: 1px solid #ECF0F4;
- margin-top: -1px;
- margin-right: -1px;
- &.act{
- background-color: #F7F9FA;
- }
- }
-}
-
-.calculation-estimate{
- border: 1px solid #ECF0F4;
- border-radius: 3px;
- padding: 24px;
- max-height: 350px;
- overflow-y: auto;
- margin-bottom: 30px;
- dl{
- margin-bottom: 35px;
- &:last-child{
- margin-bottom: 0;
- }
- dt{
- font-size: 13px;
- font-weight: 600;
- color: #1083E3;
- margin-bottom: 15px;
- }
- dd{
- font-size: 12px;
- font-weight: 400;
- color: #45576F;
- margin-bottom: 8px;
- &:last-child{
- margin-bottom: 0;
- }
- }
- }
- &::-webkit-scrollbar {
- width: 4px;
- background-color: transparent;
- }
- &::-webkit-scrollbar-thumb {
- background-color: #d9dee2;
- }
- &::-webkit-scrollbar-track {
- background-color: transparent;
- }
-}
-.esimate-wrap{
- margin-bottom: 20px;
-}
-
-.estimate-product-option{
- display: flex;
- align-items: center;
- margin-bottom: 15px;
- .product-price-wrap{
- display: flex;
- align-items: center;
- .product-price-tit{
- font-size: 13px;
- font-weight: 400;
- color: #45576F;
- margin-right: 10px;
- }
- .select-wrap{
- width: 110px;
- }
- }
- .product-edit-wrap{
- display: flex;
- align-items: center;
- margin-left: auto;
- .product-edit-explane{
- display: flex;
- align-items: center;
- margin-right: 15px;
- .explane-item{
- position: relative;
- display: flex;
- align-items: center;
- padding: 0 10px;
- font-size: 12px;
- font-weight: 400;
- span{
- width: 20px;
- height: 20px;
- margin-right: 5px;
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
- }
- &:before{
- content: '';
- position: absolute;
- top: 50%;
- left: 0;
- transform: translateY(-50%);
- width: 1px;
- height: 12px;
- background-color: #D9D9D9;
- }
- &:first-child{
- padding-left: 0;
- &::before{
- display: none;
- }
- }
- &:last-child{
- padding-right: 0;
- }
- &.item01{
- color: #3BBB48;
- span{
- background-image: url(../../public/static/images/sub/open_ico.svg);
- }
- }
- &.item02{
- color: #909000;
- span{
- background-image: url(../../public/static/images/sub/change_ico.svg);
- }
- }
- &.item03{
- color: #0191C9;
- span{
- background-image: url(../../public/static/images/sub/attachment_ico.svg);
- }
- }
- &.item04{
- color: #F16A6A;
- span{
- background-image: url(../../public/static/images/sub/click_check_ico.svg);
- }
- }
- }
- }
- .product-edit-btn{
- display: flex;
- align-items: center;
- button{
- display: flex;
- align-items: center;
- span{
- width: 13px;
- height: 13px;
- margin-right: 5px;
- background-size: cover;
- &.plus{
- background: url(../../public/static/images/sub/plus_btn.svg)no-repeat center;
- }
- &.minus{
- background: url(../../public/static/images/sub/minus_btn.svg)no-repeat center;
- }
- }
- }
- }
- }
-}
-
-// 발전시물레이션
-.chart-wrap{
- display: flex;
- gap: 20px;
+ }
+ .canvas-depth2-wrap {
+ position: absolute;
+ top: -100%;
+ left: 0;
+ background-color: #383838;
width: 100%;
- .sub-table-box{
- height: 100%;
- }
- .chart-inner{
- flex: 1;
- .chart-box{
- margin-bottom: 30px;
- }
- }
- .chart-table-wrap{
+ height: 50px;
+ transition: all 0.17s ease-in-out;
+ .canvas-depth2-inner {
+ display: flex;
+ align-items: center;
+ padding: 0 40px;
+ height: 100%;
+ .canvas-depth2-list {
display: flex;
- flex-direction: column;
- flex: none;
- width: 650px;
- .sub-table-box{
- flex: 1;
- &:first-child{
- margin-bottom: 20px;
- }
- }
- }
-}
-
-.chart-month-table{
- table{
- table-layout: fixed;
- border-collapse:collapse;
- border: 1px solid #ECF0F4;
- border-radius: 4px;
- thead{
- th{
- padding: 4.5px 0;
- border-bottom: 1px solid #ECF0F4;
- text-align: center;
- font-size: 13px;
- color: #45576F;
- font-weight: 500;
- background-color: #F8F9FA;
- }
- }
- tbody{
- td{
- font-size: 13px;
- color: #45576F;
- text-align: center;
- padding: 4.5px 0;
- }
- }
- }
-}
-
-.simulation-guide-wrap{
- display: flex;
- padding: 20px;
- .simulation-tit-wrap{
- flex: none;
- padding-right: 40px;
- border-right: 1px solid #EEEEEE;
- span{
- display: block;
+ align-items: center;
+ height: 100%;
+ .canvas-depth2-item {
+ display: flex;
+ align-items: center;
+ margin-right: 26px;
+ height: 100%;
+ button {
position: relative;
- padding-left: 60px;
- font-size: 15px;
- color: #14324F;
- font-weight: 600;
- &::before{
+ opacity: 0.55;
+ color: #fff;
+ font-size: 12px;
+ font-weight: normal;
+ height: 100%;
+ padding-right: 12px;
+ }
+ &.active {
+ button {
+ opacity: 1;
+ font-weight: 600;
+ &:after {
content: '';
position: absolute;
top: 50%;
- left: 0;
+ right: 0;
transform: translateY(-50%);
- width: 40px;
- height: 40px;
- background: url(../../public/static/images/sub/simulation_guide.svg)no-repeat center;
- background-size: cover;
+ width: 5px;
+ height: 8px;
+ background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+ }
}
+ }
}
- }
- .simulation-guide-box{
- flex: 1;
- padding-left: 40px;
- dl{
- margin-bottom: 25px;
- dt{
- font-size: 13px;
- color: #101010;
- font-weight: 600;
- margin-bottom: 5px;
- }
- dd{
- font-size: 12px;
- color: #45576F;
- font-weight: 400;
- line-height: 24px;
- }
- &:last-child{
- margin-bottom: 0;
- }
- }
- ul, ol{
- list-style: unset;
- }
- }
-}
-
-.module-total{
- display: flex;
- align-items: center;
- background-color: #F8F9FA;
- padding: 9px 0;
- margin-right: 4px;
- border: 1px solid #ECF0F4;
- border-top: none;
- .total-title{
- flex: 1;
- text-align: center;
- font-size: 13px;
- color: #344356;
- font-weight: 500;
- }
- .total-num{
- flex: none;
- width: 121px;
- text-align: center;
- font-size: 15px;
- color: #344356;
- font-weight: 500;
- }
-}
-
-// 물건상세
-.information-help-wrap{
- display: flex;
- padding: 24px;
- background-color: #F4F4F4;
- border-radius: 4px;
- margin-bottom: 15px;
- .information-help-tit-wrap{
- position: relative;
+ }
+ .canvas-depth2-btn-list {
display: flex;
align-items: center;
- padding-right: 40px;
- border-right: 1px solid #E0E0E3;
- .help-tit-icon{
- width: 40px;
- height: 40px;
- border-radius: 50%;
- margin-right: 10px;
- background: #fff url(../../public/static/images/sub/information_help.svg)no-repeat center;
- background-size: 20px 20px;
- }
- .help-tit{
- font-size: 13px;
- font-weight: 600;
- color: #45576F;
- }
- }
- .information-help-guide{
- padding-left: 40px;
- span{
- display: block;
+ margin-left: auto;
+ height: 100%;
+ .depth2-btn-box {
+ display: flex;
+ align-items: center;
+ margin-right: 34px;
+ height: 100%;
+ transition: all 0.17s ease-in-out;
+ button {
+ position: relative;
font-size: 12px;
font-weight: 400;
- color: #45576F;
- margin-bottom: 7px;
- &:last-child{
- margin-bottom: 0;
+ height: 100%;
+ color: #fff;
+ padding-right: 12px;
+ &:after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: 5px;
+ height: 8px;
+ background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
}
+ }
+ &:last-child {
+ margin-right: 0;
+ }
+ &.mouse {
+ opacity: 0.55;
+ }
}
+ }
}
+ &.active {
+ top: 47px;
+ }
+ }
+ &.active {
+ padding-bottom: 50px;
+ }
}
-.community-search-warp{
+// canvas-layout
+.canvas-content {
+ padding-top: 46.8px;
+ transition: all 0.17s ease-in-out;
+ .canvas-frame {
+ height: calc(100vh - 129.3px);
+ }
+ &.active {
+ padding-top: calc(46.8px + 50px);
+ .canvas-frame {
+ height: calc(100vh - 179.4px);
+ }
+ }
+}
+.canvas-layout {
+ padding-top: 37px;
+ .canvas-page-list {
+ position: fixed;
+ top: 92.8px;
+ left: 0;
+ display: flex;
+ background-color: #1c1c1c;
+ border-top: 1px solid #000;
+ width: 100%;
+ min-width: 1280px;
+ transition: all 0.17s ease-in-out;
+ z-index: 99;
+ &.active {
+ top: calc(92.8px + 50px);
+ }
+ .canvas-plane-wrap {
+ display: flex;
+ align-items: center;
+ max-width: calc(100% - 45px);
+ .canvas-page-box {
+ display: flex;
+ align-items: center;
+ background-color: #1c1c1c;
+ padding: 9.6px 20px;
+ border-right: 1px solid #000;
+ min-width: 0;
+ transition: all 0.17s ease-in-out;
+ span {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ font-size: 12px;
+ font-family: 'Pretendard', sans-serif;
+ color: #aaa;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ .close {
+ flex: none;
+ display: block;
+ width: 7px;
+ height: 8px;
+ margin-left: 15px;
+ background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center;
+ background-size: cover;
+ }
+ &.on {
+ background-color: #fff;
+ span {
+ font-weight: 600;
+ color: #101010;
+ }
+ .close {
+ background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center;
+ }
+ &:hover {
+ background-color: #fff;
+ }
+ }
+ &:hover {
+ background-color: #000;
+ }
+ }
+ }
+ .plane-add {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 45px;
+ padding: 13.5px 0;
+ background-color: #1c1c1c;
+ border-right: 1px solid #000;
+ transition: all 0.17s ease-in-out;
+ span {
+ display: block;
+ width: 9px;
+ height: 9px;
+ background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center;
+ background-size: cover;
+ }
+ &:hover {
+ background-color: #000;
+ }
+ }
+ }
+}
+
+.canvas-frame {
+ position: relative;
+ // height: calc(100% - 36.5px);
+ background-color: #f4f4f7;
+ overflow: auto;
+ transition: all 0.17s ease-in-out;
+ // &::-webkit-scrollbar {
+ // width: 10px;
+ // height: 10px;
+ // background-color: #fff;
+ // }
+ // &::-webkit-scrollbar-thumb {
+ // background-color: #C1CCD7;
+ // border-radius: 30px;
+ // }
+ // &::-webkit-scrollbar-track {
+ // background-color: #fff;
+ // }
+ .canvas-container {
+ margin: 0 auto;
+ background-color: #fff;
+ }
+ canvas {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
+
+// sub-page
+.sub-header {
+ position: fixed;
+ top: 46px;
+ left: 0;
+ width: 100%;
+ min-width: 1280px;
+ height: 46px;
+ border-bottom: 1px solid #000;
+ background: #2c2c2c;
+ z-index: 999;
+ .sub-header-inner {
display: flex;
- flex-direction: column;
align-items: center;
- padding: 10px 0 30px 0;
- border-bottom: 1px solid #E5E5E5;
- margin-bottom: 24px;
- .community-search-box{
+ height: 100%;
+ padding: 0 100px;
+ .sub-header-title-wrap {
+ display: flex;
+ align-items: center;
+ .title-item {
+ position: relative;
+ padding: 0 24px;
+ a {
+ display: flex;
+ align-items: center;
+ .icon {
+ width: 22px;
+ height: 22px;
+ margin-right: 8px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+ &.drawing {
+ background-image: url(../../public/static/images/main/drawing_icon.svg);
+ }
+ }
+ }
+ &:after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: 1px;
+ height: 16px;
+ background-color: #d9d9d9;
+ }
+ &:first-child {
+ padding-left: 0;
+ }
+ &:last-child {
+ padding-right: 0;
+ &:after {
+ display: none;
+ }
+ }
+ }
+ }
+ .sub-header-title {
+ font-size: 16px;
+ color: #fff;
+ font-weight: 600;
+ }
+ .sub-header-location {
+ margin-left: auto;
+ display: flex;
+ align-items: center;
+ .location-item {
position: relative;
display: flex;
align-items: center;
- 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;
- }
+ padding: 0 10px;
+ span {
+ display: flex;
+ font-size: 12px;
+ color: #aaa;
+ font-weight: normal;
+ cursor: default;
}
- .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;
+ &:after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: 4px;
+ height: 6px;
+ background: url(../../public/static/images/main/loaction_arr.svg) no-repeat center;
}
+ &:first-child {
+ padding-left: 0;
+ }
+ &:last-child {
+ padding-right: 0;
+ span {
+ color: #fff;
+ }
+ &:after {
+ display: none;
+ }
+ }
+ }
}
+ }
}
-// 자료 다운로드
-.file-down-list{
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 14px;
- .file-down-item{
+// sub content
+.sub-content {
+ padding-top: 46px;
+ .sub-content-inner {
+ max-width: 1760px;
+ margin: 0 auto;
+ padding: 20px 20px 0;
+ .sub-content-box {
+ margin-bottom: 20px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+ &.estimate {
+ display: flex;
+ flex-direction: column;
+ padding-top: 0;
+ .sub-content-inner {
+ flex: 1;
+ width: 100%;
+ }
+ }
+}
+.sub-table-box {
+ padding: 20px;
+ border-radius: 6px;
+ border: 1px solid #e9eaed;
+ background: #fff;
+ box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+ .table-box-title-wrap {
+ display: flex;
+ align-items: center;
+ margin-bottom: 15px;
+ .title-wrap {
+ display: flex;
+ align-items: center;
+ h3 {
+ display: block;
+ font-size: 15px;
+ color: #101010;
+ font-weight: 600;
+ margin-right: 14px;
+ &.product {
+ margin-right: 10px;
+ }
+ }
+ .product_tit {
+ position: relative;
+ font-size: 15px;
+ font-weight: 600;
+ color: #1083e3;
+ padding-left: 10px;
+ &::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ width: 1px;
+ height: 11px;
+ background-color: #d9d9d9;
+ }
+ }
+ .option {
+ padding-left: 5px;
+ font-size: 13px;
+ color: #101010;
+ font-weight: 400;
+ }
+ .info-wrap {
display: flex;
align-items: center;
- padding: 24px;
- border-radius: 4px;
- border: 1px solid #E5E5E5;
- background: #FFF;
- transition: all .15s ease-in-out;
- .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;
+ li {
+ position: relative;
+ padding: 0 6px;
+ font-size: 12px;
+ color: #101010;
+ font-weight: normal;
+ span {
+ font-weight: 600;
+ &.red {
+ color: #e23d70;
}
- .item-name{
- font-size: 16px;
- color: #101010;
- font-weight: 500;
- margin-bottom: 13px;
- }
- .item-date{
- font-size: 13px;
- font-weight: 400;
- color: #344356;
+ }
+ &:after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: 1px;
+ height: 11px;
+ background-color: #d9d9d9;
+ }
+ &:first-child {
+ padding-left: 0;
+ }
+ &:last-child {
+ padding-right: 0;
+ &::after {
+ display: none;
}
+ }
}
- .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;
- }
+ }
}
-}
-
-.file-down-nodata{
+ }
+ .left-unit-box {
+ margin-left: auto;
+ display: flex;
+ align-items: center;
+ }
+ .promise-gudie {
+ display: block;
+ font-size: 13px;
+ font-weight: 700;
+ color: #101010;
+ margin-bottom: 20px;
+ }
+ .important {
+ color: #f00;
+ }
+ .sub-center-footer {
display: flex;
align-items: center;
justify-content: center;
- width: 100%;
- height: 148px;
- padding: 24px;
- border-radius: 4px;
- border: 1px solid #E5E5E5;
- font-size: 16px;
+ margin-top: 20px;
+ }
+ .sub-right-footer {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ margin-top: 20px;
+ }
+}
+.pagination-wrap {
+ margin-top: 24px;
+}
+
+.infomation-wrap {
+ margin-bottom: 30px;
+}
+
+.infomation-box-wrap {
+ display: flex;
+ gap: 10px;
+ .sub-table-box {
+ flex: 1;
+ }
+ .info-title {
+ font-size: 14px;
font-weight: 500;
color: #344356;
+ margin-bottom: 10px;
+ }
+ .info-inner {
+ position: relative;
+ font-size: 13px;
+ color: #344356;
+ .copy-ico {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 16px;
+ height: 16px;
+ background: url(../../public/static/images/sub/copy_ico.svg) no-repeat center;
+ background-size: cover;
+ }
+ }
+}
+
+// 견적서
+.estimate-list-wrap {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+ &.one {
+ .estimate-box {
+ &:last-child {
+ min-width: unset;
+ }
+ }
+ }
+ .estimate-box {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ &:last-child {
+ flex: none;
+ min-width: 220px;
+ }
+ .estimate-tit {
+ width: 105px;
+ height: 30px;
+ line-height: 30px;
+ background-color: #f4f4f7;
+ border-radius: 100px;
+ text-align: center;
+ font-size: 13px;
+ font-weight: 500;
+ color: #344356;
+ }
+ .estimate-name {
+ font-size: 13px;
+ color: #344356;
+ margin-left: 14px;
+ font-weight: 400;
+ &.blue {
+ font-size: 16px;
+ font-weight: 700;
+ color: #1083e3;
+ }
+ &.red {
+ font-size: 16px;
+ font-weight: 700;
+ color: #d72a2a;
+ }
+ }
+ }
+ &:last-child {
+ margin-bottom: 0;
+ }
+}
+
+// file drag box
+.drag-file-box {
+ padding: 10px;
+ .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 0.15s ease-in-out;
+ &:hover {
+ background-color: #607f9a;
+ }
+ }
+ }
+ .drag-file-area {
+ position: relative;
+ margin-top: 15px;
+ p {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 13px;
+ color: #ccc;
+ font-weight: 400;
+ cursor: default;
+ }
+ }
+ .file-list {
+ .file-item {
+ margin-bottom: 15px;
+ span {
+ position: relative;
+ font-size: 13px;
+ color: #45576f;
+ font-weight: 400;
+ white-space: nowrap;
+ padding-right: 55px;
+ button {
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: 15px;
+ height: 15px;
+ background: url(../../public/static/images/sub/file_delete.svg) no-repeat center;
+ background-size: cover;
+ }
+ }
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+}
+
+.estimate-arr-btn {
+ display: block;
+ width: 20px;
+ height: 20px;
+ background-color: #94a0ad;
+ border: 1px solid #94a0ad;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-image: url(../../public/static/images/canvas/estiment_arr.svg);
+ background-size: 11px 7px;
+ border-radius: 2px;
+ &.up {
+ rotate: 180deg;
+ }
+ &.on {
+ background-color: #fff;
+ border-color: #c2d0dd;
+ background-image: url(../../public/static/images/canvas/estiment_arr_color.svg);
+ }
+}
+.estimate-check-wrap {
+ .estimate-check-inner {
+ display: block;
+ }
+ &.hide {
+ border-bottom: 1px solid #ecf0f4;
+ margin-bottom: 15px;
+ .estimate-check-inner {
+ display: none;
+ }
+ }
+}
+
+.special-note-check-wrap {
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ border-radius: 3px;
+ margin-bottom: 30px;
+ .special-note-check-item {
+ padding: 14px 10px;
+ border: 1px solid #ecf0f4;
+ margin-top: -1px;
+ margin-right: -1px;
+ &.act {
+ background-color: #f7f9fa;
+ }
+ }
+}
+
+.calculation-estimate {
+ border: 1px solid #ecf0f4;
+ border-radius: 3px;
+ padding: 24px;
+ max-height: 350px;
+ overflow-y: auto;
+ margin-bottom: 30px;
+ dl {
+ margin-bottom: 35px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ dt {
+ font-size: 13px;
+ font-weight: 600;
+ color: #1083e3;
+ margin-bottom: 15px;
+ }
+ dd {
+ font-size: 12px;
+ font-weight: 400;
+ color: #45576f;
+ margin-bottom: 8px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+ &::-webkit-scrollbar {
+ width: 4px;
+ background-color: transparent;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: #d9dee2;
+ }
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+}
+.esimate-wrap {
+ margin-bottom: 20px;
+}
+
+.estimate-product-option {
+ display: flex;
+ align-items: center;
+ margin-bottom: 15px;
+ .product-price-wrap {
+ display: flex;
+ align-items: center;
+ .product-price-tit {
+ font-size: 13px;
+ font-weight: 400;
+ color: #45576f;
+ margin-right: 10px;
+ }
+ .select-wrap {
+ width: 110px;
+ }
+ }
+ .product-edit-wrap {
+ display: flex;
+ align-items: center;
+ margin-left: auto;
+ .product-edit-explane {
+ display: flex;
+ align-items: center;
+ margin-right: 15px;
+ .explane-item {
+ position: relative;
+ display: flex;
+ align-items: center;
+ padding: 0 10px;
+ font-size: 12px;
+ font-weight: 400;
+ span {
+ width: 20px;
+ height: 20px;
+ margin-right: 5px;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+ &:before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ width: 1px;
+ height: 12px;
+ background-color: #d9d9d9;
+ }
+ &:first-child {
+ padding-left: 0;
+ &::before {
+ display: none;
+ }
+ }
+ &:last-child {
+ padding-right: 0;
+ }
+ &.item01 {
+ color: #3bbb48;
+ span {
+ background-image: url(../../public/static/images/sub/open_ico.svg);
+ }
+ }
+ &.item02 {
+ color: #909000;
+ span {
+ background-image: url(../../public/static/images/sub/change_ico.svg);
+ }
+ }
+ &.item03 {
+ color: #0191c9;
+ span {
+ background-image: url(../../public/static/images/sub/attachment_ico.svg);
+ }
+ }
+ &.item04 {
+ color: #f16a6a;
+ span {
+ background-image: url(../../public/static/images/sub/click_check_ico.svg);
+ }
+ }
+ }
+ }
+ .product-edit-btn {
+ display: flex;
+ align-items: center;
+ button {
+ display: flex;
+ align-items: center;
+ span {
+ width: 13px;
+ height: 13px;
+ margin-right: 5px;
+ background-size: cover;
+ &.plus {
+ background: url(../../public/static/images/sub/plus_btn.svg) no-repeat center;
+ }
+ &.minus {
+ background: url(../../public/static/images/sub/minus_btn.svg) no-repeat center;
+ }
+ }
+ }
+ }
+ }
+}
+
+// 발전시물레이션
+.chart-wrap {
+ display: flex;
+ gap: 20px;
+ width: 100%;
+ .sub-table-box {
+ height: 100%;
+ }
+ .chart-inner {
+ flex: 1;
+ .chart-box {
+ margin-bottom: 30px;
+ }
+ }
+ .chart-table-wrap {
+ display: flex;
+ flex-direction: column;
+ flex: none;
+ width: 650px;
+ .sub-table-box {
+ flex: 1;
+ &:first-child {
+ margin-bottom: 20px;
+ }
+ }
+ }
+}
+
+.chart-month-table {
+ table {
+ table-layout: fixed;
+ border-collapse: collapse;
+ border: 1px solid #ecf0f4;
+ border-radius: 4px;
+ thead {
+ th {
+ padding: 4.5px 0;
+ border-bottom: 1px solid #ecf0f4;
+ text-align: center;
+ font-size: 13px;
+ color: #45576f;
+ font-weight: 500;
+ background-color: #f8f9fa;
+ }
+ }
+ tbody {
+ td {
+ font-size: 13px;
+ color: #45576f;
+ text-align: center;
+ padding: 4.5px 0;
+ }
+ }
+ }
+}
+
+.simulation-guide-wrap {
+ display: flex;
+ padding: 20px;
+ .simulation-tit-wrap {
+ flex: none;
+ padding-right: 40px;
+ border-right: 1px solid #eeeeee;
+ span {
+ display: block;
+ position: relative;
+ padding-left: 60px;
+ font-size: 15px;
+ color: #14324f;
+ font-weight: 600;
+ &::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ width: 40px;
+ height: 40px;
+ background: url(../../public/static/images/sub/simulation_guide.svg) no-repeat center;
+ background-size: cover;
+ }
+ }
+ }
+ .simulation-guide-box {
+ flex: 1;
+ padding-left: 40px;
+ dl {
+ margin-bottom: 25px;
+ dt {
+ font-size: 13px;
+ color: #101010;
+ font-weight: 600;
+ margin-bottom: 5px;
+ }
+ dd {
+ font-size: 12px;
+ color: #45576f;
+ font-weight: 400;
+ line-height: 24px;
+ }
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ ul,
+ ol {
+ list-style: unset;
+ }
+ }
+}
+
+.module-total {
+ display: flex;
+ align-items: center;
+ background-color: #f8f9fa;
+ padding: 9px 0;
+ margin-right: 4px;
+ border: 1px solid #ecf0f4;
+ border-top: none;
+ .total-title {
+ flex: 1;
+ text-align: center;
+ font-size: 13px;
+ color: #344356;
+ font-weight: 500;
+ }
+ .total-num {
+ flex: none;
+ width: 121px;
+ text-align: center;
+ font-size: 15px;
+ color: #344356;
+ font-weight: 500;
+ }
+}
+
+// 물건상세
+.information-help-wrap {
+ display: flex;
+ padding: 24px;
+ background-color: #f4f4f4;
+ border-radius: 4px;
+ margin-bottom: 15px;
+ .information-help-tit-wrap {
+ position: relative;
+ display: flex;
+ align-items: center;
+ padding-right: 40px;
+ border-right: 1px solid #e0e0e3;
+ .help-tit-icon {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ margin-right: 10px;
+ background: #fff url(../../public/static/images/sub/information_help.svg) no-repeat center;
+ background-size: 20px 20px;
+ }
+ .help-tit {
+ font-size: 13px;
+ font-weight: 600;
+ color: #45576f;
+ }
+ }
+ .information-help-guide {
+ padding-left: 40px;
+ span {
+ display: block;
+ font-size: 12px;
+ font-weight: 400;
+ color: #45576f;
+ margin-bottom: 7px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+}
+
+.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 0.15s ease-in-out;
+ .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;
+ }
+ }
+}
+
+.file-down-nodata {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 148px;
+ padding: 24px;
+ border-radius: 4px;
+ border: 1px solid #e5e5e5;
+ font-size: 16px;
+ font-weight: 500;
+ color: #344356;
}
//신규물건 등록
-.product-input-wrap{
- display: flex;
- align-items: center;
- width: 200px;
- height: 30px;
- background-color: #FAFAFA;
- border: 1px solid #EEE;
- padding: 0 10px;
- input{
- font-size: 13px;
- font-weight: 400;
- color: #999999;
- padding: 0;
- width: 100%;
- height: 100%;
- flex: 1 ;
- background-color: inherit;
- }
- .product-delete{
- flex: none;
- display: block;
- width: 15px;
- height: 100%;
- background: url(../../public/static/images/sub/product-del.svg)no-repeat center;
- background-size: 15px 15px;
- }
+.product-input-wrap {
+ display: flex;
+ align-items: center;
+ width: 200px;
+ height: 30px;
+ background-color: #fafafa;
+ border: 1px solid #eee;
+ padding: 0 10px;
+ input {
+ font-size: 13px;
+ font-weight: 400;
+ color: #999999;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ flex: 1;
+ background-color: inherit;
+ }
+ .product-delete {
+ flex: none;
+ display: block;
+ width: 15px;
+ height: 100%;
+ background: url(../../public/static/images/sub/product-del.svg) no-repeat center;
+ background-size: 15px 15px;
+ }
}
@media screen and (max-width: 1800px) {
- .canvas-menu-wrap{
- .canvas-menu-inner{
- .canvas-menu-list{
- .canvas-menu-item button{
- .menu-icon{
- margin-right: 5px;
- }
- }
- .canvas-menu-item{
- button{
- padding: 15px 15px;
- font-size: 11px;
- }
- }
- }
+ .canvas-menu-wrap {
+ .canvas-menu-inner {
+ .canvas-menu-list {
+ .canvas-menu-item button {
+ .menu-icon {
+ margin-right: 5px;
+ }
}
- .canvas-depth2-wrap{
- .canvas-depth2-inner{
- .canvas-depth2-list{
- .canvas-depth2-item{
- button{
- font-size: 11px;
- }
- }
- }
- }
+ .canvas-menu-item {
+ button {
+ padding: 15px 15px;
+ font-size: 11px;
+ }
}
- }
+ }
+ }
+ .canvas-depth2-wrap {
+ .canvas-depth2-inner {
+ .canvas-depth2-list {
+ .canvas-depth2-item {
+ button {
+ font-size: 11px;
+ }
+ }
+ }
+ }
+ }
+ }
}
@media screen and (max-width: 1600px) {
- .canvas-menu-wrap{
- .canvas-menu-inner{
- .canvas-menu-list{
- .canvas-menu-item button{
- .menu-icon{
- display: none;
- }
- }
- }
+ .canvas-menu-wrap {
+ .canvas-menu-inner {
+ .canvas-menu-list {
+ .canvas-menu-item button {
+ .menu-icon {
+ display: none;
+ }
}
- }
- .canvas-content{
- .canvas-frame{
- height: calc(100vh - 129.5px);
- }
- &.active{
- .canvas-frame{
- height: calc(100vh - 179.5px);
- }
- }
- }
+ }
+ }
+ }
+ .canvas-content {
+ .canvas-frame {
+ height: calc(100vh - 129.5px);
+ }
+ &.active {
+ .canvas-frame {
+ height: calc(100vh - 179.5px);
+ }
+ }
+ }
}
@media screen and (max-width: 1500px) {
- .canvas-menu-wrap{
- .canvas-menu-inner{
- .canvas-menu-list{
- .canvas-menu-item{
- button{
- padding: 15px 10px;
- font-size: 10px;
- }
- }
- }
- .canvas-side-btn-wrap{
- .btn-from{
- gap: 3px;
- }
- .vertical-horizontal{
- margin-right: 3px;
- min-width: 150px;
- }
- .select-box{
- width: 100px;
- margin: 0 3px;
- }
- .size-control{
- width: 90px;
- margin: 0 3px;
- }
- }
+ .canvas-menu-wrap {
+ .canvas-menu-inner {
+ .canvas-menu-list {
+ .canvas-menu-item {
+ button {
+ padding: 15px 10px;
+ font-size: 10px;
+ }
}
+ }
+ .canvas-side-btn-wrap {
+ .btn-from {
+ gap: 3px;
+ }
+ .vertical-horizontal {
+ margin-right: 3px;
+ min-width: 150px;
+ }
+ .select-box {
+ width: 100px;
+ margin: 0 3px;
+ }
+ .size-control {
+ width: 90px;
+ margin: 0 3px;
+ }
+ }
}
- .sub-header{
- .sub-header-inner{
- .sub-header-title{
- font-size: 15px;
+ }
+ .sub-header {
+ .sub-header-inner {
+ .sub-header-title {
+ font-size: 15px;
+ }
+ .sub-header-title-wrap {
+ .title-item {
+ a {
+ .icon {
+ width: 20px;
+ height: 20px;
}
- .sub-header-title-wrap{
- .title-item{
- a{
- .icon{
- width: 20px;
- height: 20px;
- }
- }
- }
- }
- }
- }
-
+ }
+ }
+ }
+ }
+ }
}
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 01b47c47..2914875d 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -4,1910 +4,2128 @@ $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;
+.normal-font {
+ font-size: 12px;
+ font-weight: 400;
+ color: #fff;
}
-.bold-font{
- font-size: 12px;
- font-weight: 500;
- color: #fff;
+.bold-font {
+ font-size: 12px;
+ font-weight: 500;
+ color: #fff;
}
-.modal-pop-wrap{
- position: fixed;
- top: 0;
- left: 0;
- 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;
- &.xsm{
- width: 200px;
+.modal-pop-wrap {
+ position: fixed;
+ top: 0;
+ left: 0;
+ 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;
+ &.xsm {
+ width: 200px;
+ }
+ &.xxxm {
+ width: 240px;
+ }
+ &.xxm {
+ width: 270px;
+ }
+ &.xm {
+ width: 300px;
+ }
+ &.ssm {
+ width: 380px;
+ }
+ &.sm {
+ width: 580px;
+ }
+ &.r {
+ width: 400px;
+ }
+ &.lr {
+ width: 440px;
+ }
+ &.lr-2 {
+ width: 450px;
+ }
+ &.lrr {
+ width: 480px;
+ }
+ &.ml {
+ width: 530px;
+ }
+ &.l-2 {
+ width: 640px;
+ }
+ &.lx-2 {
+ width: 740px;
+ }
+ &.lx {
+ width: 770px;
+ }
+ &.l {
+ width: 800px;
+ }
+ &.mount {
+ animation: mountpop 0.17s ease-in-out forwards;
+ }
+ &.unmount {
+ animation: unmountpop 0.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;
+ }
}
- &.xxxm{
- width: 240px;
- }
- &.xxm{
- width: 270px;
- }
- &.xm{
- width: 300px;
- }
- &.ssm{
- width: 380px;
- }
- &.sm{
- width: 580px;
- }
- &.r{
- width: 400px;
- }
- &.lr{
- width: 440px;
- }
- &.lr-2{
- width: 450px;
- }
- &.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{
+ .modal-body {
+ background-color: #fff;
+ padding: 22px;
+ border-radius: 4px;
+ border: 1px solid #101010;
+ color: $alert-color;
+ .alert-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;
+ margin-bottom: 15px;
+ }
}
+ }
}
-
-.adsorption-point{
+.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;
- 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;
+ gap: 5px;
+ button {
+ flex: 1;
}
- i{
- display: flex;
- align-items: center;
- padding: 0 7px;
- margin-left: auto;
- height: 100%;
- font-size: 13px;
- color: #898989;
+ &.sub {
+ button {
+ flex: 1 1 auto;
+ padding: 0;
+ }
+ margin-bottom: 14px;
}
- &.act{
- i{
- color: $pop-color;
- background-color: #1083E3;
+ }
+ .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{
+.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;
- gap: 15px;
- padding-bottom: 15px;
- &.border{
- border-bottom: 1px solid #424242;
+ 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;
+ }
+ }
}
-.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%;
+ }
}
-.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-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-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-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;
+.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;
- }
+.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 0.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{
- width: 100%;
- p{
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: $pop-bold-weight;
- }
+.move-form {
+ width: 100%;
+ 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%;
- }
+.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: 5px;
- margin-left: auto;
+.direction-move-wrap {
+ flex: none;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 5px;
+ margin-left: auto;
}
// 배치면 초기 설정
-.placement-table{
- table{
- table-layout: fixed;
- tr{
- th{
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: $pop-bold-weight;
- padding: 18px 0;
- border-bottom: 1px solid #424242;
- vertical-align: middle;
- .tip-wrap{
- display: flex;
- align-items: center;
- }
- }
- td{
- font-size: $pop-normal-size;
- color: $pop-color;
- border-bottom: 1px solid #424242;
- padding: 18px 0 18px 20px;
- vertical-align: middle;
- .flex-box{
- display: flex;
- align-items: center;
- height: 100%;
- }
- }
- &: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{
- .sort-select{
- width: 100%;
- }
-}
-.flex-ment{
- display: flex;
- align-items: center;
- gap: 5px;
- span{
+.placement-table {
+ table {
+ table-layout: fixed;
+ tr {
+ th {
font-size: $pop-normal-size;
color: $pop-color;
- font-weight: $pop-normal-weight;
+ font-weight: $pop-bold-weight;
+ padding: 18px 0;
+ border-bottom: 1px solid #424242;
+ vertical-align: middle;
+ .tip-wrap {
+ display: flex;
+ align-items: center;
+ }
+ }
+ td {
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ border-bottom: 1px solid #424242;
+ padding: 18px 0 18px 20px;
+ vertical-align: middle;
+ .flex-box {
+ display: flex;
+ align-items: center;
+ }
+ }
+ &: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;
+ }
+ }
+ }
+ }
}
-.img-edit-wrap{
- flex: none;
- .img-edit-btn{
- display: flex;
- align-items: center;
- height: 30px;
- padding: 0 10px;
- font-size: 12px;
- font-weight: 400;
- color: #101010;
- background-color: #fff;
- border-radius: 2px;
- cursor: pointer;
- transition: all .15s ease-in-out;
- .img-edit{
- width: 16px;
- height: 16px;
- background: url(../../public/static/images/canvas/img_edit_ico.svg)no-repeat center;
- background-size: cover;
- margin-right: 5px;
- }
- &:hover{
- background-color: #ebebeb;
- }
- }
+.pop-form-radio {
+ display: flex;
+ align-items: center;
+ gap: 10px;
}
-.img-name-wrap{
+.placement-option {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+.select-wrap {
+ .sort-select {
+ 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;
+ }
+}
+
+.img-edit-wrap {
+ flex: none;
+ .img-edit-btn {
display: flex;
align-items: center;
- width: 100%;
- margin-left: 10px;
- input{
- flex: 1;
-
+ height: 30px;
+ padding: 0 10px;
+ font-size: 12px;
+ font-weight: 400;
+ color: #101010;
+ background-color: #fff;
+ border-radius: 2px;
+ cursor: pointer;
+ transition: all 0.15s ease-in-out;
+ .img-edit {
+ width: 16px;
+ height: 16px;
+ background: url(../../public/static/images/canvas/img_edit_ico.svg) no-repeat center;
+ background-size: cover;
+ margin-right: 5px;
}
- .img-check{
- flex: none;
- width: 18px;
- height: 18px;
- margin-left: 5px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+ &:hover {
+ background-color: #ebebeb;
}
+ }
+}
+.img-name-wrap {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ margin-left: 10px;
+ input {
+ flex: 1;
+ }
+ .img-check {
+ flex: none;
+ width: 18px;
+ height: 18px;
+ margin-left: 5px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+ background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+ }
}
-.for-address{
- input{
- flex: 1;
+.for-address {
+ input {
+ flex: 1;
+ }
+ .check-address {
+ flex: none;
+ width: 18px;
+ height: 18px;
+ margin-left: 5px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+ &.fail {
+ background-image: url(../../public/static/images/canvas/img_check_fail.svg);
}
- .check-address{
- flex: none;
- width: 18px;
- height: 18px;
- margin-left: 5px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- &.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);}
- &.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);}
+ &.success {
+ background-image: url(../../public/static/images/canvas/img_check_success.svg);
}
+ }
}
// 외벽선 그리기
-.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{
+.outline-wrap {
+ padding: 24px 0;
+ border-top: 1px solid #424242;
+
+ .outline-inner {
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;
- }
+ 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;
- .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;
+ 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{
+.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;
- .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 ;
- }
+ 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;
+.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;
+.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{
+.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;
-}
-.padding-form{
- padding-left: 23px;
-}
-.discrimination-box{
- padding: 16px 12px;
- border: 1px solid #3D3D3D;
- border-radius: 2px;
+ .setting-btn {
+ display: block;
+ width: 100%;
+ height: 40px;
+ font-size: 13px;
+ color: #fff;
+ font-weight: 700;
+ border-radius: 2px;
+ transition: all 0.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;
+ }
+ }
+ }
+ }
}
-.modal-bottom-border-bx{
- margin-top: 24px;
- padding-bottom: 14px;
- border-bottom: 1px solid #424242;
+// 지붕형상 설정
+.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 0.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 0.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;
- }
- }
+.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;
- }
+.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{
+.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;
- 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;
- }
+ 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;
+.block-box {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 10px;
+ .flex-ment {
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;
- }
+ .dec {
+ text-decoration: underline;
}
- &:last-child{
- margin-bottom: 0;
+ .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;
+.icon-btn-wrap {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ button {
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-frame-wrap{
- display: flex;
- gap: 10px;
- .plane-shape-wrap{
- flex: none;
- width: 73px;
- }
-}
-
-.plane-shape-menu{
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 5px;
- .shape-menu-box{
- border-radius: 2px;
- 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;
- align-items: center;
- position: relative;
- width: 100%;
- height: 100%;
- border-radius: 2px;
- }
- &.act,
- &:hover{
- border-color: #008BFF;
- background-color: #008BFF;
- }
- }
-}
-
-.shape-library{
- display: flex;
- flex-direction: column;
- align-items: center;
justify-content: center;
- gap: 5px;
- padding-top: 5px;
- .library-btn{
- width: 100%;
- height: 34px;
- border: 1px solid #6C6C6C;
- border-radius: 2px;
- 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: 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;
- }
- }
-}
-
-.plane-detail-wrap{
- display: flex;
- flex-direction: column;
- flex: 1;
-}
-.plane-shape-wrapper{
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 10px;
- .plane-box{
- width: 100%;
- padding: 10px 18px;
- border-radius: 2px;
- background-color: #313131;
- border: 1px solid #484848;
- .plane-box-tit{
- font-size: $pop-normal-size;
- font-weight: 600;
- color: $pop-color;
- margin-bottom: 10px;
- }
- &.shape-box{
- .shape-box-inner{
- display: flex;
- gap:15px;
- min-height: 140px;
- .shape-img{
- position: relative;
- flex: none;
- width: 150px;
- background-color: #fff;
- border-radius: 2px;
- img{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- }
- .shape-data{
- flex: 1;
- .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{
- flex: 1;
- display: flex;
- flex-direction: column;
- .plane-direction-box{
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- }
- }
- }
-}
-.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{
+ width: 100%;
+ height: 30px;
font-size: $pop-normal-size;
font-weight: $pop-normal-weight;
color: $pop-color;
- margin-top: 10px;
-}
-.plane-shape-btn{
- padding-top: 10px;
- margin-top: auto;
- button{
- display: block;
- width: 100%;
+ border: 1px solid #646464;
+ border-radius: 2px;
+ padding: 0 10px;
+ transition: all 0.15s ease-in-out;
+ i {
+ height: 15px;
+ display: block;
+ margin-left: 10px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+ transition: all 0.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);
+ }
+ }
+ }
+ }
}
-// 오브젝트 배치
-.mb-box{
- margin-bottom: 24px;
+// 경사설정
+.slope-wrap {
+ padding-bottom: 24px;
+ border-bottom: 1px solid #424242;
}
-.object-direction-wrap{
- display: flex;
- align-items: center;
- justify-content: center;
-}
-.discrimination-tit{
- font-size: 13px;
- color: #fff;
- font-weight: 500;
+// 면형상 배치
+.plane-frame-wrap {
+ display: flex;
+ gap: 10px;
+ .plane-shape-wrap {
+ flex: none;
+ width: 73px;
+ }
}
-.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{
+.plane-shape-menu {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 5px;
+ .shape-menu-box {
+ border-radius: 2px;
+ width: 34px;
+ height: 34px;
+ background-color: #373737;
+ border: 1px solid #676767;
+ transition:
+ background 0.15s ease-in-out,
+ border 0.15s ease-in-out;
+ .shape-box {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ border-radius: 2px;
+ }
+ &.act,
+ &:hover {
+ border-color: #008bff;
+ background-color: #008bff;
+ }
+ }
+}
+
+.shape-library {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+ padding-top: 5px;
+ .library-btn {
+ width: 100%;
+ height: 34px;
+ border: 1px solid #6c6c6c;
+ border-radius: 2px;
+ background-color: #373737;
+ background-repeat: no-repeat;
+ background-position: center;
+ transition: all 0.15s ease-in-out;
+ &.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;
+ }
+ }
+}
+
+.plane-detail-wrap {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+.plane-shape-wrapper {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ .plane-box {
+ width: 100%;
+ padding: 10px 18px;
+ border-radius: 2px;
+ background-color: #313131;
+ border: 1px solid #484848;
+ .plane-box-tit {
+ font-size: $pop-normal-size;
+ font-weight: 600;
+ color: $pop-color;
+ margin-bottom: 10px;
+ }
+ &.shape-box {
+ .shape-box-inner {
+ display: flex;
+ gap: 15px;
+ min-height: 140px;
+ .shape-img {
+ position: relative;
+ flex: none;
+ width: 150px;
+ background-color: #fff;
+ border-radius: 2px;
+ 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;
- }
- &:first-child{
- flex: none;
- width: 195px;
- }
- }
-}
-
-.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;
- border-radius: 50%;
- }
- 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;
- }
- }
-}
-
-.draw-flow-wrap{
- margin: 10px 0;
-}
-
-// 지붕모듈선택
-.roof-module-tab{
- display: flex;
- align-items: center;
- gap: 10px;
- margin-bottom: 14px;
- .module-tab-bx{
- flex: 1;
- height: 34px;
- line-height: 31px;
- border: 1px solid #484848;
- border-radius: 2px;
- background-color: transparent;
- font-size: 12px;
- color: #AAA;
- text-align: center;
- cursor: default;
- transition: all .15s ease-in-out;
- &.act{
- background-color: #1083E3;
- border: 1px solid #1083E3;
- color: #fff;
- font-weight: 500;
- }
- }
- .tab-arr{
- display: block;
- width: 9px;
- height: 14px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
- transition: all .15s ease-in-out;
- &.act{
- background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
- }
- }
-}
-
-.roof-module-compas{
- margin-bottom: 24px;
- .compas-box-inner{
- width: 280px;
- height: 253px;
- .circle{
- top: 86%;
- &:nth-child(1),
- &:nth-child(7),
- &:nth-child(13),
- &:nth-child(19){
- &::before{
- content: '';
- position: absolute;
- top: 20px;
- left: 50%;
- transform: translateX(-50%);
- width: 1px;
- height: 6px;
- background-color: #8B8B8B;
+ .shape-data {
+ flex: 1;
+ .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;
}
+ }
}
- 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{
+ &.direction-box {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ .plane-direction-box {
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{
- margin-left: auto;
- }
- }
- }
-}
-
-// 회로 및 가대설정
-.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;
- }
-}
-
-.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);
- 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;
- }
- }
-}
-.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: 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-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{
- display: flex;
- align-items: center;
- gap: 8px;
- .additional-color{
- display: block;
- width: 16px;
- height: 16px;
- &.pink{
- border: 2px solid #ce1c9c;
- background-color: #16417D;
- }
- &.white{
- border: 2px solid #FFF;
- background-color: #001027;
- }
- }
- }
-}
-
-// color setting
-.color-setting-wrap{
- padding-bottom: 15px;
- border-bottom: 1px solid #424242;
- .color-tit{
- font-size: 13px;
- font-weight: 500;
- color: #ffffff;
- margin-bottom: 10px;
- }
- .color-picker{
- .react-colorful{
- width: 100%;
- height: auto;
- gap: 20px;
- .react-colorful__pointer{
- width: 15px;
- height: 15px;
- border: 4px solid #Fff;
- }
- .react-colorful__saturation{
- border-radius: 2px;
- height: 200px;
- border-bottom: 5px solid #000;
- }
- .react-colorful__last-control{
- border-radius: 2px;
- height: 10px;
- }
- }
- .hex-color-box{
- display: flex;
- align-items: center;
- margin-top: 15px;
- .color-box-tit{
- font-size: 12px;
- color: #fff;
- font-weight: 500;
- margin-right: 10px;
- }
- .color-hex-input{
- width: 150px;
- margin-right: 5px;
- input{
- width: 100%;
- }
- }
- .color-box{
- display: block;
- width: 30px;
- height: 30px;
- border-radius: 4px;
- }
- }
- .default-color-wrap{
- margin-top: 25px;
- .default-tit{
- font-size: 12px;
- font-weight: 500;
- color: #fff;
- margin-bottom: 10px;
- }
- .color-button-wrap{
- display: grid;
- grid-template-columns: repeat(8, 1fr);
- gap: 21px;
- .default-color{
- display: block;
- width: 100%;
- height: 30px;
- border-radius: 4px;
- }
- }
- }
- }
-}
-
-// 글꼴 설정 팝업
-.font-option-warp{
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 15px 5px;
- margin-bottom: 15px;
- .font-option-item{
- .option-item-tit{
- font-size: 12px;
- font-weight: 500;
- color: #fff;
- margin-bottom: 10px;
- }
- }
-}
-.font-ex-wrap{
- margin-bottom: 15px;
- .font-ex-tit{
- font-size: 12px;
- font-weight: 500;
- color: #fff;
- margin-bottom: 10px;
- }
- .font-ex-box{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
- min-height: 80px;
- background-color: #fff;
+ }
}
-
+ }
}
-
-// 치수선 설정
-.font-btn-wrap{
- margin-bottom: 15px;
- button{
- width: 100%;
- height: 30px;
- line-height: 28px;
+.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%);
}
-}
-
-.line-color-wrap{
- margin-bottom: 15px;
- .color-btn{
- display: block;
- width: 100%;
- height: 30px;
- border-radius: 2px;
+ &.right {
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
}
-}
-
-.form-box{
- width: 100%;
- background-color: #fff;
- padding: 10px 15px 20px;
- .line-form{
- position: relative;
- display: flex;
- flex-direction: column;
- justify-content: flex-end;
- min-width: 102px;
- min-height: 40px;
- margin: 0 auto;
-
- &::before{
- content: '';
- position: absolute;
- bottom: 0px;
- left: 0;
- width: 100%;
- height: 40px;
- border-left: 1px dashed #101010;
- border-right: 1px dashed #101010;
- }
- .line-font-box{
- .font{
- display: block;
- padding-bottom: 15px;
- color: #101010;
- text-align: center;
- line-height: 1;
- }
- .line{
- position: relative;
- display: block;
- width: 100%;
- height: 1px;
- border-radius: 30px;
- &::before{
- content: '';
- position: absolute;
- top: 50%;
- transform: translateY(-50%) rotate(45deg);
- left: 1px;
- width: 9px;
- height:+ 9px;
- border: 1px solid;
- border-color: inherit;
- border-top: none;
- border-right: none;
- }
- &::after{
- content: '';
- position: absolute;
- top: 50%;
- transform: translateY(-50%) rotate(45deg);
- right: 1px;
- width: 9px;
- height: 9px;
- border: 1px solid;
- border-color: inherit;
- border-bottom: none;
- border-left: none;
- }
- }
- }
+ &.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 0.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);
+ }
+ }
}
-// 사이즈 변경
-.size-inner-warp{
- position: relative;
+.plane-tab-guide {
+ font-size: $pop-normal-size;
+ font-weight: $pop-normal-weight;
+ color: $pop-color;
+ margin-top: 10px;
}
-.size-check-wrap{
- position: relative;
+.plane-shape-btn {
+ padding-top: 10px;
+ margin-top: auto;
+ button {
display: block;
- width: 132px;
- height: 132px;
- margin: 0 auto;
- .size-btn{
- position: absolute;
- width: 16px;
- height: 16px;
- border: 1px solid #fff;
- border-radius: 50%;
- &.act{
- &::after{
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 8px;
- height: 8px;
- background-color: #fff;
- border-radius: 50%;
- }
- }
- &:nth-child(1){ top: 0; left: 0; }
- &:nth-child(2){ top: 0; right: 0; }
- &:nth-child(3){ bottom: 0; left: 0; }
- &:nth-child(4){ bottom: 0; right: 0; }
+ width: 100%;
+ }
+}
+
+// 오브젝트 배치
+.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%);
}
- .size-box{
+ }
+}
+
+// 표시변경
+.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;
+ }
+ &:first-child {
+ flex: none;
+ width: 195px;
+ }
+ }
+}
+
+.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: 100px;
- height: 100px;
+ width: 5px;
+ height: 5px;
background-color: #fff;
+ border-radius: 50%;
+ }
+ i {
+ color: #fff;
+ }
}
-}
-
-.size-option-top{
- margin-bottom: 15px;
-}
-.size-option-side{
+ }
+ .compas {
position: absolute;
top: 50%;
- left: 0;
- transform: translateY(-50%);
-}
-.size-option-wrap{
- width: 88px;
- margin: 0 auto;
- .size-option{
- display: flex;
- align-items: center;
- input{
- width: 100%;
- flex: 1;
- }
- span{
- flex: none;
- }
+ 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;
}
+ }
+}
+
+.draw-flow-wrap {
+ margin: 10px 0;
+}
+
+// 지붕모듈선택
+.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 0.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 0.15s ease-in-out;
+ &.act {
+ background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
+ }
+ }
+}
+
+.roof-module-compas {
+ margin-bottom: 24px;
+ .compas-box-inner {
+ width: 280px;
+ height: 253px;
+ .circle {
+ top: 86%;
+ &:nth-child(1),
+ &:nth-child(7),
+ &:nth-child(13),
+ &:nth-child(19) {
+ &::before {
+ content: '';
+ position: absolute;
+ top: 20px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 1px;
+ height: 6px;
+ background-color: #8b8b8b;
+ }
+ }
+ i {
+ top: 32px;
+ }
+ &.act {
+ i {
+ color: #8b8b8b;
+ }
+ }
+ }
+ }
+}
+.center-wrap {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+}
+
+.module-table-flex-wrap {
+ display: flex;
+ gap: 10px;
+ .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 0.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 {
+ margin-left: auto;
+ }
+ }
+ }
+}
+
+// 회로 및 가대설정
+.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;
+ }
+}
+
+.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.2);
+ 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;
+ }
+ }
+}
+.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: 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-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 {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ .additional-color {
+ display: block;
+ width: 16px;
+ height: 16px;
+ &.pink {
+ border: 2px solid #ce1c9c;
+ background-color: #16417d;
+ }
+ &.white {
+ border: 2px solid #fff;
+ background-color: #001027;
+ }
+ }
+ }
+}
+
+// color setting
+.color-setting-wrap {
+ padding-bottom: 15px;
+ border-bottom: 1px solid #424242;
+ .color-tit {
+ font-size: 13px;
+ font-weight: 500;
+ color: #ffffff;
+ margin-bottom: 10px;
+ }
+ .color-picker {
+ .react-colorful {
+ width: 100%;
+ height: auto;
+ gap: 20px;
+ .react-colorful__pointer {
+ width: 15px;
+ height: 15px;
+ border: 4px solid #fff;
+ }
+ .react-colorful__saturation {
+ border-radius: 2px;
+ height: 200px;
+ border-bottom: 5px solid #000;
+ }
+ .react-colorful__last-control {
+ border-radius: 2px;
+ height: 10px;
+ }
+ }
+ .hex-color-box {
+ display: flex;
+ align-items: center;
+ margin-top: 15px;
+ .color-box-tit {
+ font-size: 12px;
+ color: #fff;
+ font-weight: 500;
+ margin-right: 10px;
+ }
+ .color-hex-input {
+ width: 150px;
+ margin-right: 5px;
+ input {
+ width: 100%;
+ }
+ }
+ .color-box {
+ display: block;
+ width: 30px;
+ height: 30px;
+ border-radius: 4px;
+ }
+ }
+ .default-color-wrap {
+ margin-top: 25px;
+ .default-tit {
+ font-size: 12px;
+ font-weight: 500;
+ color: #fff;
+ margin-bottom: 10px;
+ }
+ .color-button-wrap {
+ display: grid;
+ grid-template-columns: repeat(8, 1fr);
+ gap: 21px;
+ .default-color {
+ display: block;
+ width: 100%;
+ height: 30px;
+ border-radius: 4px;
+ }
+ }
+ }
+ }
+}
+
+// 글꼴 설정 팝업
+.font-option-warp {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 15px 5px;
+ margin-bottom: 15px;
+ .font-option-item {
+ .option-item-tit {
+ font-size: 12px;
+ font-weight: 500;
+ color: #fff;
+ margin-bottom: 10px;
+ }
+ }
+}
+.font-ex-wrap {
+ margin-bottom: 15px;
+ .font-ex-tit {
+ font-size: 12px;
+ font-weight: 500;
+ color: #fff;
+ margin-bottom: 10px;
+ }
+ .font-ex-box {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ min-height: 80px;
+ background-color: #fff;
+ }
+}
+
+// 치수선 설정
+.font-btn-wrap {
+ margin-bottom: 15px;
+ button {
+ width: 100%;
+ height: 30px;
+ line-height: 28px;
+ }
+}
+
+.line-color-wrap {
+ margin-bottom: 15px;
+ .color-btn {
+ display: block;
+ width: 100%;
+ height: 30px;
+ border-radius: 2px;
+ }
+}
+
+.form-box {
+ width: 100%;
+ background-color: #fff;
+ padding: 10px 15px 20px;
+ .line-form {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ min-width: 102px;
+ min-height: 40px;
+ margin: 0 auto;
+
+ &::before {
+ content: '';
+ position: absolute;
+ bottom: 0px;
+ left: 0;
+ width: 100%;
+ height: 40px;
+ border-left: 1px dashed #101010;
+ border-right: 1px dashed #101010;
+ }
+ .line-font-box {
+ .font {
+ display: block;
+ padding-bottom: 15px;
+ color: #101010;
+ text-align: center;
+ line-height: 1;
+ }
+ .line {
+ position: relative;
+ display: block;
+ width: 100%;
+ height: 1px;
+ border-radius: 30px;
+ &::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%) rotate(45deg);
+ left: 1px;
+ width: 9px;
+ height: +9px;
+ border: 1px solid;
+ border-color: inherit;
+ border-top: none;
+ border-right: none;
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%) rotate(45deg);
+ right: 1px;
+ width: 9px;
+ height: 9px;
+ border: 1px solid;
+ border-color: inherit;
+ border-bottom: none;
+ border-left: none;
+ }
+ }
+ }
+ }
+}
+
+// 사이즈 변경
+.size-inner-warp {
+ position: relative;
+}
+.size-check-wrap {
+ position: relative;
+ display: block;
+ width: 132px;
+ height: 132px;
+ margin: 0 auto;
+ .size-btn {
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ border: 1px solid #fff;
+ border-radius: 50%;
+ &.act {
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 8px;
+ height: 8px;
+ background-color: #fff;
+ border-radius: 50%;
+ }
+ }
+ &:nth-child(1) {
+ top: 0;
+ left: 0;
+ }
+ &:nth-child(2) {
+ top: 0;
+ right: 0;
+ }
+ &:nth-child(3) {
+ bottom: 0;
+ left: 0;
+ }
+ &:nth-child(4) {
+ bottom: 0;
+ right: 0;
+ }
+ }
+ .size-box {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 100px;
+ height: 100px;
+ background-color: #fff;
+ }
+}
+
+.size-option-top {
+ margin-bottom: 15px;
+}
+.size-option-side {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+}
+.size-option-wrap {
+ width: 88px;
+ margin: 0 auto;
+ .size-option {
+ display: flex;
+ align-items: center;
+ input {
+ width: 100%;
+ flex: 1;
+ }
+ span {
+ flex: none;
+ }
+ }
}
//이미지 크기 설정
-.range-wrap{
- display: flex;
- align-items: center;
- input{
- flex: 1;
- margin-right: 10px;
+.range-wrap {
+ display: flex;
+ align-items: center;
+ input {
+ flex: 1;
+ margin-right: 10px;
+ }
+ label {
+ flex: none;
+ text-align: right;
+ width: 38px;
+ font-size: 13px;
+ color: #fff;
+ font-weight: 500;
+ }
+}
+
+// 이미지 불러오기
+.img-flex-box {
+ display: flex;
+ align-items: center;
+}
+.img-load-from {
+ margin-top: 20px;
+ .img-load-item {
+ border-top: 1px solid #424242;
+ padding: 18px 0;
+ .d-check-radio {
+ margin-bottom: 20px;
}
- label{
- flex: none;
- text-align: right;
- width: 38px;
- font-size: 13px;
- color: #fff;
- font-weight: 500;
- }
-}
\ No newline at end of file
+ }
+ border-bottom: 1px solid #424242;
+}
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 711ef44a..c871f7bb 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -1,912 +1,1106 @@
* {
- -webkit-text-size-adjust:none;
- -moz-text-size-adjust:none;
- -ms-text-size-adjust:none;
- text-size-adjust: none;
- box-sizing: content-box
+ -webkit-text-size-adjust: none;
+ -moz-text-size-adjust: none;
+ -ms-text-size-adjust: none;
+ text-size-adjust: none;
+ box-sizing: content-box;
}
-*, ::after, ::before {
- box-sizing: border-box;
+*,
+::after,
+::before {
+ box-sizing: border-box;
}
-html, body{
- font-size: 16px;
+html,
+body {
+ font-size: 16px;
}
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font: inherit;
- vertical-align: baseline;
- font-family: 'Noto Sans JP', sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- font-smooth: never;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font: inherit;
+ vertical-align: baseline;
+ font-family: 'Noto Sans JP', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-smooth: never;
}
/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
}
body {
- line-height: 1.4;
+ line-height: 1.4;
+}
+body:first-of-type caption {
+ display: none;
}
-body:first-of-type caption { display:none;}
-ol, ul {
- list-style: none;
+ol,
+ul {
+ list-style: none;
}
-blockquote, q {
- quotes: none;
+blockquote,
+q {
+ quotes: none;
}
-blockquote:before, blockquote:after,
-q:before, q:after {
- content: '';
- content: none;
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: '';
+ content: none;
}
table {
- width: 100%;
- border-collapse: separate;
- border-spacing:0;
- border:0 none;
+ width: 100%;
+ border-collapse: separate;
+ border-spacing: 0;
+ border: 0 none;
}
-caption, th, td {
- text-align:left;
- font-weight: normal;
- border:0;
+caption,
+th,
+td {
+ text-align: left;
+ font-weight: normal;
+ border: 0;
}
-a {
- cursor:pointer;
- color:#000;
+a {
+ cursor: pointer;
+ color: #000;
}
-a, a:hover, a:active {
- text-decoration:none;
- -webkit-tap-highlight-color: transparent;
+a,
+a:hover,
+a:active {
+ text-decoration: none;
+ -webkit-tap-highlight-color: transparent;
}
/*form_style*/
-input, select, textarea, button, a, label {
- -webkit-tap-highlight-color:rgba(0,0,0,0);
+input,
+select,
+textarea,
+button,
+a,
+label {
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
-button,input[type=text], input[type=button] {
- -webkit-appearance: none;
- -webkit-border-radius: 0;
- -webkit-appearance:none;
- appearance: none;
- border-radius: 0
+button,
+input[type='text'],
+input[type='button'] {
+ -webkit-appearance: none;
+ -webkit-border-radius: 0;
+ -webkit-appearance: none;
+ appearance: none;
+ border-radius: 0;
}
-input[type=checkbox], input[type=radio] {
- box-sizing: border-box;
- padding: 0;
+input[type='checkbox'],
+input[type='radio'] {
+ box-sizing: border-box;
+ padding: 0;
}
-input, select, button {
- border:0 none;
- outline:none;
- margin:0;
+input,
+select,
+button {
+ border: 0 none;
+ outline: none;
+ margin: 0;
}
select {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
}
select::-ms-expand {
- display: none;
+ display: none;
}
::-webkit-input-placeholder {
- line-height:1;
- font-weight:300;
- font-size:0.938rem;
- letter-spacing:-0.6px;
- color:#8b8b8b;
+ line-height: 1;
+ font-weight: 300;
+ font-size: 0.938rem;
+ letter-spacing: -0.6px;
+ color: #8b8b8b;
}
-.log-box ::-webkit-input-placeholder{
- color:#8b8b8b;
+.log-box ::-webkit-input-placeholder {
+ color: #8b8b8b;
}
-button{
- background: transparent;
- font-family: 'Noto Sans JP', sans-serif;
- border: none;
- padding: 0;
- margin: 0;
- line-height: 1.4;
- color: inherit;
- outline: none;
- cursor: pointer;
+button {
+ background: transparent;
+ font-family: 'Noto Sans JP', sans-serif;
+ border: none;
+ padding: 0;
+ margin: 0;
+ line-height: 1.4;
+ color: inherit;
+ outline: none;
+ cursor: pointer;
}
-.pre{
- font-family: 'Pretendard', sans-serif !important;
+.pre {
+ font-family: 'Pretendard', sans-serif !important;
}
-.no-click{
- cursor: no-drop !important;
+.no-click {
+ cursor: no-drop !important;
}
// margin
-.mt5{margin-top: 5px !important;}
-.mt10{margin-top: 10px !important;}
-.mt15{margin-top: 15px !important;}
-.mb5{margin-bottom: 5px !important;}
-.mb10{margin-bottom: 10px !important;}
-.mb15{margin-bottom: 15px !important;}
-.mr5{margin-right: 5px !important;}
-.mr10{margin-right: 10px !important;}
-.mr15{margin-right: 15px !important;}
-.ml5{margin-left: 5px !important;}
-.ml10{margin-left: 10px !important;}
-.ml15{margin-left: 15px !important;}
-
-// align
-.al-l{text-align: left !important;}
-.al-r{text-align: right !important;}
-.al-c{text-align: center !important;}
-
-
-// button
-.btn-frame{
- display: inline-block;
- padding: 0 7px;
- height: 34px;
- line-height: 34px;
- border-radius: 2px;
- color: #fff;
- font-size: 12px;
- font-weight: 400;
- border: 1px solid #000;
- text-align: center;
- font-family: 'Pretendard', sans-serif;
- transition: all .17s ease-in-out;
- cursor: pointer;
- &.block{
- width: 100%;
- }
- &.small{
- font-family: 'Noto Sans JP', sans-serif;
- height: 30px;
- line-height: 30px;
- font-size: 13px;
- }
-
- &.deepgray{
- background-color: #2C2C2C;
- border: 1px solid #484848;
- }
- &.gray{
- background-color: #3C3C3C;
- border: 1px solid #545454;
- }
- &.dark{
- background-color: #1C1C1C;
- border: 1px solid #484848;
- }
- &.modal{
- font-family: 'Noto Sans JP', sans-serif;
- background-color: #272727;
- border: 1px solid #484848;
- color: #aaa;
- &:hover{
- background-color: #1083E3;
- border: 1px solid #1083E3;
- color: #fff;
- font-weight: 500;
- }
- }
- &.sub-tab{
- height: 30px;
- padding: 0 10px;
- line-height: 28px;
- font-family: 'Noto Sans JP', sans-serif;
- background-color: #2D2D2D;
- border: 1px solid #393939;
- color: #aaa;
- &.act,
- &:hover{
- background-color: #414E6C;
- border: 1px solid #414E6C;
- color: #fff;
- font-weight: 500;
- }
- }
- &.roof{
- height: 30px;
- padding: 0 10px;
- line-height: 28px;
- font-family: 'Noto Sans JP', sans-serif;
- background-color: transparent;
- border: 1px solid #484848;
- color: #fff;
- &.blue{
- background-color: #414E6C;
- border: 1px solid #414E6C;
- &:hover{
- background-color: #414E6C;
- border: 1px solid #414E6C;
- }
- }
- &.white{
- background-color: #fff;
- border: 1px solid #fff;
- color: #101010;
- &:hover{
- background-color: #fff;
- border: 1px solid #fff;
- color: #101010;
- }
- }
- &:hover{
- font-weight: 400;
- background-color: transparent;
- border: 1px solid #484848;
- color: #fff;
- }
- }
- &.self{
- height: 30px;
- padding: 0 10px;
- line-height: 28px;
- font-family: 'Noto Sans JP', sans-serif;
- background-color: transparent;
- border: 1px solid #676767;
- color: #AAAAAA;
- &:hover{
- background-color: #272727;
- border-color: #676767;
- font-weight: 400;
- }
- }
- &:hover,
- &.act{
- background-color: #1083E3;
- border: 1px solid #1083E3;
- color: #fff;
- font-weight: 500;
- }
- &.block{
- display: block;
- width: 100%;
- }
- &.ico-flx{
- display: flex;
- align-items: center;
- .ico{
- margin-right: 10px;
- }
- &:hover,
- &.act{
- font-weight: 400;
- }
- }
+.mt5 {
+ margin-top: 5px !important;
+}
+.mt10 {
+ margin-top: 10px !important;
+}
+.mt15 {
+ margin-top: 15px !important;
+}
+.mb5 {
+ margin-bottom: 5px !important;
+}
+.mb10 {
+ margin-bottom: 10px !important;
+}
+.mb15 {
+ margin-bottom: 15px !important;
+}
+.mr5 {
+ margin-right: 5px !important;
+}
+.mr10 {
+ margin-right: 10px !important;
+}
+.mr15 {
+ margin-right: 15px !important;
+}
+.ml5 {
+ margin-left: 5px !important;
+}
+.ml10 {
+ margin-left: 10px !important;
+}
+.ml15 {
+ margin-left: 15px !important;
}
-.btn-origin{
- display: inline-block;
+// align
+.al-l {
+ text-align: left !important;
+}
+.al-r {
+ text-align: right !important;
+}
+.al-c {
+ text-align: center !important;
+}
+
+// button
+.btn-frame {
+ display: inline-block;
+ padding: 0 7px;
+ height: 34px;
+ line-height: 34px;
+ border-radius: 2px;
+ color: #fff;
+ font-size: 12px;
+ font-weight: 400;
+ border: 1px solid #000;
+ text-align: center;
+ font-family: 'Pretendard', sans-serif;
+ transition: all 0.17s ease-in-out;
+ cursor: pointer;
+ &.block {
+ width: 100%;
+ }
+ &.small {
+ font-family: 'Noto Sans JP', sans-serif;
+ height: 30px;
+ line-height: 30px;
+ font-size: 13px;
+ }
+
+ &.deepgray {
+ background-color: #2c2c2c;
+ border: 1px solid #484848;
+ }
+ &.gray {
+ background-color: #3c3c3c;
+ border: 1px solid #545454;
+ }
+ &.dark {
+ background-color: #1c1c1c;
+ border: 1px solid #484848;
+ }
+ &.modal {
+ font-family: 'Noto Sans JP', sans-serif;
+ background-color: #272727;
+ border: 1px solid #484848;
+ color: #aaa;
+ &:hover {
+ background-color: #1083e3;
+ border: 1px solid #1083e3;
+ color: #fff;
+ font-weight: 500;
+ }
+ }
+ &.sub-tab {
height: 30px;
padding: 0 10px;
- border-radius: 2px;
- background-color: #101010;
+ line-height: 28px;
+ font-family: 'Noto Sans JP', sans-serif;
+ background-color: #2d2d2d;
+ border: 1px solid #393939;
+ color: #aaa;
+ &.act,
+ &:hover {
+ background-color: #414e6c;
+ border: 1px solid #414e6c;
+ color: #fff;
+ font-weight: 500;
+ }
+ }
+ &.roof {
+ height: 30px;
+ padding: 0 10px;
+ line-height: 28px;
+ font-family: 'Noto Sans JP', sans-serif;
+ background-color: transparent;
+ border: 1px solid #484848;
color: #fff;
- font-size: 13px;
- font-weight: 400;
- transition: all .15s ease-in-out;
- &.navy{
- background-color: #304961;
- &:hover{
- background-color: #233546;
- }
+ &.blue {
+ background-color: #414e6c;
+ border: 1px solid #414e6c;
+ &:hover {
+ background-color: #414e6c;
+ border: 1px solid #414e6c;
+ }
}
- &.grey{
- background-color: #94A0AD;
- &:hover{
- background-color: #607F9A;
- }
- }
- &.green{
- background-color: #A6BBA8;
- &:hover{
- background-color: #98af9b;
- }
- }
- &.white{
- border: 1px solid #94A0AD;
+ &.white {
+ background-color: #fff;
+ border: 1px solid #fff;
+ color: #101010;
+ &:hover {
background-color: #fff;
- color: #94A0AD;
- &:hover{
- background-color: #fff;
- }
+ border: 1px solid #fff;
+ color: #101010;
+ }
}
+ &:hover {
+ font-weight: 400;
+ background-color: transparent;
+ border: 1px solid #484848;
+ color: #fff;
+ }
+ }
+ &.self {
+ height: 30px;
+ padding: 0 10px;
+ line-height: 28px;
+ font-family: 'Noto Sans JP', sans-serif;
+ background-color: transparent;
+ border: 1px solid #676767;
+ color: #aaaaaa;
+ &:hover {
+ background-color: #272727;
+ border-color: #676767;
+ font-weight: 400;
+ }
+ }
+ &:hover,
+ &.act {
+ background-color: #1083e3;
+ border: 1px solid #1083e3;
+ color: #fff;
+ font-weight: 500;
+ }
+ &.block {
+ display: block;
+ width: 100%;
+ }
+ &.ico-flx {
+ display: flex;
+ align-items: center;
+ .ico {
+ margin-right: 10px;
+ }
+ &:hover,
+ &.act {
+ font-weight: 400;
+ }
+ }
+}
+
+.btn-origin {
+ display: inline-block;
+ height: 30px;
+ padding: 0 10px;
+ border-radius: 2px;
+ background-color: #101010;
+ color: #fff;
+ font-size: 13px;
+ font-weight: 400;
+ transition: all 0.15s ease-in-out;
+ &.navy {
+ background-color: #304961;
+ &:hover {
+ background-color: #233546;
+ }
+ }
+ &.grey {
+ background-color: #94a0ad;
+ &:hover {
+ 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
-.sort-select{
- position: relative;
- display: inline-block;
- min-width: 100px;
- height: 30px;
- line-height: 30px;
- padding: 0 25px 0 10px;
- background-color: #373737;
- border: 1px solid #3F3F3F;
- border-radius: 2px;
- border-top-left-radius: 2px;
+.sort-select {
+ position: relative;
+ display: inline-block;
+ min-width: 100px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 25px 0 10px;
+ background-color: #373737;
+ border: 1px solid #3f3f3f;
+ border-radius: 2px;
+ border-top-left-radius: 2px;
+ color: #fff;
+ cursor: pointer;
+ p {
+ font-size: 13px;
color: #fff;
- cursor: pointer;
- p{
- font-size: 13px;
+ height: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ }
+ .select-item-wrap {
+ position: absolute;
+ top: 100%;
+ left: -1px;
+ clip-path: inset(0 0 100% 0);
+ width: calc(100% + 2px);
+ padding: 8px 0;
+ max-height: 100px;
+ overflow-y: auto;
+ background-color: #373737;
+ border: 1px solid #3f3f3f;
+ border-radius: 2px;
+ transition: all 0.17s ease-in-out;
+ visibility: hidden;
+ z-index: 999;
+ .select-item {
+ display: flex;
+ align-items: center;
+ padding: 8px 20px;
+ line-height: 1.4;
+ transition: all 0.17s ease-in-out;
+ button {
+ font-size: 12px;
color: #fff;
- height: 100%;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 1;
- -webkit-box-orient: vertical;
+ line-height: 1.4;
+ }
+ &:hover {
+ background-color: #2c2c2c;
+ }
}
- .select-item-wrap{
- position: absolute;
- top: 100%;
- left: -1px;
- clip-path:inset(0 0 100% 0);
- width: calc(100% + 2px);
- padding: 8px 0;
- max-height: 100px;
- overflow-y: auto;
- background-color: #373737;
- border: 1px solid #3F3F3F;
- border-radius: 2px;
- transition: all 0.17s ease-in-out;
- visibility: hidden;
- z-index: 999;
- .select-item{
- display: flex;
- align-items: center;
- padding: 8px 20px;
- line-height: 1.4;
- transition: all .17s ease-in-out;
- button{
- font-size: 12px;
- color: #fff;
- line-height: 1.4;
- }
- &:hover{
- background-color: #2C2C2C;
- }
- }
- &::-webkit-scrollbar {
- width: 2px;
- background-color: transparent;
-
- }
- &::-webkit-scrollbar-thumb {
- background-color: #5a5a5a;
- border-radius: 10px;
- }
- &::-webkit-scrollbar-track {
- background-color: transparent;
- }
+ &::-webkit-scrollbar {
+ width: 2px;
+ background-color: transparent;
}
- &::after{
- content: '';
- position: absolute;
- top: 50%;
- right: 7px;
- transform: translateY(-50%);
- width: 10px;
- height: 6px;
- background: url(/static/images/common/select-arr.svg) no-repeat center;
- background-size: cover;
- transition: all .17s ease-in-out;
+ &::-webkit-scrollbar-thumb {
+ background-color: #5a5a5a;
+ border-radius: 10px;
}
- &.active{
- .select-item-wrap{
- clip-path: inset(0 0 0 0);
- visibility: visible;
- }
- &:after{
- transform: translateY(-50%) rotate(-180deg);
- }
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
}
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 7px;
+ transform: translateY(-50%);
+ width: 10px;
+ height: 6px;
+ background: url(/static/images/common/select-arr.svg) no-repeat center;
+ background-size: cover;
+ transition: all 0.17s ease-in-out;
+ }
+ &.active {
+ .select-item-wrap {
+ clip-path: inset(0 0 0 0);
+ visibility: visible;
+ }
+ &:after {
+ transform: translateY(-50%) rotate(-180deg);
+ }
+ }
}
-.select-light{
- position: relative;
+.select-light {
+ position: relative;
+ display: block;
+ width: 100%;
+ height: 30px;
+ background: #fff url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
+ background-size: 10px 6px;
+ border: 1px solid #eee;
+ padding: 0 30px 0 10px;
+ font-size: 13px;
+ color: #45576f;
+ font-family: 'Noto Sans JP', sans-serif;
+ cursor: pointer;
+ &:disabled {
+ opacity: 1;
+ background-color: #fafafa;
+ color: #999;
+ cursor: default;
+ }
+ &.black {
+ color: #101010;
+ }
+ &.dark {
+ background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
+ color: #898989;
+ font-size: 12px;
+ border-radius: 2px;
+ border: none;
+ }
+}
+
+// input
+.form-input {
+ label {
+ display: block;
+ color: #aaa;
+ font-size: 12px;
+ font-weight: 500;
+ margin-bottom: 10px;
+ }
+}
+input[type='password'],
+input[type='number'],
+input[type='text'] {
+ &.input-origin {
+ display: inline-block;
+ height: 30px;
+ line-height: 30px;
+ border-radius: 2px;
+ background-color: #323234;
+ border: 1px solid #323234;
+ color: #fff;
+ font-size: 12px;
+ font-weight: 500;
+ font-family: 'Pretendard', sans-serif;
+ padding: 0 10px;
+ letter-spacing: 0px;
+ text-align: right;
+ transition: border 0.15s ease-in-out;
+ &:focus {
+ border: 1px solid #1083e3;
+ }
+ &::placeholder {
+ font-family: 'Noto Sans JP', sans-serif;
+ opacity: 1;
+ font-size: 12px;
+ letter-spacing: 0px;
+ }
+ &.block {
+ width: 100%;
+ }
+ &:read-only {
+ color: #aaa;
+ &:focus {
+ border: 1px solid #323234;
+ }
+ }
+ &.plane {
+ font-family: 'Noto Sans JP', sans-serif;
+ border: 1px solid #525252;
+ background-color: transparent;
+ }
+ }
+ &.input-light {
display: block;
width: 100%;
height: 30px;
- background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
- background-size: 10px 6px;
+ padding: 0 10px;
border: 1px solid #eee;
- padding: 0 30px 0 10px;
- font-size: 13px;
- color: #45576F;
+ border-radius: 2px;
+ background-color: #fff;
font-family: 'Noto Sans JP', sans-serif;
- cursor: pointer;
- &:disabled{
- opacity: 1;
- background-color: #FAFAFA;
- color: #999;
- cursor: default;
+ font-size: 13px;
+ color: #45576f;
+ font-weight: normal;
+ transition: border-color 0.17s ease-in-out;
+ text-align: left;
+ &:focus {
+ border-color: #94a0ad;
}
- &.black{
- color: #101010;
- }
- &.dark{
- background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
- color: #898989;
- font-size: 12px;
- border-radius: 2px;
- border: none;
+ &:read-only {
+ background-color: #fafafa;
+ color: #999999;
+ &:focus {
+ border-color: #eee;
+ }
}
+ }
}
-
-// input
-.form-input{
- label{
- display: block;
- color: #aaa;
- font-size: 12px;
- font-weight: 500;
- margin-bottom: 10px;
- }
-}
-input[type=password],
-input[type=number],
-input[type=text]{
- &.input-origin{
- display: inline-block;
- height: 30px;
- line-height: 30px;
- border-radius: 2px;
- background-color: #323234;
- border: 1px solid #323234;
- color: #fff;
- font-size: 12px;
- font-weight: 500;
- font-family: 'Pretendard', sans-serif;
- padding: 0 10px;
- letter-spacing: 0px;
- text-align: right;
- transition: border .15s ease-in-out;
- &:focus{
- border: 1px solid #1083E3;
- }
- &::placeholder{
- opacity: 1;
- font-size: 12px;
- letter-spacing: 0px;
- }
- &.block{
- width: 100%;
- }
- &:read-only{
- color: #AAA;
- &:focus{
- border: 1px solid #323234;
- }
- }
- &.plane{
- font-family: 'Noto Sans JP', sans-serif;
- border: 1px solid #525252;
- background-color: transparent;
- }
- }
- &.input-light{
- display: block;
- width: 100%;
- height: 30px;
- padding: 0 10px;
- border: 1px solid #eee;
- border-radius: 2px;
- background-color: #fff;
- font-family: 'Noto Sans JP', sans-serif;
- font-size: 13px;
- color: #45576F;
- font-weight: normal;
- transition: border-color .17s ease-in-out;
- text-align: left;
- &:focus{
- border-color: #94A0AD;
- }
- &:read-only{
- background-color: #FAFAFA;
- color: #999999;
- &:focus{
- border-color: #eee;
- }
- }
- }
-}
-
-
-
// check-btn
-.check-btn{
- display: flex;
- align-items: center;
- height: 30px;
- background-color: #3A3A3A;
- border-radius: 3px;
- transition: all .17s ease-in-out;
- .check-area{
- flex: none;
- width: 30px;
- height: 100%;
- border-right: 1px solid #272727;
- background: url(../../public/static/images/canvas/check-grey.svg)no-repeat center;
- background-size: 11px 9px;
+.check-btn {
+ display: flex;
+ align-items: center;
+ height: 30px;
+ background-color: #3a3a3a;
+ border-radius: 3px;
+ transition: all 0.17s ease-in-out;
+ .check-area {
+ flex: none;
+ width: 30px;
+ height: 100%;
+ border-right: 1px solid #272727;
+ background: url(../../public/static/images/canvas/check-grey.svg) no-repeat center;
+ background-size: 11px 9px;
+ }
+ .title-area {
+ padding: 0 10px;
+ font-size: 12px;
+ color: #898989;
+ font-weight: 400;
+ }
+ &.block {
+ width: 100%;
+ }
+ &:hover,
+ &.act {
+ background-color: #fff;
+ .check-area {
+ border-right: 1px solid #101010;
+ background: url(../../public/static/images/canvas/check-black.svg) no-repeat center;
}
- .title-area{
- padding: 0 10px;
- font-size: 12px;
- color: #898989;
- font-weight: 400;
- }
- &.block{
- width: 100%;
- }
- &:hover,
- &.act{
- background-color: #fff;
- .check-area{
- border-right: 1px solid #101010;
- background: url(../../public/static/images/canvas/check-black.svg)no-repeat center;
- }
- .title-area{
- color: #101010;
- font-weight: 600;
- }
+ .title-area {
+ color: #101010;
+ font-weight: 600;
}
+ }
}
// arr-btn
-.arr-btn{
- display: block;
- height: 30px;
- border-radius: 3px;
- background-color: #3A3A3A;
- padding: 0 11px;
- text-align: left;
- transition: all .17s ease-in-out;
- span{
- position: relative;
- font-size: 12px;
- color: #898989;
- font-weight: 400;
- padding-right: 15px;
- &:after{
- content: '';
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 5px;
- height: 8px;
- background: url(../../public/static/images/canvas/arr_btn_ico.svg)no-repeat center;
- }
+.arr-btn {
+ display: block;
+ height: 30px;
+ border-radius: 3px;
+ background-color: #3a3a3a;
+ padding: 0 11px;
+ text-align: left;
+ transition: all 0.17s ease-in-out;
+ span {
+ position: relative;
+ font-size: 12px;
+ color: #898989;
+ font-weight: 400;
+ padding-right: 15px;
+ &:after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: 5px;
+ height: 8px;
+ background: url(../../public/static/images/canvas/arr_btn_ico.svg) no-repeat center;
+ }
+ }
+ &:hover,
+ &.act {
+ background-color: #fff;
+ span {
+ color: #101010;
+ font-weight: 500;
+ &:after {
+ background: url(../../public/static/images/canvas/arr_btn_ico_black.svg) no-repeat center;
+ }
+ }
+ }
+ &.dark {
+ text-align: center;
+ background-color: #272727;
+ border: 1px solid #484848;
+ span {
+ color: #fff;
+ &:after {
+ background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center;
+ }
}
&:hover,
- &.act{
- background-color: #fff;
- span{
- color: #101010;
- font-weight: 500;
- &:after{
- background: url(../../public/static/images/canvas/arr_btn_ico_black.svg)no-repeat center;
- }
- }
- }
- &.dark{
- text-align: center;
- background-color: #272727;
- border: 1px solid #484848;
- span{
- color: #Fff;
- &:after{
- background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center;
- }
- }
- &:hover,
- &.act{
- background-color: #1083E3;
- border: 1px solid #1083E3;
- }
+ &.act {
+ background-color: #1083e3;
+ border: 1px solid #1083e3;
}
+ }
}
// radio
.d-check-radio,
-.d-check-box{
- line-height: 1.1;
+.d-check-box {
+ line-height: 1.1;
+ cursor: pointer;
+ input[type='checkbox'],
+ input[type='radio'] {
+ position: static;
+ margin-left: 0;
cursor: pointer;
- input[type=checkbox],
- input[type=radio]{
- position: static;
- margin-left: 0;
- cursor: pointer;
- opacity: 0;
- z-index: 1;
- flex: 0 0 auto;
+ opacity: 0;
+ z-index: 1;
+ flex: 0 0 auto;
+ }
+ label {
+ position: relative;
+ padding-left: 10px;
+ margin-bottom: 0;
+ word-break: break-all;
+ line-height: 1.2;
+ display: inline;
+ vertical-align: top;
+ color: #fff;
+ font-size: 13px;
+ font-weight: 400;
+ cursor: pointer;
+ }
+ &.light {
+ label {
+ color: #45576f;
}
- label{
- position: relative;
- padding-left: 10px;
- margin-bottom: 0;
- word-break: break-all;
- line-height: 1.2;
- display: inline;
- vertical-align: top;
- color: #fff;
- font-size: 13px;
- font-weight: 400;
- cursor: pointer;
- }
- &.light{
- label{
- color: #45576F;
- }
- }
- &.no-text{
- label{
- padding-left: 0;
- }
+ }
+ &.no-text {
+ label {
+ padding-left: 0;
}
+ }
}
.d-check-radio {
- label{
- &::before{
- cursor: pointer;
- content: "";
- display: inline-block;
- position: absolute;
- width: 17px;
- height: 17px;
- top:2px;
- left: 0;
- margin-left: -12px;
- border: 1px solid #999999;
- border-radius: 100%;
- background-color: transparent;
- text-align:center;
- font-size:13px;
- line-height:1.4;
- transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
- }
- &::after{
- cursor: pointer;
- content: "";
- display: inline-block;
- position: absolute;
- width: 9px;
- height: 9px;
- top:6px;
- left: 4px;
- margin-left: -12px;
- border: none;
- border-radius: 100%;
- background-color: #fff;
- text-align:center;
- font-size:13px;
- line-height:1.4;
- opacity: 0;
- visibility: hidden;
- transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
- }
+ label {
+ &::before {
+ cursor: pointer;
+ content: '';
+ display: inline-block;
+ position: absolute;
+ width: 17px;
+ height: 17px;
+ top: 2px;
+ left: 0;
+ margin-left: -12px;
+ border: 1px solid #999999;
+ border-radius: 100%;
+ background-color: transparent;
+ text-align: center;
+ font-size: 13px;
+ line-height: 1.4;
+ transition:
+ border 0.15s ease-in-out,
+ color 0.15s ease-in-out;
}
- &.light{
- label{
- &:before{
- border-color: #D6D6D7;
- }
- &:after{
- background-color: #697C8F;
- }
- }
+ &::after {
+ cursor: pointer;
+ content: '';
+ display: inline-block;
+ position: absolute;
+ width: 9px;
+ height: 9px;
+ top: 6px;
+ left: 4px;
+ margin-left: -12px;
+ border: none;
+ border-radius: 100%;
+ background-color: #fff;
+ text-align: center;
+ font-size: 13px;
+ line-height: 1.4;
+ opacity: 0;
+ visibility: hidden;
+ transition:
+ opacity 0.15s ease-in-out,
+ color 0.15s ease-in-out;
}
- input[type=radio]:checked + label::after{
- opacity: 1;
- visibility: visible;
+ }
+ &.light {
+ label {
+ &:before {
+ border-color: #d6d6d7;
+ }
+ &:after {
+ background-color: #697c8f;
+ }
}
- &.pop{
- label{
- font-size: 12px;
- &:before{
- width: 16px;
- height: 16px;
- border-color: #fff;
- }
- &:after{
- width: 8px;
- height: 8px;
- background-color: #fff;
- }
- }
+ }
+ input[type='radio']:checked + label::after {
+ opacity: 1;
+ visibility: visible;
+ }
+ &.pop {
+ label {
+ font-size: 12px;
+ &:before {
+ width: 16px;
+ height: 16px;
+ border-color: #fff;
+ }
+ &:after {
+ width: 8px;
+ height: 8px;
+ background-color: #fff;
+ }
}
+ }
}
// check-box
-.d-check-box{
- label{
- &.red{color: #FFCACA;}
- &::before{
- cursor: pointer;
- content: "";
- display: inline-block;
- position: absolute;
- width: 17px;
- height: 17px;
- top: 2px;
- left: 0;
- margin-left: -12px;
- border: 1px solid #D6D6D7;
- background-color: #fff;
- transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
- }
- &:after{
- cursor: pointer;
- content: "";
- display: inline-block;
- position: absolute;
- width: 16px;
- height: 16px;
- top:0;
- left: 0;
- margin-left: -.8rem;
- transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
- }
+.d-check-box {
+ label {
+ &.red {
+ color: #ffcaca;
}
- input[type=checkbox]:checked + label::after{
- content: "";
- display: inline-block;
- position: absolute;
- top: 1px;
- left: -1px;
- width: 5px;
- height: 8px;
- border: 2px solid #697C8F;
- border-left: none;
- border-top: none;
- transform: translate(7.75px,4.5px) rotate(45deg);
- -ms-transform: translate(7.75px,4.5px) rotate(45deg);
+ &::before {
+ cursor: pointer;
+ content: '';
+ display: inline-block;
+ position: absolute;
+ width: 17px;
+ height: 17px;
+ top: 2px;
+ left: 0;
+ margin-left: -12px;
+ border: 1px solid #d6d6d7;
+ background-color: #fff;
+ transition:
+ border 0.15s ease-in-out,
+ color 0.15s ease-in-out;
}
- &.pop{
- label{
- &:before{
- background-color: transparent;
- }
- }
- input[type=checkbox]:checked + label::after{
- border-color: #fff;
- }
- &.no-text{
- label{
- padding-left: 0;
- }
- }
+ &:after {
+ cursor: pointer;
+ content: '';
+ display: inline-block;
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ top: 0;
+ left: 0;
+ margin-left: -0.8rem;
+ transition:
+ border 0.05s ease-in-out,
+ color 0.05s ease-in-out;
}
- &.sel{
- input[type=checkbox]:checked + label{
- color: #D7C863;
- }
- input[type=checkbox]:checked + label::before,
- input[type=checkbox]:checked + label::after{
- border-color: #D7C863;
- }
+ }
+ input[type='checkbox']:checked + label::after {
+ content: '';
+ display: inline-block;
+ position: absolute;
+ top: 1px;
+ left: -1px;
+ width: 5px;
+ height: 8px;
+ border: 2px solid #697c8f;
+ border-left: none;
+ border-top: none;
+ transform: translate(7.75px, 4.5px) rotate(45deg);
+ -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
+ }
+ &.pop {
+ label {
+ &:before {
+ background-color: transparent;
+ }
}
+ input[type='checkbox']:checked + label::after {
+ border-color: #fff;
+ }
+ &.no-text {
+ label {
+ padding-left: 0;
+ }
+ }
+ }
+ &.sel {
+ input[type='checkbox']:checked + label {
+ color: #d7c863;
+ }
+ input[type='checkbox']:checked + label::before,
+ input[type='checkbox']:checked + label::after {
+ border-color: #d7c863;
+ }
+ }
}
// date-picker
-.date-picker{
- svg{display: none;}
- .react-datepicker-wrapper{
- width: 100%;
- }
- input[type=text]{
- display: block;
- width: 100%;
- height: 30px;
- padding: 0 34px 0 10px;
- border-radius: 2px;
- border: 1px solid #eee;
- font-size: 13px;
- color: #45576F;
- font-weight: normal;
- font-family: 'Noto Sans JP', sans-serif;
- background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
- background-size: 14px 15px;
- cursor: pointer;
- }
+.date-picker {
+ svg {
+ display: none;
+ }
+ .react-datepicker-wrapper {
+ width: 100%;
+ }
+ input[type='text'] {
+ display: block;
+ width: 100%;
+ height: 30px;
+ padding: 0 34px 0 10px;
+ border-radius: 2px;
+ border: 1px solid #eee;
+ font-size: 13px;
+ color: #45576f;
+ font-weight: normal;
+ font-family: 'Noto Sans JP', sans-serif;
+ background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
+ background-size: 14px 15px;
+ cursor: pointer;
+ }
}
// react select
-.react-select-custom{
- width: 100%;
- .custom__control{
- height: 30px;
- min-height: unset;
- border-radius: 2px;
- border-color: #EEE;
- background-color: #fff;
- &:hover{
- border-color: #EEE;
- }
+.react-select-custom {
+ width: 100%;
+ .custom__control {
+ height: 30px;
+ min-height: unset;
+ border-radius: 2px;
+ border-color: #eee;
+ background-color: #fff;
+ &:hover {
+ border-color: #eee;
}
- .custom__control--is-focused{
- border-color: #EEE;
- box-shadow: unset;
- &:hover{
- border-color: #EEE;
+ }
+ .custom__control--is-focused {
+ border-color: #eee;
+ box-shadow: unset;
+ &:hover {
+ border-color: #eee;
+ }
+ }
+ .custom__value-container {
+ height: 100%;
+ padding: 0 10px;
+ }
+ .custom__placeholder,
+ .custom__single-value {
+ margin: 0;
+ }
+ .custom__single-value {
+ font-size: 13px;
+ color: #45576f;
+ font-weight: 400;
+ }
+ .custom__placeholder {
+ font-size: 13px;
+ color: #bbbbbb;
+ font-weight: 400;
+ }
+ .custom__indicator {
+ padding: 0;
+ svg {
+ display: none;
+ }
+ }
+ .custom__clear-indicator {
+ width: 30px;
+ height: 100%;
+ background: url(../../public/static/images/common/select_del.svg) no-repeat center;
+ background-size: 8px 8px;
+ }
+ .custom__dropdown-indicator {
+ width: 30px;
+ height: 100%;
+ background: url(../../public/static/images/common/select_light_arr.svg) no-repeat center;
+ }
- }
+ .custom__menu {
+ margin: 1px 0;
+ border-radius: 2px;
+ overflow: hidden;
+ }
+ .custom__menu-list {
+ padding: 0;
+ }
+ .custom__option {
+ font-size: 13px;
+ padding: 7px 10px;
+ color: #45576f;
+ }
+ .custom__option--is-selected {
+ color: #fff;
+ }
+ // disable
+ &.custom--is-disabled {
+ .custom__control {
+ background-color: #fafafa;
}
- .custom__value-container {
- height: 100%;
- padding: 0 10px;
- }
- .custom__placeholder,
- .custom__single-value{
- margin: 0;
- }
- .custom__single-value{
- font-size: 13px;
- color: #45576F;
- font-weight: 400;
- }
- .custom__placeholder{
- font-size: 13px;
- color: #bbbbbb;
- font-weight: 400;
- }
- .custom__indicator{
- padding: 0;
- svg{
- display: none;
- }
- }
- .custom__clear-indicator{
- width: 30px;
- height: 100%;
- background: url(../../public/static/images/common/select_del.svg) no-repeat center;
- background-size: 8px 8px;
- }
- .custom__dropdown-indicator{
- width: 30px;
- height: 100%;
- background: url(../../public/static/images/common/select_light_arr.svg) no-repeat center;
+ .custom__single-value {
+ color: #999999;
}
+ }
+}
- .custom__menu {
- margin: 1px 0;
- border-radius: 2px;
- overflow: hidden;
- }
- .custom__menu-list {
- padding: 0;
- }
- .custom__option{
- font-size: 13px;
- padding: 7px 10px;
- color: #45576F;
- }
- .custom__option--is-selected{
- color: #fff;
- }
- // disable
- &.custom--is-disabled{
- .custom__control{
- background-color: #FAFAFA ;
- }
- .custom__single-value{
- color: #999999;
- }
- }
-}
\ No newline at end of file
+// toggle
+.toggle-btn {
+ position: relative;
+ display: inline-block;
+ width: 55px;
+ height: 20px;
+ input {
+ display: none;
+ }
+}
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #454545;
+ transition: 0.4s;
+ border-radius: 10px;
+ text-align: center;
+ line-height: 20px;
+ color: white;
+ font-size: 12px;
+ font-weight: 400;
+ &:after {
+ content: 'OFF';
+ position: absolute;
+ right: 7px;
+ color: white;
+ font-size: 12px;
+ font-weight: 400;
+ }
+ &:before {
+ position: absolute;
+ content: '';
+ height: 16px;
+ width: 16px;
+ left: 2px;
+ bottom: 2px;
+ background-color: white;
+ transition: 0.4s;
+ border-radius: 50%;
+ }
+}
+input:checked + .slider {
+ background-color: #2563eb;
+ &:after {
+ content: 'ON';
+ left: 10px;
+ right: auto;
+ }
+ &:before {
+ transform: translateX(35px);
+ }
+}