pnx/httpcb
Archived
1
0
Fork 0
Code Releases Activity

app/assets/less/layout/navigation.less: adding dropdown effect for user menu.

Browse source
This commit is contained in:
Henrik Hautakoski 2018-03-30 00:39:59 +02:00
parent 567c113031
commit 0d7e8e08f3
2 changed files with 37 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

34
app/assets/less/layout/navigation.less
View file

@ -110,17 +110,37 @@
&-user-menu {
&:extend(.nav);
.pull-right();
margin-top: 18px;
margin-top: 10px;
> li {
display: inline-block;
&-login {
padding-top: .3em;
padding-bottom: .3em;
}
.icon {
margin-right: .2em;
&-dropdown {
&:extend(.dropdown);
&-button {
display: inline-block;
padding: .3em .8em;
background: @usermenu-button-bg;
border-radius: @border-radius-base;
&:hover {
background: @usermenu-button-hover-bg;
}
}
&:not(:first-child) {
padding-left: 1em;
&-list {
&:extend(.dropdown-menu all);
&:extend(.dropdown-menu-right all);
text-shadow: none;
.box-shadow(@dropdown-shadow);
}
&.open &-list {
display: inline-block;
}
}
}

10
app/assets/less/variables.less
View file

@ -74,6 +74,10 @@
@navbar-brand-color: @brand-color;
@navbar-brand-hover-color: darken(@brand-color, 15%);
// User menu
@usermenu-button-bg: @navbar-background;
@usermenu-button-hover-bg: darken(@usermenu-button-bg, 8%);
// Footer
@footer-height: 80px;
@footer-border-color: @border-color;
@ -116,6 +120,12 @@
@block-shadow-2: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12);
@block-shadow-3: 0 3px 3px 0 rgba(0, 0, 0, 0.16);
// ----------------------------------
// Dropdown
// ----------------------------------
@dropdown-shadow: 0 2px 4px rgba(0,0,0,0.1);
// ----------------------------------
// Blankslate
// ----------------------------------