matt
/
monacousa-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
monacousa-portal/Design/glass-morphism-implementati...

6.8 KiB
Raw Blame History

Glass Morphism Implementation Guide

Overview

This document details the glass morphism design patterns implemented in the MonacoUSA Portal, following the design philosophy outlined in design-system.md.

Implementation Date

December 2024

Latest Update

January 2025 - Enhanced Sidebar Design with Fixed Width

Key Changes

1. Global SCSS Architecture

Created assets/scss/main.scss with comprehensive design system implementation:

  • Monaco red color spectrum variables
  • Glass morphism mixins
  • Animation utilities
  • Component classes
  • Responsive breakpoints

2. Layout Transformations

Enhanced Sidebar Design (All Layouts)

  • Fixed Width: 280px permanent sidebar (non-collapsible)
  • Enhanced Glass Effects: 30px blur with improved opacity
  • No Hamburger Menu: Removed collapse/expand functionality entirely
  • Vertical Profile Card: Small avatar stacked above user info
  • Animated Navigation: Hover effects with smooth transitions
  • Glass Badges: Consistent styling across all access levels
  • Shimmer Animation: Logo with subtle shimmer effect

Admin Layout (layouts/admin.vue)

  • Enhanced Glass Navigation: Fixed 280px width with enhanced blur
  • Gradient App Bar: Dark gradient from monaco-red-600 to monaco-red-900
  • Glass Icon Buttons: Semi-transparent with hover effects
  • Profile Card: Vertical layout with admin-specific menu options

Board Layout (layouts/board.vue)

  • Enhanced Glass Navigation: Consistent 280px fixed width
  • Gradient App Bar: Softer gradient from monaco-red to brown tones
  • Glass Search Dialog: Search overlay with glass card styling
  • Profile Card: Board member profile with vertical layout

Member Layout (layouts/member.vue)

  • Enhanced Glass Navigation: Same 280px fixed width design
  • Gradient App Bar: Lightest gradient for member access level
  • Streamlined Navigation: Fewer menu items with clear hierarchy
  • Profile Card: Member profile with consistent vertical layout

Glass Morphism Patterns

Core Mixins

// Enhanced glass effect with stronger blur
@mixin enhanced-glass($opacity: 0.9, $blur: 30px) {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, $opacity * 0.95),
    rgba(255, 255, 255, $opacity * 0.85),
    rgba(255, 255, 255, $opacity * 0.75)
  );
  backdrop-filter: blur($blur) saturate(180%);
  -webkit-backdrop-filter: blur($blur) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.37),
    inset 0 1px 2px rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(0, 0, 0, 0.05);
}

Component Classes

Glass Cards

  • .glass-card: Base glass effect card
  • .glass-card--dark: Dark variant for dark backgrounds
  • .glass-card--colored: Monaco red tinted glass

Navigation Items

  • .glass-nav-item: Main navigation items with hover effects
  • .glass-nav-item-sub: Sub-navigation items with reduced opacity
  • Active states include gradient backgrounds and left border accent

Buttons

  • .glass-icon-btn: Icon buttons with glass effect
  • .monaco-btn--primary: Primary buttons with Monaco gradient
  • .monaco-btn--glass: Glass variant buttons

Visual Hierarchy

Access Level Differentiation

  1. Admin: Darkest gradients (monaco-red-900 range)
  2. Board: Medium gradients (monaco-red-700 range)
  3. Member: Lightest gradients (monaco-red-500 range)

Depth & Layering

  • Navigation drawer: Fixed 280px width, 90% opacity, 30px blur
  • Profile card: Vertical layout with small avatar
  • Dropdowns: 95% opacity, 20px blur
  • Cards: 80% opacity, 15px blur
  • Buttons: 10-20% opacity, 10px blur
  • No collapsible functionality - permanent fixed sidebar

Animation Patterns

Float Animation

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

Applied to logo for subtle movement.

Hover Effects

  • Navigation items: translateX(2px) on hover
  • Buttons: translateY(-1px) with shadow enhancement
  • Cards: translateY(-2px) with increased shadow

Color Usage

Primary Monaco Red Spectrum

  • #dc2626 - Primary brand color
  • #b91c1c - Dark accent
  • #ef4444 - Light accent
  • #991b1b - Deep red for admin
  • #7f1d1d - Darkest tone

Gradients

  • Monaco Gradient: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)
  • Admin Gradient: Darker tones for authority
  • Board Gradient: Balanced mid-tones
  • Member Gradient: Lighter, welcoming tones

Responsive Considerations

Breakpoints

  • Mobile: < 640px
  • Tablet: 640px - 1024px
  • Desktop: > 1024px

Mobile Optimizations

  • Reduced blur effects for performance
  • Simplified gradients
  • Adjusted spacing and margins
  • Auto-closing navigation drawer

Performance Optimizations

CSS Optimizations

  • Hardware acceleration with transform: translateZ(0)
  • Will-change property for animated elements
  • Reduced motion preferences respected

Blur Performance

  • Limited blur radius to maximum 30px
  • Selective application on key elements
  • Fallback styles for non-supporting browsers

Browser Compatibility

Supported Browsers

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

Fallbacks

  • Solid backgrounds for browsers without backdrop-filter
  • Standard box-shadows without blur
  • Graceful degradation for older browsers

Implementation Checklist

Completed

  • Global SCSS architecture
  • Admin layout glass morphism
  • Board layout glass morphism
  • Member layout glass morphism
  • Monaco color system integration
  • Animation patterns
  • Responsive design
  • Browser compatibility

Future Enhancements

  • Component library with glass variants
  • Dark mode glass effects
  • Advanced animation sequences
  • Performance monitoring
  • A/B testing for user preference

Usage Guidelines

When to Use Glass Effects

  1. Primary UI Elements: Navigation, headers, cards
  2. Overlays: Modals, dialogs, dropdowns
  3. Interactive Elements: Buttons, form fields
  4. Status Indicators: Badges, chips, alerts

When to Avoid

  1. Body Text Areas: Maintain readability
  2. High-Frequency Updates: Performance consideration
  3. Critical Actions: Ensure clarity over aesthetics
  4. Accessibility Concerns: Provide alternatives

Maintenance Notes

File Locations

  • SCSS: assets/scss/main.scss
  • Layouts: layouts/admin.vue, layouts/board.vue, layouts/member.vue
  • Config: nuxt.config.ts (theme configuration)

Update Process

  1. Modify SCSS variables in main.scss
  2. Test across all layouts
  3. Verify responsive behavior
  4. Check browser compatibility
  5. Update this documentation

Related Documentation

Last Updated: December 2024 Implementation Version: 1.0.0