Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Use css variables for top bar height

Browse source
This commit is contained in:
Tusooa Zhu 2022-04-29 21:51:04 -04:00
parent 9deb1d8fcf
commit d1436fbb10
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
4 changed files with 14 additions and 14 deletions

3
src/App.scss
View file

@ -64,6 +64,7 @@ body {
&.hidden {
display: none;
}
--top-nav-height: #{$top-nav-height};
}
a {
@ -610,7 +611,7 @@ nav {
margin-top: -10px;
.sidebar-scroller {
height: calc(100vh - #{$top-nav-height});
height: calc(100vh - var(--top-nav-height, #{$top-nav-height}));
width: 365px;
padding-top: 10px;
padding-right: 50px;

1
src/_variables.scss
View file

@ -34,4 +34,3 @@ $fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(
$status-margin: 0.75em;
$top-nav-height: 50px;
$small-spacing: 5px;

10
src/components/desktop_nav/desktop_nav.scss
View file

@ -1,7 +1,7 @@
@import '../../_variables.scss';
.DesktopNav {
height: $top-nav-height;
height: var(--top-nav-height, $top-nav-height);
width: 100%;
position: fixed;
@ -11,7 +11,7 @@
.inner-nav {
display: grid;
grid-template-rows: $top-nav-height;
grid-template-rows: var(--top-nav-height, $top-nav-height);
grid-template-columns: 2fr auto 2fr;
grid-template-areas: "sitename logo actions";
box-sizing: border-box;
@ -77,7 +77,7 @@
img {
display: inline-block;
height: $top-nav-height;
height: var(--top-nav-height, $top-nav-height);
}
}
@ -103,8 +103,8 @@
.item {
flex: 1;
line-height: $top-nav-height;
height: $top-nav-height;
line-height: var(--top-nav-height, $top-nav-height);
height: var(--top-nav-height, $top-nav-height);
overflow: hidden;
display: flex;
flex-wrap: wrap;

14
src/components/mobile_nav/mobile_nav.vue
View file

@ -92,9 +92,9 @@
.MobileNav {
.mobile-nav {
display: grid;
line-height: $top-nav-height;
height: $top-nav-height;
grid-template-rows: $top-nav-height;
line-height: var(--top-nav-height, $top-nav-height);
height: var(--top-nav-height, $top-nav-height);
grid-template-rows: var(--top-nav-height, $top-nav-height);
grid-template-columns: 2fr auto;
width: 100%;
position: fixed;
@ -167,8 +167,8 @@
justify-content: space-between;
z-index: 1;
width: 100%;
height: $top-nav-height;
line-height: $top-nav-height;
height: var(--top-nav-height, $top-nav-height);
line-height: var(--top-nav-height, $top-nav-height);
position: absolute;
color: var(--topBarText);
background-color: $fallback--fg;
@ -183,9 +183,9 @@
}
.mobile-notifications {
margin-top: $top-nav-height;
margin-top: var(--top-nav-height, $top-nav-height);
width: 100vw;
height: calc(100vh - #{$top-nav-height});
height: calc(100vh - var(--top-nav-height, #{$top-nav-height}));
overflow-x: hidden;
overflow-y: scroll;