diff --git a/src/main/resources/static/sass/pages/_commission.scss b/src/main/resources/static/sass/pages/_commission.scss new file mode 100644 index 0000000..8535aff --- /dev/null +++ b/src/main/resources/static/sass/pages/_commission.scss @@ -0,0 +1,297 @@ +// Commission Pages Styles +// 수수료 관리 및 청구서 출력 페이지 스타일 + +@import '../abstracts/variables'; +@import '../abstracts/mixins'; + +// ==================== Commission Management Page ==================== + +.wrap { + max-width: 1400px; + margin: 0 auto; + background: $white; + padding: $spacing-lg; + border-radius: $border-radius-md; + box-shadow: $shadow-md; +} + +.searchInfo { + display: inline-block; + margin-right: $spacing-sm; + margin-bottom: $spacing-md; +} + +.searchBox { + background: $gray-bg; + padding: $spacing-lg; + border-radius: $border-radius-md; + margin-bottom: $spacing-lg; + + &.row-two { + display: flex; + align-items: center; + gap: $spacing-lg; + flex-wrap: wrap; + } + + label { + font-weight: $font-weight-medium; + color: $text-gray; + min-width: 80px; + } + + .form-control { + padding: 6px 12px; + border: 1px solid $border-gray; + border-radius: $border-radius-sm; + font-size: $font-size-sm; + } +} + +.form-inline { + display: flex; + align-items: center; + gap: $spacing-sm; +} + +.btnBox { + margin-left: auto; +} + +.voffset3 { + margin-top: 30px; +} + +.color_red { + color: $accent-orange; +} + +.color_blue { + color: $primary-blue; +} + +.color_darkRed { + color: #8b0000; +} + +// Table Styles +.table-responsive { + overflow-x: auto; + margin-top: $spacing-3xl; +} + +.table { + width: 100%; + border-collapse: collapse; + font-size: $font-size-sm; + + th { + background: $gray-bg; + font-weight: $font-weight-medium; + color: $text-dark; + padding: $spacing-md; + text-align: center; + border: 1px solid $border-gray; + } + + td { + padding: $spacing-md; + text-align: center; + border: 1px solid $border-gray; + } +} + +.table-bordered { + border: 1px solid $border-gray; + + th, + td { + border: 1px solid $border-gray; + } +} + +.border-type { + border: 2px solid $border-gray; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.text-left { + text-align: left; +} + +.bg-warning { + background-color: #fff3cd !important; +} + +// Icon +.glyphicon-search::before { + content: "🔍"; +} + +// ==================== Commission Print Page ==================== + +.info-table { + border-top: 10px solid $text-gray; + width: 100%; + border-bottom: 2px solid $text-dark; + margin-bottom: $spacing-2xl; + + th { + text-align: left; + padding: $spacing-md $spacing-lg; + font-weight: $font-weight-semibold; + background: none; + border: none; + } + + td { + padding: $spacing-md $spacing-lg; + border: none; + } +} + +.commission-table { + width: 100%; + margin-top: $spacing-2xl; + + th, + td { + border: 1px solid #999 !important; + padding: $spacing-md $spacing-lg; + } + + td { + text-align: right; + } +} + +.bg_ygreen { + background-color: aquamarine; + text-align: center; +} + +.bg_skyBlue { + background-color: skyblue; + text-align: center; +} + +.bg_yellow { + background-color: yellow; + text-align: center; +} + +// Print-specific styles +@media print { + body { + padding: 0; + background: $white; + } + + .searchBox, + .searchInfo, + #printButton, + #backButton, + #printBtn { + display: none !important; + } + + @page { + size: auto; + margin: 0 -0cm; + } + + html { + margin: 0 0cm; + } +} + +// Responsive Design +@media screen and (max-width: $breakpoint-md) { + .wrap { + padding: $spacing-md; + } + + .searchBox { + padding: $spacing-md; + + &.row-two { + flex-direction: column; + align-items: flex-start; + gap: $spacing-md; + } + } + + .form-inline { + width: 100%; + flex-direction: column; + align-items: flex-start; + + label { + min-width: auto; + } + + .form-control { + width: 100%; + } + } + + .btnBox { + margin-left: 0; + width: 100%; + + .btn { + width: 100%; + } + } + + .table-responsive { + overflow-x: scroll; + -webkit-overflow-scrolling: touch; + } +} + +// Commission Print Page Specific +.commission-print-page { + font-size: 12px; + + body { + width: 600px; + margin: 90px; + } + + table { + border-collapse: collapse; + + th, + td { + padding: 5px 10px; + } + + tr { + font-size: 12px; + } + } + + h1 { + text-align: center; + + img { + width: 300px; + } + } + + h2 { + margin-top: $spacing-2xl; + } + + p { + line-height: 1.6; + } +}