search mobile

Signed-off-by: Jeff <jeff@gotenzing.com>

search mobile
Signed-off-by: Jeff <jeff@gotenzing.com>
Jeff Balicki
Showing 6 changed files with 263 additions and 14 deletions
wp-content/themes/msf-child/css/child-theme.css
wp-content/themes/msf-child/css/child-theme.css.map
wp-content/themes/msf-child/css/child-theme.min.css
wp-content/themes/msf-child/css/child-theme.min.css.map
wp-content/themes/msf-child/src/sass/theme/_search.scss
wp-content/themes/msf-child/src/sass/theme/_search_results.scss
--- a/wp-content/themes/msf-child/css/child-theme.css
View file @49d3c30
+++ b/wp-content/themes/msf-child/css/child-theme.css
View file @49d3c30
@@ -16670,7 +16670,7 @@ html:lang(fr-FR) .fr-only {
  font-weight: 700;
  line-height: 24px !important;
  font-size: 30px !important;
-  text-transform: uppercase;
+  text-transform: none;
 }
 @media screen and (max-width: 768px) {
  .sh1 {
@@ -16724,6 +16724,7 @@ html:lang(fr-FR) .fr-only {
  padding: 12px 45px 11px 45px;
  margin: auto;
  margin-top: 28px;
+  border-radius: 40px !important;
 }
 #search-wrapper .btn.filter.apply-filters:after, #search-wrapper .wpcf7 input.filter.apply-filters[type=submit]:after, .wpcf7 #search-wrapper input.filter.apply-filters[type=submit]:after, #search-wrapper .woocommerce-notices-wrapper .woocommerce-message a.filter.apply-filters.button:after, .woocommerce-notices-wrapper .woocommerce-message #search-wrapper a.filter.apply-filters.button:after, #search-wrapper .woocommerce-info a.filter.apply-filters.button:after, .woocommerce-info #search-wrapper a.filter.apply-filters.button:after {
  display: none;
@@ -16743,6 +16744,7 @@ html:lang(fr-FR) .fr-only {
 }
 #search-wrapper #search-sidebar {
  flex-direction: column;
+  margin-bottom: 50px;
 }
 @media screen and (max-width: 950px) {
  #search-wrapper #search-sidebar {
@@ -16814,7 +16816,7 @@ html:lang(fr-FR) .fr-only {
 }
 #search-wrapper .searchandfilter h4, #search-wrapper .searchandfilter .h4 {
  font-size: 16px !important;
-  color: #4d4d4d !important;
+  color: #000 !important;
  font-weight: 700 !important;
 }
 #search-wrapper .sf-field-sort_order label {
@@ -16848,9 +16850,11 @@ html:lang(fr-FR) .fr-only {
  display: inline-block !important;
  margin-left: 50px;
 }
-@media screen and (max-width: 950px) {
+@media screen and (max-width: 900px) {
  #search-wrapper .sf-field-search {
    margin-bottom: 30px;
+    width: calc(100% - 80px);
+    margin-left: 20px;
  }
 }
 #search-wrapper .sf-field-search label {
@@ -16866,6 +16870,14 @@ html:lang(fr-FR) .fr-only {
  height: 2.063rem;
  top: 1.2rem;
 }
+@media screen and (max-width: 900px) {
+  #search-wrapper .sf-field-search label:after {
+    width: 20px;
+    height: 20px;
+    left: -25px;
+    top: 25px;
+  }
+}
 #search-wrapper .sf-field-search input[name="_sf_search[]"] {
  width: 100%;
  border: 0;
@@ -16877,6 +16889,12 @@ html:lang(fr-FR) .fr-only {
  color: #212529;
  padding: 0.375rem 0.75rem;
 }
+@media screen and (max-width: 900px) {
+  #search-wrapper .sf-field-search input[name="_sf_search[]"] {
+    padding: 0;
+    font-size: 24px;
+  }
+}
 #search-wrapper .sf-field-submit {
  display: inline-block !important;
 }
@@ -16897,6 +16915,12 @@ html:lang(fr-FR) .fr-only {
  transition: none;
  display: inline-block !important;
 }
