Files
BreakEscape/css/utilities.css

180 lines
2.4 KiB
CSS

/* Utility Classes */
/* Visibility Utilities */
.hidden {
display: none !important;
}
.show {
display: block !important;
}
.show-flex {
display: flex !important;
}
.show-inline {
display: inline !important;
}
.show-inline-block {
display: inline-block !important;
}
/* Positioning Utilities */
.position-absolute {
position: absolute;
}
.position-relative {
position: relative;
}
.position-fixed {
position: fixed;
}
/* Z-index Utilities */
.z-1 {
z-index: 1;
}
.z-2 {
z-index: 2;
}
.z-3 {
z-index: 3;
}
.z-1000 {
z-index: 1000;
}
/* Color Utilities */
.success-border {
border: 2px solid #00ff00 !important;
}
.error-border {
border: 2px solid #ff0000 !important;
}
.warning-border {
border: 2px solid #ffaa00 !important;
}
/* Progress Utilities */
.progress-0 {
width: 0% !important;
}
.progress-25 {
width: 25% !important;
}
.progress-50 {
width: 50% !important;
}
.progress-75 {
width: 75% !important;
}
.progress-100 {
width: 100% !important;
}
/* Background Utilities */
.bg-success {
background-color: #2ecc71 !important;
}
.bg-error {
background-color: #e74c3c !important;
}
.bg-warning {
background-color: #f39c12 !important;
}
.bg-info {
background-color: #3498db !important;
}
.bg-dark {
background-color: #2c3e50 !important;
}
/* Text Color Utilities */
.text-success {
color: #2ecc71 !important;
}
.text-error {
color: #e74c3c !important;
}
.text-warning {
color: #f39c12 !important;
}
.text-info {
color: #3498db !important;
}
.text-muted {
color: #95a5a6 !important;
}
.text-white {
color: #ffffff !important;
}
/* Pointer Events */
.pointer-events-none {
pointer-events: none !important;
}
.pointer-events-auto {
pointer-events: auto !important;
}
/* Transition Utilities */
.transition-fast {
transition: all 0.15s ease;
}
.transition-normal {
transition: all 0.3s ease;
}
.transition-slow {
transition: all 0.5s ease;
}
/* Transform Utilities */
.scale-105 {
transform: scale(1.05);
}
.scale-110 {
transform: scale(1.1);
}
/* Box Shadow Utilities */
.shadow-glow {
box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
.shadow-glow-strong {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}
.shadow-success {
box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
}
.shadow-error {
box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}