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

5.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

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

Admin Layout (layouts/admin.vue)

  • Glass Navigation Drawer: Semi-transparent sidebar with backdrop blur
  • Gradient App Bar: Dark gradient from monaco-red-600 to monaco-red-900
  • Glass Icon Buttons: Semi-transparent with hover effects
  • Floating Logo: Subtle animation on MonacoUSA logo
  • Glass Cards: Command palette and dropdowns with glass effects

Board Layout (layouts/board.vue)

  • Glass Navigation Drawer: Consistent with admin but lighter gradient
  • Gradient App Bar: Softer gradient from monaco-red to brown tones
  • Glass Search Dialog: Search overlay with glass card styling
  • Badge Enhancements: Gradient badges with subtle shadows

Member Layout (layouts/member.vue)

  • Glass Navigation Drawer: Simplified navigation with glass effects
  • Gradient App Bar: Lightest gradient for member access level
  • Streamlined Navigation: Fewer menu items with clear hierarchy

Glass Morphism Patterns

Core Mixins

@mixin glass-effect($bg-opacity: 0.7, $blur: 20px) {
  background: rgba(255, 255, 255, $bg-opacity);
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: $shadow-glass;
}

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: 95% opacity, 30px blur
  • Dropdowns: 95% opacity, 20px blur
  • Cards: 80% opacity, 15px blur
  • Buttons: 10-20% opacity, 10px blur

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