Browse Source

HUE-1671 [hbase] Sticky search bar is half hidden when scrolling up

Fixed sticky bar CSS
Improved remove icon on search bar
Reformatted CSS
Enrico Berti 12 năm trước cách đây
mục cha
commit
64b8e8af16
2 tập tin đã thay đổi với 402 bổ sung408 xóa
  1. 1 1
      apps/hbase/src/hbase/templates/app.mako
  2. 401 407
      apps/hbase/static/css/hbase.css

+ 1 - 1
apps/hbase/src/hbase/templates/app.mako

@@ -215,6 +215,7 @@ ${ commonheader(None, "hbase", user) | n,unicode }
       <div class="container-fluid">
         <div class="row-fluid">
           <div id="searchbar-main" class="span5" data-bind="click: search.clickTagBar">
+            <a class="search-remove" data-bind="visible: search.cur_input() != '', click: function(){ app.search.cur_input(''); app.search.focused(true) }"><i class="icon-remove-sign"></i></a>
             <div id="search-tags" contenteditable="true" data-bind="editableText: search.cur_input, hasfocus: search.focused, css: { 'active': search.cur_input() != '' }, event: { 'keydown': search.onKeyDown, click: search.updateMenu.bind(null) }" data-placeholder="${_('row_key, row_prefix* +scan_len [col1, family:col2, fam3:, col_prefix* +3, fam: col2 to col3] {Filter1() AND Filter2()}')}">
             </div>
           </div>
@@ -230,7 +231,6 @@ ${ commonheader(None, "hbase", user) | n,unicode }
             <li class="search-suggestion" data-bind="event: { mousedown: app.search.replaceFocusNode.bind(null, $data) }, css: {active: app.search.activeSuggestion() == $index()}"><a><span data-bind="text: $data"></span></a></li>
             <!-- /ko -->
           </ul>
-          <a class="search-remove" data-bind="visible: search.cur_input() != '', click: function(){ app.search.cur_input(''); }"><i class="icon-remove-sign"></i></a>
           <button class="btn btn-primary add-on" data-bind="enabled: !search.submitted(), click: search.evaluate.bind(null)"><i class="icon-search"></i></button>
           <span id="column-family-selectors">
             <!-- ko foreach: views.tabledata.columnFamilies() -->

+ 401 - 407
apps/hbase/static/css/hbase.css

@@ -17,607 +17,601 @@
 */
 
 .hbase-page {
-	display: none;
+  display: none;
 }
 
 .hbase-page.active {
-	display: block;
+  display: block;
 }
 
 ul#hbase-breadcrumbs li a {
-	line-height: 18px;
+  line-height: 18px;
 }
 
