mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 20:19:13 +00:00
Initial commit for alert
This commit is contained in:
Cory LaViska
41
src/components.d.ts
vendored
41
src/components.d.ts
vendored
@@ -10,6 +10,20 @@ import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
|
||||
|
||||
|
||||
export namespace Components {
|
||||
interface SlAlert {
|
||||
/**
|
||||
* Set to true to make the alert closable.
|
||||
*/
|
||||
'closable': boolean;
|
||||
/**
|
||||
* Set to true to close the alert.
|
||||
*/
|
||||
'closed': boolean;
|
||||
/**
|
||||
* The type of alert to draw.
|
||||
*/
|
||||
'type': string;
|
||||
}
|
||||
interface SlButton {
|
||||
/**
|
||||
* Set to true to draw a full-width button.
|
||||
@@ -489,6 +503,12 @@ export namespace Components {
|
||||
declare global {
|
||||
|
||||
|
||||
interface HTMLSlAlertElement extends Components.SlAlert, HTMLStencilElement {}
|
||||
var HTMLSlAlertElement: {
|
||||
prototype: HTMLSlAlertElement;
|
||||
new (): HTMLSlAlertElement;
|
||||
};
|
||||
|
||||
interface HTMLSlButtonElement extends Components.SlButton, HTMLStencilElement {}
|
||||
var HTMLSlButtonElement: {
|
||||
prototype: HTMLSlButtonElement;
|
||||
@@ -579,6 +599,7 @@ declare global {
|
||||
new (): HTMLSlTooltipElement;
|
||||
};
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-alert': HTMLSlAlertElement;
|
||||
'sl-button': HTMLSlButtonElement;
|
||||
'sl-checkbox': HTMLSlCheckboxElement;
|
||||
'sl-dropdown': HTMLSlDropdownElement;
|
||||
@@ -598,6 +619,24 @@ declare global {
|
||||
}
|
||||
|
||||
declare namespace LocalJSX {
|
||||
interface SlAlert {
|
||||
/**
|
||||
* Set to true to make the alert closable.
|
||||
*/
|
||||
'closable'?: boolean;
|
||||
/**
|
||||
* Set to true to close the alert.
|
||||
*/
|
||||
'closed'?: boolean;
|
||||
/**
|
||||
* Emitted when the alert is closed.
|
||||
*/
|
||||
'onSlClose'?: (event: CustomEvent<any>) => void;
|
||||
/**
|
||||
* The type of alert to draw.
|
||||
*/
|
||||
'type'?: string;
|
||||
}
|
||||
interface SlButton {
|
||||
/**
|
||||
* Set to true to draw a full-width button.
|
||||
@@ -1021,6 +1060,7 @@ declare namespace LocalJSX {
|
||||
}
|
||||
|
||||
interface IntrinsicElements {
|
||||
'sl-alert': SlAlert;
|
||||
'sl-button': SlButton;
|
||||
'sl-checkbox': SlCheckbox;
|
||||
'sl-dropdown': SlDropdown;
|
||||
@@ -1045,6 +1085,7 @@ export { LocalJSX as JSX };
|
||||
declare module "@stencil/core" {
|
||||
export namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
'sl-alert': LocalJSX.SlAlert & JSXBase.HTMLAttributes<HTMLSlAlertElement>;
|
||||
'sl-button': LocalJSX.SlButton & JSXBase.HTMLAttributes<HTMLSlButtonElement>;
|
||||
'sl-checkbox': LocalJSX.SlCheckbox & JSXBase.HTMLAttributes<HTMLSlCheckboxElement>;
|
||||
'sl-dropdown': LocalJSX.SlDropdown & JSXBase.HTMLAttributes<HTMLSlDropdownElement>;
|
||||
|
||||
110
src/components/alert/alert.scss
Normal file
110
src/components/alert/alert.scss
Normal file
@@ -0,0 +1,110 @@
|
||||
:host {
|
||||
--border-radius: 3px;
|
||||
--border-width: 1px;
|
||||
--font-family: var(--sl-font-sans-serif);
|
||||
--font-size: 14px;
|
||||
--font-weight: var(--sl-font-weight-normal);
|
||||
--line-height: 1.6;
|
||||
--padding-x: 1rem;
|
||||
--padding-y: 1rem;
|
||||
--margin-bottom: 1rem;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sl-alert {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border: solid var(--border-width);
|
||||
border-radius: var(--border-radius);
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight);
|
||||
line-height: var(--line-height);
|
||||
padding: var(--padding-y) var(--padding-x);
|
||||
margin-bottom: var(--margin-bottom);
|
||||
transition: 0.2s opacity;
|
||||
|
||||
&.sl-alert--closed {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.sl-alert--primary {
|
||||
background-color: var(--sl-color-primary-95);
|
||||
border-color: var(--sl-color-primary-90);
|
||||
color: var(--sl-color-primary-40);
|
||||
}
|
||||
|
||||
&.sl-alert--success {
|
||||
background-color: var(--sl-color-success-95);
|
||||
border-color: var(--sl-color-success-90);
|
||||
color: var(--sl-color-success-40);
|
||||
}
|
||||
|
||||
&.sl-alert--info {
|
||||
background-color: var(--sl-color-info-95);
|
||||
border-color: var(--sl-color-info-90);
|
||||
color: var(--sl-color-info-40);
|
||||
}
|
||||
|
||||
&.sl-alert--warning {
|
||||
background-color: var(--sl-color-warning-95);
|
||||
border-color: var(--sl-color-warning-90);
|
||||
color: var(--sl-color-warning-40);
|
||||
}
|
||||
|
||||
&.sl-alert--danger {
|
||||
background-color: var(--sl-color-danger-95);
|
||||
border-color: var(--sl-color-danger-90);
|
||||
color: var(--sl-color-danger-40);
|
||||
}
|
||||
|
||||
.sl-alert__icon {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
.sl-alert__icon {
|
||||
::slotted(:first-child) {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.sl-alert__body {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.sl-alert__close {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
border: none;
|
||||
color: currentColor;
|
||||
padding: 0;
|
||||
margin: 0 0 0 var(--padding-x);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: none;
|
||||
filter: brightness(80%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
filter: brightness(60%);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
99
src/components/alert/alert.tsx
Normal file
99
src/components/alert/alert.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import { Component, Event, EventEmitter, Prop, Watch, h } from '@stencil/core';
|
||||
|
||||
/**
|
||||
* @slot - The alert's content.
|
||||
* @slot icon - An icon to show in the alert.
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-alert',
|
||||
styleUrl: 'alert.scss',
|
||||
shadow: true
|
||||
})
|
||||
export class Tab {
|
||||
alert: HTMLElement;
|
||||
|
||||
constructor() {
|
||||
this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
|
||||
}
|
||||
|
||||
/** The type of alert to draw. */
|
||||
@Prop() type = 'primary';
|
||||
|
||||
/** Set to true to make the alert closable. */
|
||||
@Prop() closable = false;
|
||||
|
||||
/** Set to true to close the alert. */
|
||||
@Prop({ mutable: true }) closed = false;
|
||||
|
||||
/** Emitted when the alert is closed. */
|
||||
@Event() slClose: EventEmitter;
|
||||
|
||||
@Watch('closed')
|
||||
handleClosedChange() {
|
||||
// Remove the hidden attribute so the transition can run
|
||||
this.alert.removeAttribute('hidden');
|
||||
|
||||
if (this.closed) {
|
||||
this.slClose.emit();
|
||||
}
|
||||
}
|
||||
|
||||
handleTransitionEnd() {
|
||||
// Hide the alert when the transition ends
|
||||
if (this.closed) {
|
||||
this.alert.setAttribute('hidden', 'true');
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
ref={el => (this.alert = el)}
|
||||
class={{
|
||||
'sl-alert': true,
|
||||
'sl-alert--closed': this.closed,
|
||||
|
||||
// States
|
||||
'sl-alert--primary': this.type === 'primary',
|
||||
'sl-alert--success': this.type === 'success',
|
||||
'sl-alert--info': this.type === 'info',
|
||||
'sl-alert--warning': this.type === 'warning',
|
||||
'sl-alert--danger': this.type === 'danger'
|
||||
}}
|
||||
role="alert"
|
||||
aria-hidden={this.closed}
|
||||
onTransitionEnd={this.handleTransitionEnd}
|
||||
>
|
||||
<span class="sl-alert__icon">
|
||||
<slot name="icon" />
|
||||
</span>
|
||||
|
||||
<span class="sl-alert__body">
|
||||
<slot />
|
||||
</span>
|
||||
|
||||
{this.closable && (
|
||||
<button type="button" class="sl-alert__close" onClick={() => (this.closed = true)}>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
||||
<g stroke="currentColor" stroke-width="2">
|
||||
<path d="M3.5,12.5 L12.3466797,3.65332031"></path>
|
||||
<path
|
||||
d="M3.5,12.5 L12.3466797,3.65332031"
|
||||
transform="translate(8.000000, 8.000000) scale(-1, 1) translate(-8.000000, -8.000000) "
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
34
src/components/alert/readme.md
Normal file
34
src/components/alert/readme.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# sl-alert
|
||||
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
| ---------- | ---------- | --------------------------------------- | --------- | ----------- |
|
||||
| `closable` | `closable` | Set to true to make the alert closable. | `boolean` | `false` |
|
||||
| `closed` | `closed` | Set to true to close the alert. | `boolean` | `false` |
|
||||
| `type` | `type` | The type of alert to draw. | `string` | `'primary'` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Description | Type |
|
||||
| --------- | --------------------------------- | ------------------ |
|
||||
| `slClose` | Emitted when the alert is closed. | `CustomEvent<any>` |
|
||||
|
||||
|
||||
## Slots
|
||||
|
||||
| Slot | Description |
|
||||
| -------- | ----------------------------- |
|
||||
| | The alert's content. |
|
||||
| `"icon"` | An icon to show in the alert. |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
This component was built with [Stencil](https://stenciljs.com/).
|
||||
@@ -17,7 +17,7 @@
|
||||
--font-size--large: var(--sl-form-control-font-size--large);
|
||||
--font-size--medium: var(--sl-form-control-font-size--medium);
|
||||
--font-size--small: var(--sl-form-control-font-size--small);
|
||||
--font-weight: var(--sl-font-weight--bold);
|
||||
--font-weight: var(--sl-font-weight--normal);
|
||||
--height--large: var(--sl-form-control-height--large);
|
||||
--height--medium: var(--sl-form-control-height--medium);
|
||||
--height--small: var(--sl-form-control-height--small);
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { Component, Host, Method, Prop, h } from '@stencil/core';
|
||||
|
||||
/** @slot prefix - Used to prepend an icon or similar element to the button. */
|
||||
/** @slot suffix - Used to append an icon or similar element to the button. */
|
||||
/** @slot - The button's label. */
|
||||
/**
|
||||
* @slot prefix - Used to prepend an icon or similar element to the button.
|
||||
* @slot suffix - Used to append an icon or similar element to the button.
|
||||
* @slot - The button's label.
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-button',
|
||||
|
||||
@@ -185,9 +185,11 @@ Type: `Promise<void>`
|
||||
|
||||
## Slots
|
||||
|
||||
| Slot | Description |
|
||||
| ---- | ------------------- |
|
||||
| | The button's label. |
|
||||
| Slot | Description |
|
||||
| ---------- | --------------------------------------------------------- |
|
||||
| | The button's label. |
|
||||
| `"prefix"` | Used to prepend an icon or similar element to the button. |
|
||||
| `"suffix"` | Used to append an icon or similar element to the button. |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';
|
||||
|
||||
/** @slot prefix - Used to prepend an icon or similar element to the dropdown item. */
|
||||
/** @slot suffix - Used to append an icon or similar element to the dropdown item. */
|
||||
/** @slot - The dropdown item's label. */
|
||||
/**
|
||||
* @slot prefix - Used to prepend an icon or similar element to the dropdown item.
|
||||
* @slot suffix - Used to append an icon or similar element to the dropdown item.
|
||||
* @slot - The dropdown item's label.
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-dropdown-item',
|
||||
|
||||
@@ -22,9 +22,11 @@ TODO
|
||||
|
||||
## Slots
|
||||
|
||||
| Slot | Description |
|
||||
| ---- | -------------------------- |
|
||||
| | The dropdown item's label. |
|
||||
| Slot | Description |
|
||||
| ---------- | ---------------------------------------------------------------- |
|
||||
| | The dropdown item's label. |
|
||||
| `"prefix"` | Used to prepend an icon or similar element to the dropdown item. |
|
||||
| `"suffix"` | Used to append an icon or similar element to the dropdown item. |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@@ -6,8 +6,10 @@ import { scrollIntoView } from '../../utilities/scroll';
|
||||
let id = 0;
|
||||
let openDropdowns = [];
|
||||
|
||||
/** @slot trigger - The dropdown's trigger, usually a `<sl-button>` element. */
|
||||
/** @slot - Used to group the dropdown's menu items. */
|
||||
/**
|
||||
* @slot trigger - The dropdown's trigger, usually a `<sl-button>` element.
|
||||
* @slot - Used to group the dropdown's menu items.
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-dropdown',
|
||||
|
||||
@@ -36,9 +36,10 @@ Type: `Promise<void>`
|
||||
|
||||
## Slots
|
||||
|
||||
| Slot | Description |
|
||||
| ---- | ---------------------------------------- |
|
||||
| | Used to group the dropdown's menu items. |
|
||||
| Slot | Description |
|
||||
| ----------- | -------------------------------------------------------- |
|
||||
| | Used to group the dropdown's menu items. |
|
||||
| `"trigger"` | The dropdown's trigger, usually a `<sl-button>` element. |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import { Component, Method, Prop, State, h } from '@stencil/core';
|
||||
|
||||
/** @slot before - Used to insert an addon before the input. */
|
||||
/** @slot after - Used to insert an addon after the input. */
|
||||
/** @slot prefix - Used to prepend an icon or similar element to the input. */
|
||||
/** @slot suffix - Used to append an icon or similar element to the input. */
|
||||
/**
|
||||
* @slot before - Used to insert an addon before the input.
|
||||
* @slot after - Used to insert an addon after the input.
|
||||
* @slot prefix - Used to prepend an icon or similar element to the input.
|
||||
* @slot suffix - Used to append an icon or similar element to the input.
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-input',
|
||||
|
||||
@@ -60,9 +60,12 @@ Type: `Promise<void>`
|
||||
|
||||
## Slots
|
||||
|
||||
| Slot | Description |
|
||||
| ---------- | ------------------------------------------------------- |
|
||||
| `"suffix"` | Used to append an icon or similar element to the input. |
|
||||
| Slot | Description |
|
||||
| ---------- | -------------------------------------------------------- |
|
||||
| `"after"` | Used to insert an addon after the input. |
|
||||
| `"before"` | Used to insert an addon before the input. |
|
||||
| `"prefix"` | Used to prepend an icon or similar element to the input. |
|
||||
| `"suffix"` | Used to append an icon or similar element to the input. |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@@ -34,9 +34,10 @@ Type: `Promise<void>`
|
||||
|
||||
## Slots
|
||||
|
||||
| Slot | Description |
|
||||
| ---- | -------------------------------------------- |
|
||||
| | Used for grouping tab panels in the tab-set. |
|
||||
| Slot | Description |
|
||||
| ------- | -------------------------------------------- |
|
||||
| | Used for grouping tab panels in the tab-set. |
|
||||
| `"nav"` | Used for grouping tabs in the tab-set. |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
@@ -3,8 +3,10 @@ import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h
|
||||
import { getOffset } from '../../utilities/offset';
|
||||
import { scrollIntoView } from '../../utilities/scroll';
|
||||
|
||||
/** @slot nav - Used for grouping tabs in the tab-set. */
|
||||
/** @slot - Used for grouping tab panels in the tab-set. */
|
||||
/**
|
||||
* @slot nav - Used for grouping tabs in the tab-set.
|
||||
* @slot - Used for grouping tab panels in the tab-set.
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'sl-tab-set',
|
||||
|
||||
8
src/icons/close.svg
Normal file
8
src/icons/close.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
||||
<g stroke="currentColor" stroke-width="2">
|
||||
<path d="M3.5,12.5 L12.3466797,3.65332031"></path>
|
||||
<path d="M3.5,12.5 L12.3466797,3.65332031" transform="translate(8.000000, 8.000000) scale(-1, 1) translate(-8.000000, -8.000000) "></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 482 B |
Binary file not shown.
396
src/index.html
396
src/index.html
@@ -62,6 +62,47 @@
|
||||
<input class="color-picker" type="color" value="#009dff">
|
||||
</header>
|
||||
|
||||
<h2>Alert</h2>
|
||||
|
||||
<sl-alert type="primary">This is a primary alert, if you couldn't tell.</sl-alert>
|
||||
<sl-alert type="success">This is a success alert, if you couldn't tell.</sl-alert>
|
||||
<sl-alert type="info">This is a info alert, if you couldn't tell.</sl-alert>
|
||||
<sl-alert type="warning">This is a warning alert, if you couldn't tell.</sl-alert>
|
||||
<sl-alert type="danger">This is a danger alert, if you couldn't tell.</sl-alert>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-alert type="primary">
|
||||
<ion-icon slot="icon" name="information-circle-outline"></ion-icon>
|
||||
This is a primary alert, if you couldn't tell.
|
||||
</sl-alert>
|
||||
<sl-alert type="success">
|
||||
<ion-icon slot="icon" name="checkmark-outline"></ion-icon>
|
||||
This is a success alert, if you couldn't tell.
|
||||
</sl-alert>
|
||||
<sl-alert type="info">
|
||||
<ion-icon slot="icon" name="settings-outline"></ion-icon>
|
||||
This is a info alert, if you couldn't tell.
|
||||
</sl-alert>
|
||||
<sl-alert type="warning">
|
||||
<ion-icon slot="icon" name="alert-circle-outline"></ion-icon>
|
||||
This is a warning alert, if you couldn't tell.
|
||||
</sl-alert>
|
||||
<sl-alert type="danger">
|
||||
<ion-icon slot="icon" name="alarm-outline"></ion-icon>
|
||||
This is a danger alert, if you couldn't tell.
|
||||
</sl-alert>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-alert type="primary" closable>This is a primary alert, if you couldn't tell.</sl-alert>
|
||||
<sl-alert type="success" closable>This is a success alert, if you couldn't tell.</sl-alert>
|
||||
<sl-alert type="info" closable>This is a info alert, if you couldn't tell.</sl-alert>
|
||||
<sl-alert type="warning" closable>This is a warning alert, if you couldn't tell.</sl-alert>
|
||||
<sl-alert type="danger" closable>This is a danger alert, if you couldn't tell.</sl-alert>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Button</h2>
|
||||
|
||||
<sl-button type="default">Default</sl-button>
|
||||
@@ -235,6 +276,137 @@
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Checkbox</h2>
|
||||
<sl-checkbox>Default</sl-checkbox><br><br>
|
||||
<sl-checkbox checked>Checked</sl-checkbox><br><br>
|
||||
<sl-checkbox indeterminate>Indeterminate</sl-checkbox><br><br>
|
||||
<sl-checkbox disabled>Disabled</sl-checkbox><br><br>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Color Palettes</h2>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-5);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-10);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-15);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-20);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-25);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-30);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-35);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-40);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-45);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-50);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-55);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-60);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-65);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-70);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-75);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-80);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-85);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-90);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-95);"></span>
|
||||
<br>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-5);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-10);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-15);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-20);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-25);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-30);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-35);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-40);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-45);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-50);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-55);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-60);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-65);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-70);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-75);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-80);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-85);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-90);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-95);"></span>
|
||||
<br>
|
||||
<span class="swatch" style="background: var(--sl-color-success-5);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-10);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-15);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-20);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-25);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-30);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-35);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-40);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-45);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-50);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-55);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-60);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-65);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-70);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-75);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-80);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-85);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-90);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-95);"></span>
|
||||
<br>
|
||||
<span class="swatch" style="background: var(--sl-color-info-5);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-10);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-15);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-20);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-25);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-30);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-35);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-40);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-45);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-50);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-55);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-60);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-65);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-70);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-75);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-80);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-85);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-90);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-95);"></span>
|
||||
<br>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-5);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-10);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-15);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-20);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-25);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-30);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-35);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-40);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-45);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-50);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-55);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-60);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-65);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-70);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-75);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-80);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-85);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-90);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-95);"></span>
|
||||
<br>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-5);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-10);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-15);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-20);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-25);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-30);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-35);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-40);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-45);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-50);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-55);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-60);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-65);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-70);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-75);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-80);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-85);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-90);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-95);"></span>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Dropdown</h2>
|
||||
|
||||
<sl-dropdown>
|
||||
@@ -296,14 +468,6 @@
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Spinner</h2>
|
||||
|
||||
<sl-spinner></sl-spinner>
|
||||
<sl-spinner size="2em"></sl-spinner>
|
||||
<sl-spinner size="3em"></sl-spinner>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Input</h2>
|
||||
|
||||
<sl-input type="text" placeholder="Small" size="small"></sl-input>
|
||||
@@ -425,25 +589,6 @@
|
||||
|
||||
<sl-input type="number" placeholder="Number"></sl-input>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Textarea</h2>
|
||||
|
||||
<sl-textarea placeholder="Standard" resize="none"></sl-textarea><br><br>
|
||||
|
||||
<sl-textarea placeholder="Resizable" resize="vertical"></sl-textarea><br><br>
|
||||
|
||||
<sl-textarea placeholder="Auto" resize="auto"></sl-textarea><br><br>
|
||||
|
||||
<sl-textarea placeholder="Disabled" resize="none" disabled></sl-textarea><br><br>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Checkbox</h2>
|
||||
<sl-checkbox>Default</sl-checkbox><br><br>
|
||||
<sl-checkbox checked>Checked</sl-checkbox><br><br>
|
||||
<sl-checkbox indeterminate>Indeterminate</sl-checkbox><br><br>
|
||||
<sl-checkbox disabled>Disabled</sl-checkbox><br><br>
|
||||
|
||||
<hr>
|
||||
|
||||
@@ -454,13 +599,6 @@
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Switch</h2>
|
||||
<sl-switch>Switch</sl-switch><br><br>
|
||||
<sl-switch checked>Checked</sl-switch><br><br>
|
||||
<sl-switch disabled>Disabled</sl-switch><br><br>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Range</h2>
|
||||
|
||||
<sl-range min="0" max="100" step="1"></sl-range>
|
||||
@@ -490,30 +628,18 @@
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Tooltip</h2>
|
||||
<h2>Spinner</h2>
|
||||
|
||||
<sl-button>Tooltip</sl-button>
|
||||
<sl-tooltip>This is a tooltip</sl-tooltip>
|
||||
<sl-spinner></sl-spinner>
|
||||
<sl-spinner size="2em"></sl-spinner>
|
||||
<sl-spinner size="3em"></sl-spinner>
|
||||
|
||||
<sl-button>Tooltip With Arrow</sl-button>
|
||||
<sl-tooltip arrow>This is a tooltip with arrow</sl-tooltip>
|
||||
<hr>
|
||||
|
||||
<a href="#">Tooltip On Link</a>
|
||||
<sl-tooltip>This is a tooltip on a link</sl-tooltip>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-button>Top</sl-button>
|
||||
<sl-tooltip placement="top" arrow>Tooltip</sl-tooltip>
|
||||
|
||||
<sl-button>Bottom</sl-button>
|
||||
<sl-tooltip placement="bottom" arrow>Tooltip</sl-tooltip>
|
||||
|
||||
<sl-button>Left</sl-button>
|
||||
<sl-tooltip placement="left" arrow>Tooltip</sl-tooltip>
|
||||
|
||||
<sl-button>Right</sl-button>
|
||||
<sl-tooltip placement="right" arrow>Tooltip</sl-tooltip>
|
||||
<h2>Switch</h2>
|
||||
<sl-switch>Switch</sl-switch><br><br>
|
||||
<sl-switch checked>Checked</sl-switch><br><br>
|
||||
<sl-switch disabled>Disabled</sl-switch><br><br>
|
||||
|
||||
<hr>
|
||||
|
||||
@@ -605,126 +731,46 @@
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Colors</h2>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-5);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-10);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-15);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-20);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-25);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-30);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-35);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-40);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-45);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-50);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-55);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-60);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-65);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-70);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-75);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-80);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-85);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-90);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-primary-95);"></span>
|
||||
<br>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-5);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-10);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-15);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-20);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-25);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-30);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-35);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-40);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-45);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-50);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-55);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-60);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-65);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-70);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-75);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-80);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-85);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-90);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-gray-95);"></span>
|
||||
<br>
|
||||
<span class="swatch" style="background: var(--sl-color-success-5);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-10);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-15);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-20);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-25);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-30);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-35);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-40);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-45);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-50);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-55);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-60);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-65);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-70);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-75);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-80);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-85);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-90);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-success-95);"></span>
|
||||
<br>
|
||||
<span class="swatch" style="background: var(--sl-color-info-5);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-10);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-15);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-20);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-25);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-30);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-35);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-40);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-45);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-50);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-55);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-60);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-65);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-70);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-75);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-80);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-85);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-90);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-info-95);"></span>
|
||||
<br>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-5);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-10);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-15);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-20);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-25);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-30);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-35);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-40);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-45);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-50);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-55);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-60);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-65);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-70);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-75);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-80);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-85);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-90);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-warning-95);"></span>
|
||||
<br>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-5);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-10);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-15);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-20);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-25);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-30);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-35);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-40);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-45);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-50);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-55);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-60);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-65);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-70);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-75);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-80);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-85);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-90);"></span>
|
||||
<span class="swatch" style="background: var(--sl-color-danger-95);"></span>
|
||||
<h2>Textarea</h2>
|
||||
|
||||
<sl-textarea placeholder="Standard" resize="none"></sl-textarea><br><br>
|
||||
|
||||
<sl-textarea placeholder="Resizable" resize="vertical"></sl-textarea><br><br>
|
||||
|
||||
<sl-textarea placeholder="Auto" resize="auto"></sl-textarea><br><br>
|
||||
|
||||
<sl-textarea placeholder="Disabled" resize="none" disabled></sl-textarea><br><br>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Tooltip</h2>
|
||||
|
||||
<sl-button>Tooltip</sl-button>
|
||||
<sl-tooltip>This is a tooltip</sl-tooltip>
|
||||
|
||||
<sl-button>Tooltip With Arrow</sl-button>
|
||||
<sl-tooltip arrow>This is a tooltip with arrow</sl-tooltip>
|
||||
|
||||
<a href="#">Tooltip On Link</a>
|
||||
<sl-tooltip>This is a tooltip on a link</sl-tooltip>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-button>Top</sl-button>
|
||||
<sl-tooltip placement="top" arrow>Tooltip</sl-tooltip>
|
||||
|
||||
<sl-button>Bottom</sl-button>
|
||||
<sl-tooltip placement="bottom" arrow>Tooltip</sl-tooltip>
|
||||
|
||||
<sl-button>Left</sl-button>
|
||||
<sl-tooltip placement="left" arrow>Tooltip</sl-tooltip>
|
||||
|
||||
<sl-button>Right</sl-button>
|
||||
<sl-tooltip placement="right" arrow>Tooltip</sl-tooltip>
|
||||
|
||||
<hr>
|
||||
|
||||
© 2020 A Beautiful Site, LLC
|
||||
|
||||
<script>
|
||||
const html = document.documentElement;
|
||||
|
||||
Reference in New Issue
Block a user