first commit

themes/at_movic/_dev/css/components/search-widget.scss

@@ -0,0 +1,118 @@
+@import "theme_variables";
+
+#search_widget {
+  &.open{
+    a.popup-title i:before{
+      content: "\e646";
+    }
+  }
+  .popup-content{
+    padding: 15px; 
+  }
+  .search-inner{
+    position: relative;
+    input[type="text"]{
+      height: 40px;
+      line-height: 40px;
+      padding: 0;
+      min-width: 220px;
+      border: 0;
+      outline: none;
+      border-bottom: 1px solid #ccc;
+      color: #000;
+      @include rtl-padding(0,40px,0,0);
+      &:focus{
+        border-color: #000;
+        &+button[type="submit"]{
+          i:before{
+            content: "\e628";
+          }
+        }
+      }
+    }
+    button[type="submit"]{
+      position: absolute;
+      top: 0;
+      right: 0;
+      border: 0;
+      padding: 0;
+      width: 40px;
+      height: 40px;
+      background: none;
+      outline: none;
+      line-height: 40px;
+      text-align: center;
+      cursor: pointer;
+      i{
+        vertical-align: middle;
+        font-size: 21px;
+        color: #000;
+      }
+      &:hover{
+        i:before{
+          content: "\e628";
+        }
+      }
+    }
+  }
+}
+#checkout {
+  #search_widget {
+    display: none; /* Not ideal solution by allows to reuse same hooks/templates */
+  }
+}
+
+#pagenotfound {
+  .page-content {
+    #search_widget {
+      width: 100%;
+      .popup-content{
+        position: relative;
+      }
+    }
+  }
+}
+#main{
+  #search_widget{
+    a.popup-title{
+      display: none;
+    }
+    .popup-content{
+      position: static;
+      display: block !important;
+      @include opacity(1);
+      width: 100%;
+      float: none;
+      @include box-shadow(none);
+      z-index: 1;
+    }
+    .search-inner{
+      position: relative; 
+    }
+    input[type=text]{
+      @include rtl-padding(0,50px,0,0);
+      height: 40px;
+      line-height: 1;
+      outline: 0;
+      &:focus{
+        border-color: $theme-color-default;
+      }
+    }
+    button[type=submit]{
+      width: 40px;
+      height: 40px;
+      bottom: 0;
+      top: auto;
+      @include rtl-right(0);
+      background: none;
+      color: #333;
+      i{
+        font-size: 14px;
+      }
+      &:hover{
+        background: $theme-color-default;
+        color: #fff;
+      }
+    }
+  }
+}