-.actionbar .well,.actionbar .well-small {
-	line-height: 30px;
+.actionbar .well, .actionbar .well-small {
+  line-height: 30px;
 }
 
 .isLoading {
-	opacity: .5 !important;
-	background: url(/static/art/spinner.gif) center center no-repeat;
+  opacity: .5 !important;
+  background: url(/static/art/spinner.gif) center center no-repeat;
 }
 
 .smartview {
-	padding:0;
+  padding: 0;
 }
 
 .smartview .smartview-row {
-	padding:0;
-    font-size:0;
-    margin:0;
-	border: 1px solid #ccc;
-	margin-bottom: -1px;
-	position: relative;
+  padding: 0;
+  font-size: 0;
+  margin: 0;
+  border: 1px solid #ccc;
+  margin-bottom: -1px;
+  position: relative;
 }
 
 .smartview .smartview-row input[type="checkbox"] {
-	border:solid 1px #ccc;
-	border-radius: 0;
-	margin: 0;
-	padding: 0;
+  border: solid 1px #ccc;
+  border-radius: 0;
+  margin: 0;
+  padding: 0;
 }
 
 .smartview .smartview-row h5 {
-	padding:0 10px;
-	line-height: 40px;
-	background:#ddd;
-	margin:0;
-	border-bottom: solid 1px #ccc;
-	background-color: #f5f5f5;
-	background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
-	background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
-	background-image: -o-linear-gradient(top,#fff,#e6e6e6);
-	background-image: linear-gradient(to bottom,#fff,#e6e6e6);
-	background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
-	background-repeat: repeat-x;
-	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
-	filter: progid:dximagetransform.microsoft.gradient(enabled=false);
-	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-	cursor:pointer;
-	font-weight: normal;
+  padding: 0 10px;
+  line-height: 40px;
+  background: #ddd;
+  margin: 0;
+  border-bottom: solid 1px #ccc;
+  background-color: #f5f5f5;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
+  background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
+  background-image: -o-linear-gradient(top, #fff, #e6e6e6);
+  background-image: linear-gradient(to bottom, #fff, #e6e6e6);
+  background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
+  background-repeat: repeat-x;
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
+  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  font-weight: normal;
 }
 
 .smartview .smartview-row.selected h5 > code {
-	color: #355EDB;
-	border-color: #6872AD;
+  color: #355EDB;
+  border-color: #6872AD;
 }
 
 .smartview .smartview-row-controls {
-	display: none;
+  display: none;
 }
 
 .smartview .smartview-row-controls.controls-hover-bottom {
-	position: absolute;
-	bottom: 0;
-	right:5px;
-	z-index: 10;
+  position: absolute;
+  bottom: 0;
+  right: 5px;
+  z-index: 10;
 }
 
 .smartview .smartview-row.selected .smartview-row-controls, .smartview-row:hover .smartview-row-controls {
-	display: inline;
+  display: inline;
 }
 
 .smartview .smartview-row.selected h5 > i {
-	color: #355EDB;
+  color: #355EDB;
 }
 
 .smartview ul.smartview-cells {
-	border-top:solid 1px #ccc;
-	width:100%;
-	overflow-x:auto;
-	overflow-y:hidden;
-	height:auto;
-    white-space: nowrap;
-    list-style: none;
-    margin: 0;
-    padding:0;
-    margin-right:-1px;
-    display:block;
-    background: #ddd;
-    min-height: 68px;
+  border-top: solid 1px #ccc;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  height: auto;
+  white-space: nowrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  margin-right: -1px;
+  display: block;
+  background: #ddd;
+  min-height: 68px;
 }
 
 .smartview ul.smartview-cells > li {
-	position: relative;
-	border-right:solid 1px #ccc;
-	background: #efefef;
-    color:#000;
-    font-size:12px;
-    overflow: hidden;
-    padding:0;
-    height:100%;
-    max-width:200px;
-    max-height: 200px;
-    display:table-cell;
-    min-width: 140px;
-    border-top:0;
+  position: relative;
+  border-right: solid 1px #ccc;
+  background: #efefef;
+  color: #000;
+  font-size: 12px;
+  overflow: hidden;
+  padding: 0;
+  height: 100%;
+  max-width: 200px;
+  max-height: 200px;
+  display: table-cell;
+  min-width: 140px;
+  border-top: 0;
 }
 
 .smartview.gridView ul.smartview-cells > li {
-	width: 200px;
+  width: 200px;
 }
 
 .smartview ul.smartview-cells > li > div {
-	position: relative;
-	margin-bottom: 10px;
-	height: 100%;
+  position: relative;
+  margin-bottom: 10px;
+  height: 100%;
 }
 
 .smartview ul.smartview-cells > li.active {
-	border-top:solid 3px #4C62E6;
+  border-top: solid 3px #4C62E6;
 }
 
 .smartview ul.smartview-cells > li:hover, .smartview ul.smartview-cells > li.active {
-	cursor: pointer;
-	background: #fcfcfc;
+  cursor: pointer;
+  background: #fcfcfc;
 }
+
 .smartview ul.smartview-cells > li:hover .label.timestamp, .smartview ul.smartview-cells > li.active .label.timestamp {
-	display: block;
-	color:#555;
-	border:solid 1px #ccc;
+  display: block;
+  color: #555;
+  border: solid 1px #ccc;
 }
+
 .smartview ul.smartview-cells > li:hover a.corner-btn {
-	display: block;
-	height: 12px !important;
+  display: block;
+  height: 12px !important;
 }
+
 .smartview ul.smartview-cells > li:hover a.corner-btn:hover {
-	color:#000;
+  color: #000;
 }
 
 .smartview ul.smartview-cells > li h6 {
-	padding:6px;
-	margin:0;
-	color:#3a3a3a;
-	background:#fafafa;
-	border-bottom: solid 1px #ccc;
-	white-space: nowrap;
+  padding: 6px;
+  margin: 0;
+  color: #3a3a3a;
+  background: #fafafa;
+  border-bottom: solid 1px #ccc;
+  white-space: nowrap;
 }
 
 .smartview ul.smartview-cells > li.active h6 {
-	color:#4C62E6;
+  color: #4C62E6;
 }
 
 .smartview ul.smartview-cells > li .timestamp {
-	position: absolute;
-	bottom:-12px;
-	right:-2px;
-	display: none;
+  position: absolute;
+  bottom: -12px;
+  right: -2px;
+  display: none;
 }
 
 .smartview ul.smartview-cells > li .corner-btn {
-	position: absolute;
-	top:5px;
-	right:5px;
-	font-size:12px;
-	color:#333;
-	text-decoration: none;
-	display: none;
-	padding:0 6px;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  font-size: 12px;
+  color: #333;
+  text-decoration: none;
+  display: none;
+  padding: 0 6px;
 }
 
 .smartview ul.smartview-cells > li pre {
-	border-radius: 0;
-	border:none;
-	background:transparent;
-	display:block;
-	padding:5px;
-	margin: 5px;
-	height: 100%;
-	font-size:11px;
-	line-height: 13px;
-	color: #777;
-	border: dashed 1px #ccc;
+  border-radius: 0;
+  border: none;
+  background: transparent;
+  display: block;
+  padding: 5px;
+  margin: 5px;
+  height: 100%;
+  font-size: 11px;
+  line-height: 13px;
+  color: #777;
+  border: dashed 1px #ccc;
 }
 
 .smartview ul.smartview-cells > li > div > textarea {
-	display: block;
-	border-radius: 0;
-    outline: none;
-    width: 100%;
-    min-width: 200px;
-    outline-color: transparent;
-  	outline-style: none;
-    width: auto;
-    border: none;
+  display: block;
+  border-radius: 0;
+  outline: none;
+  width: 100%;
+  min-width: 200px;
+  outline-color: transparent;
+  outline-style: none;
+  width: auto;
+  border: none;
 }
 
 .smartview ul.smartview-cells > li pre:hover {
-	background: #BAD0FF;
+  background: #BAD0FF;
 }
 
 .smartview ul.smartview-cells > li > pre:hover, .smartview ul.smartview-cells > li.active pre {
-	color:#333;
+  color: #333;
 }
 
 .smartview ul.smartview-cells > li .label {
-	background:#ddd;
-	font-size: 11px;
-	text-shadow:none;
-	font-weight: 400;
+  background: #ddd;
+  font-size: 11px;
+  text-shadow: none;
+  font-weight: 400;
 }
+
 .smartview ul.smartview-cells li.new_column_cell {
-	vertical-align:middle;
-	width:120px;
+  vertical-align: middle;
+  width: 120px;
 }
+
 .smartview ul.smartview-cells li.new_column_cell a {
-	text-align: center;
-	font-size:24px;
-	display:block;
-	width:100%;
-	height:100%;
-	text-decoration: none;
+  text-align: center;
+  font-size: 24px;
+  display: block;
+  width: 100%;
+  height: 100%;
+  text-decoration: none;
 }
 
 .subnav {
-	padding:5px 0;
-	line-height:30px;
-	border:none;
+  padding: 5px 0;
+  line-height: 30px;
+  border: none;
+}
+
+.subnav-fixed {
+  top: 73px !important;
 }
 
 .subnav select, .subnav input, .well input, .well select, .smartview select, .smartview .smartview-row-controls input {
-	margin:0;
+  margin: 0;
 }
+
 .ui-autocomplete {
-	z-index:10000 !important;
+  z-index: 10000 !important;
 }
 
 .btn-group {
-	display:inline-block;
-	line-height: 1em;
+  display: inline-block;
+  line-height: 1em;
 }
+
 .footer-slider {
-	white-space: nowrap;
-	overflow-x: auto;
-	width: 70%;
-	float:left;
+  white-space: nowrap;
+  overflow-x: auto;
+  width: 70%;
+  float: left;
 }
+
 .footer-slider code {
-	cursor:pointer;
+  cursor: pointer;
 }
 
 #searchbar-main {
-	display: inline;
-	background: #fff;
-	line-height: 1em;
-	margin-right: 10px;
-	-webkit-appearance: none;
-	-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 1px 0 inset;
-	-webkit-rtl-ordering: logical;
-	-webkit-transition-delay: 0s, 0s;
-	-webkit-transition-duration: 0.2s, 0.2s;
-	-webkit-transition-property: border, box-shadow;
-	-webkit-transition-timing-function: linear, linear;
-	-webkit-user-select: text;
-	-webkit-writing-mode: horizontal-tb;
-	background-color: rgb(255, 255, 255);
-	border-bottom-color: rgb(204, 204, 204);
-	border-bottom-left-radius: 3px;
-	border-bottom-style: solid;
-	border-bottom-width: 1px;
-	border-image-outset: 0;
-	border-image-repeat: stretch;
-	border-image-slice: 100%;
-	border-image-source: none;
-	border-image-width: 1;
-	border-left-color: rgb(204, 204, 204);
-	border-left-style: solid;
-	border-left-width: 1px;
-	border-right-color: rgb(204, 204, 204);
-	border-right-style: solid;
-	border-right-width: 1px;
-	border-top-color: rgb(204, 204, 204);
-	border-top-left-radius: 3px;
-	border-top-style: solid;
-	border-top-width: 1px;
-	box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 1px 0 inset;
-	color: rgb(85, 85, 85);
-	cursor: auto;
-	display: inline-block;
-	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	font-size: 14px;
-	font-weight: normal;
-	height: 20px;
-	letter-spacing: normal;
-	line-height: 25px;
-	margin-bottom: 0;
-	margin-left: 0;
-	margin-right: 0;
-	margin-top: 0;
-	padding-bottom: 4px;
-	padding-left: 6px;
-	padding-right: 6px;
-	padding-top: 4px;
-	text-align: start;
-	text-indent: 0;
-	text-shadow: rgba(0, 0, 0, 0) 0 0 1px;
-	text-transform: none;
-	transition-delay: 0s, 0s;
-	transition-duration: 0.2s, 0.2s;
-	transition-property: border, box-shadow;
-	transition-timing-function: linear, linear;
-	vertical-align: middle;
-	height:36px;
-	font-size: 18px;
-	white-space: nowrap;
-	position: relative;
-	overflow: hidden;
+  display: inline;
+  background: #fff;
+  line-height: 1em;
+  margin-right: 10px;
+  -webkit-appearance: none;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 1px 0 inset;
+  -webkit-rtl-ordering: logical;
+  -webkit-transition-delay: 0s, 0s;
+  -webkit-transition-duration: 0.2s, 0.2s;
+  -webkit-transition-property: border, box-shadow;
+  -webkit-transition-timing-function: linear, linear;
+  -webkit-user-select: text;
+  -webkit-writing-mode: horizontal-tb;
+  background-color: rgb(255, 255, 255);
+  border-bottom-color: rgb(204, 204, 204);
+  border-bottom-left-radius: 3px;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-image-outset: 0;
+  border-image-repeat: stretch;
+  border-image-slice: 100%;
+  border-image-source: none;
+  border-image-width: 1;
+  border-left-color: rgb(204, 204, 204);
+  border-left-style: solid;
+  border-left-width: 1px;
+  border-right-color: rgb(204, 204, 204);
+  border-right-style: solid;
+  border-right-width: 1px;
+  border-top-color: rgb(204, 204, 204);
+  border-top-left-radius: 3px;
+  border-top-style: solid;
+  border-top-width: 1px;
+  box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 1px 0 inset;
+  color: rgb(85, 85, 85);
+  cursor: auto;
+  display: inline-block;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  height: 20px;
+  letter-spacing: normal;
+  line-height: 25px;
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  padding-bottom: 4px;
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-top: 4px;
+  text-align: start;
+  text-indent: 0;
+  text-shadow: rgba(0, 0, 0, 0) 0 0 1px;
+  text-transform: none;
+  transition-delay: 0s, 0s;
+  transition-duration: 0.2s, 0.2s;
+  transition-property: border, box-shadow;
+  transition-timing-function: linear, linear;
+  vertical-align: middle;
+  height: 36px;
+  font-size: 18px;
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
 }
+
 #search-tags {
-	display: block;
-	margin: 0;
-	padding: 0;
-	outline: none;
-	list-style: none;
-	width: 100%;
-	height: 100%;
+  display: block;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  list-style: none;
+  width: 100%;
+  height: 100%;
 }
 
 #search-tags > span {
-	color: #d14;
+  color: #d14;
 }
 
 #search-tags span {
-	margin: 1px;
-	padding: 2px;
+  margin: 1px;
+  padding: 2px;
 }
+
 #search-tags span:hover {
-	margin: 0;
-	border: dashed 1px #5D6F8C;
+  margin: 0;
+  border: dashed 1px #5D6F8C;
 }
 
 #search-tags > span > span {
