mirror of
https://github.com/johndoe6345789/snippet-pastebin.git
synced 2026-04-24 13:34:55 +00:00
refactor: remove unused utility classes from SCSS
This commit is contained in:
@@ -1,455 +0,0 @@
|
||||
@use '../abstracts/functions' as fn;
|
||||
@use '../abstracts/variables' as vars;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
|
||||
// Utility classes generator
|
||||
@each $name, $value in vars.$spacing {
|
||||
.p-#{$name} {
|
||||
padding: $value !important;
|
||||
}
|
||||
|
||||
.px-#{$name} {
|
||||
padding-left: $value !important;
|
||||
padding-right: $value !important;
|
||||
}
|
||||
|
||||
.py-#{$name} {
|
||||
padding-bottom: $value !important;
|
||||
padding-top: $value !important;
|
||||
}
|
||||
|
||||
.pt-#{$name} {
|
||||
padding-top: $value !important;
|
||||
}
|
||||
|
||||
.pr-#{$name} {
|
||||
padding-right: $value !important;
|
||||
}
|
||||
|
||||
.pb-#{$name} {
|
||||
padding-bottom: $value !important;
|
||||
}
|
||||
|
||||
.pl-#{$name} {
|
||||
padding-left: $value !important;
|
||||
}
|
||||
|
||||
.m-#{$name} {
|
||||
margin: $value !important;
|
||||
}
|
||||
|
||||
.mx-#{$name} {
|
||||
margin-left: $value !important;
|
||||
margin-right: $value !important;
|
||||
}
|
||||
|
||||
.my-#{$name} {
|
||||
margin-bottom: $value !important;
|
||||
margin-top: $value !important;
|
||||
}
|
||||
|
||||
.mt-#{$name} {
|
||||
margin-top: $value !important;
|
||||
}
|
||||
|
||||
.mr-#{$name} {
|
||||
margin-right: $value !important;
|
||||
}
|
||||
|
||||
.mb-#{$name} {
|
||||
margin-bottom: $value !important;
|
||||
}
|
||||
|
||||
.ml-#{$name} {
|
||||
margin-left: $value !important;
|
||||
}
|
||||
|
||||
.gap-#{$name} {
|
||||
gap: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Flexbox utilities
|
||||
.flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.inline-flex {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
|
||||
.flex-nowrap {
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1 0% !important;
|
||||
}
|
||||
|
||||
// Justify content
|
||||
.justify-start {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.justify-around {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
// Align items
|
||||
.items-start {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.items-end {
|
||||
align-items: flex-end !important;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.items-stretch {
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
// Grid
|
||||
.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;
|
||||
}
|
||||
|
||||
// Border radius
|
||||
@each $name, $value in vars.$radius {
|
||||
.rounded-#{$name} {
|
||||
border-radius: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Text sizes
|
||||
@each $name, $value in vars.$font-sizes {
|
||||
.text-#{$name} {
|
||||
font-size: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Font weights
|
||||
@each $name, $value in vars.$font-weights {
|
||||
.font-#{$name} {
|
||||
font-weight: $value !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Text align
|
||||
.text-left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
// Colors
|
||||
.text-foreground {
|
||||
color: vars.$foreground !important;
|
||||
}
|
||||
|
||||
.text-muted-foreground {
|
||||
color: vars.$muted-foreground !important;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: vars.$primary !important;
|
||||
}
|
||||
|
||||
.text-destructive {
|
||||
color: vars.$destructive !important;
|
||||
}
|
||||
|
||||
.text-accent {
|
||||
color: vars.$accent !important;
|
||||
}
|
||||
|
||||
.bg-background {
|
||||
background-color: vars.$background !important;
|
||||
}
|
||||
|
||||
.bg-card {
|
||||
background-color: vars.$card !important;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: vars.$primary !important;
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background-color: vars.$secondary !important;
|
||||
}
|
||||
|
||||
.bg-muted {
|
||||
background-color: vars.$muted !important;
|
||||
}
|
||||
|
||||
.bg-accent {
|
||||
background-color: vars.$accent !important;
|
||||
}
|
||||
|
||||
.bg-destructive {
|
||||
background-color: vars.$destructive !important;
|
||||
}
|
||||
|
||||
// Border
|
||||
.border { border: 1px solid vars.$border !important; }
|
||||
.border-b { border-bottom: 1px solid vars.$border !important; }
|
||||
.border-t { border-top: 1px solid vars.$border !important; }
|
||||
.border-l { border-left: 1px solid vars.$border !important; }
|
||||
.border-r { border-right: 1px solid vars.$border !important; }
|
||||
|
||||
// Width & Height
|
||||
.w-full { width: 100% !important; }
|
||||
.h-full { height: 100% !important; }
|
||||
.min-h-screen { min-height: 100vh !important; }
|
||||
.max-w-3xl { max-width: 48rem !important; }
|
||||
.max-w-7xl { max-width: 80rem !important; }
|
||||
|
||||
// Position
|
||||
.relative { position: relative !important; }
|
||||
.absolute { position: absolute !important; }
|
||||
.fixed { position: fixed !important; }
|
||||
.sticky { position: sticky !important; }
|
||||
|
||||
// Display
|
||||
.hidden { display: none !important; }
|
||||
.block { display: block !important; }
|
||||
.inline-block { display: inline-block !important; }
|
||||
|
||||
// Overflow
|
||||
.overflow-hidden { overflow: hidden !important; }
|
||||
.overflow-auto { overflow: auto !important; }
|
||||
.overflow-scroll { overflow: scroll !important; }
|
||||
|
||||
// Cursor
|
||||
.cursor-pointer { cursor: pointer !important; }
|
||||
.cursor-not-allowed { cursor: not-allowed !important; }
|
||||
|
||||
// Opacity
|
||||
.opacity-50 { opacity: 50% !important; }
|
||||
.opacity-75 { opacity: 75% !important; }
|
||||
.opacity-100 { opacity: 100% !important; }
|
||||
|
||||
// Transitions
|
||||
.transition { transition: all 0.2s ease !important; }
|
||||
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important; }
|
||||
|
||||
// Shadow
|
||||
.shadow-sm { @include mx.shadow-sm; }
|
||||
.shadow { @include mx.shadow; }
|
||||
.shadow-md { @include mx.shadow-md; }
|
||||
.shadow-lg { @include mx.shadow-lg; }
|
||||
|
||||
// Space between children - DRY loop
|
||||
$space-values: (2, 3, 4, 6, 8);
|
||||
|
||||
@each $value in $space-values {
|
||||
.space-y-#{$value} > * + * { margin-top: fn.spacing($value) !important; }
|
||||
.space-x-#{$value} > * + * { margin-left: fn.spacing($value) !important; }
|
||||
}
|
||||
|
||||
// Additional height classes
|
||||
.h-9 { height: 2.25rem !important; }
|
||||
.h-10 { height: 2.5rem !important; }
|
||||
.h-12 { height: 3rem !important; }
|
||||
.h-16 { height: 4rem !important; }
|
||||
.h-24 { height: 6rem !important; }
|
||||
.h-32 { height: 8rem !important; }
|
||||
.h-60 { height: 15rem !important; }
|
||||
.h-screen { height: 100vh !important; }
|
||||
|
||||
// Container
|
||||
.container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
width: 100%;
|
||||
|
||||
@media (width >= 640px) {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
@media (width >= 1024px) {
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
@media (width >= 1280px) {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional positioning
|
||||
.inset-0 {
|
||||
inset: 0 !important;
|
||||
}
|
||||
|
||||
.top-0 { top: 0 !important; }
|
||||
.left-0 { left: 0 !important; }
|
||||
.right-0 { right: 0 !important; }
|
||||
.bottom-0 { bottom: 0 !important; }
|
||||
|
||||
// Z-index
|
||||
.z-10 { z-index: 10 !important; }
|
||||
.z-20 { z-index: 20 !important; }
|
||||
.z-30 { z-index: 30 !important; }
|
||||
.z-40 { z-index: 40 !important; }
|
||||
.z-50 { z-index: 50 !important; }
|
||||
|
||||
// Whitespace
|
||||
.whitespace-nowrap { white-space: nowrap !important; }
|
||||
.whitespace-normal { white-space: normal !important; }
|
||||
|
||||
// Pointer events
|
||||
.pointer-events-none { pointer-events: none !important; }
|
||||
|
||||
// Outline
|
||||
.outline-none { outline: none !important; }
|
||||
|
||||
// Shrink
|
||||
.shrink-0 { flex-shrink: 0 !important; }
|
||||
.shrink { flex-shrink: 1 !important; }
|
||||
|
||||
// Overflow specific
|
||||
.overflow-x-hidden { overflow-x: hidden !important; }
|
||||
.overflow-y-auto { overflow-y: auto !important; }
|
||||
.overflow-y-hidden { overflow-y: hidden !important; }
|
||||
|
||||
// Backdrop
|
||||
.backdrop-blur-md { backdrop-filter: blur(12px) !important; }
|
||||
|
||||
// Gradients (using CSS custom properties for compatibility)
|
||||
.bg-gradient-to-r {
|
||||
background-image: linear-gradient(to right, var(--gradient-from-color, transparent), var(--gradient-to-color, transparent)) !important;
|
||||
}
|
||||
|
||||
.bg-gradient-to-br {
|
||||
background-image: linear-gradient(to bottom right, var(--gradient-from-color, transparent), var(--gradient-to-color, transparent)) !important;
|
||||
}
|
||||
|
||||
.from-primary {
|
||||
--gradient-from-color: hsl(var(--primary)) !important;
|
||||
}
|
||||
|
||||
.to-accent {
|
||||
--gradient-to-color: hsl(var(--accent)) !important;
|
||||
}
|
||||
|
||||
.via-accent {
|
||||
--gradient-via-color: hsl(var(--accent)) !important;
|
||||
}
|
||||
|
||||
// Background clip
|
||||
.bg-clip-text {
|
||||
background-clip: text !important;
|
||||
}
|
||||
|
||||
// Text transparent for gradient text
|
||||
.text-transparent { color: transparent !important; }
|
||||
|
||||
// Tracking (letter-spacing)
|
||||
.tracking-tight { letter-spacing: -0.025em !important; }
|
||||
|
||||
// Shadow variants
|
||||
.shadow-xs {
|
||||
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%) !important;
|
||||
}
|
||||
|
||||
// Underline offset
|
||||
.underline-offset-4 {
|
||||
text-underline-offset: 4px !important;
|
||||
}
|
||||
|
||||
// Gap variations - only adding those NOT in spacing map
|
||||
.gap-1-5 {
|
||||
gap: 0.375rem !important;
|
||||
} // 1.5 spacing not in map
|
||||
|
||||
// Rounded variations (additional)
|
||||
.rounded-xs { border-radius: 0.125rem !important; }
|
||||
.rounded-full { border-radius: 9999px !important; }
|
||||
|
||||
// SVG sizing - explicit class matches for h-5 and w-5
|
||||
svg.h-5 { height: 1.25rem !important; }
|
||||
svg.w-5 { width: 1.25rem !important; }
|
||||
|
||||
// Button-specific utilities using nesting
|
||||
button {
|
||||
&:disabled {
|
||||
opacity: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid hsl(var(--ring));
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 3px rgba(var(--ring-rgb), 0.1);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Ensure minimum touch target size (44px recommended)
|
||||
min-height: 2.75rem; // 44px
|
||||
min-width: 2.75rem; // 44px
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user