Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
49d3c301 by Jeff Balicki
Options

search mobile 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent c479fcff
Inline Side-by-side
Showing 6 changed files with 264 additions and 15 deletions
......@@ -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;
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -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,10 +210,14 @@
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%;
......@@ -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;
......
......@@ -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;
}
}
}
......