bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2024-11-22 09:46:57 +01:00
Code Releases Activity

more menu tweaks

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
_src/_assets/styles/bigchain/_dropdowns.scss
View File

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

1
_src/_assets/styles/bigchain/_menus.scss
View File

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

7
_src/_assets/styles/bigchain/_select2-bigchaindb/_multiple.scss
View File

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

12
_src/_includes/menu-footer.html
View File

@ -19,7 +19,18 @@
{% assign active = 'active' %} {% assign active = 'active' %}
{% endif %} {% endif %}
{% unless link.items %}
<a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a> <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 %} {% endfor %}
</div> </div>
@ -34,7 +45,6 @@
<a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a> <a class="menu__link {{ active }} js-tracking-menu" href="{{ link.url }}">{{ link.title }}</a>
{% endfor %} {% endfor %}
</div> </div>

56
_src/_includes/menu-main.html
View File

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

6
_src/styleguide.md
View File

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