-	padding: 0 3px;
-	border-radius: 3px;
+  padding: 0 3px;
+  border-radius: 3px;
 }
 
 #search-tags span.columns {
-	color: #fff;
-	background: #3FA3D9;
+  color: #fff;
+  background: #3FA3D9;
 }
 
 #search-tags span.scan {
-	color: #fff;
-	background: #EDA11F;
-	padding: 0 3px;
-	border-radius: 3px;
+  color: #fff;
+  background: #EDA11F;
+  padding: 0 3px;
+  border-radius: 3px;
 }
 
 #search-tags span.prefix, #search-tags span.range {
-	color: #fff;
-	background: #5EB568;
+  color: #fff;
+  background: #5EB568;
 }
 
-#search-tags span.filter
-{
-	color: #2DA2E0;
+#search-tags span.filter {
+  color: #2DA2E0;
 }
 
-#search-tags span.filter span.compare_op
-{
-	color: #8746DB;
+#search-tags span.filter span.compare_op {
+  color: #8746DB;
 }
 
-#search-tags span.filter span.arg
-{
-	color: #8746DB;
+#search-tags span.filter span.arg {
+  color: #8746DB;
 }
 
-#search-tags span.filter span.linker
-{
-	color: #46A35C;
+#search-tags span.filter span.linker {
+  color: #46A35C;
 }
 
