add mobile tabs and rework css classes
This commit is contained in:
jacr13
parent
151e969a21
commit
200fac9050
|
|
@ -98,6 +98,11 @@ header {
|
|||
border: 0px !important;
|
||||
}
|
||||
|
||||
.autocomplete-mobile{
|
||||
display: -webkit-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.desktop-header-logo {
|
||||
height: 1.65em;
|
||||
}
|
||||
|
|
@ -107,81 +112,93 @@ header {
|
|||
flex: 1
|
||||
}
|
||||
|
||||
.desktop-tab-div {
|
||||
border-radius: 0 0 8px 8px;
|
||||
box-shadow: 0 2px 3px rgba(32, 33, 36, 0.18);
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.desktop-tab-div-2 {
|
||||
border-top: 1px solid #dadce0;
|
||||
height: 39px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.desktop-tab-div-3 {
|
||||
height: 51px;
|
||||
overflow-scrolling: touch;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 39px;
|
||||
display: box;
|
||||
display: flex;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.desktop-header-tab {
|
||||
box-pack: justify;
|
||||
font-size: 12px;
|
||||
line-height: 37px;
|
||||
justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
span.desktop-tab-span {
|
||||
border-bottom: 2px solid #4285f4;
|
||||
color: #4285f4;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.desktop-header-tab a, .desktop-header-tab span {
|
||||
color: #70757a;
|
||||
display: block;
|
||||
flex: none;
|
||||
padding: 0 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.desktop-header-tab a, .desktop-header-tab span {
|
||||
color: #70757a;
|
||||
display: block;
|
||||
flex: none;
|
||||
padding: 0 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1967D2;
|
||||
text-decoration: none;
|
||||
tap-highlight-color: rgba(0, 0, 0, .10);
|
||||
}
|
||||
|
||||
.header input {
|
||||
.header-tab-div {
|
||||
border-radius: 0 0 8px 8px;
|
||||
box-shadow: 0 2px 3px rgba(32, 33, 36, 0.18);
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-tab-div-2 {
|
||||
border-top: 1px solid #dadce0;
|
||||
height: 39px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-tab-div-3 {
|
||||
height: 51px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.desktop-header {
|
||||
height: 39px;
|
||||
display: box;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-tab {
|
||||
box-pack: justify;
|
||||
font-size: 12px;
|
||||
line-height: 37px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.desktop-header a, .desktop-header span {
|
||||
color: #70757a;
|
||||
display: block;
|
||||
flex: none;
|
||||
padding: 0 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
span.header-tab-span {
|
||||
border-bottom: 2px solid #4285f4;
|
||||
color: #4285f4;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
height: 39px;
|
||||
display: box;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.mobile-header a, .mobile-header span {
|
||||
color: #70757a;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
/* padding: 8px 12px 8px 12px; */
|
||||
}
|
||||
|
||||
span.mobile-tab-span {
|
||||
border-bottom: 2px solid #202124;
|
||||
color: #202124;
|
||||
height: 26px;
|
||||
/* margin: 0 12px; */
|
||||
/* padding: 0; */
|
||||
}
|
||||
|
||||
.desktop-header input {
|
||||
margin: 2px 4px 2px 8px;
|
||||
}
|
||||
|
||||
a.desktop-tab-a:visited {
|
||||
a.header-tab-a:visited {
|
||||
color: #70757a;
|
||||
}
|
||||
|
||||
.desktop-tab-div-end {
|
||||
.header-tab-div-end {
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
</a>
|
||||
<div class="H0PQec mobile-input-div">
|
||||
<div class="sbc esbc autocomplete">
|
||||
<div class="autocomplete-mobile esbc autocomplete">
|
||||
<input
|
||||
id="search-bar"
|
||||
class="mobile-search-bar"
|
||||
|
|
@ -31,6 +31,25 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="header-tab-div">
|
||||
<div class="header-tab-div-2">
|
||||
<div class="header-tab-div-3">
|
||||
<div class="mobile-header header-tab">
|
||||
{% for tab_id, tab_content in tabs.items() %}
|
||||
{% if tab_content['selected'] %}
|
||||
<span class="mobile-tab-span">{{ tab_content['name'] }}</span>
|
||||
{% else %}
|
||||
<a class="header-tab-a" href="{{ tab_content['href'] }}">{{ tab_content['name'] }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="header-tab-div-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="" id="s">
|
||||
</div>
|
||||
</header>
|
||||
{% else %}
|
||||
<header>
|
||||
|
|
@ -68,18 +87,18 @@
|
|||
</div>
|
||||
</header>
|
||||
<div>
|
||||
<div class="desktop-tab-div">
|
||||
<div class="desktop-tab-div-2">
|
||||
<div class="desktop-tab-div-3">
|
||||
<div class="header desktop-header-tab">
|
||||
<div class="header-tab-div">
|
||||
<div class="header-tab-div-2">
|
||||
<div class="header-tab-div-3">
|
||||
<div class="desktop-header header-tab">
|
||||
{% for tab_id, tab_content in tabs.items() %}
|
||||
{% if tab_content['selected'] %}
|
||||
<span class="desktop-tab-span">{{ tab_content['name'] }}</span>
|
||||
<span class="header-tab-span">{{ tab_content['name'] }}</span>
|
||||
{% else %}
|
||||
<a class="desktop-tab-a" href="{{ tab_content['href'] }}">{{ tab_content['name'] }}</a>
|
||||
<a class="header-tab-a" href="{{ tab_content['href'] }}">{{ tab_content['name'] }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="desktop-tab-div-end"></div>
|
||||
<div class="header-tab-div-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user