vanduo-framework 1.1.8-docs-update

package/css/utilities/media.css

@@ -0,0 +1,167 @@
+/**
+ * Vanduo Framework - Media Utilities
+ * Responsive image and media utilities
+ */
+
+/* Responsive Images */
+.img-responsive,
+.img-fluid {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+.img-fluid {
+  width: 100%;
+}
+
+/* Object Fit Utilities */
+.object-fit-contain {
+  object-fit: contain;
+}
+
+.object-fit-cover {
+  object-fit: cover;
+}
+
+.object-fit-fill {
+  object-fit: fill;
+}
+
+.object-fit-none {
+  object-fit: none;
+}
+
+.object-fit-scale-down {
+  object-fit: scale-down;
+}
+
+/* Object Position Utilities */
+.object-position-center {
+  object-position: center;
+}
+
+.object-position-top {
+  object-position: top;
+}
+
+.object-position-bottom {
+  object-position: bottom;
+}
+
+.object-position-left {
+  object-position: left;
+}
+
+.object-position-right {
+  object-position: right;
+}
+
+.object-position-top-left {
+  object-position: top left;
+}
+
+.object-position-top-right {
+  object-position: top right;
+}
+
+.object-position-bottom-left {
+  object-position: bottom left;
+}
+
+.object-position-bottom-right {
+  object-position: bottom right;
+}
+
+/* Aspect Ratio Utilities */
+.aspect-ratio {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%; /* 16:9 default */
+}
+
+.aspect-ratio > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.aspect-ratio-1-1 {
+  padding-bottom: 100%; /* 1:1 - Square */
+}
+
+.aspect-ratio-16-9 {
+  padding-bottom: 56.25%; /* 16:9 - Video */
+}
+
+.aspect-ratio-4-3 {
+  padding-bottom: 75%; /* 4:3 - Classic */
+}
+
+.aspect-ratio-21-9 {
+  padding-bottom: 42.857%; /* 21:9 - Ultrawide */
+}
+
+.aspect-ratio-3-2 {
+  padding-bottom: 66.667%; /* 3:2 */
+}
+
+.aspect-ratio-2-1 {
+  padding-bottom: 50%; /* 2:1 */
+}
+
+.aspect-ratio-golden {
+  padding-bottom: 61.8%; /* 1:1.618 - Golden Rectangle landscape */
+}
+
+.aspect-ratio-golden-portrait {
+  padding-bottom: 161.8%; /* 1.618:1 - Golden Rectangle portrait */
+}
+
+/* Image Styles */
+.img-rounded {
+  border-radius: var(--btn-border-radius);
+}
+
+.img-circle {
+  border-radius: 50%;
+}
+
+.img-thumbnail {
+  padding: 0.1875rem; /* 3px - fib */
+  background-color: var(--color-white);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-fib-5);
+  max-width: 100%;
+  height: auto;
+}
+
+/* Image Alignment */
+.img-left {
+  float: left;
+  margin-right: 0.8125rem; /* 13px - fib */
+  margin-bottom: 0.8125rem;
+}
+
+.img-right {
+  float: right;
+  margin-left: 0.8125rem; /* 13px - fib */
+  margin-bottom: 0.8125rem;
+}
+
+.img-center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Clearfix for floated images */
+.img-clearfix::after {
+  content: '';
+  display: table;
+  clear: both;
+}
+

package/css/utilities/print.css

@@ -0,0 +1,111 @@
+/**
+ * Vanduo Framework - Print Styles
+ * Optimized styles for printing
+ */
+
+@media print {
+  /* Reset backgrounds and shadows for printing */
+  *,
+  *::before,
+  *::after {
+    background: transparent !important;
+    color: #000 !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  /* Links */
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.8em;
+  }
+
+  a[href^="#"]::after,
+  a[href^="javascript:"]::after {
+    content: "";
+  }
+
+  /* Images */
+  img {
+    max-width: 100% !important;
+    page-break-inside: avoid;
+  }
+
+  /* Headings */
+  h1, h2, h3, h4, h5, h6 {
+    page-break-after: avoid;
+    page-break-inside: avoid;
+  }
+
+  /* Paragraphs */
+  p {
+    orphans: 3;
+    widows: 3;
+  }
+
+  /* Tables */
+  table {
+    border-collapse: collapse !important;
+  }
+
+  thead {
+    display: table-header-group;
+  }
+
+  tr {
+    page-break-inside: avoid;
+  }
+
+  /* Hide non-essential elements */
+  .navbar,
+  .navbar-menu,
+  .navbar-toggle,
+  .navbar-overlay,
+  .sidenav,
+  .modal,
+  .modal-backdrop,
+  .tooltip,
+  .dropdown-menu,
+  .btn-group,
+  .pagination,
+  .skip-link,
+  .d-print-none {
+    display: none !important;
+  }
+
+  /* Show print-only elements */
+  .d-print-block {
+    display: block !important;
+  }
+
+  .d-print-inline {
+    display: inline !important;
+  }
+
+  .d-print-inline-block {
+    display: inline-block !important;
+  }
+
+  /* Container adjustments */
+  .container {
+    width: 100% !important;
+    max-width: none !important;
+    padding: 0 !important;
+  }
+
+  /* Pre and code blocks */
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+  }
+}

