Files
roi-theme/wp-content/themes/apus-theme/assets/css/utilities.css
FrankZamora 7ba9080f57 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>
2025-11-04 09:31:47 -06:00

528 lines
7.1 KiB
CSS

/**
* 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;
}