Skip to content
Browse files
Use square icons for representing empty blocks
Previously, empty blocks would have the same cursor as other blocks and would have a filled in rectangle when there was no cursor. Now, cursors in empty blocks are green rectangles and the rectangles when there is no cursor are not filled in.



Test Plan:
- Verified in a browser that a cursor in an empty block is a rectangle
- Verified in a browser that a gray rectangle appears in empty blocks with no cursor
- Verified that logarithms, roots, and exponents display rectangles correctly
- Verified that the rectangles are rendered properly in Perseus
- Verified that the rectangles are rendered properly in webapp

Reviewers: charlie, kevinb

Reviewed By: kevinb

Differential Revision:
  • Loading branch information
shadaj committed Jun 16, 2016
1 parent b834388 commit ac8f92b7dc708e4fb6d955b545e2891e62098ed1
Showing with 28 additions and 1 deletion.
  1. +27 −0 css/overrides.css
  2. +1 −1 src/components/input/math-input.js
@@ -1,7 +1,34 @@
.keypad-input .mq-editable-field .mq-cursor {
border-left: 2px solid #78c008 !important;
border-radius: 1px;

margin-left: -1px !important;
margin-right: -1px !important;
margin-bottom: 2px;

.keypad-input .mq-editable-field .mq-non-leaf .mq-cursor:only-child {
border: 2px solid #78c008 !important; /* bright-green color */
padding: 0 4px 0 4px;

.keypad-input .mq-empty {
background: transparent !important;

.keypad-input .mq-empty:not(.mq-root-block):after {
visibility: visible !important;

/* hides the 'c' content added by MathQuill to measure the width */
color: transparent;

display: inline-block;
border: 2px solid #ccc;
border-radius: 1px;
padding: 0 4px 0 4px;
margin-left: -1px;
margin-right: -1px;
margin-bottom: 2px;

.keypad-input .mq-math-mode .mq-selection,
@@ -225,7 +225,7 @@ const MathInput = React.createClass({
const cursor = this._container.querySelector('.mq-cursor');
const cursorBounds = cursor.getBoundingClientRect();

const cursorWidth = 2;
const cursorWidth = cursorBounds.width;
const gapBelowCursor = 2;


0 comments on commit ac8f92b

Please sign in to comment.