-#search-tags span.selection, #search-typeahead span.selection
-{
-	background: yellow;
-	border: none;
-	border-radius: 0;
-	min-width: 1px;
-	padding:0;
+#search-tags span.selection, #search-typeahead span.selection {
+  background: yellow;
+  border: none;
+  border-radius: 0;
+  min-width: 1px;
+  padding: 0;
 }
 
-
 #search-typeahead {
-	position: absolute;
-	z-index: 10000;
-	margin: 0;
-	padding: 0;
-	padding-top: 1px;
-	list-style: none;
-	margin-top: 40px;
+  position: absolute;
+  z-index: 10000;
+  margin: 0;
+  padding: 0;
+  padding-top: 1px;
+  list-style: none;
+  margin-top: 40px;
 }
 
 #search-typeahead li:first-child a {
-	overflow: auto;
-	background: #fff;
-	color: #3a3a3a;
-	border-top: solid 1px #ccc;
-	background: #eee;
+  overflow: auto;
+  background: #fff;
+  color: #3a3a3a;
+  border-top: solid 1px #ccc;
+  background: #eee;
 }
 
 #search-typeahead li a {
-	padding: 5px;
-	background: #fff;
-	margin-top: -1px;
-	border:solid 1px #ccc;
-	text-decoration: none;
-	display:block;
-	width: 402px;
-	cursor: pointer;
+  padding: 5px;
+  background: #fff;
+  margin-top: -1px;
+  border: solid 1px #ccc;
+  text-decoration: none;
+  display: block;
+  width: 402px;
+  cursor: pointer;
 }
 
 #search-typeahead li a.active {
