Merge pull request #742 from mattico/narrow-device-style-fixes
Reduce the margins on header icons on narrow devices
This commit is contained in:
commit
a287a0dcc8
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue