sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle the color picker a touch (#920)

Browse Source
This commit is contained in:
Jed Fox
2020-03-15 13:26:52 -04:00
committed by GitHub
parent d834ff4d89
commit e44801123a
8 changed files with 203 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/ColorPicker.css
View File

@ -1,28 +1,18 @@
.color-picker {
width: 205px;
background: rgb(255, 255, 255);
border: 0px solid rgba(0, 0, 0, 0.25);
box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px;
border-radius: 4px;
position: relative;
position: absolute;
left: -5.5px;
}
.color-picker-control-container {
display: flex;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
}
.color-picker-triangle-shadow {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 9px 10px;
border-color: transparent transparent rgba(0, 0, 0, 0.1);
position: absolute;
top: -11px;
left: 12px;
}
.color-picker-triangle {
width: 0px;
height: 0px;
@ -34,13 +24,20 @@
left: 12px;
}
.color-picker-content {
padding: 1rem 0.5rem 0.5rem 1rem;
.color-picker-triangle-shadow {
border-color: transparent transparent rgba(0, 0, 0, 0.1);
top: -11px;
}
.colors-gallery {
display: flex;
flex-wrap: wrap;
.color-picker-content {
padding: 0.5rem 0.5rem;
display: grid;
grid-template-columns: repeat(5, auto);
grid-gap: 0.5rem;
}
.color-picker-content .color-input-container {
grid-column: 1 / span 5;
}
.color-picker-swatch {
@ -49,7 +46,7 @@
width: 1.875rem;
cursor: pointer;
border-radius: 4px;
margin: 0px 0.375rem 0.375rem 0px;
margin: 0;
box-sizing: border-box;
border: 1px solid #ddd;
}
@ -68,6 +65,9 @@
right: 0px;
bottom: 0px;
left: 0px;
}
.color-picker-transparent,
.color-picker-label-swatch {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
left center;
}
@ -81,6 +81,27 @@
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
position: relative;
}
.color-input-container:focus-within .color-picker-hash {
box-shadow: 0 0 0 2px #a5d8ff;
}
.color-input-container:focus-within .color-picker-hash::before,
.color-input-container:focus-within .color-picker-hash::after {
content: "";
width: 1px;
height: 100%;
position: absolute;
top: 0;
}
.color-input-container:focus-within .color-picker-hash::before {
background: #dee2e6;
right: -1px;
}
.color-input-container:focus-within .color-picker-hash::after {
background: #fff;
right: -2px;
}
.color-input-container {
@ -88,14 +109,14 @@
}
.color-picker-input {
width: 6.25em;
width: 12ch; /* length of `transparent` + 1 */
margin: 0;
font-size: 1rem;
color: #343a40;
border: 0px;
outline: none;
height: 1.75em;
box-shadow: #dee2e6 0px 0px 0px 1px inset;
box-sizing: content-box;
border-radius: 0px 4px 4px 0px;
float: left;
padding: 1px;
@ -108,6 +129,19 @@
width: 1.875rem;
margin-right: 0.25rem;
border: 1px solid #dee2e6;
position: relative;
overflow: hidden;
background-color: transparent !important;
}
.color-picker-label-swatch::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--swatch-color);
}
.color-picker-keybinding {