mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 15:34:15 +00:00
Compare commits
10 Commits
kj/add-cus
...
drag-fix
| Author | SHA1 | Date | |
|---|---|---|---|
|
65b741cf9b | ||
|
|
d76bef5dbb | ||
|
|
f8f54d543a | ||
|
|
5b0e3ed1e8 | ||
|
|
09ace44c17 | ||
|
|
f3de45803f | ||
|
|
ede1f0725d | ||
|
|
61f89df17b | ||
|
|
56b1196265 | ||
|
|
7e5f18ea97 |
@@ -151,6 +151,7 @@
|
||||
"ParamagicDev",
|
||||
"peta",
|
||||
"petabit",
|
||||
"pointercancel",
|
||||
"Preact",
|
||||
"preconnect",
|
||||
"prerendered",
|
||||
@@ -204,6 +205,8 @@
|
||||
"thead",
|
||||
"Themer",
|
||||
"tinycolor",
|
||||
"touchcancel",
|
||||
"touchend",
|
||||
"transitionend",
|
||||
"treeitem",
|
||||
"treeshaking",
|
||||
|
||||
@@ -196,6 +196,8 @@
|
||||
</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,6 +130,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
@@ -250,7 +257,6 @@
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* buttons with icon toggle on hover */
|
||||
wa-button .icon-hover {
|
||||
@@ -262,6 +268,13 @@
|
||||
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 */
|
||||
|
||||
@@ -11,6 +11,14 @@ Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes
|
||||
|
||||
Components with the <wa-badge variant="warning">Experimental</wa-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
|
||||
|
||||
## 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-combobox>` as an experimental pro component [issue:1074]
|
||||
@@ -516,4 +524,4 @@ Many of these changes and improvements were the direct result of feedback from u
|
||||
|
||||
</details>
|
||||
|
||||
Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
|
||||
Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Align Items
|
||||
description: Align items utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
|
||||
description: Align items utilities align items within flex and grid containers on the cross axis.
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
@@ -10,6 +10,7 @@ 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 {
|
||||
@@ -20,16 +21,16 @@ tags: layoutUtilities
|
||||
}
|
||||
</style>
|
||||
|
||||
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.
|
||||
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).
|
||||
|
||||
| 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> |
|
||||
| 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> |
|
||||
|
||||
## What's a Cross Axis?
|
||||
## What's the Cross Axis?
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
@@ -14,8 +14,7 @@ tags: layoutUtilities
|
||||
}
|
||||
</style>
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
@@ -31,3 +30,5 @@ 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> | -->
|
||||
|
||||
39
packages/webawesome/docs/docs/utilities/justify-content.md
Normal file
39
packages/webawesome/docs/docs/utilities/justify-content.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
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,7 +1277,14 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
})}
|
||||
part="trigger-container form-control"
|
||||
>
|
||||
<div part="form-control-label" class="label" id="form-control-label">
|
||||
<div
|
||||
part="form-control-label"
|
||||
class=${classMap({
|
||||
label: true,
|
||||
'has-label': hasLabel,
|
||||
})}
|
||||
id="form-control-label"
|
||||
>
|
||||
<slot name="label">${this.label}</slot>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -6,7 +6,6 @@ export default css`
|
||||
}
|
||||
|
||||
.text-field {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: start;
|
||||
|
||||
@@ -48,6 +48,27 @@ 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,7 +342,15 @@ 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="label" for="input" aria-hidden=${hasLabel ? 'false' : 'true'}>
|
||||
<label
|
||||
part="form-control-label label"
|
||||
class=${classMap({
|
||||
label: true,
|
||||
'has-label': hasLabel,
|
||||
})}
|
||||
for="input"
|
||||
aria-hidden=${hasLabel ? 'false' : 'true'}
|
||||
>
|
||||
<slot name="label">${this.label}</slot>
|
||||
</label>
|
||||
|
||||
|
||||
@@ -352,7 +352,10 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
<label
|
||||
part="form-control-label"
|
||||
id="label"
|
||||
class="label"
|
||||
class=${classMap({
|
||||
label: true,
|
||||
'has-label': hasLabel,
|
||||
})}
|
||||
aria-hidden=${hasLabel ? 'false' : 'true'}
|
||||
@click=${this.handleLabelClick}
|
||||
>
|
||||
|
||||
@@ -938,7 +938,10 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
<label
|
||||
id="label"
|
||||
part="form-control-label label"
|
||||
class="label"
|
||||
class=${classMap({
|
||||
label: true,
|
||||
'has-label': hasLabel,
|
||||
})}
|
||||
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 })}
|
||||
class=${classMap({ vh: !hasLabel, 'has-label': hasLabel })}
|
||||
@pointerdown=${this.handleLabelPointerDown}
|
||||
>
|
||||
<slot name="label">${this.label}</slot>
|
||||
|
||||
@@ -331,7 +331,15 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
|
||||
const hasHint = this.hint ? true : !!hasHintSlot;
|
||||
|
||||
return html`
|
||||
<label part="form-control-label label" class="label" for="input" aria-hidden=${hasLabel ? 'false' : 'true'}>
|
||||
<label
|
||||
part="form-control-label label"
|
||||
class=${classMap({
|
||||
label: true,
|
||||
'has-label': hasLabel,
|
||||
})}
|
||||
for="input"
|
||||
aria-hidden=${hasLabel ? 'false' : 'true'}
|
||||
>
|
||||
<slot name="label">${this.label}</slot>
|
||||
</label>
|
||||
|
||||
|
||||
@@ -28,3 +28,4 @@ export type { WaSlideChangeEvent } from './slide-change.js';
|
||||
export type { WaStartEvent } from './start.js';
|
||||
export type { WaTabHideEvent } from './tab-hide.js';
|
||||
export type { WaTabShowEvent } from './tab-show.js';
|
||||
export type { WaVideoChangeEvent } from './video-change.js';
|
||||
|
||||
26
packages/webawesome/src/events/video-change.ts
Normal file
26
packages/webawesome/src/events/video-change.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
export class WaVideoChangeEvent extends Event {
|
||||
readonly detail: WaVideoChangeEventDetail;
|
||||
|
||||
constructor(detail: WaVideoChangeEventDetail) {
|
||||
super('wa-video-change', { bubbles: true, cancelable: false, composed: true });
|
||||
this.detail = detail;
|
||||
}
|
||||
}
|
||||
|
||||
export interface WaVideoChangeEventDetail {
|
||||
previousIndex: number;
|
||||
currentIndex: number;
|
||||
video: {
|
||||
title?: string;
|
||||
poster?: string;
|
||||
duration?: string;
|
||||
sources: { src: string; type: string }[];
|
||||
tracks: { src: string; kind: string; srclang: string; label: string }[];
|
||||
};
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface GlobalEventHandlersEventMap {
|
||||
'wa-video-change': WaVideoChangeEvent;
|
||||
}
|
||||
}
|
||||
@@ -99,20 +99,24 @@ 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 = 'touches' in event ? event.touches[0].clientX : (event as PointerEvent).clientX;
|
||||
const clientY = 'touches' in event ? event.touches[0].clientY : (event as PointerEvent).clientY;
|
||||
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;
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
@@ -141,8 +145,10 @@ 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,8 +6,14 @@ 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(*:not(:empty)),
|
||||
:is([part~='form-control-label'], [part~='label']).has-label {
|
||||
display: inline-flex;
|
||||
color: var(--wa-form-control-label-color);
|
||||
font-weight: var(--wa-form-control-label-font-weight);
|
||||
@@ -29,7 +35,6 @@ 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,6 +5,7 @@
|
||||
@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,4 +45,7 @@
|
||||
.wa-gap-3xl {
|
||||
gap: var(--wa-space-3xl);
|
||||
}
|
||||
.wa-gap-4xl {
|
||||
gap: var(--wa-space-4xl);
|
||||
}
|
||||
}
|
||||
|
||||
20
packages/webawesome/src/styles/utilities/justify-content.css
Normal file
20
packages/webawesome/src/styles/utilities/justify-content.css
Normal file
@@ -0,0 +1,20 @@
|
||||
@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,7 +75,6 @@
|
||||
[class*='wa-frame'] {
|
||||
display: flex;
|
||||
aspect-ratio: 1 / 1;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -98,6 +97,7 @@
|
||||
|
||||
:where([class*='wa-frame']) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
@@ -118,7 +118,6 @@
|
||||
[class*='wa-split'] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
[class*='wa-split'],
|
||||
@@ -141,6 +140,7 @@
|
||||
|
||||
: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