import edit toggle button from panikdb

[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 f5e89cac47f9db3fc13f36b8bebcf3507d1ee86b..720242f0e4e71da587447070e924fc985499e744 100644 (file)
--- a/chloro/phyll/static/css/style.scss
+++ b/chloro/phyll/static/css/style.scss
@@ -259,9 +259,52 @@ div[contenteditable=true]:focus-within {
        }
 }
 
-button#save {
+#quickedit {
        position: sticky;
        bottom: 10px;
+       display: flex;
+       justify-content: flex-end;
+       label {
+               display: inline-block;
+               margin-left: 6px;
+               cursor: pointer;
+       }
+       input {
+               display: none;
+       }
+
+       button,
+       span {
+               display: inline-block;
+               font-weight: normal;
+               background: white;
+               border: 1px solid #386ede;
+               box-shadow: 0 0 0 5px white;
+               padding: 1ex;
+               border-radius: 3px;
+               color: #386ede;
+               font-size: inherit;
+               letter-spacing: inherit;
+               line-height: inherit;
+       }
+       button:hover {
+               &:hover {
+                       color: white;
+                       background: #386ede;
+               }
+       }
+       button.error {
+               background: red;
+               color: white;
+               &:hover {
+                       background: darken(red, 10%);
+               }
+       }
+
+       input:checked + span {
+               background: #386ede;
+               color: white;
+       }
 }
 
 main.post {