Merge remote-tracking branch 'z-eactive/jenkins_with_weblogic' into jenkins_with_weblogic
# Conflicts: # src/main/resources/static/css/main.css # src/main/resources/static/sass/base/_kjb-font.scss
This commit is contained in:
Rinjae
@@ -572,40 +572,40 @@ hr {
|
||||
@font-face {
|
||||
font-family: "Spoqa Han Sans Neo";
|
||||
font-weight: 700;
|
||||
src: local("Spoqa Han Sans Neo Bold"), url("/font/kjb/font/kjb/SpoqaHanSansNeo-Bold.woff2") format("woff2"), url("/font/kjb/font/kjb/SpoqaHanSansNeo-Bold.woff") format("woff"), url("/font/kjb/font/kjb/SpoqaHanSansNeo-Bold.ttf") format("truetype");
|
||||
src: local("Spoqa Han Sans Neo Bold"), url("/font/kjb/SpoqaHanSansNeo-Bold.woff2") format("woff2"), url("/font/kjb/SpoqaHanSansNeo-Bold.woff") format("woff"), url("/font/kjb/SpoqaHanSansNeo-Bold.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Spoqa Han Sans Neo";
|
||||
font-weight: 400;
|
||||
src: local("Spoqa Han Sans Neo Regular"), url("/font/kjb/font/kjb/SpoqaHanSansNeo-Regular.woff2") format("woff2"), url("/font/kjb/font/kjb/SpoqaHanSansNeo-Regular.woff") format("woff"), url("/font/kjb/font/kjb/SpoqaHanSansNeo-Regular.ttf") format("truetype");
|
||||
src: local("Spoqa Han Sans Neo Regular"), url("/font/kjb/SpoqaHanSansNeo-Regular.woff2") format("woff2"), url("/font/kjb/SpoqaHanSansNeo-Regular.woff") format("woff"), url("/font/kjb/SpoqaHanSansNeo-Regular.ttf") format("truetype");
|
||||
}
|
||||
@font-face {}
|
||||
/* SpoqaHanSans */
|
||||
@font-face {
|
||||
font-family: "SpoqaHanSans";
|
||||
font-weight: 400;
|
||||
src: url("/font/kjb/font/kjb/SpoqaHanSansRegular.woff") format("woff"), url("/font/kjb/font/kjb/SpoqaHanSansRegular.woff2") format("woff2"), url("/font/kjb/font/kjb/SpoqaHanSansRegular.ttf") format("truetype");
|
||||
src: url("/font/kjb/SpoqaHanSansRegular.woff") format("woff"), url("/font/kjb/SpoqaHanSansRegular.woff2") format("woff2"), url("/font/kjb/SpoqaHanSansRegular.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "SpoqaHanSansBold";
|
||||
font-weight: 700;
|
||||
src: url("/font/kjb/font/kjb/SpoqaHanSansBold.woff") format("woff"), url("/font/kjb/font/kjb/SpoqaHanSansBold.woff2") format("woff2"), url("/font/kjb/font/kjb/SpoqaHanSansBold.ttf") format("truetype");
|
||||
src: url("/font/kjb/SpoqaHanSansBold.woff") format("woff"), url("/font/kjb/SpoqaHanSansBold.woff2") format("woff2"), url("/font/kjb/SpoqaHanSansBold.ttf") format("truetype");
|
||||
}
|
||||
/* HGGGothicssi */
|
||||
@font-face {
|
||||
font-family: "HGGGothicssi";
|
||||
font-weight: 300;
|
||||
src: url("/font/kjb/font/kjb/HGGGothicssi40g.woff") format("woff"), url("/font/kjb/font/kjb/HGGGothicssi40g.woff2") format("woff2"), url("/font/kjb/font/kjb/HGGGothicssi40g.ttf") format("truetype");
|
||||
src: url("/font/kjb/HGGGothicssi40g.woff") format("woff"), url("/font/kjb/HGGGothicssi40g.woff2") format("woff2"), url("/font/kjb/HGGGothicssi40g.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "HGGGothicssi";
|
||||
font-weight: 400;
|
||||
src: url("/font/kjb/font/kjb/HGGGothicssi60g.woff") format("woff"), url("/font/kjb/font/kjb/HGGGothicssi60g.woff2") format("woff2"), url("/font/kjb/font/kjb/HGGGothicssi60g.ttf") format("truetype");
|
||||
src: url("/font/kjb/HGGGothicssi60g.woff") format("woff"), url("/font/kjb/HGGGothicssi60g.woff2") format("woff2"), url("/font/kjb/HGGGothicssi60g.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "HGGGothicssi";
|
||||
font-weight: 700;
|
||||
src: url("/font/kjb/font/kjb/HGGGothicssi80g.woff") format("woff"), url("/font/kjb/font/kjb/HGGGothicssi80g.woff2") format("woff2"), url("/font/kjb/font/kjb/HGGGothicssi80g.ttf") format("truetype");
|
||||
src: url("/font/kjb/HGGGothicssi80g.woff") format("woff"), url("/font/kjb/HGGGothicssi80g.woff2") format("woff2"), url("/font/kjb/HGGGothicssi80g.ttf") format("truetype");
|
||||
}
|
||||
:root {
|
||||
--primary-blue: #4B9BFF;
|
||||
@@ -4440,6 +4440,11 @@ select.form-control {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.modal-dialog {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 30px 50px 20px;
|
||||
@@ -4505,11 +4510,14 @@ select.form-control {
|
||||
@media (max-width: 768px) {
|
||||
.modal-footer {
|
||||
padding: 16px 24px 24px;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
.modal-footer .btn,
|
||||
.modal-footer .btn-modal-cancel,
|
||||
.modal-footer .btn-modal-confirm {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 46px;
|
||||
font-size: 15px;
|
||||
}
|
||||
@@ -15290,6 +15298,7 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
min-width: 116px;
|
||||
}
|
||||
|
||||
.user-empty-state {
|
||||
@@ -15540,6 +15549,200 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.user-management-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 24px 16px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.user-management-container .table-controls {
|
||||
display: contents;
|
||||
}
|
||||
.user-management-container .table-controls .total-count {
|
||||
order: 1;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1.5px solid #212529;
|
||||
}
|
||||
.user-management-container .table-controls .total-count strong {
|
||||
color: #0049b4;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
.user-management-container .table-controls .search-box {
|
||||
order: 4;
|
||||
width: 100%;
|
||||
}
|
||||
.user-management-container .table-controls .search-box .btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
}
|
||||
.user-management-container .list-table {
|
||||
order: 2;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.user-management-container .list-table .list-table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 8px;
|
||||
background: #3BA4ED;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
.user-management-container .list-table .list-table-header .header-cell {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
padding: 0 4px;
|
||||
justify-content: center;
|
||||
}
|
||||
.user-management-container .list-table .list-table-header .header-cell:nth-child(1) {
|
||||
width: 26px !important;
|
||||
min-width: 26px;
|
||||
flex: none;
|
||||
}
|
||||
.user-management-container .list-table .list-table-header .header-cell:nth-child(2) {
|
||||
width: 60px !important;
|
||||
min-width: 60px;
|
||||
flex: none;
|
||||
}
|
||||
.user-management-container .list-table .list-table-header .header-cell:nth-child(3) {
|
||||
flex: 1 !important;
|
||||
min-width: 100px;
|
||||
}
|
||||
.user-management-container .list-table .list-table-header .header-cell:nth-child(4) {
|
||||
width: 39px !important;
|
||||
min-width: 39px;
|
||||
flex: none;
|
||||
}
|
||||
.user-management-container .list-table .list-table-header .header-cell:nth-child(5) {
|
||||
width: 61px !important;
|
||||
min-width: 61px;
|
||||
flex: none;
|
||||
}
|
||||
.user-management-container .list-table .list-table-header .header-cell:nth-child(6) {
|
||||
display: none;
|
||||
}
|
||||
.user-management-container .list-table .list-table-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.user-management-container .list-table .list-table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 8px;
|
||||
gap: 0;
|
||||
}
|
||||
.user-management-container .list-table .list-table-row:nth-child(even) {
|
||||
background-color: #EDF5FD;
|
||||
}
|
||||
.user-management-container .list-table .list-table-row:nth-child(odd) {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.user-management-container .list-table .list-table-row:hover {
|
||||
background-color: rgba(0, 73, 180, 0.08);
|
||||
}
|
||||
.user-management-container .list-table .list-table-row .row-cell {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #212529;
|
||||
padding: 0 4px;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.user-management-container .list-table .list-table-row .row-cell::before {
|
||||
display: none;
|
||||
}
|
||||
.user-management-container .list-table .list-table-row .row-cell:nth-child(1) {
|
||||
width: 26px !important;
|
||||
min-width: 26px;
|
||||
flex: none;
|
||||
}
|
||||
.user-management-container .list-table .list-table-row .row-cell:nth-child(2) {
|
||||
width: 60px !important;
|
||||
min-width: 60px;
|
||||
flex: none;
|
||||
}
|
||||
.user-management-container .list-table .list-table-row .row-cell:nth-child(2) a {
|
||||
color: #212529;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
}
|
||||
.user-management-container .list-table .list-table-row .row-cell:nth-child(3) {
|
||||
flex: 1 !important;
|
||||
min-width: 100px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.user-management-container .list-table .list-table-row .row-cell:nth-child(4) {
|
||||
width: 39px !important;
|
||||
min-width: 39px;
|
||||
flex: none;
|
||||
}
|
||||
.user-management-container .list-table .list-table-row .row-cell:nth-child(5) {
|
||||
width: 61px !important;
|
||||
min-width: 61px;
|
||||
flex: none;
|
||||
}
|
||||
.user-management-container .list-table .list-table-row .row-cell:nth-child(6), .user-management-container .list-table .list-table-row .row-cell.row-actions {
|
||||
display: none;
|
||||
}
|
||||
.user-management-container .list-table .list-table-row .row-actions {
|
||||
display: none;
|
||||
}
|
||||
.user-management-container .user-empty-state {
|
||||
padding: 48px 16px;
|
||||
}
|
||||
.user-management-container .user-empty-state .empty-icon {
|
||||
font-size: 60px;
|
||||
}
|
||||
.user-management-container .user-empty-state h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.user-management-container .user-empty-state p {
|
||||
font-size: 14px;
|
||||
}
|
||||
.user-management-container .pagination {
|
||||
order: 3;
|
||||
gap: 13px;
|
||||
padding: 24px 0;
|
||||
}
|
||||
.user-management-container .pagination .pagination-btn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.user-management-container .pagination .pagination-btn i, .user-management-container .pagination .pagination-btn svg {
|
||||
font-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.user-management-container .pagination .pagination-numbers {
|
||||
gap: 13px;
|
||||
}
|
||||
.user-management-container .pagination .pagination-number {
|
||||
min-width: 10px;
|
||||
height: 21px;
|
||||
font-size: 15px;
|
||||
color: #5f666c;
|
||||
font-weight: 400;
|
||||
}
|
||||
.user-management-container .pagination .pagination-number.active {
|
||||
font-weight: 700;
|
||||
color: #212529;
|
||||
}
|
||||
}
|
||||
.commission-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -2,9 +2,9 @@
|
||||
font-family: 'Spoqa Han Sans Neo';
|
||||
font-weight: 700;
|
||||
src: local('Spoqa Han Sans Neo Bold'),
|
||||
url('/font/kjb/font/kjb/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
|
||||
url('/font/kjb/font/kjb/SpoqaHanSansNeo-Bold.woff') format('woff'),
|
||||
url('/font/kjb/font/kjb/SpoqaHanSansNeo-Bold.ttf') format('truetype')
|
||||
url('/font/kjb/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
|
||||
url('/font/kjb/SpoqaHanSansNeo-Bold.woff') format('woff'),
|
||||
url('/font/kjb/SpoqaHanSansNeo-Bold.ttf') format('truetype')
|
||||
;
|
||||
//unicode-range: U+AC00-D7AF, U+0000-0040, U+005B-0060, U+007B-007F
|
||||
}
|
||||
@@ -13,9 +13,9 @@
|
||||
font-family: 'Spoqa Han Sans Neo';
|
||||
font-weight: 400;
|
||||
src: local('Spoqa Han Sans Neo Regular'),
|
||||
url('/font/kjb/font/kjb/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
|
||||
url('/font/kjb/font/kjb/SpoqaHanSansNeo-Regular.woff') format('woff'),
|
||||
url('/font/kjb/font/kjb/SpoqaHanSansNeo-Regular.ttf') format('truetype')
|
||||
url('/font/kjb/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
|
||||
url('/font/kjb/SpoqaHanSansNeo-Regular.woff') format('woff'),
|
||||
url('/font/kjb/SpoqaHanSansNeo-Regular.ttf') format('truetype')
|
||||
;
|
||||
//unicode-range: U+AC00-D7AF, U+0000-0040, U+005B-0060, U+007B-007F
|
||||
}
|
||||
@@ -30,37 +30,37 @@
|
||||
@font-face {
|
||||
font-family:'SpoqaHanSans';
|
||||
font-weight: 400;
|
||||
src:url('/font/kjb/font/kjb/SpoqaHanSansRegular.woff') format('woff'),
|
||||
url('/font/kjb/font/kjb/SpoqaHanSansRegular.woff2') format('woff2'),
|
||||
url('/font/kjb/font/kjb/SpoqaHanSansRegular.ttf') format('truetype');
|
||||
src:url('/font/kjb/SpoqaHanSansRegular.woff') format('woff'),
|
||||
url('/font/kjb/SpoqaHanSansRegular.woff2') format('woff2'),
|
||||
url('/font/kjb/SpoqaHanSansRegular.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family:'SpoqaHanSansBold';
|
||||
font-weight: 700;
|
||||
src:url('/font/kjb/font/kjb/SpoqaHanSansBold.woff') format('woff'),
|
||||
url('/font/kjb/font/kjb/SpoqaHanSansBold.woff2') format('woff2'),
|
||||
url('/font/kjb/font/kjb/SpoqaHanSansBold.ttf') format('truetype');
|
||||
src:url('/font/kjb/SpoqaHanSansBold.woff') format('woff'),
|
||||
url('/font/kjb/SpoqaHanSansBold.woff2') format('woff2'),
|
||||
url('/font/kjb/SpoqaHanSansBold.ttf') format('truetype');
|
||||
}
|
||||
|
||||
/* HGGGothicssi */
|
||||
@font-face {
|
||||
font-family:'HGGGothicssi';
|
||||
font-weight: 300;
|
||||
src:url('/font/kjb/font/kjb/HGGGothicssi40g.woff') format('woff'),
|
||||
url('/font/kjb/font/kjb/HGGGothicssi40g.woff2') format('woff2'),
|
||||
url('/font/kjb/font/kjb/HGGGothicssi40g.ttf') format('truetype');
|
||||
src:url('/font/kjb/HGGGothicssi40g.woff') format('woff'),
|
||||
url('/font/kjb/HGGGothicssi40g.woff2') format('woff2'),
|
||||
url('/font/kjb/HGGGothicssi40g.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family:'HGGGothicssi';
|
||||
font-weight: 400;
|
||||
src:url('/font/kjb/font/kjb/HGGGothicssi60g.woff') format('woff'),
|
||||
url('/font/kjb/font/kjb/HGGGothicssi60g.woff2') format('woff2'),
|
||||
url('/font/kjb/font/kjb/HGGGothicssi60g.ttf') format('truetype');
|
||||
src:url('/font/kjb/HGGGothicssi60g.woff') format('woff'),
|
||||
url('/font/kjb/HGGGothicssi60g.woff2') format('woff2'),
|
||||
url('/font/kjb/HGGGothicssi60g.ttf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family:'HGGGothicssi';
|
||||
font-weight: 700;
|
||||
src:url('/font/kjb/font/kjb/HGGGothicssi80g.woff') format('woff'),
|
||||
url('/font/kjb/font/kjb/HGGGothicssi80g.woff2') format('woff2'),
|
||||
url('/font/kjb/font/kjb/HGGGothicssi80g.ttf') format('truetype');
|
||||
src:url('/font/kjb/HGGGothicssi80g.woff') format('woff'),
|
||||
url('/font/kjb/HGGGothicssi80g.woff2') format('woff2'),
|
||||
url('/font/kjb/HGGGothicssi80g.ttf') format('truetype');
|
||||
}
|
||||
@@ -151,6 +151,10 @@
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal header with gradient background
|
||||
@@ -226,11 +230,14 @@
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: 16px 24px 24px;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
|
||||
.btn,
|
||||
.btn-modal-cancel,
|
||||
.btn-modal-confirm {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 46px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@@ -106,6 +106,7 @@
|
||||
border-radius: $border-radius-sm;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-medium;
|
||||
min-width: 116px;
|
||||
}
|
||||
|
||||
// Empty State
|
||||
@@ -382,3 +383,265 @@
|
||||
justify-content: center;
|
||||
margin-top: $spacing-2xl;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// User Management Mobile Styles - Figma Design (node 1161-10519)
|
||||
// 사용자 관리 모바일 디자인
|
||||
// -----------------------------------------------------------------------------
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
.user-management-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-lg;
|
||||
padding: $spacing-lg $spacing-md;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Table Controls - 모바일 레이아웃 (display: contents로 자식들이 container flex에 참여)
|
||||
.table-controls {
|
||||
display: contents;
|
||||
|
||||
.total-count {
|
||||
order: 1;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
color: $black;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1.5px solid #212529;
|
||||
|
||||
strong {
|
||||
color: #0049b4;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 이용자 추가 버튼 - 테이블 아래로 이동
|
||||
.search-box {
|
||||
order: 4;
|
||||
width: 100%;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// List Table - 모바일 디자인 (코너 라운드 적용)
|
||||
.list-table {
|
||||
order: 2;
|
||||
background: $white;
|
||||
border-radius: $border-radius-lg;
|
||||
overflow: hidden;
|
||||
|
||||
// Header - 모바일에서 표시 (Figma: 40px 높이, #3BA4ED 배경)
|
||||
.list-table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 8px;
|
||||
background: #3BA4ED;
|
||||
border-radius: $border-radius-md $border-radius-md 0 0;
|
||||
|
||||
.header-cell {
|
||||
font-size: 14px;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $white;
|
||||
padding: 0 4px;
|
||||
justify-content: center;
|
||||
|
||||
// NO 컬럼 - 26px
|
||||
&:nth-child(1) {
|
||||
width: 26px !important;
|
||||
min-width: 26px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
// 성명 컬럼 - 60px
|
||||
&:nth-child(2) {
|
||||
width: 60px !important;
|
||||
min-width: 60px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
// 이메일 아이디 컬럼 - flex 1
|
||||
&:nth-child(3) {
|
||||
flex: 1 !important;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
// 권한 컬럼 - 39px
|
||||
&:nth-child(4) {
|
||||
width: 39px !important;
|
||||
min-width: 39px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
// 계정상태 컬럼 - 61px
|
||||
&:nth-child(5) {
|
||||
width: 61px !important;
|
||||
min-width: 61px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
// 설정 컬럼 - 모바일에서 숨김
|
||||
&:nth-child(6) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Body
|
||||
.list-table-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// Row - 모바일 디자인 (Figma: 40px 높이)
|
||||
.list-table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 8px;
|
||||
gap: 0;
|
||||
|
||||
// 짝수/홀수 배경색
|
||||
&:nth-child(even) {
|
||||
background-color: #EDF5FD;
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($primary-blue, 0.08);
|
||||
}
|
||||
|
||||
.row-cell {
|
||||
font-size: 13px;
|
||||
font-weight: $font-weight-regular;
|
||||
color: #212529;
|
||||
padding: 0 4px;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
// data-label 숨김
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// NO 컬럼 - 26px
|
||||
&:nth-child(1) {
|
||||
width: 26px !important;
|
||||
min-width: 26px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
// 성명 컬럼 - 60px
|
||||
&:nth-child(2) {
|
||||
width: 60px !important;
|
||||
min-width: 60px;
|
||||
flex: none;
|
||||
|
||||
a {
|
||||
color: #212529;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
// 이메일 아이디 컬럼 - flex 1
|
||||
&:nth-child(3) {
|
||||
flex: 1 !important;
|
||||
min-width: 100px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
// 권한 컬럼 - 39px
|
||||
&:nth-child(4) {
|
||||
width: 39px !important;
|
||||
min-width: 39px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
// 계정상태 컬럼 - 61px
|
||||
&:nth-child(5) {
|
||||
width: 61px !important;
|
||||
min-width: 61px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
// 설정 컬럼 (row-actions) - 모바일에서 숨김
|
||||
&:nth-child(6),
|
||||
&.row-actions {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// row-actions 클래스 직접 숨김
|
||||
.row-actions {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Empty State - 모바일 조정
|
||||
.user-empty-state {
|
||||
padding: $spacing-3xl $spacing-md;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination - 모바일 디자인 (테이블 다음, 버튼 이전)
|
||||
.pagination {
|
||||
order: 3;
|
||||
gap: 13px;
|
||||
padding: $spacing-lg 0;
|
||||
|
||||
.pagination-btn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
i, svg {
|
||||
font-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-numbers {
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.pagination-number {
|
||||
min-width: 10px;
|
||||
height: 21px;
|
||||
font-size: 15px;
|
||||
color: #5f666c;
|
||||
font-weight: $font-weight-regular;
|
||||
|
||||
&.active {
|
||||
font-weight: $font-weight-bold;
|
||||
color: #212529;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user