html { overflow-y: scroll; &.touch .tooltip { display: none !important; } } body { &.navless { background-color: $white !important; } &.board-card-content { background-color: $gray-darker; .content-wrapper { padding: 0; .container-fluid, .container-limited { background-color: $gray-darker; } } } } .container-fluid { &.limit-container-width { .flash-container.sticky { max-width: $limited-layout-width; margin-right: auto; margin-left: auto; } } } .content-wrapper-margin { margin-top: $header-height; } .content-wrapper { padding-bottom: 100px; } .container { padding-top: 0; z-index: 5; .content { margin: 0; @include media-breakpoint-down(xs) { margin-top: 20px; } } @include media-breakpoint-down(xs) { .container .title { padding-left: 15px !important; } } } .navless-container { margin-top: $header-height; padding-top: $gl-padding * 2; } .container-limited { max-width: $fixed-layout-width; &.limit-container-width { max-width: $limited-layout-width; } } .alert-wrapper { .alert { margin-bottom: 0; &:last-child { margin-bottom: $gl-padding; } } .alert-link-group { float: right; } .flex-alert { @include media-breakpoint-up(lg) { display: flex; .alert-message { flex: 1; padding-right: 40px; } } .alert-link-group { float: none; } } @include media-breakpoint-down(sm) { .alert-link-group { float: none; margin-top: $gl-padding-8; } } /* Stripe the background colors so that adjacent alert-warnings are distinct from one another */ .alert-warning { transition: background-color 0.15s, border-color 0.15s; background-color: $orange-500; border-color: $orange-500; &:only-of-type { background-color: $orange-500; border-color: $orange-500; } + .alert-warning { background-color: $orange-600; border-color: $orange-600; + .alert-warning { background-color: $orange-700; border-color: $orange-700; + .alert-warning { background-color: $orange-800; border-color: $orange-800; } } } } } .gl--flex-full { @include gl-display-flex; @include gl-align-items-stretch; @include gl-overflow-hidden; } .with-performance-bar .layout-page { margin-top: calc(#{$header-height} + #{$performance-bar-height}); } .fullscreen-layout { padding-top: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; > #js-peek, > .navbar-gitlab { position: static; top: auto; } .flash-container { margin-top: 0; margin-bottom: 0; } .alert-wrapper .flash-container .flash-alert:last-child, .alert-wrapper .flash-container .flash-notice:last-child { margin-bottom: 0; } .content-wrapper { padding-bottom: 0; flex: 1; min-height: 0; } } .gl-drawer-responsive { // Both width & min-width // are defined as per Pajamas // See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/44902#note_429056182 width: 28%; min-width: 400px; padding-left: $gl-padding; padding-right: $gl-padding; box-shadow: none; background-color: $gray-10; border-left: 1px solid $gray-100; @include media-breakpoint-down(sm) { min-width: unset; width: 100%; } // These overrides should not happen here, // we should ideally have support for custom // header and body classes in `GlDrawer`. .gl-drawer-header, .gl-drawer-body > * { padding-left: 0; padding-right: 0; } } @include media-breakpoint-up(sm) { .logged-out-marketing-header-candidate { --header-height: 72px; } }