From 768a9675ebf2608c83c2bed0ddc866b52eb7e25d Mon Sep 17 00:00:00 2001
From: Matthias Bussonnier <bussonniermatthias@gmail.com>
Date: Fri, 14 Aug 2015 19:30:53 -0700
Subject: [PATCH] pull styling in separate file

---
 .../static/notebook/js/searchandreplace.js    | 18 +++----
 notebook/static/notebook/less/notebook.less   | 24 ---------
 .../notebook/less/searchandreplace.less       | 51 +++++++++++++++++++
 notebook/static/style/style.less              |  1 +
 4 files changed, 58 insertions(+), 36 deletions(-)
 create mode 100644 notebook/static/notebook/less/searchandreplace.less

diff --git a/notebook/static/notebook/js/searchandreplace.js b/notebook/static/notebook/js/searchandreplace.js
index 12adb88fd..7e6b367fb 100644
--- a/notebook/static/notebook/js/searchandreplace.js
+++ b/notebook/static/notebook/js/searchandreplace.js
@@ -41,11 +41,11 @@ define(function(require){
 
     }
     for(var rindex=0; rindex<html.length; rindex++){
-      var pre = $('<pre/>').addClass('replace-preview')
+      var pre = $('<pre/>')
         .append(html[rindex][0])
         .append($('<span/>').addClass('match').text(html[rindex][1]));
       if(replace){
-        pre.append($('<span/>').addClass('replace').text(html[rindex][2]));
+        pre.append($('<span/>').addClass('insert').text(html[rindex][2]));
         pre.addClass('replace');
       }
       pre.append(html[rindex][3]);
@@ -100,7 +100,6 @@ define(function(require){
   var snr = function(env){
     var search  = $("<input/>")
       .addClass('form-control')
-      .css('width','86%')
       .attr('placeholder','Search');
     var isRegExpButton = $('<button/>')
       .attr('type', 'button')
@@ -109,8 +108,6 @@ define(function(require){
       .attr('data-toggle','button')
       .attr('title', 'use regular expression (now you have N+1 problems)')
       .attr('value', '.*')
-      .css('border-radius', '0')
-      .css('border-left', 'none')
       .text('.*');
 
     var isCaseSensitiveButton = $('<button/>')
@@ -119,21 +116,18 @@ define(function(require){
       .attr('data-toggle','button')
       .attr('title', 'is search case sensitive')
       .attr('value', 'a≠A')
-      .css('border-top-left-radius', '0')
-      .css('border-bottom-left-radius', '0')
-      .css('border-left', 'none')
       .text('a≠A');
 
     var repl = $("<input/>")
       .addClass('form-control')
-      .attr('placeholder','replace');
+      .attr('placeholder','Replace');
     var body = $('<div/>')
-      .css('max-height','60vh')
-      .css('overflow','auto');
+      .attr('id', 'replace-preview');
     var form = $('<form/>')
+      .attr('id', 'search-and-replace')
       .append($('<div/>').addClass('form-group')
         .append(
-          $('<div/>').addClass('input-group').css("width","100%")
+          $('<div/>').addClass('input-group')
           .append(search)
           .append(isRegExpButton)
           .append(isCaseSensitiveButton)
diff --git a/notebook/static/notebook/less/notebook.less b/notebook/static/notebook/less/notebook.less
index afa700582..a935cc055 100644
--- a/notebook/static/notebook/less/notebook.less
+++ b/notebook/static/notebook/less/notebook.less
@@ -99,27 +99,3 @@ kbd {
     padding-top: 1px;
     padding-bottom: 1px;
 }
-
-.replace-preview .match, .replace-preview .replace {
-  background-color:lightblue;
-  border-color: darken(lightblue, 20%);
-  border-style: solid;
-  border-width: 1px;
-  border-radius: @border-radius-base
-}
-  
-.replace-preview.replace {
-  
-  & .match{
-    //display: none;
-    background-color:salmon;
-    text-decoration: line-through;
-    border-color: darken(salmon, 20%);
-  }
-  
-  & .replace{
-    background-color: green;
-    background-color:lightGreen;
-    border-color: darken(lightGreen, 20%);
-  }
-}
diff --git a/notebook/static/notebook/less/searchandreplace.less b/notebook/static/notebook/less/searchandreplace.less
new file mode 100644
index 000000000..214e49381
--- /dev/null
+++ b/notebook/static/notebook/less/searchandreplace.less
@@ -0,0 +1,51 @@
+
+#search-and-replace {
+  #replace-preview .match, #replace-preview .insert{
+    background-color:lightblue;
+    border-color: darken(lightblue, 20%);
+    border-style: solid;
+    border-width: 1px;
+    border-radius: @border-radius-base
+  }
+    
+  #replace-preview .replace {
+    
+    & .match{
+      //display: none;
+      background-color:salmon;
+      text-decoration: line-through;
+      border-color: darken(salmon, 20%);
+    }
+    
+    & .insert{
+      background-color: green;
+      background-color:lightGreen;
+      border-color: darken(lightGreen, 20%);
+    }
+  }
+
+  & #replace-preview {
+    max-height: 60vh;
+    overflow: auto;
+  }
+  
+  & input {
+    width: 86%;
+  }
+  
+  & .input-group{
+    width: 100%;
+  }
+  
+  & .input-group button:last-child{
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: none;
+  }
+  
+  & input + button {
+    border-radius: 0;
+    border-left: none ;
+  }
+  
+}
diff --git a/notebook/static/style/style.less b/notebook/static/style/style.less
index 1eac66005..f87f0e727 100644
--- a/notebook/static/style/style.less
+++ b/notebook/static/style/style.less
@@ -29,6 +29,7 @@
 // notebook
 @import "../notebook/less/style.less";
 @import "../notebook/less/commandpalette.less";
+@import "../notebook/less/searchandreplace.less";
 
 // terminal
 @import "../terminal/less/terminal.less";