+@media screen and (max-width: 900px) {
+  #search-wrapper .sf-field-submit input[name=_sf_submit] {
+    height: 40px;
+    width: 40px;
+  }
+}
 #search-wrapper .sf-field-submit input[name=_sf_submit]:hover {
  background: #669999;
 }
@@ -16969,6 +16993,12 @@ ul.sf_date_field .sf-datepicker {
  text-indent: -9999px;
  display: inline-block;
 }
+@media screen and (max-width: 900px) {
+  .advance-search-button {
+    height: 30px;
+    width: 30px;
+  }
+}
 .advance-search-button::after {
  position: absolute;
@@ -16981,6 +17011,13 @@ ul.sf_date_field .sf-datepicker {
  background-size: contain;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26.954" height="27.484" viewBox="0 0 26.954 27.484"><g id="Group_722" data-name="Group 722" transform="translate(0 1.5)"><line id="Line_15" data-name="Line 15" x2="26.954" transform="translate(0 3.254)" fill="none" stroke="%23000" stroke-width="3"/><line id="Line_16" data-name="Line 16" x2="26.954" transform="translate(0 12.401)" fill="none" stroke="%23000" stroke-width="3"/><line id="Line_17" data-name="Line 17" x2="26.954" transform="translate(0 21.565)" fill="none" stroke="%23000" stroke-width="3"/><circle id="Ellipse_13" data-name="Ellipse 13" cx="3.188" cy="3.188" r="3.188" transform="translate(16.369)" fill="%23fff" stroke="%23000" stroke-width="3"/><circle id="Ellipse_14" data-name="Ellipse 14" cx="3.188" cy="3.188" r="3.188" transform="translate(16.369 18.109)" fill="%23fff" stroke="%23000" stroke-width="3"/><circle id="Ellipse_15" data-name="Ellipse 15" cx="3.188" cy="3.188" r="3.188" transform="translate(4.054 9.022)" fill="%23fff" stroke="%23000" stroke-width="3"/></g></svg>');
 }
+@media screen and (max-width: 768px) {
+  .advance-search-button::after {
+    top: -5px;
+    height: 30px;
+    width: 30px;
+  }
+}
 .modal-backdrop {
  background-color: #fff;
@@ -16990,12 +17027,46 @@ ul.sf_date_field .sf-datepicker {
 #advance-search-modal .btn-close {
  opacity: 1;
 }
+@media screen and (max-width: 900px) {
+  #advance-search-modal .btn-close {
+    float: left;
+    margin: unset;
+    background-color: #e00;
+    background-image: none;
+    position: absolute;
+    left: 0;
+    top: 40px;
+    width: 40px;
+    height: 41px;
+    border: 0 solid #e00;
+    border-radius: 0 50% 50% 0;
+    padding: 0;
+    z-index: 99;
+  }
+}
+@media screen and (max-width: 900px) {
+  #advance-search-modal .btn-close:after {
+    content: "";
+    width: 11px;
+    height: 18px;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.095" height="15" viewBox="0 0 9.095 15"><path id="Path_1291" data-name="Path 1291" d="M7.515,5.543c.52-.526,1.03-1.048,1.546-1.564Q10.918,2.123,12.779.272a.834.834,0,0,1,1.232,0c.236.242.477.479.716.718a.817.817,0,0,1,0,1.222L11.379,5.557Q9.758,7.18,8.138,8.8a.9.9,0,0,1-.606.289.864.864,0,0,1-.667-.288Q5.614,7.551,4.363,6.3L.956,2.889c-.232-.232-.465-.463-.7-.7A.812.812,0,0,1,.269.993l.71-.71a.833.833,0,0,1,1.25,0l3.016,3L7.429,5.462Z" transform="translate(9.095 0) rotate(90)" fill="%23fff"/></svg>');
+    display: inline-block;
+    position: absolute;
+    top: 12px;
+    left: 13px;
+  }
+}
 #advance-search-modal .btn-close:hover {
  opacity: 0.5;
 }
 #advance-search-modal .modal-content {
  border: 0px solid #707070;
 }
