mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 07:29:14 +00:00
Compare commits
10 Commits
drag-fix
...
kj/update-
| Author | SHA1 | Date | |
|---|---|---|---|
|
e6c92ca2f7 | ||
|
|
5ed32c38de | ||
|
|
9d735da9af | ||
|
|
4c1df98053 | ||
|
|
bd029b8a36 | ||
|
|
c60c62beb0 | ||
|
|
fc62edc581 | ||
|
|
9f731325bb | ||
|
|
89b7a4c71b | ||
|
|
1ebfd31877 |
@@ -151,7 +151,6 @@
|
||||
"ParamagicDev",
|
||||
"peta",
|
||||
"petabit",
|
||||
"pointercancel",
|
||||
"Preact",
|
||||
"preconnect",
|
||||
"prerendered",
|
||||
@@ -205,8 +204,6 @@
|
||||
"thead",
|
||||
"Themer",
|
||||
"tinycolor",
|
||||
"touchcancel",
|
||||
"touchend",
|
||||
"transitionend",
|
||||
"treeitem",
|
||||
"treeshaking",
|
||||
|
||||
@@ -29,8 +29,6 @@
|
||||
<li><a href="/docs/resources/contributing">Contributing</a></li>
|
||||
<li><a href="/docs/resources/changelog">Changelog</a></li>
|
||||
<li><a href="/docs/resources/visual-tests">Visual Tests</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<!-- Components -->
|
||||
@@ -156,13 +154,26 @@
|
||||
<li><a href="/docs/components/textarea/">Textarea</a></li>
|
||||
<li><span class="is-planned wa-split">Toast <span><a href="https://github.com/shoelace-style/webawesome/issues/105" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a>{{ proBadge( { description: "This will require access to Web Awesome Pro" }) }}</span></span></li>
|
||||
<li><a href="/docs/components/tooltip/">Tooltip</a></li>
|
||||
<li><a href="/docs/components/tree/">Tree</a></li>
|
||||
<li><a href="/docs/components/tree-item/">Tree Item</a></li>
|
||||
<li>
|
||||
<a href="/docs/components/tree/">Tree</a>
|
||||
<span class="wa-split">
|
||||
<a class="wa-cluster wa-gap-xs" href="/docs/components/video/">
|
||||
Video <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
|
||||
</a>
|
||||
{{ proBadge() }}
|
||||
</span>
|
||||
<ul>
|
||||
<li><a href="/docs/components/tree-item/">Tree Item</a></li>
|
||||
<li>
|
||||
<span class="wa-split">
|
||||
<a href="/docs/components/video-item/">
|
||||
Video Item <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
|
||||
</a>
|
||||
{{ proBadge() }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><span class="is-planned wa-split">Video <span><a href="https://github.com/shoelace-style/webawesome/issues/985" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a>{{ proBadge( { description: "This will require access to Web Awesome Pro" }) }}</span></span></li>
|
||||
<li><a href="/docs/components/zoomable-frame">Zoomable Frame</a></li>
|
||||
{# PLOP_NEW_COMPONENT_PLACEHOLDER #}
|
||||
</ul>
|
||||
@@ -196,8 +207,6 @@
|
||||
</h2>
|
||||
<ul>
|
||||
<li><a href="/docs/utilities/align-items/">Align Items</a></li>
|
||||
<!-- Pending 3.2.0 release -->
|
||||
<!-- <li><a href="/docs/utilities/justify-content/">Justify Content</a></li> -->
|
||||
<li><a href="/docs/utilities/gap/">Gap</a></li>
|
||||
<li><a href="/docs/utilities/cluster/">Cluster</a></li>
|
||||
<li><a href="/docs/utilities/flank/">Flank</a></li>
|
||||
|
||||
@@ -130,13 +130,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* dialogs */
|
||||
wa-dialog:has([slot='footer']) [slot='footer'] {
|
||||
border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
|
||||
flex-grow: 1; /* make footer contents span entire width of dialog */
|
||||
padding-block-start: var(--wa-space-l);
|
||||
}
|
||||
|
||||
/* anchor headings */
|
||||
.anchor-heading a {
|
||||
opacity: 0;
|
||||
@@ -257,6 +250,7 @@
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* buttons with icon toggle on hover */
|
||||
wa-button .icon-hover {
|
||||
@@ -268,13 +262,6 @@
|
||||
wa-button:hover .icon-hover {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
/* buttons that are "shushed" (visually muted) by default, but have their full presentation otherwise */
|
||||
wa-button.shush {
|
||||
&:not(:hover):not(active)::part(base) {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region resets */
|
||||
|
||||
@@ -13,14 +13,11 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
|
||||
|
||||
## Next
|
||||
|
||||
- Added `pointercancel` and `touchcancel` event handling to draggable elements to prevent drags from getting stuck
|
||||
- Added `justify-content` CSS utilities [pr:1930]
|
||||
- Added missing `.wa-gap-4xl` utility class [pr:1931]
|
||||
- Fixed a bug in `<wa-combobox>` that prevented the listbox from opening when options were preselected [issue:1883]
|
||||
- Fixed a bug in draggable elements that caused a TypeError on `touchend` events when `event.touches` was empty
|
||||
|
||||
## 3.1.0
|
||||
|
||||
- Added `<wa-video>` as an experimental pro component
|
||||
- Added `<wa-combobox>` as an experimental pro component [issue:1074]
|
||||
- Added version 2.0.0 of the [official Web Awesome Figma Design Kit](/docs/resources/figma)
|
||||
- Added npm support for Web Awesome Pro
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Align Items
|
||||
description: Align items utilities align items within flex and grid containers on the cross axis.
|
||||
description: Align items utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
@@ -10,7 +10,6 @@ tags: layoutUtilities
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
min-block-size: 3em;
|
||||
min-inline-size: 5em;
|
||||
padding: var(--wa-space-2xs);
|
||||
}
|
||||
.preview-block {
|
||||
@@ -21,16 +20,16 @@ tags: layoutUtilities
|
||||
}
|
||||
</style>
|
||||
|
||||
Web Awesome includes classes to set the `align-items` property of flex and grid containers. Use them alongside other Web Awesome layout utilities, like [cluster](/docs/utilities/cluster) and [stack](/docs/utilities/stack), to align items in a container on the container's [cross axis](#whats-the-cross-axis).
|
||||
Web Awesome includes classes to set the `align-items` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/utilities/cluster) and [stack](/docs/utilities/stack), to align children in container on the container's cross axis.
|
||||
|
||||
| Class Name | `align-items` Value | Preview |
|
||||
| ------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `wa-align-items-baseline` | `baseline` | <div class="wa-cluster wa-gap-2xs wa-align-items-baseline preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-align-items-center` | `center` | <div class="wa-cluster wa-gap-2xs wa-align-items-center preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-align-items-end` | `flex-end` | <div class="wa-cluster wa-gap-2xs wa-align-items-end preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-align-items-start` | `flex-start` | <div class="wa-cluster wa-gap-2xs wa-align-items-start preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-align-items-stretch` | `stretch` | <div class="wa-cluster wa-gap-2xs wa-align-items-stretch preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| Class Name | `align-items` Value | Preview |
|
||||
| ------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `wa-align-items-baseline` | `baseline` | <div class="wa-cluster wa-align-items-baseline preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-align-items-center` | `center` | <div class="wa-cluster wa-align-items-center preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-align-items-end` | `flex-end` | <div class="wa-cluster wa-align-items-end preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-align-items-start` | `flex-start` | <div class="wa-cluster wa-align-items-start preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-align-items-stretch` | `stretch` | <div class="wa-cluster wa-align-items-stretch preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
|
||||
## What's the Cross Axis?
|
||||
## What's a Cross Axis?
|
||||
|
||||
The cross axis runs perpendicular to a container's content direction. For containers where `flex-direction` is `row` and content flows in the inline direction, the cross axis runs in the block direction. For containers where `flex-direction` is `column` and content flows in the block direction, the cross axis runs in the inline direction.
|
||||
The cross axis runs perpendicular to a flex container's content direction. For containers where `flex-direction` is `row` and content flows in the inline direction, the cross axis runs in the block direction. For containers where `flex-direction` is `column` and content flows in the block direction, the cross axis runs in the inline direction.
|
||||
|
||||
@@ -14,7 +14,8 @@ tags: layoutUtilities
|
||||
}
|
||||
</style>
|
||||
|
||||
Web Awesome includes classes to set the `gap` property of flex and grid containers. Use them alone to create a flex container with a gap, or use them alongside other Web Awesome layout utilities, like [cluster](/docs/utilities/cluster) and [stack](/docs/utilities/stack), to change the space between items.
|
||||
Web Awesome includes classes to set the `gap` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/utilities/cluster) and [stack](/docs/utilities/stack), to change the space between items.
|
||||
Or even by themselves — all gap properties also set `display: flex` with a specificity of 0 so that it can be trivially overridden.
|
||||
|
||||
Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/tokens/space) tokens in your theme.
|
||||
|
||||
@@ -30,5 +31,3 @@ Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of t
|
||||
| `wa-gap-xl` | `--wa-space-xl` | <div class="wa-cluster wa-gap-xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-gap-2xl` | `--wa-space-2xl` | <div class="wa-cluster wa-gap-2xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-gap-3xl` | `--wa-space-3xl` | <div class="wa-cluster wa-gap-3xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
<!-- Pending 3.2.0 release -->
|
||||
<!-- | `wa-gap-4xl` | `--wa-space-4xl` | <div class="wa-cluster wa-gap-4xl"><div class="preview-block"></div><div class="preview-block"></div></div> | -->
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
---
|
||||
title: Justify Content
|
||||
description: Justify content utilities determine how space is distributed between items in flex and grid containers.
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
unpublished: true
|
||||
unlisted: true
|
||||
---
|
||||
|
||||
<style>
|
||||
.preview-wrapper {
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
min-block-size: 3em;
|
||||
min-inline-size: 5em;
|
||||
padding: var(--wa-space-2xs);
|
||||
}
|
||||
.preview-block {
|
||||
aspect-ratio: 1 / 1;
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
min-block-size: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
Web Awesome includes classes to set the `justify-content` property of flex and grid containers. Use them alongside other Web Awesome layout utilities, like [cluster](/docs/utilities/cluster) and [stack](/docs/utilities/stack), to distribute space between items along the container's [main axis](#whats-the-main-axis).
|
||||
|
||||
| Class Name | `justify-content` Value | Preview |
|
||||
| ---------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `wa-justify-content-start` | `flex-start` | <div class="wa-cluster wa-gap-2xs wa-justify-content-start preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-justify-content-end` | `flex-end` | <div class="wa-cluster wa-gap-2xs wa-justify-content-end preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-justify-content-center` | `center` | <div class="wa-cluster wa-gap-2xs wa-justify-content-center preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-justify-content-space-around` | `space-around` | <div class="wa-cluster wa-gap-2xs wa-justify-content-space-around preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-justify-content-space-between` | `space-between` | <div class="wa-cluster wa-gap-2xs wa-justify-content-space-between preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-justify-content-space-evenly` | `space-evenly` | <div class="wa-cluster wa-gap-2xs wa-justify-content-space-evenly preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
|
||||
## What's the Main Axis?
|
||||
|
||||
The main axis runs parallel to a container's content direction. For grid containers and flex containers where `flex-direction` is `row`, the main axis runs in the inline direction. For containers where `flex-direction` is `column`, the main axis runs in the block direction.
|
||||
@@ -1277,14 +1277,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
})}
|
||||
part="trigger-container form-control"
|
||||
>
|
||||
<div
|
||||
part="form-control-label"
|
||||
class=${classMap({
|
||||
label: true,
|
||||
'has-label': hasLabel,
|
||||
})}
|
||||
id="form-control-label"
|
||||
>
|
||||
<div part="form-control-label" class="label" id="form-control-label">
|
||||
<slot name="label">${this.label}</slot>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ export default css`
|
||||
}
|
||||
|
||||
.text-field {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: start;
|
||||
|
||||
@@ -48,27 +48,6 @@ describe('<wa-input>', () => {
|
||||
expect(input.title).to.equal('Test');
|
||||
});
|
||||
|
||||
it('should have label with "has-label" class if label has a slotted element', async () => {
|
||||
const el = await fixture<WaInput>(html` <wa-input><span slot="label">Name</span></wa-input> `);
|
||||
await el.updateComplete;
|
||||
const label = el.shadowRoot!.querySelector('[part~="form-control-label"]')!;
|
||||
expect(label.classList.contains('has-label')).to.equal(true);
|
||||
});
|
||||
|
||||
it('should have label with "has-label" class if label is provided as an attribute', async () => {
|
||||
const el = await fixture<WaInput>(html` <wa-input label="Name"></wa-input> `);
|
||||
await el.updateComplete;
|
||||
const label = el.shadowRoot!.querySelector('[part~="form-control-label"]')!;
|
||||
expect(label.classList.contains('has-label')).to.equal(true);
|
||||
});
|
||||
|
||||
it('should not have "has-label" class on label if no label content is provided', async () => {
|
||||
const el = await fixture<WaInput>(html` <wa-input></wa-input> `);
|
||||
await el.updateComplete;
|
||||
const label = el.shadowRoot!.querySelector('[part~="form-control-label"]')!;
|
||||
expect(label.classList.contains('has-label')).to.equal(false);
|
||||
});
|
||||
|
||||
it('should be disabled with the disabled attribute', async () => {
|
||||
const el = await fixture<WaInput>(html` <wa-input disabled></wa-input> `);
|
||||
await el.updateComplete;
|
||||
|
||||
@@ -342,15 +342,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
|
||||
(typeof this.value === 'number' || (this.value && this.value.length > 0));
|
||||
|
||||
return html`
|
||||
<label
|
||||
part="form-control-label label"
|
||||
class=${classMap({
|
||||
label: true,
|
||||
'has-label': hasLabel,
|
||||
})}
|
||||
for="input"
|
||||
aria-hidden=${hasLabel ? 'false' : 'true'}
|
||||
>
|
||||
<label part="form-control-label label" class="label" for="input" aria-hidden=${hasLabel ? 'false' : 'true'}>
|
||||
<slot name="label">${this.label}</slot>
|
||||
</label>
|
||||
|
||||
|
||||
@@ -352,10 +352,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
<label
|
||||
part="form-control-label"
|
||||
id="label"
|
||||
class=${classMap({
|
||||
label: true,
|
||||
'has-label': hasLabel,
|
||||
})}
|
||||
class="label"
|
||||
aria-hidden=${hasLabel ? 'false' : 'true'}
|
||||
@click=${this.handleLabelClick}
|
||||
>
|
||||
|
||||
@@ -938,10 +938,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
<label
|
||||
id="label"
|
||||
part="form-control-label label"
|
||||
class=${classMap({
|
||||
label: true,
|
||||
'has-label': hasLabel,
|
||||
})}
|
||||
class="label"
|
||||
aria-hidden=${hasLabel ? 'false' : 'true'}
|
||||
@click=${this.handleLabelClick}
|
||||
>
|
||||
|
||||
@@ -807,7 +807,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
|
||||
id="label"
|
||||
part="label"
|
||||
for=${this.isRange ? 'thumb-min' : 'text-box'}
|
||||
class=${classMap({ vh: !hasLabel, 'has-label': hasLabel })}
|
||||
class=${classMap({ vh: !hasLabel })}
|
||||
@pointerdown=${this.handleLabelPointerDown}
|
||||
>
|
||||
<slot name="label">${this.label}</slot>
|
||||
|
||||
@@ -331,15 +331,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
|
||||
const hasHint = this.hint ? true : !!hasHintSlot;
|
||||
|
||||
return html`
|
||||
<label
|
||||
part="form-control-label label"
|
||||
class=${classMap({
|
||||
label: true,
|
||||
'has-label': hasLabel,
|
||||
})}
|
||||
for="input"
|
||||
aria-hidden=${hasLabel ? 'false' : 'true'}
|
||||
>
|
||||
<label part="form-control-label label" class="label" for="input" aria-hidden=${hasLabel ? 'false' : 'true'}>
|
||||
<slot name="label">${this.label}</slot>
|
||||
</label>
|
||||
|
||||
|
||||
@@ -99,24 +99,20 @@ export class DraggableElement {
|
||||
|
||||
document.addEventListener('pointerup', this.handleDragStop);
|
||||
document.addEventListener('pointermove', this.handleDragMove);
|
||||
document.addEventListener('pointercancel', this.handleDragStop);
|
||||
document.addEventListener('touchend', this.handleDragStop);
|
||||
document.addEventListener('touchmove', this.handleDragMove);
|
||||
document.addEventListener('touchcancel', this.handleDragStop);
|
||||
this.options.start(clientX, clientY);
|
||||
};
|
||||
|
||||
private handleDragStop = (event: PointerEvent | TouchEvent) => {
|
||||
const clientX = 'changedTouches' in event ? event.changedTouches[0].clientX : (event as PointerEvent).clientX;
|
||||
const clientY = 'changedTouches' in event ? event.changedTouches[0].clientY : (event as PointerEvent).clientY;
|
||||
const clientX = 'touches' in event ? event.touches[0].clientX : (event as PointerEvent).clientX;
|
||||
const clientY = 'touches' in event ? event.touches[0].clientY : (event as PointerEvent).clientY;
|
||||
|
||||
this.isDragging = false;
|
||||
document.removeEventListener('pointerup', this.handleDragStop);
|
||||
document.removeEventListener('pointermove', this.handleDragMove);
|
||||
document.removeEventListener('pointercancel', this.handleDragStop);
|
||||
document.removeEventListener('touchend', this.handleDragStop);
|
||||
document.removeEventListener('touchmove', this.handleDragMove);
|
||||
document.removeEventListener('touchcancel', this.handleDragStop);
|
||||
this.options.stop(clientX, clientY);
|
||||
};
|
||||
|
||||
@@ -145,10 +141,8 @@ export class DraggableElement {
|
||||
public stop() {
|
||||
document.removeEventListener('pointerup', this.handleDragStop);
|
||||
document.removeEventListener('pointermove', this.handleDragMove);
|
||||
document.removeEventListener('pointercancel', this.handleDragStop);
|
||||
document.removeEventListener('touchend', this.handleDragStop);
|
||||
document.removeEventListener('touchmove', this.handleDragMove);
|
||||
document.removeEventListener('touchcancel', this.handleDragStop);
|
||||
this.element.removeEventListener('pointerdown', this.handleDragStart);
|
||||
if (supportsTouch) {
|
||||
this.element.removeEventListener('touchstart', this.handleDragStart);
|
||||
|
||||
@@ -6,14 +6,8 @@ export default css`
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Treat wrapped labels, inputs, and hints as direct children of the host element */
|
||||
[part~='form-control'] {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
:is([part~='form-control-label'], [part~='label']):has(*:not(:empty)),
|
||||
:is([part~='form-control-label'], [part~='label']).has-label {
|
||||
:is([part~='form-control-label'], [part~='label']):has(*:not(:empty)) {
|
||||
display: inline-flex;
|
||||
color: var(--wa-form-control-label-color);
|
||||
font-weight: var(--wa-form-control-label-font-weight);
|
||||
@@ -35,6 +29,7 @@ export default css`
|
||||
line-height: var(--wa-form-control-hint-line-height);
|
||||
margin-block-start: 0.5em;
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
line-height: var(--wa-form-control-label-line-height);
|
||||
|
||||
&:not(.has-slotted) {
|
||||
display: none;
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
@import url('utilities/scroll-lock.css');
|
||||
@import url('utilities/placeholder.css');
|
||||
@import url('utilities/align-items.css');
|
||||
@import url('utilities/justify-content.css');
|
||||
@import url('utilities/border-radius.css');
|
||||
@import url('utilities/gap.css');
|
||||
@import url('utilities/text.css');
|
||||
|
||||
@@ -45,7 +45,4 @@
|
||||
.wa-gap-3xl {
|
||||
gap: var(--wa-space-3xl);
|
||||
}
|
||||
.wa-gap-4xl {
|
||||
gap: var(--wa-space-4xl);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
@layer wa-utilities {
|
||||
.wa-justify-content-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.wa-justify-content-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.wa-justify-content-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.wa-justify-content-space-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.wa-justify-content-space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.wa-justify-content-space-evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
@@ -27,11 +27,11 @@
|
||||
[class*='wa-cluster'] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
:where([class*='wa-cluster']) {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
@@ -75,6 +75,7 @@
|
||||
[class*='wa-frame'] {
|
||||
display: flex;
|
||||
aspect-ratio: 1 / 1;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -97,7 +98,6 @@
|
||||
|
||||
:where([class*='wa-frame']) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
@@ -118,6 +118,7 @@
|
||||
[class*='wa-split'] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
[class*='wa-split'],
|
||||
@@ -140,7 +141,6 @@
|
||||
|
||||
:where([class*='wa-split']) {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* #endregion */
|
||||
@@ -149,11 +149,11 @@
|
||||
[class*='wa-stack'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
:where([class*='wa-stack']) {
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
/* #endregion */
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user