Zoom effect on textarea.expandable focus

canvas/css/canvas.css

@@ -228,7 +228,7 @@ ul.dropdown-menu a {
 /*
 .intro {
     padding: 1em 1.3em 0 1.3em;
-    color: rgba(0, 0, 0, 0.6);
+    color: rgba(0, 0, 0, 0.75);
     font-style: italic;
 }
  */
@@ -280,6 +280,7 @@ ul.item_list {
 li.added_item {
     width: 100%;
     margin: 0.5em auto;
+    padding-top: 3px;
     height: auto;
     overflow: scroll;
     /* cursor: move; */
@@ -295,7 +296,7 @@ ul.item_list .expandable {
     width: 85% !important;
     outline: none;
     display: inline-block;
-    background-color: rgba(255, 255, 255, 0.6);
+    background-color: rgba(255, 255, 255, 0.75);
     /* For auto expansion jQuery code */
     box-sizing: padding-box;
     overflow: hidden;
@@ -307,11 +308,10 @@ Zoom animation
 
 .zoom-in {
     -webkit-animation-name: zoom-in;    /* Safari 4.0-8.0 */
-    -webkit-animation-duration: 0.25s;  /* Safari 4.0-8.0 */
+    -webkit-animation-duration: 0.5s;  /* Safari 4.0-8.0 */
     animation-name: zoom-in;
-    animation-duration: 0.25s;
-    transform: scale(1.05);
-    background-color: rgba(255, 255, 255, 1);
+    animation-duration: 0.5s;
+    /* transform: scale(1.05); */
 }
 
 /* Safari 4.0-8.0 */
@@ -320,12 +320,12 @@ Zoom animation
         -ms-transform: scale(1);        /* IE 9 */
         -webkit-transform: scale(1);    /* Safari */
         transform: scale(1);
-        background-color: rgba(255, 255, 255, 0.6);
+        background-color: rgba(255, 255, 255, 0.75);
     }
     to {
-        -ms-transform: scale(1.05);      /* IE 9 */
-        -webkit-transform: scale(1.05);  /* Safari */
-        transform: scale(1.05);
+        -ms-transform: scale(1.03);      /* IE 9 */
+        -webkit-transform: scale(1.03);  /* Safari */
+        transform: scale(1.03);
         background-color: rgba(255, 255, 255, 1);
     }
 }
@@ -335,55 +335,54 @@ Zoom animation
     from {
         -ms-transform: scale(1);        /* IE 9 */
         -webkit-transform: scale(1);    /* Safari */
-        transform: scale(1);                    
-        background-color: rgba(255, 255, 255, 0.6);
+        transform: scale(1);
+        background-color: rgba(255, 255, 255, 0.75);
     }
     to {
-        -ms-transform: scale(1.05);      /* IE 9 */
-        -webkit-transform: scale(1.05);  /* Safari */
-        transform: scale(1.05);
+        -ms-transform: scale(1.03);      /* IE 9 */
+        -webkit-transform: scale(1.03);  /* Safari */
+        transform: scale(1.03);
         background-color: rgba(255, 255, 255, 1);
     }
 }
 
 .zoom-out {
     -webkit-animation-name: zoom-out;   /* Safari 4.0-8.0 */
-    -webkit-animation-duration: 0.25s;  /* Safari 4.0-8.0 */
+    -webkit-animation-duration: 0.5s;  /* Safari 4.0-8.0 */
     animation-name: zoom-out;
-    animation-duration: 0.25s;
-    transform: scale(1);
-    background-color: rgba(255, 255, 255, 0.6);
+    animation-duration: 0.5s;
+    /* transform: scale(1); */
 }
 
 /* Safari 4.0-8.0 */
 @-webkit-keyframes zoom-out {
     from {
+        -ms-transform: scale(1.03);      /* IE 9 */
+        -webkit-transform: scale(1.03);  /* Safari */
+        transform: scale(1.03);
+        background-color: rgba(255, 255, 255, 1);
+    }
+    to {
         -ms-transform: scale(1);        /* IE 9 */
         -webkit-transform: scale(1);    /* Safari */
         transform: scale(1);
-        background-color: rgba(255, 255, 255, 0.6);
-    }
-    to {
-        -ms-transform: scale(1.05);      /* IE 9 */
-        -webkit-transform: scale(1.05);  /* Safari */
-        transform: scale(1.05);
-        background-color: rgba(255, 255, 255, 1);
+        background-color: rgba(255, 255, 255, 0.75);
     }
 }
 
 /* Standard */
 @keyframes zoom-out {
     from {
+        -ms-transform: scale(1.03);      /* IE 9 */
+        -webkit-transform: scale(1.03);  /* Safari */
+        transform: scale(1.03);
+        background-color: rgba(255, 255, 255, 1);
+    }
+    to {
         -ms-transform: scale(1);        /* IE 9 */
         -webkit-transform: scale(1);    /* Safari */
         transform: scale(1);
-        background-color: rgba(255, 255, 255, 0.6);
-    }
-    to {
-        -ms-transform: scale(1.05);      /* IE 9 */
-        -webkit-transform: scale(1.05);  /* Safari */
-        transform: scale(1.05);
-        background-color: rgba(255, 255, 255, 1);
+        background-color: rgba(255, 255, 255, 0.75);
     }
 }
 
@@ -714,7 +713,7 @@ button.json_exp, button.share_canvas, .pdf_exp {
     outline: none;
 }
 button.json_exp:hover, button.share_canvas:hover {
-    opacity: 0.6;
+    opacity: 0.75;
 }
 .pdf_exp:hover {
     text-decoration: underline;

canvas/js/canvas.js

@@ -346,7 +346,7 @@ $(document).ready(function() {
                     
                     // If the current tag exists in the textarea
                     if(text.indexOf(tags[loopCounter]) != -1) {
-                        // While loop here if we want to apply the tag for every instance of a given term
+                        // While loop here if we want to apply the tag for every instance of a given term (j49b3e4a)
                         
                         // Apply the tag
                         text = text.replace(tags[loopCounter], "<a class='tag' contenteditable='false'>" + tags[loopCounter] + "</a>");
@@ -431,7 +431,11 @@ $(document).ready(function() {
             li.find("textarea").focus();
             
             // Zoom in animation
-            // li.find("textarea").addClass("zoom-in");
+            li.find("textarea").addClass("zoom-in");
+            li.find("textarea").css("background-color", "rgba(255, 255, 255, 1)");
+            li.find("textarea").css("-ms-transform", "scale(1.03)");
+            li.find("textarea").css("-webkit-transform", "scale(1.03)");
+            li.find("textarea").css("transform", "scale(1.03)");
             
             $("li.added_item textarea.expandable").on("focusout", function() {
                 // Replace textarea with a div
@@ -444,7 +448,12 @@ $(document).ready(function() {
                 // updateTags();
                 
                 // Zoom out animation
-                // li.find("div").addClass("zoom-out");
+                li.find("div").addClass("zoom-out");
+                li.find("div").css("background-color", "rgba(255, 255, 255, 0.75)");
+                li.find("div").css("-ms-transform", "scale(1)");
+                li.find("div").css("-webkit-transform", "scale(1)");
+                li.find("div").css("transform", "scale(1)");
+
                 
                 toggleTextElementOnFocus();
             });