Demo-Project/Laravel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init commit

Browse Source
This commit is contained in:
David Melendez
2026-01-14 22:38:44 +01:00
parent 4e0c415f0b
commit e25d53d054
124 changed files with 21653 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

570
resources/sass/pages/_dashboard-old.scss Normal file
View File

@@ -0,0 +1,570 @@
/**
* 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;
}
}
}