feat(styles): Add comprehensive border color utility classes
- Expand border color utility classes for more granular styling - Add directional border color classes (border-x, border-y, border-t, border-r, border-b, border-l) - Include border color utilities for various theme colors (primary, background, foreground, card, muted, accent, destructive) - Enhance Tailwind CSS utility layer for more flexible border styling
This commit is contained in:
parent
8e87b81ba9
commit
6a5b64a382
1 changed files with 48 additions and 1 deletions
|
|
@ -237,13 +237,60 @@
|
|||
|
||||
/* Add support for border colors */
|
||||
@layer utilities {
|
||||
.box-border {
|
||||
.border {
|
||||
border-color: var(--border);
|
||||
}
|
||||
.border-x {
|
||||
border-left-color: var(--border);
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
.border-y {
|
||||
border-top-color: var(--border);
|
||||
border-bottom-color: var(--border);
|
||||
}
|
||||
.border-t {
|
||||
border-top-color: var(--border);
|
||||
}
|
||||
.border-r {
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
.border-b {
|
||||
border-bottom-color: var(--border);
|
||||
}
|
||||
.border-l {
|
||||
border-left-color: var(--border);
|
||||
}
|
||||
.border-primary {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.border-background {
|
||||
border-color: var(--background);
|
||||
}
|
||||
.border-foreground {
|
||||
border-color: var(--foreground);
|
||||
}
|
||||
.border-card {
|
||||
border-color: var(--card);
|
||||
}
|
||||
.border-card-foreground {
|
||||
border-color: var(--card-foreground);
|
||||
}
|
||||
.border-muted {
|
||||
border-color: var(--muted);
|
||||
}
|
||||
.border-muted-foreground {
|
||||
border-color: var(--muted-foreground);
|
||||
}
|
||||
.border-accent {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.border-accent-foreground {
|
||||
border-color: var(--accent-foreground);
|
||||
}
|
||||
.border-destructive {
|
||||
border-color: var(--destructive);
|
||||
}
|
||||
.border-destructive-foreground {
|
||||
border-color: var(--destructive-foreground);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue