From cdc22d23b91e8c0140d3048ae8a11e749a434ac8 Mon Sep 17 00:00:00 2001
From: Ondřej Hruška <ondra@ondrovo.com>
Date: Sat, 14 Oct 2017 12:24:35 +0200
Subject: Doodle improvements 2 (#176)
* Fix some doodle bugs and added Background color functionality
* added protections against accidental doodle erase, screen size changing
* resolve react warning about 'selected' on <option>
---
app/javascript/styles/doodle.scss | 24 ++++++++++++++++++++----
1 file changed, 20 insertions(+), 4 deletions(-)
(limited to 'app/javascript/styles')
diff --git a/app/javascript/styles/doodle.scss b/app/javascript/styles/doodle.scss
index cc785a8ad..a4a1cfc84 100644
--- a/app/javascript/styles/doodle.scss
+++ b/app/javascript/styles/doodle.scss
@@ -1,12 +1,15 @@
+$doodleBg: #d9e1e8;
.doodle-modal {
@extend .boost-modal;
width: unset;
}
.doodle-modal__container {
+ background: $doodleBg;
+ text-align: center;
line-height: 0; // remove weird gap under canvas
canvas {
- border: 5px solid #d9e1e8;
+ border: 5px solid $doodleBg;
}
}
@@ -15,9 +18,13 @@
.filler {
flex-grow: 1;
+ margin: 0;
+ padding: 0;
}
.doodle-toolbar {
+ line-height: 1;
+
display: flex;
flex-direction: column;
flex-grow: 0;
@@ -60,10 +67,19 @@
cursor: pointer;
box-shadow: inset 0 0 1px rgba(white, .5);
border: 1px solid black;
+ outline-offset:-1px;
+
+ &.foreground {
+ outline: 1px dashed white;
+ }
+
+ &.background {
+ outline: 1px dashed red;
+ }
- &.selected {
- outline-offset:-1px;
- outline: 1px dotted white;
+ &.foreground.background {
+ outline: 1px dashed red;
+ border-color: white;
}
}
}
--
cgit