+#advance-search-modal .modal-header {
+  position: relative;
+}
 #advance-search-modal .modal-footer,
 #advance-search-modal .modal-header,
 #advance-search-modal .modal-body {
@@ -17006,10 +17077,27 @@ ul.sf_date_field .sf-datepicker {
 #advance-search-modal .modal-body {
  padding: 0px 35px 35px 35px;
 }
+@media screen and (max-width: 900px) {
+  #advance-search-modal .modal-body {
+    padding: 5px 60px;
+  }
+}
 #advance-search-modal .modal-dialog {
  width: 80%;
  max-width: 1066px;
 }
+@media screen and (max-width: 900px) {
+  #advance-search-modal .modal-dialog {
+    width: 100%;
+    margin: 0px;
+    height: 100vh;
+  }
+}
+@media screen and (max-width: 900px) {
+  #advance-search-modal .modal-dialog .searchandfilter {
+    width: 100%;
+  }
+}
 #advance-search-modal .modal-dialog .searchandfilter h4, #advance-search-modal .modal-dialog .searchandfilter .h4 {
  font-size: 24px !important;
  line-height: 30px;
@@ -17021,6 +17109,11 @@ ul.sf_date_field .sf-datepicker {
  margin-left: 0px;
  margin-bottom: 0px;
 }
+@media screen and (max-width: 900px) {
+  #advance-search-modal .modal-dialog .searchandfilter .sf-field-search {
+    width: 90%;
+  }
+}
 #advance-search-modal .modal-dialog .searchandfilter .sf-field-search h4, #advance-search-modal .modal-dialog .searchandfilter .sf-field-search .h4 {
  font-size: 45px !important;
  line-height: 57px;
@@ -17028,6 +17121,13 @@ ul.sf_date_field .sf-datepicker {
  font-weight: bold;
  display: block !important;
 }
+@media screen and (max-width: 900px) {
+  #advance-search-modal .modal-dialog .searchandfilter .sf-field-search h4, #advance-search-modal .modal-dialog .searchandfilter .sf-field-search .h4 {
+    font-size: 35px !important;
+    line-height: 40px;
+    margin-top: -10px;
+  }
+}
 #advance-search-modal .modal-dialog .searchandfilter .sf-field-search input[name="_sf_search[]"] {
  background-color: #f0f0f0;
 }
@@ -17035,11 +17135,28 @@ ul.sf_date_field .sf-datepicker {
  margin-left: 50px !important;
  width: 95% !important;
  position: relative;
+  width: 100%;
+}
+@media screen and (max-width: 900px) {
+  #advance-search-modal .modal-dialog .searchandfilter .sf-field-search label {
+    margin-left: 20px !important;
+  }
+}
+@media screen and (max-width: 900px) {
+  #advance-search-modal .modal-dialog .searchandfilter .sf-field-search label:after {
+    top: 10px;
+  }
 }
 #advance-search-modal .modal-dialog .searchandfilter .sf-field-reset,
 #advance-search-modal .modal-dialog .searchandfilter .sf-field-submit {
  display: inline-block;
 }
+@media screen and (max-width: 768px) {
+  #advance-search-modal .modal-dialog .searchandfilter .sf-field-reset,
+  #advance-search-modal .modal-dialog .searchandfilter .sf-field-submit {
+    width: 100%;
+  }
+}
 #advance-search-modal .modal-dialog .searchandfilter input[name=_sf_submit] {
  background: #ee0000 0% 0% no-repeat padding-box;
  color: #fff;
@@ -17050,6 +17167,12 @@ ul.sf_date_field .sf-datepicker {
  margin-right: 24px;
  margin-left: 0px;
 }
+@media screen and (max-width: 768px) {
+  #advance-search-modal .modal-dialog .searchandfilter input[name=_sf_submit] {
+    margin-top: 35px;
+    width: 100%;
+  }
+}
 #advance-search-modal .modal-dialog .searchandfilter input[name=_sf_submit]:hover {
  background: #669999;
 }
@@ -17065,6 +17188,11 @@ ul.sf_date_field .sf-datepicker {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
 }
