gitlab-org--gitlab-foss/app/assets/stylesheets/bootstrap_migration.scss

330 lines
4.7 KiB
SCSS
Raw Normal View History

2018-04-10 12:23:10 -04:00
/*
* Scss to help with bootstrap 3 to 4 migration
*/
2018-04-06 18:23:46 -04:00
$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;
2018-04-09 12:28:30 -04:00
$padding-base-vertical: $gl-vert-padding;
$padding-base-horizontal: $gl-padding;
2018-04-10 12:23:10 -04:00
html {
// Override default font size used in bs4
font-size: 14px;
}
2018-06-04 22:51:09 -04:00
legend {
border-bottom: 1px solid $border-color;
margin-bottom: 20px;
}
2018-04-16 13:28:52 -04:00
button,
html [type="button"],
[type="reset"],
2018-06-04 19:06:52 -04:00
[type="submit"],
[role="button"] {
// Override bootstrap reboot
-webkit-appearance: inherit;
cursor: pointer;
}
2018-06-05 17:14:21 -04:00
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;
}
2018-06-01 17:58:00 -04:00
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;
}
2018-06-11 16:24:57 -04:00
hr {
overflow: hidden;
}
.form-group.row .col-form-label {
padding-top: 0;
// Bootstrap 4 aligns labels to the left
// for horizontal forms
2018-05-24 21:16:07 -04:00
@include media-breakpoint-up(md) {
text-align: right;
}
}
kbd {
display: inline-block;
}
code {
padding: 2px 4px;
2018-06-04 21:43:31 -04:00
color: $red-600;
background-color: $red-100;
border-radius: 3px;
2018-06-04 21:43:31 -04:00
.code > & {
2018-06-04 21:43:31 -04:00
background-color: inherit;
padding: unset;
}
2018-06-04 23:09:17 -04:00
.build-trace & {
background-color: inherit;
padding: inherit;
}
2018-06-04 21:43:31 -04:00
}
2018-04-18 13:17:06 -04:00
table {
// Remove any table border lines
border-spacing: 0;
}
2018-05-22 09:45:46 -04:00
.popover {
font-size: 14px;
}
2018-04-24 15:06:55 -04:00
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
2018-04-24 15:11:13 -04:00
.d#{$infix}-table-header-group { display: table-header-group !important; }
2018-04-24 15:06:55 -04:00
}
}
2018-05-25 13:20:23 -04:00
.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;
}
2018-04-24 15:06:55 -04:00
2018-06-05 16:36:13 -04:00
.bg-success,
.bg-primary,
.bg-info,
.bg-danger,
.bg-warning {
.card-header {
color: $white-light;
}
}
2018-04-10 12:23:10 -04:00
// Polyfill deprecated selectors
.hidden {
display: none !important;
visibility: hidden !important;
2018-04-10 12:23:10 -04:00
}
2018-04-19 20:15:38 -04:00
.hide {
display: none;
}
2018-05-31 13:02:01 -04:00
.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,
.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;
}
}
}
2018-06-05 11:22:39 -04:00
.badge.badge-gray {
background-color: $well-expand-item;
}
}
.card {
.card-title {
margin-bottom: 0;
}
&.card-without-border {
2018-04-17 13:20:11 -04:00
@extend .border-0;
}
&.card-without-margin {
margin: 0;
}
2018-04-18 15:55:36 -04:00
&.bg-light {
@extend .border-0;
}
}
2018-05-24 22:32:40 -04:00
2018-06-07 20:06:39 -04:00
.card-header {
h3.card-title,
h4.card-title {
margin-top: 0;
}
}
2018-05-31 10:23:49 -04:00
.nav-tabs {
2018-06-05 20:37:04 -04:00
// Override bootstrap's default border
border-bottom: 0;
2018-05-31 10:23:49 -04:00
.nav-link {
border-top: 0;
border-left: 0;
border-right: 0;
2018-05-31 10:23:49 -04:00
}
.nav-item {
margin-bottom: 0;
}
2018-05-24 22:32:40 -04:00
}
2018-05-29 12:11:09 -04:00
pre code {
white-space: pre-wrap;
}
2018-06-15 15:35:27 -04:00
.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;
}
2018-06-15 15:35:27 -04:00
.alert-success,
.alert-info,
.alert-warning,
.alert-danger,
.flash-notice {
color: $white-light;
h4,
a,
.alert-link {
color: $white-light;
}
}
2018-06-07 12:14:34 -04:00
input[type=color].form-control {
height: $input-height;
}
2018-06-11 13:41:48 -04:00
.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;
}
}