mirror of
https://github.com/raphaelsalaja/userinterface-wiki.git
synced 2026-09-14 20:06:29 +08:00
Raphael S.
9d6cfdc7c7
- Introduced multiple CSS files for styles, including reset, typography, shadows, and Radix color imports. - Established CSS variables for spacing, typography, and shadows to ensure consistency across the application. - Implemented styles for various HTML elements to enhance the overall design and readability. This update lays the groundwork for a cohesive design system.
59 lines
1.0 KiB
CSS
59 lines
1.0 KiB
CSS
.root {
|
|
display: inline-flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
align-self: stretch;
|
|
user-select: none;
|
|
}
|
|
|
|
.category {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 24px;
|
|
padding: 0 8px;
|
|
background: var(--gray-1);
|
|
border: 1px solid var(--gray-4);
|
|
border-radius: 6px;
|
|
box-shadow:
|
|
0 1px 1px 0 rgba(0, 0, 0, 0.04),
|
|
0 3px 6px -2px rgba(0, 0, 0, 0.02);
|
|
|
|
&[data-context="list"] {
|
|
background: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.dot {
|
|
display: block;
|
|
width: 8px;
|
|
height: 8px;
|
|
aspect-ratio: 1 / 1;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.dots {
|
|
display: flex;
|
|
|
|
.dot:not(:first-of-type) {
|
|
margin-left: -2px;
|
|
}
|
|
|
|
.dot:not(:last-of-type) {
|
|
mask: radial-gradient(circle 5px at 10px 50%, transparent 99%, #fff 100%);
|
|
}
|
|
}
|
|
|
|
.label {
|
|
font-family: var(--font-family-display);
|
|
font-size: 13px;
|
|
font-weight: var(--font-weight-medium, 500);
|
|
line-height: 24px;
|
|
color: var(--gray-10);
|
|
letter-spacing: var(--font-letter-spacing-13px);
|
|
white-space: nowrap;
|
|
}
|