Agregar estructura completa del tema APUS con Bootstrap 5 y optimizaciones de rendimiento
Se implementa tema WordPress personalizado para Análisis de Precios Unitarios con funcionalidades avanzadas: - Sistema de templates (front-page, single, archive, page, 404, search) - Integración de Bootstrap 5.3.8 con estructura modular de assets - Panel de opciones del tema con Customizer API - Optimizaciones de rendimiento (Critical CSS, Image Optimization, Performance) - Funcionalidades SEO y compatibilidad con Rank Math - Sistema de posts relacionados y tabla de contenidos - Badge de categorías y manejo de AdSense diferido - Tipografías Google Fonts configurables - Documentación completa del tema y guías de uso 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
527
wp-content/themes/apus-theme/assets/css/utilities.css
Normal file
527
wp-content/themes/apus-theme/assets/css/utilities.css
Normal file
@@ -0,0 +1,527 @@
|
||||
/**
|
||||
* Utility Classes
|
||||
*
|
||||
* Common utility classes for spacing, sizing, and layout
|
||||
* @package Apus_Theme
|
||||
* @since 1.0.0
|
||||
*/
|
||||
|
||||
/* Display utilities */
|
||||
.d-none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.d-inline {
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
.d-inline-block {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.d-block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.d-grid {
|
||||
display: grid !important;
|
||||
}
|
||||
|
||||
.d-table {
|
||||
display: table !important;
|
||||
}
|
||||
|
||||
.d-table-row {
|
||||
display: table-row !important;
|
||||
}
|
||||
|
||||
.d-table-cell {
|
||||
display: table-cell !important;
|
||||
}
|
||||
|
||||
.d-contents {
|
||||
display: contents !important;
|
||||
}
|
||||
|
||||
/* Visibility utilities */
|
||||
.visibility-hidden {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.visibility-visible {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
/* Overflow utilities */
|
||||
.overflow-auto {
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.overflow-visible {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.overflow-scroll {
|
||||
overflow: scroll !important;
|
||||
}
|
||||
|
||||
.overflow-x-auto {
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
/* Position utilities */
|
||||
.position-static {
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
.position-relative {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.position-absolute {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
.position-fixed {
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
.position-sticky {
|
||||
position: sticky !important;
|
||||
}
|
||||
|
||||
/* Floating utilities */
|
||||
.float-start {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.float-end {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.float-none {
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
/* Flex utilities */
|
||||
.flex-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
|
||||
.flex-nowrap {
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
|
||||
.flex-grow-1 {
|
||||
flex-grow: 1 !important;
|
||||
}
|
||||
|
||||
.flex-shrink-1 {
|
||||
flex-shrink: 1 !important;
|
||||
}
|
||||
|
||||
.justify-content-start {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
.justify-content-end {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.justify-content-center {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.justify-content-between {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.justify-content-around {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
.align-items-start {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.align-items-end {
|
||||
align-items: flex-end !important;
|
||||
}
|
||||
|
||||
.align-items-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.align-items-baseline {
|
||||
align-items: baseline !important;
|
||||
}
|
||||
|
||||
.align-items-stretch {
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
.align-content-start {
|
||||
align-content: flex-start !important;
|
||||
}
|
||||
|
||||
.align-content-end {
|
||||
align-content: flex-end !important;
|
||||
}
|
||||
|
||||
.align-content-center {
|
||||
align-content: center !important;
|
||||
}
|
||||
|
||||
.align-content-between {
|
||||
align-content: space-between !important;
|
||||
}
|
||||
|
||||
/* Gap utilities */
|
||||
.gap-0 {
|
||||
gap: 0 !important;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.25rem !important;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 1rem !important;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1.5rem !important;
|
||||
}
|
||||
|
||||
.gap-5 {
|
||||
gap: 3rem !important;
|
||||
}
|
||||
|
||||
/* Text alignment */
|
||||
.text-start {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.text-end {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
text-align: justify !important;
|
||||
}
|
||||
|
||||
/* Text transform */
|
||||
.text-lowercase {
|
||||
text-transform: lowercase !important;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.text-capitalize {
|
||||
text-transform: capitalize !important;
|
||||
}
|
||||
|
||||
/* Text wrapping */
|
||||
.text-wrap {
|
||||
word-wrap: break-word !important;
|
||||
}
|
||||
|
||||
.text-nowrap {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.text-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Font weight */
|
||||
.fw-light {
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
.fw-normal {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.fw-bold {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.fw-bolder {
|
||||
font-weight: 900 !important;
|
||||
}
|
||||
|
||||
/* Font style */
|
||||
.fst-italic {
|
||||
font-style: italic !important;
|
||||
}
|
||||
|
||||
.fst-normal {
|
||||
font-style: normal !important;
|
||||
}
|
||||
|
||||
/* Line height */
|
||||
.lh-1 {
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.lh-sm {
|
||||
line-height: 1.25 !important;
|
||||
}
|
||||
|
||||
.lh-base {
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
.lh-lg {
|
||||
line-height: 2 !important;
|
||||
}
|
||||
|
||||
/* Border utilities */
|
||||
.border {
|
||||
border: 1px solid #dee2e6 !important;
|
||||
}
|
||||
|
||||
.border-0 {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.border-top {
|
||||
border-top: 1px solid #dee2e6 !important;
|
||||
}
|
||||
|
||||
.border-end {
|
||||
border-right: 1px solid #dee2e6 !important;
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid #dee2e6 !important;
|
||||
}
|
||||
|
||||
.border-start {
|
||||
border-left: 1px solid #dee2e6 !important;
|
||||
}
|
||||
|
||||
.border-rounded {
|
||||
border-radius: 0.25rem !important;
|
||||
}
|
||||
|
||||
.border-rounded-1 {
|
||||
border-radius: 0.25rem !important;
|
||||
}
|
||||
|
||||
.border-rounded-2 {
|
||||
border-radius: 0.5rem !important;
|
||||
}
|
||||
|
||||
.border-rounded-3 {
|
||||
border-radius: 1rem !important;
|
||||
}
|
||||
|
||||
.border-rounded-circle {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
/* Width and Height */
|
||||
.w-auto {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.w-25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.w-50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.w-75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.h-auto {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.h-25 {
|
||||
height: 25% !important;
|
||||
}
|
||||
|
||||
.h-50 {
|
||||
height: 50% !important;
|
||||
}
|
||||
|
||||
.h-75 {
|
||||
height: 75% !important;
|
||||
}
|
||||
|
||||
.h-100 {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.min-vh-100 {
|
||||
min-height: 100vh !important;
|
||||
}
|
||||
|
||||
/* Opacity */
|
||||
.opacity-0 {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.opacity-25 {
|
||||
opacity: 0.25 !important;
|
||||
}
|
||||
|
||||
.opacity-50 {
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
.opacity-75 {
|
||||
opacity: 0.75 !important;
|
||||
}
|
||||
|
||||
.opacity-100 {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Shadow */
|
||||
.shadow-none {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
|
||||
}
|
||||
|
||||
.shadow-sm {
|
||||
box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.075) !important;
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
|
||||
}
|
||||
|
||||
/* Clearfix */
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Cursor utilities */
|
||||
.cursor-pointer {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.cursor-default {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
.cursor-not-allowed {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
.cursor-auto {
|
||||
cursor: auto !important;
|
||||
}
|
||||
|
||||
/* User select */
|
||||
.user-select-auto {
|
||||
user-select: auto !important;
|
||||
}
|
||||
|
||||
.user-select-none {
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
.user-select-all {
|
||||
user-select: all !important;
|
||||
}
|
||||
|
||||
/* Pointer events */
|
||||
.pointer-events-none {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.pointer-events-auto {
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
/* Object fit */
|
||||
.object-fit-contain {
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
.object-fit-cover {
|
||||
object-fit: cover !important;
|
||||
}
|
||||
|
||||
.object-fit-fill {
|
||||
object-fit: fill !important;
|
||||
}
|
||||
|
||||
.object-fit-scale {
|
||||
object-fit: scale-down !important;
|
||||
}
|
||||
|
||||
/* Z-index */
|
||||
.z-1 {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
.z-2 {
|
||||
z-index: 2 !important;
|
||||
}
|
||||
|
||||
.z-3 {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
|
||||
.z-auto {
|
||||
z-index: auto !important;
|
||||
}
|
||||
|
||||
/* Transition */
|
||||
.transition-all {
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.transition-none {
|
||||
transition: none !important;
|
||||
}
|
||||
Reference in New Issue
Block a user