최초 세팅
This commit is contained in:
bd091
154
src/main/resources/static/css/web/receipt.css
Normal file
154
src/main/resources/static/css/web/receipt.css
Normal file
@@ -0,0 +1,154 @@
|
||||
.project_wrap {width:100%; min-width:1080px; margin:0 auto;}
|
||||
|
||||
/*오른쪽영역*/
|
||||
.project_wrap .content_section {margin-top:50px; width:100%; min-width:1080px; display:table;}
|
||||
.project_wrap .content_section .hospital_wrap {width: calc(100% - 72px); min-width:calc(1080px - 72px); height:calc(100vh - 50px); float:left; position:relative;}
|
||||
|
||||
/* 왼쪽_메뉴 영역 */
|
||||
.project_wrap .content_section .hospital_wrap .left_box {position:absolute; width:240px; height:calc(100vh - 50px); overflow:auto; padding:10px 20px;}
|
||||
.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list {width:100%;}
|
||||
.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list .title_menu {width:100%; height:auto; margin:20px 0 10px 0; padding:0; font-size:14px; font-weight:700;}
|
||||
.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list .title_menu.first {margin-top:0;}
|
||||
.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list a {width:100%; height:100%; display:block; margin-bottom:8px; padding:8px; font-size:14px; text-align:left; border-radius:5px;}
|
||||
.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list a.on {background:#3985EA; border:none;}
|
||||
.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list a:hover {background:#EDF5FF;}
|
||||
.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list a.on:hover {background:#3985EA;}
|
||||
.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list li {width:100%; height:36px; margin-bottom:8px;}
|
||||
.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list li a.on {color:#fff;}
|
||||
.project_wrap .content_section .hospital_wrap .left_box a.back {font-size:14px; font-weight:700; color:#3985EA;}
|
||||
.project_wrap .content_section .hospital_wrap .left_box a.back img {margin:-3px 5px 0 0;}
|
||||
|
||||
/* 센터쪽 */
|
||||
.project_wrap .content_section .hospital_wrap .center_box {width:calc(100% - 240px); height:calc(100vh - 50px); position:absolute; left:240px; padding:10px 10px 10px 0;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_title {min-width:100px; padding-left:10px; font-size:18px; font-weight:700; line-height:50px;}
|
||||
|
||||
/* total_list */
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap { width:100%; margin-bottom:20px; display:table; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box { width:400px; height:38px; float:left; position:relative; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box ul { width:100%; padding:8px 15px; border:1px solid #E9ECF0; border-radius:5px; background:#fff; position:absolute; top:0; left:0; z-index: 1;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box ul li { width:100%; display:table; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box ul li.border_btm { border-bottom:1px solid #E9ECF0; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box ul li p { width:40%; margin-bottom:10px; display:inline-block; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box ul li p.division { width:20%; font-weight:700; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box ul li p.last { text-align:right; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box ul li p.last span { font-weight:700; margin-right:5px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box ul li.border_under p.division { margin-top:10px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box ul li.last p { margin-bottom:0; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box ul li:not(.first) { display:none; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box ul.open li { display:table; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box ul li.first p { margin-bottom:0; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box ul.open li.first p { margin-bottom:10px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .button_box { margin-left:10px; float:left; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .button_box button { color:#3985EA; border:1px solid #E9ECF0; border-radius:5px; background:#fff; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .button_box button:hover { background: none !important; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .button_box button img { margin-top:-2px; margin-left:10px; transform:rotate(-90deg); }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .button_box button.open img { margin-top:-2px; transform:rotate(90deg); }
|
||||
|
||||
/* filter_box */
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box {width:100%; padding:20px 0; display:table;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .calendar_box { display:flex; position:relative; border-radius:8px; margin-left:10px; float:left; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .calendar_box .date_box {position:relative; width:140px; height:36px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .calendar_box .date_box.last {margin-left:0;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .calendar_box .date_box img {position:absolute; top:50%; transform:translateY(-50%); left:10px; z-index:1; width:22px;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .calendar_box .date_box .date_picker {line-height:34px; display:block; width:100%; font-size:14px; padding:0 12px; padding-left:40px; outline:none; border:1px solid #E9ECF0; border-radius:5px;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .calendar_box .date_box input[type="date"]::-webkit-calendar-picker-indicator {display:none;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .calendar_box .date_box .date_picker { height:36px; -webkit-appearance:none; -moz-appearance:none; appearance:none; position:absolute; cursor:pointer;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .calendar_box .slash {color:#000; font-size:14px; font-weight:400; line-height:36px; margin:0 5px; width:6px; display:block;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box {width:140px; height:36px; border:1px solid #E9ECF0; border-radius:5px; margin-left:10px; float:left; background:url(../../image/web/select_arrow.svg) no-repeat 95% 55%/20px auto #fff;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box.first { width:100px; margin-left:0;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box.active {z-index:10;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .label {width:100%; height:100%; padding:0 10px; outline:none; font-size:14px; font-weight:400; text-align:left; color:#494E53; cursor:pointer; background:none;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .select_option_list { min-width:100%; padding:10px; border-radius:5px; border:solid 1px #E9ECF0; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box > .select_box:nth-child(2) .select_option_list {width:170px;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .select_option_list .option_list_item { width:100%; transition:.1s; position:relative; display:table; font-size:14px; color:#494E53; line-height:30px;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .select_option_list .search_box {width:100%; height:30px;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .select_option_list .search_box img {position:absolute; top:50%; left:5px; transform:translatey(-50%);}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .select_option_list .search_box input {width:100%; height:100%; padding-left:30px; border:1px solid #E9ECF0; border-radius:5px; font-size:12px;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .select_option_list .search_box input::placeholder {color:#B5BDC4;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .select_option_list .option_list_item label {line-height:30px; margin-bottom:0px; clear:both; font-weight:400;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .select_option_list .option_list_item .chk_box {cursor:pointer; font-size:14px; text-indent:25px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .select_option_list .option_list_item .chk_box .on {width:18px; height:18px; position:absolute; top:50%; left:0; transform:translateY(-50%); border:solid 2px #3985EA; box-sizing:border-box; border-radius:3px;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .select_option_list .option_list_item .chk_box input[type="radio"] { display:none; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .select_option_list .option_list_item .chk_box input[type="radio"]:checked + .on {background:#3985EA; border:none;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .select_option_list .option_list_item .chk_box input[type="radio"]:checked + .on:after {content:''; display:block; width:6px; height:10px; border:solid #fff; border-width:0 2px 2px 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); position:absolute; left:6px; top:2px;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .search_box {width:170px; height:36px; position:relative; float:left;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .search_box img {position:absolute; top:50%; left:10px; transform:translatey(-50%);}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .search_box input {width:100%; height:100%; padding-left:40px; border:1px solid #E9ECF0; border-radius:5px; font-size:14px;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .search_box input::placeholder {color:#B5BDC4;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box > .search_list {float:left; margin-left:10px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box > .search_list .search_btn {margin-left:5px; color:#fff; border-radius:5px; background:#3985EA;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .right_btn_box {float:right;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .right_btn_box .download_btn {padding-left:35px; position:relative; background:#3985EA; color:#fff; border-radius:5px; margin-left:10px; float:left;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .right_btn_box .download_btn img {position:absolute; top:50%; left:15px; transform:translateY(-50%);}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .right_btn_box .download_btn p { color:#fff; }
|
||||
|
||||
/* 페이지게이션 */
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box {position:absolute; bottom:20px; width:100%; height:24px;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation {height:24px;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination {margin:0 auto; display:table;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li {display:inline-block; padding:0}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:first-child a, .project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:last-child a {position:relative; width:24px; height:24px; background:none;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:first-child a:hover, .project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:last-child a:hover {background:none;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:first-child a img {position:absolute; top:50%; left:50%; transform:translate3d(-50%, -50%, 0); width:10px;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:last-child a img {position:absolute; top:50%; left:50%; transform:translate3d(-50%, -50%, 0) rotate(180deg); width:10px;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li a {width:24px; height:24px; padding:0; border:none; text-align:center; line-height:22px; font-size:14px; font-weight:500; background:#FFF; font-size:14px;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li a:hover, .project_wrap .content_section .hospital_wrap .center_box .right_note .page_box .navigation .pagination li a:focus {background:#3985EA; color:#fff; font-weight:700;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li.active a {background:#3985EA; color:#fff;}
|
||||
.project_wrap .content_section .hospital_wrap .center_box .table_box {width:100%; height:calc(100% - 238px); overflow:auto; background:#fff; border:solid 1px #E9ECF0; border-radius:5px;}
|
||||
|
||||
/* table_box */
|
||||
|
||||
/*반응형 View*/
|
||||
@media only screen and (max-width:1600px) {
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box { width:100px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .search_box { width:120px; }
|
||||
}
|
||||
|
||||
@media only screen and (max-width:1500px) {
|
||||
.project_wrap .content_section .hospital_wrap .left_box { width:160px; padding:10px 15px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box { width:calc(100% - 160px); left:160px; }
|
||||
}
|
||||
|
||||
@media only screen and (max-width:1280px) {
|
||||
.project_wrap .content_section .hospital_wrap { width:calc(100% - 60px); }
|
||||
.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list .title_menu { font-size:12px; }
|
||||
.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list li { height:32px; margin-bottom:5px; }
|
||||
.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list li a { font-size:12px; }
|
||||
.project_wrap .content_section .hospital_wrap .left_box a.back { font-size:12px; }
|
||||
.project_wrap .content_section .hospital_wrap .left_box a.back img { width:7px; }
|
||||
.project_wrap .content_section .hospital_wrap .left_box .sub_menu_list { margin-top:20px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_title { min-width:80px; height:40px; font-size:16px; line-height:40px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box ul.total_list li p { font-size:12px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box { padding:15px 0; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box.first { width:80px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box { width:100px; height:32px; background-size:18px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .label { font-size:12px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box .select_option_list .option_list_item { font-size:12px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .calendar_box .date_box { width:115px; height:32px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .calendar_box .date_box img { width:20px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .calendar_box .date_box .date_picker { height:32px; padding-left:35px; font-size:12px; line-height:32px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .calendar_box .slash { line-height:32px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .search_list .search_box { width:85px; height:32px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .search_list .search_box img { width:22px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .search_list .search_box input { height:32px; padding-left:35px; font-size:12px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .right_btn_box .download_btn { margin-left:5px; padding-left:10px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .right_btn_box .download_btn p { display:none; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .filter_box .right_btn_box .download_btn img { width:12px; margin-top:-3px; position:static; transform:none; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap { margin-bottom:15px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box { height:34px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box ul { padding:6px 15px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box ul li p { margin-bottom:5px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .total_list_wrap .total_list_box ul.open li.first p { margin-bottom:5px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .table_box { height:calc(100% - 204px); }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box { height:23px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation { height:23px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li a { width:23px; height:23px; font-size:12px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:first-child a,
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:last-child a { width:23px; height:23px; }
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:first-child a img,
|
||||
.project_wrap .content_section .hospital_wrap .center_box .page_box .navigation .pagination li:last-child a img { width:9px; }
|
||||
}
|
||||
|
||||
@media only screen and (max-width:1080px) {
|
||||
.project_wrap .content_section .hospital_wrap { width:calc(100% - 50px); }
|
||||
}
|
||||
Reference in New Issue
Block a user