Merge pull request #5331 from minrk/raw-input-css

fix raw_input CSS

IPython/html/static/notebook/js/outputarea.js

@@ -660,14 +660,14 @@ var IPython = (function (IPython) {
         var area = this.create_output_area();
         
         // disable any other raw_inputs, if they are left around
-        $("div.output_subarea.raw_input").remove();
+        $("div.output_subarea.raw_input_container").remove();
         
         area.append(
             $("<div/>")
-            .addClass("box-flex1 output_subarea raw_input")
+            .addClass("box-flex1 output_subarea raw_input_container")
             .append(
                 $("<span/>")
-                .addClass("input_prompt")
+                .addClass("raw_input_prompt")
                 .text(content.prompt)
             )
             .append(
@@ -698,8 +698,8 @@ var IPython = (function (IPython) {
     }
 
     OutputArea.prototype._submit_raw_input = function (evt) {
-        var container = this.element.find("div.raw_input");
-        var theprompt = container.find("span.input_prompt");
+        var container = this.element.find("div.raw_input_container");
+        var theprompt = container.find("span.raw_input_prompt");
         var theinput = container.find("input.raw_input");
         var value = theinput.val();
         var content = {

IPython/html/static/notebook/less/outputarea.less

@@ -137,16 +137,15 @@ div.output_javascript:empty {
 
 /* raw_input styles */
 
-div.raw_input {
-    padding-top: 0px;
-    padding-bottom: 0px;
-    height: 1em;
-    line-height: 1em;
+div.raw_input_container {
     font-family: @monoFontFamily;
+    // for some reason, em padding doesn't compute the same for raw_input
+    // that is not the first input, but px does
+    padding-top: 5px;
 }
 
-span.input_prompt {
-    font-family: inherit;
+span.raw_input_prompt {
+    /* nothing needed here */
 }
 
 input.raw_input {
@@ -154,10 +153,15 @@ input.raw_input {
     font-size: inherit;
     color: inherit;
     width: auto;
-    margin: -2px 0px 0px 1px;
-    padding-left: 1px;
-    padding-top: 2px;
-    height: 1em;
+    /* make sure input baseline aligns with prompt */
+    vertical-align: baseline;
+    /* padding + margin = 0.5em between prompt and cursor */
+    padding: 0em 0.25em;
+    margin: 0em 0.25em;
+}
+
+input.raw_input:focus {
+    box-shadow: none;
 }
 
 p.p-space {

IPython/html/static/style/ipython.min.css

@@ -124,9 +124,10 @@ div.output_stderr{background:#fdd;}
 div.output_latex{text-align:left}
 div.output_javascript:empty{padding:0}
 .js-error{color:#8b0000}
-div.raw_input{padding-top:0;padding-bottom:0;height:1em;line-height:1em;font-family:monospace}
-span.input_prompt{font-family:inherit}
-input.raw_input{font-family:inherit;font-size:inherit;color:inherit;width:auto;margin:-2px 0 0 1px;padding-left:1px;padding-top:2px;height:1em}
+div.raw_input_container{font-family:monospace;padding-top:5px}
+span.raw_input_prompt{}
+input.raw_input{font-family:inherit;font-size:inherit;color:inherit;width:auto;vertical-align:baseline;padding:0 .25em;margin:0 .25em}
+input.raw_input:focus{box-shadow:none}
 p.p-space{margin-bottom:10px}
 .rendered_html{color:#000;}.rendered_html em{font-style:italic}
 .rendered_html strong{font-weight:bold}

IPython/html/static/style/style.min.css

@@ -1401,9 +1401,10 @@ div.output_stderr{background:#fdd;}
 div.output_latex{text-align:left}
 div.output_javascript:empty{padding:0}
 .js-error{color:#8b0000}
-div.raw_input{padding-top:0;padding-bottom:0;height:1em;line-height:1em;font-family:monospace}
-span.input_prompt{font-family:inherit}
-input.raw_input{font-family:inherit;font-size:inherit;color:inherit;width:auto;margin:-2px 0 0 1px;padding-left:1px;padding-top:2px;height:1em}
+div.raw_input_container{font-family:monospace;padding-top:5px}
+span.raw_input_prompt{}
+input.raw_input{font-family:inherit;font-size:inherit;color:inherit;width:auto;vertical-align:baseline;padding:0 .25em;margin:0 .25em}
+input.raw_input:focus{box-shadow:none}
 p.p-space{margin-bottom:10px}
 .rendered_html{color:#000;}.rendered_html em{font-style:italic}
 .rendered_html strong{font-weight:bold}