diff --git a/public/static/images/canvas/additional-edit01.svg b/public/static/images/canvas/additional-edit01.svg new file mode 100644 index 00000000..2e8ce52c --- /dev/null +++ b/public/static/images/canvas/additional-edit01.svg @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/additional-edit02.svg b/public/static/images/canvas/additional-edit02.svg new file mode 100644 index 00000000..e69de29b diff --git a/public/static/images/canvas/additional_bundle-del01.svg b/public/static/images/canvas/additional_bundle-del01.svg new file mode 100644 index 00000000..e69de29b diff --git a/public/static/images/canvas/additional_bundle-del02.svg b/public/static/images/canvas/additional_bundle-del02.svg new file mode 100644 index 00000000..797adf82 --- /dev/null +++ b/public/static/images/canvas/additional_bundle-del02.svg @@ -0,0 +1,106 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/additional_bundle-del03.svg b/public/static/images/canvas/additional_bundle-del03.svg new file mode 100644 index 00000000..e69de29b diff --git a/public/static/images/canvas/additional_bundle-del04.svg b/public/static/images/canvas/additional_bundle-del04.svg new file mode 100644 index 00000000..4f28a719 --- /dev/null +++ b/public/static/images/canvas/additional_bundle-del04.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/additional_bundle-edit01.svg b/public/static/images/canvas/additional_bundle-edit01.svg new file mode 100644 index 00000000..e69de29b diff --git a/public/static/images/canvas/additional_bundle-edit02.svg b/public/static/images/canvas/additional_bundle-edit02.svg new file mode 100644 index 00000000..e69de29b diff --git a/public/static/images/canvas/additional_del01.svg b/public/static/images/canvas/additional_del01.svg new file mode 100644 index 00000000..17e8cea0 --- /dev/null +++ b/public/static/images/canvas/additional_del01.svg @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/additional_del02.svg b/public/static/images/canvas/additional_del02.svg new file mode 100644 index 00000000..e69de29b diff --git a/public/static/images/canvas/additional_del03.svg b/public/static/images/canvas/additional_del03.svg new file mode 100644 index 00000000..e69de29b diff --git a/public/static/images/canvas/additional_del04.svg b/public/static/images/canvas/additional_del04.svg new file mode 100644 index 00000000..e69de29b diff --git a/src/styles/_canvasside.scss b/src/styles/_canvasside.scss index 8ef0c762..66bba83d 100644 --- a/src/styles/_canvasside.scss +++ b/src/styles/_canvasside.scss @@ -1,106 +1,106 @@ // 패널 배치 집계 -.penal-wrap { - position: fixed; - top: 200px; - left: 50px; - z-index: 999999; - width: 237px; - height: 40px; - line-height: 40px; - background-color: #fff; - border: 1px solid #dfdfdf; - padding: 0 34px 0 10px; - border-radius: 2px; - box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05); - cursor: pointer; - &::before { - content: ''; - position: absolute; - top: 50%; - right: 12px; - transform: translateY(-50%); - width: 10px; - height: 6px; - background: url(../../public/static/images/canvas/penal_arr.svg) no-repeat center; - background-size: cover; - } - h2 { - font-size: 12px; - font-weight: 500; - color: #3d3d3d; - } - .penal-table-wrap { - display: none; - position: absolute; - top: 100%; - left: -1px; - min-width: calc(100% + 2px); - background-color: #3d3d3d; - border: 1px solid #3d3d3d; - padding: 20px; - .penal-table { - table-layout: fixed; - border-collapse: collapse; - thead { - th { - text-align: center; - background-color: rgba(255, 255, 255, 0.05); - font-size: 12px; - font-weight: 500; - color: #fff; - border: 1px solid #505050; +.penal-wrap{ + position: fixed; + top: 200px; + left: 50px; + z-index: 999999; + width: 237px; + height: 40px; + line-height: 40px; + background-color: #fff; + border: 1px solid #DFDFDF; + padding: 0 34px 0 10px; + border-radius: 2px; + box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05); + cursor: pointer; + &::before{ + content: ''; + position: absolute; + top: 50%; + right: 12px; + transform: translateY(-50%); + width: 10px; + height: 6px; + background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center; + background-size: cover; + } + h2{ + font-size: 12px; + font-weight: 500; + color: #3D3D3D; + } + .penal-table-wrap{ + display: none; + position: absolute; + top: 100%; + left: -1px; + min-width: calc(100% + 2px); + background-color: #3D3D3D; + border: 1px solid #3D3D3D; + padding: 20px; + .penal-table{ + table-layout: fixed; + border-collapse: collapse; + thead{ + th{ + text-align: center; + background-color:rgba(255, 255, 255, 0.05); + font-size: 12px; + font-weight: 500; + color: #fff; + border: 1px solid #505050; + } + } + tbody{ + td{ + font-size: 12px; + color: #fff; + font-weight: 400; + text-align: center; + padding: 0 10px; + border: 1px solid #505050; + } + } } - } - tbody { - td { - font-size: 12px; - color: #fff; - font-weight: 400; - text-align: center; - padding: 0 10px; - border: 1px solid #505050; + } + &.act{ + border: 1px solid #3D3D3D; + background-color: #3D3D3D; + h2{ + color: #fff; + } + &::before{ + background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center; + } + .penal-table-wrap{ + display: block; } - } } - } - &.act { - border: 1px solid #3d3d3d; - background-color: #3d3d3d; - h2 { - color: #fff; - } - &::before { - background: url(../../public/static/images/canvas/penal_arr_white.svg) no-repeat center; - } - .penal-table-wrap { - display: block; - } - } } // context menu -.context-menu-wrap { - min-width: 238px; - border-radius: 4px; - border: 1px solid #e9e9e9; - background: #fff; - box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05); - ul { - padding: 17px 0; - border-bottom: 1px solid #e9e9e9; - &:last-child { - border: none; +.context-menu-wrap{ + min-width: 238px; + border-radius: 4px; + border: 1px solid #E9E9E9; + background: #FFF; + box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05); + ul{ + padding: 17px 0; + border-bottom: 1px solid #E9E9E9; + &:last-child{ + border: none; + } + li{ + padding: 4px 30px; + cursor: pointer; + font-size: 12px; + font-weight: 400; + color: #101010; + &:hover{ + color: #fff; + background-color: #0D99FF; + } + } } - li { - padding: 4px 30px; - cursor: pointer; - font-size: 12px; - font-weight: 400; - color: #101010; - &:hover { - color: #fff; - background-color: #0d99ff; - } - } - } -} +} \ No newline at end of file diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 275a917f..dc02fc85 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -1,953 +1,1093 @@ // CanvasPage -.canvas-wrap { - height: calc(100vh - 47px); - display: flex; - flex-direction: column; - .canvas-content { - flex: 1 1 auto; - .canvas-layout { - height: 100%; +.canvas-wrap{ + height: calc(100vh - 47px); + display: flex; + flex-direction: column; + .canvas-content{ + flex: 1 1 auto; + .canvas-layout{ + height: 100%; + } } - } - &.sub-wrap { - overflow: hidden; - .canvas-content { - height: calc(100% - 47px); + &.sub-wrap{ + overflow: hidden; + .canvas-content{ + height: calc(100% - 47px); + } } - } } // CanvasMenu -.canvas-menu-wrap { - position: relative; - display: block; - width: 100%; - padding-bottom: 0; - background-color: #383838; - transition: padding 0.17s ease-in-out; - .canvas-menu-inner { +.canvas-menu-wrap{ position: relative; - display: flex; - align-items: center; - padding: 0 40px 0 20px; - background-color: #2c2c2c; - 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 0.17s ease-in-out; - .menu-icon { - display: block; - width: 16px; - height: 16px; - background-repeat: no-repeat; - background-position: center; - background-size: cover; - 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-right: 5px; - > 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); - } - &: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: 0 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 0.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; + display: block; width: 100%; - 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 { + padding-bottom: 0; + background-color: #383838; + transition: padding .17s ease-in-out; + .canvas-menu-inner{ + position: relative; 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; + padding: 0 40px 0 20px; + background-color: #2C2C2C; + z-index: 999; + .canvas-menu-list{ + display: flex; + align-items: center; 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-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: 16px; + height: 16px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + 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-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 0.17s ease-in-out; - button { - position: relative; - font-size: 12px; - font-weight: 400; + .canvas-side-btn-wrap{ + display: flex; + align-items: center; + margin-left: auto; + .select-box{ + width: 124px; + margin-right: 5px; + > 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: 0 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%; - 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; + .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; + } + } } - } - &:last-child { - margin-right: 0; - } - &.mouse { - opacity: 0.55; - } } - } + &.active{ + top: 47px; + } } - &.active { - top: 47px; + &.active{ + padding-bottom: 50px; } - } - &.active { - padding-bottom: 50px; - } } // canvas-layout -.canvas-layout { - .canvas-page-list { - display: flex; - background-color: #1c1c1c; - border-top: 1px solid #000; - width: 100%; - .canvas-plane-wrap { - display: flex; - align-items: center; - max-width: calc(100% - 45px); - .canvas-page-box { +.canvas-layout{ + .canvas-page-list{ 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; + background-color: #1C1C1C; + border-top: 1px solid #000; + width: 100%; + .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; + } + } } - .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; + .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; + } } - &.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: #fff; - canvas { - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - width: 1600px; - height: 1000px; - } +.canvas-frame{ + position: relative; + height: calc(100% - 36.5px); + 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%; - height: 46px; - border-bottom: 1px solid #000; - background: #2c2c2c; - z-index: 999; - .sub-header-inner { - 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; - } - } - } - } - .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; +.sub-header{ + position: fixed; + top: 46px; + left: 0; + width: 100%; + height: 46px; + border-bottom: 1px solid #000; + background: #2C2C2C; + z-index: 999; + .sub-header-inner{ display: flex; align-items: center; - padding: 0 10px; - span { - display: flex; - font-size: 12px; - color: #aaa; - font-weight: normal; - cursor: default; + 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; + } + } + } } - &: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 { + .sub-header-title{ + font-size: 16px; color: #fff; - } - &:after { - display: none; - } + 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; + } + } + } } - } } - } } // sub content -.sub-content { - padding-top: 46px; - .sub-content-inner { - max-width: 1720px; - margin: 0 auto; - padding-top: 20px; - .sub-content-box { - margin-bottom: 20px; - &:last-child { - margin-bottom: 0; - } +.sub-content{ + padding-top: 46px; + .sub-content-inner{ + max-width: 1720px; + margin: 0 auto; + padding-top: 20px; + .sub-content-box{ + margin-bottom: 20px; + &:last-child{ + margin-bottom: 0; + } + } } - } - &.estimate { - display: flex; - flex-direction: column; - height: calc(100% - 36.5px); - overflow-y: auto; - padding-top: 0; - .sub-content-inner { - flex: 1; - width: 100%; + &.estimate{ + display: flex; + flex-direction: column; + height: calc(100% - 36.5px); + overflow-y: auto; + 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; - } - .option { - padding-left: 5px; - font-size: 13px; - color: #101010; - font-weight: 400; - } - .info-wrap { +.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; - li { - position: relative; - padding: 0 6px; - font-size: 12px; - color: #101010; - font-weight: normal; - span { - font-weight: 600; - &.red { - color: #e23d70; + 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; + } } - } - &: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; + .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;}} + } } - } } - } } - } - .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; - margin-top: 20px; - } - .sub-right-footer { - display: flex; - align-items: center; - justify-content: flex-end; - margin-top: 20px; - } - .pagination-wrap { - margin-top: 24px; - } + .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; + 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-wrap{ + margin-bottom: 30px; } -.infomation-box-wrap { - display: flex; - align-items: center; - 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; +.infomation-box-wrap{ + display: flex; + align-items: center; + 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; - .estimate-box { - flex: 1; +.estimate-list-wrap{ display: flex; align-items: center; - &:last-child { - flex: none; - min-width: 220px; + margin-bottom: 10px; + &.one{ + .estimate-box{ + &:last-child{ + min-width: unset; + } + } } - .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-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; + } + } } - .estimate-name { - font-size: 13px; - color: #344356; - margin-left: 14px; - font-weight: 400; + &:last-child{ + margin-bottom: 0; } - } - &:last-child { - margin-bottom: 0; - } } // file drag box -.drag-file-box { - padding: 10px; - .btn-area { - padding-bottom: 15px; - border-bottom: 1px solid #ecf0f4; - } - .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; +.drag-file-box{ + padding: 10px; + .btn-area{ + padding-bottom: 15px; + border-bottom: 1px solid #ECF0F4; } - } - .file-list { - .file-item { - margin-bottom: 15px; - span { + .drag-file-area{ 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; + margin-top: 15px; + p{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 13px; + color: #ccc; + font-weight: 400; + cursor: default; } - } - &:last-child { - margin-bottom: 0; - } } - } + .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; + } + } + } +} + +.special-note-check-wrap{ + display: grid; + grid-template-columns: repeat(5, 1fr); + border: 1px solid #ECF0F4; + border-radius: 3px; + margin-bottom: 30px; + .special-note-check-item{ + padding: 14px 10px; + border-right: 1px solid #ECF0F4; + border-top: 1px solid #ECF0F4; + &:nth-child(5n){ + border-right: none; + } + &:nth-child(-n+5){ + border-top: none; + } + &.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: 5px; + } + } + &::-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; + .attachment-required{ + position: relative; + display: flex; + align-items: center; + font-size: 12px; + font-weight: 400; + color: #45576F; + padding-right: 10px; + .ico{ + width: 23px; + height: 23px; + margin-right: 5px; + background: url(../../public/static/images/sub/attachment_ico.svg)no-repeat center; + background-size: cover; + } + &::before{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 1px; + height: 12px; + background-color: #D9D9D9; + } + } + .click-check{ + display: flex; + align-items: center; + font-size: 12px; + font-weight: 400; + color: #F16A6A ; + padding-left: 10px; + .ico{ + width: 14px; + height: 14px; + margin-right: 5px; + background: url(../../public/static/images/sub/click_check_ico.svg)no-repeat center; + background-size: cover; + } + } + } + .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 { +.chart-wrap{ display: flex; - flex-direction: column; - flex: none; - width: 650px; - .sub-table-box { - flex: 1; - &:first-child { - margin-bottom: 20px; - } + 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; +.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{ + 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{ + 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; + } + } + } +} + +.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: #45576f; + color: #344356; font-weight: 500; - background-color: #f8f9fa; - } } - tbody { - td { - font-size: 13px; - color: #45576f; + .total-num{ + flex: none; + width: 121px; text-align: center; - padding: 4.5px 0; - } + font-size: 15px; + color: #344356; + font-weight: 500; } - } -} - -.simulation-guide-wrap { - display: flex; - padding: 20px; - .simulation-tit-wrap { - 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 { - 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; - } - } - } -} - -.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; +.information-help-wrap{ 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; + 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; + } } - .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; + } + } } - } - .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; - } - } - } -} +} \ No newline at end of file diff --git a/src/styles/_grid-detail.scss b/src/styles/_grid-detail.scss index a673236a..4cf9d3b2 100644 --- a/src/styles/_grid-detail.scss +++ b/src/styles/_grid-detail.scss @@ -36,6 +36,9 @@ &:nth-child(2n){ background-color: #F7F9FA; } + &.important_row{ + background-color: #e7e7e7; + } } .ag-cell{ font-size: 13px; diff --git a/src/styles/_main.scss b/src/styles/_main.scss index e80d8b83..37170a8b 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -1,687 +1,652 @@ // background img -.background-bord { - position: absolute; - top: 46px; - left: 0; - width: 100%; - height: 280px; - background: url(../../public/static/images/main/main_background.png) no-repeat center; - background-size: cover; - z-index: 0; +.background-bord{ + position: absolute; + top: 46px; + left: 0; + width: 100%; + height: 280px; + background: url(../../public/static/images/main/main_background.png)no-repeat center; + background-size: cover; + z-index: 0; } // main-wrap -.main-contents { - position: relative; - z-index: 1; - padding-bottom: 15px; +.main-contents{ + position: relative; + z-index: 1; + padding-bottom: 15px; } // contents -.store-id-wrap { - display: flex; - align-items: center; - justify-content: center; - gap: 12px; - padding: 33.5px 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - background-color: rgba(255, 255, 255, 0.05); - .store-id-title { - position: relative; - padding-left: 32px; - font-size: 13px; - color: #fff; - &::before { - content: ''; - position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%); - width: 20px; - height: 20px; - background: url(../../public/static/images/main/id_icon.svg) no-repeat center; - } - } - .store-arr { - display: block; - width: 7px; - height: 10px; - background: url(../../public/static/images/main/store-arr.svg) no-repeat center; - } - .store-id-name { - font-size: 16px; - color: #fff; - font-weight: 600; - } -} - -// main-search-form -.main-search-wrap { - display: flex; - align-items: center; - justify-content: center; - padding: 45px 0; - .search-raido-wrap { +.store-id-wrap{ display: flex; align-items: center; - gap: 16px; - margin-right: 30px; - } -} -.search-input-box { - display: flex; - align-items: center; - width: 580px; - height: 45px; - border-radius: 100px; - padding: 0 20px; - border: 1px solid rgba(255, 255, 255, 0.3); - background: rgba(31, 31, 31, 0.3); - .main-search { - flex: 1; - height: 100%; - font-size: 13px; - color: #fff; - background-color: transparent; - outline: none; - border: none; - font-family: 'Noto Sans JP', sans-serif; - } - .search-icon { - width: 20px; - height: 100%; - background-image: url(../../public/static/images/main/main_search.svg); - background-repeat: no-repeat; - background-position: center; - background-size: 21px 21px; - } -} - -// main-contents-inner -.main-product-list-wrap { - max-width: 1400px; - margin: 0 auto; - .main-product-list { - display: flex; - gap: 24px; - margin-bottom: 24px; - .product-item { - display: flex; - flex-direction: column; - padding: 40px; - border-radius: 6px; - background: #fff; - box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); - &.item01 { - flex: 1; - max-height: 400px; - } - &.item02 { - flex: none; - width: 451px; - max-height: 400px; - } - &.item03 { - flex: 1; - } - &.item04 { - flex: none; - width: 351px; - } - &.item05 { - flex: none; - width: 451px; - } - .product-item-title-wrap { - display: flex; - align-items: center; - .product-item-title { - display: flex; - align-items: center; - font-size: 16px; - color: #101010; - font-weight: 600; - .item-logo { - display: block; - width: 40px; - height: 40px; - border-radius: 50px; - background: #14324f; - margin-right: 12px; - background-repeat: no-repeat; - background-size: 22px 22px; - background-position: center; - &.ico01 { - background-image: url(../../public/static/images/main/product_ico01.svg); - } - &.ico02 { - background-image: url(../../public/static/images/main/product_ico02.svg); - } - &.ico03 { - background-image: url(../../public/static/images/main/product_ico03.svg); - } - &.ico04 { - background-image: url(../../public/static/images/main/product_ico04.svg); - } - &.ico05 { - background-image: url(../../public/static/images/main/product_ico05.svg); - } - } - } - .more-btn { - display: block; - width: 20px; - height: 20px; - margin-left: auto; - background: url(../../public/static/images/main/more_btn.svg) no-repeat center; - } - } - .product-item-content { - margin-top: 30px; - overflow: hidden; - .recently-list { - .recently-item { - border: 1px solid #f2f2f2; - background-color: transparent; - padding: 29.9px 20px; - margin-bottom: 5px; - cursor: pointer; - .item-inner { - display: flex; - align-items: center; - span { - position: relative; - display: block; - font-size: 13px; - color: #101010; - font-weight: 400; - padding: 0 10px; - &.time { - padding-left: 22px; - &::before { - content: ''; - position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%); - width: 14px; - height: 14px; - background: url(../../public/static/images/main/clock.svg) no-repeat center; - background-size: cover; - } - } - &:after { - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 1px; - height: 10px; - background-color: #bbb; - } - &:last-child { - &:after { - display: none; - } - } - } - } - &:last-child { - margin-bottom: 5px; - } - } - } - .notice-box { - height: 100%; - overflow-y: auto; - .notice-day { - font-size: 13px; - color: #666; - font-weight: 400; - margin-bottom: 7px; - } - .notice-title { - font-size: 14px; - color: #101010; - font-weight: 600; - margin-bottom: 25px; - line-height: 24px; - word-break: keep-all; - } - .notice-contents { - font-size: 12px; - color: #666; - font-weight: 400; - line-height: 22px; - span { - position: relative; - display: block; - padding-left: 10px; - &::before { - content: ''; - position: absolute; - top: 10px; - left: 3px; - width: 3px; - height: 3px; - border-radius: 100%; - background-color: #666; - } - } - } - &::-webkit-scrollbar { - width: 4px; /* 스크롤바의 너비 */ - } - &::-webkit-scrollbar-thumb { - background: #697c8f; /* 스크롤바의 색상 */ - } - &::-webkit-scrollbar-track { - background: transparent; /*스크롤바 뒷 배경 색상*/ - } - } - .faq-item { - position: relative; - margin-bottom: 10px; - cursor: pointer; - .faq-item-inner { - display: flex; - align-items: center; - - .faq-num { - flex: none; - padding: 7px 12.5px; - font-size: 13px; - color: #101010; - font-weight: 600; - border-radius: 110px; - border: 1px solid rgba(242, 242, 242, 0.95); - margin-right: 20px; - } - .faq-title { - width: 0; - flex: 1 1 auto; - font-size: 13px; - color: #101010; - font-weight: 500; - padding-right: 96px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - .faq-day { - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - font-size: 13px; - color: #101010; - font-weight: 400; - } - } - &:last-child { - margin-bottom: 0; - } - } - .data-download-wrap { - width: 100%; - .data-down { - display: block; - width: 100%; - padding: 20px; - text-align: left; - border-radius: 4px; - background-color: #697c8f; - margin-bottom: 5px; - transition: background 0.17s ease-in-out; - span { - position: relative; - display: block; - padding-right: 30px; - font-size: 13px; - color: #fff; - font-weight: 400; - &:after { - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 18px; - height: 16px; - background: url(../../public/static/images/main/download.svg) no-repeat center; - background-size: cover; - } - } - &:last-child { - margin-bottom: 0; - } - &:hover { - background-color: #859eb6; - } - } - } - .contact-info-list { - padding: 25px 30px; - border-radius: 4px; - background-color: #f4f4f7; - .info-item { - display: flex; - align-items: center; - padding: 15px 0; - border-bottom: 1px solid #fff; - &:first-child { - padding-top: 0; - } - &:last-child { - padding-bottom: 0; - border: none; - } - .icon-box { - display: flex; - margin-right: 12px; - } - .infor-data { - font-size: 13px; - color: #101010; - font-weight: 500; - } - } - } - } - } - &:last-child { - margin-bottom: 0; - } - } -} - -// loginpage -.login-wrap { - position: relative; - width: 100%; - min-height: 100vh; - display: flex; - flex-direction: column; - justify-content: center; - background: url(../../public/static/images/main/login_bg.png) no-repeat center; - background-size: cover; - .login-inner { - max-width: 500px; - width: 100%; - margin: 0 auto; - .login-logo { - display: block; - margin-bottom: 25px; - } - .login-input-frame { - padding: 40px 50px; - border-radius: 6px; - background: rgba(255, 255, 255, 0.97); - box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); - .login-frame-tit { - font-size: 18px; - color: #364864; - font-weight: 400; - padding-bottom: 30px; - border-bottom: 1px solid #e5e9ef; - span { - display: block; - font-weight: 600; - margin-bottom: 5px; - } - &.pw-reset { - font-size: 13px; - } - } - .login-input-wrap { - margin-top: 30px; - .login-area { - position: relative; - display: flex; - align-items: center; - border: 1px solid #e5e9ef; - height: 45px; - padding-left: 40px; - padding-right: 15px; - margin-bottom: 15px; - .login-input { - flex: 1; - height: 100%; - background-color: transparent; - font-size: 13px; - font-weight: 400; - color: #6c819c; - &::placeholder { - font-size: 13px; - font-weight: 400; - color: #d1d7e0; - } - } - &::before { + justify-content: center; + gap: 12px; + padding: 33.5px 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + background-color: rgba(255, 255, 255, 0.05); + .store-id-title{ + position: relative; + padding-left: 32px; + font-size: 13px; + color: #fff; + &::before{ content: ''; position: absolute; top: 50%; - left: 15px; + left: 0; transform: translateY(-50%); - width: 10px; - height: 12px; - background-size: cover; - } - button { width: 20px; - height: 100%; - background-repeat: no-repeat; - background-position: center; - } - &.id { - &::before { - background: url(../../public/static/images/main/login_id.svg) no-repeat center; - } - .id-delete { - background-image: url(../../public/static/images/main/id_delete.svg); - background-size: 17px 17px; - } - } - &.email { - &::before { - background: url(../../public/static/images/main/login_email.svg) no-repeat center; - width: 12px; - height: 9px; - } - .id-delete { - background-image: url(../../public/static/images/main/id_delete.svg); - background-size: 17px 17px; - } - } - &.password { - margin-bottom: 20px; - &::before { - background: url(../../public/static/images/main/login_password.svg) no-repeat center; - } - .password-hidden { - background-image: url(../../public/static/images/main/password_hidden.svg); - background-size: 19px 13px; - &.visible { - background-image: url(../../public/static/images/main/password_visible.svg); - } - } - } + height: 20px; + background: url(../../public/static/images/main/id_icon.svg)no-repeat center; } - .login-btn { - display: block; - width: 100%; - height: 45px; - background-color: #5c6773; - color: #fff; - font-size: 15px; - font-weight: 600; - border-radius: 4px; - transition: background 0.15s ease-in-out; - &:hover { - background-color: #717e8d; - } - &.light { - background-color: #fff; - border: 1px solid #5c6773; - color: #5c6773; - } - } - .login-btn-box { - margin-bottom: 20px; - } - .pwreset-btn-box { - display: flex; - } - .reset-password { - width: 100%; - text-align: center; - button { - position: relative; - font-size: 13px; - color: #364864; - font-weight: 400; - padding-right: 16px; - &::before { - content: ''; - position: absolute; - top: calc(50% + 1px); - right: 0; - transform: translateY(-50%); - width: 6px; - height: 8px; - background: url(../../public/static/images/main/login-arr.svg) no-repeat center; - } - } - } - } } - .login-guide-wrap { - position: relative; - margin-left: 10px; - margin-top: 30px; - padding-left: 15px; - font-size: 13px; - color: #fff; - line-height: 24px; - a { + .store-arr{ + display: block; + width: 7px; + height: 10px; + background: url(../../public/static/images/main/store-arr.svg) no-repeat center; + } + .store-id-name{ + font-size: 16px; color: #fff; font-weight: 600; - text-decoration: underline; - } - span { - position: absolute; - top: 0; - left: 0; - } } - } - .login-copyright { - position: absolute; - bottom: 40px; - left: 50%; - transform: translateX(-50%); - font-size: 11px; - color: #fff; - font-weight: 500; - } } -.d-check-box { - &.login { - margin-bottom: 25px; - label { - padding-left: 20px; - color: #364864; - &:before { - width: 22px; - height: 22px; - top: -1px; - border-color: #a8b6c7; - border-radius: 3px; - transition: background 0.05s ease-in-out; - } +// main-search-form +.main-search-wrap{ + display: flex; + align-items: center; + justify-content: center; + padding: 45px 0; + .search-raido-wrap{ + display: flex; + align-items: center; + gap: 16px; + margin-right: 30px; + } +} +.search-input-box{ + display: flex; + align-items: center; + width: 580px; + height: 45px; + border-radius: 100px; + padding: 0 20px; + border: 1px solid rgba(255, 255, 255, 0.30); + background: rgba(31, 31, 31, 0.30); + .main-search{ + flex: 1; + height: 100%; + font-size: 13px; + color: #fff; + background-color: transparent; + outline: none; + border: none; + font-family: 'Noto Sans JP', sans-serif; + } + .search-icon{ + width: 20px; + height: 100%; + background-image: url(../../public/static/images/main/main_search.svg); + background-repeat: no-repeat; + background-position: center; + background-size: 21px 21px; + } +} + +// main-contents-inner +.main-product-list-wrap{ + max-width: 1400px; + margin: 0 auto; + .main-product-list{ + display: flex; + gap: 24px; + margin-bottom: 24px; + .product-item{ + display: flex; + flex-direction: column; + padding: 40px; + border-radius: 6px; + background: #FFF; + box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); + &.item01{flex: 1; max-height: 400px;} + &.item02{flex: none; width: 451px; max-height: 400px;} + &.item03{flex: 1;} + &.item04{flex: none; width: 351px;} + &.item05{flex: none; width: 451px;} + .product-item-title-wrap{ + display: flex; + align-items: center; + .product-item-title{ + display: flex; + align-items: center; + font-size: 16px; + color: #101010; + font-weight: 600; + .item-logo{ + display: block; + width: 40px; + height: 40px; + border-radius: 50px; + background: #14324F; + margin-right: 12px; + background-repeat: no-repeat; + background-size: 22px 22px; + background-position: center; + &.ico01{background-image: url(../../public/static/images/main/product_ico01.svg);} + &.ico02{background-image: url(../../public/static/images/main/product_ico02.svg);} + &.ico03{background-image: url(../../public/static/images/main/product_ico03.svg);} + &.ico04{background-image: url(../../public/static/images/main/product_ico04.svg);} + &.ico05{background-image: url(../../public/static/images/main/product_ico05.svg);} + } + } + .more-btn{ + display: block; + width: 20px; + height: 20px; + margin-left: auto; + background: url(../../public/static/images/main/more_btn.svg)no-repeat center; + } + } + .product-item-content{ + margin-top: 30px; + overflow: hidden; + .recently-list{ + .recently-item{ + border: 1px solid #F2F2F2; + background-color: transparent; + padding: 29.9px 20px; + margin-bottom: 5px; + cursor: pointer; + .item-inner{ + display: flex; + align-items: center; + span{ + position: relative; + display: block; + font-size: 13px; + color: #101010; + font-weight: 400; + padding: 0 10px; + &.time{ + padding-left: 22px; + &::before{ + content: ''; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + width: 14px; + height: 14px; + background:url(../../public/static/images/main/clock.svg)no-repeat center; + background-size: cover; + } + } + &:after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 1px; + height: 10px; + background-color: #BBB; + } + &:last-child{ + &:after{ + display: none; + } + } + } + } + &:last-child{ + margin-bottom: 5px; + } + } + } + .notice-box{ + height: 100%; + overflow-y: auto; + .notice-day{ + font-size: 13px; + color: #666; + font-weight: 400; + margin-bottom: 7px; + } + .notice-title{ + font-size: 14px; + color: #101010; + font-weight: 600; + margin-bottom: 25px; + line-height: 24px; + word-break: keep-all; + } + .notice-contents{ + font-size: 12px; + color: #666; + font-weight: 400; + line-height: 22px; + span{ + position: relative; + display: block; + padding-left: 10px; + &::before{ + content: ''; + position: absolute; + top: 10px; + left: 3px; + width: 3px; + height: 3px; + border-radius: 100%; + background-color: #666; + } + } + } + &::-webkit-scrollbar {width: 4px; /* 스크롤바의 너비 */} + &::-webkit-scrollbar-thumb {background: #697C8F; /* 스크롤바의 색상 */} + &::-webkit-scrollbar-track {background: transparent; /*스크롤바 뒷 배경 색상*/} + } + .faq-item{ + position: relative; + margin-bottom: 10px; + cursor: pointer; + .faq-item-inner{ + display: flex; + align-items: center; + + .faq-num{ + flex: none; + padding: 7px 12.5px; + font-size: 13px; + color: #101010; + font-weight: 600; + border-radius: 110px; + border: 1px solid rgba(242, 242, 242, 0.95); + margin-right: 20px; + } + .faq-title{ + width: 0; + flex: 1 1 auto; + font-size: 13px; + color: #101010; + font-weight: 500; + padding-right: 96px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + .faq-day{ + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + font-size: 13px; + color: #101010; + font-weight: 400; + } + } + &:last-child{ + margin-bottom: 0; + } + } + .data-download-wrap{ + width: 100%; + .data-down{ + display: block; + width: 100%; + padding: 20px; + text-align: left; + border-radius: 4px; + background-color: #697C8F; + margin-bottom: 5px; + transition: background .17s ease-in-out; + span{ + position: relative; + display: block; + padding-right: 30px; + font-size: 13px; + color: #fff; + font-weight: 400; + &:after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 18px; + height: 16px; + background: url(../../public/static/images/main/download.svg)no-repeat center; + background-size: cover; + } + } + &:last-child{ + margin-bottom: 0; + } + &:hover{ + background-color: #859eb6; + } + } + } + .contact-info-list{ + padding: 25px 30px; + border-radius: 4px; + background-color: #F4F4F7; + .info-item{ + display: flex; + align-items: center; + padding: 15px 0; + border-bottom: 1px solid #fff; + &:first-child{padding-top: 0;} + &:last-child{padding-bottom: 0; border: none;} + .icon-box{ + display: flex; + margin-right: 12px; + } + .infor-data{ + font-size: 13px; + color: #101010; + font-weight: 500; + } + } + } + } + } + &:last-child{ + margin-bottom: 0; + } + } +} + +// loginpage +.login-wrap{ + position: relative; + width: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + background: url(../../public/static/images/main/login_bg.png) no-repeat center; + background-size: cover; + .login-inner{ + max-width: 500px; + width: 100%; + margin: 0 auto; + .login-logo{ + display: block; + margin-bottom: 25px; + } + .login-input-frame{ + padding: 40px 50px; + border-radius: 6px; + background: rgba(255, 255, 255, 0.97); + box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); + .login-frame-tit{ + font-size: 18px; + color: #364864; + font-weight: 400; + padding-bottom: 30px; + border-bottom: 1px solid #E5E9EF; + span{ + display: block; + font-weight: 600; + margin-bottom: 5px; + } + &.pw-reset{ + font-size: 13px; + } + } + .login-input-wrap{ + margin-top: 30px; + .login-area{ + position: relative; + display: flex; + align-items: center; + border: 1px solid #E5E9EF; + height: 45px; + padding-left: 40px; + padding-right: 15px; + margin-bottom: 15px; + .login-input{ + flex: 1; + height: 100%; + background-color: transparent; + font-size: 13px; + font-weight: 400; + color: #6c819c; + &::placeholder{ + font-size: 13px; + font-weight: 400; + color: #D1D7E0; + } + } + &::before{ + content: ''; + position: absolute; + top: 50%; + left: 15px; + transform: translateY(-50%); + width: 10px; + height: 12px; + background-size: cover; + } + button{ + width: 20px; + height: 100%; + background-repeat: no-repeat; + background-position: center; + } + &.id{ + &::before{ + background: url(../../public/static/images/main/login_id.svg)no-repeat center; + } + .id-delete{ + background-image: url(../../public/static/images/main/id_delete.svg); + background-size: 17px 17px; + } + } + &.email{ + &::before{ + background: url(../../public/static/images/main/login_email.svg)no-repeat center; + width: 12px; + height: 9px; + } + .id-delete{ + background-image: url(../../public/static/images/main/id_delete.svg); + background-size: 17px 17px; + } + } + &.password{ + margin-bottom: 20px; + &::before{ + background: url(../../public/static/images/main/login_password.svg)no-repeat center; + } + .password-hidden{ + background-image: url(../../public/static/images/main/password_hidden.svg); + background-size: 19px 13px; + &.visible{ + background-image: url(../../public/static/images/main/password_visible.svg); + } + } + } + } + .login-btn{ + display: block; + width: 100%; + height: 45px; + background-color: #5C6773; + color: #fff; + font-size: 15px; + font-weight: 600; + border-radius: 4px; + transition: background .15s ease-in-out; + &:hover{ + background-color: #717e8d; + } + &.light{ + background-color: #fff; + border: 1px solid #5C6773; + color: #5C6773; + } + } + .login-btn-box{ + margin-bottom: 20px; + } + .pwreset-btn-box{ + display: flex; + } + .reset-password{ + width: 100%; + text-align: center; + button{ + position: relative; + font-size: 13px; + color: #364864; + font-weight: 400; + padding-right: 16px; + &::before{ + content: ''; + position: absolute; + top: calc(50% + 1px); + right: 0; + transform: translateY(-50%); + width: 6px; + height: 8px; + background: url(../../public/static/images/main/login-arr.svg)no-repeat center; + } + } + } + } + } + .login-guide-wrap{ + position: relative; + margin-left: 10px; + margin-top: 30px; + padding-left: 15px; + font-size: 13px; + color: #fff; + line-height: 24px; + a{ + color: #fff; + font-weight: 600; + text-decoration: underline; + } + span{ + position: absolute; + top: 0; + left: 0; + } + } + } + .login-copyright{ + position: absolute; + bottom: 40px; + left: 50%; + transform: translateX(-50%); + font-size: 11px; + color: #fff; + font-weight: 500; + } +} + +.d-check-box{ + &.login{ + margin-bottom: 25px; + label{ + padding-left: 20px; + color: #364864; + &:before{ + width: 22px; + height: 22px; + top: -1px; + border-color: #A8B6C7; + border-radius: 3px; + transition: background .05s ease-in-out; + } + } + } + input[type=checkbox]:checked + label::before{ + border-color: #A8B6C7; + background-color: #A8B6C7; + } + input[type=checkbox]:checked + label::after{ + border-color: #fff; + width: 7px; + height: 11px; + top: -2px; + left: 1px; } - } - input[type='checkbox']:checked + label::before { - border-color: #a8b6c7; - background-color: #a8b6c7; - } - input[type='checkbox']:checked + label::after { - border-color: #fff; - width: 7px; - height: 11px; - top: -2px; - left: 1px; - } } // 회원가입 -.center-page-wrap { - display: flex; - flex-direction: column; - justify-content: center; - width: 100%; - min-height: 100vh; - background-color: #f4f4f7; - overflow-x: hidden; - .center-page-inner { +.center-page-wrap{ + display: flex; + flex-direction: column; + justify-content: center; width: 100%; - max-width: 1720px; - margin: 0 auto; - .center-page-tit { - font-size: 18px; - font-weight: 600; - color: #101010; - margin-bottom: 24px; + min-height: 100vh; + background-color: #F4F4F7; + overflow-x: hidden; + .center-page-inner{ + width: 100%; + max-width: 1720px; + margin: 0 auto; + .center-page-tit{ + font-size: 18px; + font-weight: 600; + color: #101010; + margin-bottom: 24px; + } + .sub-table-box{ + &.signup{ + margin-bottom: 20px; + } + } + .sign-up-btn-wrap{ + display: flex; + justify-content: flex-end; + } + &.complete{ + max-width: 1000px; + } } - .sub-table-box { - &.signup { - margin-bottom: 20px; - } - } - .sign-up-btn-wrap { - display: flex; - justify-content: flex-end; - } - &.complete { - max-width: 1000px; - } - } + } // 회원가입 완료 -.complete-box-wrap { - padding: 72px 80px; - .complete-tit { - font-size: 18px; - font-weight: 600; - color: #101010; - margin-bottom: 17px; - } - .complete-txt { - font-size: 13px; - font-weight: 400; - color: #101010; - margin-bottom: 27px; - } - .complete-email-wrap { - padding: 36px 30px; - border-radius: 2px; - background: #f4f4f7; - margin-bottom: 20px; - .email-info { - font-size: 13px; - font-weight: 400; - color: #000; - span { - color: #204af4; - font-weight: 500; - } +.complete-box-wrap{ + padding: 72px 80px; + .complete-tit{ + font-size: 18px; + font-weight: 600; + color: #101010; + margin-bottom: 17px; } - } - .complete-btn { - display: flex; - justify-content: flex-end; - } -} + .complete-txt{ + font-size: 13px; + font-weight: 400; + color: #101010; + margin-bottom: 27px; + } + .complete-email-wrap{ + padding: 36px 30px; + border-radius: 2px; + background: #F4F4F7; + margin-bottom: 20px; + .email-info{ + font-size: 13px; + font-weight: 400; + color: #000; + span{ + color: #204AF4; + font-weight: 500; + } + } + } + .complete-btn{ + display: flex; + justify-content: flex-end; + } +} \ No newline at end of file diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 579e1334..d70732b8 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -14,6 +14,7 @@ $alert-color: #101010; scale: 1; } } + @keyframes unmountpop { from { opacity: 1; @@ -30,6 +31,7 @@ $alert-color: #101010; font-weight: 400; color: #fff; } + .bold-font { font-size: 12px; font-weight: 500; @@ -46,51 +48,67 @@ $alert-color: #101010; border-radius: 4px; background-color: #272727; z-index: 9999999; + &.xxxm { width: 240px; } + &.xxm { width: 270px; } + &.xm { width: 300px; } + &.ssm { width: 380px; } + &.sm { width: 580px; } + &.r { width: 400px; } + &.lr { width: 440px; } + &.lrr { width: 480px; } + &.ml { width: 530px; } + &.l-2 { width: 640px; } + &.lx-2 { width: 740px; } + &.lx { width: 770px; } + &.l { width: 800px; } + &.mount { - animation: mountpop 0.17s ease-in-out forwards; + animation: mountpop .17s ease-in-out forwards; } + &.unmount { - animation: unmountpop 0.17s ease-in-out forwards; + animation: unmountpop .17s ease-in-out forwards; } + &.alert { position: absolute; top: 50%; @@ -98,21 +116,25 @@ $alert-color: #101010; 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; @@ -122,6 +144,7 @@ $alert-color: #101010; } } } + .modal-head { display: flex; align-items: center; @@ -133,6 +156,7 @@ $alert-color: #101010; color: $pop-color; font-weight: 700; } + .modal-close { margin-left: auto; color: transparent; @@ -142,50 +166,64 @@ $alert-color: #101010; 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; @@ -193,18 +231,22 @@ $alert-color: #101010; } } } + .outer-line-wrap { - border-top: 1px solid #3c3c3c; + 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; @@ -216,15 +258,17 @@ $alert-color: #101010; .adsorption-point { display: flex; align-items: center; - background-color: #3a3a3a; + 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; @@ -234,10 +278,11 @@ $alert-color: #101010; font-size: 13px; color: #898989; } + &.act { i { color: $pop-color; - background-color: #1083e3; + background-color: #1083E3; } } } @@ -248,68 +293,83 @@ $alert-color: #101010; align-items: center; gap: 15px; padding-bottom: 15px; + &.border { border-bottom: 1px solid #424242; } } + .grid-option-wrap { .grid-option-box { display: flex; align-items: center; background-color: transparent; - border: 1px solid #3d3d3d; + border: 1px solid #3D3D3D; border-radius: 2px; padding: 15px 10px; gap: 20px; margin-bottom: 10px; + .grid-input-form { display: flex; align-items: center; + span { flex: none; font-size: $pop-normal-size; color: $pop-color; font-weight: $pop-bold-weight; } + .input-grid { width: 54px; + input { width: 100%; } } } + &:last-child { margin-bottom: 0; } } } + .select-form { .sort-select { width: 100%; } } + .grid-select { flex: 1; + &.no-flx { flex: unset; } + .sort-select { width: 100%; background-color: #313131; min-width: auto; font-size: 12px; border: none; + p { font-size: 12px; } + > ul { border: none; } } + &.right { p { text-align: right; } + ul { li { justify-content: flex-end; @@ -317,9 +377,11 @@ $alert-color: #101010; } } } + .grid-btn-wrap { padding-top: 15px; text-align: right; + button { padding: 0 10px; } @@ -331,13 +393,16 @@ $alert-color: #101010; color: $pop-color; font-weight: $pop-normal-weight; padding-bottom: 15px; + } + .grid-direction { display: flex; align-items: center; gap: 5px; flex: 1; } + .direction { width: 22px; height: 22px; @@ -347,17 +412,21 @@ $alert-color: #101010; background-position: center; background-size: 16px 15px; border-radius: 50%; - transition: all 0.15s ease-in-out; + 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; @@ -372,21 +441,26 @@ $alert-color: #101010; font-weight: $pop-bold-weight; } } + .input-move-wrap { display: flex; align-items: center; gap: 5px; + span { color: $pop-color; font-size: $pop-normal-size; } + .input-move { width: 130px; + input { width: 100%; } } } + .direction-move-wrap { flex: none; display: grid; @@ -398,6 +472,7 @@ $alert-color: #101010; .placement-table { table { table-layout: fixed; + tr { th { display: flex; @@ -408,12 +483,14 @@ $alert-color: #101010; padding: 18px 0; border-bottom: 1px solid #424242; } + td { font-size: $pop-normal-size; color: $pop-color; border-bottom: 1px solid #424242; padding-left: 20px; } + &:first-child { td, th { @@ -422,6 +499,7 @@ $alert-color: #101010; } } } + .tooltip { position: relative; display: block; @@ -431,17 +509,20 @@ $alert-color: #101010; background: url(../../public/static/images/canvas/pop_tip.svg) no-repeat center; background-size: cover; } + &.light { padding: 0; - th, - td { + + th, td { color: $alert-color; border-bottom: none; - border-top: 1px solid #efefef; + border-top: 1px solid #EFEFEF; } + th { padding: 14px 0; } + tr { &:first-child { td, @@ -449,6 +530,7 @@ $alert-color: #101010; padding-top: 14px; } } + &:last-child { td, th { @@ -464,20 +546,24 @@ $alert-color: #101010; align-items: center; gap: 10px; } + .placement-option { display: flex; align-items: center; gap: 20px; } + .select-wrap { div { width: 100%; } } + .flex-ment { display: flex; align-items: center; gap: 5px; + span { font-size: $pop-normal-size; color: $pop-color; @@ -494,18 +580,22 @@ $alert-color: #101010; display: flex; align-items: center; margin-bottom: 14px; + &:last-child { margin-bottom: 0; } + .outline-form { // width: 50%; margin-right: 15px; } } + &:last-child { border-bottom: 1px solid #424242; } } + .outline-form { display: flex; align-items: center; @@ -517,6 +607,7 @@ $alert-color: #101010; font-weight: $pop-bold-weight; color: $pop-color; margin-right: 10px; + &.thin { width: auto; font-weight: $pop-normal-weight; @@ -537,6 +628,7 @@ $alert-color: #101010; background-size: 12px 12px; background-position: center; } + &:last-child { margin-right: 0; } @@ -544,24 +636,28 @@ $alert-color: #101010; .cul-wrap { display: flex; + .outline-box { width: 50%; margin-right: 15px; + .outline-form { width: 100%; margin-bottom: 14px; margin-right: 0; + &:last-child { margin-bottom: 0; } } } + .cul-box { display: flex; align-items: center; justify-content: center; width: 50%; - background-color: #3d3d3d; + background-color: #3D3D3D; border-radius: 2px; } } @@ -569,7 +665,7 @@ $alert-color: #101010; // 외벽선 속성 설정 .properties-guide { font-size: $pop-normal-size; - color: #aaa; + color: #AAA; font-weight: $pop-normal-weight; margin-bottom: 14px; } @@ -580,16 +676,19 @@ $alert-color: #101010; 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%; @@ -598,17 +697,21 @@ $alert-color: #101010; color: #fff; font-weight: 700; border-radius: 2px; - transition: all 0.15s ease-in-out; + transition: all .15s ease-in-out; + &.green { background-color: #305941; - border: 1px solid #45cd7d; + border: 1px solid #45CD7D; + &:hover { background-color: #3a6b4e; } } + &.blue { - background-color: #2e5360; - border: 1px solid #3fbae6; + background-color: #2E5360; + border: 1px solid #3FBAE6; + &:hover { background-color: #365f6e; } @@ -624,34 +727,39 @@ $alert-color: #101010; 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; + 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 0.15s ease-in-out; + transition: color .15s ease-in-out; } + .shape-menu-box { &.act, &:hover { .shape-box { - background-color: #008bff; + background-color: #008BFF; } + .shape-title { - color: #008bff; + color: #008BFF; } } } @@ -662,12 +770,14 @@ $alert-color: #101010; 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: 1px solid #3D3D3D; border-radius: 2px; } @@ -681,8 +791,10 @@ $alert-color: #101010; .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; @@ -692,22 +804,26 @@ $alert-color: #101010; 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; + background-color: #3D3D3D; + border: 1px solid #3D3D3D; border-radius: 2px; cursor: pointer; + &.act { - border: 1px solid #ed0004; + border: 1px solid #ED0004; } } + &:last-child { .eaves-keraba-th, .eaves-keraba-td { @@ -716,14 +832,17 @@ $alert-color: #101010; } } } + .guide { font-size: $pop-normal-size; font-weight: $pop-normal-weight; color: $pop-color; margin-bottom: 24px; + &.sm { margin-bottom: 15px; } + span { display: block; } @@ -736,12 +855,14 @@ $alert-color: #101010; 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; @@ -753,6 +874,7 @@ $alert-color: #101010; font-weight: $pop-normal-weight; border: 1px solid #484848; background-color: #323234; + i { display: block; width: 12px; @@ -769,11 +891,14 @@ $alert-color: #101010; align-items: center; gap: 10px; margin-bottom: 10px; + .flex-ment { gap: 10px; + .dec { text-decoration: underline; } + .delete { display: block; width: 15px; @@ -782,6 +907,7 @@ $alert-color: #101010; background-size: cover; } } + &:last-child { margin-bottom: 0; } @@ -792,6 +918,7 @@ $alert-color: #101010; display: flex; align-items: center; gap: 5px; + button { display: flex; align-items: center; @@ -804,7 +931,8 @@ $alert-color: #101010; border: 1px solid #646464; border-radius: 2px; padding: 0 10px; - transition: all 0.15s ease-in-out; + transition: all .15s ease-in-out; + i { height: 15px; display: block; @@ -812,25 +940,30 @@ $alert-color: #101010; background-repeat: no-repeat; background-position: center; background-size: cover; - transition: all 0.15s ease-in-out; + 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); } @@ -852,11 +985,13 @@ $alert-color: #101010; grid-template-rows: repeat(3, 90px); gap: 10px; margin-bottom: 10px; + .shape-menu-box { border-radius: 2px; - background-color: #3d3d3d; + background-color: #3D3D3D; padding: 8px; - transition: all 0.15s ease-in-out; + transition: all .15s ease-in-out; + .shape-box { display: flex; justify-content: center; @@ -867,9 +1002,10 @@ $alert-color: #101010; background-color: #313131; border-radius: 2px; } + &.act, &:hover { - background-color: #008bff; + background-color: #008BFF; } } } @@ -880,32 +1016,37 @@ $alert-color: #101010; justify-content: center; gap: 5px; padding: 5px; - background-color: #3d3d3d; + background-color: #3D3D3D; margin-bottom: 24px; + .library-btn { width: 30px; height: 30px; - border: 1px solid #6c6c6c; + border: 1px solid #6C6C6C; border-radius: 2px; background-color: transparent; background-repeat: no-repeat; background-position: center; - transition: all 0.15s ease-in-out; + transition: all .15s ease-in-out; + &.ico01 { background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 14px 14px; } + &.ico02 { background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 13px 17px; } + &.ico03 { background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 17px 13px; } + &:hover { - border-color: #1083e3; - background-color: #1083e3; + border-color: #1083E3; + background-color: #1083E3; } } } @@ -913,27 +1054,33 @@ $alert-color: #101010; .plane-shape-wrapper { display: flex; gap: 10px; + .plane-box { padding: 10px; border-radius: 2px; - background-color: #3d3d3d; + background-color: #3D3D3D; + .plane-box-tit { font-size: $pop-normal-size; font-weight: 600; color: $pop-color; margin-bottom: 10px; } + &.shape-box { flex: 1; + .shape-box-inner { display: flex; gap: 10px; min-height: 140px; + .shape-img { position: relative; flex: 1; background-color: #fff; border-radius: 2px; + img { position: absolute; top: 50%; @@ -941,18 +1088,21 @@ $alert-color: #101010; transform: translate(-50%, -50%); } } + .shape-data { flex: none; width: 190px; background-color: #313131; border-radius: 2px; padding: 15px; + .eaves-keraba-table { .eaves-keraba-item { .eaves-keraba-th, .eaves-keraba-td { padding-bottom: 10px; } + &:last-child { .eaves-keraba-th, .eaves-keraba-td { @@ -964,11 +1114,13 @@ $alert-color: #101010; } } } + &.direction-box { display: flex; flex-direction: column; flex: none; width: 180px; + .plane-direction-box { flex: 1; display: flex; @@ -980,36 +1132,43 @@ $alert-color: #101010; } } } + .plane-direction { width: 150px; position: relative; height: 120px; + span { position: absolute; font-size: 12px; font-weight: 500; - color: #b1b1b1; + 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; @@ -1020,27 +1179,32 @@ $alert-color: #101010; background-repeat: no-repeat; background-position: center; border-radius: 50%; - transition: all 0.15s ease-in-out; + 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; @@ -1068,6 +1232,7 @@ $alert-color: #101010; align-items: center; justify-content: center; } + .discrimination-tit { font-size: 13px; color: #fff; @@ -1079,11 +1244,13 @@ $alert-color: #101010; 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%; @@ -1097,10 +1264,11 @@ $alert-color: #101010; .display-change-wrap { margin: 24px 0; } + .warning { font-size: $pop-normal-size; font-weight: $pop-normal-weight; - color: #ffafaf; + color: #FFAFAF; } // 각 변 속성 변경 @@ -1114,10 +1282,12 @@ $alert-color: #101010; .drawing-flow-wrap { display: flex; gap: 10px; + .discrimination-box { flex: 1; display: flex; flex-direction: column; + .object-direction-wrap { flex: 1; } @@ -1129,6 +1299,7 @@ $alert-color: #101010; align-items: center; justify-content: center; } + .compas-box-inner { position: relative; width: 200px; @@ -1152,157 +1323,206 @@ $alert-color: #101010; top: 12.5px; left: 50%; font-size: 11px; - color: #8b8b8b; + 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: ''; @@ -1314,11 +1534,13 @@ $alert-color: #101010; height: 5px; background-color: #fff; } + i { color: #fff; } } } + .compas { position: absolute; top: 50%; @@ -1328,6 +1550,7 @@ $alert-color: #101010; height: 148px; border: 4px solid #fff; border-radius: 50%; + .compas-arr { width: 100%; height: 100%; @@ -1337,12 +1560,14 @@ $alert-color: #101010; } } + // 지붕모듈선택 .roof-module-tab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; + .module-tab-bx { flex: 1; height: 34px; @@ -1351,17 +1576,19 @@ $alert-color: #101010; border-radius: 2px; background-color: transparent; font-size: 12px; - color: #aaa; + color: #AAA; text-align: center; cursor: default; - transition: all 0.15s ease-in-out; + transition: all .15s ease-in-out; + &.act { - background-color: #1083e3; - border: 1px solid #1083e3; + background-color: #1083E3; + border: 1px solid #1083E3; color: #fff; font-weight: 500; } } + .tab-arr { display: block; width: 9px; @@ -1370,7 +1597,8 @@ $alert-color: #101010; background-position: center; background-size: cover; background-image: url(../../public/static/images/canvas/module_tab_arr.svg); - transition: all 0.15s ease-in-out; + transition: all .15s ease-in-out; + &.act { background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg); } @@ -1379,11 +1607,14 @@ $alert-color: #101010; .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), @@ -1396,20 +1627,23 @@ $alert-color: #101010; transform: translateX(-50%); width: 1px; height: 6px; - background-color: #8b8b8b; + background-color: #8B8B8B; } } + i { top: 32px; } + &.act { i { - color: #8b8b8b; + color: #8B8B8B; } } } } } + .center-wrap { display: flex; flex-direction: column; @@ -1420,6 +1654,7 @@ $alert-color: #101010; .module-table-flex-wrap { display: flex; gap: 10px; + .outline-form { flex: 1; } @@ -1427,6 +1662,7 @@ $alert-color: #101010; .module-box-tab { display: flex; + .module-btn { flex: 1; border-top: 1px solid #505050; @@ -1437,10 +1673,12 @@ $alert-color: #101010; height: 30px; font-size: 12px; font-weight: 400; - transition: all 0.15s ease-in-out; + transition: all .15s ease-in-out; + &:first-child { border-left: 1px solid #505050; } + &.act { border-color: #fff; background-color: #fff; @@ -1451,32 +1689,39 @@ $alert-color: #101010; .module-table-box { flex: 1; - background-color: #3d3d3d; + 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; + 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; @@ -1484,20 +1729,25 @@ $alert-color: #101010; padding-bottom: 15px; } } + .warning-guide { padding: 20px; + .warning { - color: #ffcaca; + color: #FFCACA; max-height: 55px; overflow-y: auto; padding-right: 30px; + &::-webkit-scrollbar { width: 4px; background-color: transparent; } + &::-webkit-scrollbar-thumb { - background-color: #d9d9d9; + background-color: #D9D9D9; } + &::-webkit-scrollbar-track { background-color: transparent; } @@ -1507,23 +1757,27 @@ $alert-color: #101010; .module-self-table { display: table; - border-top: 1px solid #4d4d4d; + 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; + 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; @@ -1537,28 +1791,35 @@ $alert-color: #101010; display: flex; align-items: center; margin-top: 15px; + button { margin-left: auto; } } + .hexagonal-wrap { .hexagonal-item { padding: 15px 0; - border-bottom: 1px solid #4d4d4d; + 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; } @@ -1574,16 +1835,20 @@ $alert-color: #101010; .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; + background-color: #D9D9D9; } + &::-webkit-scrollbar-track { background-color: transparent; } @@ -1600,8 +1865,9 @@ $alert-color: #101010; gap: 5px; min-height: 60px; padding: 12px; - border: 1px solid rgba(255, 255, 255, 0.2); + border: 1px solid rgba(255, 255, 255, 0.20); } + .circuit-table-tit { color: #fff; font-size: 12px; @@ -1616,13 +1882,16 @@ $alert-color: #101010; max-height: 560px; overflow-y: auto; margin-bottom: 15px; + &::-webkit-scrollbar { width: 4px; background-color: transparent; } + &::-webkit-scrollbar-thumb { - background-color: #d9d9d9; + background-color: #D9D9D9; } + &::-webkit-scrollbar-track { background-color: transparent; } @@ -1632,13 +1901,16 @@ $alert-color: #101010; 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; @@ -1660,6 +1932,7 @@ $alert-color: #101010; gap: 15px 0; margin-bottom: 24px; } + .additional-wrap { padding: 24px 0; border-top: 1px solid #424242; @@ -1670,22 +1943,26 @@ $alert-color: #101010; 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 #ea10ac; - background-color: #16417d; + border: 2px solid #EA10AC; + background-color: #16417D; } + &.white { - border: 2px solid #fff; + border: 2px solid #FFF; background-color: #001027; } } } -} +} \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index c288c8e1..b575113b 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -1,924 +1,792 @@ * { - -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 { - width: 100%; - height: 100%; - font-size: 16px; +html, body{ + width: 100%; + height: 100%; + 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; -} -body:first-of-type caption { - display: none; + line-height: 1.4; } +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; } // 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; -} +.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; -} +.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; - } +.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; + &.deepgray{ + background-color: #2C2C2C; + border: 1px solid #484848; } - } - &.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; + &.gray{ + background-color: #3C3C3C; + border: 1px solid #545454; } - } - &.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; - } + &.dark{ + background-color: #1C1C1C; + border: 1px solid #484848; } - &.white { - background-color: #fff; - border: 1px solid #fff; - color: #101010; - &:hover { - background-color: #fff; - border: 1px solid #fff; - color: #101010; - } + &.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; + } } - &:hover { - font-weight: 400; - background-color: transparent; - border: 1px solid #484848; - color: #fff; + &.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; + } } - } - &.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; + &.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; + } } - } - &: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; + &.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 { - font-weight: 400; + &.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; +.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 .15s ease-in-out; + &.navy{ + background-color: #304961; + &:hover{ + background-color: #233546; + } } - } - &.grey { - background-color: #94a0ad; - &:hover { - background-color: #607f9a; + &.grey{ + background-color: #94A0AD; + &:hover{ + background-color: #607F9A; + } } - } } // 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; - color: #fff; - cursor: pointer; - p { - font-size: 13px; - color: #fff; - height: 100%; - } - .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; - 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; - } - } - &::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; - 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='number'], -input[type='text'] { - &.input-origin { +.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; - background-color: #323234; + border-top-left-radius: 2px; color: #fff; - font-size: 12px; - font-weight: 500; - font-family: 'Pretendard', sans-serif; - padding: 0 10px; - letter-spacing: 0px; - text-align: right; - &::placeholder { - opacity: 1; - font-size: 12px; - letter-spacing: 0px; + cursor: pointer; + p{ + font-size: 13px; + color: #fff; + height: 100%; } - &.block { - width: 100%; + .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; + } } - &:read-only { - color: #aaa; + &::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; } - &.plane { - font-family: 'Noto Sans JP', sans-serif; - border: 1px solid #525252; - background-color: transparent; + &.active{ + .select-item-wrap{ + clip-path: inset(0 0 0 0); + visibility: visible; + } + &:after{ + transform: translateY(-50%) rotate(-180deg); + } } - } - &.input-light { +} + +.select-light{ + position: relative; display: block; width: 100%; height: 30px; - padding: 0 10px; + 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; - border-radius: 2px; - background-color: #fff; - font-family: 'Noto Sans JP', sans-serif; + padding: 0 30px 0 10px; font-size: 13px; - color: #45576f; - font-weight: normal; - transition: border-color 0.17s ease-in-out; - text-align: left; - &:read-only { - background-color: #fafafa; - color: #999999; + 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=number], +input[type=text]{ + &.input-origin{ + display: inline-block; + height: 30px; + line-height: 30px; + border-radius: 2px; + background-color: #323234; + color: #fff; + font-size: 12px; + font-weight: 500; + font-family: 'Pretendard', sans-serif; + padding: 0 10px; + letter-spacing: 0px; + text-align: right; + &::placeholder{ + opacity: 1; + font-size: 12px; + letter-spacing: 0px; + } + &.block{ + width: 100%; + } + &:read-only{ + color: #AAA; + } + &.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; + &:read-only{ + background-color: #FAFAFA; + color: #999999; + } + } +} + + + // check-btn -.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; +.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; } - .title-area { - color: #101010; - font-weight: 600; + .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; + } } - } } // arr-btn -.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; - } +.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; + } } &:hover, - &.act { - background-color: #1083e3; - border: 1px solid #1083e3; + &.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; + } } - } } // radio .d-check-radio, -.d-check-box { - line-height: 1.1; - cursor: pointer; - input[type='checkbox'], - input[type='radio'] { - position: static; - margin-left: 0; +.d-check-box{ + line-height: 1.1; cursor: pointer; - 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; + input[type=checkbox], + input[type=radio]{ + position: static; + margin-left: 0; + cursor: pointer; + opacity: 0; + z-index: 1; + flex: 0 0 auto; } - } - &.no-text { - label { - padding-left: 0; + 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; + } } - } } .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; + 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; + } } - &::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; + &.light{ + label{ + &:before{ + border-color: #D6D6D7; + } + &:after{ + background-color: #697C8F; + } + } } - } - &.light { - label { - &:before { - border-color: #d6d6d7; - } - &:after { - background-color: #697c8f; - } + input[type=radio]:checked + label::after{ + opacity: 1; + visibility: visible; } - } - 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; - } + &.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; +.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; + } } - &::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: transparent; - transition: - border 0.15s ease-in-out, - color 0.15s ease-in-out; + 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); } - &: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; + &.pop{ + label{ + &:before{ + background-color: transparent; + } + } + input[type=checkbox]:checked + label::after{ + border-color: #fff; + } + &.no-text{ + label{ + padding-left: 0; + } + } } - } - 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 { - input[type='checkbox']:checked + label::after { - border-color: #fff; + &.sel{ + input[type=checkbox]:checked + label{ + color: #D7C863; + } + input[type=checkbox]:checked + label::before, + input[type=checkbox]:checked + label::after{ + border-color: #D7C863; + } } - &.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; + } +} \ No newline at end of file diff --git a/src/styles/_submodal.scss b/src/styles/_submodal.scss index aa50dcdd..34d0e9ce 100644 --- a/src/styles/_submodal.scss +++ b/src/styles/_submodal.scss @@ -1,198 +1,199 @@ -.modal-popup { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - overflow-x: hidden; - overflow-y: auto; - background: rgba(0, 0, 0, 0.75); - z-index: 110000; - .modal-dialog { - position: relative; - display: flex; - align-items: center; - min-height: calc(100% - (1.5rem * 2)); - width: 680px; - z-index: 200000; - margin: 1.5rem auto; - pointer-events: none; - &.middle { - width: 800px; - } - &.big { - width: 1000px; - } - .modal-content { - flex: 1; - position: relative; - background-clip: padding-box; - background-color: transparent; - outline: 0 none; - pointer-events: auto; - border-radius: 4px; - .modal-header { +.modal-popup{ + position: fixed; + top: 0; + left: 0; + width:100%; + height:100%; + overflow-x: hidden; + overflow-y: auto; + background:rgba(0,0,0,.75); + z-index:110000; + .modal-dialog { + position: relative; display: flex; align-items: center; - padding: 10px 24px; - background-color: #7992ba; - border-radius: 4px 4px 0px 0px; - // overflow: hidden; - h1.title { - font-size: 13px; - color: $pop-color; - font-weight: 700; + min-height: calc(100% - (1.5rem * 2)); + width: 680px; + z-index:200000; + margin: 1.5rem auto; + pointer-events: none; + &.middle{ + width: 800px; } - .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; + &.big{ + width: 1000px; } - } - .modal-body { - padding: 30px; - background-color: #fff; - border-radius: 0px 0px 4px 4px; - .modal-body-inner { - margin-bottom: 20px; - &.border { - padding-bottom: 20px; - border-bottom: 1px solid #ecf0f4; - } + .modal-content{ + flex:1; + position: relative; + background-clip: padding-box; + background-color: transparent; + outline: 0 none; + pointer-events: auto; + border-radius: 4px; + .modal-header{ + display: flex; + align-items: center; + padding: 10px 24px; + background-color: #7992ba; + border-radius: 4px 4px 0px 0px; + // 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: 30px; + background-color: #fff; + border-radius: 0px 0px 4px 4px; + .modal-body-inner{ + margin-bottom: 20px; + &.border{ + padding-bottom: 20px; + border-bottom: 1px solid #ECF0F4; + } + } + .footer-btn-wrap{ + display: flex; + align-items: center; + justify-content: flex-end; + } + } } - .footer-btn-wrap { - display: flex; - align-items: center; - justify-content: flex-end; - } - } } - } } // modal-contents // 비밀번호 변경 -.change-password-guide { - span { - display: block; - margin-bottom: 5px; - font-size: 13px; - font-weight: 400; - color: #101010; - &:last-child { - margin-bottom: 0; +.change-password-guide{ + + span{ + display: block; + margin-bottom: 5px; + font-size: 13px; + font-weight: 400; + color: #101010; + &:last-child{ + margin-bottom: 0; + } } - } } -.change-password-box { - padding: 30px; - border-radius: 4px; - background: #f4f4f7; - margin-bottom: 20px; - .change-password-tit { - .tit-b { - font-size: 13px; - font-weight: 500; - color: #344356; +.change-password-box{ + padding: 30px; + border-radius: 4px; + background: #F4F4F7; + margin-bottom: 20px; + .change-password-tit{ + .tit-b{ + font-size: 13px; + font-weight: 500; + color: #344356; + } + .tit-s{ + font-size: 12px; + font-weight: 400; + color: #898989; + } } - .tit-s { - font-size: 12px; - font-weight: 400; - color: #898989; + .change-password-input{ + width: 100%; + .change-password{ + width: 100%; + height: 45px; + border-radius: 4px; + border: 1px solid #E9E9E9; + background-color: #fff; + padding: 0 10px; + font-size: 12px; + color: #364864; + font-family: 'Noto Sans JP', sans-serif; + &::placeholder{ + font-size: 12px; + } + } } - } - .change-password-input { - width: 100%; - .change-password { - width: 100%; - height: 45px; - border-radius: 4px; - border: 1px solid #e9e9e9; - background-color: #fff; - padding: 0 10px; - font-size: 12px; - color: #364864; - font-family: 'Noto Sans JP', sans-serif; - &::placeholder { - font-size: 12px; - } + .table-item-th{ + width: 145px; } - } - .table-item-th { - width: 145px; - } } -.form-table { - display: table; - table-layout: auto; - width: 100%; - .table-item { - display: table-row; - .table-item-th, - .table-item-td { - display: table-cell; - vertical-align: middle; - padding-bottom: 10px; +.form-table{ + display: table; + table-layout: auto; + width: 100%; + .table-item{ + display: table-row; + .table-item-th, + .table-item-td{ + display: table-cell; + vertical-align: middle; + padding-bottom: 10px; + } + &:last-child{ + .table-item-th, + .table-item-td{ + padding-bottom: 0; + } + } + .table-item-td{ + padding-left: 10px; + } } - &:last-child { - .table-item-th, - .table-item-td { - padding-bottom: 0; - } - } - .table-item-td { - padding-left: 10px; - } - } } // 주소찾기 팝업 -.address-input-wrap { - position: relative; - height: 45px; - padding: 0 40px 0 15px; - border-radius: 4px; - border: 1px solid #e9e9e9; - background: #fff; - margin-bottom: 20px; - input { - width: 100%; - height: 100%; - font-size: 13px; - font-weight: 400; - font-family: 'Noto Sans JP' sans-serif; - color: #868686; - &::placeholder { - color: #aeaeae; - font-size: 13px; - font-weight: 400; +.address-input-wrap{ + position: relative; + height: 45px; + padding: 0 40px 0 15px; + border-radius: 4px; + border: 1px solid #E9E9E9; + background: #FFF; + margin-bottom: 20px; + input{ + width: 100%; + height: 100%; + font-size: 13px; + font-weight: 400; + font-family: "Noto Sans JP" sans-serif; + color: #868686; + &::placeholder{ + color: #AEAEAE; + font-size: 13px; + font-weight: 400; + } + } + .search-btn{ + position: absolute; + top: 0; + right: 15px; + width: 21px; + height: 100%; + background: url(../../public/static/images/sub/address_search.svg)no-repeat center; + background-size: 21px 21px; } - } - .search-btn { - position: absolute; - top: 0; - right: 15px; - width: 21px; - height: 100%; - background: url(../../public/static/images/sub/address_search.svg) no-repeat center; - background-size: 21px 21px; - } } // 설계의뢰 불러오기 -.design-request-table { - margin-bottom: 20px; -} -.design-request-grid { - .design-request-grid-tit { - font-size: 13px; - font-weight: 600; - color: #101010; - margin-bottom: 15px; - } +.design-request-table{ + margin-bottom: 20px; } +.design-request-grid{ + .design-request-grid-tit{ + font-size: 13px; + font-weight: 600; + color: #101010; + margin-bottom: 15px; + } +} \ No newline at end of file diff --git a/src/styles/_table.scss b/src/styles/_table.scss index e6b46a7c..5aa068d0 100644 --- a/src/styles/_table.scss +++ b/src/styles/_table.scss @@ -1,281 +1,282 @@ -@mixin flexbox() { - display: flex; - align-items: center; +@mixin flexbox(){ + display: flex; + align-items: center; } -table { - .overflow-lab { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - .al-l { - text-align: left !important; - } -} - -.flx-box { - @include flexbox; -} - -.common-table { - table { - table-layout: fixed; - border: 1px solid #ecf0f4; - border-radius: 3px; - border-collapse: collapse; - tbody { - th { - font-size: 13px; - font-weight: 500; - color: #344356; - padding: 14px 12px; - border: 1px solid #ecf0f4; - background-color: #f7f9fa; - vertical-align: middle; - } - td { - padding: 9px; - border: 1px solid #ecf0f4; - font-size: 13px; - font-weight: 400; - color: #45576f; - vertical-align: middle; - .radio-wrap { - flex: none; - @include flexbox; - } - .form-flex-wrap { - @include flexbox; - } - .date-picker-wrap { - width: 100%; - @include flexbox; - span { - margin: 0 4px; - } - } - } - } - } - &.bt-able { - margin-bottom: 30px; - } -} - -.infomation-table { - table { - border-top: 1px solid #dee3ea; - border-bottom: 1px solid #dee3ea; - border-collapse: collapse; - tbody { - tr { - th { - font-size: 13px; - color: #344356; - font-weight: 500; - padding: 18px 0; - border-bottom: 1px solid #f4f4f7; - .title { - margin-right: 8px; - } - } - td { - padding: 0 0 0 15px; - border-bottom: 1px solid #f4f4f7; - - .guide { - font-size: 13px; - color: #697c8f; - font-weight: normal; - margin-left: 15px; - margin-bottom: 0; - } - span { - font-size: 13px; - color: #697c8f; - font-weight: normal; - } - } - &:last-child { - th, - td { - border-bottom: none; - } - } - } - } - } - .tooltips { - display: block; - width: 14px; - height: 14px; - display: inline-block; - background: url(../../public/static/images/sub/tooltips.svg) no-repeat center; - background-size: cover; - cursor: pointer; - } -} - -.module-table { - table { - table-layout: fixed; - border-collapse: collapse; - thead { - display: table; - table-layout: fixed; - width: 100%; - th { - padding: 13px 0; - font-size: 13px; - color: #344356; - font-weight: 500; - border-bottom: 2px solid #e0e5eb; - text-align: center; - } - } - tbody { - display: block; - overflow-y: auto; - tr { - display: table; - table-layout: fixed; - width: 100%; - border: 1px solid #ecf0f4; - td { - padding: 10px 0px; - font-size: 13px; - color: #45576f; - font-weight: 400; - text-align: center; - } - } - &::-webkit-scrollbar { - width: 4px; - background-color: transparent; - } - &::-webkit-scrollbar-thumb { - background-color: #c1ccd7; - } - &::-webkit-scrollbar-track { - background-color: transparent; - } - } - &.small { - tbody { - height: 120px; - } - } - &.big { - td, - th { - &:nth-child(2) { - width: 121px; - } - } - tbody { - height: 160px; - td { - padding: 10px 20px; - } - } - } - } -} - -.roof-module-table { - table { - border-collapse: collapse; - thead { - th { - height: 40px; - padding: 0px 10px; - font-size: 12px; - line-height: 1.1; - color: #fff; - font-weight: 500; - border: 1px solid #505050; - vertical-align: middle; - background-color: rgba(255, 255, 255, 0.05); - text-align: center; - word-break: keep-all; - .d-check-box { - opacity: 0.5; - } - } - } - tbody { - tr { - cursor: pointer; - &.on { - background-color: #272727; - } - } - td { - height: 40px; - vertical-align: middle; - font-size: 12px; - color: #fff; - font-weight: 400; - border: 1px solid #505050; - padding: 0 10px; +table{ + .overflow-lab{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - .warning { - color: PCSオプションマスター; - } - .color-wrap { - display: flex; - align-items: center; - .color-box { - width: 14px; - height: 14px; - margin-right: 8px; - } - .name { - width: 0; - flex: 1; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - } - } } - } - &.overflow-y { - table { - table-layout: fixed; - border-collapse: collapse; - thead { - display: table; - table-layout: fixed; - width: 100%; - border-collapse: collapse; - } - tbody { - display: block; - max-height: 81px; - overflow-y: auto; - tr { - display: table; - table-layout: fixed; - width: 100%; - border-collapse: collapse; - margin-top: -1px; - } - &::-webkit-scrollbar { - width: 2px; - background-color: rgba(255, 255, 255, 0.05); - } - &::-webkit-scrollbar-thumb { - background-color: #c1ccd7; - } - &::-webkit-scrollbar-track { - background-color: rgba(255, 255, 255, 0.05); - } - } + .al-l{ + text-align: left !important; } - } } + +.flx-box{ + @include flexbox; +} + +.common-table{ + table{ + table-layout: fixed; + border: 1px solid #ECF0F4; + border-radius: 3px; + border-collapse:collapse; + tbody{ + th{ + font-size: 13px; + font-weight: 500; + color: #344356; + padding: 14px 12px; + border: 1px solid #ECF0F4 ; + background-color: #F7F9FA; + vertical-align: middle; + } + td{ + padding: 9px; + border: 1px solid #ECF0F4 ; + font-size: 13px; + font-weight: 400; + color: #45576F; + vertical-align: middle; + .radio-wrap{ + flex: none; + @include flexbox; + } + .form-flex-wrap{ + @include flexbox; + } + .date-picker-wrap{ + width: 100%; + @include flexbox; + span{ + margin: 0 4px; + } + } + } + } + } + &.bt-able{ + margin-bottom: 30px; + } +} + +.infomation-table{ + table{ + border-top: 1px solid #DEE3EA; + border-bottom: 1px solid #DEE3EA; + border-collapse:collapse; + tbody{ + tr{ + th{ + font-size: 13px; + color: #344356; + font-weight: 500; + padding: 18px 0; + border-bottom: 1px solid #F4F4F7; + .title{ + margin-right: 8px; + } + } + td{ + padding: 0 0 0 15px; + border-bottom: 1px solid #F4F4F7; + + .guide{ + font-size: 13px; + color: #697C8F; + font-weight: normal; + margin-left: 15px; + margin-bottom: 0; + } + span{ + font-size: 13px; + color: #697C8F; + font-weight: normal; + } + } + &:last-child{ + th,td{border-bottom: none;} + } + } + } + + } + .tooltips{ + position: relative; + display: block; + width: 14px; + height: 14px; + display: inline-block; + background: url(../../public/static/images/sub/tooltips.svg)no-repeat center; + background-size: cover; + cursor: pointer; + span{ + position: absolute; + white-space: nowrap; + } + } +} + +.module-table{ + table{ + table-layout: fixed; + border-collapse: collapse; + thead{ + display: table; + table-layout: fixed; + width: 100%; + th{ + padding: 13px 0; + font-size: 13px; + color: #344356; + font-weight: 500; + border-bottom: 2px solid #E0E5EB; + text-align: center; + } + } + tbody{ + display: block; + overflow-y: auto; + tr{ + display: table; + table-layout: fixed; + width: 100%; + border: 1px solid #ECF0F4; + td{ + padding: 10px 0px; + font-size: 13px; + color: #45576F; + font-weight: 400; + text-align: center; + } + } + &::-webkit-scrollbar { + width: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #C1CCD7; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } + } + &.small{ + tbody{height: 120px;} + } + &.big{ + td, + th{ + &:nth-child(2){ + width: 121px; + } + } + tbody{ + height: 160px; + td{ + padding: 10px 20px; + } + } + } + } +} + +.roof-module-table{ + table{ + border-collapse: collapse; + thead{ + th{ + height: 40px; + padding: 0px 10px; + font-size: 12px; + line-height: 1.1; + color: #fff; + font-weight: 500; + border: 1px solid #505050; + vertical-align: middle; + background-color: rgba(255, 255, 255, 0.05); + text-align: center; + word-break: keep-all; + .d-check-box{ + opacity: 0.5; + } + } + } + tbody{ + tr{ + cursor: pointer; + &.on{ + background-color: #272727; + } + } + td{ + height: 40px; + vertical-align: middle; + font-size: 12px; + color: #fff; + font-weight: 400; + border: 1px solid #505050; + padding: 0 10px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + .warning{ + color: PCSオプションマスター; + } + .color-wrap{ + display: flex; + align-items: center; + .color-box{ + width: 14px; + height: 14px; + margin-right: 8px; + } + .name{ + width: 0; + flex: 1; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + } + } + } + } + &.overflow-y{ + table{ + table-layout: fixed; + border-collapse: collapse; + thead{ + display: table; + table-layout: fixed; + width: 100%; + border-collapse: collapse; + } + tbody{ + display: block; + max-height: 81px; + overflow-y: auto; + tr{ + display: table; + table-layout: fixed; + width: 100%; + border-collapse: collapse; + margin-top: -1px; + } + &::-webkit-scrollbar { + width: 2px; + background-color: rgba(255, 255, 255, 0.05); + } + &::-webkit-scrollbar-thumb { + background-color: #C1CCD7; + } + &::-webkit-scrollbar-track { + background-color: rgba(255, 255, 255, 0.05); + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/contents.scss b/src/styles/contents.scss index 08c322e9..613c0644 100644 --- a/src/styles/contents.scss +++ b/src/styles/contents.scss @@ -2,4 +2,4 @@ @import '_modal.scss'; @import '_submodal.scss'; @import '_table.scss'; -@import '_canvasside.scss'; +@import '_canvasside.scss'; \ No newline at end of file diff --git a/src/styles/style.scss b/src/styles/style.scss index b3b49ed9..1841ebb9 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -1,2 +1 @@ -@import '_main.scss'; -@import '_contents'; \ No newline at end of file +@import '_main.scss'; \ No newline at end of file