content/assets/stylesheets/stylesheet.scss

@use 'variables' as *;
@use 'utilities' as *;
@use 'landing' as *;
@use 'normalize' as *;
@use 'mixins' as *;
@use 'base' as *;
@use 'tables' as *;
@use 'labels' as *;
@use 'sidebar' as *;
@use 'typography' as *;
@use "mixins/md-typography" as *;

body {
  overscroll-behavior: none;
  > .wrapper {
    min-height: 100vh;
    @media (max-width: $bp-md) {
      flex-direction: column-reverse;
      background-color: $white;
    }
  }
}

h2,
h3,
h4,
h5,
h6,
:target {
  scroll-margin-top: $header-height + 1rem;
}

main {
  min-height: 52vh;
}
.main {
  padding: 0 1rem;
  z-index: 1;

  img {
    border: 1px solid $gds-gray-200;
    border-radius: 0.5rem;
    padding: 0.25rem;
  }

  &:not(.has-toc) {
    > .doc-nav {
      display: none;
    }
  }
  .edit-on {
    text-align: center;
    border-top: 1px solid $gds-gray-200;
    padding-top: 20px;
    margin-top: 15px;
    a {
      color: $h1-border-bottom;
      &::before {
        content: '\f126';
        font-family: FontAwesome;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: normal;
        padding-right: 5px;
        line-height: 10px;
      }
      &:hover {
        color: $color-tanuki-dark;
      }
    }
  }
  @media (max-width: $bp-md) {
    &.active {
      background-color: $bg-overlay-color;
      overflow: hidden;
      position: fixed;
    }
  }
}

ul,
ol {
  padding-left: 1.5em;
}

.nav-wrapper {
  background-color: $gds-white;
  display: flex;
  flex-direction: column;
  position: fixed;
  width: 50px;
  top: $header-height;
  height: 100%;
  transition: all 0.3s;
  border-right: 1px solid $gds-gray-200;
  z-index: 2;
  &.active {
    width: $sidebar-width;
    .nav-toggle {
      .label {
        display: block;
        pointer-events: none;
        font-size: 0.875rem;
        color: $gds-gray-700;
        flex-shrink: 0;
      }
      svg {
        transform: scaleX(-1);
      }
    }
    .global-nav {
      visibility: visible;
    }
  }
  .nav-toggle {
    display: flex;
    width: 100%;
    height: 50px;
    flex-shrink: 0;
    border-radius: 0;
    box-shadow: none;
    justify-content: left;
    position: relative;
    top: calc($header-height * -1);
    .label {
      display: none;
    }
    svg {
      fill: $gds-gray-700;
    }
  }
  .gl-button.nav-toggle {
    box-shadow: none;

    &:hover,
    &:focus {
      box-shadow: none;
      background-color:  $gray-50;
    }
  }
  @media (max-width: calc($bp-xl - 1px)) {
    width: 0;

    .nav-toggle {
      display: none;
    }

    &.active {
      width: $sidebar-mobile-width;

      .nav-toggle {
        display: flex;
      }
    }
  }
}

// Override bootstrap's alert color
.alert {
  color: inherit;
  border: 0;
  border-radius: 0;
  opacity: 0.9;
  code {
    background-color: $alert-code-background-color;
    word-break: break-word;
    color: $code-color;
  }
  i {
    padding-right: 10px;
  }
}

.admonition {
  p {
    margin-bottom: 0;
  }
}

.admonition-non-dismissable {
  position: relative;
  padding-top: $gl-spacing-scale-5;
  padding-bottom: $gl-spacing-scale-5;
  padding-left: $gl-spacing-scale-9;

  .alert-icon {
    margin-top: $gl-spacing-scale-1;
    position: absolute;
    top: $gl-spacing-scale-5;
    left: $gl-spacing-scale-5;
    vertical-align: middle;
  }

  .alert-body {
    @include gl-line-height-24;
  }
}

// Pajamas alerts
// https://design.gitlab.com/components/alert/
.alert-note {
  background-color: $alert-note-bg;
  color: $alert-note-txt;
  border: solid 1px $alert-note-border;
  border-radius: 5px;
}

.alert-warning {
  background-color: $alert-warning-bg;
  color: $alert-warning-txt;
  border: solid 1px $alert-warning-border;
  border-radius: 5px;
}

.alert-success {
  background-color: $alert-success-bg;
  color: $alert-success-txt;
  border: solid 1px $alert-success-border;
  border-radius: 5px;
}

.alert-flag {
  background-color: $alert-flag-bg;
  color: $alert-flag-txt;
  border: solid 1px $alert-flag-border;
  border-radius: 5px;
}

.alert-danger {
  background-color: $alert-danger-bg;
  color: $alert-danger-txt;
  border: solid 1px $alert-danger-border;
  border-radius: 5px;
}

.alert-disclaimer {
  background-color: $alert-disclaimer-bg;
  color: $alert-disclaimer-txt;
  border: solid 1px $alert-disclaimer-border;
  border-radius: 5px;
}

