#184 contextual links focus animation added

mortendk · Oct 6, 2017 · c53315e · c53315e
1 parent 7762bb0
commit c53315e
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 26 deletions.
diff --git a/elevenfeat/templates/contextual/contextual.css b/elevenfeat/templates/contextual/contextual.css
@@ -22,9 +22,7 @@
 .contextual-region {
   transition: background-color 0.2s ease-in-out;
 }
-.contextual-region.focus {
-  /*min-height: 32px;*/
-}
+.contextual-region.focus { }
 
 /**
  * Contextual trigger.
@@ -121,7 +119,7 @@
 }
 
 .js-outside-in-edit-mode .contextual-region {
-  min-height: calc(2.5 * 16px);
+  min-height: 32px;
 }
 
 /* icons default  */
@@ -147,10 +145,24 @@
 colors
 ------------------------------------------------------------------------------*/
 /* color for the region */
-.contextual-region.focus {
-  outline: auto 1px var(--rasberry);
-  background-color: var(--bluesky-light-light);
+.contextual-region:before {
+  box-sizing: border-box;
+  position: absolute;
+  content: '';
+  top: 0;
+  left:0;
+  width: 0;
+  height: 0;
+  border: 1px dashed transparent;
 }
+
+.contextual-region.focus:before{
+  width: 100%;
+  height: 100%;
+  border: 1px dashed var(--bluesky-light);
+  transition: width 0.1s ease-in-out, height 0.1s ease-out 0.1s;
+}
+
 .js-outside-in-edit-mode .contextual-region{
   outline: 1px dotted var(--bluesky-light);
 }

diff --git a/elevenfeat/templates/quickedit/quickedit.css b/elevenfeat/templates/quickedit/quickedit.css
@@ -27,7 +27,6 @@ Quickedit
 
 .quickedit-candidate {
   background-color: var(--bluesky-light-20);
-  border-bottom: 1px solid var(--bluesky-light);
 }
 
 
@@ -41,24 +40,26 @@ Quickedit
   background-color: var(--bluesky-light-50);
 }
 
+.quickedit-field:before {
+  box-sizing: border-box;
+  position: absolute;
+  content: '';
+  top: 0;
+  left:0;
+  width: 0;
+  height: 0;
+  border: 1px dashed transparent;
+}
+
 
 /* indicator of the elements that we can quick edit*/
-.quickedit-field {
-  outline: 1px dashed var(--bluesky);
-  /*border: 1px solid transparent;*/
-  /*background: linear-gradient(white, white) padding-box,
-  repeating-linear-gradient(-45deg, red 0, Gainsboro 25%, Gainsboro 0, white 50%) 0 / 0.5rem 0.5rem;*/
-}
 .quickedit-field:hover{
-  /*animation: thisIsHowYouGetAnts 50s linear infinite;*/
-  background-color: var(--bluesky-light-light-light)
-}
-/*@keyframes thisIsHowYouGetAnts {
-  to {
-    background-position: 100%;
-  }
+  width: 100%;
+  height: 100%;
+  border: 1px dashed var(--bluesky-light);
+  transition: width 0.1s ease-in-out, height 0.1s ease-out 0.1s;
 }
-*/
+
 .quickedit-highlighted {
   color: var(--bluesky);
   background-color: var(--bluesky-light)

diff --git a/elevenfeat/templates/quickedit/quickedit.toolbar.css b/elevenfeat/templates/quickedit/quickedit.toolbar.css
@@ -10,13 +10,12 @@
   margin-left: -5rem
 }
 .quickedit-toolbar-content {
-  background-color: var(--white-80);
+  background-color: var(--black-80);
   border: 1px solid var(--gravel);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
   font-size: 16px;
   color: var(--white);
   min-width: 40rem;
-
 }
 
 /* Save + Close */
@@ -25,7 +24,7 @@
 
 /* Label name  hide that we dont need it */
 .quickedit-toolbar-label {
-  /*display: none;*/
+  display: none;
 }
 .quickedit-toolbar-label .field { }
 
@@ -62,7 +61,6 @@ Buttons
   -webkit-mask: url(icons/thumbs-up.svg) no-repeat;
   -webkit-mask-size: contain;
           mask-size: contain;
-
 }
 
 .quickedit-button.action-cancel{