diff --git a/public/static/images/canvas/grid_option_arr.svg b/public/static/images/canvas/grid_option_arr.svg new file mode 100644 index 00000000..c2c6cbbd --- /dev/null +++ b/public/static/images/canvas/grid_option_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/common/Logo.svg b/public/static/images/common/Logo.svg index a72d0b4e..fa04f4d3 100644 --- a/public/static/images/common/Logo.svg +++ b/public/static/images/common/Logo.svg @@ -1,17 +1,17 @@ - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + diff --git a/public/static/images/common/datepicker.svg b/public/static/images/common/datepicker.svg new file mode 100644 index 00000000..e892f202 --- /dev/null +++ b/public/static/images/common/datepicker.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/static/images/common/select_light_arr.svg b/public/static/images/common/select_light_arr.svg new file mode 100644 index 00000000..97afb284 --- /dev/null +++ b/public/static/images/common/select_light_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/main/clock.svg b/public/static/images/main/clock.svg new file mode 100644 index 00000000..3d005f59 --- /dev/null +++ b/public/static/images/main/clock.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/main/download.svg b/public/static/images/main/download.svg new file mode 100644 index 00000000..42d1d127 --- /dev/null +++ b/public/static/images/main/download.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/main/drawing_icon.svg b/public/static/images/main/drawing_icon.svg new file mode 100644 index 00000000..0e66181f --- /dev/null +++ b/public/static/images/main/drawing_icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/static/images/main/home_icon.svg b/public/static/images/main/home_icon.svg new file mode 100644 index 00000000..107bc4f5 --- /dev/null +++ b/public/static/images/main/home_icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/main/id_delete.svg b/public/static/images/main/id_delete.svg new file mode 100644 index 00000000..3e5d6119 --- /dev/null +++ b/public/static/images/main/id_delete.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/static/images/main/id_icon.svg b/public/static/images/main/id_icon.svg new file mode 100644 index 00000000..a84b6172 --- /dev/null +++ b/public/static/images/main/id_icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/static/images/main/loaction_arr.svg b/public/static/images/main/loaction_arr.svg new file mode 100644 index 00000000..590932c8 --- /dev/null +++ b/public/static/images/main/loaction_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/main/login-arr.svg b/public/static/images/main/login-arr.svg new file mode 100644 index 00000000..7de03bcf --- /dev/null +++ b/public/static/images/main/login-arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/main/login-logo.svg b/public/static/images/main/login-logo.svg new file mode 100644 index 00000000..eb5d29f4 --- /dev/null +++ b/public/static/images/main/login-logo.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/main/login_bg.png b/public/static/images/main/login_bg.png new file mode 100644 index 00000000..e78e68d7 Binary files /dev/null and b/public/static/images/main/login_bg.png differ diff --git a/public/static/images/main/login_id.svg b/public/static/images/main/login_id.svg new file mode 100644 index 00000000..74af51d6 --- /dev/null +++ b/public/static/images/main/login_id.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/static/images/main/login_password.svg b/public/static/images/main/login_password.svg new file mode 100644 index 00000000..ac4757ac --- /dev/null +++ b/public/static/images/main/login_password.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/static/images/main/mail.svg b/public/static/images/main/mail.svg new file mode 100644 index 00000000..c55567f4 --- /dev/null +++ b/public/static/images/main/mail.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/main/main_search.svg b/public/static/images/main/main_search.svg new file mode 100644 index 00000000..25f56b42 --- /dev/null +++ b/public/static/images/main/main_search.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/static/images/main/more_btn.svg b/public/static/images/main/more_btn.svg new file mode 100644 index 00000000..5102903f --- /dev/null +++ b/public/static/images/main/more_btn.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/images/main/password_hidden.svg b/public/static/images/main/password_hidden.svg new file mode 100644 index 00000000..28aeac74 --- /dev/null +++ b/public/static/images/main/password_hidden.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/static/images/main/password_visible.svg b/public/static/images/main/password_visible.svg new file mode 100644 index 00000000..dcbc2a99 --- /dev/null +++ b/public/static/images/main/password_visible.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/static/images/main/product_ico01.svg b/public/static/images/main/product_ico01.svg new file mode 100644 index 00000000..c3a25714 --- /dev/null +++ b/public/static/images/main/product_ico01.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/static/images/main/product_ico02.svg b/public/static/images/main/product_ico02.svg new file mode 100644 index 00000000..7391dbdb --- /dev/null +++ b/public/static/images/main/product_ico02.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/main/product_ico03.svg b/public/static/images/main/product_ico03.svg new file mode 100644 index 00000000..d2ca10e1 --- /dev/null +++ b/public/static/images/main/product_ico03.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/static/images/main/product_ico04.svg b/public/static/images/main/product_ico04.svg new file mode 100644 index 00000000..da17d7a1 --- /dev/null +++ b/public/static/images/main/product_ico04.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/main/product_ico05.svg b/public/static/images/main/product_ico05.svg new file mode 100644 index 00000000..26b0e3d6 --- /dev/null +++ b/public/static/images/main/product_ico05.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/static/images/main/store-arr.svg b/public/static/images/main/store-arr.svg new file mode 100644 index 00000000..96487334 --- /dev/null +++ b/public/static/images/main/store-arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/main/user.svg b/public/static/images/main/user.svg new file mode 100644 index 00000000..a421788a --- /dev/null +++ b/public/static/images/main/user.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/static/images/sub/copy_grid_ico.svg b/public/static/images/sub/copy_grid_ico.svg new file mode 100644 index 00000000..68b34dca --- /dev/null +++ b/public/static/images/sub/copy_grid_ico.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/sub/copy_ico.svg b/public/static/images/sub/copy_ico.svg new file mode 100644 index 00000000..f259e2a0 --- /dev/null +++ b/public/static/images/sub/copy_ico.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/sub/file_delete.svg b/public/static/images/sub/file_delete.svg new file mode 100644 index 00000000..721bcc02 --- /dev/null +++ b/public/static/images/sub/file_delete.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/images/sub/pagination_first.svg b/public/static/images/sub/pagination_first.svg new file mode 100644 index 00000000..61073b50 --- /dev/null +++ b/public/static/images/sub/pagination_first.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/sub/pagination_prev.svg b/public/static/images/sub/pagination_prev.svg new file mode 100644 index 00000000..e162ae42 --- /dev/null +++ b/public/static/images/sub/pagination_prev.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/sub/tooltips.svg b/public/static/images/sub/tooltips.svg new file mode 100644 index 00000000..d4634f25 --- /dev/null +++ b/public/static/images/sub/tooltips.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 4513b133..531eb074 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -3,7 +3,6 @@ height: calc(100vh - 47px); display: flex; flex-direction: column; - background-color: #fff; .canvas-content { flex: 1 1 auto; @@ -12,6 +11,14 @@ height: 100%; } } + + &.sub-wrap { + overflow: hidden; + + .canvas-content { + height: calc(100% - 47px); + } + } } // CanvasMenu @@ -185,8 +192,8 @@ button { .ico { display: block; - width: 14px; - height: 14px; + width: 15px; + height: 15px; background-repeat: no-repeat; background-position: center; background-size: contain; @@ -207,6 +214,17 @@ background-image: url(../../public/static/images/canvas/ico-flx04.svg); } } + + .name { + font-size: 12px; + color: #fff; + } + } + + &.form06 { + .name { + font-size: 13px; + } } } @@ -485,6 +503,7 @@ .canvas-frame { position: relative; height: calc(100% - 36.5px); + background-color: #fff; canvas { position: absolute; @@ -493,4 +512,383 @@ 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; + 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; + } + } + } + + &.estimate { + display: flex; + flex-direction: column; + height: calc(100% - 36.5px); + overflow-y: auto; + padding-top: 0; + + .sub-content-inner { + flex: 1; + } + } +} + +.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; + } + + .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-table-footer { + display: flex; + align-items: center; + justify-content: center; + margin-top: 20px; + } + + .pagination-wrap { + margin-top: 24px; + } +} + +.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; + + .estimate-box { + flex: 1 1 auto; + display: flex; + align-items: center; + + &:last-child { + flex: none; + } + + .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; + } + } +} + +// 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; + } + } + + .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; + } + } + } } \ No newline at end of file diff --git a/src/styles/_main.scss b/src/styles/_main.scss index e69de29b..fc00feb6 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -0,0 +1,684 @@ +// 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; +} + +// main-wrap +.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 { + 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; + } + } + + .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: #D1D7E0; + + &::placeholder { + 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; + } + } + + &.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-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; + } + } + } + + .reset-password { + width: 100%; + text-align: center; + + a { + 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; + } +} \ No newline at end of file diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 0dd9d68f..3003ae93 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -22,8 +22,10 @@ .modal-pop-wrap { position: fixed; + top: 200px; + right: 100px; width: 100%; - min-width: 380px; + min-width: 300px; max-width: fit-content; height: -webkit-fit-content; height: -moz-fit-content; @@ -34,13 +36,17 @@ z-index: 9999999; &.sm { - max-width: 450px; + max-width: 580px; } &.ssm { max-width: 380px; } + &.xm { + max-width: 300px; + } + &.mount { animation: mountpop .17s ease-in-out forwards; } @@ -141,4 +147,180 @@ } } } +} + +.adsorption-point { + display: flex; + align-items: center; + background-color: #3A3A3A; + border-radius: 3px; + padding-left: 11px; + overflow: hidden; + transition: all 0.17s ease-in-out; + + span { + font-size: 12px; + color: #898989; + } + + i { + display: flex; + align-items: center; + padding: 0 7px; + margin-left: auto; + height: 100%; + font-size: 13px; + color: #898989; + } + + &.act { + i { + color: #fff; + background-color: #1083E3; + } + } +} + +// grid-option +.grid-check-form { + display: flex; + align-items: center; + gap: 15px; + padding-bottom: 15px; + border-bottom: 1px solid #3C3C3C; +} + +.grid-option-wrap { + padding: 15px 0; + border-bottom: 1px solid #3C3C3C; + + .grid-option-box { + display: flex; + align-items: center; + background-color: #3D3D3D; + border-radius: 2px; + padding: 10px; + gap: 20px; + margin-bottom: 5px; + + .grid-input-form { + display: flex; + align-items: center; + + span { + font-size: 12px; + color: #fff; + font-weight: 500; + } + + .input-grid { + width: 63px; + + input { + width: 100%; + } + } + } + + &:last-child { + margin-bottom: 0; + } + } +} + +.grid-select { + flex: 1; + + .sort-select { + width: 100%; + background-color: #313131; + } +} + +.grid-btn-wrap { + padding-top: 15px; + text-align: right; + + button { + padding: 0 20px; + } +} + +// grid copy +.grid-option-tit { + font-size: 12px; + color: #fff; + font-weight: 400; + padding-bottom: 15px; + border-bottom: 1px solid #3C3C3C; +} + +.grid-direction { + display: flex; + align-items: center; + gap: 5px; +} + +.direction { + width: 22px; + height: 22px; + background-color: #757575; + background-image: url(../../public/static/images/canvas/grid_option_arr.svg); + background-repeat: no-repeat; + background-position: center; + background-size: 16px 15px; + border-radius: 50%; + transition: all .15s ease-in-out; + + &.down { + transform: rotate(180deg); + } + + &.left { + transform: rotate(-90deg); + } + + &.right { + transform: rotate(90deg); + } + + &:hover, + &.act { + background-color: #1083E3; + } +} + +// grid-move +.move-form { + p { + font-size: 12px; + color: #fff; + font-weight: 500; + } +} + +.input-move-wrap { + display: flex; + align-items: center; + gap: 5px; + + span { + color: #fff; + font-size: 12px; + } + + .input-move { + width: 148px; + + input { + width: 100%; + } + } +} + +.direction-move-wrap { + flex: none; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; } \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 30289000..9d59e8b7 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -66,6 +66,7 @@ q:before, q:after { } table { + width: 100%; border-collapse: separate; border-spacing: 0; border: 0 none; @@ -145,6 +146,42 @@ button { cursor: pointer; } +.pre { + font-family: 'Pretendard', sans-serif !important; +} + +// margin +.mt5 { + margin-top: 5px !important; +} + +.mt10 { + margin-top: 10px !important; +} + +.mb5 { + margin-bottom: 5px !important; +} + +.mb10 { + margin-bottom: 10px !important; +} + +.mr5 { + margin-right: 5px !important; +} + +.mr10 { + margin-right: 10px !important; +} + +.ml5 { + margin-left: 5px !important; +} + +.ml10 { + margin-left: 10px !important; +} // button .btn-frame { @@ -229,6 +266,34 @@ button { } } +.btn-origin { + display: inline-block; + height: 30px; + padding: 0 14px; + 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: #1083E3; + } + } + + &.grey { + background-color: #94A0AD; + + &:hover { + background-color: #607F9A; + } + } +} + // select .sort-select { position: relative; @@ -307,6 +372,33 @@ button { } } +.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; + } +} + + // input .form-input { label { @@ -318,6 +410,7 @@ button { } } +input[type=number], input[type=text] { &.input-origin { display: inline-block; @@ -333,6 +426,7 @@ input[type=text] { letter-spacing: 0px; &::placeholder { + opacity: 1; font-size: 12px; letter-spacing: 0px; } @@ -341,37 +435,29 @@ input[type=text] { width: 100%; } } -} -// date-picker -.single-date { - input { + &.input-light { + display: block; + width: 100%; + height: 30px; + padding: 0 10px; + border: 1px solid #eee; border-radius: 2px; - color: #fff; - font-size: 12px; - font-family: 'Pretendard', sans-serif; - background-color: #313131; - } -} + 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; -.range-date { - input { - border-radius: 2px; - color: #fff; - font-size: 12px; - font-family: 'Pretendard', sans-serif; - background-color: #313131; - } - - .react-datepicker__input-container { - button { - &:after { - display: none; - } + &:read-only { + background-color: #FAFAFA; + color: #999999; } } } + // check-btn .check-btn { display: flex; @@ -479,4 +565,201 @@ input[type=text] { 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; + 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; + } + } + + &.no-text { + label { + padding-left: 0; + } + } +} + +.d-check-radio { + label { + &::before { + cursor: pointer; + content: ""; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + top: 2px; + left: 0; + margin-left: -12px; + border: 1px solid #999999; + border-radius: 100%; + background-color: transparent; + text-align: center; + font-size: 13px; + line-height: 1.4; + transition: border 0.15s ease-in-out, color 0.15s ease-in-out; + } + + &::after { + cursor: pointer; + content: ""; + display: inline-block; + position: absolute; + width: 9px; + height: 9px; + top: 6px; + left: 4px; + margin-left: -12px; + border: none; + border-radius: 100%; + background-color: #fff; + text-align: center; + font-size: 13px; + line-height: 1.4; + opacity: 0; + visibility: hidden; + transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out; + } + } + + &.light { + label { + &:before { + border-color: #D6D6D7; + } + + &:after { + background-color: #697C8F; + } + } + } + + input[type=radio]:checked + label::after { + opacity: 1; + visibility: visible; + } + + &.pop { + label { + &:before { + border-color: #fff; + } + + &:after { + background-color: #fff; + } + } + } +} + +// check-box +.d-check-box { + label { + &::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; + } + + &: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; + } + } + + 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; + } + } +} + +// 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; + } } \ No newline at end of file