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

Update colors from open colors (#406)

Browse Source 
* Update to open colors

* Update more

* More colors

* Dahh

* More

* Border none

* More

* Update
This commit is contained in:
Lipis 2020-01-17 02:54:21 +02:00 committed by Christopher Chedeau
parent aa9e98e52b
commit f4d4b323e1
4 changed files with 23 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/ColorPicker.css
View File

@ -65,12 +65,12 @@
} }
.color-picker-hash { .color-picker-hash {
background: rgb(240, 240, 240); background: #dee2e6;
height: 30px; height: 30px;
width: 30px; width: 30px;
border-radius: 4px 0px 0px 4px; border-radius: 4px 0px 0px 4px;
float: left; float: left;
color: rgb(152, 161, 164); color: #868e96;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -79,11 +79,11 @@
.color-picker-input { .color-picker-input {
width: 100px; width: 100px;
font-size: 14px; font-size: 14px;
color: rgb(102, 102, 102); color: #868e96;
border: 0px; border: 0px;
outline: none; outline: none;
height: 28px; height: 28px;
box-shadow: rgb(240, 240, 240) 0px 0px 0px 1px inset; box-shadow: #dee2e6 0px 0px 0px 1px inset;
box-sizing: content-box; box-sizing: content-box;
border-radius: 0px 4px 4px 0px; border-radius: 0px 4px 4px 0px;
float: left; float: left;
@ -103,5 +103,5 @@
width: 100px; width: 100px;
border-radius: 2px; border-radius: 2px;
padding: 2px 4px; padding: 2px 4px;
border: 1px solid #ddd; border: 1px solid #dee2e6;
} }

14
src/components/ToolIcon.scss
View File

@ -4,7 +4,7 @@
} }
.ToolIcon__icon { .ToolIcon__icon {
background-color: #ddd; background-color: #e9ecef;
width: 41px; width: 41px;
height: 41px; height: 41px;
@ -27,13 +27,13 @@
font-size: inherit; font-size: inherit;
&:hover .ToolIcon__icon { &:hover .ToolIcon__icon {
background-color: #e7e5e5; background-color: #e9ecef;
} }
&:active .ToolIcon__icon { &:active .ToolIcon__icon {
background-color: #bdbebc; background-color: #ced4da;
} }
&:focus .ToolIcon__icon { &:focus .ToolIcon__icon {
box-shadow: 0 0 0 2px steelblue; box-shadow: 0 0 0 2px #a5d8ff;
} }
} }
@ -42,12 +42,12 @@
opacity: 0; opacity: 0;
&:hover + .ToolIcon__icon { &:hover + .ToolIcon__icon {
background-color: #e7e5e5; background-color: #e9ecef;
} }
&:checked + .ToolIcon__icon { &:checked + .ToolIcon__icon {
background-color: #bdbebc; background-color: #ced4da;
} }
&:focus + .ToolIcon__icon { &:focus + .ToolIcon__icon {
box-shadow: 0 0 0 2px steelblue; box-shadow: 0 0 0 2px #a5d8ff;
} }
} }

22
src/styles.scss
View File

@ -30,7 +30,7 @@ body {
margin-top: 4px; margin-top: 4px;
margin-bottom: 4px; margin-bottom: 4px;
font-size: 12px; font-size: 12px;
color: #333; color: var(--text-color-primary);
} }
h5:first-child { h5:first-child {
@ -48,35 +48,33 @@ body {
.divider { .divider {
width: 1px; width: 1px;
background-color: #ddd; background-color: #e9ecef;
margin: 1px; margin: 1px;
} }
input:focus { input:focus {
outline: transparent; outline: transparent;
box-shadow: 0 0 0 2px #4682b4; box-shadow: 0 0 0 2px #a5d8ff;
} }
button { button {
background-color: #ddd; background-color: #e9ecef;
border: 1px solid #ccc; border: 0;
border-radius: 4px; border-radius: 4px;
margin: 2px 0; margin: 2px 0;
padding: 5px; padding: 5px;
outline: transparent; outline: transparent;
&:focus { &:focus {
box-shadow: 0 0 0 2px #4682b4; box-shadow: 0 0 0 2px #a5d8ff;
} }
&:hover { &:hover {
background-color: #e7e5e5; background-color: #ced4da;
border-color: #d6d4d4;
} }
&:active { &:active {
background-color: #bdbebc; background-color: #ced4da;
border-color: #bdbebc;
} }
&:disabled { &:disabled {
@ -85,9 +83,9 @@ button {
} }
.active { .active {
background-color: #bdbebc; background-color: #ced4da;
&:hover { &:hover {
background-color: #bdbebc; background-color: #ced4da;
} }
} }

2
src/theme.css
View File

@ -1,5 +1,5 @@
:root { :root {
--text-color-primary: #333; --text-color-primary: #343a40;
--bg-color-main: #fff; --bg-color-main: #fff;
--shadow-island: 0 1px 5px rgba(0, 0, 0, 0.15); --shadow-island: 0 1px 5px rgba(0, 0, 0, 0.15);
--border-radius-m: 4px; --border-radius-m: 4px;