From b379ec670dcf82aa02377f18a797e738188b5ff8 Mon Sep 17 00:00:00 2001 From: basssy Date: Fri, 11 Oct 2024 12:35:48 +0900 Subject: [PATCH] =?UTF-8?q?1.=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=9B=84=20?= =?UTF-8?q?=EB=A9=94=EC=9D=B8=ED=99=94=EB=A9=B4=20=EC=9E=91=EC=97=85=202.l?= =?UTF-8?q?ayout.js=20QModal=20=EB=AF=B8=EC=82=AC=EC=9A=A9=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=A3=BC=EC=84=9D=EC=B2=98=EB=A6=AC=203.=20?= =?UTF-8?q?=ED=8D=BC=EB=B8=94=2010/11=2011=EC=8B=9C26=EB=B6=84=20=EA=B9=8C?= =?UTF-8?q?=EC=A7=80=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 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/app/layout.js | 2 +- src/components/Main.jsx | 156 +- src/components/main/ChangePasswordPop.jsx | 168 ++ src/locales/ja.json | 13 +- src/locales/ko.json | 13 +- src/styles/_canvasside.scss | 196 +- src/styles/_contents.scss | 1717 +++++++++-------- src/styles/_main.scss | 1160 ++++++----- src/styles/_modal.scss | 498 ++--- src/styles/_reset.scss | 1465 ++++++++------ src/styles/_submodal.scss | 198 ++ src/styles/_table.scss | 466 +++-- src/styles/contents.scss | 3 +- 16 files changed, 3366 insertions(+), 2714 deletions(-) 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/components/main/ChangePasswordPop.jsx create mode 100644 src/styles/_submodal.scss 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/app/layout.js b/src/app/layout.js index 6c04bbec..f7aafcd0 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -75,7 +75,7 @@ export default async function RootLayout({ children }) { {children} )} - + {/* */} diff --git a/src/components/Main.jsx b/src/components/Main.jsx index 807f3c49..be72673f 100644 --- a/src/components/Main.jsx +++ b/src/components/Main.jsx @@ -9,18 +9,16 @@ import { useAxios } from '@/hooks/useAxios' import { globalLocaleStore } from '@/store/localeAtom' import MainContents from './main/MainContents' import { useMessage } from '@/hooks/useMessage' -import { isObjectNotEmpty, queryStringFormatter } from '@/util/common-utils' import { stuffSearchState } from '@/store/stuffAtom' - -export default function MainPage(props) { +import { useForm } from 'react-hook-form' +import '@/styles/contents.scss' +import ChangePasswordPop from './main/ChangePasswordPop' +export default function MainPage() { const [sessionState, setSessionState] = useRecoilState(sessionStore) - const [open, setOpen] = useRecoilState(modalState) - const setContent = useSetRecoilState(modalContent) - const setModalProps = useSetRecoilState(modalProps) const globalLocaleState = useRecoilValue(globalLocaleStore) - const { get, patch } = useAxios(globalLocaleState) + const { get } = useAxios(globalLocaleState) const router = useRouter() const { getMessage } = useMessage() @@ -38,76 +36,8 @@ export default function MainPage(props) { const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState) - //비밀번호 변경 - const updateProcess = async (formData) => { - const pwd1 = formData.get('password1') - const pwd2 = formData.get('password2') - - if (pwd1 !== pwd2) { - alert('입력한 패스워드가 다릅니다') - return false - } - - //패스워드 길이수 체크 - if (checkLength(pwd1) > 10) { - alert('반각10자이내로 입력') - } - - const param = { - loginId: sessionState.userId, - chgType: 'I', - chgPwd: formData.get('password1'), - } - - await patch({ url: '/api/login/v1.0/user/change-password', data: param }).then((res) => { - if (res) { - if (res.result.resultCode === 'S') { - alert('비밀번호가 변경되었습니다.') - setSessionState({ ...sessionState, pwdInitYn: 'Y' }) - setOpen(false) - } else { - alert(res.result.resultMsg) - } - } - }) - } - - //자리수체크 - const checkLength = (pwd1) => { - let str = new String(pwd1) - let _byte = 0 - if (str.length !== 0) { - for (let i = 0; i < str.length; i++) { - let str2 = str.charAt(i) - if (encodeURIComponent(str2).length > 4) { - _byte += 2 - } else { - _byte++ - } - } - } - return _byte - } - - //공백제거 - const checkValue = (e) => { - let spaceChk = /\s/ - if (spaceChk.exec(e.target.value)) { - e.target.value = e.target.value.replace(/\s|/gi, '') - return false - } - } - useEffect(() => { - if (sessionState.pwdInitYn === 'N') { - setOpen(true) - setContent(html) - setModalProps({ - closeOnOverlayClick: false, - closeOnEsc: false, - showCloseIcon: false, - }) - } else { + if (sessionState.pwdInitYn === 'Y') { fetchObjectList() } }, [sessionState]) @@ -130,74 +60,6 @@ export default function MainPage(props) { } } - // 모달팝업 컨텐츠 - const html = ( - <> -

비밀번호 변경

-

* 초기화된 비밀번호로 로그인한 경우, 비밀번호를 변경해야 사이트 이용이 가능합니다.

-

비밀번호를 변경하지 않을 경우, 로그인 화면으로 이동합니다.

-
- - - - - - - - - - - - - - - -
- 신규비밀번호 입력 * - -
- -
-
- 신규비밀번호 재입력 * - -
- -
-
- - - -
- - ) - // 엔터 이벤트 const handleByOnKeyUp = (e) => { if (e.key === 'Enter') { @@ -250,7 +112,7 @@ export default function MainPage(props) { return ( <> - {sessionState.pwdInitYn === 'Y' && ( + {(sessionState.pwdInitYn === 'Y' && ( <>
@@ -297,6 +159,10 @@ export default function MainPage(props) { />
+ )) || ( + <> + + )} ) diff --git a/src/components/main/ChangePasswordPop.jsx b/src/components/main/ChangePasswordPop.jsx new file mode 100644 index 00000000..45685c26 --- /dev/null +++ b/src/components/main/ChangePasswordPop.jsx @@ -0,0 +1,168 @@ +import React from 'react' +import { useMessage } from '@/hooks/useMessage' +import { useForm } from 'react-hook-form' +import { sessionStore } from '@/store/commonAtom' +import { useRecoilValue, useRecoilState } from 'recoil' +import { useAxios } from '@/hooks/useAxios' +import { globalLocaleStore } from '@/store/localeAtom' + +export default function ChangePasswordPop() { + const globalLocaleState = useRecoilValue(globalLocaleStore) + + const { patch } = useAxios(globalLocaleState) + const { getMessage } = useMessage() + const [sessionState, setSessionState] = useRecoilState(sessionStore) + + const formInitValue = { + password1: '', + password2: '', + } + const { register, setValue, getValues, handleSubmit, resetField, control, watch } = useForm({ + defaultValues: formInitValue, + }) + + const form = { register, setValue, getValues, handleSubmit, resetField, control, watch } + + //자리수체크 + const checkLength = (pwd1) => { + let str = new String(pwd1) + let _byte = 0 + if (str.length !== 0) { + for (let i = 0; i < str.length; i++) { + let str2 = str.charAt(i) + if (encodeURIComponent(str2).length > 4) { + _byte += 2 + } else { + _byte++ + } + } + } + return _byte + } + + //공백제거 + const checkValue = (e) => { + let spaceChk = /\s/ + if (spaceChk.exec(e.target.value)) { + e.target.value = e.target.value.replace(/\s|/gi, '') + return false + } + } + + //비밀번호 변경 + const updateProcess = async () => { + const _password1 = form.watch('password1') + const _password2 = form.watch('password2') + + if (_password1 !== _password2) { + alert(getMessage('main.popup.login.validate1')) + return false + } + + //패스워드 길이수 체크 + if (checkLength(_password1) > 10) { + alert(getMessage('main.popup.login.validate2')) + } + + const param = { + loginId: sessionState.userId, + chgType: 'I', + chgPwd: _password1, + } + await patch({ url: '/api/login/v1.0/user/change-password', data: param }).then((res) => { + if (res) { + if (res.result.resultCode === 'S') { + alert(getMessage('main.popup.login.success')) + setSessionState({ ...sessionState, pwdInitYn: 'Y' }) + } else { + alert(res.result.resultMsg) + } + } + }) + } + + return ( +
+
+
+
+

{getMessage('main.popup.login.popupTitle')}

+
+
+
+
+
+
+
+
+
+ {getMessage('main.popup.login.newPassword1')} + * +
+
{getMessage('main.popup.login.placeholder')}
+
+
+
+
+ +
+
+
+
+
+
+
+ {getMessage('main.popup.login.newPassword2')} + * +
+
{getMessage('main.popup.login.placeholder')}
+
+
+
+
+ +
+
+
+
+
+
+ {getMessage('main.popup.login.guide1')} + {getMessage('main.popup.login.guide2')} +
+
+
+ + +
+
+
+
+
+ ) +} diff --git a/src/locales/ja.json b/src/locales/ja.json index 2a07e89b..a1172800 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -372,5 +372,16 @@ "main.content.objectList": "最近の更新物件一覧", "main.content.notice": "お知らせ", "main.content.download1": "操作マニュアル", - "main.content.download2": "屋根の説明書" + "main.content.download2": "屋根の説明書", + "main.popup.login.popupTitle": "パスワード変更", + "main.popup.login.newPassword1": "新しいパスワードを入力", + "main.popup.login.newPassword2": "新規パスワード再入力", + "main.popup.login.placeholder": "半角10文字以内 ", + "main.popup.login.guide1": "初期化されたパスワードでログインした場合、パスワードを変更しなければサイト利用が可能です。", + "main.popup.login.guide2": "パスワードを変更しない場合は、ログイン画面に進みます。", + "main.popup.login.btn1": "変更", + "main.popup.login.btn2": "変更しない", + "main.popup.login.validate1": "入力したパスワードが異なります。", + "main.popup.login.validate2": "半角10文字以内で入力してください。", + "main.popup.login.success": "パスワードが変更されました。" } diff --git a/src/locales/ko.json b/src/locales/ko.json index 742dd27a..f1f596f7 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -375,5 +375,16 @@ "main.content.objectList": "최근 갱신 물건목록", "main.content.notice": "공지사항", "main.content.download1": "조작메뉴얼", - "main.content.download2": "지붕설명서" + "main.content.download2": "지붕설명서", + "main.popup.login.popupTitle": "비밀번호변경", + "main.popup.login.newPassword1": "새 비밀번호 입력", + "main.popup.login.newPassword2": "새 비밀번호 재입력", + "main.popup.login.placeholder": "반각 10자 이내", + "main.popup.login.guide1": "초기화된 비밀번호로 로그인한 경우 비밀번호를 변경하지 않으면 사이트 이용이 가능합니다.", + "main.popup.login.guide2": "비밀번호를 변경하지 않으려면 로그인 화면으로 이동합니다.", + "main.popup.login.btn1": "변경", + "main.popup.login.btn2": "변경안함", + "main.popup.login.validate1": "입력한 패스워드가 다릅니다.", + "main.popup.login.validate2": "반각 10자 이내로 입력해주세요.", + "main.popup.login.success": "비밀번호가 변경되었습니다." } diff --git a/src/styles/_canvasside.scss b/src/styles/_canvasside.scss index 66bba83d..8ef0c762 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; - } - } - tbody{ - td{ - font-size: 12px; - color: #fff; - font-weight: 400; - text-align: center; - padding: 0 10px; - 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; + } + } } - &.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; - } - li{ - padding: 4px 30px; - cursor: pointer; - font-size: 12px; - font-weight: 400; - color: #101010; - &:hover{ - color: #fff; - background-color: #0D99FF; - } - } +.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; } -} \ No newline at end of file + li { + padding: 4px 30px; + cursor: pointer; + font-size: 12px; + font-weight: 400; + color: #101010; + &:hover { + color: #fff; + background-color: #0d99ff; + } + } + } +} diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 7e087a87..275a917f 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -1,852 +1,953 @@ // 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{ +.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 { position: relative; - display: block; - width: 100%; - padding-bottom: 0; - background-color: #383838; - transition: padding .17s ease-in-out; - .canvas-menu-inner{ - 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 .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 .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%; - .canvas-depth2-list{ - display: flex; - align-items: center ; - height: 100%; - .canvas-depth2-item{ - display: flex; - align-items: center; - margin-right: 26px; - height: 100%; - button{ - position: relative; - opacity: 0.55; - color: #fff; - font-size: 12px; - font-weight: normal; - height: 100%; - padding-right: 12px; - } - &.active{ - button{ - opacity: 1; - font-weight: 600; - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 5px; - height: 8px; - background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; - } - } - } - } - } - .canvas-depth2-btn-list{ - display: flex; - align-items: center; - margin-left: auto; - height: 100%; - .depth2-btn-box{ - display: flex; - align-items: center; - margin-right: 34px; - height: 100%; - transition: all .17s ease-in-out; - button{ - position: relative; - font-size: 12px; - font-weight: 400; - height: 100%; - color: #fff; - padding-right: 12px; - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 5px; - height: 8px; - background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; - } - } - &:last-child{ - margin-right: 0; - } - &.mouse{ - opacity: 0.55; - } - } - } - } - &.active{ - top: 47px; - } - } - &.active{ - padding-bottom: 50px; - } -} - -// canvas-layout -.canvas-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{ - display: flex; - align-items: center; - background-color: #1c1c1c; - padding: 9.6px 20px; - border-right:1px solid #000; - min-width: 0; - transition: all .17s ease-in-out; - span{ - display: flex; - align-items: center; - width: 100%; - font-size: 12px; - font-family: 'Pretendard', sans-serif; - color: #AAA; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - .close{ - flex: none; - display: block; - width: 7px; - height: 8px; - margin-left: 15px; - background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center; - background-size: cover; - } - &.on{ - background-color: #fff; - span{ - font-weight: 600; - color: #101010; - } - .close{ - background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center; - } - &:hover{ - background-color: #fff; - } - } - &:hover{ - background-color: #000; - } - } - } - .plane-add{ - display: flex; - align-items: center; - justify-content: center; - width: 45px; - padding: 13.5px 0; - background-color: #1C1C1C; - border-right: 1px solid #000; - transition: all .17s ease-in-out; - span{ - display: block; - width: 9px; - height: 9px; - background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center; - background-size: cover; - } - &:hover{ - background-color: #000; - } - } - } -} - -.canvas-frame{ - 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; + display: flex; + align-items: center; + padding: 0 40px 0 20px; + background-color: #2c2c2c; z-index: 999; - .sub-header-inner{ + .canvas-menu-list { + display: flex; + align-items: center; + height: 100%; + .canvas-menu-item { display: flex; align-items: center; height: 100%; - padding: 0 100px; - .sub-header-title-wrap{ - display: flex; - align-items: center; - .title-item{ - position: relative; - padding: 0 24px; - a{ - display: flex; - align-items: center; - .icon{ - width: 22px; - height: 22px; - margin-right: 8px; - background-repeat: no-repeat; - background-position: center; - background-size: cover; - &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);} - } - } - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 1px; - height: 16px; - background-color: #D9D9D9; - } - &:first-child{ - padding-left: 0; - } - &:last-child{ - padding-right: 0; - &:after{ - display: none; - } - } + button { + display: flex; + align-items: center; + font-size: 12px; + height: 100%; + color: #fff; + font-weight: 600; + padding: 15px 20px; + opacity: 0.55; + transition: all 0.17s ease-in-out; + .menu-icon { + display: block; + width: 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); + } + } } - .sub-header-title{ - font-size: 16px; + &.active { + background-color: #383838; + button { + opacity: 1; + } + } + } + } + .canvas-side-btn-wrap { + display: flex; + align-items: center; + margin-left: auto; + .select-box { + width: 124px; + margin-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; - font-weight: 600; + } } - .sub-header-location{ - margin-left: auto; - display: flex; - align-items: center; - .location-item{ - position: relative; - display: flex; - align-items: center; - padding: 0 10px; - span{ - display: flex; - font-size: 12px; - color: #AAA; - font-weight: normal; - cursor: default; - } - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 4px; - height: 6px; - background: url(../../public/static/images/main/loaction_arr.svg)no-repeat center; - } - &:first-child{ - padding-left: 0; - } - &:last-child{ - padding-right: 0; - span{ - color: #fff; - } - &:after{ - display: none; - } - } - } + &.form06 { + .name { + font-size: 13px; + } } - } -} - -// sub content -.sub-content{ - padding-top: 46px; - .sub-content-inner{ - max-width: 1720px; - margin: 0 auto; - padding-top: 20px; - .sub-content-box{ - margin-bottom: 20px; - &:last-child{ - margin-bottom: 0; - } - } - } - &.estimate{ + } + .vertical-horizontal { display: flex; - flex-direction: column; - height: calc(100% - 36.5px); - overflow-y: auto; - padding-top: 0; - .sub-content-inner{ - flex: 1; - width: 100%; + 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; } - } -} -.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{ - display: flex; - align-items: center; - li{ - position: relative; - padding: 0 6px; - font-size: 12px; - color: #101010; - font-weight: normal; - span{ - font-weight: 600; - &.red{ - color: #E23D70; - } - } - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 1px; - height: 11px; - background-color: #D9D9D9; - } - &:first-child{padding-left: 0;} - &:last-child{padding-right: 0;&::after{display: none;}} - } - } + button { + margin-left: auto; + height: 100%; + background-color: #4b4b4b; + font-size: 13px; + font-weight: 400; + color: #fff; + padding: 0 7.5px; + transition: all 0.17s ease-in-out; } - } - .left-unit-box{ - margin-left: auto; - display: flex; - align-items: center; - } - .promise-gudie{ - display: block; - font-size: 13px; - font-weight: 700; - color: #101010; - margin-bottom: 20px; - } - .important{ - color: #f00; - } - .sub-table-footer{ + &.on { + button { + background-color: #1083e3; + } + } + } + .size-control { 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; + 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); + } + } + } } -} - -// 견적서 -.estimate-list-wrap{ - display: flex; - align-items: center; - margin-bottom: 10px; - .estimate-box{ - flex: 1 ; + } + .canvas-depth2-wrap { + position: absolute; + top: -100%; + left: 0; + background-color: #383838; + 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 { 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; - } - } - &: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; - } - } - .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; - } - } - } -} - -// 발전시물레이션 -.chart-wrap{ - display: flex; - gap: 20px; - width: 100%; - .sub-table-box{ height: 100%; - } - .chart-inner{ - flex: 1; - .chart-box{ - margin-bottom: 30px; - } - } - .chart-table-wrap{ - display: flex; - flex-direction: column; - flex: none; - width: 650px; - .sub-table-box{ - flex: 1; - &:first-child{ - margin-bottom: 20px; - } - } - } -} - -.chart-month-table{ - table{ - table-layout: fixed; - border-collapse:collapse; - border: 1px solid #ECF0F4; - border-radius: 4px; - thead{ - th{ - padding: 4.5px 0; - border-bottom: 1px solid #ECF0F4; - text-align: center; - font-size: 13px; - color: #45576F; - font-weight: 500; - background-color: #F8F9FA; - } - } - tbody{ - td{ - font-size: 13px; - color: #45576F; - text-align: center; - padding: 4.5px 0; - } - } - } -} - -.simulation-guide-wrap{ - display: flex; - padding: 20px; - .simulation-tit-wrap{ - padding-right: 40px; - border-right: 1px solid #EEEEEE; - span{ - display: block; + .canvas-depth2-item { + display: flex; + align-items: center; + margin-right: 26px; + height: 100%; + button { position: relative; - padding-left: 60px; - font-size: 15px; - color: #14324F; - font-weight: 600; - &::before{ + opacity: 0.55; + color: #fff; + font-size: 12px; + font-weight: normal; + height: 100%; + padding-right: 12px; + } + &.active { + button { + opacity: 1; + font-weight: 600; + &:after { content: ''; position: absolute; top: 50%; - left: 0; + right: 0; transform: translateY(-50%); - width: 40px; - height: 40px; - background: url(../../public/static/images/sub/simulation_guide.svg)no-repeat center; - background-size: cover; + width: 5px; + height: 8px; + background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; + } } + } } - } - .simulation-guide-box{ - 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; + } + .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; + height: 100%; + color: #fff; + padding-right: 12px; + &:after { + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 5px; + height: 8px; + background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; } + } + &:last-child { + margin-right: 0; + } + &.mouse { + opacity: 0.55; + } } + } } + &.active { + top: 47px; + } + } + &.active { + padding-bottom: 50px; + } } -.module-total{ +// 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 { + display: flex; + align-items: center; + background-color: #1c1c1c; + padding: 9.6px 20px; + border-right: 1px solid #000; + min-width: 0; + transition: all 0.17s ease-in-out; + span { + display: flex; + align-items: center; + width: 100%; + font-size: 12px; + font-family: 'Pretendard', sans-serif; + color: #aaa; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + .close { + flex: none; + display: block; + width: 7px; + height: 8px; + margin-left: 15px; + background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center; + background-size: cover; + } + &.on { + background-color: #fff; + span { + font-weight: 600; + color: #101010; + } + .close { + background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center; + } + &:hover { + background-color: #fff; + } + } + &:hover { + background-color: #000; + } + } + } + .plane-add { + display: flex; + align-items: center; + justify-content: center; + width: 45px; + padding: 13.5px 0; + background-color: #1c1c1c; + border-right: 1px solid #000; + transition: all 0.17s ease-in-out; + span { + display: block; + width: 9px; + height: 9px; + background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center; + background-size: cover; + } + &:hover { + background-color: #000; + } + } + } +} + +.canvas-frame { + position: relative; + height: calc(100% - 36.5px); + background-color: #fff; + canvas { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 1600px; + height: 1000px; + } +} + +// 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; - 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; + 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; + } + } + } } - .total-num{ - flex: none; - width: 121px; - text-align: center; - font-size: 15px; - color: #344356; - font-weight: 500; + .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; + 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 { + 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; + } +} + +.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; + } + } +} + +// 견적서 +.estimate-list-wrap { + display: flex; + align-items: center; + margin-bottom: 10px; + .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; + } + } + &: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; + } + } + .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; + } + } + } +} + +// 발전시물레이션 +.chart-wrap { + display: flex; + gap: 20px; + width: 100%; + .sub-table-box { + height: 100%; + } + .chart-inner { + flex: 1; + .chart-box { + margin-bottom: 30px; + } + } + .chart-table-wrap { + display: flex; + flex-direction: column; + flex: none; + width: 650px; + .sub-table-box { + flex: 1; + &:first-child { + margin-bottom: 20px; + } + } + } +} + +.chart-month-table { + table { + table-layout: fixed; + border-collapse: collapse; + border: 1px solid #ecf0f4; + border-radius: 4px; + thead { + th { + padding: 4.5px 0; + border-bottom: 1px solid #ecf0f4; + text-align: center; + font-size: 13px; + color: #45576f; + font-weight: 500; + background-color: #f8f9fa; + } + } + tbody { + td { + font-size: 13px; + color: #45576f; + text-align: center; + padding: 4.5px 0; + } + } + } +} + +.simulation-guide-wrap { + display: flex; + padding: 20px; + .simulation-tit-wrap { + 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; + 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; + } + } + } +} diff --git a/src/styles/_main.scss b/src/styles/_main.scss index 334a0485..e80d8b83 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -1,557 +1,687 @@ // 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; +.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{ +.main-search-wrap { + display: flex; + align-items: center; + justify-content: center; + padding: 45px 0; + .search-raido-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; - } + 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; - } +.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{ +.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; - gap: 24px; - margin-bottom: 24px; - .product-item{ + 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; - 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; - } + 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; } - .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; - } - } - } + .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; } - } - &:last-child{ + .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; +.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%; - 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; + 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-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; - } - } - } - } + &.pw-reset { + font-size: 13px; } - .login-guide-wrap{ - position: relative; - margin-left: 10px; - margin-top: 30px; - padding-left: 15px; + } + .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; - color: #fff; - line-height: 24px; - a{ - color: #fff; - font-weight: 600; - text-decoration: underline; + font-weight: 400; + color: #6c819c; + &::placeholder { + font-size: 13px; + font-weight: 400; + color: #d1d7e0; } - span{ - position: absolute; - top: 0; - left: 0; + } + &::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 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-copyright{ - position: absolute; - bottom: 40px; - left: 50%; - transform: translateX(-50%); - font-size: 11px; + .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: 500; + 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; - } - } +.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; + } } - input[type=checkbox]:checked + label::before{ - border-color: #A8B6C7; - background-color: #A8B6C7; + } + 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 { + width: 100%; + max-width: 1720px; + margin: 0 auto; + .center-page-tit { + font-size: 18px; + font-weight: 600; + color: #101010; + margin-bottom: 24px; } - input[type=checkbox]:checked + label::after{ - border-color: #fff; - width: 7px; - height: 11px; - top: -2px; - left: 1px; + .sub-table-box { + &.signup { + margin-bottom: 20px; + } } -} \ No newline at end of file + .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; + } +} diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index b7bb20ec..9343ae23 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -14,7 +14,6 @@ $alert-color: #101010; scale: 1; } } - @keyframes unmountpop { from { opacity: 1; @@ -31,7 +30,6 @@ $alert-color: #101010; font-weight: 400; color: #fff; } - .bold-font { font-size: 12px; font-weight: 500; @@ -40,6 +38,8 @@ $alert-color: #101010; .modal-pop-wrap { position: fixed; + top: 200px; + right: 100px; width: 100%; height: -webkit-fit-content; height: -moz-fit-content; @@ -48,67 +48,51 @@ $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 .17s ease-in-out forwards; + animation: mountpop 0.17s ease-in-out forwards; } - &.unmount { - animation: unmountpop .17s ease-in-out forwards; + animation: unmountpop 0.17s ease-in-out forwards; } - &.alert { position: absolute; top: 50%; @@ -116,25 +100,21 @@ $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; @@ -144,7 +124,6 @@ $alert-color: #101010; } } } - .modal-head { display: flex; align-items: center; @@ -156,7 +135,6 @@ $alert-color: #101010; color: $pop-color; font-weight: 700; } - .modal-close { margin-left: auto; color: transparent; @@ -166,64 +144,50 @@ $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; @@ -231,22 +195,18 @@ $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; @@ -258,17 +218,15 @@ $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; @@ -278,11 +236,10 @@ $alert-color: #101010; font-size: 13px; color: #898989; } - &.act { i { color: $pop-color; - background-color: #1083E3; + background-color: #1083e3; } } } @@ -293,83 +250,68 @@ $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; @@ -377,11 +319,9 @@ $alert-color: #101010; } } } - .grid-btn-wrap { padding-top: 15px; text-align: right; - button { padding: 0 10px; } @@ -393,16 +333,13 @@ $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; @@ -412,21 +349,17 @@ $alert-color: #101010; background-position: center; background-size: 16px 15px; border-radius: 50%; - transition: all .15s ease-in-out; + transition: all 0.15s ease-in-out; opacity: 0.6; - &.down { transform: rotate(180deg); } - &.left { transform: rotate(-90deg); } - &.right { transform: rotate(90deg); } - &:hover, &.act { opacity: 1; @@ -441,26 +374,21 @@ $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; @@ -472,7 +400,6 @@ $alert-color: #101010; .placement-table { table { table-layout: fixed; - tr { th { display: flex; @@ -483,14 +410,12 @@ $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 { @@ -499,7 +424,6 @@ $alert-color: #101010; } } } - .tooltip { position: relative; display: block; @@ -509,20 +433,17 @@ $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, @@ -530,7 +451,6 @@ $alert-color: #101010; padding-top: 14px; } } - &:last-child { td, th { @@ -546,24 +466,20 @@ $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; @@ -580,22 +496,18 @@ $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; @@ -607,7 +519,6 @@ $alert-color: #101010; font-weight: $pop-bold-weight; color: $pop-color; margin-right: 10px; - &.thin { width: auto; font-weight: $pop-normal-weight; @@ -628,7 +539,6 @@ $alert-color: #101010; background-size: 12px 12px; background-position: center; } - &:last-child { margin-right: 0; } @@ -636,28 +546,24 @@ $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; } } @@ -665,7 +571,7 @@ $alert-color: #101010; // 외벽선 속성 설정 .properties-guide { font-size: $pop-normal-size; - color: #AAA; + color: #aaa; font-weight: $pop-normal-weight; margin-bottom: 14px; } @@ -676,19 +582,16 @@ $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%; @@ -697,21 +600,17 @@ $alert-color: #101010; color: #fff; font-weight: 700; border-radius: 2px; - transition: all .15s ease-in-out; - + transition: all 0.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; } @@ -727,39 +626,34 @@ $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 .15s ease-in-out; - + background-color: #3d3d3d; + transition: background 0.15s ease-in-out; img { max-width: 100%; } } - .shape-title { font-size: $pop-normal-size; font-weight: $pop-bold-weight; color: $pop-color; margin-top: 10px; text-align: center; - transition: color .15s ease-in-out; + transition: color 0.15s ease-in-out; } - .shape-menu-box { &.act, &:hover { .shape-box { - background-color: #008BFF; + background-color: #008bff; } - .shape-title { - color: #008BFF; + color: #008bff; } } } @@ -770,14 +664,12 @@ $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; } @@ -791,10 +683,8 @@ $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; @@ -804,26 +694,22 @@ $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 { @@ -832,17 +718,14 @@ $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; } @@ -855,14 +738,12 @@ $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; @@ -874,7 +755,6 @@ $alert-color: #101010; font-weight: $pop-normal-weight; border: 1px solid #484848; background-color: #323234; - i { display: block; width: 12px; @@ -891,14 +771,11 @@ $alert-color: #101010; align-items: center; gap: 10px; margin-bottom: 10px; - .flex-ment { gap: 10px; - .dec { text-decoration: underline; } - .delete { display: block; width: 15px; @@ -907,7 +784,6 @@ $alert-color: #101010; background-size: cover; } } - &:last-child { margin-bottom: 0; } @@ -918,7 +794,6 @@ $alert-color: #101010; display: flex; align-items: center; gap: 5px; - button { display: flex; align-items: center; @@ -931,8 +806,7 @@ $alert-color: #101010; border: 1px solid #646464; border-radius: 2px; padding: 0 10px; - transition: all .15s ease-in-out; - + transition: all 0.15s ease-in-out; i { height: 15px; display: block; @@ -940,30 +814,25 @@ $alert-color: #101010; background-repeat: no-repeat; background-position: center; background-size: cover; - transition: all .15s ease-in-out; - + transition: all 0.15s ease-in-out; &.allocation01 { background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg); width: 15px; } - &.allocation02 { background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg); width: 18px; } } - &.act, &:hover { color: #101010; border: 1px solid #101010; background-color: #fff; - i { &.allocation01 { background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg); } - &.allocation02 { background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg); } @@ -985,13 +854,11 @@ $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 .15s ease-in-out; - + transition: all 0.15s ease-in-out; .shape-box { display: flex; justify-content: center; @@ -1002,10 +869,9 @@ $alert-color: #101010; background-color: #313131; border-radius: 2px; } - &.act, &:hover { - background-color: #008BFF; + background-color: #008bff; } } } @@ -1016,37 +882,32 @@ $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 .15s ease-in-out; - + transition: all 0.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; } } } @@ -1054,33 +915,27 @@ $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%; @@ -1088,21 +943,18 @@ $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 { @@ -1114,13 +966,11 @@ $alert-color: #101010; } } } - &.direction-box { display: flex; flex-direction: column; flex: none; width: 180px; - .plane-direction-box { flex: 1; display: flex; @@ -1132,43 +982,36 @@ $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; @@ -1179,32 +1022,27 @@ $alert-color: #101010; background-repeat: no-repeat; background-position: center; border-radius: 50%; - transition: all .15s ease-in-out; - + transition: all 0.15s ease-in-out; &.up { top: 22px; left: 50%; transform: translateX(-50%); } - &.right { top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg); } - &.down { bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg); } - &.left { top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg); } - &:hover, &.act { background-color: #fff; @@ -1232,7 +1070,6 @@ $alert-color: #101010; align-items: center; justify-content: center; } - .discrimination-tit { font-size: 13px; color: #fff; @@ -1244,13 +1081,11 @@ $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%; @@ -1264,11 +1099,10 @@ $alert-color: #101010; .display-change-wrap { margin: 24px 0; } - .warning { font-size: $pop-normal-size; font-weight: $pop-normal-weight; - color: #FFAFAF; + color: #ffafaf; } // 각 변 속성 변경 @@ -1282,12 +1116,10 @@ $alert-color: #101010; .drawing-flow-wrap { display: flex; gap: 10px; - .discrimination-box { flex: 1; display: flex; flex-direction: column; - .object-direction-wrap { flex: 1; } @@ -1299,7 +1131,6 @@ $alert-color: #101010; align-items: center; justify-content: center; } - .compas-box-inner { position: relative; width: 200px; @@ -1323,206 +1154,157 @@ $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: ''; @@ -1534,13 +1316,11 @@ $alert-color: #101010; height: 5px; background-color: #fff; } - i { color: #fff; } } } - .compas { position: absolute; top: 50%; @@ -1550,7 +1330,6 @@ $alert-color: #101010; height: 148px; border: 4px solid #fff; border-radius: 50%; - .compas-arr { width: 100%; height: 100%; @@ -1560,14 +1339,12 @@ $alert-color: #101010; } } - // 지붕모듈선택 .roof-module-tab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; - .module-tab-bx { flex: 1; height: 34px; @@ -1576,19 +1353,17 @@ $alert-color: #101010; border-radius: 2px; background-color: transparent; font-size: 12px; - color: #AAA; + color: #aaa; text-align: center; cursor: default; - transition: all .15s ease-in-out; - + transition: all 0.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; @@ -1597,8 +1372,7 @@ $alert-color: #101010; background-position: center; background-size: cover; background-image: url(../../public/static/images/canvas/module_tab_arr.svg); - transition: all .15s ease-in-out; - + transition: all 0.15s ease-in-out; &.act { background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg); } @@ -1607,14 +1381,11 @@ $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), @@ -1627,23 +1398,20 @@ $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; @@ -1654,7 +1422,6 @@ $alert-color: #101010; .module-table-flex-wrap { display: flex; gap: 10px; - .outline-form { flex: 1; } @@ -1662,7 +1429,6 @@ $alert-color: #101010; .module-box-tab { display: flex; - .module-btn { flex: 1; border-top: 1px solid #505050; @@ -1673,11 +1439,10 @@ $alert-color: #101010; height: 30px; font-size: 12px; font-weight: 400; - + transition: all 0.15s ease-in-out; &:first-child { border-left: 1px solid #505050; } - &.act { border-color: #fff; background-color: #fff; @@ -1688,39 +1453,32 @@ $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; @@ -1728,25 +1486,20 @@ $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; } @@ -1756,27 +1509,23 @@ $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; @@ -1790,38 +1539,155 @@ $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; } } } -} \ No newline at end of file +} + +// 회로 및 가대설정 +.circuit-check-inner { + padding: 5px 0; +} + +.x-scroll-table { + overflow-x: auto; + padding-bottom: 5px; + .roof-module-table { + min-width: 1200px; + } + &::-webkit-scrollbar { + height: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #d9d9d9; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } +} + +.circuit-right-wrap { + display: flex; + justify-content: flex-end; +} + +.circuit-data-form { + display: flex; + flex-direction: column; + gap: 5px; + min-height: 60px; + padding: 12px; + border: 1px solid rgba(255, 255, 255, 0.2); +} +.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; + } + } + } +} diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 7804b800..c288c8e1 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -1,725 +1,924 @@ * { - -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; + line-height: 1.4; +} +body:first-of-type caption { + display: none; } -body:first-of-type caption { display:none;} -ol, ul { - list-style: none; +ol, +ul { + list-style: none; } -blockquote, q { - quotes: none; +blockquote, +q { + quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; } table { - width: 100%; - border-collapse: separate; - border-spacing:0; - border:0 none; + width: 100%; + border-collapse: separate; + border-spacing: 0; + border: 0 none; } -caption, th, td { - text-align:left; - font-weight: normal; - border:0; +caption, +th, +td { + text-align: left; + font-weight: normal; + border: 0; } -a { - cursor:pointer; - color:#000; +a { + cursor: pointer; + color: #000; } -a, a:hover, a:active { - text-decoration:none; - -webkit-tap-highlight-color: transparent; +a, +a:hover, +a:active { + text-decoration: none; + -webkit-tap-highlight-color: transparent; } /*form_style*/ -input, select, textarea, button, a, label { - -webkit-tap-highlight-color:rgba(0,0,0,0); +input, +select, +textarea, +button, +a, +label { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -button,input[type=text], input[type=button] { - -webkit-appearance: none; - -webkit-border-radius: 0; - -webkit-appearance:none; - appearance: none; - border-radius: 0 +button, +input[type='text'], +input[type='button'] { + -webkit-appearance: none; + -webkit-border-radius: 0; + -webkit-appearance: none; + appearance: none; + border-radius: 0; } -input[type=checkbox], input[type=radio] { - box-sizing: border-box; - padding: 0; +input[type='checkbox'], +input[type='radio'] { + box-sizing: border-box; + padding: 0; } -input, select, button { - border:0 none; - outline:none; - margin:0; +input, +select, +button { + border: 0 none; + outline: none; + margin: 0; } select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } select::-ms-expand { - display: none; + display: none; } ::-webkit-input-placeholder { - line-height:1; - font-weight:300; - font-size:0.938rem; - letter-spacing:-0.6px; - color:#8b8b8b; + line-height: 1; + font-weight: 300; + font-size: 0.938rem; + letter-spacing: -0.6px; + color: #8b8b8b; } -.log-box ::-webkit-input-placeholder{ - color:#8b8b8b; +.log-box ::-webkit-input-placeholder { + color: #8b8b8b; } -button{ - background: transparent; - font-family: 'Noto Sans JP', sans-serif; - border: none; - padding: 0; - margin: 0; - line-height: 1.4; - color: inherit; - outline: none; - cursor: pointer; +button { + background: transparent; + font-family: 'Noto Sans JP', sans-serif; + border: none; + padding: 0; + margin: 0; + line-height: 1.4; + color: inherit; + outline: none; + cursor: pointer; } -.pre{ - font-family: 'Pretendard', sans-serif !important; +.pre { + font-family: 'Pretendard', sans-serif !important; } // margin -.mt5{margin-top: 5px !important;} -.mt10{margin-top: 10px !important;} -.mt15{margin-top: 15px !important;} -.mb5{margin-bottom: 5px !important;} -.mb10{margin-bottom: 10px !important;} -.mb15{margin-bottom: 15px !important;} -.mr5{margin-right: 5px !important;} -.mr10{margin-right: 10px !important;} -.mr15{margin-right: 15px !important;} -.ml5{margin-left: 5px !important;} -.ml10{margin-left: 10px !important;} -.ml15{margin-left: 15px !important;} - -// align -.al-l{text-align: left !important;} -.al-r{text-align: right !important;} -.al-c{text-align: center !important;} - - -// button -.btn-frame{ - display: inline-block; - padding: 0 7px; - height: 34px; - line-height: 34px; - border-radius: 2px; - color: #fff; - font-size: 12px; - font-weight: 400; - border: 1px solid #000; - text-align: center; - font-family: 'Pretendard', sans-serif; - transition: all .17s ease-in-out; - cursor: pointer; - &.block{ - width: 100%; - } - &.small{ - font-family: 'Noto Sans JP', sans-serif; - height: 30px; - line-height: 30px; - font-size: 13px; - } - - &.deepgray{ - background-color: #2C2C2C; - border: 1px solid #484848; - } - &.gray{ - background-color: #3C3C3C; - border: 1px solid #545454; - } - &.dark{ - background-color: #1C1C1C; - border: 1px solid #484848; - } - &.modal{ - font-family: 'Noto Sans JP', sans-serif; - background-color: #272727; - border: 1px solid #484848; - color: #aaa; - &:hover{ - background-color: #1083E3; - border: 1px solid #1083E3; - color: #fff; - font-weight: 500; - } - } - &.sub-tab{ - height: 30px; - padding: 0 10px; - line-height: 28px; - font-family: 'Noto Sans JP', sans-serif; - background-color: #2D2D2D; - border: 1px solid #393939; - color: #aaa; - &.act, - &:hover{ - background-color: #414E6C; - border: 1px solid #414E6C; - color: #fff; - font-weight: 500; - } - } - &:hover, - &.act{ - background-color: #1083E3; - border: 1px solid #1083E3; - color: #fff; - font-weight: 500; - } - &.block{ - display: block; - width: 100%; - } - &.ico-flx{ - display: flex; - align-items: center; - .ico{ - margin-right: 10px; - } - &:hover, - &.act{ - font-weight: 400; - } - } +.mt5 { + margin-top: 5px !important; +} +.mt10 { + margin-top: 10px !important; +} +.mt15 { + margin-top: 15px !important; +} +.mb5 { + margin-bottom: 5px !important; +} +.mb10 { + margin-bottom: 10px !important; +} +.mb15 { + margin-bottom: 15px !important; +} +.mr5 { + margin-right: 5px !important; +} +.mr10 { + margin-right: 10px !important; +} +.mr15 { + margin-right: 15px !important; +} +.ml5 { + margin-left: 5px !important; +} +.ml10 { + margin-left: 10px !important; +} +.ml15 { + margin-left: 15px !important; } -.btn-origin{ - display: inline-block; +// align +.al-l { + text-align: left !important; +} +.al-r { + text-align: right !important; +} +.al-c { + text-align: center !important; +} + +// button +.btn-frame { + display: inline-block; + padding: 0 7px; + height: 34px; + line-height: 34px; + border-radius: 2px; + color: #fff; + font-size: 12px; + font-weight: 400; + border: 1px solid #000; + text-align: center; + font-family: 'Pretendard', sans-serif; + transition: all 0.17s ease-in-out; + cursor: pointer; + &.block { + width: 100%; + } + &.small { + font-family: 'Noto Sans JP', sans-serif; height: 30px; - padding: 0 14px; - border-radius: 2px; - background-color: #101010; - color: #fff; + line-height: 30px; font-size: 13px; - font-weight: 400; - transition: all .15s ease-in-out; - &.navy{ - background-color: #304961; - &:hover{ - background-color: #1083E3; - } + } + + &.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; } - &.grey{ - background-color: #94A0AD; - &:hover{ - background-color: #607F9A; - } + } + &.sub-tab { + height: 30px; + padding: 0 10px; + line-height: 28px; + font-family: 'Noto Sans JP', sans-serif; + background-color: #2d2d2d; + border: 1px solid #393939; + color: #aaa; + &.act, + &:hover { + background-color: #414e6c; + border: 1px solid #414e6c; + color: #fff; + font-weight: 500; } + } + &.roof { + height: 30px; + padding: 0 10px; + line-height: 28px; + font-family: 'Noto Sans JP', sans-serif; + background-color: transparent; + border: 1px solid #484848; + color: #fff; + &.blue { + background-color: #414e6c; + border: 1px solid #414e6c; + &:hover { + background-color: #414e6c; + border: 1px solid #414e6c; + } + } + &.white { + background-color: #fff; + border: 1px solid #fff; + color: #101010; + &:hover { + background-color: #fff; + border: 1px solid #fff; + color: #101010; + } + } + &:hover { + font-weight: 400; + background-color: transparent; + border: 1px solid #484848; + color: #fff; + } + } + &.self { + height: 30px; + padding: 0 10px; + line-height: 28px; + font-family: 'Noto Sans JP', sans-serif; + background-color: transparent; + border: 1px solid #676767; + color: #aaaaaa; + &:hover { + background-color: #272727; + border-color: #676767; + font-weight: 400; + } + } + &:hover, + &.act { + background-color: #1083e3; + border: 1px solid #1083e3; + color: #fff; + font-weight: 500; + } + &.block { + display: block; + width: 100%; + } + &.ico-flx { + display: flex; + align-items: center; + .ico { + margin-right: 10px; + } + &:hover, + &.act { + font-weight: 400; + } + } +} + +.btn-origin { + display: inline-block; + height: 30px; + padding: 0 10px; + border-radius: 2px; + background-color: #101010; + color: #fff; + font-size: 13px; + font-weight: 400; + transition: all 0.15s ease-in-out; + &.navy { + background-color: #304961; + &:hover { + background-color: #233546; + } + } + &.grey { + background-color: #94a0ad; + &:hover { + background-color: #607f9a; + } + } } // select -.sort-select{ - position: relative; - display: inline-block; - min-width: 100px; - height: 30px; - line-height: 30px; - padding: 0 25px 0 10px; - background-color: #373737; - border: 1px solid #3F3F3F; - border-radius: 2px; - border-top-left-radius: 2px; +.sort-select { + position: relative; + display: inline-block; + min-width: 100px; + height: 30px; + line-height: 30px; + padding: 0 25px 0 10px; + background-color: #373737; + border: 1px solid #3f3f3f; + border-radius: 2px; + border-top-left-radius: 2px; + color: #fff; + cursor: pointer; + p { + font-size: 13px; color: #fff; - cursor: pointer; - p{ - font-size: 13px; + height: 100%; + } + .select-item-wrap { + position: absolute; + top: 100%; + left: -1px; + clip-path: inset(0 0 100% 0); + width: calc(100% + 2px); + padding: 8px 0; + max-height: 100px; + overflow-y: auto; + background-color: #373737; + border: 1px solid #3f3f3f; + border-radius: 2px; + transition: all 0.17s ease-in-out; + visibility: hidden; + z-index: 999; + .select-item { + display: flex; + align-items: center; + padding: 8px 20px; + line-height: 1.4; + transition: all 0.17s ease-in-out; + button { + font-size: 12px; color: #fff; - height: 100%; + line-height: 1.4; + } + &:hover { + background-color: #2c2c2c; + } } - .select-item-wrap{ - position: absolute; - top: 100%; - left: -1px; - clip-path:inset(0 0 100% 0); - width: calc(100% + 2px); - padding: 8px 0; - max-height: 100px; - overflow-y: auto; - background-color: #373737; - border: 1px solid #3F3F3F; - border-radius: 2px; - transition: all 0.17s ease-in-out; - visibility: hidden; - z-index: 999; - .select-item{ - display: flex; - align-items: center; - padding: 8px 20px; - line-height: 1.4; - transition: all .17s ease-in-out; - button{ - font-size: 12px; - color: #fff; - line-height: 1.4; - } - &:hover{ - background-color: #2C2C2C; - } - } - &::-webkit-scrollbar { - width: 2px; - background-color: transparent; - - } - &::-webkit-scrollbar-thumb { - background-color: #5a5a5a; - border-radius: 10px; - } - &::-webkit-scrollbar-track { - background-color: transparent; - } + &::-webkit-scrollbar { + width: 2px; + background-color: transparent; } - &::after{ - content: ''; - position: absolute; - top: 50%; - right: 7px; - transform: translateY(-50%); - width: 10px; - height: 6px; - background: url(/static/images/common/select-arr.svg) no-repeat center; - background-size: cover; - transition: all .17s ease-in-out; + &::-webkit-scrollbar-thumb { + background-color: #5a5a5a; + border-radius: 10px; } - &.active{ - .select-item-wrap{ - clip-path: inset(0 0 0 0); - visibility: visible; - } - &:after{ - transform: translateY(-50%) rotate(-180deg); - } + &::-webkit-scrollbar-track { + background-color: transparent; } + } + &::after { + content: ''; + position: absolute; + top: 50%; + right: 7px; + transform: translateY(-50%); + width: 10px; + height: 6px; + background: url(/static/images/common/select-arr.svg) no-repeat center; + background-size: cover; + transition: all 0.17s ease-in-out; + } + &.active { + .select-item-wrap { + clip-path: inset(0 0 0 0); + visibility: visible; + } + &:after { + transform: translateY(-50%) rotate(-180deg); + } + } } -.select-light{ - position: relative; +.select-light { + position: relative; + display: block; + width: 100%; + height: 30px; + background: #fff url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat; + background-size: 10px 6px; + border: 1px solid #eee; + padding: 0 30px 0 10px; + font-size: 13px; + color: #45576f; + font-family: 'Noto Sans JP', sans-serif; + cursor: pointer; + &:disabled { + opacity: 1; + background-color: #fafafa; + color: #999; + cursor: default; + } + &.black { + color: #101010; + } + &.dark { + background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat; + color: #898989; + font-size: 12px; + border-radius: 2px; + border: none; + } +} + +// input +.form-input { + label { + display: block; + color: #aaa; + font-size: 12px; + font-weight: 500; + margin-bottom: 10px; + } +} +input[type='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; - background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat; - background-size: 10px 6px; + padding: 0 10px; border: 1px solid #eee; - padding: 0 30px 0 10px; - font-size: 13px; - color: #45576F; + border-radius: 2px; + background-color: #fff; font-family: 'Noto Sans JP', sans-serif; - cursor: pointer; - &:disabled{ - opacity: 1; - background-color: #FAFAFA; - color: #999; - cursor: default; - } - &.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; + 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; } + } } - -// 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 .17s ease-in-out; - .check-area{ - flex: none; - width: 30px; - height: 100%; - border-right: 1px solid #272727; - background: url(../../public/static/images/canvas/check-grey.svg)no-repeat center; - background-size: 11px 9px; +.check-btn { + display: flex; + align-items: center; + height: 30px; + background-color: #3a3a3a; + border-radius: 3px; + transition: all 0.17s ease-in-out; + .check-area { + flex: none; + width: 30px; + height: 100%; + border-right: 1px solid #272727; + background: url(../../public/static/images/canvas/check-grey.svg) no-repeat center; + background-size: 11px 9px; + } + .title-area { + padding: 0 10px; + font-size: 12px; + color: #898989; + font-weight: 400; + } + &.block { + width: 100%; + } + &:hover, + &.act { + background-color: #fff; + .check-area { + border-right: 1px solid #101010; + background: url(../../public/static/images/canvas/check-black.svg) no-repeat center; } - .title-area{ - padding: 0 10px; - font-size: 12px; - color: #898989; - font-weight: 400; - } - &.block{ - width: 100%; - } - &:hover, - &.act{ - background-color: #fff; - .check-area{ - border-right: 1px solid #101010; - background: url(../../public/static/images/canvas/check-black.svg)no-repeat center; - } - .title-area{ - color: #101010; - font-weight: 600; - } + .title-area { + color: #101010; + font-weight: 600; } + } } // arr-btn -.arr-btn{ - display: block; - height: 30px; - border-radius: 3px; - background-color: #3A3A3A; - padding: 0 11px; - text-align: left; - transition: all .17s ease-in-out; - span{ - position: relative; - font-size: 12px; - color: #898989; - font-weight: 400; - padding-right: 15px; - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 5px; - height: 8px; - background: url(../../public/static/images/canvas/arr_btn_ico.svg)no-repeat center; - } +.arr-btn { + display: block; + height: 30px; + border-radius: 3px; + background-color: #3a3a3a; + padding: 0 11px; + text-align: left; + transition: all 0.17s ease-in-out; + span { + position: relative; + font-size: 12px; + color: #898989; + font-weight: 400; + padding-right: 15px; + &:after { + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 5px; + height: 8px; + background: url(../../public/static/images/canvas/arr_btn_ico.svg) no-repeat center; + } + } + &:hover, + &.act { + background-color: #fff; + span { + color: #101010; + font-weight: 500; + &:after { + background: url(../../public/static/images/canvas/arr_btn_ico_black.svg) no-repeat center; + } + } + } + &.dark { + text-align: center; + background-color: #272727; + border: 1px solid #484848; + span { + color: #fff; + &:after { + background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center; + } } &:hover, - &.act{ - background-color: #fff; - span{ - color: #101010; - font-weight: 500; - &:after{ - background: url(../../public/static/images/canvas/arr_btn_ico_black.svg)no-repeat center; - } - } - } - &.dark{ - text-align: center; - background-color: #272727; - border: 1px solid #484848; - span{ - color: #Fff; - &:after{ - background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center; - } - } - &:hover, - &.act{ - background-color: #1083E3; - border: 1px solid #1083E3; - } + &.act { + background-color: #1083e3; + border: 1px solid #1083e3; } + } } // radio .d-check-radio, -.d-check-box{ - line-height: 1.1; +.d-check-box { + line-height: 1.1; + cursor: pointer; + input[type='checkbox'], + input[type='radio'] { + position: static; + margin-left: 0; cursor: pointer; - input[type=checkbox], - input[type=radio]{ - position: static; - margin-left: 0; - cursor: pointer; - opacity: 0; - z-index: 1; - flex: 0 0 auto; + opacity: 0; + z-index: 1; + flex: 0 0 auto; + } + label { + position: relative; + padding-left: 10px; + margin-bottom: 0; + word-break: break-all; + line-height: 1.2; + display: inline; + vertical-align: top; + color: #fff; + font-size: 13px; + font-weight: 400; + cursor: pointer; + } + &.light { + label { + color: #45576f; } - label{ - position: relative; - padding-left: 10px; - margin-bottom: 0; - word-break: break-all; - line-height: 1.2; - display: inline; - vertical-align: top; - color: #fff; - font-size: 13px; - font-weight: 400; - cursor: pointer; - } - &.light{ - label{ - color: #45576F; - } - } - &.no-text{ - label{ - padding-left: 0; - } + } + &.no-text { + label { + padding-left: 0; } + } } .d-check-radio { - label{ - &::before{ - cursor: pointer; - content: ""; - display: inline-block; - position: absolute; - width: 17px; - height: 17px; - top:2px; - left: 0; - margin-left: -12px; - border: 1px solid #999999; - border-radius: 100%; - background-color: transparent; - text-align:center; - font-size:13px; - line-height:1.4; - transition: border 0.15s ease-in-out, color 0.15s ease-in-out; - } - &::after{ - cursor: pointer; - content: ""; - display: inline-block; - position: absolute; - width: 9px; - height: 9px; - top:6px; - left: 4px; - margin-left: -12px; - border: none; - border-radius: 100%; - background-color: #fff; - text-align:center; - font-size:13px; - line-height:1.4; - opacity: 0; - visibility: hidden; - transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out; - } + label { + &::before { + cursor: pointer; + content: ''; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + top: 2px; + left: 0; + margin-left: -12px; + border: 1px solid #999999; + border-radius: 100%; + background-color: transparent; + text-align: center; + font-size: 13px; + line-height: 1.4; + transition: + border 0.15s ease-in-out, + color 0.15s ease-in-out; } - &.light{ - label{ - &:before{ - border-color: #D6D6D7; - } - &:after{ - background-color: #697C8F; - } - } + &::after { + cursor: pointer; + content: ''; + display: inline-block; + position: absolute; + width: 9px; + height: 9px; + top: 6px; + left: 4px; + margin-left: -12px; + border: none; + border-radius: 100%; + background-color: #fff; + text-align: center; + font-size: 13px; + line-height: 1.4; + opacity: 0; + visibility: hidden; + transition: + opacity 0.15s ease-in-out, + color 0.15s ease-in-out; } - input[type=radio]:checked + label::after{ - opacity: 1; - visibility: visible; + } + &.light { + label { + &:before { + border-color: #d6d6d7; + } + &:after { + background-color: #697c8f; + } } - &.pop{ - label{ - font-size: 12px; - &:before{ - width: 16px; - height: 16px; - border-color: #fff; - } - &:after{ - width: 8px; - height: 8px; - background-color: #fff; - } - } + } + input[type='radio']:checked + label::after { + opacity: 1; + visibility: visible; + } + &.pop { + label { + font-size: 12px; + &:before { + width: 16px; + height: 16px; + border-color: #fff; + } + &:after { + width: 8px; + height: 8px; + background-color: #fff; + } } + } } // check-box -.d-check-box{ - label{ - &::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; - } +.d-check-box { + label { + &.red { + color: #ffcaca; } - input[type=checkbox]:checked + label::after{ - content: ""; - display: inline-block; - position: absolute; - top: 1px; - left: -1px; - width: 5px; - height: 8px; - border: 2px solid #697C8F; - border-left: none; - border-top: none; - transform: translate(7.75px,4.5px) rotate(45deg); - -ms-transform: translate(7.75px,4.5px) rotate(45deg); + &::before { + cursor: pointer; + content: ''; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + top: 2px; + left: 0; + margin-left: -12px; + border: 1px solid #d6d6d7; + background-color: transparent; + transition: + border 0.15s ease-in-out, + color 0.15s ease-in-out; } - &.pop{ - input[type=checkbox]:checked + label::after{ - border-color: #fff; - } + &: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; } + } + 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; + } + &.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; - } -} \ No newline at end of file +.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; + } +} diff --git a/src/styles/_submodal.scss b/src/styles/_submodal.scss new file mode 100644 index 00000000..aa50dcdd --- /dev/null +++ b/src/styles/_submodal.scss @@ -0,0 +1,198 @@ +.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 { + 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; + } +} diff --git a/src/styles/_table.scss b/src/styles/_table.scss index a87bfc5b..e6b46a7c 100644 --- a/src/styles/_table.scss +++ b/src/styles/_table.scss @@ -1,205 +1,281 @@ -@mixin flexbox(){ - display: flex; - align-items: center; +@mixin flexbox() { + display: flex; + align-items: center; } -table{ - .overflow-lab{ +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; 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; + } + } + } } - .al-l{ - text-align: left !important; - } -} - -.common-table{ - table{ + } + &.overflow-y { + table { + table-layout: fixed; + border-collapse: collapse; + thead { + display: 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; - } - span{ - font-size: 13px; - color: #697C8F; - font-weight: normal; - } - } - &:last-child{ - th,td{border-bottom: none;} - } - } - } - .flx-box{ - @include flexbox; - } - } - .tooltips{ + width: 100%; + border-collapse: collapse; + } + tbody { 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; + 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); + } + } } + } } - -.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: 0 10px; - font-size: 12px; - 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; - } - } - tbody{ - td{ - font-size: 12px; - color: #fff; - font-weight: 400; - border: 1px solid #505050; - } - } - } -} \ No newline at end of file diff --git a/src/styles/contents.scss b/src/styles/contents.scss index 38e7ff83..08c322e9 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 +@import '_canvasside.scss';