+@media screen and (max-width: 768px) {
+  #advance-search-modal .modal-dialog .searchandfilter .search-filter-reset-custom {
+    width: 100%;
+  }
+}
 #advance-search-modal .modal-dialog .searchandfilter .search-filter-reset-custom:hover {
  background: #669999;
 }
@@ -17109,6 +17237,11 @@ ul.sf_date_field .sf-datepicker {
  display: flex;
  flex-direction: column;
 }
+@media screen and (max-width: 950px) {
+  #search-wrapper #main {
+    margin: 0px 10px;
+  }
+}
 #search-wrapper #main > article {
  padding: 2rem 0;
  border-top: 1px solid #bebebe;
@@ -17147,7 +17280,8 @@ ul.sf_date_field .sf-datepicker {
  display: inline-block;
  position: relative;
  top: 5px;
-  left: -0.5rem;
+  left: -0.2rem;
+  margin-right: 5px;
 }
 #search-wrapper #main > article a[href$=".doc"] h2:before, #search-wrapper #main > article a[href$=".doc"] .h2:before,
 #search-wrapper #main > article a[href$=".docx"] h2:before,
@@ -17161,7 +17295,8 @@ ul.sf_date_field .sf-datepicker {
  display: inline-block;
  position: relative;
  top: 5px;
-  left: -0.5rem;
+  left: -0.2rem;
+  margin-right: 5px;
 }
 #search-wrapper #main > article a[href$=".xls"] h2:before, #search-wrapper #main > article a[href$=".xls"] .h2:before,
 #search-wrapper #main > article a[href$=".xlsx"] h2:before,
@@ -17175,7 +17310,8 @@ ul.sf_date_field .sf-datepicker {
  display: inline-block;
  position: relative;
  top: 5px;
-  left: -0.5rem;
+  left: -0.2rem;
+  margin-right: 5px;
 }
 #search-wrapper #main > article .entry-header {
  height: auto !important;
--- a/wp-content/themes/msf-child/css/child-theme.css.map
View file @49d3c30
+++ b/wp-content/themes/msf-child/css/child-theme.css.map
View file @49d3c30
--- a/wp-content/themes/msf-child/css/child-theme.min.css
View file @49d3c30
+++ b/wp-content/themes/msf-child/css/child-theme.min.css
View file @49d3c30
--- a/wp-content/themes/msf-child/css/child-theme.min.css.map
View file @49d3c30
+++ b/wp-content/themes/msf-child/css/child-theme.min.css.map
View file @49d3c30
--- a/wp-content/themes/msf-child/src/sass/theme/_search.scss
View file @49d3c30
+++ b/wp-content/themes/msf-child/src/sass/theme/_search.scss
View file @49d3c30
@@ -3,7 +3,7 @@
  font-weight: 700;
  line-height: 24px !important;
  font-size: 30px !important;
