vinny/iptv-stream-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Complete 3.2.1: Advanced Breakpoint Management - Complete breakpoint system with CSS custom properties, mixin utilities, and responsive variables

Browse source
This commit is contained in:
VinnyNC 2025-09-29 20:18:36 -04:00
parent d60a17b540
commit b213fb623f
3 changed files with 314 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

63
static/css/variables.css
View file

@ -245,24 +245,57 @@
--elevation-6: var(--shadow-dodgers-xl);
/* =================================================================
BREAKPOINT VARIABLES
BREAKPOINT VARIABLES - Comprehensive Responsive System
================================================================= */
/* Mobile-first breakpoints */
--breakpoint-xs: 320px;
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
/* Mobile-first breakpoints (includes xs where content starts) */
--breakpoint-xs: 320px; /* Extra small devices (320px and up) */
--breakpoint-sm: 640px; /* Small devices (640px and up) */
--breakpoint-md: 768px; /* Medium devices (768px and up) */
--breakpoint-lg: 1024px; /* Large devices (1024px and up) */
--breakpoint-xl: 1280px; /* Extra large devices (1280px and up) */
--breakpoint-2xl: 1536px; /* 2X large devices (1536px and up) */
/* Media query mixins (these will be used in component CSS) */
/* xs: 0px and up */
/* sm: 640px and up */
/* md: 768px and up */
/* lg: 1024px and up */
/* xl: 1280px and up */
/* 2xl: 1536px and up */
/* Container max-widths at each breakpoint */
--container-xs: 320px;
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
/* Content padding that scales with breakpoints */
--container-padding-xs: var(--spacing-2);
--container-padding-sm: var(--spacing-4);
--container-padding-md: var(--spacing-6);
--container-padding-lg: var(--spacing-8);
--container-padding-xl: var(--spacing-10);
--container-padding-2xl: var(--spacing-12);
/* =================================================================
BREAKPOINT MIXIN SYSTEM & UTILITIES
================================================================= */
/* Media query helpers using custom properties */
--mq-xs: (min-width: var(--breakpoint-xs));
--mq-sm: (min-width: var(--breakpoint-sm));
--mq-md: (min-width: var(--breakpoint-md));
--mq-lg: (min-width: var(--breakpoint-lg));
--mq-xl: (min-width: var(--breakpoint-xl));
--mq-2xl: (min-width: var(--breakpoint-2xl));
/* Max-width media queries for desktop-first approach */
--mq-xs-max: (max-width: calc(var(--breakpoint-sm) - 1px));
--mq-sm-max: (max-width: calc(var(--breakpoint-md) - 1px));
--mq-md-max: (max-width: calc(var(--breakpoint-lg) - 1px));
--mq-lg-max: (max-width: calc(var(--breakpoint-xl) - 1px));
--mq-xl-max: (max-width: calc(var(--breakpoint-2xl) - 1px));
/* Combined breakpoint utilities */
--mq-sm-only: (min-width: var(--breakpoint-sm)) and (max-width: calc(var(--breakpoint-md) - 1px));
--mq-md-only: (min-width: var(--breakpoint-md)) and (max-width: calc(var(--breakpoint-lg) - 1px));
--mq-lg-only: (min-width: var(--breakpoint-lg)) and (max-width: calc(var(--breakpoint-xl) - 1px));
--mq-xl-only: (min-width: var(--breakpoint-xl)) and (max-width: calc(var(--breakpoint-2xl) - 1px));
/* =================================================================
Z-INDEX SCALE