FreakU
/
Retrospring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

navbar mobile consistency

This commit is contained in:
Yuki 2015-04-22 07:12:12 +05:30
parent 1625ad6236
commit ef0330eae9
2 changed files with 45 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/stylesheets/application.css.scss
View File

@ -32,6 +32,7 @@ $navbar-inverse-link-hover-color: #ffffff;
$navbar-inverse-link-hover-bg: transparent; $navbar-inverse-link-hover-bg: transparent;
$navbar-inverse-link-active-color: #ffffff; $navbar-inverse-link-active-color: #ffffff;
$navbar-inverse-link-active-bg: transparent; $navbar-inverse-link-active-bg: transparent;
$navbar-inverse-link-active-bg-mobile: darken(#5e35b1, 7%);
$navbar-inverse-link-disabled-color: darken(#fff, 12.5%); $navbar-inverse-link-disabled-color: darken(#fff, 12.5%);
$navbar-inverse-link-disabled-bg: transparent; $navbar-inverse-link-disabled-bg: transparent;
$navbar-inverse-brand-color: $navbar-inverse-link-color; $navbar-inverse-brand-color: $navbar-inverse-link-color;

67
app/assets/stylesheets/scss/navbar.scss
View File

@ -133,33 +133,54 @@
border: none; border: none;
} }
nav.navbar .nav > li:not(.profile--image-dropdown) { @media (min-width: 768px) {
-moz-osx-font-smoothing: grayscale; nav.navbar .nav > li:not(.profile--image-dropdown) {
position: relative; -moz-osx-font-smoothing: grayscale;
position: relative;
&:before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: $navbar-inverse-link-color;
height: 0px;
-webkit-transition-property: height;
transition-property: height;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
&:hover, &:focus, &:active {
&:before { &:before {
height: 4px content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: $navbar-inverse-link-color;
height: 0px;
-webkit-transition-property: height;
transition-property: height;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
&:hover, &:focus, &:active {
&:before {
height: 4px
}
}
&.active:before {
height: 4px;
} }
} }
}
&.active:before { @media (max-width: 768px) {
height: 4px; nav.navbar .nav {
margin-bottom: 0;
margin-top: 0;
& > li {
&.active a {
background-color: $navbar-inverse-link-active-bg-mobile !important;
}
&.dropdown.profile--image-dropdown a .visible-xs {
padding-left: 15px;
line-height: 40px;
margin: 0;
}
}
} }
} }