헤더 로그인 영역 수정
This commit is contained in:
현성필
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user