-	background: rgb(1, 99, 156);
-	color: #fff;
-	font-weight: bold;
+  background: rgb(1, 99, 156);
+  color: #fff;
+  font-weight: bold;
 }
 
 #searchbar-main input[type=text].tag-searchbar {
-	border: 0;
-	background: transparent;
-	box-shadow: none;
-	border:none;
-    msargin-right:15%;
-    padding:0;
-    display: inline-block;
-    border-radius: 0;
-    overflow: hidden;
-    width:100%;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  msargin-right: 15%;
+  padding: 0;
+  display: inline-block;
+  border-radius: 0;
+  overflow: hidden;
+  width: 100%;
 }
 
 #searchbar-main input[type=text].tag-searchbar.active {
-	color:#fff;
-	width:1px;
-	background: #fff;
-	opacity: .1;
+  color: #fff;
+  width: 1px;
+  background: #fff;
+  opacity: .1;
 }
 
-
 #searchbar-main small {
-	color: #bbb;
+  color: #bbb;
 }
 
 #searchbar-main i.tagIndicator {
-	color: #000;
-	padding: 0 !important;
-	border: 0;
-	margin: 0;
-	background: black !important;
-	display: inline-block;
-	width: 1px;
-	height: 1em;
-	border:none !important;
-	animation: blink 1.5s steps(2, start) infinite;
-	-webkit-animation: blink 1.5s steps(2, start) infinite;
-	-moz-animation: blink 1.5s steps(2, start) infinite;
-	font-weight: 100;
+  color: #000;
+  padding: 0 !important;
+  border: 0;
+  margin: 0;
+  background: black !important;
+  display: inline-block;
+  width: 1px;
+  height: 1em;
+  border: none !important;
+  animation: blink 1.5s steps(2, start) infinite;
+  -webkit-animation: blink 1.5s steps(2, start) infinite;
+  -moz-animation: blink 1.5s steps(2, start) infinite;
+  font-weight: 100;
 }
 
 @keyframes blink {
-    to {
-        visibility: hidden;
-    }
+  to {
+    visibility: hidden;
+  }
 }
