djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions 10 Packages Projects Releases Wiki Activity

테이블 디자인 수정

Browse Source
This commit is contained in:
현성필
2025-12-19 15:04:56 +09:00
parent 469cf6f3d0
commit 128615ba64
4 changed files with 39 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+17 -10
View File
@@ -5388,6 +5388,8 @@ select.form-control {
background: #FFFFFF;
border-radius: 12px;
overflow: hidden;
border: 1px solid #E5E7EB;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.list-table-wrapper {
overflow-x: auto;
@@ -5397,7 +5399,7 @@ select.form-control {
display: flex;
align-items: center;
background: #3BA4ED;
height: 72px;
height: 48px;
padding: 0 24px;
}
@media (max-width: 1024px) {
@@ -5410,10 +5412,11 @@ select.form-control {
align-items: center;
justify-content: center;
padding: 8px 16px;
font-size: 20px;
font-weight: 700;
font-size: 13px;
font-weight: 600;
color: #FFFFFF;
text-align: center;
letter-spacing: 0.3px;
}
.list-table .list-table-body {
display: flex;
@@ -5422,18 +5425,22 @@ select.form-control {
.list-table .list-table-row {
display: flex;
align-items: center;
height: 54px;
height: 48px;
padding: 8px 24px;
transition: all 0.3s ease;
transition: all 0.15s ease;
border-bottom: 1px solid #F3F4F6;
}
.list-table .list-table-row:last-child {
border-bottom: none;
}
.list-table .list-table-row:nth-child(even) {
background-color: #EDF5FD;
background-color: #F8FBFE;
}
.list-table .list-table-row:nth-child(odd) {
background-color: #FFFFFF;
}
.list-table .list-table-row:hover {
background-color: rgba(0, 73, 180, 0.08);
background-color: #EDF5FD;
}
@media (max-width: 1024px) {
.list-table .list-table-row {
@@ -5448,8 +5455,8 @@ select.form-control {
align-items: center;
justify-content: center;
padding: 8px 16px;
font-size: 16px;
color: #515151;
font-size: 14px;
color: #374151;
text-align: center;
white-space: nowrap;
}
@@ -5886,7 +5893,7 @@ select.form-control {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 20px;
padding: 16px 24px;
font-size: 18px;
font-weight: 700;
color: #212529;
src/main/resources/static/css/main.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/sass/components/_accordion.scss
+1 -1
View File
@@ -43,7 +43,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: $spacing-lg 20px;
padding: $spacing-md $spacing-lg;
font-size: 18px;
font-weight: $font-weight-bold;
color: #212529;
src/main/resources/static/sass/components/_tables.scss
+20 -11
View File
@@ -274,24 +274,27 @@
// -----------------------------------------------------------------------------
// List Table - Modern design with colored header (Figma: 984-2173)
// Used in: User management, API key list, etc.
// Refined: Clean Minimal sizing with original KJB colors
// -----------------------------------------------------------------------------
.list-table {
width: 100%;
background: $white;
border-radius: $border-radius-lg;
overflow: hidden;
border: 1px solid #E5E7EB;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
&-wrapper {
overflow-x: auto;
margin-bottom: $spacing-xl;
}
// Table Header - Blue background with white text
// Table Header - Blue background with white text (refined sizing)
.list-table-header {
display: flex;
align-items: center;
background: #3BA4ED;
height: 72px;
height: 48px;
padding: 0 $spacing-lg;
@media (max-width: $breakpoint-md) {
@@ -303,10 +306,11 @@
align-items: center;
justify-content: center;
padding: $spacing-sm $spacing-md;
font-size: 20px;
font-weight: $font-weight-bold;
font-size: 13px;
font-weight: $font-weight-semibold;
color: $white;
text-align: center;
letter-spacing: 0.3px;
}
}
@@ -320,13 +324,18 @@
.list-table-row {
display: flex;
align-items: center;
height: 54px;
height: 48px;
padding: $spacing-sm $spacing-lg;
transition: $transition-base;
transition: $transition-fast;
border-bottom: 1px solid #F3F4F6;
// Alternating row colors
&:last-child {
border-bottom: none;
}
// Alternating row colors (softer)
&:nth-child(even) {
background-color: #EDF5FD;
background-color: #F8FBFE;
}
&:nth-child(odd) {
@@ -334,7 +343,7 @@
}
&:hover {
background-color: rgba($primary-blue, 0.08);
background-color: #EDF5FD;
}
@media (max-width: $breakpoint-md) {
@@ -349,8 +358,8 @@
align-items: center;
justify-content: center;
padding: $spacing-sm $spacing-md;
font-size: 16px;
color: #515151;
font-size: 14px;
color: #374151;
text-align: center;
white-space: nowrap;