/* * Scss to help with bootstrap 3 to 4 migration */ $text-color: $gl-text-color; $brand-primary: $gl-primary; $brand-success: $gl-success; $brand-info: $gl-info; $brand-warning: $gl-warning; $brand-danger: $gl-danger; $border-radius-base: 3px !default; $modal-body-bg: $white-light; $input-border: $border-color; $input-border-focus: $focus-border-color; $padding-base-vertical: $gl-vert-padding; $padding-base-horizontal: $gl-padding; html { // Override default font size used in bs4 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: $gl-link-color; } .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: 3px; .code > & { background-color: inherit; padding: unset; } .build-trace & { background-color: inherit; padding: inherit; } } .code { padding: 9.5px; } table { // Remove any table border lines border-spacing: 0; } .tooltip { // 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; } .badge { 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; } } } .card { .card-title { margin-bottom: 0; } &.card-without-border { @extend .border-0; } &.card-without-margin { margin: 0; } &.bg-light { @extend .border-0; } } .card-header { h3.card-title, h4.card-title { margin-top: 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-danger { background-color: $red-500; border-color: $red-500; } .alert-warning, .alert-danger, .flash-notice { border-radius: 0; color: $white-light; h4, a, .alert-link { color: $white-light; } } input[type=color].form-control { height: $input-height; }