+
 @-webkit-keyframes blink {
-    to {
-        visibility: hidden;
-    }
+  to {
+    visibility: hidden;
+  }
 }
 
 #cluster-menu {
-	font-size:14px;
+  font-size: 14px;
 }
 
 #cell_edit_modal {
-	margin-left: -40% !important;
-	max-height:100%;
-	width: 80%;
-	left: 50%;
-	top: 10%;
-	margin-top:0;
-	overflow: visible;
+  margin-left: -40% !important;
+  max-height: 100%;
+  width: 80%;
+  left: 50%;
+  top: 10%;
+  margin-top: 0;
+  overflow: visible;
 }
 
 #cell_edit_modal iframe {
-	min-height: 600px;
+  min-height: 600px;
 }
 
 #cell_edit_modal .CodeMirror {
-	height:100%;
+  height: 100%;
 }
 
 #cell_edit_modal .modal-body {
-	max-height: 600px;
+  max-height: 600px;
 }
 
 textarea {
-	-webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 #column-family-selectors {
-	margin-left: 10px;
-	line-height: 30px;
-	display: inline-block;
+  margin-left: 10px;
+  line-height: 30px;
+  display: inline-block;
 }
 
 .loader-main {
-	font-size: 50px;
-}
-
-#new_table_modal ul, #new_row_field_list
-{
-	list-style-type: none;
-	padding: 0;
-	margin: 0;
-}
-
-.add-on
-{
-	border-radius: 1.5em;
-	border-bottom-left-radius: 0;
-	border-top-left-radius: 0;
-	height: auto;
-	display: inline-block;
-	padding: 3px 12px 3px 8px;
-}
-
-.add-on i
-{
-	font-size: 17px;
-}
-
-.search-remove
-{
-	position: relative;
-	right: 25px;
-	top: 3px;
-	text-decoration: none;
-	cursor: pointer;
-	color: #ccc;
-	z-index: 100;
-	width: 0;
-	height: 0;
-	overflow: visible;
-	display: block;
-}
-
-.search-remove:hover
-{
-	color: #777;
-	text-decoration: none;
-}
-
-#search-typeahead .search-suggestion a
-{
-	color: #eee;
-	background: #333;
-	border-color: #777;
-}
-
-#search-typeahead .search-suggestion.active a
-{
-	background: #3CA3E8;
-	border-color: #3CA3E8;
-	color:#fff;
-}
-
-#search-typeahead .search-suggestion-header a
-{
-	padding: 5px;
-	color: #4DB8EA;
-	font-weight: bold;
-	background: #292b2d; /* Old browsers */
-	background: -moz-linear-gradient(top,  #292b2d 0%, #000000 100%); /* FF3.6+ */
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#292b2d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
-	background: -webkit-linear-gradient(top,  #292b2d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
-	background: -o-linear-gradient(top,  #292b2d 0%,#000000 100%); /* Opera 11.10+ */
-	background: -ms-linear-gradient(top,  #292b2d 0%,#000000 100%); /* IE10+ */
-	background: linear-gradient(to bottom,  #292b2d 0%,#000000 100%); /* W3C */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#292b2d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
-	border-color: #333;
-	box-shadow: 0 3px 5px rgba(0,0,0,.3);
+  font-size: 50px;
+}
+
+#new_table_modal ul, #new_row_field_list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.add-on {
+  border-radius: 1.5em;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  height: auto;
+  display: inline-block;
+  padding: 3px 12px 3px 8px;
+}
+
+.add-on i {
+  font-size: 17px;
+}
+
+.search-remove {
+  text-decoration: none;
+  cursor: pointer;
+  color: #ccc;
+  z-index: 100;
+  float: right;
+}
+
+.search-remove:hover {
+  color: #777;
+  text-decoration: none;
+}
+
+#search-typeahead .search-suggestion a {
+  color: #eee;
+  background: #333;
+  border-color: #777;
+}
+
+#search-typeahead .search-suggestion.active a {
+  background: #3CA3E8;
+  border-color: #3CA3E8;
+  color: #fff;
+}
+
+#search-typeahead .search-suggestion-header a {
+  padding: 5px;
+  color: #4DB8EA;
+  font-weight: bold;
+  background: #292b2d; /* Old browsers */
+  background: -moz-linear-gradient(top, #292b2d 0%, #000000 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292b2d), color-stop(100%, #000000)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top, #292b2d 0%, #000000 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top, #292b2d 0%, #000000 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top, #292b2d 0%, #000000 100%); /* IE10+ */
+  background: linear-gradient(to bottom, #292b2d 0%, #000000 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292b2d', endColorstr='#000000', GradientType=0); /* IE6-9 */
+  border-color: #333;
+  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
 }