gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(client): extract header height to a CSS variable

Browse Source
This commit is contained in:
Valeriy S
2019-01-29 09:43:47 +03:00
committed by mrugesh mohapatra
parent cc6e1fdbf4
commit 22cb0c355c
4 changed files with 14 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/components/Header/header.css
View File

@ -1,3 +1,7 @@
:root {
--header-height: 38px;
}
header { header {
top: 0; top: 0;
position: fixed; position: fixed;
@ -7,7 +11,7 @@ header {
#top-nav { #top-nav {
background: #006400; background: #006400;
height: 38px; height: var(--header-height);
margin-bottom: 0; margin-bottom: 0;
border-radius: 0; border-radius: 0;
border: none; border: none;
@ -39,7 +43,7 @@ header {
#top-right-nav a, #top-right-nav a,
#top-right-nav img { #top-right-nav img {
max-height: 38px; max-height: var(--header-height);
} }
#top-right-nav > li > a { #top-right-nav > li > a {
@ -81,7 +85,7 @@ li.user-state-link > a:focus {
} }
.user-state-spinner { .user-state-spinner {
height: 38px; height: var(--header-height);
padding: 0 12px; padding: 0 12px;
} }
@ -165,7 +169,7 @@ li.user-state-link > a:focus {
} }
.opened #top-right-nav { .opened #top-right-nav {
top: 38px; top: var(--header-height);
} }
#top-right-nav { #top-right-nav {

28
client/src/components/layouts/guide.css
View File

@ -69,7 +69,7 @@
.content, .content,
.sideNav { .sideNav {
/* 100vh - (navbar height) - (spacer height) */ /* 100vh - (navbar height) - (spacer height) */
height: calc(100vh - 38px - 30px); height: calc(100vh - var(--header-height) - 30px);
overflow-y: auto; overflow-y: auto;
} }
@ -100,11 +100,6 @@
transform: rotate(0deg); transform: rotate(0deg);
} }
.navItemTitle {
color: #006400;
cursor: pointer;
}
.navPanelUl { .navPanelUl {
list-style: none; list-style: none;
margin-bottom: 0; margin-bottom: 0;
@ -144,30 +139,13 @@
color: #006400; color: #006400;
} }
.bodyContainer {
--h: 100vh;
margin-top: 55px;
height: calc(var(--h) - 55px);
}
@media (max-width: 992px) { @media (max-width: 992px) {
.content { .content {
height: auto; height: auto;
} }
} }
.skip-link { .content,
background-color: white; .article {
left: 0;
padding: 5px 10px;
top: 0;
z-index: 9;
}
.skip-link:focus {
position: absolute;
}
.content {
outline: 0; outline: 0;
} }

2
client/src/components/layouts/layout.css
View File

@ -621,5 +621,5 @@ pre tt:after {
} }
} }
.default-layout { .default-layout {
margin-top: 38px; margin-top: var(--header-height);
} }

4
client/src/templates/Challenges/classic/classic.css
View File

@ -3,7 +3,7 @@
} }
.desktop-layout { .desktop-layout {
height: calc(100vh - 38px); height: calc(100vh - var(--header-height));
} }
.monaco-menu .action-label { .monaco-menu .action-label {
@ -26,7 +26,7 @@
} }
#challenge-page-tabs .tab-content { #challenge-page-tabs .tab-content {
height: calc(100vh - 107px); height: calc(100vh - var(--header-height) - 69px);
overflow-y: auto; overflow-y: auto;
} }