Improve design of search bar

5 files changed, 10 insertions, 138 deletions

diff --git a/theme/stylesheets/website.less b/theme/stylesheets/website.less
index ffaae57..811dd96 100755
--- a/theme/stylesheets/website.less
+++ b/theme/stylesheets/website.less
@@ -13,7 +13,6 @@
 @import "website/exercise.less";
 @import "website/quiz.less";
 @import "website/markdown.less";
-@import "website/progress.less";
 @import "website/navigation.less";
 
 * {
diff --git a/theme/stylesheets/website/body.less b/theme/stylesheets/website/body.less
index 184351b..f132ef1 100755
--- a/theme/stylesheets/website/body.less
+++ b/theme/stylesheets/website/body.less
@@ -13,7 +13,7 @@
 
         color: @page-color;
         background: @body-background;
-        .transition(left 0.5s ease);
+        .transition(all 0.5s ease);
 
         .body-inner {
             /*position: absolute;
@@ -53,7 +53,7 @@
         }
 
         @media (max-width: @mobileMaxWidth) {
-            .transition-transform(0.5s ease);
+
         }
     }
 
diff --git a/theme/stylesheets/website/progress.less b/theme/stylesheets/website/progress.less
deleted file mode 100755
index c67d7e7..0000000
--- a/theme/stylesheets/website/progress.less
+++ /dev/null
@@ -1,115 +0,0 @@
-/* Chrome, Safari, Opera */
-@-webkit-keyframes animate-loading {
-    from {width: 0%;}
-    to {}
-}
-
-/* Standard syntax */
-@keyframes animate-loading {
-    from {width: 0%;}
-    to {}
-}
-
-.book .book-body {
-    .book-progress {
-        height: @progress-height;
-        width: 100%;
-        position: relative;
-        background: #fff;
-        margin-bottom: 10px;
-
-        .bar {
-            height: @bar-height;
-            position: @bar-position;
-            right: @bar-right;
-            left: @bar-left;
-            top: @bar-top;
-
-            background: @bar-background;
-            border-radius: 5px;
-            overflow: hidden;
-
-            .inner {
-                height: 100%;
-                width: 0%;
-
-                background: @bar-progress-background;
-                -webkit-animation: animate-loading 1s; /* Chrome, Safari, Opera */
-                animation: animate-loading 1s;
-
-                .in-inner {
-                    height: 100%;
-                    width: 50%;
-                }
-            }
-        }
-
-        .chapters {
-            display: @chapter-display;
-
-            position: absolute;
-            right: 20px + @chapter-size;
-            left: 20px;
-            top: 7px;
-
-            .chapter {
-                position: absolute;
-                width: @chapter-size;
-                height: @chapter-size;
-                border-radius: @chapter-size;
-
-                background: @bar-background;
-                box-shadow: 0px 0px 1px #bbb;
-
-                &.new-chapter {
-
-                }
-
-                &.done {
-                    background: @bar-progress-background;
-                    box-shadow: none;
-                }
-
-                @media (max-width: 800px) {
-                    display: none;
-
-                    &.new-chapter {
-                        display: block;
-                    }
-                }
-            }
-        }
-    }
-}
-.book.color-theme-1 .book-body {
-    .book-progress {
-        .bar {
-            background: @bar-background-1;
-            .inner {
-                background: @bar-progress-background-1;
-            }
-        }
-    }
-    .chapters .chapter{
-        background: @bar-background-1;
-        &.done{
-            background: @bar-progress-background-1;
-        }
-    }
-}
-.book.color-theme-2 .book-body {
-    .book-progress {
-        .bar {
-            background: @bar-background-2;
-            .inner {
-                background: @bar-progress-background-2;
-            }
-        }
-    }
-    .chapters .chapter{
-        background: @bar-background-2;
-        &.done{
-            background: @bar-progress-background-2;
-        }
-    }
-}
\ No newline at end of file
diff --git a/theme/stylesheets/website/summary.less b/theme/stylesheets/website/summary.less
index 9b614a7..7d9ba6b 100755
--- a/theme/stylesheets/website/summary.less
+++ b/theme/stylesheets/website/summary.less
@@ -29,6 +29,7 @@
 
             input, input:focus {
                 width: 100%;
+                background: @sidebar-search-input-background;
                 border: 1px solid @sidebar-search-input-border-color;
                 .box-shadow(none);
             }
diff --git a/theme/stylesheets/website/variables.less b/theme/stylesheets/website/variables.less
index 15f6fc8..3cbe0df 100644
--- a/theme/stylesheets/website/variables.less
+++ b/theme/stylesheets/website/variables.less
@@ -31,7 +31,8 @@
 
 @sidebar-search-padding:              6px;
 @sidebar-search-background:           transparent;
-@sidebar-search-input-border-color:   @sidebar-border;
+@sidebar-search-input-background:     transparent;
+@sidebar-search-input-border-color:   transparent;
 
 @sidebar-divider-color:               @sidebar-border;
 
@@ -40,7 +41,7 @@
 @sidebar-link-hover-color:            hsl(207, 100%, 50%);
 @sidebar-link-hover-background:       transparent;
 
-@sidebar-icon-color:                  @bar-progress-background;
+@sidebar-icon-color:                  hsl(120, 60%, 50%);
 @sidebar-link-completed:              @sidebar-link-color;
 @sidebar-link-completed-weight:       normal;
 
@@ -51,20 +52,6 @@
 // Content
 @content-line-height:                 1.6em;
 
-// Progress Bar
-@chapter-display:                     none;
-@chapter-size:                        16px;
-
-@progress-height:                     0px;
-
-@bar-height:                          2px;
-@bar-left:                            @sidebar-width;
-@bar-right:                           0;
-@bar-top:                             50px;
-@bar-position:                        static;
-@bar-background:                      white;
-@bar-progress-background:             hsl(120, 60%, 50%);
-
 // Basics of a navbar
 @navbar-height:                       50px;
 @navbar-margin-bottom:                @line-height-computed;
@@ -149,8 +136,8 @@
 @sidebar-link-hover-background-1:       transparent;
 @sidebar-link-hover-background-2:       transparent;
 
-@sidebar-icon-color-1:                  @bar-progress-background;
-@sidebar-icon-color-2:                  @bar-progress-background;
+@sidebar-icon-color-1:                  hsl(120, 60%, 50%);
+@sidebar-icon-color-2:                  @sidebar-icon-color-1;
 @sidebar-link-completed-1:              @sidebar-link-color-1;
 @sidebar-link-completed-2:              @sidebar-link-color-2;
 @sidebar-link-completed-weight-1:       normal;
@@ -164,8 +151,8 @@
 
 @bar-background-1:                      #F3EACB;
 @bar-background-2:                      #1d1f21;
-@bar-progress-background-1:             #704214;
-@bar-progress-background-2:             hsl(120, 60%, 50%);
+/*@bar-progress-background-1:             #704214;
+@bar-progress-background-2:             hsl(120, 60%, 50%);*/
 
 // Basics of a navbar
 @navbar-default-border-1:               #d5d5d5;