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-11-26 15:46:31 +09:00
parent 3e059a9642
commit e8f9212a13
4 changed files with 365 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/img/checkbox-checked.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 0C17.0751 0 22 4.92487 22 11C22 17.0751 17.0751 22 11 22C4.92487 22 0 17.0751 0 11C0 4.92487 4.92487 0 11 0Z" fill="#0049B4"/>
<path d="M14.846 7.86287C15.0951 7.56868 15.5352 7.53184 15.8294 7.78084C16.123 8.02998 16.1592 8.47019 15.9105 8.76423L10.8626 14.7301C10.5482 15.1014 9.97571 15.1038 9.65853 14.7349L6.93685 11.5592C6.68656 11.2666 6.72002 10.8266 7.01205 10.5758C7.30461 10.3252 7.7455 10.3587 7.99642 10.651L10.2552 13.2857L14.846 7.86287Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 593 B

src/main/resources/static/img/checkbox-unchecked.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 0C17.0751 0 22 4.92487 22 11C22 17.0751 17.0751 22 11 22C4.92487 22 0 17.0751 0 11C0 4.92487 4.92487 0 11 0ZM11 1.375C5.68426 1.375 1.375 5.68426 1.375 11C1.375 16.3157 5.68426 20.625 11 20.625C16.3157 20.625 20.625 16.3157 20.625 11C20.625 5.68426 16.3157 1.375 11 1.375Z" fill="#8C959F"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 409 B

src/main/resources/static/sass/components/_page-title-banner.scss
+62
View File
@@ -0,0 +1,62 @@
// Page Title Banner Component
// Reusable banner for page titles across the portal
@import '../abstracts/variables';
@import '../abstracts/mixins';
.page-title-banner {
background: #E9F8FF;
position: relative;
width: 100%;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h100v100H0z' fill='%23ffffff' opacity='0.03'/%3E%3C/svg%3E");
background-size: 50px 50px;
opacity: 0.5;
}
.title-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 220px;
width: auto;
z-index: 1;
}
h1 {
position: relative;
font-size: $font-size-3xl;
font-weight: $font-weight-bold;
color: $text-dark;
margin: 0;
z-index: 2;
letter-spacing: -0.5px;
}
// Responsive
@include respond-to('sm') {
height: 120px;
margin-bottom: $spacing-xl;
.title-image {
height: 120px;
}
h1 {
font-size: $font-size-xl;
}
}
}
src/main/resources/static/sass/pages/_partnership.scss
+296
View File
@@ -0,0 +1,296 @@
// -----------------------------------------------------------------------------
// Partnership Form Page - Modern Design
// -----------------------------------------------------------------------------
// Page Header
.page-header {
margin-bottom: $spacing-4xl;
text-align: center;
@include respond-to('sm') {
margin-bottom: $spacing-3xl;
}
.page-header-content {
max-width: 800px;
margin: 0 auto;
}
.page-title {
font-size: $font-size-3xl;
font-weight: $font-weight-bold;
color: $text-dark;
margin-bottom: $spacing-md;
display: flex;
align-items: center;
justify-content: center;
gap: $spacing-md;
@include respond-to('sm') {
font-size: $font-size-2xl;
flex-direction: column;
gap: $spacing-sm;
}
i {
color: $primary-blue;
font-size: $font-size-3xl;
@include respond-to('sm') {
font-size: $font-size-2xl;
}
}
}
.page-description {
font-size: $font-size-lg;
color: $text-gray;
line-height: $line-height-normal;
@include respond-to('sm') {
font-size: $font-size-base;
}
.highlight {
color: $primary-blue;
font-weight: $font-weight-semibold;
position: relative;
&::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
border-radius: 2px;
}
}
}
}
// Partnership Form Container
.partnership-form-container {
max-width: 800px;
margin: 0 auto;
@include respond-to('sm') {
padding: 0 $spacing-md;
}
}
// Partnership Card
.partnership-card {
padding: $spacing-4xl;
background: $white;
border-radius: $border-radius-xl;
box-shadow: $shadow-lg;
border: 1px solid $border-gray;
@include respond-to('sm') {
padding: $spacing-2xl $spacing-lg;
border-radius: $border-radius-md;
}
// Form group styles
.form-group {
margin-bottom: $spacing-2xl;
@include respond-to('sm') {
margin-bottom: $spacing-xl;
}
label {
display: flex;
align-items: center;
gap: $spacing-sm;
font-size: $font-size-base;
font-weight: $font-weight-semibold;
color: $text-dark;
margin-bottom: $spacing-md;
i {
color: $primary-blue;
font-size: $font-size-md;
}
.required {
color: $accent-orange;
margin-left: 2px;
}
}
// Textarea specific height
textarea.form-control {
min-height: 200px;
resize: vertical;
line-height: 1.6;
@include respond-to('sm') {
min-height: 150px;
}
}
}
// Form hint with icon
.form-hint {
display: flex;
align-items: flex-start;
gap: $spacing-xs;
margin-top: $spacing-sm;
font-size: $font-size-sm;
color: $text-gray;
line-height: $line-height-normal;
i {
color: $primary-blue;
margin-top: 2px;
flex-shrink: 0;
}
}
// Form error with icon
.form-error {
display: flex;
align-items: flex-start;
gap: $spacing-xs;
margin-top: $spacing-sm;
font-size: $font-size-sm;
color: $accent-orange;
line-height: $line-height-normal;
i {
margin-top: 2px;
flex-shrink: 0;
}
}
// Form help text
.form-help-text {
margin-top: $spacing-md;
p {
display: flex;
align-items: flex-start;
gap: $spacing-xs;
margin: $spacing-xs 0;
font-size: $font-size-xs;
color: $text-light;
line-height: $line-height-normal;
i {
color: $accent-green;
margin-top: 2px;
flex-shrink: 0;
}
}
}
}
// Form Actions
.form-actions {
display: flex;
gap: $spacing-md;
justify-content: center;
margin-top: $spacing-4xl;
padding-top: $spacing-2xl;
border-top: 1px solid $border-gray;
@include respond-to('sm') {
flex-direction: column-reverse;
gap: $spacing-sm;
margin-top: $spacing-3xl;
padding-top: $spacing-xl;
}
.action-btn-secondary,
.action-btn-primary {
min-width: 160px;
padding: $spacing-md $spacing-2xl;
@include respond-to('sm') {
width: 100%;
min-width: auto;
}
}
}
// File Upload Wrapper Override for Partnership Page
.partnership-card .file-upload-wrapper {
.file-name-display {
&.has-file {
color: $text-dark;
background: rgba($primary-blue, 0.05);
border-color: $primary-blue;
font-weight: $font-weight-medium;
}
}
@media (max-width: $breakpoint-sm) {
.file-upload-btn {
order: 1;
}
.file-name-display {
order: 2;
}
.file-remove-btn {
order: 3;
}
}
}
// Animation for form elements
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.partnership-card {
animation: fadeInUp 0.6s ease-out;
}
// Focus states for better accessibility
.partnership-card {
.form-control:focus {
border-color: $primary-blue;
box-shadow: 0 0 0 3px rgba($primary-blue, 0.1);
outline: none;
}
// Enhanced focus for textarea
textarea.form-control:focus {
box-shadow: 0 0 0 4px rgba($primary-blue, 0.15);
}
}
// Print styles
@media print {
.page-header {
margin-bottom: $spacing-xl;
}
.partnership-card {
box-shadow: none;
border: 1px solid $border-gray;
padding: $spacing-xl;
}
.form-actions {
display: none;
}
.file-upload-wrapper {
.file-upload-btn,
.file-remove-btn {
display: none;
}
}
}