nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Avoid using fixed vertical margins and paddings in the header

Browse source
This commit is contained in:
Steffen van Bergerem 2017-08-10 14:41:12 +02:00 committed by flaburgan
parent 91e0e131a5
commit 9c40009ee1
1 changed files with 22 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
app/assets/stylesheets/header.scss
View file

@ -25,7 +25,7 @@
} }
.header-title { .header-title {
margin-top: -7px; margin: (($navbar-height - 32px - 2 * $navbar-padding-vertical) / 2) 0;
img { img {
height: 32px; height: 32px;
@ -50,7 +50,7 @@
} }
.nav-badge { .nav-badge {
padding: 16px 12px; padding: $navbar-padding-vertical 12px;
.badge { .badge {
position: absolute; position: absolute;
@ -140,7 +140,11 @@
.navbar-nav.hidden-xs { .navbar-nav.hidden-xs {
margin: 0; margin: 0;
margin-top: 6px;
a {
padding-bottom: $navbar-padding-vertical;
padding-top: $navbar-padding-vertical;
}
} }
.nav-badge { .nav-badge {
@ -164,12 +168,20 @@
width: 300px; width: 300px;
} }
.navbar-collapse {
padding-top: $navbar-padding-vertical / 2;
.navbar-nav {
margin-bottom: 0;
margin-top: 0;
}
}
.user-menu-dropdown { .user-menu-dropdown {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
box-shadow: none; box-shadow: none;
display: block; display: block;
margin-top: -8px; // To compensate parent ul margin
padding: 0; padding: 0;
position: static; position: static;
width: 100%; width: 100%;
@ -177,7 +189,7 @@
a { a {
color: $navbar-inverse-link-color; color: $navbar-inverse-link-color;
font-weight: bold; font-weight: bold;
padding: 10px 15px; padding: $nav-link-padding;
&:hover { &:hover {
background-color: $navbar-inverse-link-hover-bg; background-color: $navbar-inverse-link-hover-bg;
@ -189,9 +201,13 @@
@media (min-width: $grid-float-breakpoint) { @media (min-width: $grid-float-breakpoint) {
.navbar-form { // set correct margin for small inputs
margin-bottom: ($navbar-height - $input-height-small) / 2;
margin-top: ($navbar-height - $input-height-small) / 2;
}
[type="search"] { [type="search"] {
@include transition(width); @include transition(width);
margin-top: 2px;
width: 200px; width: 200px;
&:not(.active) { &:not(.active) {