.alert-gray {
  background-color: $alert-gray-bg;
  color: $alert-gray-txt;
  border: solid 1px $alert-gray-border;
  border-radius: 5px;
}

// End of Pajamas alerts

// Custom alerts
.alert-info {
  background-color: $alert-info-bg;
  color: $alert-info-txt;
  border: solid 1px $alert-info-border;
  border-radius: 5px;
  float: right;
  width: 30%;
  margin-left: 2rem;

  @media (max-width: $bp-sm) {
    width: 100%;
    margin: 0.25rem 0 1rem;
    float: none;
  }
}

.alert-details {
  font-size: 0.875rem;
  line-height: 1.5;
  border-left: 2px solid $color-tanuki-light;
  padding: 0 0 0 0.75rem;
  margin-bottom: 0;
}

// Sticky navbar
body.has-archive-banner {
  .gl-alert.gl-alert-sticky {
    margin-top: 0;
    text-align: center;
    top: $header-height;
    padding: 0.65rem 3rem;
  }
  .nav-wrapper,
  th {
    top: $header-height + $archive-banner-height;
  }
  h2,
  h3,
  h4,
  h5,
  h6,
  :target {
    scroll-margin-top: $header-height + $archive-banner-height + 1rem;
  }
  .nav-toggle {
    top: calc(($header-height + $archive-banner-height) * -1);
  }
}

// Main header CSS
.navbar {
  background-color: $header-background-color;

  .navbar-brand {
    font-size: 1rem;
    min-height: $header-height;
  }

  .navbar-nav {
    margin-top: 0;
  }

  /* Override Bootstrap theme color */
  .border-light {
    border-color: rgba($white, 0.32) !important;
  }

  .nav-item {
    margin-bottom: 0;
    font-size: 0.875rem;
  }

  .nav-image {
    vertical-align: text-top;
  }

  .nav-link {
    color: $gds-indigo-100;
  }

  .gl-dropdown-toggle.gl-button.btn-default,
  .gl-dropdown-toggle.gl-button.btn-default:hover,
  .gl-dropdown-toggle.gl-button.btn-default:focus {
    background-color: $help-indigo-500;
    color: $gds-white;
    box-shadow: none;
    svg {
      fill: $gds-white;
    }
  }

  @media all and (max-width: $bp-md) {
    .btn {
      width: 100%;
    }
    .navbar-toggler {
      border: 0;
    }
    .navbar-toggler-icon {
      background-color: $theme-indigo-200;
      /*  https://caniuse.com/css-masks */
      /* stylelint-disable property-no-vendor-prefix */
      mask: url('/assets/images/ellipsis_h.svg') no-repeat center;
      -webkit-mask: url('/assets/images/ellipsis_h.svg') no-repeat center;
    }
  }
}

// Search
.navbar {
  .search-form,
  .gs-wrapper,
  .gs-results {
    width: $search-sm-width;
    @media (min-width: $bp-md) {
      width: $search-md-width;
    }
    @media (min-width: $bp-lg) {
      width: $search-lg-width;
    }
  }
  .gs-results {
    margin-top: 1px;
  }
  .search-form .input-group-append {
    background-color: inherit;
  }
}
.gl-search-box-by-type-input-borderless,
.gl-search-box-by-type-input-borderless.gl-form-input {
  padding: 0.5rem 1.75rem 0.5rem 2rem;
  border-radius: 0.125rem;
}
.gl-search-box-by-type-input-borderless.gl-form-input:not(.form-control-plaintext):focus,
.gl-search-box-by-type-input-borderless:not(.form-control-plaintext):focus {
  box-shadow: inset 0 0 0 2px $blue-400;
}
.gl-form-input.gl-search-box-by-click-input {
  height: auto;
}
.gs-wrapper kbd {
  display: none;
  @media (min-width: $bp-md) {
    display: inline;
    top: 0.25rem;
    right: 0.3rem;
    font-size: 0.75rem;
  }
}
.gs-results a:hover,
.gs-results a:focus {
  text-decoration: none;
  background-color: $gray-50;
  color: $gray-700;
  outline: none;
}
.gl-search-box-by-click {
  width: $search-lg-width;
}

// Search overlay
body.landing .modal-backdrop {
  display: none;
}
.modal-backdrop {
  z-index: 100;
  top: $header-height;
}

// Search results page
html.search-results {
  overflow-y: scroll;
}
p.result-snippet {
  font-size: 0.875rem;
}

// Badges
.docs-badges-wrapper {
  a.gl-link {
    border-bottom: 0;
    color: inherit;
  }
}
// Badges in headings
.badge-heading-true  span.gl-badge {
  vertical-align: middle;
}
.badge-heading-true:not(:first-of-type) {
  margin-left: -0.5rem;
}
// Badges in regular content
.badge-heading-false span.gl-badge {
  vertical-align: middle;
}

// Tooltips
.tooltip {
  font-size: 0.75rem;
}

