Add react-color

This commit is contained in:
Jared Palmer 2020-01-05 11:52:45 -08:00
parent 91bc9df37a
commit de114b9f59
4 changed files with 278 additions and 165 deletions

View file

@ -1,7 +1,7 @@
/* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
@font-face {
font-family: "Virgil";
src: url("https://uploads.codesandbox.io/uploads/user/ed077012-e728-4a42-8395-cbd299149d62/AflB-FG_Virgil.ttf");
font-family: 'Virgil';
src: url('https://uploads.codesandbox.io/uploads/user/ed077012-e728-4a42-8395-cbd299149d62/AflB-FG_Virgil.ttf');
font-display: swap;
}
@ -22,7 +22,6 @@ body {
.sidePanel {
width: 230px;
background-color: #eee;
padding: 10px;
overflow-y: auto;
@ -42,20 +41,25 @@ body {
.panelColumn {
display: flex;
flex-direction: column;
h5 {
margin-top: 0px;
margin-bottom: 8px;
}
}
}
.tool {
position: relative;
input[type="radio"] {
input[type='radio'] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
input[type="radio"] {
input[type='radio'] {
& + .toolIcon {
background-color: #ddd;
@ -91,11 +95,11 @@ label {
}
}
input[type="number"] {
input[type='number'] {
width: 30px;
}
input[type="color"] {
input[type='color'] {
margin: 2px;
}
@ -134,3 +138,29 @@ button {
cursor: not-allowed;
}
}
.popover {
position: absolute;
z-index: 2;
.cover {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
.swatch {
height: 24px;
width: 24px;
margin-right: 4px;
}
.swatch-input {
font-size: 16px;
border-radius: 2px;
padding: 2px;
border: 1px solid #ddd;
}