kopia lustrzana https://github.com/shoelace-style/shoelace
298 wiersze
7.0 KiB
SCSS
298 wiersze
7.0 KiB
SCSS
@import 'component';
|
|
|
|
/**
|
|
* @prop --grid-width: The width of the color grid.
|
|
* @prop --grid-height: The height of the color grid.
|
|
* @prop --grid-handle-size: The size of the color grid's handle.
|
|
* @prop --slider-height: The height of the hue and alpha sliders.
|
|
* @prop --slider-handle-size: The diameter of the slider's handle.
|
|
*/
|
|
:host {
|
|
display: inline-block;
|
|
|
|
--grid-width: 260px;
|
|
--grid-height: 200px;
|
|
--grid-handle-size: 12px;
|
|
--slider-height: 10px;
|
|
--slider-handle-size: 12px;
|
|
}
|
|
|
|
.color-picker {
|
|
width: var(--grid-width);
|
|
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-radius: var(--sl-border-radius-medium);
|
|
user-select: none;
|
|
}
|
|
|
|
.color-picker--inline {
|
|
border: solid 1px var(--sl-color-gray-90);
|
|
box-shadow: var(--sl-shadow-small);
|
|
}
|
|
|
|
.color-picker__grid {
|
|
position: relative;
|
|
height: var(--grid-height);
|
|
background-image: linear-gradient(
|
|
to bottom,
|
|
hsl(0, 0%, 100%) 0%,
|
|
hsla(0, 0%, 100%, 0) 50%,
|
|
hsla(0, 0%, 0%, 0) 50%,
|
|
hsl(0, 0%, 0%) 100%
|
|
),
|
|
linear-gradient(to right, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
|
|
border-top-left-radius: var(--sl-border-radius-medium);
|
|
border-top-right-radius: var(--sl-border-radius-medium);
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.color-picker__grid-handle {
|
|
position: absolute;
|
|
width: var(--grid-handle-size);
|
|
height: var(--grid-handle-size);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
|
|
border: solid 2px white;
|
|
margin-top: calc(var(--grid-handle-size) / -2);
|
|
margin-left: calc(var(--grid-handle-size) / -2);
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 1px hsl(var(--sl-focus-ring-hue), var(--sl-focus-ring-saturation), var(--sl-focus-ring-lightness)),
|
|
inset 0 0 0 1px hsl(var(--sl-focus-ring-hue), var(--sl-focus-ring-saturation), var(--sl-focus-ring-lightness)),
|
|
var(--sl-focus-ring-box-shadow);
|
|
}
|
|
}
|
|
|
|
.color-picker__controls {
|
|
padding: var(--sl-spacing-small);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.color-picker__sliders {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.color-picker__slider {
|
|
position: relative;
|
|
height: var(--slider-height);
|
|
border-radius: var(--sl-border-radius-pill);
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
|
|
|
|
&:not(:last-of-type) {
|
|
margin-bottom: var(--sl-spacing-small);
|
|
}
|
|
}
|
|
|
|
.color-picker__slider-handle {
|
|
position: absolute;
|
|
top: calc(50% - var(--slider-handle-size) / 2);
|
|
width: var(--slider-handle-size);
|
|
height: var(--slider-handle-size);
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
|
|
margin-left: calc(var(--slider-handle-size) / -2);
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 1px hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%),
|
|
var(--sl-focus-ring-box-shadow);
|
|
}
|
|
}
|
|
|
|
.color-picker__hue {
|
|
background-image: linear-gradient(
|
|
to right,
|
|
rgb(255, 0, 0) 0%,
|
|
rgb(255, 255, 0) 17%,
|
|
rgb(0, 255, 0) 33%,
|
|
rgb(0, 255, 255) 50%,
|
|
rgb(0, 0, 255) 67%,
|
|
rgb(255, 0, 255) 83%,
|
|
rgb(255, 0, 0) 100%
|
|
);
|
|
}
|
|
|
|
.color-picker__alpha {
|
|
.color-picker__alpha-gradient {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
}
|
|
}
|
|
|
|
.color-picker__preview {
|
|
flex: 0 0 auto;
|
|
position: relative;
|
|
width: var(--sl-input-height-small);
|
|
height: var(--sl-input-height-small);
|
|
border-radius: 50%;
|
|
margin-left: var(--sl-spacing-medium);
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background-color: currentColor;
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
|
|
.color-picker__preview-color {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
border: solid 1px rgba(0, 0, 0, 0.125);
|
|
}
|
|
|
|
.color-picker__user-input {
|
|
display: flex;
|
|
padding: 0 var(--sl-spacing-small) var(--sl-spacing-small) var(--sl-spacing-small);
|
|
|
|
sl-input {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
sl-button {
|
|
flex: 0 0 auto;
|
|
margin-left: var(--sl-spacing-medium);
|
|
}
|
|
}
|
|
|
|
.color-picker__swatches {
|
|
display: grid;
|
|
grid-template-columns: repeat(8, 1fr);
|
|
grid-gap: 6px;
|
|
justify-items: center;
|
|
border-top: solid 1px var(--sl-color-gray-90);
|
|
padding: var(--sl-spacing-small);
|
|
}
|
|
|
|
.color-picker__swatch {
|
|
flex: 0 0 auto;
|
|
position: relative;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 2px;
|
|
|
|
.color-picker__swatch-color {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: solid 1px rgba(0, 0, 0, 0.125);
|
|
border-radius: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: var(--sl-focus-ring-box-shadow);
|
|
}
|
|
}
|
|
|
|
.color-picker__transparent-bg {
|
|
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: 10px 10px;
|
|
background-position: 0 0, 0 0, -5px -5px, 5px 5px;
|
|
}
|
|
|
|
.color-picker--disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
|
|
.color-picker__grid,
|
|
.color-picker__grid-handle,
|
|
.color-picker__slider,
|
|
.color-picker__slider-handle,
|
|
.color-picker__preview,
|
|
.color-picker__swatch,
|
|
.color-picker__swatch-color {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
// Color dropdown
|
|
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
|
|
.color-dropdown::part(panel) {
|
|
overflow: visible;
|
|
}
|
|
|
|
.color-dropdown__trigger {
|
|
display: inline-block;
|
|
position: relative;
|
|
background-color: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: var(--sl-transition-fast) box-shadow;
|
|
-webkit-appearance: none;
|
|
|
|
&.color-dropdown__trigger--small {
|
|
width: var(--sl-input-height-small);
|
|
height: var(--sl-input-height-small);
|
|
border-radius: var(--sl-border-radius-circle);
|
|
}
|
|
|
|
&.color-dropdown__trigger--medium {
|
|
width: var(--sl-input-height-medium);
|
|
height: var(--sl-input-height-medium);
|
|
border-radius: var(--sl-border-radius-circle);
|
|
}
|
|
|
|
&.color-dropdown__trigger--large {
|
|
width: var(--sl-input-height-large);
|
|
height: var(--sl-input-height-large);
|
|
border-radius: var(--sl-border-radius-circle);
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background-color: currentColor;
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
|
|
transition: inherit;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&:focus:not(.color-dropdown__trigger--disabled) {
|
|
box-shadow: var(--sl-focus-ring-box-shadow);
|
|
outline: none;
|
|
|
|
&::before {
|
|
box-shadow: inset 0 0 0 1px var(--sl-color-primary-50);
|
|
}
|
|
}
|
|
|
|
&.color-dropdown__trigger--disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|