diff options
Diffstat (limited to 'app/assets/stylesheets/bootstrap_migration.scss')
| -rw-r--r-- | app/assets/stylesheets/bootstrap_migration.scss | 324 |
1 files changed, 6 insertions, 318 deletions
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss index 27ddff181c5..598ef70297c 100644 --- a/app/assets/stylesheets/bootstrap_migration.scss +++ b/app/assets/stylesheets/bootstrap_migration.scss @@ -1,318 +1,6 @@ -$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: $gl-border-radius-base; - -$modal-body-bg: $white; -$input-border: $border-color; - -$padding-base-vertical: $gl-vert-padding; -$padding-base-horizontal: $gl-padding; - -/* - * Scss to help with bootstrap 3 to 4 migration - */ -body, -.form-control, -.search form { - // Override default font size used in non-csslab UI - // Use rem to keep default font-size at 14px on body so 1rem still - // fits 8px grid, but also allow users to change browser font size - font-size: 0.875rem; -} - -legend { - border-bottom: 1px solid $border-color; - margin-bottom: 20px; -} - -button, -html [type='button'], -[type='reset'], -[type='submit'], -[role='button'] { - // Override bootstrap reboot - /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-appearance: inherit; - cursor: pointer; -} - -h1, -.h1, -h2, -.h2, -h3, -.h3 { - margin-top: 20px; - margin-bottom: 10px; -} - -h4, -.h4, -h5, -.h5, -h6, -.h6 { - margin-top: 10px; - margin-bottom: 10px; -} - -/* Our adjustments to hx & .hx above add unnecessary margins to modal-title - and page-title in modals, so we set them to 0 in order to have properly - formatted modal headers. */ -.modal-header { - .modal-title, - .page-title { - margin-top: 0; - margin-bottom: 0; - } -} - -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; - } -} - -code { - padding: 2px 4px; - color: $code-color; - background-color: $gray-50; - border-radius: $border-radius-default; - - .code > &, - .build-log & { - background-color: inherit; - padding: unset; - } -} - -table { - // Remove any table border lines - border-spacing: 0; -} - -@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; - } -} - -// 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; -} - -// Add to .label so that old system notes that are saved to the db -// will still receive the correct styling -.badge:not(.gl-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 { - // copied rules from node_modules/bootstrap/scss/_dropdown.scss:116 - // this might be safe to just remove instead - // most places that use divider add overrides to undo these things - // there is also a probably-unintentional use in deprecated_dropdown_divider.scss - // so we would end up with .gl-dropdown .dropdown-divider - height: 0; - margin: 4px 0; - overflow: hidden; - border-top: 1px solid $border-color; -} - -.info-well { - background: $gray-10; - 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, - &.bg-light { - border: 0 !important; - } -} - -.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 { - 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 { - color: $white; - - h4, - .alert-link { - color: $white; - } -} - -input[type=color].form-control { - height: $input-height; -} - -.toggle-sidebar-button { - .collapse-text, - .icon-chevron-double-lg-left, - .icon-chevron-double-lg-right { - color: $gl-text-color-secondary; - } -} - -.project-templates-buttons { - .btn { - vertical-align: unset; - } -} - -/* - 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-foss/issues/51362 - */ -svg { - vertical-align: baseline; -} +// --- +// Scss to help with bootstrap 3 to 4 migration +// --- +@import 'bootstrap_migration_variables'; +@import 'bootstrap_migration_reset'; +@import 'bootstrap_migration_components'; |