57b8d01dcb
GRUPO 2 - Colores Personalizados (complete refactor): - Changed row structure: <div class="row"> → <div class="row g-2 mb-2"> - Changed columns: col-md-6 → col-6 (7 instances) - Added Bootstrap icons to all labels: <i class="bi bi-*" style="color: #FF8600;"> - Updated label classes: class="form-label small mb-1 fw-semibold" - Added w-100 class to all color inputs - Added hex value displays: <small id="*Value">#HEXCODE</small> Other groups fixed (8 total): - GRUPO 1: Added g-2, changed col-md-6 → col-6 (2x) - GRUPO 3: Added g-2, changed col-md-6 → col-6 (2x) - GRUPO 4: Added g-2, changed col-md-6 → col-6 (2x) - GRUPO 5: Added g-2 (maintains col-md-4 for 3 columns) - GRUPO 6: Added g-2, changed col-md-6 → col-6 (2x) - GRUPO 7: Added g-2, changed col-md-6 → col-6 (4x) - GRUPO 8: Added g-2, changed col-md-6 → col-6 (2x) Resolves #179 (Phase 2: Refactor HTML) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
586 lines
31 KiB
PHP
586 lines
31 KiB
PHP
<?php
|
|
/**
|
|
* Navbar Component - Admin Interface v2.0
|
|
* Sigue los 4 patrones obligatorios de Top Bar
|
|
*
|
|
* @package Apus_Theme
|
|
* @since 2.0.0
|
|
*/
|
|
|
|
// Prevent direct access
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
?>
|
|
|
|
<!-- ============================================================
|
|
TAB: NAVBAR CONFIGURATION
|
|
============================================================ -->
|
|
<div class="tab-pane fade"
|
|
id="navbarTab"
|
|
role="tabpanel"
|
|
aria-labelledby="navbar-config-tab">
|
|
|
|
<!-- ========================================
|
|
PATRÓN 1: HEADER CON GRADIENTE
|
|
======================================== -->
|
|
<div class="rounded p-4 mb-4 shadow text-white" style="background: linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%); border-left: 4px solid #FF8600;">
|
|
<div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
|
|
<div>
|
|
<h3 class="h4 mb-1 fw-bold">
|
|
<i class="bi bi-list me-2" style="color: #FF8600;"></i>
|
|
Configuración Navbar
|
|
</h3>
|
|
<p class="mb-0 small" style="opacity: 0.85;">
|
|
Personaliza el menú de navegación principal de tu sitio
|
|
</p>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-outline-light" id="resetNavbarDefaults">
|
|
<i class="bi bi-arrow-counterclockwise me-1"></i>
|
|
Restaurar valores por defecto
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========================================
|
|
PATRÓN 2: LAYOUT 2 COLUMNAS
|
|
======================================== -->
|
|
<div class="row g-3">
|
|
|
|
<!-- ========================================
|
|
COLUMNA IZQUIERDA
|
|
======================================== -->
|
|
<div class="col-lg-6">
|
|
|
|
<!-- ========================================
|
|
GRUPO 1: ACTIVACIÓN Y VISIBILIDAD
|
|
PATRÓN 3: CARD CON BORDER-LEFT NAVY
|
|
======================================== -->
|
|
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
|
|
<div class="card-body">
|
|
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
|
|
<i class="bi bi-toggle-on me-2" style="color: #FF8600;"></i>
|
|
Activación y Visibilidad
|
|
</h5>
|
|
|
|
<!-- PATRÓN 4: SWITCHES VERTICALES -->
|
|
|
|
<!-- Enabled -->
|
|
<div class="mb-2">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="navbarEnabled" checked="">
|
|
<label class="form-check-label small" for="navbarEnabled" style="color: #495057;">
|
|
<i class="bi bi-power me-1" style="color: #FF8600;"></i>
|
|
<strong>Activar Navbar</strong>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Show on Mobile -->
|
|
<div class="mb-2">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="navbarShowOnMobile" checked="">
|
|
<label class="form-check-label small" for="navbarShowOnMobile" style="color: #495057;">
|
|
<i class="bi bi-phone me-1" style="color: #FF8600;"></i>
|
|
<strong>Mostrar en Mobile</strong> <span class="text-muted">(<768px)</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Show on Desktop -->
|
|
<div class="mb-0">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="navbarShowOnDesktop" checked="">
|
|
<label class="form-check-label small" for="navbarShowOnDesktop" style="color: #495057;">
|
|
<i class="bi bi-display me-1" style="color: #FF8600;"></i>
|
|
<strong>Mostrar en Desktop</strong> <span class="text-muted">(≥768px)</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Selects compactados en fila -->
|
|
<div class="row g-2 mt-3">
|
|
<div class="col-6">
|
|
<div class="form-group mb-0">
|
|
<label for="navbarPosition" class="text-secondary fw-medium mb-1">
|
|
Posición
|
|
</label>
|
|
<select id="navbarPosition" class="form-select form-select-sm">
|
|
<option value="sticky" selected>Sticky (fija al scroll)</option>
|
|
<option value="static">Static (normal)</option>
|
|
<option value="fixed">Fixed (siempre fija)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-group mb-0">
|
|
<label for="navbarBreakpoint" class="text-secondary fw-medium mb-1">
|
|
Breakpoint
|
|
</label>
|
|
<select id="navbarBreakpoint" class="form-select form-select-sm">
|
|
<option value="sm">SM (576px)</option>
|
|
<option value="md">MD (768px)</option>
|
|
<option value="lg" selected>LG (992px)</option>
|
|
<option value="xl">XL (1200px)</option>
|
|
<option value="xxl">XXL (1400px)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========================================
|
|
GRUPO 2: COLORES PERSONALIZADOS
|
|
======================================== -->
|
|
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
|
|
<div class="card-body">
|
|
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
|
|
<i class="bi bi-palette me-2" style="color: #FF8600;"></i>
|
|
Colores Personalizados
|
|
</h5>
|
|
|
|
<!-- 7 colores en grid 2x2 (patrón Top Bar) -->
|
|
<div class="row g-2 mb-2">
|
|
<div class="col-6">
|
|
<label for="navbarBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
|
<i class="bi bi-paint-bucket me-1" style="color: #FF8600;"></i>
|
|
Color de fondo
|
|
</label>
|
|
<input type="color" id="navbarBgColor" class="form-control form-control-color w-100" value="#1e3a5f" title="Seleccionar color de fondo">
|
|
<small class="text-muted d-block mt-1" id="navbarBgColorValue">#1e3a5f</small>
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="navbarTextColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
|
<i class="bi bi-fonts me-1" style="color: #FF8600;"></i>
|
|
Color de texto
|
|
</label>
|
|
<input type="color" id="navbarTextColor" class="form-control form-control-color w-100" value="#ffffff" title="Seleccionar color de texto">
|
|
<small class="text-muted d-block mt-1" id="navbarTextColorValue">#ffffff</small>
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="navbarLinkHoverColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
|
<i class="bi bi-cursor me-1" style="color: #FF8600;"></i>
|
|
Color hover links
|
|
</label>
|
|
<input type="color" id="navbarLinkHoverColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color hover enlaces">
|
|
<small class="text-muted d-block mt-1" id="navbarLinkHoverColorValue">#FF8600</small>
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="navbarLinkHoverBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
|
<i class="bi bi-square-fill me-1" style="color: #FF8600;"></i>
|
|
Background hover
|
|
</label>
|
|
<input type="color" id="navbarLinkHoverBgColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color fondo hover">
|
|
<small class="text-muted d-block mt-1" id="navbarLinkHoverBgColorValue">#FF8600</small>
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="navbarDropdownBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
|
<i class="bi bi-card-text me-1" style="color: #FF8600;"></i>
|
|
Dropdown BG
|
|
</label>
|
|
<input type="color" id="navbarDropdownBgColor" class="form-control form-control-color w-100" value="#ffffff" title="Seleccionar color fondo dropdown">
|
|
<small class="text-muted d-block mt-1" id="navbarDropdownBgColorValue">#ffffff</small>
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="navbarDropdownItemColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
|
<i class="bi bi-text-left me-1" style="color: #FF8600;"></i>
|
|
Item Color
|
|
</label>
|
|
<input type="color" id="navbarDropdownItemColor" class="form-control form-control-color w-100" value="#495057" title="Seleccionar color items dropdown">
|
|
<small class="text-muted d-block mt-1" id="navbarDropdownItemColorValue">#495057</small>
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="navbarDropdownItemHoverColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
|
<i class="bi bi-hand-index me-1" style="color: #FF8600;"></i>
|
|
Item Hover
|
|
</label>
|
|
<input type="color" id="navbarDropdownItemHoverColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color hover items dropdown">
|
|
<small class="text-muted d-block mt-1" id="navbarDropdownItemHoverColorValue">#FF8600</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========================================
|
|
GRUPO 3: TIPOGRAFÍA
|
|
======================================== -->
|
|
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
|
|
<div class="card-body">
|
|
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
|
|
<i class="bi bi-fonts me-2" style="color: #FF8600;"></i>
|
|
Tipografía
|
|
</h5>
|
|
|
|
<div class="row g-2">
|
|
<div class="col-6">
|
|
<div class="form-group mb-0">
|
|
<label for="navbarFontSize" class="text-secondary fw-medium mb-1">
|
|
Tamaño de fuente
|
|
</label>
|
|
<select id="navbarFontSize" class="form-select form-select-sm">
|
|
<option value="small">Pequeño (0.8rem)</option>
|
|
<option value="normal" selected>Normal (0.9rem)</option>
|
|
<option value="large">Grande (1rem)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-group mb-0">
|
|
<label for="navbarFontWeight" class="text-secondary fw-medium mb-1">
|
|
Peso de fuente
|
|
</label>
|
|
<select id="navbarFontWeight" class="form-select form-select-sm">
|
|
<option value="400">Normal (400)</option>
|
|
<option value="500" selected>Medium (500)</option>
|
|
<option value="600">Semibold (600)</option>
|
|
<option value="700">Bold (700)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========================================
|
|
GRUPO 4: EFECTOS VISUALES
|
|
======================================== -->
|
|
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
|
|
<div class="card-body">
|
|
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
|
|
<i class="bi bi-magic me-2" style="color: #FF8600;"></i>
|
|
Efectos Visuales
|
|
</h5>
|
|
|
|
<!-- Switches verticales -->
|
|
<div class="mb-2">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="navbarEnableBoxShadow" checked="">
|
|
<label class="form-check-label small" for="navbarEnableBoxShadow" style="color: #495057;">
|
|
<i class="bi bi-box-arrow-down me-1" style="color: #FF8600;"></i>
|
|
<strong>Habilitar Box Shadow</strong>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="navbarEnableUnderlineEffect" checked="">
|
|
<label class="form-check-label small" for="navbarEnableUnderlineEffect" style="color: #495057;">
|
|
<i class="bi bi-dash-lg me-1" style="color: #FF8600;"></i>
|
|
<strong>Línea animada al hover</strong>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="navbarEnableHoverBackground" checked="">
|
|
<label class="form-check-label small" for="navbarEnableHoverBackground" style="color: #495057;">
|
|
<i class="bi bi-square-fill me-1" style="color: #FF8600;"></i>
|
|
<strong>Background al hover</strong>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Selects y números compactados -->
|
|
<div class="row g-2">
|
|
<div class="col-6">
|
|
<div class="form-group mb-0">
|
|
<label for="navbarBoxShadowIntensity" class="text-secondary fw-medium mb-1">
|
|
Intensidad sombra
|
|
</label>
|
|
<select id="navbarBoxShadowIntensity" class="form-select form-select-sm">
|
|
<option value="none">Sin sombra</option>
|
|
<option value="light">Ligera</option>
|
|
<option value="normal" selected>Normal</option>
|
|
<option value="strong">Fuerte</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-group mb-0">
|
|
<label for="navbarBorderRadius" class="text-secondary fw-medium mb-1">
|
|
Border radius (px)
|
|
</label>
|
|
<input type="number"
|
|
id="navbarBorderRadius"
|
|
class="form-control form-control-sm"
|
|
value="4"
|
|
min="0"
|
|
max="20">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div> <!-- Fin columna izquierda -->
|
|
|
|
<!-- ========================================
|
|
COLUMNA DERECHA
|
|
======================================== -->
|
|
<div class="col-lg-6">
|
|
|
|
<!-- ========================================
|
|
GRUPO 5: SPACING
|
|
======================================== -->
|
|
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
|
|
<div class="card-body">
|
|
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
|
|
<i class="bi bi-arrows-expand me-2" style="color: #FF8600;"></i>
|
|
Espaciado
|
|
</h5>
|
|
|
|
<div class="row g-2">
|
|
<div class="col-md-4">
|
|
<div class="form-group mb-3">
|
|
<label for="navbarPaddingVertical" class="text-secondary fw-medium mb-1">
|
|
Padding navbar (rem)
|
|
</label>
|
|
<input type="number"
|
|
id="navbarPaddingVertical"
|
|
class="form-control form-control-sm"
|
|
value="0.75"
|
|
min="0"
|
|
max="3"
|
|
step="0.05">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-group mb-3">
|
|
<label for="navbarLinkPaddingVertical" class="text-secondary fw-medium mb-1">
|
|
Padding links V (rem)
|
|
</label>
|
|
<input type="number"
|
|
id="navbarLinkPaddingVertical"
|
|
class="form-control form-control-sm"
|
|
value="0.5"
|
|
min="0"
|
|
max="2"
|
|
step="0.05">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-group mb-3">
|
|
<label for="navbarLinkPaddingHorizontal" class="text-secondary fw-medium mb-1">
|
|
Padding links H (rem)
|
|
</label>
|
|
<input type="number"
|
|
id="navbarLinkPaddingHorizontal"
|
|
class="form-control form-control-sm"
|
|
value="0.65"
|
|
min="0"
|
|
max="2"
|
|
step="0.05">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========================================
|
|
GRUPO 6: LET'S TALK BUTTON
|
|
======================================== -->
|
|
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
|
|
<div class="card-body">
|
|
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
|
|
<i class="bi bi-lightning-charge-fill me-2" style="color: #FF8600;"></i>
|
|
Botón "Let's Talk"
|
|
</h5>
|
|
|
|
<!-- Switches verticales -->
|
|
<div class="mb-2">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="navbarLetsTalkEnabled" checked="">
|
|
<label class="form-check-label small" for="navbarLetsTalkEnabled" style="color: #495057;">
|
|
<i class="bi bi-power me-1" style="color: #FF8600;"></i>
|
|
<strong>Mostrar botón</strong>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="navbarLetsTalkShowIcon" checked="">
|
|
<label class="form-check-label small" for="navbarLetsTalkShowIcon" style="color: #495057;">
|
|
<i class="bi bi-eye me-1" style="color: #FF8600;"></i>
|
|
<strong>Mostrar icono</strong>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Texto e icono -->
|
|
<div class="row g-2">
|
|
<div class="col-6">
|
|
<div class="form-group mb-3">
|
|
<label for="navbarLetsTalkText" class="text-secondary fw-medium mb-1">
|
|
Texto del botón
|
|
</label>
|
|
<input type="text"
|
|
id="navbarLetsTalkText"
|
|
class="form-control form-control-sm"
|
|
value="Let's Talk"
|
|
maxlength="30"
|
|
placeholder="Let's Talk">
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-group mb-3">
|
|
<label for="navbarLetsTalkIconClass" class="text-secondary fw-medium mb-1">
|
|
Clase del icono
|
|
</label>
|
|
<input type="text"
|
|
id="navbarLetsTalkIconClass"
|
|
class="form-control form-control-sm"
|
|
value="bi bi-lightning-charge-fill"
|
|
maxlength="50"
|
|
placeholder="bi bi-lightning-charge-fill">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Posición -->
|
|
<div class="form-group mb-0">
|
|
<label for="navbarLetsTalkPosition" class="text-secondary fw-medium mb-1">
|
|
Posición dentro del navbar
|
|
</label>
|
|
<select id="navbarLetsTalkPosition" class="form-select form-select-sm">
|
|
<option value="left">Izquierda</option>
|
|
<option value="center">Centro</option>
|
|
<option value="right" selected>Derecha</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========================================
|
|
GRUPO 7: DROPDOWN
|
|
======================================== -->
|
|
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
|
|
<div class="card-body">
|
|
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
|
|
<i class="bi bi-chevron-down me-2" style="color: #FF8600;"></i>
|
|
Dropdown
|
|
</h5>
|
|
|
|
<!-- Switch vertical -->
|
|
<div class="mb-3">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="navbarDropdownEnableHoverDesktop" checked="">
|
|
<label class="form-check-label small" for="navbarDropdownEnableHoverDesktop" style="color: #495057;">
|
|
<i class="bi bi-cursor me-1" style="color: #FF8600;"></i>
|
|
<strong>Activar al hover (desktop)</strong>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Números y selects -->
|
|
<div class="row g-2">
|
|
<div class="col-6">
|
|
<div class="form-group mb-3">
|
|
<label for="navbarDropdownMaxHeight" class="text-secondary fw-medium mb-1">
|
|
Altura máxima (vh)
|
|
</label>
|
|
<input type="number"
|
|
id="navbarDropdownMaxHeight"
|
|
class="form-control form-control-sm"
|
|
value="70"
|
|
min="30"
|
|
max="90">
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-group mb-3">
|
|
<label for="navbarDropdownBorderRadius" class="text-secondary fw-medium mb-1">
|
|
Border radius (px)
|
|
</label>
|
|
<input type="number"
|
|
id="navbarDropdownBorderRadius"
|
|
class="form-control form-control-sm"
|
|
value="8"
|
|
min="0"
|
|
max="20">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-2">
|
|
<div class="col-6">
|
|
<div class="form-group mb-0">
|
|
<label for="navbarDropdownItemPaddingVertical" class="text-secondary fw-medium mb-1">
|
|
Padding items V (rem)
|
|
</label>
|
|
<input type="number"
|
|
id="navbarDropdownItemPaddingVertical"
|
|
class="form-control form-control-sm"
|
|
value="0.5"
|
|
min="0"
|
|
max="2"
|
|
step="0.05">
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-group mb-0">
|
|
<label for="navbarDropdownItemPaddingHorizontal" class="text-secondary fw-medium mb-1">
|
|
Padding items H (rem)
|
|
</label>
|
|
<input type="number"
|
|
id="navbarDropdownItemPaddingHorizontal"
|
|
class="form-control form-control-sm"
|
|
value="1.25"
|
|
min="0"
|
|
max="3"
|
|
step="0.05">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========================================
|
|
GRUPO 8: AVANZADO (OPCIONAL)
|
|
======================================== -->
|
|
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
|
|
<div class="card-body">
|
|
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
|
|
<i class="bi bi-gear me-2" style="color: #FF8600;"></i>
|
|
Avanzado
|
|
</h5>
|
|
|
|
<div class="row g-2">
|
|
<div class="col-6">
|
|
<div class="form-group mb-0">
|
|
<label for="navbarZIndex" class="text-secondary fw-medium mb-1">
|
|
Z-index
|
|
</label>
|
|
<input type="number"
|
|
id="navbarZIndex"
|
|
class="form-control form-control-sm"
|
|
value="1030"
|
|
min="0"
|
|
max="9999">
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-group mb-0">
|
|
<label for="navbarTransitionSpeed" class="text-secondary fw-medium mb-1">
|
|
Velocidad transiciones
|
|
</label>
|
|
<select id="navbarTransitionSpeed" class="form-select form-select-sm">
|
|
<option value="fast">Rápida (0.2s)</option>
|
|
<option value="normal" selected>Normal (0.3s)</option>
|
|
<option value="slow">Lenta (0.5s)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div> <!-- Fin columna derecha -->
|
|
|
|
</div> <!-- Fin row g-3 -->
|
|
|
|
</div> <!-- Fin tab-pane -->
|