Complete design system implementation with glass morphism
Some checks failed
Build And Push Image / docker (push) Failing after 1m0s
Some checks failed
Build And Push Image / docker (push) Failing after 1m0s
- Enhanced member dashboard with glass morphism effects (30px blur) - Implemented Bento grid layout on member dashboard - Added comprehensive animation system: - Shimmer animations for logos and badges - Pulse animations for notifications - Float animations for dashboard elements - Modal enter/leave transitions - Applied glass effects to all form inputs with floating labels - Created glass morphism styles for dialogs and modals - Standardized all buttons with Monaco gradient styles - Added hover effects and animations throughout - Established consistent design patterns across all dashboards 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -302,7 +302,86 @@ $ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 5. Layout Enhancements
|
||||
// 5. Form Input Enhancements
|
||||
// ============================================
|
||||
|
||||
// Glass morphism for form inputs
|
||||
.glass-input {
|
||||
.v-input__control {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: $radius-xl;
|
||||
transition: all $duration-base $ease-smooth;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-color: rgba($monaco-red-600, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&.v-input--focused {
|
||||
.v-input__control {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-color: $monaco-red-600;
|
||||
box-shadow: 0 0 0 3px rgba($monaco-red-600, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Floating label animation
|
||||
.floating-label {
|
||||
.v-label {
|
||||
transition: all $duration-base $ease-smooth;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
&.v-input--focused,
|
||||
&.v-input--dirty {
|
||||
.v-label {
|
||||
transform: translateY(-150%) scale(0.85);
|
||||
color: $monaco-red-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Glass select dropdown
|
||||
.glass-select {
|
||||
.v-select__control {
|
||||
@include glass-effect(0.7, 10px);
|
||||
border-radius: $radius-xl;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
.v-menu__content {
|
||||
@include glass-effect(0.95, 20px);
|
||||
border-radius: $radius-xl;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Glass checkbox and radio
|
||||
.glass-checkbox,
|
||||
.glass-radio {
|
||||
.v-selection-control__wrapper {
|
||||
@include glass-effect(0.6, 5px);
|
||||
border-radius: $radius-md;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
&.v-input--dirty {
|
||||
.v-selection-control__input {
|
||||
color: $monaco-red-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 6. Layout Enhancements
|
||||
// ============================================
|
||||
|
||||
// Navigation Drawer Glass Effect
|
||||
@@ -367,7 +446,100 @@ $ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 6. Animation Classes
|
||||
// 6. Dialog & Modal Enhancements
|
||||
// ============================================
|
||||
|
||||
// Glass morphism dialogs
|
||||
.glass-dialog {
|
||||
.v-card {
|
||||
@include enhanced-glass(0.95, 30px);
|
||||
border-radius: $radius-2xl !important;
|
||||
|
||||
.v-card-title {
|
||||
background: linear-gradient(135deg, rgba($monaco-red-600, 0.05) 0%, rgba($monaco-red-700, 0.05) 100%);
|
||||
border-bottom: 1px solid rgba($monaco-red-600, 0.1);
|
||||
padding: 1.25rem 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.v-card-text {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.v-card-actions {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.3);
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Glass overlay
|
||||
.glass-overlay {
|
||||
.v-overlay__scrim {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
}
|
||||
}
|
||||
|
||||
// Modal animations
|
||||
.modal-enter-active {
|
||||
animation: modal-enter $duration-base $ease-out-back;
|
||||
}
|
||||
|
||||
.modal-leave-active {
|
||||
animation: modal-leave $duration-fast $ease-smooth;
|
||||
}
|
||||
|
||||
@keyframes modal-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9) translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal-leave {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(10px);
|
||||
}
|
||||
}
|
||||
|
||||
// Alert/Snackbar glass effect
|
||||
.glass-snackbar {
|
||||
.v-snackbar__wrapper {
|
||||
@include glass-colored($monaco-red-600, 0.15, 20px);
|
||||
|
||||
.v-snackbar__content {
|
||||
color: $gray-900;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
.v-snackbar__wrapper {
|
||||
@include glass-colored(#10b981, 0.15, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
.v-snackbar__wrapper {
|
||||
@include glass-colored(#ef4444, 0.15, 20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 7. Animation Classes
|
||||
// ============================================
|
||||
|
||||
@keyframes fade-in {
|
||||
@@ -397,6 +569,52 @@ $ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
}
|
||||
|
||||
// Shimmer effect for logos and badges
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Pulse animation for notifications
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Float animation for dashboard elements
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
// Glow pulse for important elements
|
||||
@keyframes glow-pulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 20px rgba($monaco-red-600, 0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 30px rgba($monaco-red-600, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in $duration-base $ease-smooth;
|
||||
}
|
||||
@@ -409,8 +627,130 @@ $ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
animation: scale-in $duration-base $ease-smooth;
|
||||
}
|
||||
|
||||
.animate-shimmer {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255,255,255,0) 0%,
|
||||
rgba(255,255,255,0.4) 50%,
|
||||
rgba(255,255,255,0) 100%
|
||||
);
|
||||
background-size: 1000px 100%;
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-glow-pulse {
|
||||
animation: glow-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 7. Utility Classes
|
||||
// 8. Enhanced Button Styles
|
||||
// ============================================
|
||||
|
||||
// Override Vuetify button styles globally
|
||||
.v-btn {
|
||||
text-transform: none !important;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.025em;
|
||||
transition: all $duration-base $ease-smooth;
|
||||
|
||||
// Primary gradient button
|
||||
&.v-btn--elevated {
|
||||
background: $gradient-monaco !important;
|
||||
color: white !important;
|
||||
box-shadow: $shadow-md;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: $gradient-monaco-dark !important;
|
||||
box-shadow: $shadow-monaco;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Outlined button with gradient border
|
||||
&.v-btn--outlined {
|
||||
position: relative;
|
||||
border: 2px solid $monaco-red-600;
|
||||
color: $monaco-red-600;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: rgba($monaco-red-600, 0.05);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Text button with gradient text
|
||||
&.v-btn--text {
|
||||
background: transparent;
|
||||
color: $monaco-red-600;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: rgba($monaco-red-600, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
// Flat/tonal button with glass effect
|
||||
&.v-btn--flat,
|
||||
&.v-btn--tonal {
|
||||
@include glass-effect(0.7, 10px);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon button with glass effect
|
||||
&.v-btn--icon {
|
||||
@include glass-effect(0.6, 8px);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
@include glass-colored($monaco-red-600, 0.1, 10px);
|
||||
transform: rotate(5deg) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Floating action button
|
||||
&.v-btn--fab {
|
||||
background: $gradient-monaco !important;
|
||||
color: white !important;
|
||||
box-shadow: $shadow-monaco;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
transform: translateY(-3px) rotate(5deg);
|
||||
box-shadow: $shadow-monaco-intense;
|
||||
}
|
||||
}
|
||||
|
||||
// Loading state
|
||||
&.v-btn--loading {
|
||||
.v-btn__loader {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 9. Utility Classes
|
||||
// ============================================
|
||||
|
||||
// Glass utilities
|
||||
|
||||
Reference in New Issue
Block a user