-  text-transform: uppercase;
+  text-transform: none;
  @media screen and (max-width: 768px) {
      font-size: 2.188rem !important;
@@ -62,7 +62,7 @@
      padding: 12px 45px 11px 45px;
      margin: auto;
      margin-top: 28px;
+      border-radius: 40px !important;
      &:after {
          display: none;
      }
@@ -86,6 +86,7 @@
  #search-sidebar {
      flex-direction: column;
+      margin-bottom: 50px;
      @media screen and (max-width: 950px) {
          width: 100%;
@@ -175,7 +176,7 @@
  .searchandfilter h4 {
      font-size: 16px !important;
-      color: #4d4d4d !important;
+      color: #000 !important;
      font-weight: 700 !important;
  }
@@ -209,11 +210,15 @@
    flex-wrap: nowrap;
    display: inline-block !important;
    margin-left: 50px;
-    @media screen and (max-width: 950px) {
+    @media screen and (max-width: 900px) {
      margin-bottom: 30px;
+      width: calc(100% - 80px);
+      margin-left: 20px;
  }
    label {
        width: 100%;
        &:after {
@@ -225,6 +230,14 @@
          width: 2.063rem;
          height: 2.063rem;
          top: 1.2rem;
+          @media screen and (max-width: 900px) {
+            width: 20px;
+            height: 20px;
+            left: -25px;
+            top: 25px;
+          }
      }
    }
@@ -238,6 +251,10 @@
        line-height: 1.5;
        color: #212529;
        padding: 0.375rem 0.75rem;
+        @media screen and (max-width: 900px) {
+            padding: 0;
+            font-size: 24px;
+        }
    }
 }
@@ -261,6 +278,11 @@
        transition: none;
        display: inline-block !important;
+        @media screen and (max-width: 900px) {
+            height: 40px;
+            width:40px;
+        }
        &:hover {
            background: #669999;
        }
@@ -340,6 +362,10 @@ ul.sf_date_field {
  width: 40px;
  text-indent: -9999px;
  display: inline-block;
+  @media screen and (max-width: 900px) {
+    height: 30px;
+    width: 30px;
+  }
 }
 .advance-search-button::after {
@@ -350,6 +376,11 @@ ul.sf_date_field {
  display: inline-block;
  height: 40px;
  width: 40px;
+  @media screen and (max-width: 768px) {
+    top: -5px;
+    height: 30px;
+    width: 30px;
+  }
  background-size: contain;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26.954" height="27.484" viewBox="0 0 26.954 27.484"><g id="Group_722" data-name="Group 722" transform="translate(0 1.5)"><line id="Line_15" data-name="Line 15" x2="26.954" transform="translate(0 3.254)" fill="none" stroke="%23000" stroke-width="3"/><line id="Line_16" data-name="Line 16" x2="26.954" transform="translate(0 12.401)" fill="none" stroke="%23000" stroke-width="3"/><line id="Line_17" data-name="Line 17" x2="26.954" transform="translate(0 21.565)" fill="none" stroke="%23000" stroke-width="3"/><circle id="Ellipse_13" data-name="Ellipse 13" cx="3.188" cy="3.188" r="3.188" transform="translate(16.369)" fill="%23fff" stroke="%23000" stroke-width="3"/><circle id="Ellipse_14" data-name="Ellipse 14" cx="3.188" cy="3.188" r="3.188" transform="translate(16.369 18.109)" fill="%23fff" stroke="%23000" stroke-width="3"/><circle id="Ellipse_15" data-name="Ellipse 15" cx="3.188" cy="3.188" r="3.188" transform="translate(4.054 9.022)" fill="%23fff" stroke="%23000" stroke-width="3"/></g></svg>');
 }
@@ -362,6 +393,36 @@ ul.sf_date_field {
 #advance-search-modal {
  .btn-close {
      opacity: 1;
+      @media screen and (max-width: 900px) {
+        float: left;
+        margin: unset;
+        background-color: #e00;
+        background-image: none;
+        position: absolute;
+        left: 0;
+        top: 40px;
+        width: 40px;
+        height: 41px;
+        border: 0 solid #e00;
+        border-radius: 0 50% 50% 0;
+        padding: 0;
+        z-index: 99;
+        }
+        &:after{
+            @media screen and (max-width: 900px) {
+            content:"";
+            width: 11px;
+            height: 18px;
+            background-repeat: no-repeat;
+            background-size: contain;
+            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.095" height="15" viewBox="0 0 9.095 15"><path id="Path_1291" data-name="Path 1291" d="M7.515,5.543c.52-.526,1.03-1.048,1.546-1.564Q10.918,2.123,12.779.272a.834.834,0,0,1,1.232,0c.236.242.477.479.716.718a.817.817,0,0,1,0,1.222L11.379,5.557Q9.758,7.18,8.138,8.8a.9.9,0,0,1-.606.289.864.864,0,0,1-.667-.288Q5.614,7.551,4.363,6.3L.956,2.889c-.232-.232-.465-.463-.7-.7A.812.812,0,0,1,.269.993l.71-.71a.833.833,0,0,1,1.25,0l3.016,3L7.429,5.462Z" transform="translate(9.095 0) rotate(90)" fill="%23fff"/></svg>');
+            display: inline-block;
+            position: absolute;
+            top: 12px;
+            left: 13px;
+            }
+        }
  }
  .btn-close:hover {
@@ -372,6 +433,10 @@ ul.sf_date_field {
      border: 0px solid #707070;
  }
+  .modal-header {
+    position: relative;
+}
  .modal-footer,
  .modal-header,
  .modal-body {
@@ -382,30 +447,50 @@ ul.sf_date_field {
  .modal-body {
      padding: 0px 35px 35px 35px;
+      @media screen and (max-width: 900px) {
+        padding: 5px 60px;
+      }
  }
  .modal-dialog {
      width: 80%;
      max-width: 1066px;
+      @media screen and (max-width: 900px) {
+        width: 100%;
+        margin: 0px;
+        height: 100vh;
+      }
      .searchandfilter {
+            @media screen and (max-width: 900px) {
+               width: 100%; 
+            }
          h4 {
              font-size: 24px !important;
              line-height: 30px;
              text-align: left;
              font-weight: lighter;
              font-family: "PT Sans", sans-serif;
          }
          .sf-field-search {
            margin-left: 0px;
            margin-bottom: 0px;
+            @media screen and (max-width: 900px) {
+                width: 90%;
+            }
              h4 {
                  font-size: 45px !important;
                  line-height: 57px;
                  margin-top: -20px;
                  font-weight: bold;
                  display: block !important;
+                  @media screen and (max-width: 900px) {
+                    font-size: 35px !important;
+                    line-height: 40px;
+                    margin-top: -10px;
+                  }
              }
              input[name="_sf_search[]"] {
@@ -416,6 +501,16 @@ ul.sf_date_field {
                  margin-left: 50px !important;
                  width: 95% !important;
                  position: relative;
+                  @media screen and (max-width: 900px) {
+                    margin-left: 20px!important;
+                  }
+                    width: 100%;
+                    &:after {
+                        @media screen and (max-width: 900px) {
+                        top: 10px;
+                        }
+                    }
              }
          }
@@ -426,15 +521,22 @@ ul.sf_date_field {
          .sf-field-reset,
          .sf-field-submit {
              display: inline-block;
+              @media screen and (max-width: 768px) {
+                width: 100%;
+              }
          }
          input[name="_sf_submit"] {
              background: #ee0000 0% 0% no-repeat padding-box;
              color: #fff;
              border-radius: 40px !important;
-              ;
              height: 44px;
              width: 182px;
+              @media screen and (max-width: 768px) {
+                margin-top:35px;
+                width: 100%;
+              }
              border: 0 !important;
              margin-right: 24px;
              margin-left: 0px;
@@ -451,6 +553,9 @@ ul.sf_date_field {
              ;
              height: 44px;
              width: 182px;
+              @media screen and (max-width: 768px) {
+                width: 100%;
+              }
              border: 0 !important;
              float: unset;
              font-size: 1.125rem;
--- a/wp-content/themes/msf-child/src/sass/theme/_search_results.scss
View file @49d3c30
+++ b/wp-content/themes/msf-child/src/sass/theme/_search_results.scss
View file @49d3c30
@@ -11,7 +11,9 @@
        padding-top: 1rem;
    }
  }
+  .page-item {
+  }
  #search-wrapper {
    margin-top: 1rem;
    padding-top: 3rem;
@@ -23,6 +25,9 @@
  #main {
    display: flex;
    flex-direction: column;
+    @media screen and (max-width: 950px) {
+    margin: 0px 10px;
+    }
    &>article {
        padding: 2rem 0;
        border-top: 1px solid #bebebe;
@@ -66,7 +71,8 @@
                    display: inline-block;
                    position: relative;
                    top: 5px;
-                    left:-0.5rem;
+                    left:-0.2rem;
+                    margin-right: 5px;
                }
            }
        }
@@ -83,7 +89,8 @@
                    display: inline-block;
                    position: relative;
                    top: 5px;
-                    left:-0.5rem;
+                    left:-0.2rem;
+                    margin-right: 5px;
                }
            }
        }  
@@ -100,7 +107,8 @@
                    display: inline-block;
                    position: relative;
                    top: 5px;
-                    left:-0.5rem;
+                    left:-0.2rem;
+                    margin-right: 5px;
                }
            }
        }