package/css/utilities/shadow.css

@@ -0,0 +1,243 @@
+/**
+ * Vanduo Framework - Shadow Utilities
+ * Elevation and shadow system for depth and visual hierarchy
+ */
+
+:root {
+  /* Fibonacci Shadow System
+   * Y-offset and blur follow Fibonacci pairs: 1/2, 2/3, 3/5, 8/13, 13/21, 21/34
+   * Each level steps through the Fibonacci sequence */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -2px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.1), 0 5px 8px -5px rgba(0, 0, 0, 0.1);
+  --shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.25);
+  --shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.05);
+
+  /* Colored Shadows (Fibonacci: 3/5 offset/blur)
+   * Colors match Open Color palette defined in colors.css */
+  --shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.2), 0 2px 3px -2px rgba(34, 184, 207, 0.1);
+  --shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.2), 0 2px 3px -2px rgba(64, 192, 87, 0.1);
+  --shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.2), 0 2px 3px -2px rgba(250, 176, 5, 0.1);
+  --shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.2), 0 2px 3px -2px rgba(250, 82, 82, 0.1);
+
+  /* Glow Effect Colors - uses color scale variables */
+  --glow-primary-color: var(--primary-3);
+  --glow-success-color: var(--success-3);
+  --glow-warning-color: var(--warning-3);
+  --glow-error-color: var(--danger-3);
+}
+
+/* Shadow Utilities */
+.vd-shadow-none {
+  box-shadow: none;
+}
+
+.vd-shadow-sm {
+  box-shadow: var(--shadow-sm);
+}
+
+.vd-shadow {
+  box-shadow: var(--shadow);
+}
+
+.vd-shadow-md {
+  box-shadow: var(--shadow-md);
+}
+
+.vd-shadow-lg {
+  box-shadow: var(--shadow-lg);
+}
+
+.vd-shadow-xl {
+  box-shadow: var(--shadow-xl);
+}
+
+.vd-shadow-2xl {
+  box-shadow: var(--shadow-2xl);
+}
+
+.vd-shadow-inner {
+  box-shadow: var(--shadow-inner);
+}
+
+/* Colored Shadow Utilities */
+.vd-shadow-primary {
+  box-shadow: var(--shadow-primary);
+}
+
+.vd-shadow-success {
+  box-shadow: var(--shadow-success);
+}
+
+.vd-shadow-warning {
+  box-shadow: var(--shadow-warning);
+}
+
+.vd-shadow-error {
+  box-shadow: var(--shadow-error);
+}
+
+/* Elevation Levels (for Material Design-like system) */
+.elevation-0 {
+  box-shadow: none;
+}
+
+.elevation-1 {
+  box-shadow: var(--shadow-sm);
+}
+
+.elevation-2 {
+  box-shadow: var(--shadow);
+}
+
+.elevation-3 {
+  box-shadow: var(--shadow-md);
+}
+
+.elevation-4 {
+  box-shadow: var(--shadow-lg);
+}
+
+.elevation-5 {
+  box-shadow: var(--shadow-xl);
+}
+
+/* ═════════════════════════════════════════════════════════════════════════
+ * GLOW EFFECT UTILITIES
+ * Soft glowing shadows for interactive elements
+ * ═════════════════════════════════════════════════════════════════════════ */
+
+/* Base Glow (uses primary color) */
+.vd-glow,
+.vd-glow-primary,
+.glow,
+.glow-primary {
+  box-shadow: 0 0 15px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.25));
+}
+
+/* Glow on Hover */
+.vd-hover-glow,
+.vd-hover-glow-primary,
+.hover-glow,
+.hover-glow-primary {
+  transition: box-shadow 0.3s ease;
+}
+
+.vd-hover-glow:hover,
+.vd-hover-glow-primary:hover,
+.hover-glow:hover,
+.hover-glow-primary:hover {
+  box-shadow: 0 0 15px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.25));
+}
+
+/* Glow Color Variants */
+.vd-glow-success,
+.glow-success {
+  box-shadow: 0 0 15px 0 var(--glow-success-color, rgba(64, 192, 87, 0.25));
+}
+
+.vd-glow-warning,
+.glow-warning {
+  box-shadow: 0 0 15px 0 var(--glow-warning-color, rgba(250, 176, 5, 0.25));
+}
+
+.vd-glow-error,
+.glow-error {
+  box-shadow: 0 0 15px 0 var(--glow-error-color, rgba(250, 82, 82, 0.25));
+}
+
+/* Glow Hover Variants */
+.vd-hover-glow-success:hover,
+.hover-glow-success:hover {
+  box-shadow: 0 0 15px 0 var(--glow-success-color, rgba(64, 192, 87, 0.25));
+}
+
+.vd-hover-glow-warning:hover,
+.hover-glow-warning:hover {
+  box-shadow: 0 0 15px 0 var(--glow-warning-color, rgba(250, 176, 5, 0.25));
+}
+
+.vd-hover-glow-error:hover,
+.hover-glow-error:hover {
+  box-shadow: 0 0 15px 0 var(--glow-error-color, rgba(250, 82, 82, 0.25));
+}
+
+/* Glow Intensity Variants */
+.vd-glow-sm,
+.glow-sm {
+  box-shadow: 0 0 8px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.15));
+}
+
+.vd-glow-md,
+.glow-md {
+  box-shadow: 0 0 15px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.25));
+}
+
+.vd-glow-lg,
+.glow-lg {
+  box-shadow: 0 0 22px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.35));
+}
+
+.vd-hover-glow-sm:hover,
+.hover-glow-sm:hover {
+  box-shadow: 0 0 8px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.15));
+}
+
+.vd-hover-glow-md:hover,
+.hover-glow-md:hover {
+  box-shadow: 0 0 15px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.25));
+}
+
+.vd-hover-glow-lg:hover,
+.hover-glow-lg:hover {
+  box-shadow: 0 0 22px 0 var(--glow-primary-color, rgba(34, 184, 207, 0.35));
+}
+
+/* Dark Mode Shadow Overrides
+ * Dark backgrounds need stronger shadows for visible depth
+ * Matches both explicit dark theme and system preference */
+[data-theme="dark"],
+:root:not([data-theme]) {
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.35), 0 2px 3px -2px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -3px rgba(0, 0, 0, 0.3);
+  --shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.35), 0 5px 8px -5px rgba(0, 0, 0, 0.3);
+  --shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.5);
+  --shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.2);
+  --shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.3), 0 2px 3px -2px rgba(34, 184, 207, 0.2);
+  --shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.3), 0 2px 3px -2px rgba(64, 192, 87, 0.2);
+  --shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.3), 0 2px 3px -2px rgba(250, 176, 5, 0.2);
+  --shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.3), 0 2px 3px -2px rgba(250, 82, 82, 0.2);
+
+  /* Glow Effect Colors - Dark Mode (lighter shades for visibility) */
+  --glow-primary-color: var(--primary-4);
+  --glow-success-color: var(--success-4);
+  --glow-warning-color: var(--warning-4);
+  --glow-error-color: var(--danger-4);
+}
+
+/* System preference dark mode (when no explicit theme is set) */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+    --shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 3px 5px -1px rgba(0, 0, 0, 0.35), 0 2px 3px -2px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 8px 13px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -3px rgba(0, 0, 0, 0.3);
+    --shadow-xl: 0 13px 21px -5px rgba(0, 0, 0, 0.35), 0 5px 8px -5px rgba(0, 0, 0, 0.3);
+    --shadow-2xl: 0 21px 34px -8px rgba(0, 0, 0, 0.5);
+    --shadow-inner: inset 0 2px 3px 0 rgba(0, 0, 0, 0.2);
+    --shadow-primary: 0 3px 5px -1px rgba(34, 184, 207, 0.3), 0 2px 3px -2px rgba(34, 184, 207, 0.2);
+    --shadow-success: 0 3px 5px -1px rgba(64, 192, 87, 0.3), 0 2px 3px -2px rgba(64, 192, 87, 0.2);
+    --shadow-warning: 0 3px 5px -1px rgba(250, 176, 5, 0.3), 0 2px 3px -2px rgba(250, 176, 5, 0.2);
+    --shadow-error: 0 3px 5px -1px rgba(250, 82, 82, 0.3), 0 2px 3px -2px rgba(250, 82, 82, 0.2);
+
+    /* Glow Effect Colors - Dark Mode */
+    --glow-primary-color: var(--primary-4);
+    --glow-success-color: var(--success-4);
+    --glow-warning-color: var(--warning-4);
+    --glow-error-color: var(--danger-4);
+  }
+}