Fix oppia#2754: Math expression input box is more clear (oppia#2785)

* Fix oppia#2754: Math expression input box is more clear * fix line indentation * address review comments * remove box shadow
Keksike · Dec 1, 2016 · be62a40 · be62a40
1 parent e78b7d7
commit be62a40
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/extensions/dependencies/guppy.html b/extensions/dependencies/guppy.html
@@ -6,3 +6,27 @@
     '/third_party/static/guppy-be6f14/src/transform.xsl',
     '/third_party/static/guppy-be6f14/src/symbols.json');
 </script>
+
+<style>
+  .guppy_active {
+    border: 1px solid rgba(81, 203, 238, 1);
+  }
+
+  .guppy_inactive {
+    background: #ffffff;
+    border: 1px solid black;
+  }
+
+  .guppy_active .main_cursor {
+    animation: guppy-blink-animation 1s steps(2, start) infinite;
+    -webkit-animation: guppy-blink-animation 1s steps(2, start) infinite;
+  }
+
+  @keyframes guppy-blink-animation {
+    to { visibility: hidden; }
+  }
+
+  @-webkit-keyframes guppy-blink-animation {
+    to { visibility: hidden; }
+  }
+</style>
diff --git a/extensions/interactions/MathExpressionInput/MathExpressionInput.html b/extensions/interactions/MathExpressionInput/MathExpressionInput.html
@@ -3,7 +3,7 @@
 
 <script type="text/ng-template" id="interaction/MathExpressionInput">
   <div class="guppy-div"
-       style="border: 1px solid black; width: 100%; height: 100px; padding: 5px;">
+       style="width: 100%; height: 100px; padding: 5px;">
   </div>
   <button type="button" class="btn btn-default"
           ng-click="submitAnswer()" style="margin-top: 10px;">