mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
bdd25571a8
* Basic scaffolding * Generate theme & palette data.js that other JS can import * Make it possible to include page-card without links * WIP * Add `appearance` to details, closes #569 Except `accent` as that's a) far less useful and b) trickier due to the icon color * Fix broken link * WIP * WIP * Icons icon * Unify styles for interactive cards * Prevent focusing inside theme icons * Fixes * Action page cards * Panel scrollables * scrollable * Scroll shadows * Add renaming UI * UI * Move styling of heading icons to `ui.css` * Support permalinks & CRUD * Make clickable cards more accessible * Style cards a little better * Default to styles panel if theme is selected * Update theme-icons.css * Custom themes should be saved under Custom * Get theme code * Bigger title * Fixes * Use theme Vue app for remixing too * Fix preview jank and make preview script more flexible * Make radio groups scrollable * Add affordance to button cards * Sticky * `<color-select>` * Fix theme remixing * Improve previewing logic * Fix preview * Move `domChange()` to separate module `theme-picker.js` includes side-effects, which may not always be desirable everywhere we may want to import `domChange()` * Update preview.js * Panel animation * Hide Save button if no changes and not saved * Do not show blank code when no selection has been made * Use theme slug in filename * Remove unused component * Better UI for editing title (and any other text) * Tweak UI of renaming * Better indicate default selection * Fix preview reverting bug * Fill out app preview with more examples * Remove `zoom` from theme showcase (yields unexpected/painful results Safari), improve display in wider viewports * Pending delete * Make styles panel cards scrollable * Fix some of the Safari issues * Update search.css * Update panel.css * Select preview UI * Fix typo * Frame colors setting as color contrast * Show dark mode in color mappings * Brand color * Swatch styling * Fix caret icon * Move Starting theme to the same level as other controls * Rename typography to Fonts * Fix bug: Swatch select should show swatches from the selected palette * Move capitalize to shared utils * Add utils for handling nested objects * Icons panel * Update code.js * Move utils around * Add fit and finish to sidebar panels * Theme card: Move icons to separate data structure * Move data to dedicated folder since we now have a lot more of it * Add default icon families and variants to themes * Data * Add `deepEntries()` * Add Duotone * Spruce up icons preview * Use theme's icon family in showcase * Font cards * Font cards * Add `max-inline-size` to preview container * Remove alternate preview options * Remove theme subtitle * Support FA kit codes * Remove Pro badges from theme cards * Use panagram preview for Fonts * Consistent heading and label capitalization * Classes for different icons-card types * Update data.js.njk * Variable style on icon family cards * Fix Sharp Duotone * Clean up FA kit code hint * Hide non-functional Icon Library field * Fix theme icon heights * icon variant -> style in theme metadata * Fix bug with icons defaults not being shown * More convenient theme defaults * Fix bug with non updating URL * Fix bug * Fix multiplying badges * Custom docs pages * Add Duotone icons to Mellow theme * Fix 404 * Remove "Create" from sidebar * Fix bug * Move vue components to `/assets/`, move their CSS with them * Safari/FF compatibility * Make panels scrollable again * Fix extra spacing --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design>
90 lines
1.8 KiB
CSS
90 lines
1.8 KiB
CSS
/**
|
|
* Scrollable element in a vertical flex container
|
|
* Showing shadows as an indicator of scrollability (PE wherever scroll-timeline is supported for now, can be polyfilled with JS later)
|
|
*/
|
|
|
|
.scrollable {
|
|
--scroll-shadow-height: 0.5em;
|
|
|
|
flex-shrink: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
position: relative;
|
|
scrollbar-width: inherit;
|
|
|
|
&:is(.panel-content > div) {
|
|
display: flex;
|
|
flex-flow: column;
|
|
gap: inherit;
|
|
}
|
|
|
|
.scroll-shadow {
|
|
position: sticky;
|
|
z-index: 1;
|
|
inset-inline: 0;
|
|
display: block;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset-inline: 0;
|
|
height: var(--scroll-shadow-height);
|
|
pointer-events: none;
|
|
mix-blend-mode: multiply;
|
|
background: radial-gradient(farthest-side, var(--wa-color-shadow) 10%, transparent) center / 120% 200%;
|
|
transition: var(--wa-transition-slow);
|
|
/* transition-property: opacity, transform, display, height, min-height; */
|
|
transition-behavior: allow-discrete;
|
|
}
|
|
}
|
|
|
|
&:not(.can-scroll-top) .scroll-shadow-top,
|
|
&:not(.can-scroll-bottom) .scroll-shadow-bottom {
|
|
opacity: 0;
|
|
|
|
&::before {
|
|
height: 0;
|
|
}
|
|
}
|
|
|
|
&:not(.can-scroll-top) .scroll-shadow-top {
|
|
&::before {
|
|
transform: translateY(-100%);
|
|
}
|
|
}
|
|
|
|
.scroll-shadow-top {
|
|
top: 0;
|
|
|
|
&::before {
|
|
background-position: bottom;
|
|
}
|
|
}
|
|
|
|
&:not(.can-scroll-bottom) .scroll-shadow-bottom {
|
|
&::before {
|
|
transform: translateY(100%);
|
|
}
|
|
}
|
|
|
|
.scroll-shadow-bottom {
|
|
top: 100%;
|
|
|
|
&::before {
|
|
bottom: 0;
|
|
background-position: top;
|
|
}
|
|
}
|
|
}
|
|
|
|
.scrollable:where(.panel-content) {
|
|
.scroll-shadow-top {
|
|
/* TODO convert this magic number to a token that explains what it is */
|
|
margin-bottom: -18px;
|
|
}
|
|
|
|
.scroll-shadow-bottom {
|
|
transform: translateY(var(--padding-bottom, var(--panel-spacing)));
|
|
}
|
|
}
|