search-input spinner bugfixes

pchorus · Oct 6, 2014 · af6146b · af6146b
1 parent 2f096f1
commit af6146b
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 6 deletions.
diff --git a/angular-widgets.min.css b/angular-widgets.min.css
diff --git a/angular-widgets.src.css b/angular-widgets.src.css
@@ -3,13 +3,15 @@ search-input {
   border-radius: 14px;
   border: 0px;
   font-size: 14px;
+  background-color: white;
 }
-search-input div {
+search-input > div {
   display: flex;
   display: -webkit-flex;
+  align-items: center;
   border-radius: inherit;
 }
-search-input div input {
+search-input > div input {
   background-image: url("../widgets/search-input/magnifier.svg");
   background-position: 3px center;
   background-repeat: no-repeat;
@@ -19,8 +21,14 @@ search-input div input {
   padding-right: 10px;
   font-size: inherit;
   flex-grow: 1;
+  flex-shrink: 1;
   -webkit-flex-grow: 1;
 }
+search-input > div spinner {
+  display: none;
+  flex-shrink: 0;
+  margin-right: 6px;
+}
 search-input ul {
   position: absolute;
   padding: 0px;
@@ -54,6 +62,7 @@ spinner > div {
   align-items: center;
 }
 spinner > div > div {
+  flex-shrink: 0;
   width: 8px;
   height: 8px;
   background-color: #3d3d3d;

diff --git a/app/widgets/search-input/search-input.less b/app/widgets/search-input/search-input.less
@@ -7,10 +7,12 @@ search-input {
   border-radius: @border-radius;
   border: 0px;
   font-size: @default-font-size;
+  background-color: white;
 
-  div {
+  > div {
     display: flex;
     display: -webkit-flex;
+    align-items: center;
     border-radius: inherit;
 
     input {
@@ -25,8 +27,15 @@ search-input {
       font-size: inherit;
 
       flex-grow: 1;
+      flex-shrink: 1;
       -webkit-flex-grow: 1;
     }
+
+    spinner {
+      display: none;
+      flex-shrink: 0;
+      margin-right: 6px;
+    }
   }
 
   ul {

diff --git a/app/widgets/spinner/spinner.less b/app/widgets/spinner/spinner.less
@@ -6,6 +6,7 @@ spinner {
     align-items: center;
 
     > div {
+      flex-shrink: 0;
       width: 8px;
       height: 8px;
       background-color: @default-text-color;

diff --git a/examples/search-input/search-input-example.html b/examples/search-input/search-input-example.html
@@ -12,12 +12,12 @@ <h3>Just inserted in document flow</h3>
     <search-input quicksearch-url="quicksearch/:pattern"></search-input>
 
     <h3>Inserted with a given width</h3>
-    <search-input class="search-input-width"></search-input>
+    <search-input class="search-input-width" quicksearch-url="quicksearch/:pattern"></search-input>
 
     <h3>Inserted within a flexbox and font-size: 20px</h3>
     <div class="flex">
       <label>Search input:</label>
-      <search-input></search-input>
+      <search-input quicksearch-url="quicksearch/:pattern"></search-input>
     </div>
 
     <script src="../../bower_components/less/dist/less-1.7.5.min.js" type="text/javascript"></script>

diff --git a/examples/search-input/search-input-example.less b/examples/search-input/search-input-example.less
@@ -16,6 +16,7 @@ div.flex {
   }
 
   search-input {
+    width: 300px;
     font-size: 20px;
   }
 }