add search IDs

src/files/css/main.css

@@ -6628,7 +6628,8 @@ header .menu .circles {
   position: absolute;
   padding-top: 5px; }
 
-header .circles .circle {
+header .circles .circle,
+#searchToggle {
   margin: 5px 2px;
   float: left;
   width: 30px;
@@ -10220,122 +10221,115 @@ img {
     height: 14px;
     line-height: 14px; }
 
-.header-search--static {
-  height: 45px;
-  background: #ebebeb;
-  border-radius: 25px 0 0 25px;
-  padding-left: 50px;
-  padding-right: 0;
-  display: -webkit-flex;
-  display: -ms-flex;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-  margin-bottom: 40px;
-  position: relative; }
-.header-search--filter {
-  padding: 0 5px;
-  width: 180px; }
-.header-search--float {
-  display: -webkit-flex;
-  display: -ms-flex;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-  /* height: 30px; */
-  padding: 5px 10px 10px;
-  position: absolute;
-  right: 0;
-  background: #3c434c; }
-.header-search__inputcase {
-  position: relative; }
-  .header-search__inputcase--float {
+.header-search {
+  display: none; }
+  .header-search--static {
+    height: 45px;
+    background: #ebebeb;
+    border-radius: 25px 0 0 25px;
+    padding-left: 50px;
+    padding-right: 0;
     display: -webkit-flex;
     display: -ms-flex;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-content: center;
-    align-items: center; }
-    .header-search__inputcase--float form {
-      height: auto; }
-.header-search--static .header-search__iconzoom {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 30px;
-  height: 30px;
-  background: url("../img/icon_zoom_search@2x.png") 0 0/cover no-repeat;
-  border-radius: 0 25px 25px 0 / 0 25px 25px 0;
-  cursor: pointer;
-  overflow: hidden;
-  display: none; }
-.header-search--filter .header-search__iconzoom {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 30px;
-  height: 30px;
-  background: url("../img/icon_news_titl@2x.png") 0 -60px/30px 90px no-repeat #e65e26;
-  border-radius: 15px;
-  cursor: pointer;
-  overflow: hidden; }
-  .header-search--filter .header-search__iconzoom:hover {
-    background-color: #eb914e; }
-.header-search--float .header-search__iconzoom {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 30px;
-  height: 30px;
-  background: url("../img/icon_news_titl@2x.png") 0 -60px/30px 90px no-repeat #e65e26;
-  border-radius: 15px;
-  cursor: pointer;
-  overflow: hidden;
-  border: none; }
-  .header-search--float .header-search__iconzoom:hover {
-    background-color: #eb914e; }
-.header-search input, .header-search__input {
-  background: #ffffff;
-  height: 30px;
-  line-height: 25px;
-  border-radius: 15px;
-  padding: 0 12px;
-  width: calc(100% - 24px);
-  color: #929292;
-  opacity: 1;
-  font-size: 11px;
-  border: none; }
-  .header-search input::-webkit-input-placeholder, .header-search__input::-webkit-input-placeholder {
-    color: #929292;
-    opacity: 1; }
-  .header-search input::-moz-placeholder, .header-search__input::-moz-placeholder {
-    color: #929292;
-    opacity: 1; }
-  .header-search input:-moz-placeholder, .header-search__input:-moz-placeholder {
-    color: #929292;
-    opacity: 1; }
-  .header-search input:-ms-input-placeholder, .header-search__input:-ms-input-placeholder {
+    align-items: center;
+    margin-bottom: 40px;
+    position: relative; }
+  .header-search--filter {
+    padding: 0 5px;
+    width: 180px; }
+  .header-search--float {
+    padding: 5px 10px 10px;
+    position: absolute;
+    right: 0;
+    background: #3c434c;
+    border-bottom-left-radius: 10px; }
+  .header-search--active {
+    display: block; }
+  .header-search__inputcase {
+    position: relative; }
+    .header-search__inputcase--float {
+      width: 200px; }
+      .header-search__inputcase--float form {
+        height: auto; }
+  .header-search--static .header-search__iconzoom {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 30px;
+    height: 30px;
+    background: url("../img/icon_zoom_search@2x.png") 0 0/cover no-repeat;
+    border-radius: 0 25px 25px 0 / 0 25px 25px 0;
+    cursor: pointer;
+    overflow: hidden;
+    display: none; }
+  .header-search--filter .header-search__iconzoom {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 30px;
+    height: 30px;
+    background: url("../img/icon_news_titl@2x.png") 0 -60px/30px 90px no-repeat #e65e26;
+    border-radius: 15px;
+    cursor: pointer;
+    overflow: hidden; }
+    .header-search--filter .header-search__iconzoom:hover {
+      background-color: #eb914e; }
+  .header-search--float .header-search__iconzoom {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 30px;
+    height: 30px;
+    background: url("../img/icon_news_titl@2x.png") 0 -60px/30px 90px no-repeat #e65e26;
+    border-radius: 15px;
+    cursor: pointer;
+    overflow: hidden;
+    border: none; }
+    .header-search--float .header-search__iconzoom:hover {
+      background-color: #eb914e; }
+  .header-search input, .header-search__input {
+    background: #ffffff;
+    height: 30px;
+    line-height: 25px;
+    border-radius: 15px;
+    padding: 0 12px;
+    /* width: calc(100% - 24px); */
     color: #929292;
-    opacity: 1; }
-  .header-search input:focus::-webkit-input-placeholder, .header-search__input:focus::-webkit-input-placeholder {
-    color: transparent;
-    opacity: 1; }
-  .header-search input:focus::-moz-placeholder, .header-search__input:focus::-moz-placeholder {
-    color: transparent;
-    opacity: 1; }
-  .header-search input:focus:-moz-placeholder, .header-search__input:focus:-moz-placeholder {
-    color: transparent;
-    opacity: 1; }
-  .header-search input:focus:-ms-input-placeholder, .header-search__input:focus:-ms-input-placeholder {
-    color: transparent;
-    opacity: 1; }
-.header-search--static input:focus + .header-search__iconzoom, .header-search--static .header-search__input:focus + .header-search__iconzoom {
-  display: block; }
+    opacity: 1;
+    font-size: 11px;
+    border: none;
+    display: block;
+    width: 100%; }
+    .header-search input::-webkit-input-placeholder, .header-search__input::-webkit-input-placeholder {
+      color: #929292;
+      opacity: 1; }
+    .header-search input::-moz-placeholder, .header-search__input::-moz-placeholder {
+      color: #929292;
+      opacity: 1; }
+    .header-search input:-moz-placeholder, .header-search__input:-moz-placeholder {
+      color: #929292;
+      opacity: 1; }
+    .header-search input:-ms-input-placeholder, .header-search__input:-ms-input-placeholder {
+      color: #929292;
+      opacity: 1; }
+    .header-search input:focus::-webkit-input-placeholder, .header-search__input:focus::-webkit-input-placeholder {
+      color: transparent;
+      opacity: 1; }
+    .header-search input:focus::-moz-placeholder, .header-search__input:focus::-moz-placeholder {
+      color: transparent;
+      opacity: 1; }
+    .header-search input:focus:-moz-placeholder, .header-search__input:focus:-moz-placeholder {
+      color: transparent;
+      opacity: 1; }
+    .header-search input:focus:-ms-input-placeholder, .header-search__input:focus:-ms-input-placeholder {
+      color: transparent;
+      opacity: 1; }
+  .header-search--static input:focus + .header-search__iconzoom, .header-search--static .header-search__input:focus + .header-search__iconzoom {
+    display: block; }
 
 @media (min-width: 992px) {
   .left-side {

src/files/js/script.js

@@ -2,39 +2,42 @@ $(document).ready(function () {
 
     $('.menu .burger').on('click', function () {
         $('.menu-mobile').slideToggle(200)
-    })
+    });
 
 
     $('.pagination .number').on('click', function () {
-        $(this).parent().find('.active').removeClass('active')
+        $(this).parent().find('.active').removeClass('active');
         $(this).addClass('active')
-    })
+    });
 
 
     $('.pagination .arrow-right').on('click', function () {
         if ($(this).parent().find('.active').next().hasClass('number')) {
-            $(this).parent().find('.active').next().addClass('active')
+            $(this).parent().find('.active').next().addClass('active');
             $(this).parent().find('.active').prev().removeClass('active')
 
         } else {
-            $(this).parent().find('.active').removeClass('active')
+            $(this).parent().find('.active').removeClass('active');
             $(this).parent().find('.number').first().addClass('active')
 
 
         }
-    })
+    });
 
     $('.pagination .arrow-left').on('click', function () {
         if ($(this).parent().find('.active').prev().hasClass('number')) {
-            $(this).parent().find('.active').prev().addClass('active')
+            $(this).parent().find('.active').prev().addClass('active');
             $(this).parent().find('.active').next().removeClass('active')
         } else {
-            $(this).parent().find('.active').removeClass('active')
+            $(this).parent().find('.active').removeClass('active');
             $(this).parent().find('.number').last().addClass('active')
 
         }
-    })
+    });
 
-
-})
+    $('#searchToggle').click(function(e) {
+        e.preventDefault();
+        $("#searchForm").toggleClass('header-search--active')
+    });
+});
 	