//in-page styles
.youtube {
  color: $youtube;
}

.mermaid {
  overflow: auto;
  position: relative;
  z-index: 1;
}
.mermaid:not([data-processed='true']) {
  display: none;
}

.gl-icon {
  @each $size in $gl-icon-sizes {
    &.s#{$size} {
      width: #{$size}px;
      height: #{$size}px;
      vertical-align: text-bottom;
    }
  }
}

.btn-cta {
  background-color: $header-free-trial-button-color !important;
}

// Embedded video
.video-container {
  width: 35rem;
  height: 19.688rem;
  position: relative;
  padding-top: 0;
  margin: 1.25rem 0;
  box-shadow: 0.313rem 0.313rem 0.625rem $gds-gray-300;
  iframe,
  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

// Embedded video fallback for GitLab's /help
.video-fallback {
  display: none;
}

.text-expander {
  background: url('/assets/images/ellipsis_h.svg') center center / 12px no-repeat;
  vertical-align: middle;
  border: 1px solid $gray-100;
  border-radius: 4px;
  margin-left: 8px;
  margin-bottom: 2px;
  width: 22px;
  height: 1rem;
  &:hover {
    background-color: $gray-200;
  }
}

// external link and footer social links
[href^='http://'],
[href^='https://'] {
  &:not([href*='gitlab.com']):not([href*='docs.gitlab-review.app']):not(.gitlab-social):not(.no-attachment-icon):not([href*='onetrust.com']) {
    &::after {
      content: '\f08e';
      font-family: FontAwesome, sans-serif;
      font-size: 1rem;
      font-style: normal;
      font-weight: normal;
      padding-left: 5px;
      line-height: 10px;
    }
  }
}

.imageblock {
  margin: 1rem 0;
}

.gl-tabs .gl-tabs-nav {
  margin-bottom: 0;
}
a.gl-tab-nav-item,
a.gl-tab-nav-item:hover {
  border: 0;
  border-radius: 0 !important;
  color: inherit;
  font-size: 1rem;
}
.gl-tab-nav-item-active:active,
.gl-tab-nav-item-active:focus,
.gl-tab-nav-item-active:focus:active {
  box-shadow: inset 0 -2px 0 0 $theme-indigo-500, 0 0 0 1px $gds-white;
}
.gl-tab-nav-item-active:focus-visible {
  box-shadow: 0 0 0 1px $gds-white, 0 0 0 3px $blue-400;
}
.gl-tabs-nav li.nav-item {
  margin: 0;
}
.gl-docs .gl-tab-content {
  padding-top: 1rem;
  line-height: 1.5em;
  font-size: 1rem;
  p,
  ul,
  ol,
  code,
  pre {
    margin-top: 0;
  }

  .tab-pane p {
    margin-bottom: 1.5em;
  }

  ol {
    list-style-type: decimal;
    ol {
      list-style-type: lower-alpha;
    }
  }
}

.search-form {
  .input-group>.form-control:focus,
  .gl-search-box-by-click-clear-button {
    z-index: auto;
  }
}

/* Override styles for search results pagination element */
.gl-pagination {
  a {
    border-bottom: 0 !important;
  }

  .gl-pagination-item:not(.disabled).active:active {
    color: var(--white) !important;
  }
  .gl-pagination-item:not(.active) {
    color: var(--gl-action-neutral-foreground-color-default) !important;
  }

  .disabled .gl-pagination-item {
    border-color: var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent));
    background-color: transparent;
    color: var(--gl-action-disabled-foreground-color) !important;
  }
}

.four-oh-four {
  a.back-btn:hover {
    text-decoration: none;
    color: $gds-white;
    background-color: $purple-500;
  }
  .search-card {
    box-shadow: 0 0 0.125rem $landing-gl-black-50, 0 0.25rem 1.5rem $landing-gl-blue-950;
  }
}

.gl-form-select {
  background-image: $gl-icon-select-chevron-down;
}

// Deprecations page
.deprecation-notes {
  font-size: 0.9rem;
  line-height: 1rem;
}
h2 .milestone-date {
  font-size: 1.25rem;
}

// GitLab UI does not export vendor prefixes in the build we use, so we need to add them here.
// Otherwise we don't get checkmarks in Chrome and Safari.
// @see https://caniuse.com/css-masks
$gl-icon-check: 'data:image/svg+xml,%3Csvg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 3.05299L2.99123 5L7 1" stroke="white" stroke-width="2"/%3E%3C/svg%3E%0A';

.custom-control-input[type='checkbox']:checked ~ .custom-control-label,
.custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label,
.custom-control-input[type='radio']:checked ~ .custom-control-label {
  &::after {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
  }
}
.custom-control-input[type='checkbox']:checked ~ .custom-control-label::after {
  -webkit-mask-image: url('#{$gl-icon-check}');
  mask-image: url('#{$gl-icon-check}');
}

// Vue transitions
// See https://v2.vuejs.org/v2/guide/transitions.html
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.15s linear;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}