style focused/editable area

[chloro.git] / chloro / phyll / static / css / style.scss

diff --git a/chloro/phyll/static/css/style.scss b/chloro/phyll/static/css/style.scss
index 50b7bf02d2256dcf775576dd82a1337462a66781..1a306785bd5f5bfdc983ad1596d3657da1654b5f 100644 (file)
--- a/chloro/phyll/static/css/style.scss
+++ b/chloro/phyll/static/css/style.scss
@@ -183,18 +183,41 @@ footer {
        }
 }
 
-#style-popup {
+div[contenteditable=true]:focus-within {
+       outline: none;
+       box-shadow: inset 0 0 2px #333;
+}
+
+.style-popup {
        background: white;
+       box-shadow: 0 0 5px #666;
+       input {
+               display: none;
+               padding: 3px;
+               border: 1px inset #ccc;
+               background: white;
+               width: 0px;
+               transition: width ease 2s;
+               &.shown {
+                       display: inline-block;
+                       width: 400px;
+               }
+       }
        button {
                padding: 0;
                height: 2em;
-               width: 2em;
                text-align: center;
                background: #eee;
-               border: 1px outset #ccc;
-               margin-right: 1px;
+               border: 0px;
                &:hover {
                        background: #ccc;
                }
+               &[data-action=createLink] {
+                       color: blue;
+                       text-decoration: underline;
+               }
+       }
+       &.short button {
+               width: 2em;
        }
 }