init commit
This commit is contained in:
David Melendez
618
resources/sass/utilities/_helpers.scss
Normal file
618
resources/sass/utilities/_helpers.scss
Normal file
@@ -0,0 +1,618 @@
|
||||
// ==========================================================================
|
||||
// Utility Classes
|
||||
// Professional Resume Builder - Helper Classes
|
||||
// ==========================================================================
|
||||
|
||||
// Spacing utilities (extending Bootstrap)
|
||||
.spacing-xs { margin: var(--spacing-xs); }
|
||||
.spacing-sm { margin: var(--spacing-sm); }
|
||||
.spacing-md { margin: var(--spacing-md); }
|
||||
.spacing-lg { margin: var(--spacing-lg); }
|
||||
.spacing-xl { margin: var(--spacing-xl); }
|
||||
.spacing-2xl { margin: var(--spacing-2xl); }
|
||||
.spacing-3xl { margin: var(--spacing-3xl); }
|
||||
.spacing-4xl { margin: var(--spacing-4xl); }
|
||||
|
||||
.p-xs { padding: var(--spacing-xs); }
|
||||
.p-sm { padding: var(--spacing-sm); }
|
||||
.p-md { padding: var(--spacing-md); }
|
||||
.p-lg { padding: var(--spacing-lg); }
|
||||
.p-xl { padding: var(--spacing-xl); }
|
||||
.p-2xl { padding: var(--spacing-2xl); }
|
||||
.p-3xl { padding: var(--spacing-3xl); }
|
||||
.p-4xl { padding: var(--spacing-4xl); }
|
||||
|
||||
// Margin utilities
|
||||
.m-xs { margin: var(--spacing-xs); }
|
||||
.m-sm { margin: var(--spacing-sm); }
|
||||
.m-md { margin: var(--spacing-md); }
|
||||
.m-lg { margin: var(--spacing-lg); }
|
||||
.m-xl { margin: var(--spacing-xl); }
|
||||
.m-2xl { margin: var(--spacing-2xl); }
|
||||
|
||||
.mt-xs { margin-top: var(--spacing-xs); }
|
||||
.mt-sm { margin-top: var(--spacing-sm); }
|
||||
.mt-md { margin-top: var(--spacing-md); }
|
||||
.mt-lg { margin-top: var(--spacing-lg); }
|
||||
.mt-xl { margin-top: var(--spacing-xl); }
|
||||
.mt-2xl { margin-top: var(--spacing-2xl); }
|
||||
|
||||
.mb-xs { margin-bottom: var(--spacing-xs); }
|
||||
.mb-sm { margin-bottom: var(--spacing-sm); }
|
||||
.mb-md { margin-bottom: var(--spacing-md); }
|
||||
.mb-lg { margin-bottom: var(--spacing-lg); }
|
||||
.mb-xl { margin-bottom: var(--spacing-xl); }
|
||||
.mb-2xl { margin-bottom: var(--spacing-2xl); }
|
||||
|
||||
// Text utilities
|
||||
.text-primary-custom {
|
||||
color: var(--brand-primary) !important;
|
||||
}
|
||||
|
||||
.text-success-custom {
|
||||
color: var(--brand-success) !important;
|
||||
}
|
||||
|
||||
.text-warning-custom {
|
||||
color: var(--brand-warning) !important;
|
||||
}
|
||||
|
||||
.text-danger-custom {
|
||||
color: var(--brand-danger) !important;
|
||||
}
|
||||
|
||||
.text-info-custom {
|
||||
color: var(--brand-info) !important;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: var(--brand-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.text-gradient-success {
|
||||
background: var(--brand-gradient-success);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.text-shadow {
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.text-shadow-sm {
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.text-shadow-lg {
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
// Background utilities
|
||||
.bg-gradient-primary {
|
||||
background: var(--brand-gradient) !important;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.bg-gradient-success {
|
||||
background: var(--brand-gradient-success) !important;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.bg-gradient-warning {
|
||||
background: var(--brand-gradient-warning) !important;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.bg-gradient-danger {
|
||||
background: var(--brand-gradient-danger) !important;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.bg-gradient-info {
|
||||
background: var(--brand-gradient-info) !important;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
.bg-primary-light {
|
||||
background-color: var(--brand-primary-light) !important;
|
||||
color: var(--brand-primary-dark);
|
||||
}
|
||||
|
||||
.bg-success-light {
|
||||
background-color: var(--brand-success-light) !important;
|
||||
color: var(--brand-success-dark);
|
||||
}
|
||||
|
||||
.bg-warning-light {
|
||||
background-color: var(--brand-warning-light) !important;
|
||||
color: var(--brand-warning-dark);
|
||||
}
|
||||
|
||||
.bg-danger-light {
|
||||
background-color: var(--brand-danger-light) !important;
|
||||
color: var(--brand-danger-dark);
|
||||
}
|
||||
|
||||
.bg-info-light {
|
||||
background-color: var(--brand-info-light) !important;
|
||||
color: var(--brand-info-dark);
|
||||
}
|
||||
|
||||
// Border utilities
|
||||
.border-primary-custom {
|
||||
border-color: var(--brand-primary) !important;
|
||||
}
|
||||
|
||||
.border-success-custom {
|
||||
border-color: var(--brand-success) !important;
|
||||
}
|
||||
|
||||
.border-warning-custom {
|
||||
border-color: var(--brand-warning) !important;
|
||||
}
|
||||
|
||||
.border-danger-custom {
|
||||
border-color: var(--brand-danger) !important;
|
||||
}
|
||||
|
||||
.border-info-custom {
|
||||
border-color: var(--brand-info) !important;
|
||||
}
|
||||
|
||||
.border-radius-xs {
|
||||
border-radius: var(--border-radius-xs) !important;
|
||||
}
|
||||
|
||||
.border-radius-sm {
|
||||
border-radius: var(--border-radius-sm) !important;
|
||||
}
|
||||
|
||||
.border-radius-md {
|
||||
border-radius: var(--border-radius-md) !important;
|
||||
}
|
||||
|
||||
.border-radius-lg {
|
||||
border-radius: var(--border-radius-lg) !important;
|
||||
}
|
||||
|
||||
.border-radius-xl {
|
||||
border-radius: var(--border-radius-xl) !important;
|
||||
}
|
||||
|
||||
.border-radius-full {
|
||||
border-radius: var(--border-radius-full) !important;
|
||||
}
|
||||
|
||||
// Shadow utilities
|
||||
.shadow-xs {
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.shadow-sm {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
|
||||
.shadow-md {
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.shadow-xl {
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
|
||||
}
|
||||
|
||||
.shadow-2xl {
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
|
||||
.shadow-inner {
|
||||
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
|
||||
.shadow-none {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// Colored shadows
|
||||
.shadow-primary {
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15) !important;
|
||||
}
|
||||
|
||||
.shadow-success {
|
||||
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15) !important;
|
||||
}
|
||||
|
||||
.shadow-warning {
|
||||
box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15) !important;
|
||||
}
|
||||
|
||||
.shadow-danger {
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15) !important;
|
||||
}
|
||||
|
||||
.shadow-info {
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
|
||||
}
|
||||
|
||||
// Display utilities
|
||||
.d-grid {
|
||||
display: grid !important;
|
||||
}
|
||||
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
|
||||
}
|
||||
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||
}
|
||||
|
||||
.grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
|
||||
}
|
||||
|
||||
.grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
||||
}
|
||||
|
||||
.grid-gap-1 {
|
||||
gap: 0.25rem !important;
|
||||
}
|
||||
|
||||
.grid-gap-2 {
|
||||
gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
.grid-gap-3 {
|
||||
gap: 1rem !important;
|
||||
}
|
||||
|
||||
.grid-gap-4 {
|
||||
gap: 1.5rem !important;
|
||||
}
|
||||
|
||||
.grid-gap-5 {
|
||||
gap: 2rem !important;
|
||||
}
|
||||
|
||||
// Flexbox utilities
|
||||
.flex-center {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.flex-around {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
.flex-column-center {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
// Position utilities
|
||||
.position-center {
|
||||
position: absolute !important;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
}
|
||||
|
||||
.position-center-x {
|
||||
position: absolute !important;
|
||||
left: 50% !important;
|
||||
transform: translateX(-50%) !important;
|
||||
}
|
||||
|
||||
.position-center-y {
|
||||
position: absolute !important;
|
||||
top: 50% !important;
|
||||
transform: translateY(-50%) !important;
|
||||
}
|
||||
|
||||
// Visibility utilities
|
||||
.invisible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
// Cursor utilities
|
||||
.cursor-pointer {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.cursor-not-allowed {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
.cursor-wait {
|
||||
cursor: wait !important;
|
||||
}
|
||||
|
||||
.cursor-help {
|
||||
cursor: help !important;
|
||||
}
|
||||
|
||||
// Transform utilities
|
||||
.transform-none {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.scale-90 {
|
||||
transform: scale(0.9) !important;
|
||||
}
|
||||
|
||||
.scale-95 {
|
||||
transform: scale(0.95) !important;
|
||||
}
|
||||
|
||||
.scale-100 {
|
||||
transform: scale(1) !important;
|
||||
}
|
||||
|
||||
.scale-105 {
|
||||
transform: scale(1.05) !important;
|
||||
}
|
||||
|
||||
.scale-110 {
|
||||
transform: scale(1.1) !important;
|
||||
}
|
||||
|
||||
.rotate-90 {
|
||||
transform: rotate(90deg) !important;
|
||||
}
|
||||
|
||||
.rotate-180 {
|
||||
transform: rotate(180deg) !important;
|
||||
}
|
||||
|
||||
.rotate-270 {
|
||||
transform: rotate(270deg) !important;
|
||||
}
|
||||
|
||||
// Transition utilities
|
||||
.transition-none {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.transition-all {
|
||||
transition: all 0.15s ease-in-out !important;
|
||||
}
|
||||
|
||||
.transition-slow {
|
||||
transition: all 0.3s ease-in-out !important;
|
||||
}
|
||||
|
||||
.transition-fast {
|
||||
transition: all 0.1s ease-in-out !important;
|
||||
}
|
||||
|
||||
// Animation utilities
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ping {
|
||||
75%, 100% {
|
||||
transform: scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(-25%);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
50% {
|
||||
transform: none;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.animate-ping {
|
||||
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
.animate-bounce {
|
||||
animation: bounce 1s infinite;
|
||||
}
|
||||
|
||||
// Hover utilities
|
||||
.hover-lift {
|
||||
transition: transform 0.2s ease-in-out !important;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-scale {
|
||||
transition: transform 0.2s ease-in-out !important;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-rotate {
|
||||
transition: transform 0.2s ease-in-out !important;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(5deg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Loading states
|
||||
.loading-skeleton {
|
||||
background: linear-gradient(90deg, var(--color-gray-200) 25%, var(--color-gray-100) 50%, var(--color-gray-200) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 2s infinite;
|
||||
border-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive utilities for custom breakpoints
|
||||
@include media-breakpoint-up(xs) {
|
||||
.d-xs-block { display: block !important; }
|
||||
.d-xs-none { display: none !important; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.d-sm-block { display: block !important; }
|
||||
.d-sm-none { display: none !important; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.d-md-block { display: block !important; }
|
||||
.d-md-none { display: none !important; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.d-lg-block { display: block !important; }
|
||||
.d-lg-none { display: none !important; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
.d-xl-block { display: block !important; }
|
||||
.d-xl-none { display: none !important; }
|
||||
}
|
||||
|
||||
// Print utilities
|
||||
@media print {
|
||||
.print-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.print-visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.print-break-before {
|
||||
page-break-before: always !important;
|
||||
}
|
||||
|
||||
.print-break-after {
|
||||
page-break-after: always !important;
|
||||
}
|
||||
|
||||
.print-no-break {
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Accessibility utilities
|
||||
.sr-only-focusable {
|
||||
&:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.focus-visible {
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--brand-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// High contrast mode support
|
||||
@media (prefers-contrast: high) {
|
||||
.text-muted {
|
||||
color: var(--color-gray-800) !important;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-color: var(--color-gray-800) !important;
|
||||
}
|
||||
|
||||
.shadow-sm,
|
||||
.shadow-md,
|
||||
.shadow-lg {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid var(--color-gray-800) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Reduced motion support
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user