571 lines
12 KiB
SCSS
571 lines
12 KiB
SCSS
/**
|
|
* Dashboard Page Styles - Enterprise SCSS Architecture
|
|
* Professional Resume Builder
|
|
*
|
|
* @author David Valera Melendez <david@valera-melendez.de>
|
|
* @created 2025-08-08
|
|
* @location Made in Germany 🇩🇪
|
|
*/
|
|
|
|
// ==========================================================================
|
|
// Dashboard Container
|
|
// ==========================================================================
|
|
.dashboard-container {
|
|
padding: $spacing-lg 0;
|
|
|
|
@include media-down($breakpoint-md) {
|
|
padding: $spacing-base 0;
|
|
}
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Hero Section
|
|
// ==========================================================================
|
|
.hero-section {
|
|
margin-bottom: $spacing-4xl;
|
|
|
|
.hero-card {
|
|
@include card-base;
|
|
background: $gradient-primary;
|
|
color: $white;
|
|
border-radius: $radius-2xl;
|
|
box-shadow: $shadow-2xl;
|
|
border: none;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
@include grid-pattern(60px, rgba(255, 255, 255, 0.1));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card-body {
|
|
padding: $spacing-4xl;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
@include media-down($breakpoint-md) {
|
|
padding: $spacing-3xl $spacing-lg;
|
|
}
|
|
}
|
|
|
|
.hero-content {
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.hero-icon {
|
|
margin-bottom: $spacing-xl;
|
|
|
|
.large-icon {
|
|
font-size: 4rem;
|
|
transition: all $transition-base;
|
|
|
|
&:hover {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
|
|
@include media-down($breakpoint-md) {
|
|
font-size: 3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: $font-size-4xl;
|
|
font-weight: $font-weight-bold;
|
|
margin-bottom: $spacing-lg;
|
|
text-shadow: 0 2px 4px rgba($black, 0.2);
|
|
|
|
@include media-down($breakpoint-md) {
|
|
font-size: $font-size-3xl;
|
|
}
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: $font-size-lg;
|
|
opacity: 0.9;
|
|
margin-bottom: $spacing-lg;
|
|
font-weight: $font-weight-light;
|
|
|
|
@include media-down($breakpoint-md) {
|
|
font-size: $font-size-base;
|
|
}
|
|
}
|
|
|
|
.author-signature {
|
|
font-size: $font-size-base;
|
|
opacity: 0.8;
|
|
margin-bottom: $spacing-2xl;
|
|
font-weight: $font-weight-medium;
|
|
}
|
|
|
|
.hero-actions {
|
|
@include flex-center;
|
|
gap: $spacing-lg;
|
|
flex-wrap: wrap;
|
|
|
|
@include media-down($breakpoint-md) {
|
|
flex-direction: column;
|
|
gap: $spacing-base;
|
|
|
|
.btn {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
@include button-base;
|
|
padding: $spacing-md $spacing-xl;
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-semibold;
|
|
border-radius: $radius-md;
|
|
transition: all $transition-base;
|
|
|
|
&.btn-light {
|
|
background-color: $white;
|
|
color: $primary-color;
|
|
|
|
&:hover {
|
|
background-color: rgba($white, 0.9);
|
|
transform: translateY(-2px);
|
|
box-shadow: $shadow-lg;
|
|
}
|
|
}
|
|
|
|
&.btn-outline-light {
|
|
background-color: transparent;
|
|
color: $white;
|
|
border: 2px solid rgba($white, 0.8);
|
|
|
|
&:hover {
|
|
background-color: rgba($white, 0.1);
|
|
border-color: $white;
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Stats Section
|
|
// ==========================================================================
|
|
.stats-section {
|
|
margin-bottom: $spacing-4xl;
|
|
|
|
.stat-card {
|
|
@include card-base;
|
|
@include card-hover;
|
|
border: none;
|
|
height: 100%;
|
|
transition: all $transition-base;
|
|
|
|
&:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: $shadow-xl;
|
|
|
|
.stat-icon {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
}
|
|
|
|
.card-body {
|
|
padding: $spacing-2xl;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
@include flex-center;
|
|
margin: 0 auto $spacing-lg auto;
|
|
border-radius: $radius-full;
|
|
transition: all $transition-base;
|
|
|
|
i {
|
|
font-size: $font-size-2xl;
|
|
}
|
|
|
|
&.bg-primary {
|
|
background: linear-gradient(135deg, $primary-color, lighten($primary-color, 10%));
|
|
}
|
|
|
|
&.bg-success {
|
|
background: linear-gradient(135deg, $success-color, lighten($success-color, 10%));
|
|
}
|
|
|
|
&.bg-warning {
|
|
background: linear-gradient(135deg, $warning-color, lighten($warning-color, 10%));
|
|
}
|
|
|
|
&.bg-info {
|
|
background: linear-gradient(135deg, $info-color, lighten($info-color, 10%));
|
|
}
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: $font-size-3xl;
|
|
font-weight: $font-weight-bold;
|
|
margin-bottom: $spacing-xs;
|
|
line-height: 1;
|
|
|
|
&.text-primary { color: $primary-color; }
|
|
&.text-success { color: $success-color; }
|
|
&.text-warning { color: $warning-color; }
|
|
&.text-info { color: $info-color; }
|
|
|
|
@include media-down($breakpoint-md) {
|
|
font-size: $font-size-2xl;
|
|
}
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: $font-size-base;
|
|
color: $text-muted;
|
|
font-weight: $font-weight-medium;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Features Section
|
|
// ==========================================================================
|
|
.features-section {
|
|
margin-bottom: $spacing-4xl;
|
|
|
|
.section-title {
|
|
font-size: $font-size-3xl;
|
|
font-weight: $font-weight-semibold;
|
|
color: $text-primary;
|
|
margin-bottom: $spacing-sm;
|
|
|
|
@include media-down($breakpoint-md) {
|
|
font-size: $font-size-2xl;
|
|
}
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: $font-size-lg;
|
|
color: $text-muted;
|
|
margin-bottom: $spacing-2xl;
|
|
}
|
|
|
|
.feature-card {
|
|
@include card-base;
|
|
@include card-hover;
|
|
border: none;
|
|
height: 100%;
|
|
transition: all $transition-base;
|
|
|
|
&:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: $shadow-xl;
|
|
|
|
.feature-avatar {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
.card-body {
|
|
padding: $spacing-2xl;
|
|
text-align: center;
|
|
}
|
|
|
|
.feature-avatar {
|
|
width: 80px;
|
|
height: 80px;
|
|
@include flex-center;
|
|
margin: 0 auto $spacing-lg auto;
|
|
border-radius: $radius-full;
|
|
background-color: rgba($primary-color, 0.1);
|
|
transition: all $transition-base;
|
|
|
|
i {
|
|
font-size: $font-size-3xl;
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
.card-title {
|
|
font-size: $font-size-xl;
|
|
font-weight: $font-weight-semibold;
|
|
color: $text-primary;
|
|
margin-bottom: $spacing-lg;
|
|
}
|
|
|
|
.card-text {
|
|
font-size: $font-size-base;
|
|
color: $text-muted;
|
|
line-height: $line-height-relaxed;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Recent Activity Section
|
|
// ==========================================================================
|
|
.recent-activity-section {
|
|
margin-bottom: $spacing-4xl;
|
|
|
|
.card {
|
|
@include card-base;
|
|
border: none;
|
|
|
|
.card-header {
|
|
background: transparent;
|
|
border: none;
|
|
padding: $spacing-xl $spacing-xl 0 $spacing-xl;
|
|
|
|
.card-title {
|
|
font-size: $font-size-xl;
|
|
font-weight: $font-weight-semibold;
|
|
color: $text-primary;
|
|
margin: 0;
|
|
|
|
i {
|
|
color: $primary-color;
|
|
margin-right: $spacing-sm;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-body {
|
|
padding: $spacing-lg $spacing-xl $spacing-xl $spacing-xl;
|
|
}
|
|
}
|
|
|
|
.activity-item {
|
|
padding: $spacing-lg;
|
|
border: 2px solid $border-color;
|
|
border-radius: $radius-md;
|
|
background-color: rgba($gray-50, 0.5);
|
|
transition: all $transition-base;
|
|
|
|
&:hover {
|
|
background-color: rgba($gray-100, 0.8);
|
|
border-color: $border-color-hover;
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
h6 {
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-semibold;
|
|
color: $text-primary;
|
|
margin-bottom: $spacing-xs;
|
|
}
|
|
|
|
p {
|
|
font-size: $font-size-sm;
|
|
color: $text-muted;
|
|
margin-bottom: $spacing-sm;
|
|
}
|
|
|
|
.text-muted {
|
|
&.small {
|
|
font-size: $font-size-xs;
|
|
|
|
i {
|
|
margin-right: $spacing-xs;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Quick Actions Section
|
|
// ==========================================================================
|
|
.quick-actions-section {
|
|
.card {
|
|
@include card-base;
|
|
border: none;
|
|
|
|
.card-header {
|
|
background: transparent;
|
|
border: none;
|
|
padding: $spacing-xl $spacing-xl 0 $spacing-xl;
|
|
|
|
.card-title {
|
|
font-size: $font-size-xl;
|
|
font-weight: $font-weight-semibold;
|
|
color: $text-primary;
|
|
margin: 0;
|
|
|
|
i {
|
|
color: $primary-color;
|
|
margin-right: $spacing-sm;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-body {
|
|
padding: $spacing-lg $spacing-xl $spacing-xl $spacing-xl;
|
|
}
|
|
}
|
|
|
|
.action-card {
|
|
@include card-base;
|
|
text-decoration: none;
|
|
height: 100%;
|
|
transition: all $transition-base;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&.border-primary {
|
|
border-color: rgba($primary-color, 0.3);
|
|
|
|
&:hover {
|
|
border-color: $primary-color;
|
|
background-color: rgba($primary-color, 0.02);
|
|
transform: translateY(-8px) scale(1.02);
|
|
box-shadow: $shadow-xl;
|
|
|
|
i {
|
|
transform: scale(1.2) rotate(10deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.border-success {
|
|
border-color: rgba($success-color, 0.3);
|
|
|
|
&:hover {
|
|
border-color: $success-color;
|
|
background-color: rgba($success-color, 0.02);
|
|
transform: translateY(-8px) scale(1.02);
|
|
box-shadow: $shadow-xl;
|
|
|
|
i {
|
|
transform: scale(1.2) rotate(-10deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.border-warning {
|
|
border-color: rgba($warning-color, 0.3);
|
|
|
|
&:hover {
|
|
border-color: $warning-color;
|
|
background-color: rgba($warning-color, 0.02);
|
|
transform: translateY(-8px) scale(1.02);
|
|
box-shadow: $shadow-xl;
|
|
|
|
i {
|
|
transform: scale(1.2) rotate(5deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-body {
|
|
padding: $spacing-2xl;
|
|
text-align: center;
|
|
}
|
|
|
|
i {
|
|
font-size: 4rem;
|
|
margin-bottom: $spacing-lg;
|
|
transition: all $transition-base;
|
|
|
|
&.text-primary { color: $primary-color; }
|
|
&.text-success { color: $success-color; }
|
|
&.text-warning { color: $warning-color; }
|
|
}
|
|
|
|
h6 {
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-semibold;
|
|
margin-bottom: $spacing-sm;
|
|
|
|
&.text-primary { color: $primary-color; }
|
|
&.text-success { color: $success-color; }
|
|
&.text-warning { color: $warning-color; }
|
|
}
|
|
|
|
p {
|
|
font-size: $font-size-sm;
|
|
color: $text-muted;
|
|
margin: 0;
|
|
line-height: $line-height-normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Animations
|
|
// ==========================================================================
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.dashboard-container > section {
|
|
animation: fadeInUp 0.6s ease-out;
|
|
|
|
&:nth-child(1) { animation-delay: 0; }
|
|
&:nth-child(2) { animation-delay: 0.1s; }
|
|
&:nth-child(3) { animation-delay: 0.2s; }
|
|
&:nth-child(4) { animation-delay: 0.3s; }
|
|
&:nth-child(5) { animation-delay: 0.4s; }
|
|
}
|
|
|
|
// ==========================================================================
|
|
// Responsive Design
|
|
// ==========================================================================
|
|
@include media-down($breakpoint-lg) {
|
|
.features-section {
|
|
.feature-card {
|
|
margin-bottom: $spacing-xl;
|
|
}
|
|
}
|
|
|
|
.quick-actions-section {
|
|
.action-card {
|
|
margin-bottom: $spacing-lg;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-down($breakpoint-md) {
|
|
.dashboard-container {
|
|
padding: $spacing-base 0;
|
|
}
|
|
|
|
.stats-section,
|
|
.features-section,
|
|
.recent-activity-section {
|
|
margin-bottom: $spacing-2xl;
|
|
}
|
|
|
|
.hero-section {
|
|
margin-bottom: $spacing-2xl;
|
|
}
|
|
|
|
.stat-card,
|
|
.feature-card {
|
|
margin-bottom: $spacing-lg;
|
|
}
|
|
|
|
.recent-activity-section {
|
|
.activity-item {
|
|
margin-bottom: $spacing-base;
|
|
}
|
|
}
|
|
}
|