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

헤더 로그인 영역 수정

Browse Source
This commit is contained in:
현성필
2025-11-05 11:07:18 +09:00
parent b20bb0bcbf
commit f497ee9e1a
1 changed files with 309 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/sass/components/_header-auth.scss
+309
View File
@@ -0,0 +1,309 @@
// -----------------------------------------------------------------------------
// Header Authentication Component Styles
// Login/Logout button groups and user profile dropdown
// -----------------------------------------------------------------------------
// ===========================
// Authentication Group
// ===========================
.auth-group {
display: flex;
align-items: center;
gap: $spacing-md;
&.authenticated {
gap: 0;
}
}
// ===========================
// Login Button
// ===========================
.login-btn {
display: inline-flex;
align-items: center;
padding: 10px 20px;
color: $text-dark;
text-decoration: none;
border: 2px solid $primary-blue;
border-radius: $border-radius-full;
font-weight: $font-weight-semibold;
font-size: $font-size-sm;
transition: $transition-base;
&:hover {
background: $light-bg;
color: $primary-blue;
transform: translateY(-2px);
box-shadow: $shadow-md;
}
}
// ===========================
// User Profile Dropdown (Desktop)
// ===========================
.user-profile-dropdown {
position: relative;
.user-profile-btn {
display: flex;
align-items: center;
gap: $spacing-sm;
padding: 10px 20px;
background: $light-bg;
border: 2px solid transparent;
border-radius: $border-radius-full;
cursor: pointer;
transition: $transition-base;
font-family: $font-family-primary;
font-size: $font-size-sm;
.user-name {
color: $text-dark;
font-weight: $font-weight-semibold;
}
i {
color: $text-gray;
font-size: 12px;
transition: transform $transition-fast;
}
&:hover {
background: $white;
border-color: $primary-blue;
box-shadow: $shadow-md;
.user-name {
color: $primary-blue;
}
i {
color: $primary-blue;
}
}
}
&.active {
.user-profile-btn i {
transform: rotate(180deg);
}
.profile-dropdown-menu {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
}
.profile-dropdown-menu {
position: absolute;
top: calc(100% + 12px);
right: 0;
width: 280px;
background: $white;
border: 1px solid $border-gray;
border-radius: $border-radius-lg;
box-shadow: $shadow-xl;
visibility: hidden;
opacity: 0;
transform: translateY(-10px);
transition: all $transition-base;
z-index: $z-index-dropdown;
overflow: hidden;
}
.profile-header {
padding: $spacing-lg;
background: $gradient-primary;
color: $white;
text-align: center;
.user-greeting {
margin: 0 0 $spacing-xs 0;
font-size: $font-size-md;
font-weight: $font-weight-bold;
}
.user-message {
font-size: $font-size-xs;
opacity: 0.9;
}
}
.profile-menu-list {
list-style: none;
margin: 0;
padding: $spacing-sm 0;
li {
margin: 0;
a {
display: flex;
align-items: center;
gap: 12px;
padding: 12px $spacing-lg;
color: $text-dark;
text-decoration: none;
font-size: $font-size-sm;
transition: $transition-fast;
i {
width: 20px;
color: $text-gray;
font-size: 14px;
}
&:hover {
background: $light-bg;
color: $primary-blue;
i {
color: $primary-blue;
}
}
}
}
}
.profile-footer {
padding: $spacing-sm $spacing-lg $spacing-lg;
border-top: 1px solid $border-gray;
.logout-btn {
display: flex;
align-items: center;
justify-content: center;
gap: $spacing-sm;
width: 100%;
padding: 12px;
background: $gray-bg;
color: $text-dark;
text-decoration: none;
border-radius: $border-radius-md;
font-weight: $font-weight-semibold;
font-size: $font-size-sm;
transition: $transition-base;
i {
font-size: 14px;
}
&:hover {
background: $accent-orange;
color: $white;
transform: translateY(-2px);
box-shadow: $shadow-md;
}
}
}
}
// ===========================
// Mobile Drawer User Info
// ===========================
.drawer-user-info {
padding: $spacing-lg;
background: $gradient-primary;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
.drawer-profile {
display: flex;
align-items: center;
gap: $spacing-md;
.profile-avatar {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
border-radius: $border-radius-circle;
color: $white;
i {
font-size: 32px;
}
}
.profile-info {
flex: 1;
color: $white;
.profile-name {
margin: 0 0 $spacing-xs 0;
font-size: $font-size-md;
font-weight: $font-weight-bold;
}
.profile-greeting {
font-size: $font-size-xs;
opacity: 0.9;
}
}
}
}
// ===========================
// Mobile Drawer Actions
// ===========================
.drawer-logout-btn {
display: flex;
align-items: center;
justify-content: center;
gap: $spacing-sm;
width: 100%;
padding: 14px 20px;
background: $accent-orange;
color: $white;
text-decoration: none;
border-radius: $border-radius-lg;
font-weight: $font-weight-semibold;
font-size: $font-size-base;
transition: $transition-base;
box-shadow: $shadow-md;
i {
font-size: 16px;
}
&:hover {
background: darken($accent-orange, 10%);
transform: translateY(-2px);
box-shadow: $shadow-lg;
}
}
// ===========================
// Responsive Adjustments
// ===========================
@media (max-width: $breakpoint-sm) {
.user-profile-dropdown {
.profile-dropdown-menu {
width: 260px;
right: -10px;
}
}
}
@media (max-width: $breakpoint-xs) {
.user-profile-dropdown {
.user-profile-btn {
padding: 8px 16px;
.user-name {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.profile-dropdown-menu {
width: 240px;
right: -20px;
}
}
}