fs
d9f07dcd63
CSS: - Remove duplicate li::before block in app-search.css - Fix typo: search-reuslt → search-result in app-search.css - Remove commented-out CSS rules in app-flash.css - Add descriptive header comment to all 27 CSS component files JS: - Complete WAI-ARIA Tabs pattern: generate IDs, add aria-controls on tab buttons and aria-labelledby on tab panels (app-tabs.js) - Add JSDoc header comments to ~33 JS files (core + components) - Add explanatory block comment to app-boot.js (why classic IIFE) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
113 lines
3.6 KiB
CSS
113 lines
3.6 KiB
CSS
@layer components {
|
|
/* Action button variants — success and danger colors with outline and focus states. */
|
|
.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]) {
|
|
--app-background-color: var(--app-action-success-background);
|
|
--app-border-color: var(--app-action-success-border);
|
|
--app-color: var(--app-action-success-color);
|
|
}
|
|
|
|
.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]):is(
|
|
[aria-current]:not([aria-current="false"]),
|
|
:hover,
|
|
:active,
|
|
:focus
|
|
) {
|
|
--app-background-color: var(--app-action-success-hover-background);
|
|
--app-border-color: var(--app-action-success-hover-border);
|
|
--app-color: var(--app-action-success-color);
|
|
}
|
|
|
|
.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]).outline {
|
|
--app-background-color: transparent;
|
|
--app-border-color: var(--app-action-success-border);
|
|
--app-color: var(--app-action-success-border);
|
|
}
|
|
|
|
.app-action-success:is(
|
|
button,
|
|
[type="submit"],
|
|
[type="button"],
|
|
[role="button"]
|
|
).outline:is(
|
|
[aria-current]:not([aria-current="false"]),
|
|
:hover,
|
|
:active,
|
|
:focus
|
|
) {
|
|
--app-background-color: var(--app-action-success-outline-background);
|
|
--app-border-color: var(--app-action-success-border);
|
|
--app-color: var(--app-action-success-border);
|
|
}
|
|
|
|
.app-action-success:is(button, [type="submit"], [type="button"], [role="button"]):focus {
|
|
--app-box-shadow:
|
|
var(--app-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
|
0 0 0 var(--app-outline-width) var(--app-action-success-focus-color);
|
|
}
|
|
|
|
.danger:is(button, [type="submit"], [type="button"], [role="button"]),
|
|
.app-action-danger:is(button, [type="submit"], [type="button"], [role="button"]) {
|
|
--app-background-color: var(--app-action-danger-background);
|
|
--app-border-color: var(--app-action-danger-border);
|
|
--app-color: var(--app-action-danger-color);
|
|
}
|
|
|
|
.danger:is(button, [type="submit"], [type="button"], [role="button"]):is(
|
|
[aria-current]:not([aria-current="false"]),
|
|
:hover,
|
|
:active,
|
|
:focus
|
|
),
|
|
.app-action-danger:is(button, [type="submit"], [type="button"], [role="button"]):is(
|
|
[aria-current]:not([aria-current="false"]),
|
|
:hover,
|
|
:active,
|
|
:focus
|
|
) {
|
|
--app-background-color: var(--app-action-danger-hover-background);
|
|
--app-border-color: var(--app-action-danger-hover-border);
|
|
--app-color: var(--app-action-danger-color);
|
|
}
|
|
|
|
.danger:is(button, [type="submit"], [type="button"], [role="button"]).outline,
|
|
.app-action-danger:is(button, [type="submit"], [type="button"], [role="button"]).outline {
|
|
--app-background-color: transparent;
|
|
--app-border-color: var(--app-action-danger-border);
|
|
--app-color: var(--app-action-danger-border);
|
|
}
|
|
|
|
.danger:is(
|
|
button,
|
|
[type="submit"],
|
|
[type="button"],
|
|
[role="button"]
|
|
).outline:is(
|
|
[aria-current]:not([aria-current="false"]),
|
|
:hover,
|
|
:active,
|
|
:focus
|
|
),
|
|
.app-action-danger:is(
|
|
button,
|
|
[type="submit"],
|
|
[type="button"],
|
|
[role="button"]
|
|
).outline:is(
|
|
[aria-current]:not([aria-current="false"]),
|
|
:hover,
|
|
:active,
|
|
:focus
|
|
) {
|
|
--app-background-color: var(--app-action-danger-outline-background);
|
|
--app-border-color: var(--app-action-danger-border);
|
|
--app-color: var(--app-action-danger-border);
|
|
}
|
|
|
|
.danger:is(button, [type="submit"], [type="button"], [role="button"]):focus,
|
|
.app-action-danger:is(button, [type="submit"], [type="button"], [role="button"]):focus {
|
|
--app-box-shadow:
|
|
var(--app-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
|
0 0 0 var(--app-outline-width) var(--app-action-danger-focus-color);
|
|
}
|
|
}
|