bootstrap_migration.scss

/*
 *  Scss to help with bootstrap 3 to 4 migration
 */

$text-color: $gl-text-color;

$brand-primary: $blue-500;
$brand-success: $green-500;
$brand-info: $blue-500;
$brand-warning: $orange-500;
$brand-danger: $red-500;

$border-radius-base: 3px !default;

$modal-body-bg: $white-light;
$input-border: $border-color;

$padding-base-vertical: $gl-vert-padding;
$padding-base-horizontal: $gl-padding;

body,
.form-control,
.search form {
  // Override default font size used in non-csslab UI
  font-size: 14px;
}

legend {
  border-bottom: 1px solid $border-color;
  margin-bottom: 20px;
}

button,
html [type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
  // Override bootstrap reboot
  -webkit-appearance: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: $gl-text-color;
  font-weight: 600;
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}

h5,
.h5 {
  font-size: $gl-font-size;
}

input[type="file"] {
  // Bootstrap 4 file input height is taller by default
  // which makes them look ugly
  line-height: 1;
}

b,
strong {
  font-weight: bold;
}

a {
  color: $blue-600;
}

hr {
  overflow: hidden;
}

.form-group.row .col-form-label {
  // Bootstrap 4 aligns labels to the left
  // for horizontal forms
  @include media-breakpoint-up(md) {
    text-align: right;
  }
}

kbd {
  display: inline-block;
}

code {
  padding: 2px 4px;
  color: $red-600;
  background-color: $red-100;
  border-radius: $border-radius-default;

  .code > & {
    background-color: inherit;
    padding: unset;
  }

  .build-trace & {
    background-color: inherit;
    padding: inherit;
  }
}

table {
  // Remove any table border lines
  border-spacing: 0;
}

.tooltip,
.no-pointer-events {
  // Fix bootstrap4 bug whereby tooltips flicker when they are hovered over their borders
  pointer-events: none;
}

.popover {
  font-size: 14px;
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .d#{$infix}-table-header-group { display: table-header-group !important; }
  }
}

.text-secondary {
  // Override Bootstrap's light secondary color
  // We have to use !important because bootstrap has that set as well
  color: $gl-text-color-secondary !important;
}

.bg-success,
.bg-primary,
.bg-info,
.bg-danger,
.bg-warning {
  .card-header {
    color: $white-light;
  }
}

// Polyfill deprecated selectors

.hidden {
  display: none !important;
  visibility: hidden !important;
}

.hide {
  display: none;
}

.dropdown-toggle::after,
.dropright .dropdown-menu-toggle::after {
  // Remove bootstrap's dropdown caret
  display: none;
}

h3.popover-header {
  // Default bootstrap popovers use <h3>
  // which we default to having a top margin
  margin-top: 0;
}

// Add to .label so that old system notes that are saved to the db
// will still receive the correct styling
.badge,
.label {
  padding: 4px 5px;
  font-size: 12px;
  font-style: normal;
  font-weight: $gl-font-weight-normal;
  display: inline-block;

  &.badge-gray {
    background-color: $label-gray-bg;
    color: $gl-text-color;
    text-shadow: none;
  }

  &.badge-inverse {
    background-color: $label-inverse-bg;
  }
}

.divider {
  @extend .dropdown-divider;
}

.info-well {
  background: $theme-gray-50;
  color: $gl-text-color;
  border: 1px solid $border-color;
  border-radius: 4px;
  margin-bottom: 16px;

  .well-segment {
    padding: 16px;

    &:not(:last-of-type) {
      border-bottom: 1px solid $well-inner-border;
    }

    p,
    ol,
    ul,
    .form-group {
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }

  .badge.badge-gray {
    background-color: $well-expand-item;
  }
}

.card {
  &.card-without-border {
    @extend .border-0;
  }

  &.card-without-margin {
    margin: 0;
  }

  &.bg-light {
    @extend .border-0;
  }
}

.nav-tabs {
  // Override bootstrap's default border
  border-bottom: 0;

  .nav-link {
    border-top: 0;
    border-left: 0;
    border-right: 0;
  }

  .nav-item {
    margin-bottom: 0;
  }
}

pre code {
  white-space: pre-wrap;
}

.alert,
.flash-notice {
  border-radius: 0;
}

.alert-success {
  background-color: $green-500;
  border-color: $green-500;
}

.alert-info {
  background-color: $blue-500;
  border-color: $blue-500;
}

.alert-warning {
  background-color: $orange-500;
  border-color: $orange-500;
}

.alert-danger {
  background-color: $red-500;
  border-color: $red-500;
}

.alert-success,
.alert-info,
.alert-warning,
.alert-danger,
.flash-notice {
  color: $white-light;

  h4,
  a:not(.btn),
  .alert-link {
    color: $white-light;
  }
}

input[type=color].form-control {
  height: $input-height;
}

.toggle-sidebar-button {
  .collapse-text,
  .icon-angle-double-left,
  .icon-angle-double-right {
    color: $gl-text-color-secondary;
  }
}

.project-templates-buttons {
  .btn {
    vertical-align: unset;
  }
}

// Bootstrap 3 compatibility because bootstrap_form Gem is not updated yet
.input-group-btn:first-child {
  @extend .input-group-prepend;
}

// Bootstrap 3 compatibility because bootstrap_form Gem is not updated yet
.input-group-btn:last-child {
  @extend .input-group-append;
}

/*
 Bootstrap 4.1.2 introduced a new default vertical alignment which breaks our icons,
 so we need to reset the vertical alignment to the default value. See:
 - https://gitlab.com/gitlab-org/gitlab-ce/issues/51362
 */
svg {
  vertical-align: baseline;
}