Skip to content
Snippets Groups Projects
Commit 813c6683 authored by FORESTIER Fabien's avatar FORESTIER Fabien
Browse files

Improve header responsive

parent 47b96e43
No related branches found
No related tags found
1 merge request!48Version 2.3.0
...@@ -11,12 +11,32 @@ ...@@ -11,12 +11,32 @@
background-color: $grey-background-color; background-color: $grey-background-color;
padding: 0.75rem 0.875rem 0.75rem 0.875rem; padding: 0.75rem 0.875rem 0.75rem 0.875rem;
@media screen and (max-width: $desktop) {
flex-wrap: wrap-reverse;
.left-section,
.right-section {
flex-grow: 1;
width: 100%;
align-items: center;
}
.right-section {
display: flex;
margin-bottom: 0.5rem;
}
}
.button { .button {
height: 2.25rem; height: 2.25rem;
} }
.left-section { .left-section {
display: flex; display: flex;
@media screen and (max-width: $tablet) {
flex-wrap: wrap;
}
} }
.properties-dropdown button { .properties-dropdown button {
...@@ -33,15 +53,30 @@ ...@@ -33,15 +53,30 @@
.right-section .button { .right-section .button {
margin-left: 1rem; margin-left: 1rem;
@media screen and (max-width: $desktop) {
&.button-toogle-table-map {
flex-grow: 1;
justify-content: center;
}
&:first-of-type {
margin-left: 0;
}
}
} }
.left-section .button { .left-section .button {
margin-right: 1rem; margin-right: 1rem;
} }
.button-research button { .button-research .button {
background-color: $blue-color; background-color: $blue-color;
@media screen and (max-width: $tablet) {
margin-right: 0;
}
.icon, .icon,
i { i {
color: white; color: white;
...@@ -49,8 +84,21 @@ ...@@ -49,8 +84,21 @@
} }
.search-bar { .search-bar {
@media screen and (max-width: $desktop) {
flex-grow: 1;
.research-input {
width: 100%;
display: flex;
}
.input {
flex-grow: 1;
}
}
.field { .field {
height: 100%; height: 2.25rem;
.reset-research-icon { .reset-research-icon {
cursor: pointer; cursor: pointer;
...@@ -64,11 +112,14 @@ ...@@ -64,11 +112,14 @@
.button, .button,
.input, .input,
.reset-research-icon { .reset-research-icon {
height: 100%; height: 2.25rem;
} }
.input { .input {
width: 18.75rem; @media screen and (min-width: $desktop) {
width: 18.75rem;
}
box-shadow: none; box-shadow: none;
} }
} }
...@@ -79,6 +130,11 @@ ...@@ -79,6 +130,11 @@
position: relative; position: relative;
align-self: center; align-self: center;
padding-bottom: 0.2rem; padding-bottom: 0.2rem;
@media screen and (max-width: $tablet) {
width: 100%;
margin-top: 0.5rem;
}
} }
.result-number-bar { .result-number-bar {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment