Skip to content

Commit

Permalink
feat(color-picker): add support for alpha channel (deprecates `hideCh…
Browse files Browse the repository at this point in the history
…annels`, `hideHex`, `hideSaved`) (#2841)

**Related Issue:** #749 

## Summary

This brings opacity support to the color picker along with some design
updates.
  • Loading branch information
jcfranco authored May 3, 2023
1 parent 0244af3 commit 83c5808
Show file tree
Hide file tree
Showing 18 changed files with 2,966 additions and 1,276 deletions.
519 changes: 355 additions & 164 deletions src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts

Large diffs are not rendered by default.

36 changes: 20 additions & 16 deletions src/components/color-picker-hex-input/color-picker-hex-input.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,31 @@
}

.container {
@apply inline-grid w-full items-center;
grid-template-columns: 1fr auto;
@apply flex w-full items-center flex-nowrap;
}

.preview {
grid-column: 2 / 3;

@apply pointer-events-none
my-0
mx-1
flex
items-center;
.hex-input {
@apply grow uppercase;
}

.preview,
.input {
grid-row: 1;
.opacity-input {
inline-size: 68px;
margin-inline-start: -1px;
}

.input {
grid-column: 1 / 3;
:host([scale="s"]) {
.container {
@apply flex-wrap gap-y-0.5;
}

.opacity-input {
inline-size: unset;
margin-inline-start: unset;
}
}

@apply w-full uppercase;
:host([scale="l"]) {
.opacity-input {
inline-size: 88px;
}
}
Loading

0 comments on commit 83c5808

Please sign in to comment.