Reduce the margins on header icons on narrow devices
This commit is contained in:
parent
b4e15e5357
commit
e7afb3340c
|
@ -217,7 +217,7 @@ table thead td {
|
||||||
#menu-bar i,
|
#menu-bar i,
|
||||||
#menu-bar .icon-button {
|
#menu-bar .icon-button {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 10px;
|
margin: 0 8px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -227,6 +227,12 @@ table thead td {
|
||||||
-ms-transition: color 0.5s;
|
-ms-transition: color 0.5s;
|
||||||
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 {
|
#menu-bar #print-button {
|
||||||
margin: 0 15px;
|
margin: 0 15px;
|
||||||
}
|
}
|
||||||
|
@ -237,6 +243,9 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
|
||||||
-ms-transform: translateY(-60px);
|
-ms-transform: translateY(-60px);
|
||||||
transform: translateY(-60px);
|
transform: translateY(-60px);
|
||||||
}
|
}
|
||||||
|
.left-buttons {
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
.no-js .left-buttons {
|
.no-js .left-buttons {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,7 +14,10 @@
|
||||||
|
|
||||||
i, .icon-button {
|
i, .icon-button {
|
||||||
position: relative
|
position: relative
|
||||||
margin: 0 10px
|
margin: 0 8px
|
||||||
|
@media only screen and (max-width: $narrow-device-max-width) {
|
||||||
|
margin: 0 5px
|
||||||
|
}
|
||||||
z-index: 10
|
z-index: 10
|
||||||
line-height: 50px
|
line-height: 50px
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
@ -30,8 +33,9 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
|
||||||
transform: translateY(-60px);
|
transform: translateY(-60px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-js .left-buttons {
|
.left-buttons {
|
||||||
display: none
|
.no-js & { display: none }
|
||||||
|
margin: 0 5px
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-title {
|
.menu-title {
|
||||||
|
|
|
@ -4,3 +4,4 @@ $content-max-width = 750px
|
||||||
$content-min-width = 320px
|
$content-min-width = 320px
|
||||||
$page-plus-sidebar-width = $content-max-width + $sidebar-width + $page-padding * 2
|
$page-plus-sidebar-width = $content-max-width + $sidebar-width + $page-padding * 2
|
||||||
$sidebar-reflow-width = $sidebar-width + $content-min-width
|
$sidebar-reflow-width = $sidebar-width + $content-min-width
|
||||||
|
$narrow-device-max-width = 420px
|
||||||
|
|
Loading…
Reference in New Issue