src/files/scss/_base-style.scss

@@ -64,7 +64,8 @@ header .menu .circles {
     padding-top: 5px;
 }
 
-header .circles .circle {
+header .circles .circle,
+#searchToggle {
     margin: 5px 2px;
     float: left;
     width: 30px;

src/files/scss/_header-search.scss

@@ -1,4 +1,5 @@
 .header-search {
+    display: none;
 
     &--static {
         height: 45px;
@@ -21,34 +22,24 @@
         width: 180px;
     }
     &--float {
-        display: -webkit-flex;
-        display: -ms-flex;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-content: center;
-        align-items: center;
-        /* height: 30px; */
         padding: 5px 10px 10px;
         position: absolute;
         right: 0;
         background: #3c434c;
+        border-bottom-left-radius: 10px;
+    }
+
+    &--active {
+        display: block;
     }
 
     &__inputcase {
         position: relative;
 
         &--float {
-            display: -webkit-flex;
-            display: -ms-flex;
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-            align-content: center;
-            align-items: center;
-
+            width: 200px;
             form {
-                height: auto;;
+                height: auto;
             }
         }
     }
@@ -104,11 +95,13 @@
         line-height: 25px;
         border-radius: 15px;
         padding: 0 12px;
-        width: calc(100% - 24px);
+        /* width: calc(100% - 24px); */
         color: #929292;
         opacity: 1;
         font-size: 11px;
         border: none;
+        display: block;
+        width: 100%;
 
         &::-webkit-input-placeholder {
             color: #929292;