1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-11-21 17:26:55 +01:00

more menu tweaks

This commit is contained in:
Matthias Kretschmann 2018-04-06 10:41:46 +02:00
parent 041ba7b2f8
commit 16f22fb7a6
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 57 additions and 42 deletions

View File

@ -5,6 +5,14 @@
}
.dropdown-toggle {
box-shadow: none;
cursor: default;
&:hover,
&:focus {
background: transparent;
}
&:after {
content: '';
display: inline-block;
@ -22,7 +30,7 @@
top: 100%;
left: 0;
z-index: 10;
display: none;
display: block;
float: left;
min-width: 10rem;
padding: $spacer / 4 0;
@ -39,6 +47,10 @@
max-height: 20rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: .2s $timing-bounce;
opacity: 0;
transform: scale(1, 0);
transform-origin: top;
@media (max-width: 27rem), (max-height: 27rem) {
max-height: 11.25rem;
@ -73,7 +85,8 @@
.dropdown-menu.show,
.dropdown:hover > .dropdown-menu {
display: block;
transform: scale(1, 1);
opacity: 1;
}
.dropdown > .dropdown-toggle:active {

View File

@ -161,6 +161,7 @@
@media ($screen-md) {
padding-top: 0;
padding-bottom: 0;
text-align: right;
}
}

View File

@ -17,9 +17,7 @@
.select2-selection__placeholder {
color: #999;
margin-top: 5px;
float: left;
}
@ -33,13 +31,10 @@
.select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px;
@ -48,10 +43,8 @@
.select2-selection__choice__remove {
color: #999;
cursor: pointer;
display: inline-block;
font-weight: $font-weight-bold;
margin-right: 2px;
&:hover {

View File

@ -19,7 +19,18 @@
{% assign active = 'active' %}
{% endif %}
{% unless link.items %}
<a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
{% endunless %}
{% for item in link.items %}
{% assign active = nil %}
{% if page.url contains item.url %}
{% assign active = 'active' %}
{% endif %}
<a class="menu__link menu__link--secondary {{ active }} js-tracking-menu" href="{{ item.url }}">{{ item.title }}</a>
{% endfor %}
{% endfor %}
</div>
@ -34,7 +45,6 @@
<a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
</div>

View File

@ -19,39 +19,37 @@
<div class="grid__col grid__col--4">
<div class="menu-overflow">
{% for link in site.data.menus.main %}
{% for link in site.data.menus.main %}
{% assign active = nil %}
{% if page.url contains link.url %}
{% assign active = 'active' %}
{% endif %}
{% assign active = nil %}
{% if page.url contains link.url %}
{% assign active = 'active' %}
{% endif %}
{% if link.items %}
<div class="dropdown">
<a class="menu__link {{ active }} js-tracking-menu dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
id="dropdownMenuButton"
href="{{ link.url }}">{{ link.title }}
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
{% for item in link.items %}
{% assign active = nil %}
{% if page.url contains item.url %}
{% assign active = 'active' %}
{% endif %}
<a class="dropdown-item {{ active }}" href="{{ item.url }}">{{ item.title }}</a>
{% endfor %}
</div>
{% if link.items %}
<div class="dropdown dropdown--hover">
<a class="menu__link {{ active }} js-tracking-menu dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
id="dropdownMenuButton"
href="{{ link.url }}">{{ link.title }}
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
{% for item in link.items %}
{% assign active = nil %}
{% if page.url contains item.url %}
{% assign active = 'active' %}
{% endif %}
<a class="dropdown-item {{ active }}" href="{{ item.url }}">{{ item.title }}</a>
{% endfor %}
</div>
{% else %}
<a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
{% endif %}
</div>
{% else %}
<a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
{% endif %}
{% endfor %}
</div>
{% endfor %}
</div>
</div>

View File

@ -325,9 +325,9 @@ Logo can be used with a base class and modifier classes for size & color:
### Dropdowns
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<a class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Hover me
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>