Merge pull request #742 from mattico/narrow-device-style-fixes

Reduce the margins on header icons on narrow devices
This commit is contained in:
Matt Ickstadt 2018-07-25 13:41:33 -05:00 committed by GitHub
commit a287a0dcc8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 4 deletions

View File

@ -217,7 +217,7 @@ table thead td {
#menu-bar i,
#menu-bar .icon-button {
position: relative;
margin: 0 10px;
margin: 0 8px;
z-index: 10;
line-height: 50px;
cursor: pointer;
@ -227,6 +227,12 @@ table thead td {
-ms-transition: color 0.5s;
transition: color 0.5s;
}
@media only screen and (max-width: 420px) {
#menu-bar i,
#menu-bar .icon-button {
margin: 0 5px;
}
}
#menu-bar #print-button {
margin: 0 15px;
}
@ -237,6 +243,9 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
-ms-transform: translateY(-60px);
transform: translateY(-60px);
}
.left-buttons {
margin: 0 5px;
}
.no-js .left-buttons {
display: none;
}

View File

@ -14,7 +14,10 @@
i, .icon-button {
position: relative
margin: 0 10px
margin: 0 8px
@media only screen and (max-width: $narrow-device-max-width) {
margin: 0 5px
}
z-index: 10
line-height: 50px
cursor: pointer
@ -30,8 +33,9 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
transform: translateY(-60px);
}
.no-js .left-buttons {
display: none
.left-buttons {
.no-js & { display: none }
margin: 0 5px
}
.menu-title {

View File

@ -4,3 +4,4 @@ $content-max-width = 750px
$content-min-width = 320px
$page-plus-sidebar-width = $content-max-width + $sidebar-width + $page-padding * 2
$sidebar-reflow-width = $sidebar-width + $content-min-width
$narrow-device-max-width = 420px