From 63cb5abfddb27ef1eccc3c15d08ffae84d40eb14 Mon Sep 17 00:00:00 2001 From: minsik Date: Fri, 11 Oct 2024 15:10:58 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../images/canvas/additional-edit01.svg | 115 ++++++++++ .../images/canvas/additional-edit02.svg | 115 ++++++++++ .../images/canvas/additional_bundle-del01.svg | 106 ++++++++++ .../images/canvas/additional_bundle-del02.svg | 106 ++++++++++ .../images/canvas/additional_bundle-del03.svg | 115 ++++++++++ .../images/canvas/additional_bundle-del04.svg | 97 +++++++++ .../canvas/additional_bundle-edit01.svg | 124 +++++++++++ .../canvas/additional_bundle-edit02.svg | 124 +++++++++++ .../static/images/canvas/additional_del01.svg | 103 +++++++++ .../static/images/canvas/additional_del02.svg | 103 +++++++++ .../static/images/canvas/additional_del03.svg | 112 ++++++++++ .../static/images/canvas/additional_del04.svg | 94 +++++++++ public/static/images/main/login_email.svg | 10 + public/static/images/sub/address_search.svg | 11 + public/static/images/sub/information_help.svg | 4 + src/styles/_contents.scss | 60 +++++- src/styles/_grid-detail.scss | 3 + src/styles/_main.scss | 127 +++++++++-- src/styles/_modal.scss | 141 +++++++++++++ src/styles/_reset.scss | 66 +++++- src/styles/_submodal.scss | 199 ++++++++++++++++++ src/styles/_table.scss | 85 +++++++- src/styles/contents.scss | 1 + src/styles/style.scss | 3 +- 24 files changed, 1996 insertions(+), 28 deletions(-) create mode 100644 public/static/images/canvas/additional-edit01.svg create mode 100644 public/static/images/canvas/additional-edit02.svg create mode 100644 public/static/images/canvas/additional_bundle-del01.svg create mode 100644 public/static/images/canvas/additional_bundle-del02.svg create mode 100644 public/static/images/canvas/additional_bundle-del03.svg create mode 100644 public/static/images/canvas/additional_bundle-del04.svg create mode 100644 public/static/images/canvas/additional_bundle-edit01.svg create mode 100644 public/static/images/canvas/additional_bundle-edit02.svg create mode 100644 public/static/images/canvas/additional_del01.svg create mode 100644 public/static/images/canvas/additional_del02.svg create mode 100644 public/static/images/canvas/additional_del03.svg create mode 100644 public/static/images/canvas/additional_del04.svg create mode 100644 public/static/images/main/login_email.svg create mode 100644 public/static/images/sub/address_search.svg create mode 100644 public/static/images/sub/information_help.svg create mode 100644 src/styles/_submodal.scss 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..5d3a03cd --- /dev/null +++ b/public/static/images/canvas/additional-edit02.svg @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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..29ad58c0 --- /dev/null +++ b/public/static/images/canvas/additional_bundle-del01.svg @@ -0,0 +1,106 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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..082cae56 --- /dev/null +++ b/public/static/images/canvas/additional_bundle-del03.svg @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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..38c3846c --- /dev/null +++ b/public/static/images/canvas/additional_bundle-edit01.svg @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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..8b2c9f7b --- /dev/null +++ b/public/static/images/canvas/additional_bundle-edit02.svg @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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..575dae2b --- /dev/null +++ b/public/static/images/canvas/additional_del02.svg @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/additional_del03.svg b/public/static/images/canvas/additional_del03.svg new file mode 100644 index 00000000..2d071afd --- /dev/null +++ b/public/static/images/canvas/additional_del03.svg @@ -0,0 +1,112 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/additional_del04.svg b/public/static/images/canvas/additional_del04.svg new file mode 100644 index 00000000..b5dc6431 --- /dev/null +++ b/public/static/images/canvas/additional_del04.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/main/login_email.svg b/public/static/images/main/login_email.svg new file mode 100644 index 00000000..1ea1a274 --- /dev/null +++ b/public/static/images/main/login_email.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/static/images/sub/address_search.svg b/public/static/images/sub/address_search.svg new file mode 100644 index 00000000..4c0e2d1e --- /dev/null +++ b/public/static/images/sub/address_search.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/static/images/sub/information_help.svg b/public/static/images/sub/information_help.svg new file mode 100644 index 00000000..9eb16941 --- /dev/null +++ b/public/static/images/sub/information_help.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 7e087a87..271ebc20 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -388,9 +388,10 @@ canvas{ position: absolute; top: 0; - left: 0; - width: 100%; - height: 100%; + left: 50%; + transform: translateX(-50%); + width: 1600px; + height: 1000px; } } @@ -595,17 +596,27 @@ .important{ color: #f00; } - .sub-table-footer{ + .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-box-wrap{ display: flex; align-items: center; @@ -850,3 +861,44 @@ } } +// 물건상세 +.information-help-wrap{ + display: flex; + padding: 24px; + background-color: #F4F4F4; + border-radius: 4px; + margin-bottom: 15px; + .information-help-tit-wrap{ + position: relative; + display: flex; + align-items: center; + padding-right: 40px; + border-right: 1px solid #E0E0E3; + .help-tit-icon{ + width: 40px; + height: 40px; + border-radius: 50%; + margin-right: 10px; + background: #fff url(../../public/static/images/sub/information_help.svg)no-repeat center; + background-size: 20px 20px; + } + .help-tit{ + font-size: 13px; + font-weight: 600; + color: #45576F; + } + } + .information-help-guide{ + padding-left: 40px; + span{ + display: block; + font-size: 12px; + font-weight: 400; + color: #45576F; + margin-bottom: 7px; + &:last-child{ + margin-bottom: 0; + } + } + } +} \ 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 334a0485..37170a8b 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -394,6 +394,9 @@ font-weight: 600; margin-bottom: 5px; } + &.pw-reset{ + font-size: 13px; + } } .login-input-wrap{ margin-top: 30px; @@ -412,8 +415,10 @@ background-color: transparent; font-size: 13px; font-weight: 400; - color: #D1D7E0; + color: #6c819c; &::placeholder{ + font-size: 13px; + font-weight: 400; color: #D1D7E0; } } @@ -442,6 +447,17 @@ 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{ @@ -456,27 +472,35 @@ } } } + .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; - .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; - } - } + } + .pwreset-btn-box{ + display: flex; } .reset-password{ width: 100%; text-align: center; - a{ + button{ position: relative; font-size: 13px; color: #364864; @@ -554,4 +578,75 @@ 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{ + 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; + } + } + +} + +// 회원가입 완료 +.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-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 b7bb20ec..d70732b8 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -1673,6 +1673,7 @@ $alert-color: #101010; height: 30px; font-size: 12px; font-weight: 400; + transition: all .15s ease-in-out; &:first-child { border-left: 1px solid #505050; @@ -1824,4 +1825,144 @@ $alert-color: #101010; } } } +} + +// 회로 및 가대설정 +.circuit-check-inner { + padding: 5px 0; +} + +.x-scroll-table { + overflow-x: auto; + padding-bottom: 5px; + + .roof-module-table { + min-width: 1200px; + } + + &::-webkit-scrollbar { + height: 4px; + background-color: transparent; + } + + &::-webkit-scrollbar-thumb { + background-color: #D9D9D9; + } + + &::-webkit-scrollbar-track { + background-color: transparent; + } +} + +.circuit-right-wrap { + display: flex; + justify-content: flex-end; +} + +.circuit-data-form { + display: flex; + flex-direction: column; + gap: 5px; + min-height: 60px; + padding: 12px; + border: 1px solid rgba(255, 255, 255, 0.20); +} + +.circuit-table-tit { + color: #fff; + font-size: 12px; + font-weight: 600; + padding: 11px 10px; + background-color: #474747; + border: 1px solid #505050; + border-bottom: none; +} + +.circuit-overflow { + max-height: 560px; + overflow-y: auto; + margin-bottom: 15px; + + &::-webkit-scrollbar { + width: 4px; + background-color: transparent; + } + + &::-webkit-scrollbar-thumb { + background-color: #D9D9D9; + } + + &::-webkit-scrollbar-track { + background-color: transparent; + } +} + +.circuit-table-flx-wrap { + display: flex; + gap: 10px; + margin-bottom: 10px; + + .circuit-table-flx-box { + flex: 1; + display: flex; + flex-direction: column; + + .bottom-wrap { + margin-top: auto; + } + + .roof-module-table { + table { + table-layout: fixed; + } + } + } +} + +.circuit-count-input { + display: flex; + align-items: center; + gap: 10px; +} + +// 모듈부가기능 +.additional-radio-wrap { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px 0; + margin-bottom: 24px; +} + +.additional-wrap { + padding: 24px 0; + border-top: 1px solid #424242; +} + +.additional-color-wrap { + display: flex; + align-items: center; + padding: 5px 0; + gap: 15px; + + .additional-color-box { + display: flex; + align-items: center; + gap: 8px; + + .additional-color { + display: block; + width: 16px; + height: 16px; + + &.pink { + border: 2px solid #EA10AC; + background-color: #16417D; + } + + &.white { + 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 7804b800..70c05a9e 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -215,6 +215,53 @@ button{ font-weight: 500; } } + &.roof{ + height: 30px; + padding: 0 10px; + line-height: 28px; + font-family: 'Noto Sans JP', sans-serif; + background-color: transparent; + border: 1px solid #484848; + color: #fff; + &.blue{ + background-color: #414E6C; + border: 1px solid #414E6C; + &:hover{ + background-color: #414E6C; + border: 1px solid #414E6C; + } + } + &.white{ + background-color: #fff; + border: 1px solid #fff; + color: #101010; + &:hover{ + background-color: #fff; + border: 1px solid #fff; + color: #101010; + } + } + &:hover{ + font-weight: 400; + background-color: transparent; + border: 1px solid #484848; + color: #fff; + } + } + &.self{ + height: 30px; + padding: 0 10px; + line-height: 28px; + font-family: 'Noto Sans JP', sans-serif; + background-color: transparent; + border: 1px solid #676767; + color: #AAAAAA; + &:hover{ + background-color: #272727; + border-color: #676767; + font-weight: 400; + } + } &:hover, &.act{ background-color: #1083E3; @@ -242,7 +289,7 @@ button{ .btn-origin{ display: inline-block; height: 30px; - padding: 0 14px; + padding: 0 10px; border-radius: 2px; background-color: #101010; color: #fff; @@ -252,7 +299,7 @@ button{ &.navy{ background-color: #304961; &:hover{ - background-color: #1083E3; + background-color: #233546; } } &.grey{ @@ -653,6 +700,7 @@ input[type=text]{ // check-box .d-check-box{ label{ + &.red{color: #FFCACA;} &::before{ cursor: pointer; content: ""; @@ -698,6 +746,20 @@ input[type=text]{ input[type=checkbox]:checked + label::after{ border-color: #fff; } + &.no-text{ + label{ + padding-left: 0; + } + } + } + &.sel{ + input[type=checkbox]:checked + label{ + color: #D7C863; + } + input[type=checkbox]:checked + label::before, + input[type=checkbox]:checked + label::after{ + border-color: #D7C863; + } } } diff --git a/src/styles/_submodal.scss b/src/styles/_submodal.scss new file mode 100644 index 00000000..34d0e9ce --- /dev/null +++ b/src/styles/_submodal.scss @@ -0,0 +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,.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{ + 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; + } + } + } + } +} + +// 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-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; + } + } + .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; + } +} +.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; + } + } +} + +// 주소찾기 팝업 +.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; + } +} + +// 설계의뢰 불러오기 +.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 a87bfc5b..5aa068d0 100644 --- a/src/styles/_table.scss +++ b/src/styles/_table.scss @@ -14,6 +14,10 @@ table{ } } +.flx-box{ + @include flexbox; +} + .common-table{ table{ table-layout: fixed; @@ -85,6 +89,7 @@ table{ color: #697C8F; font-weight: normal; margin-left: 15px; + margin-bottom: 0; } span{ font-size: 13px; @@ -97,11 +102,10 @@ table{ } } } - .flx-box{ - @include flexbox; - } + } .tooltips{ + position: relative; display: block; width: 14px; height: 14px; @@ -109,6 +113,10 @@ table{ background: url(../../public/static/images/sub/tooltips.svg)no-repeat center; background-size: cover; cursor: pointer; + span{ + position: absolute; + white-space: nowrap; + } } } @@ -182,8 +190,9 @@ table{ thead{ th{ height: 40px; - padding: 0 10px; + padding: 0px 10px; font-size: 12px; + line-height: 1.1; color: #fff; font-weight: 500; border: 1px solid #505050; @@ -191,14 +200,82 @@ table{ 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); + } } } } diff --git a/src/styles/contents.scss b/src/styles/contents.scss index 38e7ff83..613c0644 100644 --- a/src/styles/contents.scss +++ b/src/styles/contents.scss @@ -1,4 +1,5 @@ @import '_contents.scss'; @import '_modal.scss'; +@import '_submodal.scss'; @import '_table.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