Skip to content

G
gitlab-ce
Commit c6092e40 authored by Eugie Limpin's avatar Eugie Limpin Committed by Simon Knox
Browse files
Options

Set $header-height as a CSS variable that defaults to 40px 

This allows us to override the value of the variable by simply defining
the --header-height CSS variable. The alternative is to add (or
subtract) a value to all places where $header-height is used if we want
to override it which is error prone and bloats our CSS files.
parent 2bd98e30
Hide whitespace changes
Inline Side-by-side
Showing with 71 additions and 71 deletions
app/assets/stylesheets/components/whats_new.scss
View file @ c6092e40
......@@ -36,15 +36,15 @@
}
.with-performance-bar .whats-new-drawer {
margin-top: $performance-bar-height + $header-height;
margin-top: calc(#{$performance-bar-height} + #{$header-height});
}
.with-system-header .whats-new-drawer {
margin-top: $system-header-height + $header-height;
margin-top: calc(#{$system-header-height} + #{$header-height});
}
.with-performance-bar.with-system-header .whats-new-drawer {
margin-top: $performance-bar-height + $system-header-height + $header-height;
margin-top: calc(#{$performance-bar-height} + #{$system-header-height} + #{$header-height});
}
.gl-badge.whats-new-item-badge {
......
app/assets/stylesheets/framework/diffs.scss
View file @ c6092e40
......@@ -34,7 +34,7 @@
@media (min-width: map-get($grid-breakpoints, md)) {
// The `+11` is to ensure the file header border shows when scrolled -
// the bottom of the compare-versions header and the top of the file header
$mr-file-header-top: $mr-version-controls-height + $header-height + $mr-tabs-height + 11;
$mr-file-header-top: calc(#{$mr-version-controls-height} + #{$header-height} + #{$mr-tabs-height} + 11);
position: -webkit-sticky;
position: sticky;
......@@ -42,11 +42,11 @@
z-index: 120;
.with-system-header & {
top: $mr-file-header-top + $system-header-height;
top: calc(#{$mr-file-header-top} + #{$system-header-height});
}
.with-system-header.with-performance-bar & {
top: $mr-file-header-top + $system-header-height + $performance-bar-height;
top: calc(#{$mr-file-header-top} + #{$system-header-height} + #{$performance-bar-height});
}
&::before {
......@@ -61,22 +61,22 @@
}
.with-performance-bar & {
top: $mr-file-header-top + $performance-bar-height;
top: calc(#{$mr-file-header-top} + #{$performance-bar-height});
}
&.is-commit {
top: $header-height + $commit-stat-summary-height;
top: calc(#{$header-height} + #{$commit-stat-summary-height});
.with-performance-bar & {
top: $header-height + $commit-stat-summary-height + $performance-bar-height;
top: calc(#{$header-height} + #{$commit-stat-summary-height} + #{$performance-bar-height});
}
}
&.is-compare {
top: $header-height + $compare-branches-sticky-header-height;
top: calc(#{$header-height} + #{$compare-branches-sticky-header-height});
.with-performance-bar & {
top: $performance-bar-height + $header-height + $compare-branches-sticky-header-height;
top: calc(#{$performance-bar-height} + #{$header-height} + #{$compare-branches-sticky-header-height});
}
}
}
......@@ -99,17 +99,17 @@
.with-performance-bar &.conflict .file-title,
.with-performance-bar &.conflict .file-title-flex-parent {
top: $header-height + $performance-bar-height;
top: calc(#{$header-height} + #{$performance-bar-height});
}
.with-system-header &.conflict .file-title,
.with-system-header &.conflict .file-title-flex-parent {
top: $header-height + $system-header-height;
top: calc(#{$header-height} + #{$system-header-height});
}
.with-system-header.with-performance-bar &.conflict .file-title,
.with-system-header.with-performance-bar &.conflict .file-title-flex-parent {
top: $header-height + $performance-bar-height + $system-header-height;
top: calc(#{$header-height} + #{$performance-bar-height} + #{$system-header-height});
}
}
......@@ -825,7 +825,7 @@ table.code {
top: $header-height;
.with-performance-bar & {
top: $header-height + $performance-bar-height;
top: calc(#{$header-height} + #{$performance-bar-height});
}
}
}
......@@ -839,12 +839,12 @@ table.code {
@include media-breakpoint-up(sm) {
@include gl-sticky;
top: $header-height + $mr-tabs-height;
top: calc(#{$header-height} + #{$mr-tabs-height});
@include gl-bg-white;
z-index: 200;
.with-performance-bar & {
top: $header-height + $mr-tabs-height + $performance-bar-height;
top: calc(#{$header-height} + #{$mr-tabs-height} + #{$performance-bar-height});
}
&.is-stuck {
......
app/assets/stylesheets/framework/layout.scss
View file @ c6092e40
......@@ -140,7 +140,7 @@ body {
}
.with-performance-bar .layout-page {
margin-top: $header-height + $performance-bar-height;
margin-top: calc(#{$header-height} + #{$performance-bar-height});
}
.fullscreen-layout {
......
app/assets/stylesheets/framework/mixins.scss
View file @ c6092e40
......@@ -276,7 +276,7 @@
top: $header-height;
.with-performance-bar & {
top: $header-height + $performance-bar-height;
top: calc(#{$header-height} + #{$performance-bar-height});
}
}
......
app/assets/stylesheets/framework/sidebar.scss
View file @ c6092e40
......@@ -81,7 +81,7 @@
}
.with-performance-bar .right-sidebar.affix {
top: $header-height + $performance-bar-height;
top: calc(#{$header-height} + #{$performance-bar-height});
}
@mixin maintain-sidebar-dimensions {
......
app/assets/stylesheets/framework/system_messages.scss
View file @ c6092e40
......@@ -49,11 +49,11 @@
// right sidebar eg: MR page
.nav-sidebar,
.right-sidebar {
top: $system-header-height + $header-height;
top: calc(#{$system-header-height} + #{$header-height});
}
.content-wrapper-margin {
margin-top: $system-header-height + $header-height;
margin-top: calc(#{$system-header-height} + #{$header-height});
}
// Performance Bar
......@@ -66,14 +66,14 @@
}
.layout-page {
margin-top: $header-height + $performance-bar-height + $system-header-height;
margin-top: calc(#{$header-height} + #{$performance-bar-height} + #{$system-header-height});
}
// left sidebar eg: project page
// right sidebar eg: MR page
.nav-sidebar,
.right-sidebar {
top: $header-height + $performance-bar-height + $system-header-height;
top: calc(#{$header-height} + #{$performance-bar-height} + #{$system-header-height});
}
}
}
......@@ -97,7 +97,7 @@
.boards-list,
.board-swimlanes {
height: calc(100vh - #{$header-height + $breadcrumb-min-height + $performance-bar-height + $system-footer-height + $gl-padding-32});
height: calc(100vh - (#{$header-height} + #{$breadcrumb-min-height} + #{$performance-bar-height} + #{$system-footer-height} + #{$gl-padding-32}));
}
}
......
app/assets/stylesheets/framework/variables.scss
View file @ c6092e40
......@@ -433,7 +433,7 @@ $browser-scrollbar-size: 10px;
/*
* Misc
*/
$header-height: 40px;
$header-height: var(--header-height, 40px);
$header-zindex: 1000;
$zindex-dropdown-menu: 300;
$suggestion-header-height: 46px;
......@@ -667,18 +667,18 @@ $issue-boards-filter-height: 68px;
$issue-boards-filter-height-md: 110px;
$issue-boards-filter-height-sm: 299px;
$issue-boards-breadcrumbs-height-xs: 63px;
$issue-board-list-difference-xs: $header-height + $issue-boards-breadcrumbs-height-xs;
$issue-board-list-difference-sm: $header-height + $breadcrumb-min-height;
$issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards-filter-height-md;
$issue-board-list-difference-lg: $issue-board-list-difference-sm + $issue-boards-filter-height;
$issue-board-list-difference-xs: calc(#{$header-height} + #{$issue-boards-breadcrumbs-height-xs});
$issue-board-list-difference-sm: calc(#{$header-height} + #{$breadcrumb-min-height});
$issue-board-list-difference-md: calc(#{$issue-board-list-difference-sm} + #{$issue-boards-filter-height-md});
$issue-board-list-difference-lg: calc(#{$issue-board-list-difference-sm} + #{$issue-boards-filter-height});
/*
The following heights are used in environment_logs.scss and are used for calculation of the log viewer height.
*/
$environment-logs-breadcrumbs-height: 63px;
$environment-logs-breadcrumbs-height-md: $breadcrumb-min-height;
$environment-logs-difference-xs-up: $header-height + $environment-logs-breadcrumbs-height;
$environment-logs-difference-md-up: $header-height + $environment-logs-breadcrumbs-height-md;
$environment-logs-difference-xs-up: calc(#{$header-height} + #{$environment-logs-breadcrumbs-height});
$environment-logs-difference-md-up: calc(#{$header-height} + #{$environment-logs-breadcrumbs-height-md});
/*
* Avatar
......
app/assets/stylesheets/page_bundles/build.scss
View file @ c6092e40
......@@ -13,7 +13,7 @@
border: 1px solid var(--border-color, $border-color);
.with-performance-bar & {
top: $header-height + $performance-bar-height;
top: calc(#{$header-height} + #{$performance-bar-height});
}
}
......@@ -21,10 +21,10 @@
@include build-log-top-bar(50px);
&.has-archived-block {
top: $header-height + 28px;
top: calc(#{$header-height} + 28px);
.with-performance-bar & {
top: $header-height + $performance-bar-height + 28px;
top: calc(#{$header-height} + #{$performance-bar-height} + 28px);
}
}
......
app/assets/stylesheets/page_bundles/import.scss
View file @ c6092e40
......@@ -41,7 +41,7 @@ $import-bar-height: $gl-spacing-scale-11;
z-index: 3;
html.with-performance-bar & {
top: $header-height + $performance-bar-height;
top: calc(#{$header-height} + #{$performance-bar-height});
}
}
......
app/assets/stylesheets/page_bundles/merge_requests.scss
View file @ c6092e40
......@@ -36,7 +36,7 @@
// If they don't match, the file tree and the diff files stick
// to the top at different heights, which is a bad-looking defect
$diff-file-header-top: 11px;
$top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + $diff-file-header-top;
$top-pos: calc(#{$header-height} + #{$mr-tabs-height} + #{$mr-version-controls-height} + #{$diff-file-header-top});
position: -webkit-sticky;
position: sticky;
......
app/assets/stylesheets/pages/issuable.scss
View file @ c6092e40
......@@ -514,7 +514,7 @@
}
.with-performance-bar .right-sidebar {
top: $header-height + $performance-bar-height;
top: calc(#{$header-height} + #{$performance-bar-height});
}
.sidebar-move-issue-confirmation-button {
......
app/assets/stylesheets/pages/issues.scss
View file @ c6092e40
......@@ -256,7 +256,7 @@ ul.related-merge-requests > li gl-emoji {
}
.with-performance-bar .issue-sticky-header {
top: $header-height + $performance-bar-height;
top: calc(#{$header-height} + #{$performance-bar-height});
}
@include media-breakpoint-up(md) {
......
app/assets/stylesheets/pages/login.scss
View file @ c6092e40
......@@ -203,7 +203,7 @@
&.with-system-header {
.login-page-broadcast {
margin-top: $system-header-height + $header-height;
margin-top: calc(#{$system-header-height} + #{$header-height});
}
}
......
app/assets/stylesheets/pages/merge_requests.scss
View file @ c6092e40
......@@ -689,14 +689,14 @@ $tabs-holder-z-index: 250;
@include media-breakpoint-up(md) {
position: -webkit-sticky;
position: sticky;
top: $header-height + $mr-tabs-height;
top: calc(#{$header-height} + #{$mr-tabs-height});
.with-system-header & {
top: $header-height + $mr-tabs-height + $system-header-height;
top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height});
}
.with-system-header.with-performance-bar & {
top: $header-height + $mr-tabs-height + $system-header-height + $performance-bar-height;
top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height} + #{$performance-bar-height});
}
.mr-version-menus-container {
......@@ -704,7 +704,7 @@ $tabs-holder-z-index: 250;
}
.with-performance-bar & {
top: $header-height + $performance-bar-height + $mr-tabs-height;
top: calc(#{$header-height} + #{$performance-bar-height} + #{$mr-tabs-height});
}
}
}
......@@ -717,11 +717,11 @@ $tabs-holder-z-index: 250;
border-bottom: 1px solid $border-color;
.with-system-header & {
top: $header-height + $system-header-height;
top: calc(#{$header-height} + #{$system-header-height});
}
.with-system-header.with-performance-bar & {
top: $header-height + $system-header-height + $performance-bar-height;
top: calc(#{$header-height} + #{$system-header-height} + #{$performance-bar-height});
}
@include media-breakpoint-up(sm) {
......@@ -752,7 +752,7 @@ $tabs-holder-z-index: 250;
.with-performance-bar {
.merge-request-tabs-holder,
.epic-tabs-holder {
top: $header-height + $performance-bar-height;
top: calc(#{$header-height} + #{$performance-bar-height});
}
}
......@@ -957,10 +957,10 @@ $tabs-holder-z-index: 250;
.mr-compare {
.diff-file .file-title-flex-parent {
top: $header-height + $mr-tabs-height + 36px;
top: calc(#{$header-height} + #{$mr-tabs-height} + 36px);
.with-performance-bar & {
top: $performance-bar-height + $header-height + $mr-tabs-height + 36px;
top: calc(#{$performance-bar-height} + #{$header-height} + #{$mr-tabs-height} + 36px);
}
}
}
......
app/assets/stylesheets/pages/notes.scss
View file @ c6092e40
......@@ -368,7 +368,7 @@ $system-note-svg-size: 16px;
border-radius: 0;
@media (min-width: map-get($grid-breakpoints, md)) {
top: $mr-tabs-height + $header-height;
top: calc(#{$mr-tabs-height} + #{$header-height});
.with-performance-bar & {
top: 123px;
......
app/assets/stylesheets/performance_bar.scss
View file @ c6092e40
......@@ -129,5 +129,5 @@
}
html.with-performance-bar .nav-sidebar {
top: $header-height + $performance-bar-height;
top: calc(#{$header-height} + #{$performance-bar-height});
}
app/assets/stylesheets/startup/startup-dark.scss
View file @ c6092e40
......@@ -704,7 +704,7 @@ input {
padding: 0 16px;
z-index: 1000;
margin-bottom: 0;
min-height: 40px;
min-height: var(--header-height, 40px);
border: 0;
position: fixed;
top: 0;
......@@ -729,7 +729,7 @@ input {
display: flex;
justify-content: space-between;
position: relative;
min-height: 40px;
min-height: var(--header-height, 40px);
padding-left: 0;
}
.navbar-gitlab .header-content .title-container {
......@@ -1030,7 +1030,7 @@ input {
left: 0;
z-index: 600;
width: 220px;
top: 40px;
top: var(--header-height, 40px);
background-color: #303030;
transform: translate3d(0, 0, 0);
}
......
app/assets/stylesheets/startup/startup-general.scss
View file @ c6092e40
......@@ -685,7 +685,7 @@ input {
padding: 0 16px;
z-index: 1000;
margin-bottom: 0;
min-height: 40px;
min-height: var(--header-height, 40px);
border: 0;
position: fixed;
top: 0;
......@@ -710,7 +710,7 @@ input {
display: flex;
justify-content: space-between;
position: relative;
min-height: 40px;
min-height: var(--header-height, 40px);
padding-left: 0;
}
.navbar-gitlab .header-content .title-container {
......@@ -1011,7 +1011,7 @@ input {
left: 0;
z-index: 600;
width: 220px;
top: 40px;
top: var(--header-height, 40px);
background-color: #f0f0f0;
transform: translate3d(0, 0, 0);
}
......
app/assets/stylesheets/startup/startup-signin.scss
View file @ c6092e40
......@@ -419,7 +419,7 @@ body.navless {
}
}
.navless-container {
margin-top: 40px;
margin-top: var(--header-height, 40px);
padding-top: 32px;
}
.btn {
......@@ -506,7 +506,7 @@ label.label-bold {
}
.navbar-empty {
justify-content: center;
height: 40px;
height: var(--header-height, 40px);
background: #fff;
border-bottom: 1px solid #dbdbdb;
}
......
ee/app/assets/stylesheets/components/vulnerability_list.scss
View file @ c6092e40
......@@ -3,10 +3,10 @@ $selection-summary-height: 66px;
$selection-summary-with-error-height: 118px;
@mixin sticky-top-positioning($extra: 0) {
top: $header-height + $extra;
top: calc(#{$header-height} + #{$extra});
.with-performance-bar & {
top: $header-height + $performance-bar-height + $extra;
top: calc(#{$header-height} + #{$performance-bar-height} + #{$extra});
}
}
......
ee/app/assets/stylesheets/page_bundles/roadmap.scss
View file @ c6092e40
......@@ -39,7 +39,7 @@ html.group-epics-roadmap-html {
.with-performance-bar {
.group-epics-roadmap-body {
$header-size: $performance-bar-height + $header-height;
$header-size: calc(#{$performance-bar-height} + #{$header-height});
height: calc(100% - #{$header-size});
}
}
......
ee/app/assets/stylesheets/pages/contributors.scss
View file @ c6092e40
.contributors {
&-loader {
padding-top: $header-height * 2;
padding-top: calc(#{$header-height} * 2);
}
}
ee/app/assets/stylesheets/startup/startup-dark.scss
View file @ c6092e40
......@@ -704,7 +704,7 @@ input {
padding: 0 16px;
z-index: 1000;
margin-bottom: 0;
min-height: 40px;
min-height: var(--header-height, 40px);
border: 0;
position: fixed;
top: 0;
......@@ -729,7 +729,7 @@ input {
display: flex;
justify-content: space-between;
position: relative;
min-height: 40px;
min-height: var(--header-height, 40px);
padding-left: 0;
}
.navbar-gitlab .header-content .title-container {
......@@ -1030,7 +1030,7 @@ input {
left: 0;
z-index: 600;
width: 220px;
top: 40px;
top: var(--header-height, 40px);
background-color: #303030;
transform: translate3d(0, 0, 0);
}
......
ee/app/assets/stylesheets/startup/startup-general.scss
View file @ c6092e40
......@@ -685,7 +685,7 @@ input {
padding: 0 16px;
z-index: 1000;
margin-bottom: 0;
min-height: 40px;
min-height: var(--header-height, 40px);
border: 0;
position: fixed;
top: 0;
......@@ -710,7 +710,7 @@ input {
display: flex;
justify-content: space-between;
position: relative;
min-height: 40px;
min-height: var(--header-height, 40px);
padding-left: 0;
}
.navbar-gitlab .header-content .title-container {
......@@ -1011,7 +1011,7 @@ input {
left: 0;
z-index: 600;
width: 220px;
top: 40px;
top: var(--header-height, 40px);
background-color: #f0f0f0;
transform: translate3d(0, 0, 0);
}
......
ee/app/assets/stylesheets/startup/startup-signin.scss
View file @ c6092e40
......@@ -419,7 +419,7 @@ body.navless {
}
}
.navless-container {
margin-top: 40px;
margin-top: var(--header-height, 40px);
padding-top: 32px;
}
.btn {
......@@ -506,7 +506,7 @@ label.label-bold {
}
.navbar-empty {
justify-content: center;
height: 40px;
height: var(--header-height, 40px);
background: #fff;
border-bottom: 1px solid #dbdbdb;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7