Remove glows, refine feature legend, forms, and showcase pages
- Delete glows.css and GlowsPage (unused) - Enhance DTFeatureLegend and feature-legend.css with improved layout - Update DTRadioGroup styling - Refine bevels.css, forms-dt.css - Update AnimationsPage, CardsAdvancedPage, FormsPage, HomePage - Add type:module to web package.json Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -143,49 +143,38 @@
|
||||
/* ============================================================================
|
||||
Radio Button — Hexagonal indicator
|
||||
Matches RN DTRadioGroup: outlined hexagon with inner filled dot on check.
|
||||
Outer hexagon is always stroked (accent border); inner dot appears on check.
|
||||
Uses a custom span (.dt-radio-hex) since ::before on <input> is unreliable.
|
||||
============================================================================ */
|
||||
[data-brand="dt"] input[type="radio"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
[data-brand="dt"] .dt-radio-hex {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: var(--color-primary);
|
||||
cursor: pointer;
|
||||
clip-path: polygon(
|
||||
50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%
|
||||
);
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
/* Inner surface — creates the outlined hexagon look (accent border + transparent center) */
|
||||
[data-brand="dt"] input[type="radio"]::before {
|
||||
content: '';
|
||||
/* Inner surface — outlined hexagon look (accent border + dark center) */
|
||||
[data-brand="dt"] .dt-radio-hex-inner {
|
||||
position: absolute;
|
||||
inset: 2px;
|
||||
background: var(--color-bg);
|
||||
clip-path: polygon(
|
||||
50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%
|
||||
);
|
||||
transition: background var(--transition-fast);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
/* Checked: inner dot fills with accent color (smaller inset for the dot effect) */
|
||||
[data-brand="dt"] input[type="radio"]:checked::before {
|
||||
/* Checked: inner dot fills with accent color (smaller inset) */
|
||||
[data-brand="dt"] .dt-radio-hex.checked .dt-radio-hex-inner {
|
||||
inset: 5px;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
[data-brand="dt"] input[type="radio"]:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Radio group option container */
|
||||
.dt-radio-option {
|
||||
display: flex;
|
||||
@@ -403,11 +392,6 @@
|
||||
animation: dt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
/* Nested level indentation */
|
||||
.dt-menu-item[style*="--dt-menu-level"] {
|
||||
padding-left: calc(0.75rem + var(--dt-menu-level, 0) * 1rem);
|
||||
}
|
||||
|
||||
/* Classic brand: rounded, thinner borders */
|
||||
[data-brand="classic"] .dt-menu-item {
|
||||
border-top-width: 2px;
|
||||
|
||||
Reference in New Issue
Block a user