mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Started
This commit is contained in:
Cory LaViska
@@ -16,6 +16,7 @@
|
||||
- [Alert](/components/alert.md)
|
||||
- [Button](/components/button.md)
|
||||
- [Checkbox](/components/checkbox.md)
|
||||
- [Color Picker](/components/color-picker.md)
|
||||
- [Dialog](/components/dialog.md)
|
||||
- [Dropdown](/components/dropdown.md)
|
||||
- [Dropdown Item](/components/dropdown-item.md)
|
||||
|
||||
13
src/components.d.ts
vendored
13
src/components.d.ts
vendored
@@ -96,6 +96,8 @@ export namespace Components {
|
||||
*/
|
||||
"value": string;
|
||||
}
|
||||
interface SlColorPicker {
|
||||
}
|
||||
interface SlDialog {
|
||||
/**
|
||||
* Hides the dialog
|
||||
@@ -586,6 +588,12 @@ declare global {
|
||||
prototype: HTMLSlCheckboxElement;
|
||||
new (): HTMLSlCheckboxElement;
|
||||
};
|
||||
interface HTMLSlColorPickerElement extends Components.SlColorPicker, HTMLStencilElement {
|
||||
}
|
||||
var HTMLSlColorPickerElement: {
|
||||
prototype: HTMLSlColorPickerElement;
|
||||
new (): HTMLSlColorPickerElement;
|
||||
};
|
||||
interface HTMLSlDialogElement extends Components.SlDialog, HTMLStencilElement {
|
||||
}
|
||||
var HTMLSlDialogElement: {
|
||||
@@ -692,6 +700,7 @@ declare global {
|
||||
"sl-alert": HTMLSlAlertElement;
|
||||
"sl-button": HTMLSlButtonElement;
|
||||
"sl-checkbox": HTMLSlCheckboxElement;
|
||||
"sl-color-picker": HTMLSlColorPickerElement;
|
||||
"sl-dialog": HTMLSlDialogElement;
|
||||
"sl-dropdown": HTMLSlDropdownElement;
|
||||
"sl-dropdown-divider": HTMLSlDropdownDividerElement;
|
||||
@@ -814,6 +823,8 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"value"?: string;
|
||||
}
|
||||
interface SlColorPicker {
|
||||
}
|
||||
interface SlDialog {
|
||||
/**
|
||||
* When true, the dialog will not be dismissed when the user clicks on the overlay.
|
||||
@@ -1340,6 +1351,7 @@ declare namespace LocalJSX {
|
||||
"sl-alert": SlAlert;
|
||||
"sl-button": SlButton;
|
||||
"sl-checkbox": SlCheckbox;
|
||||
"sl-color-picker": SlColorPicker;
|
||||
"sl-dialog": SlDialog;
|
||||
"sl-dropdown": SlDropdown;
|
||||
"sl-dropdown-divider": SlDropdownDivider;
|
||||
@@ -1366,6 +1378,7 @@ declare module "@stencil/core" {
|
||||
"sl-alert": LocalJSX.SlAlert & JSXBase.HTMLAttributes<HTMLSlAlertElement>;
|
||||
"sl-button": LocalJSX.SlButton & JSXBase.HTMLAttributes<HTMLSlButtonElement>;
|
||||
"sl-checkbox": LocalJSX.SlCheckbox & JSXBase.HTMLAttributes<HTMLSlCheckboxElement>;
|
||||
"sl-color-picker": LocalJSX.SlColorPicker & JSXBase.HTMLAttributes<HTMLSlColorPickerElement>;
|
||||
"sl-dialog": LocalJSX.SlDialog & JSXBase.HTMLAttributes<HTMLSlDialogElement>;
|
||||
"sl-dropdown": LocalJSX.SlDropdown & JSXBase.HTMLAttributes<HTMLSlDropdownElement>;
|
||||
"sl-dropdown-divider": LocalJSX.SlDropdownDivider & JSXBase.HTMLAttributes<HTMLSlDropdownDividerElement>;
|
||||
|
||||
137
src/components/color-picker/color-picker.scss
Normal file
137
src/components/color-picker/color-picker.scss
Normal file
@@ -0,0 +1,137 @@
|
||||
@import 'component';
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
|
||||
--grid-width: 260px;
|
||||
--grid-height: 200px;
|
||||
--sight-size: 14px;
|
||||
--slider-size: 14px;
|
||||
}
|
||||
|
||||
.sl-color-picker__menu {
|
||||
// position: absolute;
|
||||
max-height: 50vh;
|
||||
font-family: var(--sl-font-sans);
|
||||
font-size: var(--sl-font-size-medium);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
color: var(--color);
|
||||
background-color: var(--sl-color-white);
|
||||
border: solid 1px var(--sl-color-gray-90);
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--sl-shadow-large);
|
||||
padding-top: var(--sl-spacing-x-small);
|
||||
padding-bottom: var(--sl-spacing-x-small);
|
||||
// opacity: 0;
|
||||
transition: var(--sl-transition-fast) opacity;
|
||||
|
||||
// &[hidden] {
|
||||
// display: none;
|
||||
// }
|
||||
}
|
||||
|
||||
.sl-color-picker--open .sl-color-picker__menu {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sl-color-picker__grid {
|
||||
position: relative;
|
||||
width: var(--grid-width);
|
||||
height: var(--grid-height);
|
||||
margin-bottom: 8px;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.sl-color-picker__grid-gradient {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
|
||||
}
|
||||
}
|
||||
|
||||
.sl-color-picker__sight {
|
||||
position: absolute;
|
||||
width: var(--sight-size);
|
||||
height: var(--sight-size);
|
||||
border-radius: 50%;
|
||||
border: solid 1px rgba(0, 0, 0, 0.125);
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125), inset 0 0 0 1px rgba(0, 0, 0, 0.125);
|
||||
border: solid 2px white;
|
||||
margin-top: calc(var(--sight-size) / -2);
|
||||
margin-left: calc(var(--sight-size) / -2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sl-color-picker__hue {
|
||||
position: relative;
|
||||
height: 12px;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
rgb(255, 0, 0) 0%,
|
||||
rgb(255, 255, 0) 17%,
|
||||
rgb(0, 255, 0) 33%,
|
||||
rgb(0, 255, 255) 50%,
|
||||
rgb(0, 0, 255) 67%,
|
||||
rgb(255, 0, 255) 83%,
|
||||
rgb(255, 0, 0) 100%
|
||||
);
|
||||
margin-bottom: 8px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.sl-color-picker__alpha {
|
||||
position: relative;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%),
|
||||
linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(45deg, #eee 25%, transparent 25%);
|
||||
background-size: 12px 12px;
|
||||
background-position: 0 0, 0 0, -6px -6px, 6px 6px;
|
||||
|
||||
.sl-color-picker__alpha-gradient {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.sl-color-picker__slider {
|
||||
position: absolute;
|
||||
top: calc(50% - var(--slider-size) / 2);
|
||||
width: var(--slider-size);
|
||||
height: var(--slider-size);
|
||||
background-color: white;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 50%;
|
||||
margin-left: calc(var(--slider-size) / -2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sl-color-picker__swatches {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
grid-gap: 6px;
|
||||
}
|
||||
|
||||
.sl-color-picker__swatch {
|
||||
flex: 0 0 auto;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
border: solid 1px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
118
src/components/color-picker/color-picker.tsx
Normal file
118
src/components/color-picker/color-picker.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import { Component, h } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'sl-color-picker',
|
||||
styleUrl: 'color-picker.scss',
|
||||
shadow: true
|
||||
})
|
||||
export class ColorPicker {
|
||||
menu: HTMLElement;
|
||||
trigger: HTMLElement;
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div ref={el => (this.trigger = el)} class="sl-color-picker">
|
||||
<div class="sl-color-picker__trigger">Trigger</div>
|
||||
|
||||
<div ref={el => (this.menu = el)} class="sl-color-picker__menu">
|
||||
<div class="sl-color-picker__grid" style={{ backgroundColor: 'red' }}>
|
||||
<div class="sl-color-picker__grid-gradient" />
|
||||
<span
|
||||
class="sl-color-picker__sight"
|
||||
style={{
|
||||
transform: `translate(100px, 100px)`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sl-color-picker__hue">
|
||||
<span
|
||||
class="sl-color-picker__slider"
|
||||
style={{
|
||||
transform: 'translateX(20px)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sl-color-picker__alpha">
|
||||
<div
|
||||
class="sl-color-picker__alpha-gradient"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(to right, rgba(255, 0, 0, 0) 0%, rgb(255, 0, 0) 100%)`
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
class="sl-color-picker__slider"
|
||||
style={{
|
||||
transform: 'translateX(60px)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sl-color-picker__preview"></div>
|
||||
|
||||
<div class="sl-color-picker__inputs">
|
||||
<div class="sl-color-picker__input sl-color-picker__input--hex">
|
||||
<label>Hex</label>
|
||||
<input type="text" pattern="[a-fA-F\d]+" />
|
||||
</div>
|
||||
|
||||
<div class="sl-color-picker__input sl-color-picker__input--rgba">
|
||||
<label>R</label>
|
||||
<input type="number" min="0" max="255" />
|
||||
</div>
|
||||
|
||||
<div class="sl-color-picker__input sl-color-picker__input--rgba">
|
||||
<label>G</label>
|
||||
<input type="number" min="0" max="255" />
|
||||
</div>
|
||||
|
||||
<div class="sl-color-picker__input sl-color-picker__input--rgba">
|
||||
<label>B</label>
|
||||
<input type="number" min="0" max="255" />
|
||||
</div>
|
||||
|
||||
<div class="sl-color-picker__input sl-color-picker__input--hsl">
|
||||
<label>H</label>
|
||||
<input type="number" min="0" max="255" />
|
||||
</div>
|
||||
|
||||
<div class="sl-color-picker__input sl-color-picker__input--hsl">
|
||||
<label>S</label>
|
||||
<input type="number" min="0" max="255" />
|
||||
</div>
|
||||
|
||||
<div class="sl-color-picker__input sl-color-picker__input--hsl">
|
||||
<label>L</label>
|
||||
<input type="number" min="0" max="255" />
|
||||
</div>
|
||||
|
||||
<div class="sl-color-picker__input sl-color-picker__input--rgba">
|
||||
<label>A</label>
|
||||
<input type="number" min="0" max="100" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sl-color-picker__swatches">
|
||||
<div class="sl-color-picker__swatch" style={{ backgroundColor: '#d0021b' }}></div>
|
||||
<div class="sl-color-picker__swatch" style={{ backgroundColor: '#f5a623' }}></div>
|
||||
<div class="sl-color-picker__swatch" style={{ backgroundColor: '#f8e71c' }}></div>
|
||||
<div class="sl-color-picker__swatch" style={{ backgroundColor: '#8b572a' }}></div>
|
||||
<div class="sl-color-picker__swatch" style={{ backgroundColor: '#7ed321' }}></div>
|
||||
<div class="sl-color-picker__swatch" style={{ backgroundColor: '#417505' }}></div>
|
||||
<div class="sl-color-picker__swatch" style={{ backgroundColor: '#bd10e0' }}></div>
|
||||
<div class="sl-color-picker__swatch" style={{ backgroundColor: '#9013fe' }}></div>
|
||||
<div class="sl-color-picker__swatch" style={{ backgroundColor: '#4a90e2' }}></div>
|
||||
<div class="sl-color-picker__swatch" style={{ backgroundColor: '#50e3c2' }}></div>
|
||||
<div class="sl-color-picker__swatch" style={{ backgroundColor: '#b8e986' }}></div>
|
||||
<div class="sl-color-picker__swatch" style={{ backgroundColor: '#000' }}></div>
|
||||
<div class="sl-color-picker__swatch" style={{ backgroundColor: '#444' }}></div>
|
||||
<div class="sl-color-picker__swatch" style={{ backgroundColor: '#888' }}></div>
|
||||
<div class="sl-color-picker__swatch" style={{ backgroundColor: '#ccc' }}></div>
|
||||
<div class="sl-color-picker__swatch" style={{ backgroundColor: '#fff' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
13
src/components/color-picker/readme.md
Normal file
13
src/components/color-picker/readme.md
Normal file
@@ -0,0 +1,13 @@
|
||||
# Color Picker
|
||||
|
||||
```html preview
|
||||
<sl-color-picker></sl-color-picker>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
|
||||
Reference in New Issue
Block a user