mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-11 20:08:56 +00:00
Merge branch 'next' into combobox-free
This commit is contained in:
Cory LaViska
@@ -14,8 +14,8 @@
|
||||
<p>Celebrate our official launch with a 20% discount on a Web Awesome Pro plan…<span class="appearance-underlined variant-drawn" style="--underline-color: var(--wa-color-brand);">for life</span>! But hurry, this lifetime discount is only available for a limited time.</p>
|
||||
|
||||
<div class="wa-split">
|
||||
<wa-button type="button" appearance="plain" data-dialog="close" class="plausible-event-name=launch_dialog:close_button_click">Maybe Later</wa-button>
|
||||
<wa-button variant="neutral" appearance="accent" href="/purchase" class="brand-font plausible-event-name=launch_dialog:pro_purchase_button_click">
|
||||
<wa-button type="button" appearance="plain" data-dialog="close">Maybe Later</wa-button>
|
||||
<wa-button variant="neutral" appearance="accent" href="/purchase" class="brand-font">
|
||||
<wa-icon slot="start" variant="regular" name="rocket-launch"></wa-icon>
|
||||
Get Pro + Save 20%
|
||||
</wa-button>
|
||||
@@ -43,13 +43,6 @@
|
||||
return;
|
||||
}
|
||||
|
||||
// Helper function to safely track Plausible events
|
||||
const trackEvent = (eventName) => {
|
||||
if (typeof plausible !== 'undefined') {
|
||||
plausible(eventName);
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize dialog functionality
|
||||
let initCalled = false;
|
||||
const initDialog = () => {
|
||||
@@ -59,19 +52,8 @@
|
||||
}
|
||||
initCalled = true;
|
||||
|
||||
// Track when dialog is shown
|
||||
dialog.addEventListener('wa-show', () => {
|
||||
trackEvent('launch_dialog:view');
|
||||
}, { once: true });
|
||||
|
||||
// Track when dialog is dismissed
|
||||
// Save dismissal state when dialog is hidden
|
||||
dialog.addEventListener('wa-hide', (event) => {
|
||||
// Track overlay click or Escape key dismissal
|
||||
// Button clicks are tracked via CSS classes, so we only track non-button dismissals
|
||||
if (event.detail?.source === dialog) {
|
||||
trackEvent('launch_dialog:overlay_click');
|
||||
}
|
||||
|
||||
// Save dismissal state to localStorage
|
||||
try {
|
||||
localStorage.setItem(SITE_DIALOG_DISMISSED_KEY, 'true');
|
||||
|
||||
@@ -17,7 +17,6 @@
|
||||
<script type="module" src="/assets/scripts/color-scheme.js"></script>
|
||||
<script type="module" src="/assets/scripts/theme.js"></script>
|
||||
{% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar.js"></script>{% endif %}
|
||||
<script defer data-domain="webawesome.com" src="https://plausible.io/js/script.js"></script>
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="/assets/styles/docs.css" />
|
||||
@@ -142,6 +141,9 @@
|
||||
{% include "_dialog-wa-launch.njk" ignore missing %}
|
||||
{% endif %}
|
||||
|
||||
{#- Cookie Consent Dialog -#}
|
||||
{% include "cookie-consent.njk" ignore missing %}
|
||||
|
||||
{# Footer #}
|
||||
{% block pageFooter %}{% endblock %}
|
||||
</wa-page>
|
||||
|
||||
@@ -40,60 +40,6 @@ Set the `orientation` attribute to `vertical` to make a vertical button group.
|
||||
</wa-button-group>
|
||||
```
|
||||
|
||||
### Theme Buttons
|
||||
|
||||
Theme buttons are supported through the button group's `variant` attribute.
|
||||
|
||||
```html {.example}
|
||||
<wa-button-group label="Alignment" variant="brand">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group label="Alignment" variant="success">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group label="Alignment" variant="warning">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group label="Alignment" variant="danger">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
```
|
||||
|
||||
You can still use the buttons’ own `variant` attribute to override the inherited variant.
|
||||
|
||||
```html {.example}
|
||||
<wa-button-group label="Alignment" variant="brand">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button variant="neutral">Right</wa-button>
|
||||
</wa-button-group>
|
||||
```
|
||||
|
||||
### Pill Buttons
|
||||
|
||||
Pill buttons are supported through the button's `pill` attribute.
|
||||
|
||||
@@ -25,6 +25,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
|
||||
- Fixed a bug in `<wa-select>` that prevented clicks on the tag's remove button from removing options in multiple mode
|
||||
- Fixed a bug in `<wa-select>` that caused tags to appear in alphabetical order instead of selection order when using `multiple`
|
||||
- Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
|
||||
- Improved performance of all components by fixing how CSS is imported and reused [issue:1812]
|
||||
- Modified the default `transition` styles of `<wa-dropdown-item>` to use design tokens [pr:1693]
|
||||
|
||||
## 3.0.0
|
||||
|
||||
@@ -230,9 +230,6 @@ export async function build(options = {}) {
|
||||
js: `/*! Copyright ${currentYear} Fonticons, Inc. - https://webawesome.com/license */`,
|
||||
},
|
||||
plugins: [replace({ __WEBAWESOME_VERSION__: await getVersion() })],
|
||||
loader: {
|
||||
'.css': 'text',
|
||||
},
|
||||
};
|
||||
|
||||
const unbundledConfig = {
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
:host {
|
||||
--control-box-size: 3rem;
|
||||
--icon-size: calc(var(--control-box-size) * 0.625);
|
||||
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img[aria-hidden='true'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.control-box {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: calc(50% - var(--control-box-size) / 2);
|
||||
right: calc(50% - var(--control-box-size) / 2);
|
||||
width: var(--control-box-size);
|
||||
height: var(--control-box-size);
|
||||
font-size: calc(var(--icon-size) * 0.75);
|
||||
background: none;
|
||||
border: solid var(--wa-border-width-s) currentColor;
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
:host([play]:hover) .control-box {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
:where(:host([play]:not(:hover))) .control-box {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
:host([play]) slot[name='play-icon'],
|
||||
:host(:not([play])) slot[name='pause-icon'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show control box on keyboard focus */
|
||||
.animated-image {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible .control-box {
|
||||
opacity: 1;
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--control-box-size: 3rem;
|
||||
--icon-size: calc(var(--control-box-size) * 0.625);
|
||||
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img[aria-hidden='true'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.control-box {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: calc(50% - var(--control-box-size) / 2);
|
||||
right: calc(50% - var(--control-box-size) / 2);
|
||||
width: var(--control-box-size);
|
||||
height: var(--control-box-size);
|
||||
font-size: calc(var(--icon-size) * 0.75);
|
||||
background: none;
|
||||
border: solid var(--wa-border-width-s) currentColor;
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
transition: opacity var(--wa-transition-normal) var(--wa-transition-easing);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
:host([play]:hover) .control-box {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
:where(:host([play]:not(:hover))) .control-box {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
:host([play]) slot[name='play-icon'],
|
||||
:host(:not([play])) slot[name='pause-icon'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show control box on keyboard focus */
|
||||
.animated-image {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible .control-box {
|
||||
opacity: 1;
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -6,7 +6,7 @@ import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import '../icon/icon.js';
|
||||
import styles from './animated-image.css';
|
||||
import styles from './animated-image.styles.js';
|
||||
|
||||
/**
|
||||
* @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction.
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
display: contents;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
display: contents;
|
||||
}
|
||||
`;
|
||||
@@ -5,7 +5,7 @@ import { WaFinishEvent } from '../../events/finish.js';
|
||||
import { WaStartEvent } from '../../events/start.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import styles from './animation.css';
|
||||
import styles from './animation.styles.js';
|
||||
import { animations } from './animations.js';
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
:host {
|
||||
--size: 3rem;
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
color: var(--wa-color-neutral-on-normal);
|
||||
font: inherit;
|
||||
font-size: calc(var(--size) * 0.4);
|
||||
vertical-align: middle;
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
:host([shape='square']) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:host([shape='rounded']) {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.initials {
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
}
|
||||
57
packages/webawesome/src/components/avatar/avatar.styles.ts
Normal file
57
packages/webawesome/src/components/avatar/avatar.styles.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--size: 3rem;
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
color: var(--wa-color-neutral-on-normal);
|
||||
font: inherit;
|
||||
font-size: calc(var(--size) * 0.4);
|
||||
vertical-align: middle;
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
:host([shape='square']) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:host([shape='rounded']) {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.initials {
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
}
|
||||
`;
|
||||
@@ -4,7 +4,7 @@ import { WaErrorEvent } from '../../events/error.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import '../icon/icon.js';
|
||||
import styles from './avatar.css';
|
||||
import styles from './avatar.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Avatars are used to represent a person or object.
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
:host {
|
||||
--pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.375em 0.625em;
|
||||
color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
|
||||
font-size: max(var(--wa-font-size-2xs), 0.75em);
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
|
||||
border-color: transparent;
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
border-style: var(--wa-border-style);
|
||||
border-width: var(--wa-border-width-s);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
/* Appearance modifiers */
|
||||
:host([appearance='outlined']) {
|
||||
--pulse-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
|
||||
|
||||
color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));
|
||||
background-color: transparent;
|
||||
border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
|
||||
}
|
||||
|
||||
:host([appearance='filled']) {
|
||||
--pulse-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
|
||||
|
||||
color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
|
||||
background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:host([appearance='filled-outlined']) {
|
||||
--pulse-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
|
||||
|
||||
color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
|
||||
background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
|
||||
border-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
|
||||
}
|
||||
|
||||
:host([appearance='accent']) {
|
||||
--pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
|
||||
|
||||
color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
|
||||
background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Pill modifier */
|
||||
:host([pill]) {
|
||||
border-radius: var(--wa-border-radius-pill);
|
||||
}
|
||||
|
||||
/* Pulse attention */
|
||||
:host([attention='pulse']) {
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 var(--pulse-color);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 0.5rem transparent;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* Bounce attention */
|
||||
:host([attention='bounce']) {
|
||||
animation: bounce 1s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
20%,
|
||||
50%,
|
||||
80%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
::slotted(wa-icon) {
|
||||
margin-inline-end: var(--wa-space-2xs, 0.25em);
|
||||
opacity: 90%;
|
||||
line-height: 1;
|
||||
height: 0.85em;
|
||||
}
|
||||
108
packages/webawesome/src/components/badge/badge.styles.ts
Normal file
108
packages/webawesome/src/components/badge/badge.styles.ts
Normal file
@@ -0,0 +1,108 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.375em 0.625em;
|
||||
color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
|
||||
font-size: max(var(--wa-font-size-2xs), 0.75em);
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
|
||||
border-color: transparent;
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
border-style: var(--wa-border-style);
|
||||
border-width: var(--wa-border-width-s);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
/* Appearance modifiers */
|
||||
:host([appearance='outlined']) {
|
||||
--pulse-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
|
||||
|
||||
color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));
|
||||
background-color: transparent;
|
||||
border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
|
||||
}
|
||||
|
||||
:host([appearance='filled']) {
|
||||
--pulse-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
|
||||
|
||||
color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
|
||||
background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:host([appearance='filled-outlined']) {
|
||||
--pulse-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
|
||||
|
||||
color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
|
||||
background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
|
||||
border-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
|
||||
}
|
||||
|
||||
:host([appearance='accent']) {
|
||||
--pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
|
||||
|
||||
color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
|
||||
background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Pill modifier */
|
||||
:host([pill]) {
|
||||
border-radius: var(--wa-border-radius-pill);
|
||||
}
|
||||
|
||||
/* Pulse attention */
|
||||
:host([attention='pulse']) {
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 var(--pulse-color);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 0.5rem transparent;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* Bounce attention */
|
||||
:host([attention='bounce']) {
|
||||
animation: bounce 1s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
20%,
|
||||
50%,
|
||||
80%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
::slotted(wa-icon) {
|
||||
margin-inline-end: var(--wa-space-2xs, 0.25em);
|
||||
opacity: 90%;
|
||||
line-height: 1;
|
||||
height: 0.85em;
|
||||
}
|
||||
`;
|
||||
@@ -1,8 +1,8 @@
|
||||
import { html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import variantStyles from '../../styles/utilities/variants.css';
|
||||
import styles from './badge.css';
|
||||
import variantStyles from '../../styles/component/variants.styles.js';
|
||||
import styles from './badge.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Badges are used to draw attention and display statuses or counts.
|
||||
|
||||
@@ -1,81 +0,0 @@
|
||||
:host {
|
||||
color: var(--wa-color-text-link);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font: inherit;
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
line-height: var(--wa-line-height-normal);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:host(:last-of-type) {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
font: inherit;
|
||||
text-decoration: none;
|
||||
color: currentColor;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
transition: color var(--wa-transition-normal) var(--wa-transition-easing);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
:host(:not(:last-of-type)) .label:hover {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
}
|
||||
}
|
||||
|
||||
:host(:not(:last-of-type)) .label:active {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
|
||||
}
|
||||
|
||||
.label:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.label:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
.start,
|
||||
.end {
|
||||
display: none;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.start,
|
||||
.end {
|
||||
display: inline-flex;
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
::slotted([slot='start']) {
|
||||
margin-inline-end: var(--wa-space-s);
|
||||
}
|
||||
|
||||
::slotted([slot='end']) {
|
||||
margin-inline-start: var(--wa-space-s);
|
||||
}
|
||||
|
||||
:host(:last-of-type) .separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: var(--wa-color-text-quiet);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0 var(--wa-space-s);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
color: var(--wa-color-text-link);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font: inherit;
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
line-height: var(--wa-line-height-normal);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:host(:last-of-type) {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
font: inherit;
|
||||
text-decoration: none;
|
||||
color: currentColor;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
transition: color var(--wa-transition-normal) var(--wa-transition-easing);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
:host(:not(:last-of-type)) .label:hover {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
}
|
||||
}
|
||||
|
||||
:host(:not(:last-of-type)) .label:active {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
|
||||
}
|
||||
|
||||
.label:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.label:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
.start,
|
||||
.end {
|
||||
display: none;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.start,
|
||||
.end {
|
||||
display: inline-flex;
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
::slotted([slot='start']) {
|
||||
margin-inline-end: var(--wa-space-s);
|
||||
}
|
||||
|
||||
::slotted([slot='end']) {
|
||||
margin-inline-start: var(--wa-space-s);
|
||||
}
|
||||
|
||||
:host(:last-of-type) .separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: var(--wa-color-text-quiet);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0 var(--wa-space-s);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
`;
|
||||
@@ -3,7 +3,7 @@ import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import styles from './breadcrumb-item.css';
|
||||
import styles from './breadcrumb-item.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Breadcrumb Items are used inside breadcrumbs to represent different links.
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
`;
|
||||
@@ -4,7 +4,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import type WaBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.js';
|
||||
import '../icon/icon.js';
|
||||
import styles from './breadcrumb.css';
|
||||
import styles from './breadcrumb.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
:host {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
flex-wrap: wrap;
|
||||
gap: 1px;
|
||||
|
||||
@media (hover: hover) {
|
||||
> :hover,
|
||||
&::slotted(:hover) {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus and checked are always on top */
|
||||
> :focus,
|
||||
&::slotted(:focus),
|
||||
> [aria-checked='true'],
|
||||
&::slotted([aria-checked='true']),
|
||||
> [checked],
|
||||
&::slotted([checked]) {
|
||||
z-index: 2 !important;
|
||||
}
|
||||
}
|
||||
:host([orientation='vertical']) .button-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Button groups with at least one outlined button will not have a gap and instead have borders overlap */
|
||||
.button-group.has-outlined {
|
||||
gap: 0;
|
||||
|
||||
&:not([aria-orientation='vertical']):not(.button-group-vertical)::slotted(:not(:first-child)) {
|
||||
margin-inline-start: calc(-1 * var(--border-width));
|
||||
}
|
||||
|
||||
&:is([aria-orientation='vertical'], .button-group-vertical)::slotted(:not(:first-child)) {
|
||||
margin-block-start: calc(-1 * var(--border-width));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
flex-wrap: wrap;
|
||||
gap: 1px;
|
||||
|
||||
@media (hover: hover) {
|
||||
> :hover,
|
||||
&::slotted(:hover) {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus and checked are always on top */
|
||||
> :focus,
|
||||
&::slotted(:focus),
|
||||
> [aria-checked='true'],
|
||||
&::slotted([aria-checked='true']),
|
||||
> [checked],
|
||||
&::slotted([checked]) {
|
||||
z-index: 2 !important;
|
||||
}
|
||||
}
|
||||
:host([orientation='vertical']) .button-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Button groups with at least one outlined button will not have a gap and instead have borders overlap */
|
||||
.button-group.has-outlined {
|
||||
gap: 0;
|
||||
|
||||
&:not([aria-orientation='vertical']):not(.button-group-vertical)::slotted(:not(:first-child)) {
|
||||
margin-inline-start: calc(-1 * var(--border-width));
|
||||
}
|
||||
|
||||
&:is([aria-orientation='vertical'], .button-group-vertical)::slotted(:not(:first-child)) {
|
||||
margin-block-start: calc(-1 * var(--border-width));
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -4,7 +4,7 @@ import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import type WaButton from '../button/button.js';
|
||||
import styles from './button-group.css';
|
||||
import styles from './button-group.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Button groups can be used to group related buttons into sections.
|
||||
|
||||
@@ -1,372 +0,0 @@
|
||||
@layer wa-component {
|
||||
:host {
|
||||
display: inline-block;
|
||||
|
||||
/* Workaround because Chrome doesn't like :host(:has()) below
|
||||
* https://issues.chromium.org/issues/40062355
|
||||
* Firefox doesn't like this nested rule, so both are needed */
|
||||
&:has(wa-badge) {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply relative positioning only when needed to position wa-badge
|
||||
* This avoids creating a new stacking context for every button */
|
||||
:host(:has(wa-badge)) {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
transition-property: background, border, box-shadow, color;
|
||||
transition-duration: var(--wa-transition-fast);
|
||||
transition-timing-function: var(--wa-transition-easing);
|
||||
cursor: pointer;
|
||||
padding: 0 var(--wa-form-control-padding-inline);
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
|
||||
height: var(--wa-form-control-height);
|
||||
width: 100%;
|
||||
|
||||
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
|
||||
border-color: transparent;
|
||||
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
|
||||
border-radius: var(--wa-form-control-border-radius);
|
||||
border-style: var(--wa-border-style);
|
||||
border-width: var(--wa-border-width-s);
|
||||
}
|
||||
|
||||
/* Appearance modifiers */
|
||||
:host([appearance='plain']) {
|
||||
.button {
|
||||
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.button:not(.disabled):not(.loading):hover {
|
||||
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
||||
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
|
||||
}
|
||||
}
|
||||
.button:not(.disabled):not(.loading):active {
|
||||
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
|
||||
var(--wa-color-mix-active)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance='outlined']) {
|
||||
.button {
|
||||
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
||||
background-color: transparent;
|
||||
border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.button:not(.disabled):not(.loading):hover {
|
||||
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
||||
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
|
||||
}
|
||||
}
|
||||
.button:not(.disabled):not(.loading):active {
|
||||
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
|
||||
var(--wa-color-mix-active)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance='filled']) {
|
||||
.button {
|
||||
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
||||
background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
|
||||
border-color: transparent;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.button:not(.disabled):not(.loading):hover {
|
||||
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
|
||||
var(--wa-color-mix-hover)
|
||||
);
|
||||
}
|
||||
}
|
||||
.button:not(.disabled):not(.loading):active {
|
||||
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
|
||||
var(--wa-color-mix-active)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance='filled-outlined']) {
|
||||
.button {
|
||||
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
||||
background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
|
||||
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.button:not(.disabled):not(.loading):hover {
|
||||
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
|
||||
var(--wa-color-mix-hover)
|
||||
);
|
||||
}
|
||||
}
|
||||
.button:not(.disabled):not(.loading):active {
|
||||
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
|
||||
var(--wa-color-mix-active)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance='accent']) {
|
||||
.button {
|
||||
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
|
||||
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
|
||||
border-color: transparent;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.button:not(.disabled):not(.loading):hover {
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
|
||||
var(--wa-color-mix-hover)
|
||||
);
|
||||
}
|
||||
}
|
||||
.button:not(.disabled):not(.loading):active {
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
|
||||
var(--wa-color-mix-active)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus states */
|
||||
.button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.button:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
/* Disabled state */
|
||||
.button.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* When disabled, prevent mouse events from bubbling up from children */
|
||||
.button.disabled * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Keep it last so Safari doesn't stop parsing this block */
|
||||
.button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Icon buttons */
|
||||
.button.is-icon-button {
|
||||
outline-offset: 2px;
|
||||
width: var(--wa-form-control-height);
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.button.is-icon-button:has(wa-icon) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Pill modifier */
|
||||
:host([pill]) .button {
|
||||
border-radius: var(--wa-border-radius-pill);
|
||||
}
|
||||
|
||||
/*
|
||||
* Label
|
||||
*/
|
||||
|
||||
.start,
|
||||
.end {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.is-icon-button .label {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.label::slotted(wa-icon) {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* Caret modifier
|
||||
*/
|
||||
|
||||
wa-icon[part='caret'] {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
|
||||
&::part(svg) {
|
||||
width: 0.875em;
|
||||
height: 0.875em;
|
||||
}
|
||||
|
||||
.button:has(&) .end {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Loading modifier
|
||||
*/
|
||||
|
||||
.loading {
|
||||
position: relative;
|
||||
cursor: wait;
|
||||
|
||||
.start,
|
||||
.label,
|
||||
.end,
|
||||
.caret {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
wa-spinner {
|
||||
--indicator-color: currentColor;
|
||||
--track-color: color-mix(in oklab, currentColor, transparent 90%);
|
||||
|
||||
position: absolute;
|
||||
font-size: 1em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
top: calc(50% - 0.5em);
|
||||
left: calc(50% - 0.5em);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Badges
|
||||
*/
|
||||
|
||||
.button ::slotted(wa-badge) {
|
||||
border-color: var(--wa-color-surface-default);
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
inset-inline-end: 0;
|
||||
translate: 50% -50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:host(:dir(rtl)) ::slotted(wa-badge) {
|
||||
translate: -50% -50%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Button spacing
|
||||
*/
|
||||
|
||||
slot[name='start']::slotted(*) {
|
||||
margin-inline-end: 0.75em;
|
||||
}
|
||||
|
||||
slot[name='end']::slotted(*),
|
||||
.button:not(.visually-hidden-label) [part='caret'] {
|
||||
margin-inline-start: 0.75em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Button group border radius modifications
|
||||
*/
|
||||
|
||||
/* Remove border radius from all grouped buttons by default */
|
||||
:host(.wa-button-group__button) .button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Horizontal orientation */
|
||||
:host(.wa-button-group__horizontal.wa-button-group__button-first) .button {
|
||||
border-start-start-radius: var(--wa-form-control-border-radius);
|
||||
border-end-start-radius: var(--wa-form-control-border-radius);
|
||||
}
|
||||
|
||||
:host(.wa-button-group__horizontal.wa-button-group__button-last) .button {
|
||||
border-start-end-radius: var(--wa-form-control-border-radius);
|
||||
border-end-end-radius: var(--wa-form-control-border-radius);
|
||||
}
|
||||
|
||||
/* Vertical orientation */
|
||||
:host(.wa-button-group__vertical) {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
:host(.wa-button-group__vertical) .button {
|
||||
width: 100%;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
:host(.wa-button-group__vertical.wa-button-group__button-first) .button {
|
||||
border-start-start-radius: var(--wa-form-control-border-radius);
|
||||
border-start-end-radius: var(--wa-form-control-border-radius);
|
||||
}
|
||||
|
||||
:host(.wa-button-group__vertical.wa-button-group__button-last) .button {
|
||||
border-end-start-radius: var(--wa-form-control-border-radius);
|
||||
border-end-end-radius: var(--wa-form-control-border-radius);
|
||||
}
|
||||
|
||||
/* Handle pill modifier for button groups */
|
||||
:host([pill].wa-button-group__horizontal.wa-button-group__button-first) .button {
|
||||
border-start-start-radius: var(--wa-border-radius-pill);
|
||||
border-end-start-radius: var(--wa-border-radius-pill);
|
||||
}
|
||||
|
||||
:host([pill].wa-button-group__horizontal.wa-button-group__button-last) .button {
|
||||
border-start-end-radius: var(--wa-border-radius-pill);
|
||||
border-end-end-radius: var(--wa-border-radius-pill);
|
||||
}
|
||||
|
||||
:host([pill].wa-button-group__vertical.wa-button-group__button-first) .button {
|
||||
border-start-start-radius: var(--wa-border-radius-pill);
|
||||
border-start-end-radius: var(--wa-border-radius-pill);
|
||||
}
|
||||
|
||||
:host([pill].wa-button-group__vertical.wa-button-group__button-last) .button {
|
||||
border-end-start-radius: var(--wa-border-radius-pill);
|
||||
border-end-end-radius: var(--wa-border-radius-pill);
|
||||
}
|
||||
376
packages/webawesome/src/components/button/button.styles.ts
Normal file
376
packages/webawesome/src/components/button/button.styles.ts
Normal file
@@ -0,0 +1,376 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
@layer wa-component {
|
||||
:host {
|
||||
display: inline-block;
|
||||
|
||||
/* Workaround because Chrome doesn't like :host(:has()) below
|
||||
* https://issues.chromium.org/issues/40062355
|
||||
* Firefox doesn't like this nested rule, so both are needed */
|
||||
&:has(wa-badge) {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
/* Apply relative positioning only when needed to position wa-badge
|
||||
* This avoids creating a new stacking context for every button */
|
||||
:host(:has(wa-badge)) {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
transition-property: background, border, box-shadow, color, opacity;
|
||||
transition-duration: var(--wa-transition-fast);
|
||||
transition-timing-function: var(--wa-transition-easing);
|
||||
cursor: pointer;
|
||||
padding: 0 var(--wa-form-control-padding-inline);
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
|
||||
height: var(--wa-form-control-height);
|
||||
width: 100%;
|
||||
|
||||
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
|
||||
border-color: transparent;
|
||||
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
|
||||
border-radius: var(--wa-form-control-border-radius);
|
||||
border-style: var(--wa-border-style);
|
||||
border-width: var(--wa-border-width-s);
|
||||
}
|
||||
|
||||
/* Appearance modifiers */
|
||||
:host([appearance='plain']) {
|
||||
.button {
|
||||
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.button:not(.disabled):not(.loading):hover {
|
||||
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
||||
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
|
||||
}
|
||||
}
|
||||
.button:not(.disabled):not(.loading):active {
|
||||
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
|
||||
var(--wa-color-mix-active)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance='outlined']) {
|
||||
.button {
|
||||
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
||||
background-color: transparent;
|
||||
border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.button:not(.disabled):not(.loading):hover {
|
||||
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
||||
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
|
||||
}
|
||||
}
|
||||
.button:not(.disabled):not(.loading):active {
|
||||
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
|
||||
var(--wa-color-mix-active)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance='filled']) {
|
||||
.button {
|
||||
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
||||
background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
|
||||
border-color: transparent;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.button:not(.disabled):not(.loading):hover {
|
||||
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
|
||||
var(--wa-color-mix-hover)
|
||||
);
|
||||
}
|
||||
}
|
||||
.button:not(.disabled):not(.loading):active {
|
||||
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
|
||||
var(--wa-color-mix-active)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance='filled-outlined']) {
|
||||
.button {
|
||||
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
||||
background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
|
||||
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.button:not(.disabled):not(.loading):hover {
|
||||
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
|
||||
var(--wa-color-mix-hover)
|
||||
);
|
||||
}
|
||||
}
|
||||
.button:not(.disabled):not(.loading):active {
|
||||
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
|
||||
var(--wa-color-mix-active)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance='accent']) {
|
||||
.button {
|
||||
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
|
||||
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
|
||||
border-color: transparent;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.button:not(.disabled):not(.loading):hover {
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
|
||||
var(--wa-color-mix-hover)
|
||||
);
|
||||
}
|
||||
}
|
||||
.button:not(.disabled):not(.loading):active {
|
||||
background-color: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
|
||||
var(--wa-color-mix-active)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus states */
|
||||
.button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.button:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
/* Disabled state */
|
||||
.button.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* When disabled, prevent mouse events from bubbling up from children */
|
||||
.button.disabled * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Keep it last so Safari doesn't stop parsing this block */
|
||||
.button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Icon buttons */
|
||||
.button.is-icon-button {
|
||||
outline-offset: 2px;
|
||||
width: var(--wa-form-control-height);
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.button.is-icon-button:has(wa-icon) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Pill modifier */
|
||||
:host([pill]) .button {
|
||||
border-radius: var(--wa-border-radius-pill);
|
||||
}
|
||||
|
||||
/*
|
||||
* Label
|
||||
*/
|
||||
|
||||
.start,
|
||||
.end {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.is-icon-button .label {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.label::slotted(wa-icon) {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* Caret modifier
|
||||
*/
|
||||
|
||||
wa-icon[part='caret'] {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
|
||||
&::part(svg) {
|
||||
width: 0.875em;
|
||||
height: 0.875em;
|
||||
}
|
||||
|
||||
.button:has(&) .end {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Loading modifier
|
||||
*/
|
||||
|
||||
.loading {
|
||||
position: relative;
|
||||
cursor: wait;
|
||||
|
||||
.start,
|
||||
.label,
|
||||
.end,
|
||||
.caret {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
wa-spinner {
|
||||
--indicator-color: currentColor;
|
||||
--track-color: color-mix(in oklab, currentColor, transparent 90%);
|
||||
|
||||
position: absolute;
|
||||
font-size: 1em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
top: calc(50% - 0.5em);
|
||||
left: calc(50% - 0.5em);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Badges
|
||||
*/
|
||||
|
||||
.button ::slotted(wa-badge) {
|
||||
border-color: var(--wa-color-surface-default);
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
inset-inline-end: 0;
|
||||
translate: 50% -50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:host(:dir(rtl)) ::slotted(wa-badge) {
|
||||
translate: -50% -50%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Button spacing
|
||||
*/
|
||||
|
||||
slot[name='start']::slotted(*) {
|
||||
margin-inline-end: 0.75em;
|
||||
}
|
||||
|
||||
slot[name='end']::slotted(*),
|
||||
.button:not(.visually-hidden-label) [part='caret'] {
|
||||
margin-inline-start: 0.75em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Button group border radius modifications
|
||||
*/
|
||||
|
||||
/* Remove border radius from all grouped buttons by default */
|
||||
:host(.wa-button-group__button) .button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Horizontal orientation */
|
||||
:host(.wa-button-group__horizontal.wa-button-group__button-first) .button {
|
||||
border-start-start-radius: var(--wa-form-control-border-radius);
|
||||
border-end-start-radius: var(--wa-form-control-border-radius);
|
||||
}
|
||||
|
||||
:host(.wa-button-group__horizontal.wa-button-group__button-last) .button {
|
||||
border-start-end-radius: var(--wa-form-control-border-radius);
|
||||
border-end-end-radius: var(--wa-form-control-border-radius);
|
||||
}
|
||||
|
||||
/* Vertical orientation */
|
||||
:host(.wa-button-group__vertical) {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
:host(.wa-button-group__vertical) .button {
|
||||
width: 100%;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
:host(.wa-button-group__vertical.wa-button-group__button-first) .button {
|
||||
border-start-start-radius: var(--wa-form-control-border-radius);
|
||||
border-start-end-radius: var(--wa-form-control-border-radius);
|
||||
}
|
||||
|
||||
:host(.wa-button-group__vertical.wa-button-group__button-last) .button {
|
||||
border-end-start-radius: var(--wa-form-control-border-radius);
|
||||
border-end-end-radius: var(--wa-form-control-border-radius);
|
||||
}
|
||||
|
||||
/* Handle pill modifier for button groups */
|
||||
:host([pill].wa-button-group__horizontal.wa-button-group__button-first) .button {
|
||||
border-start-start-radius: var(--wa-border-radius-pill);
|
||||
border-end-start-radius: var(--wa-border-radius-pill);
|
||||
}
|
||||
|
||||
:host([pill].wa-button-group__horizontal.wa-button-group__button-last) .button {
|
||||
border-start-end-radius: var(--wa-border-radius-pill);
|
||||
border-end-end-radius: var(--wa-border-radius-pill);
|
||||
}
|
||||
|
||||
:host([pill].wa-button-group__vertical.wa-button-group__button-first) .button {
|
||||
border-start-start-radius: var(--wa-border-radius-pill);
|
||||
border-start-end-radius: var(--wa-border-radius-pill);
|
||||
}
|
||||
|
||||
:host([pill].wa-button-group__vertical.wa-button-group__button-last) .button {
|
||||
border-end-start-radius: var(--wa-border-radius-pill);
|
||||
border-end-end-radius: var(--wa-border-radius-pill);
|
||||
}
|
||||
`;
|
||||
@@ -7,13 +7,13 @@ import { HasSlotController } from '../../internal/slot.js';
|
||||
import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import variantStyles from '../../styles/utilities/variants.css';
|
||||
import sizeStyles from '../../styles/component/size.styles.js';
|
||||
import variantStyles from '../../styles/component/variants.styles.js';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import '../icon/icon.js';
|
||||
import type WaIcon from '../icon/icon.js';
|
||||
import '../spinner/spinner.js';
|
||||
import styles from './button.css';
|
||||
import styles from './button.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Buttons represent actions that are available to the user.
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
:host {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: stretch;
|
||||
border-radius: var(--wa-panel-border-radius);
|
||||
background-color: var(--wa-color-fill-quiet, var(--wa-color-brand-fill-quiet));
|
||||
border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
|
||||
border-style: var(--wa-panel-border-style);
|
||||
border-width: var(--wa-panel-border-width);
|
||||
color: var(--wa-color-text-normal);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
/* Appearance modifiers */
|
||||
:host([appearance~='plain']) {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:host([appearance~='outlined']) {
|
||||
background-color: transparent;
|
||||
border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
|
||||
}
|
||||
|
||||
:host([appearance~='filled']) {
|
||||
background-color: var(--wa-color-fill-quiet, var(--wa-color-brand-fill-quiet));
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:host([appearance~='filled-outlined']) {
|
||||
border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
|
||||
}
|
||||
|
||||
:host([appearance~='accent']) {
|
||||
color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
|
||||
background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
|
||||
border-color: transparent;
|
||||
|
||||
[part~='icon'] {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
[part~='icon'] {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--wa-color-on-quiet);
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
::slotted([slot='icon']) {
|
||||
margin-inline-end: var(--wa-form-control-padding-inline);
|
||||
}
|
||||
|
||||
[part~='message'] {
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
64
packages/webawesome/src/components/callout/callout.styles.ts
Normal file
64
packages/webawesome/src/components/callout/callout.styles.ts
Normal file
@@ -0,0 +1,64 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: stretch;
|
||||
border-radius: var(--wa-panel-border-radius);
|
||||
background-color: var(--wa-color-fill-quiet, var(--wa-color-brand-fill-quiet));
|
||||
border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
|
||||
border-style: var(--wa-panel-border-style);
|
||||
border-width: var(--wa-panel-border-width);
|
||||
color: var(--wa-color-text-normal);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
/* Appearance modifiers */
|
||||
:host([appearance~='plain']) {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:host([appearance~='outlined']) {
|
||||
background-color: transparent;
|
||||
border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
|
||||
}
|
||||
|
||||
:host([appearance~='filled']) {
|
||||
background-color: var(--wa-color-fill-quiet, var(--wa-color-brand-fill-quiet));
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:host([appearance~='filled-outlined']) {
|
||||
border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
|
||||
}
|
||||
|
||||
:host([appearance~='accent']) {
|
||||
color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
|
||||
background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
|
||||
border-color: transparent;
|
||||
|
||||
[part~='icon'] {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
[part~='icon'] {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--wa-color-on-quiet);
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
::slotted([slot='icon']) {
|
||||
margin-inline-end: var(--wa-form-control-padding-inline);
|
||||
}
|
||||
|
||||
[part~='message'] {
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
`;
|
||||
@@ -1,9 +1,9 @@
|
||||
import { html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import variantStyles from '../../styles/utilities/variants.css';
|
||||
import styles from './callout.css';
|
||||
import sizeStyles from '../../styles/component/size.styles.js';
|
||||
import variantStyles from '../../styles/component/variants.styles.js';
|
||||
import styles from './callout.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Callouts are used to display important messages inline.
|
||||
|
||||
@@ -1,141 +0,0 @@
|
||||
:host {
|
||||
--spacing: var(--wa-space-l);
|
||||
|
||||
/* Internal calculated properties */
|
||||
--inner-border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-color: var(--wa-color-surface-border);
|
||||
border-radius: var(--wa-panel-border-radius);
|
||||
border-style: var(--wa-panel-border-style);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
border-width: var(--wa-panel-border-width);
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
/* Appearance modifiers */
|
||||
:host([appearance='plain']) {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:host([appearance='outlined']) {
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-color: var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
:host([appearance='filled']) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:host([appearance='filled-outlined']) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
:host([appearance='accent']) {
|
||||
color: var(--wa-color-neutral-on-loud);
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Take care of top and bottom radii */
|
||||
.media,
|
||||
:host(:not([with-media])) .header,
|
||||
:host(:not([with-media], [with-header])) .body {
|
||||
border-start-start-radius: var(--inner-border-radius);
|
||||
border-start-end-radius: var(--inner-border-radius);
|
||||
}
|
||||
|
||||
:host(:not([with-footer])) .body,
|
||||
.footer {
|
||||
border-end-start-radius: var(--inner-border-radius);
|
||||
border-end-end-radius: var(--inner-border-radius);
|
||||
}
|
||||
|
||||
.media {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
&::slotted(*) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Round all corners for plain appearance */
|
||||
:host([appearance='plain']) .media {
|
||||
border-radius: var(--inner-border-radius);
|
||||
|
||||
&::slotted(*) {
|
||||
border-radius: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: block;
|
||||
border-block-end-style: inherit;
|
||||
border-block-end-color: var(--wa-color-surface-border);
|
||||
border-block-end-width: var(--wa-panel-border-width);
|
||||
padding: calc(var(--spacing) / 2) var(--spacing);
|
||||
}
|
||||
|
||||
.body {
|
||||
display: block;
|
||||
padding: var(--spacing);
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: block;
|
||||
border-block-start-style: inherit;
|
||||
border-block-start-color: var(--wa-color-surface-border);
|
||||
border-block-start-width: var(--wa-panel-border-width);
|
||||
padding: var(--spacing);
|
||||
}
|
||||
|
||||
/* Push slots to sides when the action slots renders */
|
||||
.has-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
:host(:not([with-header])) .header,
|
||||
:host(:not([with-footer])) .footer,
|
||||
:host(:not([with-media])) .media {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Orientation Styles */
|
||||
:host([orientation='horizontal']) {
|
||||
flex-direction: row;
|
||||
|
||||
.media {
|
||||
border-start-start-radius: var(--inner-border-radius);
|
||||
border-end-start-radius: var(--inner-border-radius);
|
||||
border-start-end-radius: 0;
|
||||
|
||||
&::slotted(*) {
|
||||
block-size: 100%;
|
||||
inline-size: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:host([orientation='horizontal']) ::slotted([slot='body']) {
|
||||
display: block;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:host([orientation='horizontal']) ::slotted([slot='actions']) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing);
|
||||
}
|
||||
145
packages/webawesome/src/components/card/card.styles.ts
Normal file
145
packages/webawesome/src/components/card/card.styles.ts
Normal file
@@ -0,0 +1,145 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--spacing: var(--wa-space-l);
|
||||
|
||||
/* Internal calculated properties */
|
||||
--inner-border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-color: var(--wa-color-surface-border);
|
||||
border-radius: var(--wa-panel-border-radius);
|
||||
border-style: var(--wa-panel-border-style);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
border-width: var(--wa-panel-border-width);
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
/* Appearance modifiers */
|
||||
:host([appearance='plain']) {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:host([appearance='outlined']) {
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-color: var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
:host([appearance='filled']) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:host([appearance='filled-outlined']) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
:host([appearance='accent']) {
|
||||
color: var(--wa-color-neutral-on-loud);
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Take care of top and bottom radii */
|
||||
.media,
|
||||
:host(:not([with-media])) .header,
|
||||
:host(:not([with-media], [with-header])) .body {
|
||||
border-start-start-radius: var(--inner-border-radius);
|
||||
border-start-end-radius: var(--inner-border-radius);
|
||||
}
|
||||
|
||||
:host(:not([with-footer])) .body,
|
||||
.footer {
|
||||
border-end-start-radius: var(--inner-border-radius);
|
||||
border-end-end-radius: var(--inner-border-radius);
|
||||
}
|
||||
|
||||
.media {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
&::slotted(*) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Round all corners for plain appearance */
|
||||
:host([appearance='plain']) .media {
|
||||
border-radius: var(--inner-border-radius);
|
||||
|
||||
&::slotted(*) {
|
||||
border-radius: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: block;
|
||||
border-block-end-style: inherit;
|
||||
border-block-end-color: var(--wa-color-surface-border);
|
||||
border-block-end-width: var(--wa-panel-border-width);
|
||||
padding: calc(var(--spacing) / 2) var(--spacing);
|
||||
}
|
||||
|
||||
.body {
|
||||
display: block;
|
||||
padding: var(--spacing);
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: block;
|
||||
border-block-start-style: inherit;
|
||||
border-block-start-color: var(--wa-color-surface-border);
|
||||
border-block-start-width: var(--wa-panel-border-width);
|
||||
padding: var(--spacing);
|
||||
}
|
||||
|
||||
/* Push slots to sides when the action slots renders */
|
||||
.has-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
:host(:not([with-header])) .header,
|
||||
:host(:not([with-footer])) .footer,
|
||||
:host(:not([with-media])) .media {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Orientation Styles */
|
||||
:host([orientation='horizontal']) {
|
||||
flex-direction: row;
|
||||
|
||||
.media {
|
||||
border-start-start-radius: var(--inner-border-radius);
|
||||
border-end-start-radius: var(--inner-border-radius);
|
||||
border-start-end-radius: 0;
|
||||
|
||||
&::slotted(*) {
|
||||
block-size: 100%;
|
||||
inline-size: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:host([orientation='horizontal']) ::slotted([slot='body']) {
|
||||
display: block;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:host([orientation='horizontal']) ::slotted([slot='actions']) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing);
|
||||
}
|
||||
`;
|
||||
@@ -2,8 +2,8 @@ import { html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { HasSlotController } from '../../internal/slot.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import styles from './card.css';
|
||||
import sizeStyles from '../../styles/component/size.styles.js';
|
||||
import styles from './card.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Cards can be used to group related subjects in a container.
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
:host {
|
||||
--aspect-ratio: inherit;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
aspect-ratio: var(--aspect-ratio);
|
||||
scroll-snap-align: start;
|
||||
scroll-snap-stop: always;
|
||||
}
|
||||
|
||||
::slotted(img) {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--aspect-ratio: inherit;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
aspect-ratio: var(--aspect-ratio);
|
||||
scroll-snap-align: start;
|
||||
scroll-snap-stop: always;
|
||||
}
|
||||
|
||||
::slotted(img) {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover;
|
||||
}
|
||||
`;
|
||||
@@ -1,7 +1,7 @@
|
||||
import { html } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import styles from './carousel-item.css';
|
||||
import styles from './carousel-item.styles.js';
|
||||
|
||||
/**
|
||||
* @summary A carousel item represent a slide within a carousel.
|
||||
|
||||
@@ -1,154 +0,0 @@
|
||||
:host {
|
||||
--aspect-ratio: 16 / 9;
|
||||
--scroll-hint: 0px;
|
||||
--slide-gap: var(--wa-space-m, 1rem); /* fallback value is necessary */
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr min-content;
|
||||
grid-template-rows: 1fr min-content;
|
||||
grid-template-areas:
|
||||
'. slides .'
|
||||
'. pagination .';
|
||||
gap: var(--wa-space-m);
|
||||
align-items: center;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
grid-area: pagination;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: var(--wa-space-s);
|
||||
}
|
||||
|
||||
.slides {
|
||||
grid-area: slides;
|
||||
|
||||
display: grid;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
overflow: auto;
|
||||
overscroll-behavior-x: contain;
|
||||
scrollbar-width: none;
|
||||
aspect-ratio: calc(var(--aspect-ratio) * var(--slides-per-page));
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
|
||||
--slide-size: calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
:where(.slides) {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.slides-horizontal {
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: var(--slide-size);
|
||||
grid-auto-rows: 100%;
|
||||
column-gap: var(--slide-gap);
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-padding-inline: var(--scroll-hint);
|
||||
padding-inline: var(--scroll-hint);
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.slides-vertical {
|
||||
grid-auto-flow: row;
|
||||
grid-auto-columns: 100%;
|
||||
grid-auto-rows: var(--slide-size);
|
||||
row-gap: var(--slide-gap);
|
||||
scroll-snap-type: y mandatory;
|
||||
scroll-padding-block: var(--scroll-hint);
|
||||
padding-block: var(--scroll-hint);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.slides-dragging,
|
||||
.slides-dropping {
|
||||
scroll-snap-type: unset;
|
||||
}
|
||||
|
||||
:host([vertical]) ::slotted(wa-carousel-item) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slides::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
grid-area: navigation;
|
||||
display: contents;
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
.navigation-button {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
font-size: inherit;
|
||||
color: var(--wa-color-text-quiet);
|
||||
padding: var(--wa-space-xs);
|
||||
cursor: pointer;
|
||||
transition: var(--wa-transition-normal) color;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.navigation-button-disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.navigation-button-disabled::part(base) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.navigation-button-previous {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.navigation-button-next {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.pagination-item {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: 0;
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
width: var(--wa-space-s);
|
||||
height: var(--wa-space-s);
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
transition: transform var(--wa-transition-slow);
|
||||
}
|
||||
|
||||
.pagination-item-active {
|
||||
background-color: var(--wa-form-control-activated-color);
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
/* Focus styles */
|
||||
.slides:focus-visible,
|
||||
.navigation-button:focus-visible,
|
||||
.pagination-item:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
158
packages/webawesome/src/components/carousel/carousel.styles.ts
Normal file
158
packages/webawesome/src/components/carousel/carousel.styles.ts
Normal file
@@ -0,0 +1,158 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--aspect-ratio: 16 / 9;
|
||||
--scroll-hint: 0px;
|
||||
--slide-gap: var(--wa-space-m, 1rem); /* fallback value is necessary */
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr min-content;
|
||||
grid-template-rows: 1fr min-content;
|
||||
grid-template-areas:
|
||||
'. slides .'
|
||||
'. pagination .';
|
||||
gap: var(--wa-space-m);
|
||||
align-items: center;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
grid-area: pagination;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: var(--wa-space-s);
|
||||
}
|
||||
|
||||
.slides {
|
||||
grid-area: slides;
|
||||
|
||||
display: grid;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
overflow: auto;
|
||||
overscroll-behavior-x: contain;
|
||||
scrollbar-width: none;
|
||||
aspect-ratio: calc(var(--aspect-ratio) * var(--slides-per-page));
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
|
||||
--slide-size: calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
:where(.slides) {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.slides-horizontal {
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: var(--slide-size);
|
||||
grid-auto-rows: 100%;
|
||||
column-gap: var(--slide-gap);
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-padding-inline: var(--scroll-hint);
|
||||
padding-inline: var(--scroll-hint);
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.slides-vertical {
|
||||
grid-auto-flow: row;
|
||||
grid-auto-columns: 100%;
|
||||
grid-auto-rows: var(--slide-size);
|
||||
row-gap: var(--slide-gap);
|
||||
scroll-snap-type: y mandatory;
|
||||
scroll-padding-block: var(--scroll-hint);
|
||||
padding-block: var(--scroll-hint);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.slides-dragging,
|
||||
.slides-dropping {
|
||||
scroll-snap-type: unset;
|
||||
}
|
||||
|
||||
:host([vertical]) ::slotted(wa-carousel-item) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slides::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
grid-area: navigation;
|
||||
display: contents;
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
.navigation-button {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
font-size: inherit;
|
||||
color: var(--wa-color-text-quiet);
|
||||
padding: var(--wa-space-xs);
|
||||
cursor: pointer;
|
||||
transition: var(--wa-transition-normal) color;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.navigation-button-disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.navigation-button-disabled::part(base) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.navigation-button-previous {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.navigation-button-next {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.pagination-item {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: 0;
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
width: var(--wa-space-s);
|
||||
height: var(--wa-space-s);
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
transition: transform var(--wa-transition-slow);
|
||||
}
|
||||
|
||||
.pagination-item-active {
|
||||
background-color: var(--wa-form-control-activated-color);
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
/* Focus styles */
|
||||
.slides:focus-visible,
|
||||
.navigation-button:focus-visible,
|
||||
.pagination-item:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
`;
|
||||
@@ -16,7 +16,7 @@ import { LocalizeController } from '../../utilities/localize.js';
|
||||
import type WaCarouselItem from '../carousel-item/carousel-item.js';
|
||||
import '../icon/icon.js';
|
||||
import { AutoplayController } from './autoplay-controller.js';
|
||||
import styles from './carousel.css';
|
||||
import styles from './carousel.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
:host {
|
||||
--checked-icon-color: var(--wa-color-brand-on-loud);
|
||||
--checked-icon-scale: 0.8;
|
||||
|
||||
display: inline-flex;
|
||||
color: var(--wa-form-control-value-color);
|
||||
font-family: inherit;
|
||||
font-weight: var(--wa-form-control-value-font-weight);
|
||||
line-height: var(--wa-form-control-value-line-height);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
[part~='control'] {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--wa-form-control-toggle-size);
|
||||
height: var(--wa-form-control-toggle-size);
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
border-radius: min(
|
||||
calc(var(--wa-form-control-toggle-size) * 0.375),
|
||||
var(--wa-border-radius-s)
|
||||
); /* min prevents entirely circular checkbox */
|
||||
border-style: var(--wa-border-style);
|
||||
border-width: var(--wa-form-control-border-width);
|
||||
background-color: var(--wa-form-control-background-color);
|
||||
transition:
|
||||
background var(--wa-transition-normal),
|
||||
border-color var(--wa-transition-fast),
|
||||
box-shadow var(--wa-transition-fast),
|
||||
color var(--wa-transition-fast);
|
||||
transition-timing-function: var(--wa-transition-easing);
|
||||
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
|
||||
[part~='base'] {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
color: currentColor;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[part~='label'] {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* Checked */
|
||||
[part~='control']:has(:checked, :indeterminate) {
|
||||
color: var(--checked-icon-color);
|
||||
border-color: var(--wa-form-control-activated-color);
|
||||
background-color: var(--wa-form-control-activated-color);
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
[part~='control']:has(> input:focus-visible:not(:disabled)) {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
:host [part~='base']:has(input:disabled) {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[part~='icon'] {
|
||||
display: flex;
|
||||
scale: var(--checked-icon-scale);
|
||||
|
||||
/* Without this, Safari renders the icon slightly to the left */
|
||||
&::part(svg) {
|
||||
translate: 0.0009765625em;
|
||||
}
|
||||
|
||||
input:not(:checked, :indeterminate) + & {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
:host([required]) [part~='label']::after {
|
||||
content: var(--wa-form-control-required-content);
|
||||
color: var(--wa-form-control-required-content-color);
|
||||
margin-inline-start: var(--wa-form-control-required-content-offset);
|
||||
}
|
||||
104
packages/webawesome/src/components/checkbox/checkbox.styles.ts
Normal file
104
packages/webawesome/src/components/checkbox/checkbox.styles.ts
Normal file
@@ -0,0 +1,104 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--checked-icon-color: var(--wa-color-brand-on-loud);
|
||||
--checked-icon-scale: 0.8;
|
||||
|
||||
display: inline-flex;
|
||||
color: var(--wa-form-control-value-color);
|
||||
font-family: inherit;
|
||||
font-weight: var(--wa-form-control-value-font-weight);
|
||||
line-height: var(--wa-form-control-value-line-height);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
[part~='control'] {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--wa-form-control-toggle-size);
|
||||
height: var(--wa-form-control-toggle-size);
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
border-radius: min(
|
||||
calc(var(--wa-form-control-toggle-size) * 0.375),
|
||||
var(--wa-border-radius-s)
|
||||
); /* min prevents entirely circular checkbox */
|
||||
border-style: var(--wa-border-style);
|
||||
border-width: var(--wa-form-control-border-width);
|
||||
background-color: var(--wa-form-control-background-color);
|
||||
transition:
|
||||
background var(--wa-transition-normal),
|
||||
border-color var(--wa-transition-fast),
|
||||
box-shadow var(--wa-transition-fast),
|
||||
color var(--wa-transition-fast);
|
||||
transition-timing-function: var(--wa-transition-easing);
|
||||
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
|
||||
[part~='base'] {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
color: currentColor;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[part~='label'] {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* Checked */
|
||||
[part~='control']:has(:checked, :indeterminate) {
|
||||
color: var(--checked-icon-color);
|
||||
border-color: var(--wa-form-control-activated-color);
|
||||
background-color: var(--wa-form-control-activated-color);
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
[part~='control']:has(> input:focus-visible:not(:disabled)) {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
:host [part~='base']:has(input:disabled) {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[part~='icon'] {
|
||||
display: flex;
|
||||
scale: var(--checked-icon-scale);
|
||||
|
||||
/* Without this, Safari renders the icon slightly to the left */
|
||||
&::part(svg) {
|
||||
translate: 0.0009765625em;
|
||||
}
|
||||
|
||||
input:not(:checked, :indeterminate) + & {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
:host([required]) [part~='label']::after {
|
||||
content: var(--wa-form-control-required-content);
|
||||
color: var(--wa-form-control-required-content-color);
|
||||
margin-inline-start: var(--wa-form-control-required-content-offset);
|
||||
}
|
||||
`;
|
||||
@@ -8,10 +8,10 @@ import { HasSlotController } from '../../internal/slot.js';
|
||||
import { RequiredValidator } from '../../internal/validators/required-validator.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
|
||||
import formControlStyles from '../../styles/component/form-control.css';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import formControlStyles from '../../styles/component/form-control.styles.js';
|
||||
import sizeStyles from '../../styles/component/size.styles.js';
|
||||
import '../icon/icon.js';
|
||||
import styles from './checkbox.css';
|
||||
import styles from './checkbox.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Checkboxes allow the user to toggle an option on or off.
|
||||
|
||||
@@ -1,341 +0,0 @@
|
||||
:host {
|
||||
--grid-width: 17em;
|
||||
--grid-height: 12em;
|
||||
--grid-handle-size: 1.25em;
|
||||
--slider-height: 1em;
|
||||
--slider-handle-size: calc(var(--slider-height) + 0.25em);
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-style: var(--wa-border-style);
|
||||
border-width: var(--wa-border-width-s);
|
||||
border-color: var(--wa-color-surface-border);
|
||||
box-shadow: var(--wa-shadow-m);
|
||||
color: var(--color);
|
||||
font: inherit;
|
||||
font-size: inherit;
|
||||
user-select: none;
|
||||
width: var(--grid-width);
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: relative;
|
||||
height: var(--grid-height);
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
|
||||
linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
|
||||
border-top-left-radius: calc(var(--wa-border-radius-m) - var(--wa-border-width-s));
|
||||
border-top-right-radius: calc(var(--wa-border-radius-m) - var(--wa-border-width-s));
|
||||
cursor: crosshair;
|
||||
forced-color-adjust: none;
|
||||
}
|
||||
|
||||
.grid-handle {
|
||||
position: absolute;
|
||||
width: var(--grid-handle-size);
|
||||
height: var(--grid-handle-size);
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
|
||||
border: solid 0.125rem white;
|
||||
margin-top: calc(var(--grid-handle-size) / -2);
|
||||
margin-left: calc(var(--grid-handle-size) / -2);
|
||||
transition: scale var(--wa-transition-normal) var(--wa-transition-easing);
|
||||
}
|
||||
|
||||
.grid-handle-dragging {
|
||||
cursor: none;
|
||||
scale: 1.5;
|
||||
}
|
||||
|
||||
.grid-handle:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
}
|
||||
|
||||
.controls {
|
||||
padding: 0.75em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sliders {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: relative;
|
||||
height: var(--slider-height);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
|
||||
forced-color-adjust: none;
|
||||
}
|
||||
|
||||
.slider:not(:last-of-type) {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
.slider-handle {
|
||||
position: absolute;
|
||||
top: calc(50% - var(--slider-handle-size) / 2);
|
||||
width: var(--slider-handle-size);
|
||||
height: var(--slider-handle-size);
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
border: solid 0.125rem white;
|
||||
box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
|
||||
margin-left: calc(var(--slider-handle-size) / -2);
|
||||
}
|
||||
|
||||
.slider-handle:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
}
|
||||
|
||||
.hue {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
rgb(255, 0, 0) 0%,
|
||||
rgb(255, 255, 0) 17%,
|
||||
rgb(0, 255, 0) 33%,
|
||||
rgb(0, 255, 255) 50%,
|
||||
rgb(0, 0, 255) 67%,
|
||||
rgb(255, 0, 255) 83%,
|
||||
rgb(255, 0, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.alpha .alpha-gradient {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.preview {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
border: none;
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
background: none;
|
||||
font-size: inherit;
|
||||
margin-inline-start: 0.75em;
|
||||
cursor: copy;
|
||||
forced-color-adjust: none;
|
||||
}
|
||||
|
||||
.preview:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
|
||||
|
||||
/* We use a custom property in lieu of currentColor because of https://bugs.webkit.org/show_bug.cgi?id=216780 */
|
||||
background-color: var(--preview-color);
|
||||
}
|
||||
|
||||
.preview:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
.preview-color {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: solid 0.0625rem rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.preview-color-copied {
|
||||
animation: pulse 850ms;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 var(--wa-color-brand-fill-loud);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 0.5rem transparent;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.user-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0.75em 0.75em 0.75em;
|
||||
}
|
||||
|
||||
.user-input wa-input {
|
||||
min-width: 0; /* fix input width in Safari */
|
||||
flex: 1 1 auto;
|
||||
|
||||
&::part(form-control-label) {
|
||||
/* Visually hidden */
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
border: none !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.user-input wa-button-group {
|
||||
margin-inline-start: 0.75em;
|
||||
|
||||
&::part(base) {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.user-input wa-button:first-of-type {
|
||||
min-width: 3em;
|
||||
max-width: 3em;
|
||||
}
|
||||
|
||||
.swatches {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(1.5em, 100%), 1fr));
|
||||
grid-gap: 0.5em;
|
||||
justify-items: center;
|
||||
border-block-start: var(--wa-form-control-border-style) var(--wa-form-control-border-width)
|
||||
var(--wa-color-surface-border);
|
||||
padding: 0.5em;
|
||||
forced-color-adjust: none;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
position: relative;
|
||||
aspect-ratio: 1 / 1;
|
||||
width: 100%;
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.swatch .swatch-color {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: solid 0.0625rem rgba(0, 0, 0, 0.125);
|
||||
border-radius: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.swatch:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
.transparent-bg {
|
||||
background-image:
|
||||
linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
|
||||
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
|
||||
linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%);
|
||||
background-size: 0.5rem 0.5rem;
|
||||
background-position:
|
||||
0 0,
|
||||
0 0,
|
||||
-0.25rem -0.25rem,
|
||||
0.25rem 0.25rem;
|
||||
}
|
||||
|
||||
:host([disabled]) {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
|
||||
.grid,
|
||||
.grid-handle,
|
||||
.slider,
|
||||
.slider-handle,
|
||||
.preview,
|
||||
.swatch,
|
||||
.swatch-color {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Color dropdown
|
||||
*/
|
||||
|
||||
.color-dropdown {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.color-dropdown::part(panel) {
|
||||
max-height: none;
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
display: block;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: inherit;
|
||||
forced-color-adjust: none;
|
||||
width: var(--wa-form-control-height);
|
||||
height: var(--wa-form-control-height);
|
||||
border-radius: var(--wa-form-control-border-radius);
|
||||
}
|
||||
|
||||
.trigger:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background-color: currentColor;
|
||||
box-shadow:
|
||||
inset 0 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-color),
|
||||
inset 0 0 0 calc(var(--wa-form-control-border-width) * 3) var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
.trigger-empty:before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.trigger:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.trigger:focus-visible:not(.trigger:disabled) {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
:host([disabled]) :is(.label, .trigger) {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-control.form-control-has-label .label {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -0,0 +1,345 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--grid-width: 17em;
|
||||
--grid-height: 12em;
|
||||
--grid-handle-size: 1.25em;
|
||||
--slider-height: 1em;
|
||||
--slider-handle-size: calc(var(--slider-height) + 0.25em);
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-style: var(--wa-border-style);
|
||||
border-width: var(--wa-border-width-s);
|
||||
border-color: var(--wa-color-surface-border);
|
||||
box-shadow: var(--wa-shadow-m);
|
||||
color: var(--color);
|
||||
font: inherit;
|
||||
font-size: inherit;
|
||||
user-select: none;
|
||||
width: var(--grid-width);
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: relative;
|
||||
height: var(--grid-height);
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
|
||||
linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
|
||||
border-top-left-radius: calc(var(--wa-border-radius-m) - var(--wa-border-width-s));
|
||||
border-top-right-radius: calc(var(--wa-border-radius-m) - var(--wa-border-width-s));
|
||||
cursor: crosshair;
|
||||
forced-color-adjust: none;
|
||||
}
|
||||
|
||||
.grid-handle {
|
||||
position: absolute;
|
||||
width: var(--grid-handle-size);
|
||||
height: var(--grid-handle-size);
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
|
||||
border: solid 0.125rem white;
|
||||
margin-top: calc(var(--grid-handle-size) / -2);
|
||||
margin-left: calc(var(--grid-handle-size) / -2);
|
||||
transition: scale var(--wa-transition-normal) var(--wa-transition-easing);
|
||||
}
|
||||
|
||||
.grid-handle-dragging {
|
||||
cursor: none;
|
||||
scale: 1.5;
|
||||
}
|
||||
|
||||
.grid-handle:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
}
|
||||
|
||||
.controls {
|
||||
padding: 0.75em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sliders {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: relative;
|
||||
height: var(--slider-height);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
|
||||
forced-color-adjust: none;
|
||||
}
|
||||
|
||||
.slider:not(:last-of-type) {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
.slider-handle {
|
||||
position: absolute;
|
||||
top: calc(50% - var(--slider-handle-size) / 2);
|
||||
width: var(--slider-handle-size);
|
||||
height: var(--slider-handle-size);
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
border: solid 0.125rem white;
|
||||
box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
|
||||
margin-left: calc(var(--slider-handle-size) / -2);
|
||||
}
|
||||
|
||||
.slider-handle:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
}
|
||||
|
||||
.hue {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
rgb(255, 0, 0) 0%,
|
||||
rgb(255, 255, 0) 17%,
|
||||
rgb(0, 255, 0) 33%,
|
||||
rgb(0, 255, 255) 50%,
|
||||
rgb(0, 0, 255) 67%,
|
||||
rgb(255, 0, 255) 83%,
|
||||
rgb(255, 0, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.alpha .alpha-gradient {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.preview {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
border: none;
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
background: none;
|
||||
font-size: inherit;
|
||||
margin-inline-start: 0.75em;
|
||||
cursor: copy;
|
||||
forced-color-adjust: none;
|
||||
}
|
||||
|
||||
.preview:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.2);
|
||||
|
||||
/* We use a custom property in lieu of currentColor because of https://bugs.webkit.org/show_bug.cgi?id=216780 */
|
||||
background-color: var(--preview-color);
|
||||
}
|
||||
|
||||
.preview:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
.preview-color {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: solid 0.0625rem rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.preview-color-copied {
|
||||
animation: pulse 850ms;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 var(--wa-color-brand-fill-loud);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 0.5rem transparent;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.user-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0.75em 0.75em 0.75em;
|
||||
}
|
||||
|
||||
.user-input wa-input {
|
||||
min-width: 0; /* fix input width in Safari */
|
||||
flex: 1 1 auto;
|
||||
|
||||
&::part(form-control-label) {
|
||||
/* Visually hidden */
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
border: none !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.user-input wa-button-group {
|
||||
margin-inline-start: 0.75em;
|
||||
|
||||
&::part(base) {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.user-input wa-button:first-of-type {
|
||||
min-width: 3em;
|
||||
max-width: 3em;
|
||||
}
|
||||
|
||||
.swatches {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(1.5em, 100%), 1fr));
|
||||
grid-gap: 0.5em;
|
||||
justify-items: center;
|
||||
border-block-start: var(--wa-form-control-border-style) var(--wa-form-control-border-width)
|
||||
var(--wa-color-surface-border);
|
||||
padding: 0.5em;
|
||||
forced-color-adjust: none;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
position: relative;
|
||||
aspect-ratio: 1 / 1;
|
||||
width: 100%;
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.swatch .swatch-color {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: solid 0.0625rem rgba(0, 0, 0, 0.125);
|
||||
border-radius: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.swatch:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
.transparent-bg {
|
||||
background-image:
|
||||
linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
|
||||
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
|
||||
linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%);
|
||||
background-size: 0.5rem 0.5rem;
|
||||
background-position:
|
||||
0 0,
|
||||
0 0,
|
||||
-0.25rem -0.25rem,
|
||||
0.25rem 0.25rem;
|
||||
}
|
||||
|
||||
:host([disabled]) {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
|
||||
.grid,
|
||||
.grid-handle,
|
||||
.slider,
|
||||
.slider-handle,
|
||||
.preview,
|
||||
.swatch,
|
||||
.swatch-color {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Color dropdown
|
||||
*/
|
||||
|
||||
.color-dropdown {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.color-dropdown::part(panel) {
|
||||
max-height: none;
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
display: block;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: inherit;
|
||||
forced-color-adjust: none;
|
||||
width: var(--wa-form-control-height);
|
||||
height: var(--wa-form-control-height);
|
||||
border-radius: var(--wa-form-control-border-radius);
|
||||
}
|
||||
|
||||
.trigger:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background-color: currentColor;
|
||||
box-shadow:
|
||||
inset 0 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-color),
|
||||
inset 0 0 0 calc(var(--wa-form-control-border-width) * 3) var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
.trigger-empty:before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.trigger:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.trigger:focus-visible:not(.trigger:disabled) {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
:host([disabled]) :is(.label, .trigger) {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-control.form-control-has-label .label {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
`;
|
||||
@@ -14,9 +14,9 @@ import { HasSlotController } from '../../internal/slot.js';
|
||||
import { RequiredValidator } from '../../internal/validators/required-validator.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
|
||||
import formControlStyles from '../../styles/component/form-control.css';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import visuallyHidden from '../../styles/utilities/visually-hidden.css';
|
||||
import formControlStyles from '../../styles/component/form-control.styles.js';
|
||||
import sizeStyles from '../../styles/component/size.styles.js';
|
||||
import visuallyHidden from '../../styles/component/visually-hidden.styles.js';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import '../button-group/button-group.js';
|
||||
import '../button/button.js';
|
||||
@@ -25,7 +25,7 @@ import '../input/input.js';
|
||||
import type WaInput from '../input/input.js';
|
||||
import '../popup/popup.js';
|
||||
import type WaPopup from '../popup/popup.js';
|
||||
import styles from './color-picker.css';
|
||||
import styles from './color-picker.styles.js';
|
||||
|
||||
interface EyeDropperConstructor {
|
||||
new (): EyeDropperInterface;
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
:host {
|
||||
--divider-width: 0.125rem;
|
||||
--handle-size: 2.5rem;
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.before,
|
||||
.after {
|
||||
display: block;
|
||||
|
||||
&::slotted(img),
|
||||
&::slotted(svg) {
|
||||
display: block;
|
||||
max-width: 100% !important;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&::slotted(:not(img, svg)) {
|
||||
isolation: isolate;
|
||||
}
|
||||
}
|
||||
|
||||
.after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Disable pointer-events while dragging. This is especially important for iframes. */
|
||||
:host(:state(dragging)) {
|
||||
.before,
|
||||
.after {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: var(--divider-width);
|
||||
height: 100%;
|
||||
background-color: var(--wa-color-surface-default);
|
||||
translate: calc(var(--divider-width) / -2);
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.handle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: calc(50% - (var(--handle-size) / 2));
|
||||
width: var(--handle-size);
|
||||
height: var(--handle-size);
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
font-size: calc(var(--handle-size) * 0.4);
|
||||
color: var(--wa-color-neutral-on-quiet);
|
||||
cursor: inherit;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.handle:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--divider-width: 0.125rem;
|
||||
--handle-size: 2.5rem;
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.before,
|
||||
.after {
|
||||
display: block;
|
||||
|
||||
&::slotted(img),
|
||||
&::slotted(svg) {
|
||||
display: block;
|
||||
max-width: 100% !important;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&::slotted(:not(img, svg)) {
|
||||
isolation: isolate;
|
||||
}
|
||||
}
|
||||
|
||||
.after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Disable pointer-events while dragging. This is especially important for iframes. */
|
||||
:host(:state(dragging)) {
|
||||
.before,
|
||||
.after {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: var(--divider-width);
|
||||
height: 100%;
|
||||
background-color: var(--wa-color-surface-default);
|
||||
translate: calc(var(--divider-width) / -2);
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.handle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: calc(50% - (var(--handle-size) / 2));
|
||||
width: var(--handle-size);
|
||||
height: var(--handle-size);
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
font-size: calc(var(--handle-size) * 0.4);
|
||||
color: var(--wa-color-neutral-on-quiet);
|
||||
cursor: inherit;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.handle:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
`;
|
||||
@@ -7,7 +7,7 @@ import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import '../icon/icon.js';
|
||||
import styles from './comparison.css';
|
||||
import styles from './comparison.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Compare visual differences between similar content with a sliding panel.
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
:host {
|
||||
display: inline-block;
|
||||
color: var(--wa-color-neutral-on-quiet);
|
||||
}
|
||||
|
||||
.button {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: var(--wa-form-control-border-radius);
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
padding: 0.5em;
|
||||
cursor: pointer;
|
||||
transition: color var(--wa-transition-fast) var(--wa-transition-easing);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.button:hover:not([disabled]) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
}
|
||||
}
|
||||
|
||||
.button:focus-visible:not([disabled]) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
}
|
||||
|
||||
.button:active:not([disabled]) {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
|
||||
}
|
||||
|
||||
slot[name='success-icon'] {
|
||||
color: var(--wa-color-success-on-quiet);
|
||||
}
|
||||
|
||||
slot[name='error-icon'] {
|
||||
color: var(--wa-color-danger-on-quiet);
|
||||
}
|
||||
|
||||
.button:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
.button[disabled] {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
slot {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.show {
|
||||
animation: show 100ms ease;
|
||||
}
|
||||
|
||||
.hide {
|
||||
animation: show 100ms ease reverse;
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
from {
|
||||
scale: 0.25;
|
||||
opacity: 0.25;
|
||||
}
|
||||
to {
|
||||
scale: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
display: inline-block;
|
||||
color: var(--wa-color-neutral-on-quiet);
|
||||
}
|
||||
|
||||
.button {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: var(--wa-form-control-border-radius);
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
padding: 0.5em;
|
||||
cursor: pointer;
|
||||
transition: color var(--wa-transition-fast) var(--wa-transition-easing);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.button:hover:not([disabled]) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
}
|
||||
}
|
||||
|
||||
.button:focus-visible:not([disabled]) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
}
|
||||
|
||||
.button:active:not([disabled]) {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
|
||||
}
|
||||
|
||||
slot[name='success-icon'] {
|
||||
color: var(--wa-color-success-on-quiet);
|
||||
}
|
||||
|
||||
slot[name='error-icon'] {
|
||||
color: var(--wa-color-danger-on-quiet);
|
||||
}
|
||||
|
||||
.button:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
.button[disabled] {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
slot {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.show {
|
||||
animation: show 100ms ease;
|
||||
}
|
||||
|
||||
.hide {
|
||||
animation: show 100ms ease reverse;
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
from {
|
||||
scale: 0.25;
|
||||
opacity: 0.25;
|
||||
}
|
||||
to {
|
||||
scale: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -5,12 +5,12 @@ import { WaCopyEvent } from '../../events/copy.js';
|
||||
import { WaErrorEvent } from '../../events/error.js';
|
||||
import { animateWithClass } from '../../internal/animate.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import visuallyHidden from '../../styles/utilities/visually-hidden.css';
|
||||
import visuallyHidden from '../../styles/component/visually-hidden.styles.js';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import '../icon/icon.js';
|
||||
import '../tooltip/tooltip.js';
|
||||
import type WaTooltip from '../tooltip/tooltip.js';
|
||||
import styles from './copy-button.css';
|
||||
import styles from './copy-button.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Copies text data to the clipboard when the user clicks the trigger.
|
||||
|
||||
@@ -1,122 +0,0 @@
|
||||
:host {
|
||||
--spacing: var(--wa-space-m);
|
||||
--show-duration: 200ms;
|
||||
--hide-duration: 200ms;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
details {
|
||||
display: block;
|
||||
overflow-anchor: none;
|
||||
border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-radius: var(--wa-panel-border-radius);
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
background: none;
|
||||
border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
|
||||
|
||||
summary {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Appearance modifiers */
|
||||
:host([appearance='plain']) details {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:host([appearance='outlined']) details {
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-color: var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
:host([appearance='filled']) details {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:host([appearance='filled-outlined']) details {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
|
||||
:host([disabled]) details {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing);
|
||||
padding: var(--spacing); /* Add padding here */
|
||||
border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
&::marker,
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: calc(var(--wa-panel-border-width) + var(--wa-focus-ring-offset));
|
||||
}
|
||||
}
|
||||
|
||||
:host([open]) summary {
|
||||
border-end-start-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
|
||||
/* 'Start' icon placement */
|
||||
:host([icon-placement='start']) summary {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
[part~='icon'] {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--wa-color-text-quiet);
|
||||
transition: rotate var(--wa-transition-normal) var(--wa-transition-easing);
|
||||
}
|
||||
|
||||
:host([open]) [part~='icon'] {
|
||||
rotate: 90deg;
|
||||
}
|
||||
|
||||
:host([open]:dir(rtl)) [part~='icon'] {
|
||||
rotate: -90deg;
|
||||
}
|
||||
|
||||
:host([open]) slot[name='expand-icon'],
|
||||
:host(:not([open])) slot[name='collapse-icon'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.body.animating {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: block;
|
||||
padding-block-start: var(--spacing);
|
||||
padding-inline: var(--spacing); /* Add horizontal padding */
|
||||
padding-block-end: var(--spacing); /* Add bottom padding */
|
||||
}
|
||||
126
packages/webawesome/src/components/details/details.styles.ts
Normal file
126
packages/webawesome/src/components/details/details.styles.ts
Normal file
@@ -0,0 +1,126 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--spacing: var(--wa-space-m);
|
||||
--show-duration: 200ms;
|
||||
--hide-duration: 200ms;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
details {
|
||||
display: block;
|
||||
overflow-anchor: none;
|
||||
border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-radius: var(--wa-panel-border-radius);
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
background: none;
|
||||
border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
|
||||
|
||||
summary {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Appearance modifiers */
|
||||
:host([appearance='plain']) details {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:host([appearance='outlined']) details {
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-color: var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
:host([appearance='filled']) details {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:host([appearance='filled-outlined']) details {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
|
||||
:host([disabled]) details {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing);
|
||||
padding: var(--spacing); /* Add padding here */
|
||||
border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
&::marker,
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: calc(var(--wa-panel-border-width) + var(--wa-focus-ring-offset));
|
||||
}
|
||||
}
|
||||
|
||||
:host([open]) summary {
|
||||
border-end-start-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
|
||||
/* 'Start' icon placement */
|
||||
:host([icon-placement='start']) summary {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
[part~='icon'] {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--wa-color-text-quiet);
|
||||
transition: rotate var(--wa-transition-normal) var(--wa-transition-easing);
|
||||
}
|
||||
|
||||
:host([open]) [part~='icon'] {
|
||||
rotate: 90deg;
|
||||
}
|
||||
|
||||
:host([open]:dir(rtl)) [part~='icon'] {
|
||||
rotate: -90deg;
|
||||
}
|
||||
|
||||
:host([open]) slot[name='expand-icon'],
|
||||
:host(:not([open])) slot[name='collapse-icon'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.body.animating {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: block;
|
||||
padding-block-start: var(--spacing);
|
||||
padding-inline: var(--spacing); /* Add horizontal padding */
|
||||
padding-block-end: var(--spacing); /* Add bottom padding */
|
||||
}
|
||||
`;
|
||||
@@ -13,7 +13,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import '../icon/icon.js';
|
||||
import styles from './details.css';
|
||||
import styles from './details.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Details show a brief summary and expand to show additional content.
|
||||
|
||||
@@ -1,183 +0,0 @@
|
||||
:host {
|
||||
--width: 31rem;
|
||||
--spacing: var(--wa-space-l);
|
||||
--show-duration: 200ms;
|
||||
--hide-duration: 200ms;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host([open]) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: var(--width);
|
||||
max-width: calc(100% - var(--wa-space-2xl));
|
||||
max-height: calc(100% - var(--wa-space-2xl));
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
border-radius: var(--wa-panel-border-radius);
|
||||
border: none;
|
||||
box-shadow: var(--wa-shadow-l);
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
|
||||
&.show {
|
||||
animation: show-dialog var(--show-duration) ease;
|
||||
|
||||
&::backdrop {
|
||||
animation: show-backdrop var(--show-duration, 200ms) ease;
|
||||
}
|
||||
}
|
||||
|
||||
&.hide {
|
||||
animation: show-dialog var(--hide-duration) ease reverse;
|
||||
|
||||
&::backdrop {
|
||||
animation: show-backdrop var(--hide-duration, 200ms) ease reverse;
|
||||
}
|
||||
}
|
||||
|
||||
&.pulse {
|
||||
animation: pulse 250ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
|
||||
@media screen and (max-width: 420px) {
|
||||
.dialog {
|
||||
max-height: 80vh;
|
||||
}
|
||||
}
|
||||
|
||||
.open {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
padding-inline-start: var(--spacing);
|
||||
padding-block-end: 0;
|
||||
|
||||
/* Subtract the close button's padding so that the X is visually aligned with the edges of the dialog content */
|
||||
padding-inline-end: calc(var(--spacing) - var(--wa-form-control-padding-block));
|
||||
padding-block-start: calc(var(--spacing) - var(--wa-form-control-padding-block));
|
||||
}
|
||||
|
||||
.title {
|
||||
align-self: center;
|
||||
flex: 1 1 auto;
|
||||
font-family: inherit;
|
||||
font-size: var(--wa-font-size-l);
|
||||
font-weight: var(--wa-font-weight-heading);
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
align-self: start;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: end;
|
||||
gap: var(--wa-space-2xs);
|
||||
padding-inline-start: var(--spacing);
|
||||
}
|
||||
|
||||
.header-actions wa-button,
|
||||
.header-actions ::slotted(wa-button) {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
padding: var(--spacing);
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--wa-space-xs);
|
||||
justify-content: end;
|
||||
padding: var(--spacing);
|
||||
padding-block-start: 0;
|
||||
}
|
||||
|
||||
.footer ::slotted(wa-button:not(:first-of-type)) {
|
||||
margin-inline-start: var(--wa-spacing-xs);
|
||||
}
|
||||
|
||||
.dialog::backdrop {
|
||||
/*
|
||||
NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can
|
||||
remove the fallback values here.
|
||||
*/
|
||||
background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
scale: 1;
|
||||
}
|
||||
50% {
|
||||
scale: 1.02;
|
||||
}
|
||||
100% {
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-dialog {
|
||||
from {
|
||||
opacity: 0;
|
||||
scale: 0.8;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-backdrop {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.dialog {
|
||||
border: solid 1px white;
|
||||
}
|
||||
}
|
||||
187
packages/webawesome/src/components/dialog/dialog.styles.ts
Normal file
187
packages/webawesome/src/components/dialog/dialog.styles.ts
Normal file
@@ -0,0 +1,187 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--width: 31rem;
|
||||
--spacing: var(--wa-space-l);
|
||||
--show-duration: 200ms;
|
||||
--hide-duration: 200ms;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host([open]) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: var(--width);
|
||||
max-width: calc(100% - var(--wa-space-2xl));
|
||||
max-height: calc(100% - var(--wa-space-2xl));
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
border-radius: var(--wa-panel-border-radius);
|
||||
border: none;
|
||||
box-shadow: var(--wa-shadow-l);
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
|
||||
&.show {
|
||||
animation: show-dialog var(--show-duration) ease;
|
||||
|
||||
&::backdrop {
|
||||
animation: show-backdrop var(--show-duration, 200ms) ease;
|
||||
}
|
||||
}
|
||||
|
||||
&.hide {
|
||||
animation: show-dialog var(--hide-duration) ease reverse;
|
||||
|
||||
&::backdrop {
|
||||
animation: show-backdrop var(--hide-duration, 200ms) ease reverse;
|
||||
}
|
||||
}
|
||||
|
||||
&.pulse {
|
||||
animation: pulse 250ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
|
||||
@media screen and (max-width: 420px) {
|
||||
.dialog {
|
||||
max-height: 80vh;
|
||||
}
|
||||
}
|
||||
|
||||
.open {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
padding-inline-start: var(--spacing);
|
||||
padding-block-end: 0;
|
||||
|
||||
/* Subtract the close button's padding so that the X is visually aligned with the edges of the dialog content */
|
||||
padding-inline-end: calc(var(--spacing) - var(--wa-form-control-padding-block));
|
||||
padding-block-start: calc(var(--spacing) - var(--wa-form-control-padding-block));
|
||||
}
|
||||
|
||||
.title {
|
||||
align-self: center;
|
||||
flex: 1 1 auto;
|
||||
font-family: inherit;
|
||||
font-size: var(--wa-font-size-l);
|
||||
font-weight: var(--wa-font-weight-heading);
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
align-self: start;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: end;
|
||||
gap: var(--wa-space-2xs);
|
||||
padding-inline-start: var(--spacing);
|
||||
}
|
||||
|
||||
.header-actions wa-button,
|
||||
.header-actions ::slotted(wa-button) {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
padding: var(--spacing);
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--wa-space-xs);
|
||||
justify-content: end;
|
||||
padding: var(--spacing);
|
||||
padding-block-start: 0;
|
||||
}
|
||||
|
||||
.footer ::slotted(wa-button:not(:first-of-type)) {
|
||||
margin-inline-start: var(--wa-spacing-xs);
|
||||
}
|
||||
|
||||
.dialog::backdrop {
|
||||
/*
|
||||
NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can
|
||||
remove the fallback values here.
|
||||
*/
|
||||
background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
scale: 1;
|
||||
}
|
||||
50% {
|
||||
scale: 1.02;
|
||||
}
|
||||
100% {
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-dialog {
|
||||
from {
|
||||
opacity: 0;
|
||||
scale: 0.8;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-backdrop {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.dialog {
|
||||
border: solid 1px white;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -13,7 +13,7 @@ import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import '../button/button.js';
|
||||
import styles from './dialog.css';
|
||||
import styles from './dialog.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
:host {
|
||||
--color: var(--wa-color-surface-border);
|
||||
--width: var(--wa-border-width-s);
|
||||
--spacing: var(--wa-space-m);
|
||||
}
|
||||
|
||||
:host(:not([orientation='vertical'])) {
|
||||
display: block;
|
||||
border-top: solid var(--width) var(--color);
|
||||
margin: var(--spacing) 0;
|
||||
}
|
||||
|
||||
:host([orientation='vertical']) {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
border-inline-start: solid var(--width) var(--color);
|
||||
margin: 0 var(--spacing);
|
||||
min-block-size: 1lh;
|
||||
}
|
||||
23
packages/webawesome/src/components/divider/divider.styles.ts
Normal file
23
packages/webawesome/src/components/divider/divider.styles.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--color: var(--wa-color-surface-border);
|
||||
--width: var(--wa-border-width-s);
|
||||
--spacing: var(--wa-space-m);
|
||||
}
|
||||
|
||||
:host(:not([orientation='vertical'])) {
|
||||
display: block;
|
||||
border-top: solid var(--width) var(--color);
|
||||
margin: var(--spacing) 0;
|
||||
}
|
||||
|
||||
:host([orientation='vertical']) {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
border-inline-start: solid var(--width) var(--color);
|
||||
margin: 0 var(--spacing);
|
||||
min-block-size: 1lh;
|
||||
}
|
||||
`;
|
||||
@@ -1,7 +1,7 @@
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import styles from './divider.css';
|
||||
import styles from './divider.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Dividers are used to visually separate or group elements.
|
||||
|
||||
@@ -1,290 +0,0 @@
|
||||
:host {
|
||||
--size: 25rem;
|
||||
--spacing: var(--wa-space-l);
|
||||
--show-duration: 200ms;
|
||||
--hide-duration: 200ms;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host([open]) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.drawer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
border: none;
|
||||
box-shadow: var(--wa-shadow-l);
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
animation-duration: var(--show-duration);
|
||||
animation-timing-function: ease;
|
||||
|
||||
&.show::backdrop {
|
||||
animation: show-backdrop var(--show-duration, 200ms) ease;
|
||||
}
|
||||
|
||||
&.hide::backdrop {
|
||||
animation: show-backdrop var(--hide-duration, 200ms) ease reverse;
|
||||
}
|
||||
|
||||
&.show.top {
|
||||
animation: show-drawer-from-top var(--show-duration) ease;
|
||||
}
|
||||
|
||||
&.hide.top {
|
||||
animation: show-drawer-from-top var(--hide-duration) ease reverse;
|
||||
}
|
||||
|
||||
&.show.end {
|
||||
animation: show-drawer-from-end var(--show-duration) ease;
|
||||
|
||||
&:dir(rtl) {
|
||||
animation-name: show-drawer-from-start;
|
||||
}
|
||||
}
|
||||
|
||||
&.hide.end {
|
||||
animation: show-drawer-from-end var(--hide-duration) ease reverse;
|
||||
|
||||
&:dir(rtl) {
|
||||
animation-name: show-drawer-from-start;
|
||||
}
|
||||
}
|
||||
|
||||
&.show.bottom {
|
||||
animation: show-drawer-from-bottom var(--show-duration) ease;
|
||||
}
|
||||
|
||||
&.hide.bottom {
|
||||
animation: show-drawer-from-bottom var(--hide-duration) ease reverse;
|
||||
}
|
||||
|
||||
&.show.start {
|
||||
animation: show-drawer-from-start var(--show-duration) ease;
|
||||
|
||||
&:dir(rtl) {
|
||||
animation-name: show-drawer-from-end;
|
||||
}
|
||||
}
|
||||
|
||||
&.hide.start {
|
||||
animation: show-drawer-from-start var(--hide-duration) ease reverse;
|
||||
|
||||
&:dir(rtl) {
|
||||
animation-name: show-drawer-from-end;
|
||||
}
|
||||
}
|
||||
|
||||
&.pulse {
|
||||
animation: pulse 250ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.top {
|
||||
top: 0;
|
||||
inset-inline-end: auto;
|
||||
bottom: auto;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: var(--size);
|
||||
}
|
||||
|
||||
.end {
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: auto;
|
||||
inset-inline-start: auto;
|
||||
width: var(--size);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
top: auto;
|
||||
inset-inline-end: auto;
|
||||
bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: var(--size);
|
||||
}
|
||||
|
||||
.start {
|
||||
top: 0;
|
||||
inset-inline-end: auto;
|
||||
bottom: auto;
|
||||
inset-inline-start: 0;
|
||||
width: var(--size);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-inline-start: var(--spacing);
|
||||
padding-block-end: 0;
|
||||
|
||||
/* Subtract the close button's padding so that the X is visually aligned with the edges of the dialog content */
|
||||
padding-inline-end: calc(var(--spacing) - var(--wa-form-control-padding-block));
|
||||
padding-block-start: calc(var(--spacing) - var(--wa-form-control-padding-block));
|
||||
}
|
||||
|
||||
.title {
|
||||
align-self: center;
|
||||
flex: 1 1 auto;
|
||||
font: inherit;
|
||||
font-size: var(--wa-font-size-l);
|
||||
font-weight: var(--wa-font-weight-heading);
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
align-self: start;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: end;
|
||||
gap: var(--wa-space-2xs);
|
||||
padding-inline-start: var(--spacing);
|
||||
}
|
||||
|
||||
.header-actions wa-button,
|
||||
.header-actions ::slotted(wa-button) {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
padding: var(--spacing);
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--wa-space-xs);
|
||||
justify-content: end;
|
||||
padding: var(--spacing);
|
||||
padding-block-start: 0;
|
||||
}
|
||||
|
||||
.footer ::slotted(wa-button:not(:last-of-type)) {
|
||||
margin-inline-end: var(--wa-spacing-xs);
|
||||
}
|
||||
|
||||
.drawer::backdrop {
|
||||
/*
|
||||
NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can
|
||||
remove the fallback values here.
|
||||
*/
|
||||
background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
scale: 1;
|
||||
}
|
||||
50% {
|
||||
scale: 1.01;
|
||||
}
|
||||
100% {
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-drawer {
|
||||
from {
|
||||
opacity: 0;
|
||||
scale: 0.8;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-drawer-from-top {
|
||||
from {
|
||||
opacity: 0;
|
||||
translate: 0 -100%;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-drawer-from-end {
|
||||
from {
|
||||
opacity: 0;
|
||||
translate: 100%;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-drawer-from-bottom {
|
||||
from {
|
||||
opacity: 0;
|
||||
translate: 0 100%;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-drawer-from-start {
|
||||
from {
|
||||
opacity: 0;
|
||||
translate: -100% 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-backdrop {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.drawer {
|
||||
border: solid 1px white;
|
||||
}
|
||||
}
|
||||
294
packages/webawesome/src/components/drawer/drawer.styles.ts
Normal file
294
packages/webawesome/src/components/drawer/drawer.styles.ts
Normal file
@@ -0,0 +1,294 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--size: 25rem;
|
||||
--spacing: var(--wa-space-l);
|
||||
--show-duration: 200ms;
|
||||
--hide-duration: 200ms;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host([open]) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.drawer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
border: none;
|
||||
box-shadow: var(--wa-shadow-l);
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
animation-duration: var(--show-duration);
|
||||
animation-timing-function: ease;
|
||||
|
||||
&.show::backdrop {
|
||||
animation: show-backdrop var(--show-duration, 200ms) ease;
|
||||
}
|
||||
|
||||
&.hide::backdrop {
|
||||
animation: show-backdrop var(--hide-duration, 200ms) ease reverse;
|
||||
}
|
||||
|
||||
&.show.top {
|
||||
animation: show-drawer-from-top var(--show-duration) ease;
|
||||
}
|
||||
|
||||
&.hide.top {
|
||||
animation: show-drawer-from-top var(--hide-duration) ease reverse;
|
||||
}
|
||||
|
||||
&.show.end {
|
||||
animation: show-drawer-from-end var(--show-duration) ease;
|
||||
|
||||
&:dir(rtl) {
|
||||
animation-name: show-drawer-from-start;
|
||||
}
|
||||
}
|
||||
|
||||
&.hide.end {
|
||||
animation: show-drawer-from-end var(--hide-duration) ease reverse;
|
||||
|
||||
&:dir(rtl) {
|
||||
animation-name: show-drawer-from-start;
|
||||
}
|
||||
}
|
||||
|
||||
&.show.bottom {
|
||||
animation: show-drawer-from-bottom var(--show-duration) ease;
|
||||
}
|
||||
|
||||
&.hide.bottom {
|
||||
animation: show-drawer-from-bottom var(--hide-duration) ease reverse;
|
||||
}
|
||||
|
||||
&.show.start {
|
||||
animation: show-drawer-from-start var(--show-duration) ease;
|
||||
|
||||
&:dir(rtl) {
|
||||
animation-name: show-drawer-from-end;
|
||||
}
|
||||
}
|
||||
|
||||
&.hide.start {
|
||||
animation: show-drawer-from-start var(--hide-duration) ease reverse;
|
||||
|
||||
&:dir(rtl) {
|
||||
animation-name: show-drawer-from-end;
|
||||
}
|
||||
}
|
||||
|
||||
&.pulse {
|
||||
animation: pulse 250ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.top {
|
||||
top: 0;
|
||||
inset-inline-end: auto;
|
||||
bottom: auto;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: var(--size);
|
||||
}
|
||||
|
||||
.end {
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: auto;
|
||||
inset-inline-start: auto;
|
||||
width: var(--size);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
top: auto;
|
||||
inset-inline-end: auto;
|
||||
bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: var(--size);
|
||||
}
|
||||
|
||||
.start {
|
||||
top: 0;
|
||||
inset-inline-end: auto;
|
||||
bottom: auto;
|
||||
inset-inline-start: 0;
|
||||
width: var(--size);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-inline-start: var(--spacing);
|
||||
padding-block-end: 0;
|
||||
|
||||
/* Subtract the close button's padding so that the X is visually aligned with the edges of the dialog content */
|
||||
padding-inline-end: calc(var(--spacing) - var(--wa-form-control-padding-block));
|
||||
padding-block-start: calc(var(--spacing) - var(--wa-form-control-padding-block));
|
||||
}
|
||||
|
||||
.title {
|
||||
align-self: center;
|
||||
flex: 1 1 auto;
|
||||
font: inherit;
|
||||
font-size: var(--wa-font-size-l);
|
||||
font-weight: var(--wa-font-weight-heading);
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
align-self: start;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: end;
|
||||
gap: var(--wa-space-2xs);
|
||||
padding-inline-start: var(--spacing);
|
||||
}
|
||||
|
||||
.header-actions wa-button,
|
||||
.header-actions ::slotted(wa-button) {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
padding: var(--spacing);
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--wa-space-xs);
|
||||
justify-content: end;
|
||||
padding: var(--spacing);
|
||||
padding-block-start: 0;
|
||||
}
|
||||
|
||||
.footer ::slotted(wa-button:not(:last-of-type)) {
|
||||
margin-inline-end: var(--wa-spacing-xs);
|
||||
}
|
||||
|
||||
.drawer::backdrop {
|
||||
/*
|
||||
NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can
|
||||
remove the fallback values here.
|
||||
*/
|
||||
background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
scale: 1;
|
||||
}
|
||||
50% {
|
||||
scale: 1.01;
|
||||
}
|
||||
100% {
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-drawer {
|
||||
from {
|
||||
opacity: 0;
|
||||
scale: 0.8;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-drawer-from-top {
|
||||
from {
|
||||
opacity: 0;
|
||||
translate: 0 -100%;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-drawer-from-end {
|
||||
from {
|
||||
opacity: 0;
|
||||
translate: 100%;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-drawer-from-bottom {
|
||||
from {
|
||||
opacity: 0;
|
||||
translate: 0 100%;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-drawer-from-start {
|
||||
from {
|
||||
opacity: 0;
|
||||
translate: -100% 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
translate: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-backdrop {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.drawer {
|
||||
border: solid 1px white;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -13,7 +13,7 @@ import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import '../button/button.js';
|
||||
import styles from './drawer.css';
|
||||
import styles from './drawer.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Drawers slide in from a container to expose additional options and information.
|
||||
|
||||
@@ -1,227 +0,0 @@
|
||||
:host {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
isolation: isolate;
|
||||
color: var(--wa-color-text-normal);
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
var(--wa-transition-fast) background-color var(--wa-transition-easing),
|
||||
var(--wa-transition-fast) color var(--wa-transition-easing);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
:host(:hover:not(:state(disabled))) {
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
}
|
||||
}
|
||||
|
||||
:host(:focus-visible) {
|
||||
z-index: 1;
|
||||
outline: var(--wa-focus-ring);
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
}
|
||||
|
||||
:host(:state(disabled)) {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Danger variant */
|
||||
:host([variant='danger']),
|
||||
:host([variant='danger']) #details {
|
||||
color: var(--wa-color-danger-on-quiet);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
:host([variant='danger']:hover) {
|
||||
background-color: var(--wa-color-danger-fill-normal);
|
||||
color: var(--wa-color-danger-on-normal);
|
||||
}
|
||||
}
|
||||
|
||||
:host([variant='danger']:focus-visible) {
|
||||
background-color: var(--wa-color-danger-fill-normal);
|
||||
color: var(--wa-color-danger-on-normal);
|
||||
}
|
||||
|
||||
:host([checkbox-adjacent]) {
|
||||
padding-inline-start: 2em;
|
||||
}
|
||||
|
||||
/* Only add padding when item actually has a submenu */
|
||||
:host([submenu-adjacent]:not(:state(has-submenu))) #details {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
:host(:state(has-submenu)[submenu-adjacent]) #details {
|
||||
padding-inline-end: 1.75em;
|
||||
}
|
||||
|
||||
#check {
|
||||
visibility: hidden;
|
||||
margin-inline-start: -1.5em;
|
||||
margin-inline-end: 0.5em;
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
}
|
||||
|
||||
:host(:state(checked)) #check {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#icon ::slotted(*) {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
margin-inline-end: 0.75em !important;
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
}
|
||||
|
||||
#label {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#details {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
color: var(--wa-color-text-quiet);
|
||||
font-size: var(--wa-font-size-smaller) !important;
|
||||
}
|
||||
|
||||
#details ::slotted(*) {
|
||||
margin-inline-start: 2em !important;
|
||||
}
|
||||
|
||||
/* Submenu indicator icon */
|
||||
#submenu-indicator {
|
||||
position: absolute;
|
||||
inset-inline-end: 1em;
|
||||
color: var(--wa-color-neutral-on-quiet);
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
}
|
||||
|
||||
/* Flip chevron icon when RTL */
|
||||
:host(:dir(rtl)) #submenu-indicator {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
/* Submenu styles */
|
||||
#submenu {
|
||||
display: flex;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
width: max-content;
|
||||
margin: 0;
|
||||
padding: 0.25em;
|
||||
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
box-shadow: var(--wa-shadow-m);
|
||||
color: var(--wa-color-text-normal);
|
||||
text-align: start;
|
||||
user-select: none;
|
||||
|
||||
/* Override default popover styles */
|
||||
&[popover] {
|
||||
margin: 0;
|
||||
inset: auto;
|
||||
padding: 0.25em;
|
||||
overflow: visible;
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
&.show {
|
||||
animation: submenu-show var(--show-duration, 50ms) ease;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
animation: submenu-show var(--show-duration, 50ms) ease reverse;
|
||||
}
|
||||
|
||||
/* Submenu placement transform origins */
|
||||
&[data-placement^='top'] {
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
&[data-placement^='bottom'] {
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
&[data-placement^='left'] {
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
&[data-placement^='right'] {
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
&[data-placement='left-start'] {
|
||||
transform-origin: right top;
|
||||
}
|
||||
|
||||
&[data-placement='left-end'] {
|
||||
transform-origin: right bottom;
|
||||
}
|
||||
|
||||
&[data-placement='right-start'] {
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
&[data-placement='right-end'] {
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
|
||||
/* Safe triangle styling */
|
||||
&::before {
|
||||
display: none;
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
content: '';
|
||||
clip-path: polygon(
|
||||
var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
|
||||
var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
|
||||
var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
|
||||
);
|
||||
pointer-events: auto; /* Enable mouse events on the triangle */
|
||||
}
|
||||
|
||||
&[data-visible]::before {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
::slotted(wa-dropdown-item) {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
::slotted(wa-divider) {
|
||||
--spacing: 0.25em;
|
||||
}
|
||||
|
||||
@keyframes submenu-show {
|
||||
from {
|
||||
scale: 0.9;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
scale: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,231 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
isolation: isolate;
|
||||
color: var(--wa-color-text-normal);
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
var(--wa-transition-fast) background-color var(--wa-transition-easing),
|
||||
var(--wa-transition-fast) color var(--wa-transition-easing);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
:host(:hover:not(:state(disabled))) {
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
}
|
||||
}
|
||||
|
||||
:host(:focus-visible) {
|
||||
z-index: 1;
|
||||
outline: var(--wa-focus-ring);
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
}
|
||||
|
||||
:host(:state(disabled)) {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Danger variant */
|
||||
:host([variant='danger']),
|
||||
:host([variant='danger']) #details {
|
||||
color: var(--wa-color-danger-on-quiet);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
:host([variant='danger']:hover) {
|
||||
background-color: var(--wa-color-danger-fill-normal);
|
||||
color: var(--wa-color-danger-on-normal);
|
||||
}
|
||||
}
|
||||
|
||||
:host([variant='danger']:focus-visible) {
|
||||
background-color: var(--wa-color-danger-fill-normal);
|
||||
color: var(--wa-color-danger-on-normal);
|
||||
}
|
||||
|
||||
:host([checkbox-adjacent]) {
|
||||
padding-inline-start: 2em;
|
||||
}
|
||||
|
||||
/* Only add padding when item actually has a submenu */
|
||||
:host([submenu-adjacent]:not(:state(has-submenu))) #details {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
:host(:state(has-submenu)[submenu-adjacent]) #details {
|
||||
padding-inline-end: 1.75em;
|
||||
}
|
||||
|
||||
#check {
|
||||
visibility: hidden;
|
||||
margin-inline-start: -1.5em;
|
||||
margin-inline-end: 0.5em;
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
}
|
||||
|
||||
:host(:state(checked)) #check {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#icon ::slotted(*) {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
margin-inline-end: 0.75em !important;
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
}
|
||||
|
||||
#label {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#details {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
color: var(--wa-color-text-quiet);
|
||||
font-size: var(--wa-font-size-smaller) !important;
|
||||
}
|
||||
|
||||
#details ::slotted(*) {
|
||||
margin-inline-start: 2em !important;
|
||||
}
|
||||
|
||||
/* Submenu indicator icon */
|
||||
#submenu-indicator {
|
||||
position: absolute;
|
||||
inset-inline-end: 1em;
|
||||
color: var(--wa-color-neutral-on-quiet);
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
}
|
||||
|
||||
/* Flip chevron icon when RTL */
|
||||
:host(:dir(rtl)) #submenu-indicator {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
/* Submenu styles */
|
||||
#submenu {
|
||||
display: flex;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
width: max-content;
|
||||
margin: 0;
|
||||
padding: 0.25em;
|
||||
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
box-shadow: var(--wa-shadow-m);
|
||||
color: var(--wa-color-text-normal);
|
||||
text-align: start;
|
||||
user-select: none;
|
||||
|
||||
/* Override default popover styles */
|
||||
&[popover] {
|
||||
margin: 0;
|
||||
inset: auto;
|
||||
padding: 0.25em;
|
||||
overflow: visible;
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
&.show {
|
||||
animation: submenu-show var(--show-duration, 50ms) ease;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
animation: submenu-show var(--show-duration, 50ms) ease reverse;
|
||||
}
|
||||
|
||||
/* Submenu placement transform origins */
|
||||
&[data-placement^='top'] {
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
&[data-placement^='bottom'] {
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
&[data-placement^='left'] {
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
&[data-placement^='right'] {
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
&[data-placement='left-start'] {
|
||||
transform-origin: right top;
|
||||
}
|
||||
|
||||
&[data-placement='left-end'] {
|
||||
transform-origin: right bottom;
|
||||
}
|
||||
|
||||
&[data-placement='right-start'] {
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
&[data-placement='right-end'] {
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
|
||||
/* Safe triangle styling */
|
||||
&::before {
|
||||
display: none;
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
content: '';
|
||||
clip-path: polygon(
|
||||
var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
|
||||
var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
|
||||
var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
|
||||
);
|
||||
pointer-events: auto; /* Enable mouse events on the triangle */
|
||||
}
|
||||
|
||||
&[data-visible]::before {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
::slotted(wa-dropdown-item) {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
::slotted(wa-divider) {
|
||||
--spacing: 0.25em;
|
||||
}
|
||||
|
||||
@keyframes submenu-show {
|
||||
from {
|
||||
scale: 0.9;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
scale: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -5,7 +5,7 @@ import { animateWithClass } from '../../internal/animate.js';
|
||||
import { HasSlotController } from '../../internal/slot.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import '../icon/icon.js';
|
||||
import styles from './dropdown-item.css';
|
||||
import styles from './dropdown-item.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Represents an individual item within a dropdown menu, supporting standard items, checkboxes, and submenus.
|
||||
|
||||
@@ -1,93 +0,0 @@
|
||||
:host {
|
||||
--show-duration: 50ms;
|
||||
--hide-duration: 50ms;
|
||||
display: contents;
|
||||
}
|
||||
|
||||
#menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: max-content;
|
||||
margin: 0;
|
||||
padding: 0.25em;
|
||||
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
box-shadow: var(--wa-shadow-m);
|
||||
color: var(--wa-color-text-normal);
|
||||
text-align: start;
|
||||
user-select: none;
|
||||
overflow: auto;
|
||||
max-width: var(--auto-size-available-width) !important;
|
||||
max-height: var(--auto-size-available-height) !important;
|
||||
|
||||
&.show {
|
||||
animation: show var(--show-duration) ease;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
animation: show var(--hide-duration) ease reverse;
|
||||
}
|
||||
|
||||
::slotted(h1),
|
||||
::slotted(h2),
|
||||
::slotted(h3),
|
||||
::slotted(h4),
|
||||
::slotted(h5),
|
||||
::slotted(h6) {
|
||||
display: block !important;
|
||||
margin: 0.25em 0 !important;
|
||||
padding: 0.25em 0.75em !important;
|
||||
color: var(--wa-color-text-quiet) !important;
|
||||
font-family: var(--wa-font-family-body) !important;
|
||||
font-weight: var(--wa-font-weight-semibold) !important;
|
||||
font-size: var(--wa-font-size-smaller) !important;
|
||||
}
|
||||
|
||||
::slotted(wa-divider) {
|
||||
--spacing: 0.25em; /* Component-specific, left as-is */
|
||||
}
|
||||
}
|
||||
|
||||
wa-popup[data-current-placement^='top'] #menu {
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
wa-popup[data-current-placement^='bottom'] #menu {
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
wa-popup[data-current-placement^='left'] #menu {
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
wa-popup[data-current-placement^='right'] #menu {
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
wa-popup[data-current-placement='left-start'] #menu {
|
||||
transform-origin: right top;
|
||||
}
|
||||
|
||||
wa-popup[data-current-placement='left-end'] #menu {
|
||||
transform-origin: right bottom;
|
||||
}
|
||||
|
||||
wa-popup[data-current-placement='right-start'] #menu {
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
wa-popup[data-current-placement='right-end'] #menu {
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
from {
|
||||
scale: 0.9;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
scale: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--show-duration: 50ms;
|
||||
--hide-duration: 50ms;
|
||||
display: contents;
|
||||
}
|
||||
|
||||
#menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: max-content;
|
||||
margin: 0;
|
||||
padding: 0.25em;
|
||||
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
box-shadow: var(--wa-shadow-m);
|
||||
color: var(--wa-color-text-normal);
|
||||
text-align: start;
|
||||
user-select: none;
|
||||
overflow: auto;
|
||||
max-width: var(--auto-size-available-width) !important;
|
||||
max-height: var(--auto-size-available-height) !important;
|
||||
|
||||
&.show {
|
||||
animation: show var(--show-duration) ease;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
animation: show var(--hide-duration) ease reverse;
|
||||
}
|
||||
|
||||
::slotted(h1),
|
||||
::slotted(h2),
|
||||
::slotted(h3),
|
||||
::slotted(h4),
|
||||
::slotted(h5),
|
||||
::slotted(h6) {
|
||||
display: block !important;
|
||||
margin: 0.25em 0 !important;
|
||||
padding: 0.25em 0.75em !important;
|
||||
color: var(--wa-color-text-quiet) !important;
|
||||
font-family: var(--wa-font-family-body) !important;
|
||||
font-weight: var(--wa-font-weight-semibold) !important;
|
||||
font-size: var(--wa-font-size-smaller) !important;
|
||||
}
|
||||
|
||||
::slotted(wa-divider) {
|
||||
--spacing: 0.25em; /* Component-specific, left as-is */
|
||||
}
|
||||
}
|
||||
|
||||
wa-popup[data-current-placement^='top'] #menu {
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
wa-popup[data-current-placement^='bottom'] #menu {
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
wa-popup[data-current-placement^='left'] #menu {
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
wa-popup[data-current-placement^='right'] #menu {
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
wa-popup[data-current-placement='left-start'] #menu {
|
||||
transform-origin: right top;
|
||||
}
|
||||
|
||||
wa-popup[data-current-placement='left-end'] #menu {
|
||||
transform-origin: right bottom;
|
||||
}
|
||||
|
||||
wa-popup[data-current-placement='right-start'] #menu {
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
wa-popup[data-current-placement='right-end'] #menu {
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
from {
|
||||
scale: 0.9;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
scale: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -12,13 +12,13 @@ import { activeElements } from '../../internal/active-elements.js';
|
||||
import { animateWithClass } from '../../internal/animate.js';
|
||||
import { uniqueId } from '../../internal/math.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import sizeStyles from '../../styles/component/size.styles.js';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import type WaButton from '../button/button.js';
|
||||
import '../dropdown-item/dropdown-item.js';
|
||||
import type WaDropdownItem from '../dropdown-item/dropdown-item.js';
|
||||
import WaPopup from '../popup/popup.js'; // Added import for wa-popup
|
||||
import styles from './dropdown.css';
|
||||
import styles from './dropdown.styles.js';
|
||||
|
||||
const openDropdowns = new Set<WaDropdown>();
|
||||
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
:host {
|
||||
--primary-color: currentColor;
|
||||
--primary-opacity: 1;
|
||||
--secondary-color: currentColor;
|
||||
--secondary-opacity: 0.4;
|
||||
|
||||
box-sizing: content-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
|
||||
/* Standard */
|
||||
:host(:not([auto-width])) {
|
||||
width: 1.25em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
/* Auto-width */
|
||||
:host([auto-width]) {
|
||||
width: auto;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 1em;
|
||||
overflow: visible;
|
||||
|
||||
/* Duotone colors with path-specific opacity fallback */
|
||||
path[data-duotone-primary] {
|
||||
color: var(--primary-color);
|
||||
opacity: var(--path-opacity, var(--primary-opacity));
|
||||
}
|
||||
|
||||
path[data-duotone-secondary] {
|
||||
color: var(--secondary-color);
|
||||
opacity: var(--path-opacity, var(--secondary-opacity));
|
||||
}
|
||||
}
|
||||
44
packages/webawesome/src/components/icon/icon.styles.ts
Normal file
44
packages/webawesome/src/components/icon/icon.styles.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--primary-color: currentColor;
|
||||
--primary-opacity: 1;
|
||||
--secondary-color: currentColor;
|
||||
--secondary-opacity: 0.4;
|
||||
|
||||
box-sizing: content-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
|
||||
/* Standard */
|
||||
:host(:not([auto-width])) {
|
||||
width: 1.25em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
/* Auto-width */
|
||||
:host([auto-width]) {
|
||||
width: auto;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 1em;
|
||||
overflow: visible;
|
||||
|
||||
/* Duotone colors with path-specific opacity fallback */
|
||||
path[data-duotone-primary] {
|
||||
color: var(--primary-color);
|
||||
opacity: var(--path-opacity, var(--primary-opacity));
|
||||
}
|
||||
|
||||
path[data-duotone-secondary] {
|
||||
color: var(--secondary-color);
|
||||
opacity: var(--path-opacity, var(--secondary-opacity));
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -5,7 +5,7 @@ import { WaErrorEvent } from '../../events/error.js';
|
||||
import { WaLoadEvent } from '../../events/load.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import styles from './icon.css';
|
||||
import styles from './icon.styles.js';
|
||||
import { getDefaultIconFamily, getIconLibrary, unwatchIcon, watchIcon, type IconLibrary } from './library.js';
|
||||
|
||||
import type { HTMLTemplateResult, PropertyValues } from 'lit';
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
@@ -4,7 +4,7 @@ import { WaIncludeErrorEvent } from '../../events/include-error.js';
|
||||
import { WaLoadEvent } from '../../events/load.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import styles from './include.css';
|
||||
import styles from './include.styles.js';
|
||||
import { requestInclude } from './request.js';
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,227 +0,0 @@
|
||||
:host {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.text-field {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: start;
|
||||
position: relative;
|
||||
transition: inherit;
|
||||
height: var(--wa-form-control-height);
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
border-radius: var(--wa-form-control-border-radius);
|
||||
border-style: var(--wa-form-control-border-style);
|
||||
border-width: var(--wa-form-control-border-width);
|
||||
cursor: text;
|
||||
color: var(--wa-form-control-value-color);
|
||||
font-size: var(--wa-form-control-value-font-size);
|
||||
font-family: inherit;
|
||||
font-weight: var(--wa-form-control-value-font-weight);
|
||||
line-height: var(--wa-form-control-value-line-height);
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
transition:
|
||||
background-color var(--wa-transition-normal),
|
||||
border var(--wa-transition-normal),
|
||||
outline var(--wa-transition-fast);
|
||||
transition-timing-function: var(--wa-transition-easing);
|
||||
background-color: var(--wa-form-control-background-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
padding: 0 var(--wa-form-control-padding-inline);
|
||||
|
||||
&:focus-within {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
/* Style disabled inputs */
|
||||
&:has(:disabled) {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Appearance modifiers */
|
||||
:host([appearance='outlined']) .text-field {
|
||||
background-color: var(--wa-form-control-background-color);
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
}
|
||||
|
||||
:host([appearance='filled']) .text-field {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
|
||||
:host([appearance='filled-outlined']) .text-field {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
}
|
||||
|
||||
:host([pill]) .text-field {
|
||||
border-radius: var(--wa-border-radius-pill) !important;
|
||||
}
|
||||
|
||||
.text-field {
|
||||
/* Show autofill styles over the entire text field, not just the native <input> */
|
||||
&:has(:autofill),
|
||||
&:has(:-webkit-autofill) {
|
||||
background-color: var(--wa-color-brand-fill-quiet) !important;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
/*
|
||||
Fixes an alignment issue with placeholders.
|
||||
https://github.com/shoelace-style/webawesome/issues/342
|
||||
*/
|
||||
height: 100%;
|
||||
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
cursor: inherit;
|
||||
-webkit-appearance: none;
|
||||
font: inherit;
|
||||
|
||||
/* Turn off Safari's autofill styles */
|
||||
&:-webkit-autofill,
|
||||
&:-webkit-autofill:hover,
|
||||
&:-webkit-autofill:focus,
|
||||
&:-webkit-autofill:active {
|
||||
-webkit-background-clip: text;
|
||||
background-color: transparent;
|
||||
-webkit-text-fill-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
transition: inherit;
|
||||
|
||||
/* prettier-ignore */
|
||||
background-color: rgb(118 118 118 / 0); /* ensures proper placeholder styles in webkit's date input */
|
||||
height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
|
||||
padding-block: 0;
|
||||
color: inherit;
|
||||
|
||||
&:autofill {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
caret-color: var(--wa-form-control-value-color);
|
||||
}
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--wa-form-control-placeholder-color);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
&::-webkit-search-decoration,
|
||||
&::-webkit-search-cancel-button,
|
||||
&::-webkit-search-results-button,
|
||||
&::-webkit-search-results-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
&:autofill {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
caret-color: var(--wa-form-control-value-color);
|
||||
}
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--wa-form-control-placeholder-color);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.start,
|
||||
.end {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
cursor: default;
|
||||
|
||||
&::slotted(wa-icon) {
|
||||
color: var(--wa-color-neutral-on-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
.start::slotted(*) {
|
||||
margin-inline-end: var(--wa-form-control-padding-inline);
|
||||
}
|
||||
|
||||
.end::slotted(*) {
|
||||
margin-inline-start: var(--wa-form-control-padding-inline);
|
||||
}
|
||||
|
||||
/*
|
||||
* Clearable + Password Toggle
|
||||
*/
|
||||
|
||||
.clear,
|
||||
.password-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: inherit;
|
||||
color: var(--wa-color-neutral-on-quiet);
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
transition: var(--wa-transition-normal) color;
|
||||
cursor: pointer;
|
||||
margin-inline-start: var(--wa-form-control-padding-inline);
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Don't show the browser's password toggle in Edge */
|
||||
::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide the built-in number spinner */
|
||||
:host([without-spin-buttons]) input[type='number'] {
|
||||
-moz-appearance: textfield;
|
||||
|
||||
&::-webkit-outer-spin-button,
|
||||
&::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
231
packages/webawesome/src/components/input/input.styles.ts
Normal file
231
packages/webawesome/src/components/input/input.styles.ts
Normal file
@@ -0,0 +1,231 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.text-field {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: start;
|
||||
position: relative;
|
||||
transition: inherit;
|
||||
height: var(--wa-form-control-height);
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
border-radius: var(--wa-form-control-border-radius);
|
||||
border-style: var(--wa-form-control-border-style);
|
||||
border-width: var(--wa-form-control-border-width);
|
||||
cursor: text;
|
||||
color: var(--wa-form-control-value-color);
|
||||
font-size: var(--wa-form-control-value-font-size);
|
||||
font-family: inherit;
|
||||
font-weight: var(--wa-form-control-value-font-weight);
|
||||
line-height: var(--wa-form-control-value-line-height);
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
transition:
|
||||
background-color var(--wa-transition-normal),
|
||||
border var(--wa-transition-normal),
|
||||
outline var(--wa-transition-fast);
|
||||
transition-timing-function: var(--wa-transition-easing);
|
||||
background-color: var(--wa-form-control-background-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
padding: 0 var(--wa-form-control-padding-inline);
|
||||
|
||||
&:focus-within {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
/* Style disabled inputs */
|
||||
&:has(:disabled) {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Appearance modifiers */
|
||||
:host([appearance='outlined']) .text-field {
|
||||
background-color: var(--wa-form-control-background-color);
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
}
|
||||
|
||||
:host([appearance='filled']) .text-field {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
|
||||
:host([appearance='filled-outlined']) .text-field {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
}
|
||||
|
||||
:host([pill]) .text-field {
|
||||
border-radius: var(--wa-border-radius-pill) !important;
|
||||
}
|
||||
|
||||
.text-field {
|
||||
/* Show autofill styles over the entire text field, not just the native <input> */
|
||||
&:has(:autofill),
|
||||
&:has(:-webkit-autofill) {
|
||||
background-color: var(--wa-color-brand-fill-quiet) !important;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
/*
|
||||
Fixes an alignment issue with placeholders.
|
||||
https://github.com/shoelace-style/webawesome/issues/342
|
||||
*/
|
||||
height: 100%;
|
||||
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
cursor: inherit;
|
||||
-webkit-appearance: none;
|
||||
font: inherit;
|
||||
|
||||
/* Turn off Safari's autofill styles */
|
||||
&:-webkit-autofill,
|
||||
&:-webkit-autofill:hover,
|
||||
&:-webkit-autofill:focus,
|
||||
&:-webkit-autofill:active {
|
||||
-webkit-background-clip: text;
|
||||
background-color: transparent;
|
||||
-webkit-text-fill-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
transition: inherit;
|
||||
|
||||
/* prettier-ignore */
|
||||
background-color: rgb(118 118 118 / 0); /* ensures proper placeholder styles in webkit's date input */
|
||||
height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
|
||||
padding-block: 0;
|
||||
color: inherit;
|
||||
|
||||
&:autofill {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
caret-color: var(--wa-form-control-value-color);
|
||||
}
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--wa-form-control-placeholder-color);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
&::-webkit-search-decoration,
|
||||
&::-webkit-search-cancel-button,
|
||||
&::-webkit-search-results-button,
|
||||
&::-webkit-search-results-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
&:autofill {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
caret-color: var(--wa-form-control-value-color);
|
||||
}
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--wa-form-control-placeholder-color);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.start,
|
||||
.end {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
cursor: default;
|
||||
|
||||
&::slotted(wa-icon) {
|
||||
color: var(--wa-color-neutral-on-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
.start::slotted(*) {
|
||||
margin-inline-end: var(--wa-form-control-padding-inline);
|
||||
}
|
||||
|
||||
.end::slotted(*) {
|
||||
margin-inline-start: var(--wa-form-control-padding-inline);
|
||||
}
|
||||
|
||||
/*
|
||||
* Clearable + Password Toggle
|
||||
*/
|
||||
|
||||
.clear,
|
||||
.password-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: inherit;
|
||||
color: var(--wa-color-neutral-on-quiet);
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
transition: var(--wa-transition-normal) color;
|
||||
cursor: pointer;
|
||||
margin-inline-start: var(--wa-form-control-padding-inline);
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Don't show the browser's password toggle in Edge */
|
||||
::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide the built-in number spinner */
|
||||
:host([without-spin-buttons]) input[type='number'] {
|
||||
-moz-appearance: textfield;
|
||||
|
||||
&::-webkit-outer-spin-button,
|
||||
&::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -9,11 +9,11 @@ import { submitOnEnter } from '../../internal/submit-on-enter.js';
|
||||
import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
|
||||
import formControlStyles from '../../styles/component/form-control.css';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import formControlStyles from '../../styles/component/form-control.styles.js';
|
||||
import sizeStyles from '../../styles/component/size.styles.js';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import '../icon/icon.js';
|
||||
import styles from './input.css';
|
||||
import styles from './input.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Inputs collect data from the user.
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
display: contents;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
display: contents;
|
||||
}
|
||||
`;
|
||||
@@ -5,7 +5,7 @@ import { clamp } from '../../internal/math.js';
|
||||
import { parseSpaceDelimitedTokens } from '../../internal/parse.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import styles from './intersection-observer.css';
|
||||
import styles from './intersection-observer.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Tracks immediate child elements and fires events as they move in and out of view.
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
:host {
|
||||
display: contents;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
display: contents;
|
||||
}
|
||||
`;
|
||||
@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
|
||||
import { WaMutationEvent } from '../../events/mutation.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import styles from './mutation-observer.css';
|
||||
import styles from './mutation-observer.styles.js';
|
||||
|
||||
/**
|
||||
* @summary The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
|
||||
|
||||
@@ -1,80 +0,0 @@
|
||||
:host {
|
||||
display: block;
|
||||
color: var(--wa-color-text-normal);
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font: inherit;
|
||||
padding: 0.5em 1em 0.5em 0.25em;
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
transition: fill var(--wa-transition-normal) var(--wa-transition-easing);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:host(:focus) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
:host(:not([disabled], :state(current)):is(:state(hover), :hover)) {
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
color: var(--wa-color-neutral-on-normal);
|
||||
}
|
||||
}
|
||||
|
||||
:host(:state(current)),
|
||||
:host([disabled]:state(current)) {
|
||||
background-color: var(--wa-color-brand-fill-loud);
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:host([disabled]) {
|
||||
outline: none;
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 1 1 auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.check {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
visibility: hidden;
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
:host(:state(selected)) .check {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.start,
|
||||
.end {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.start::slotted(*) {
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
|
||||
.end::slotted(*) {
|
||||
margin-inline-start: 0.5em;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
:host(:hover:not([aria-disabled='true'])) {
|
||||
outline: dashed 1px SelectedItem;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
84
packages/webawesome/src/components/option/option.styles.ts
Normal file
84
packages/webawesome/src/components/option/option.styles.ts
Normal file
@@ -0,0 +1,84 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
display: block;
|
||||
color: var(--wa-color-text-normal);
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font: inherit;
|
||||
padding: 0.5em 1em 0.5em 0.25em;
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
transition: fill var(--wa-transition-normal) var(--wa-transition-easing);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:host(:focus) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
:host(:not([disabled], :state(current)):is(:state(hover), :hover)) {
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
color: var(--wa-color-neutral-on-normal);
|
||||
}
|
||||
}
|
||||
|
||||
:host(:state(current)),
|
||||
:host([disabled]:state(current)) {
|
||||
background-color: var(--wa-color-brand-fill-loud);
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:host([disabled]) {
|
||||
outline: none;
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 1 1 auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.check {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
visibility: hidden;
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
:host(:state(selected)) .check {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.start,
|
||||
.end {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.start::slotted(*) {
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
|
||||
.end::slotted(*) {
|
||||
margin-inline-start: 0.5em;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
:host(:hover:not([aria-disabled='true'])) {
|
||||
outline: dashed 1px SelectedItem;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -6,7 +6,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import '../icon/icon.js';
|
||||
import type WaSelect from '../select/select.js';
|
||||
import styles from './option.css';
|
||||
import styles from './option.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Options define the selectable items within a select component.
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
:host {
|
||||
--arrow-size: 0.375rem;
|
||||
--max-width: 25rem;
|
||||
--show-duration: 100ms;
|
||||
--hide-duration: 100ms;
|
||||
|
||||
/* Internal calculated properties */
|
||||
--arrow-diagonal-size: calc((var(--arrow-size) * sin(45deg)));
|
||||
|
||||
display: contents;
|
||||
|
||||
/** Defaults for inherited CSS properties */
|
||||
font-size: var(--wa-font-size-m);
|
||||
line-height: var(--wa-line-height-normal);
|
||||
text-align: start;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* The native dialog element */
|
||||
.dialog {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&[open] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* The <wa-popup> element */
|
||||
.popover {
|
||||
--arrow-size: inherit;
|
||||
--show-duration: inherit;
|
||||
--hide-duration: inherit;
|
||||
|
||||
pointer-events: auto;
|
||||
|
||||
&::part(arrow) {
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-bottom: solid var(--wa-panel-border-width) var(--wa-color-surface-border);
|
||||
border-right: solid var(--wa-panel-border-width) var(--wa-color-surface-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.popover[placement^='top']::part(popup) {
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
.popover[placement^='bottom']::part(popup) {
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
.popover[placement^='left']::part(popup) {
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
.popover[placement^='right']::part(popup) {
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: max-content;
|
||||
max-width: var(--max-width);
|
||||
padding: var(--wa-space-l);
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border: var(--wa-panel-border-width) solid var(--wa-color-surface-border);
|
||||
border-radius: var(--wa-panel-border-radius);
|
||||
border-style: var(--wa-panel-border-style);
|
||||
box-shadow: var(--wa-shadow-l);
|
||||
color: var(--wa-color-text-normal);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
95
packages/webawesome/src/components/popover/popover.styles.ts
Normal file
95
packages/webawesome/src/components/popover/popover.styles.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--arrow-size: 0.375rem;
|
||||
--max-width: 25rem;
|
||||
--show-duration: 100ms;
|
||||
--hide-duration: 100ms;
|
||||
|
||||
/* Internal calculated properties */
|
||||
--arrow-diagonal-size: calc((var(--arrow-size) * sin(45deg)));
|
||||
|
||||
display: contents;
|
||||
|
||||
/** Defaults for inherited CSS properties */
|
||||
font-size: var(--wa-font-size-m);
|
||||
line-height: var(--wa-line-height-normal);
|
||||
text-align: start;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* The native dialog element */
|
||||
.dialog {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&[open] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* The <wa-popup> element */
|
||||
.popover {
|
||||
--arrow-size: inherit;
|
||||
--show-duration: inherit;
|
||||
--hide-duration: inherit;
|
||||
|
||||
pointer-events: auto;
|
||||
|
||||
&::part(arrow) {
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-bottom: solid var(--wa-panel-border-width) var(--wa-color-surface-border);
|
||||
border-right: solid var(--wa-panel-border-width) var(--wa-color-surface-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.popover[placement^='top']::part(popup) {
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
.popover[placement^='bottom']::part(popup) {
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
.popover[placement^='left']::part(popup) {
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
.popover[placement^='right']::part(popup) {
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: max-content;
|
||||
max-width: var(--max-width);
|
||||
padding: var(--wa-space-l);
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border: var(--wa-panel-border-width) solid var(--wa-color-surface-border);
|
||||
border-radius: var(--wa-panel-border-radius);
|
||||
border-style: var(--wa-panel-border-style);
|
||||
box-shadow: var(--wa-shadow-l);
|
||||
color: var(--wa-color-text-normal);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
`;
|
||||
@@ -12,7 +12,7 @@ import { uniqueId } from '../../internal/math.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import WaPopup from '../popup/popup.js';
|
||||
import styles from './popover.css';
|
||||
import styles from './popover.styles.js';
|
||||
|
||||
const openPopovers = new Set<WaPopover>();
|
||||
|
||||
|
||||
@@ -1,121 +0,0 @@
|
||||
:host {
|
||||
--arrow-color: black;
|
||||
--arrow-size: var(--wa-tooltip-arrow-size);
|
||||
--show-duration: 100ms;
|
||||
--hide-duration: 100ms;
|
||||
|
||||
/*
|
||||
* These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant
|
||||
* 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.
|
||||
*/
|
||||
--arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
|
||||
--arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));
|
||||
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.popup {
|
||||
position: absolute;
|
||||
isolation: isolate;
|
||||
max-width: var(--auto-size-available-width, none);
|
||||
max-height: var(--auto-size-available-height, none);
|
||||
|
||||
/* Clear UA styles for [popover] */
|
||||
:where(&) {
|
||||
inset: unset;
|
||||
padding: unset;
|
||||
margin: unset;
|
||||
width: unset;
|
||||
height: unset;
|
||||
color: unset;
|
||||
background: unset;
|
||||
border: unset;
|
||||
overflow: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.popup:not(.popup-active) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
width: calc(var(--arrow-size-diagonal) * 2);
|
||||
height: calc(var(--arrow-size-diagonal) * 2);
|
||||
rotate: 45deg;
|
||||
background: var(--arrow-color);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
:host([data-current-placement~='left']) .arrow {
|
||||
rotate: -45deg;
|
||||
}
|
||||
|
||||
:host([data-current-placement~='right']) .arrow {
|
||||
rotate: 135deg;
|
||||
}
|
||||
|
||||
:host([data-current-placement~='bottom']) .arrow {
|
||||
rotate: 225deg;
|
||||
}
|
||||
|
||||
/* Hover bridge */
|
||||
.popup-hover-bridge:not(.popup-hover-bridge-visible) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popup-hover-bridge {
|
||||
position: fixed;
|
||||
z-index: 899;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
clip-path: polygon(
|
||||
var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
|
||||
var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
|
||||
var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0),
|
||||
var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
|
||||
);
|
||||
}
|
||||
|
||||
/* Built-in animations */
|
||||
.show {
|
||||
animation: show var(--show-duration) ease;
|
||||
}
|
||||
|
||||
.hide {
|
||||
animation: show var(--hide-duration) ease reverse;
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.show-with-scale {
|
||||
animation: show-with-scale var(--show-duration) ease;
|
||||
}
|
||||
|
||||
.hide-with-scale {
|
||||
animation: show-with-scale var(--hide-duration) ease reverse;
|
||||
}
|
||||
|
||||
@keyframes show-with-scale {
|
||||
from {
|
||||
opacity: 0;
|
||||
scale: 0.8;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
125
packages/webawesome/src/components/popup/popup.styles.ts
Normal file
125
packages/webawesome/src/components/popup/popup.styles.ts
Normal file
@@ -0,0 +1,125 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--arrow-color: black;
|
||||
--arrow-size: var(--wa-tooltip-arrow-size);
|
||||
--show-duration: 100ms;
|
||||
--hide-duration: 100ms;
|
||||
|
||||
/*
|
||||
* These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant
|
||||
* 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.
|
||||
*/
|
||||
--arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
|
||||
--arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));
|
||||
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.popup {
|
||||
position: absolute;
|
||||
isolation: isolate;
|
||||
max-width: var(--auto-size-available-width, none);
|
||||
max-height: var(--auto-size-available-height, none);
|
||||
|
||||
/* Clear UA styles for [popover] */
|
||||
:where(&) {
|
||||
inset: unset;
|
||||
padding: unset;
|
||||
margin: unset;
|
||||
width: unset;
|
||||
height: unset;
|
||||
color: unset;
|
||||
background: unset;
|
||||
border: unset;
|
||||
overflow: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.popup:not(.popup-active) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
width: calc(var(--arrow-size-diagonal) * 2);
|
||||
height: calc(var(--arrow-size-diagonal) * 2);
|
||||
rotate: 45deg;
|
||||
background: var(--arrow-color);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
:host([data-current-placement~='left']) .arrow {
|
||||
rotate: -45deg;
|
||||
}
|
||||
|
||||
:host([data-current-placement~='right']) .arrow {
|
||||
rotate: 135deg;
|
||||
}
|
||||
|
||||
:host([data-current-placement~='bottom']) .arrow {
|
||||
rotate: 225deg;
|
||||
}
|
||||
|
||||
/* Hover bridge */
|
||||
.popup-hover-bridge:not(.popup-hover-bridge-visible) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popup-hover-bridge {
|
||||
position: fixed;
|
||||
z-index: 899;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
clip-path: polygon(
|
||||
var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
|
||||
var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
|
||||
var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0),
|
||||
var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
|
||||
);
|
||||
}
|
||||
|
||||
/* Built-in animations */
|
||||
.show {
|
||||
animation: show var(--show-duration) ease;
|
||||
}
|
||||
|
||||
.hide {
|
||||
animation: show var(--hide-duration) ease reverse;
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.show-with-scale {
|
||||
animation: show-with-scale var(--show-duration) ease;
|
||||
}
|
||||
|
||||
.hide-with-scale {
|
||||
animation: show-with-scale var(--hide-duration) ease reverse;
|
||||
}
|
||||
|
||||
@keyframes show-with-scale {
|
||||
from {
|
||||
opacity: 0;
|
||||
scale: 0.8;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -17,7 +17,7 @@ import { classMap } from 'lit/directives/class-map.js';
|
||||
import { WaRepositionEvent } from '../../events/reposition.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import styles from './popup.css';
|
||||
import styles from './popup.styles.js';
|
||||
|
||||
export interface VirtualElement {
|
||||
getBoundingClientRect: () => DOMRect;
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
:host {
|
||||
--track-height: 1rem;
|
||||
--track-color: var(--wa-color-neutral-fill-normal);
|
||||
--indicator-color: var(--wa-color-brand-fill-loud);
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: var(--track-height);
|
||||
border-radius: var(--wa-border-radius-pill);
|
||||
background-color: var(--track-color);
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.indicator {
|
||||
width: var(--percentage);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--indicator-color);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
line-height: 1;
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
transition: all var(--wa-transition-slow, 200ms) var(--wa-transition-easing, ease);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* Indeterminate */
|
||||
:host([indeterminate]) .indicator {
|
||||
position: absolute;
|
||||
inset-block: 0;
|
||||
inline-size: 50%;
|
||||
animation: wa-progress-indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.progress-bar {
|
||||
outline: solid 1px SelectedItem;
|
||||
background-color: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
.indicator {
|
||||
outline: solid 1px SelectedItem;
|
||||
background-color: SelectedItem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wa-progress-indeterminate {
|
||||
0% {
|
||||
inset-inline-start: -50%;
|
||||
}
|
||||
|
||||
75%,
|
||||
100% {
|
||||
inset-inline-start: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--track-height: 1rem;
|
||||
--track-color: var(--wa-color-neutral-fill-normal);
|
||||
--indicator-color: var(--wa-color-brand-fill-loud);
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: var(--track-height);
|
||||
border-radius: var(--wa-border-radius-pill);
|
||||
background-color: var(--track-color);
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.indicator {
|
||||
width: var(--percentage);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--indicator-color);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
line-height: 1;
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
transition: all var(--wa-transition-slow, 200ms) var(--wa-transition-easing, ease);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* Indeterminate */
|
||||
:host([indeterminate]) .indicator {
|
||||
position: absolute;
|
||||
inset-block: 0;
|
||||
inline-size: 50%;
|
||||
animation: wa-progress-indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.progress-bar {
|
||||
outline: solid 1px SelectedItem;
|
||||
background-color: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
.indicator {
|
||||
outline: solid 1px SelectedItem;
|
||||
background-color: SelectedItem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wa-progress-indeterminate {
|
||||
0% {
|
||||
inset-inline-start: -50%;
|
||||
}
|
||||
|
||||
75%,
|
||||
100% {
|
||||
inset-inline-start: 100%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { clamp } from '../../internal/math.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import styles from './progress-bar.css';
|
||||
import styles from './progress-bar.styles.js';
|
||||
|
||||
/**
|
||||
* @summary Progress bars are used to show the status of an ongoing operation.
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
:host {
|
||||
--size: 8rem;
|
||||
--track-width: 0.25em; /* avoid using rems here */
|
||||
--track-color: var(--wa-color-neutral-fill-normal);
|
||||
--indicator-width: var(--track-width);
|
||||
--indicator-color: var(--wa-color-brand-fill-loud);
|
||||
--indicator-transition-duration: 0.35s;
|
||||
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.progress-ring {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
rotate: -90deg;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.track,
|
||||
.indicator {
|
||||
--radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5);
|
||||
--circumference: calc(var(--radius) * 2 * 3.141592654);
|
||||
|
||||
fill: none;
|
||||
r: var(--radius);
|
||||
cx: calc(var(--size) / 2);
|
||||
cy: calc(var(--size) / 2);
|
||||
}
|
||||
|
||||
.track {
|
||||
stroke: var(--track-color);
|
||||
stroke-width: var(--track-width);
|
||||
}
|
||||
|
||||
.indicator {
|
||||
stroke: var(--indicator-color);
|
||||
stroke-width: var(--indicator-width);
|
||||
stroke-linecap: round;
|
||||
transition-property: stroke-dashoffset;
|
||||
transition-duration: var(--indicator-transition-duration);
|
||||
stroke-dasharray: var(--circumference) var(--circumference);
|
||||
stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import { css } from 'lit';
|
||||
|
||||
export default css`
|
||||
:host {
|
||||
--size: 8rem;
|
||||
--track-width: 0.25em; /* avoid using rems here */
|
||||
--track-color: var(--wa-color-neutral-fill-normal);
|
||||
--indicator-width: var(--track-width);
|
||||
--indicator-color: var(--wa-color-brand-fill-loud);
|
||||
--indicator-transition-duration: 0.35s;
|
||||
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.progress-ring {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
rotate: -90deg;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.track,
|
||||
.indicator {
|
||||
--radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5);
|
||||
--circumference: calc(var(--radius) * 2 * 3.141592654);
|
||||
|
||||
fill: none;
|
||||
r: var(--radius);
|
||||
cx: calc(var(--size) / 2);
|
||||
cy: calc(var(--size) / 2);
|
||||
}
|
||||
|
||||
.track {
|
||||
stroke: var(--track-color);
|
||||
stroke-width: var(--track-width);
|
||||
}
|
||||
|
||||
.indicator {
|
||||
stroke: var(--indicator-color);
|
||||
stroke-width: var(--indicator-width);
|
||||
stroke-linecap: round;
|
||||
transition-property: stroke-dashoffset;
|
||||
transition-duration: var(--indicator-transition-duration);
|
||||
stroke-dasharray: var(--circumference) var(--circumference);
|
||||
stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
`;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user