2018-04-06 22:23:46 +00:00
|
|
|
$text-color: $gl-text-color;
|
|
|
|
|
2018-08-21 17:52:31 +00:00
|
|
|
$brand-primary: $blue-500;
|
|
|
|
$brand-success: $green-500;
|
|
|
|
$brand-info: $blue-500;
|
|
|
|
$brand-warning: $orange-500;
|
|
|
|
$brand-danger: $red-500;
|
2018-04-06 22:23:46 +00:00
|
|
|
|
2020-07-02 09:09:00 +00:00
|
|
|
$border-radius-base: $gl-border-radius-base;
|
2018-04-06 22:23:46 +00:00
|
|
|
|
2020-03-31 00:08:09 +00:00
|
|
|
$modal-body-bg: $white;
|
2018-04-06 22:23:46 +00:00
|
|
|
$input-border: $border-color;
|
2018-04-09 16:28:30 +00:00
|
|
|
|
|
|
|
$padding-base-vertical: $gl-vert-padding;
|
|
|
|
$padding-base-horizontal: $gl-padding;
|
2018-04-10 16:23:10 +00:00
|
|
|
|
2019-03-14 07:48:50 +00:00
|
|
|
/*
|
|
|
|
* Scss to help with bootstrap 3 to 4 migration
|
|
|
|
*/
|
2018-12-08 01:16:46 +00:00
|
|
|
body,
|
|
|
|
.form-control,
|
|
|
|
.search form {
|
|
|
|
// Override default font size used in non-csslab UI
|
2019-05-21 02:51:11 +00:00
|
|
|
// 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
|
2020-07-09 21:09:33 +00:00
|
|
|
font-size: 0.875rem;
|
2018-04-10 16:23:10 +00:00
|
|
|
}
|
|
|
|
|
2018-06-05 02:51:09 +00:00
|
|
|
legend {
|
|
|
|
border-bottom: 1px solid $border-color;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
|
2018-04-16 17:28:52 +00:00
|
|
|
button,
|
2020-07-09 21:09:33 +00:00
|
|
|
html [type='button'],
|
|
|
|
[type='reset'],
|
|
|
|
[type='submit'],
|
|
|
|
[role='button'] {
|
2018-04-12 22:48:24 +00:00
|
|
|
// Override bootstrap reboot
|
2020-07-09 21:09:33 +00:00
|
|
|
/* stylelint-disable-next-line property-no-vendor-prefix */
|
2018-04-12 22:48:24 +00:00
|
|
|
-webkit-appearance: inherit;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
2018-06-05 21:14:21 +00:00
|
|
|
h1,
|
|
|
|
.h1,
|
|
|
|
h2,
|
|
|
|
.h2,
|
|
|
|
h3,
|
|
|
|
.h3 {
|
|
|
|
margin-top: 20px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
h4,
|
|
|
|
.h4,
|
|
|
|
h5,
|
|
|
|
.h5,
|
|
|
|
h6,
|
|
|
|
.h6 {
|
|
|
|
margin-top: 10px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
|
2019-01-02 20:42:55 +00:00
|
|
|
/* 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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-06-05 21:14:21 +00:00
|
|
|
h5,
|
|
|
|
.h5 {
|
|
|
|
font-size: $gl-font-size;
|
|
|
|
}
|
|
|
|
|
2020-07-09 21:09:33 +00:00
|
|
|
input[type='file'] {
|
2018-06-01 21:58:00 +00:00
|
|
|
// Bootstrap 4 file input height is taller by default
|
|
|
|
// which makes them look ugly
|
|
|
|
line-height: 1;
|
|
|
|
}
|
|
|
|
|
2018-05-31 19:42:52 +00:00
|
|
|
b,
|
|
|
|
strong {
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
2018-05-08 18:53:10 +00:00
|
|
|
a {
|
2018-08-14 16:44:08 +00:00
|
|
|
color: $blue-600;
|
2018-05-08 18:53:10 +00:00
|
|
|
}
|
|
|
|
|
2018-06-11 20:24:57 +00:00
|
|
|
hr {
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
2018-04-13 19:23:37 +00:00
|
|
|
.form-group.row .col-form-label {
|
|
|
|
// Bootstrap 4 aligns labels to the left
|
|
|
|
// for horizontal forms
|
2018-05-25 01:16:07 +00:00
|
|
|
@include media-breakpoint-up(md) {
|
|
|
|
text-align: right;
|
|
|
|
}
|
2018-04-13 19:23:37 +00:00
|
|
|
}
|
|
|
|
|
2018-06-05 17:13:31 +00:00
|
|
|
kbd {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
|
2018-06-01 17:02:59 +00:00
|
|
|
code {
|
|
|
|
padding: 2px 4px;
|
2020-03-17 21:09:16 +00:00
|
|
|
color: $code-color;
|
2020-05-22 12:08:15 +00:00
|
|
|
background-color: $gray-50;
|
2018-07-17 14:25:43 +00:00
|
|
|
border-radius: $border-radius-default;
|
2018-06-05 01:43:31 +00:00
|
|
|
|
2018-06-07 21:08:48 +00:00
|
|
|
.code > & {
|
2018-06-05 01:43:31 +00:00
|
|
|
background-color: inherit;
|
|
|
|
padding: unset;
|
|
|
|
}
|
2018-06-05 03:09:17 +00:00
|
|
|
|
|
|
|
.build-trace & {
|
|
|
|
background-color: inherit;
|
|
|
|
padding: inherit;
|
|
|
|
}
|
2018-06-05 01:43:31 +00:00
|
|
|
}
|
|
|
|
|
2018-04-18 17:17:06 +00:00
|
|
|
table {
|
|
|
|
// Remove any table border lines
|
|
|
|
border-spacing: 0;
|
|
|
|
}
|
|
|
|
|
2018-07-16 22:38:35 +00:00
|
|
|
.tooltip,
|
|
|
|
.no-pointer-events {
|
2018-06-29 20:34:10 +00:00
|
|
|
// Fix bootstrap4 bug whereby tooltips flicker when they are hovered over their borders
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
|
2018-04-24 19:06:55 +00:00
|
|
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
|
|
@include media-breakpoint-up($breakpoint) {
|
|
|
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
|
|
|
2019-01-02 20:42:55 +00:00
|
|
|
.d#{$infix}-table-header-group {
|
|
|
|
display: table-header-group !important;
|
|
|
|
}
|
2018-04-24 19:06:55 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-05-25 17:20:23 +00: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 19:06:55 +00:00
|
|
|
|
2018-06-05 20:36:13 +00:00
|
|
|
.bg-success,
|
|
|
|
.bg-primary,
|
|
|
|
.bg-info,
|
|
|
|
.bg-danger,
|
|
|
|
.bg-warning {
|
|
|
|
.card-header {
|
2020-03-31 00:08:09 +00:00
|
|
|
color: $white;
|
2018-06-05 20:36:13 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-04-10 16:23:10 +00:00
|
|
|
// Polyfill deprecated selectors
|
|
|
|
|
|
|
|
.hidden {
|
2018-04-10 20:38:14 +00:00
|
|
|
display: none !important;
|
|
|
|
visibility: hidden !important;
|
2018-04-10 16:23:10 +00:00
|
|
|
}
|
2018-04-10 20:10:17 +00:00
|
|
|
|
2018-04-20 00:15:38 +00:00
|
|
|
.hide {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
2018-05-31 17:02:01 +00:00
|
|
|
.dropdown-toggle::after,
|
|
|
|
.dropright .dropdown-menu-toggle::after {
|
2018-04-10 20:10:17 +00:00
|
|
|
// Remove bootstrap's dropdown caret
|
|
|
|
display: none;
|
|
|
|
}
|
2018-04-13 19:46:38 +00:00
|
|
|
|
2018-06-22 16:29:38 +00:00
|
|
|
h3.popover-header {
|
|
|
|
// Default bootstrap popovers use <h3>
|
|
|
|
// which we default to having a top margin
|
|
|
|
margin-top: 0;
|
|
|
|
}
|
|
|
|
|
2018-06-18 21:29:43 +00:00
|
|
|
// Add to .label so that old system notes that are saved to the db
|
|
|
|
// will still receive the correct styling
|
2020-05-26 21:07:45 +00:00
|
|
|
.badge:not(.gl-badge),
|
2018-06-18 21:29:43 +00:00
|
|
|
.label {
|
2018-04-13 19:46:38 +00:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
}
|
2018-04-13 20:06:52 +00:00
|
|
|
|
|
|
|
.divider {
|
|
|
|
@extend .dropdown-divider;
|
|
|
|
}
|
2018-04-13 20:51:54 +00:00
|
|
|
|
|
|
|
.info-well {
|
2020-05-20 00:08:20 +00:00
|
|
|
background: $gray-10;
|
2018-04-13 20:51:54 +00:00
|
|
|
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;
|
|
|
|
}
|
2018-06-18 11:38:22 +00:00
|
|
|
|
|
|
|
p,
|
|
|
|
ol,
|
|
|
|
ul,
|
|
|
|
.form-group {
|
|
|
|
&:last-of-type {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
2018-04-13 20:51:54 +00:00
|
|
|
}
|
2018-06-05 15:22:39 +00:00
|
|
|
|
|
|
|
.badge.badge-gray {
|
|
|
|
background-color: $well-expand-item;
|
|
|
|
}
|
2018-04-13 20:51:54 +00:00
|
|
|
}
|
2018-04-17 16:13:18 +00:00
|
|
|
|
|
|
|
.card {
|
|
|
|
&.card-without-border {
|
2018-04-17 17:20:11 +00:00
|
|
|
@extend .border-0;
|
2018-04-17 16:13:18 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&.card-without-margin {
|
|
|
|
margin: 0;
|
|
|
|
}
|
2018-04-18 19:55:36 +00:00
|
|
|
|
|
|
|
&.bg-light {
|
|
|
|
@extend .border-0;
|
|
|
|
}
|
2018-04-17 16:13:18 +00:00
|
|
|
}
|
2018-05-25 02:32:40 +00:00
|
|
|
|
2018-05-31 14:23:49 +00:00
|
|
|
.nav-tabs {
|
2018-06-06 00:37:04 +00:00
|
|
|
// Override bootstrap's default border
|
|
|
|
border-bottom: 0;
|
|
|
|
|
2018-05-31 14:23:49 +00:00
|
|
|
.nav-link {
|
2018-06-05 14:47:06 +00:00
|
|
|
border-top: 0;
|
|
|
|
border-left: 0;
|
|
|
|
border-right: 0;
|
2018-05-31 14:23:49 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.nav-item {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
2018-05-25 02:32:40 +00:00
|
|
|
}
|
2018-05-29 16:11:09 +00:00
|
|
|
|
|
|
|
pre code {
|
|
|
|
white-space: pre-wrap;
|
|
|
|
}
|
2018-06-06 16:50:23 +00:00
|
|
|
|
2019-11-08 12:06:32 +00:00
|
|
|
.alert {
|
2018-06-15 19:35:27 +00:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2018-06-06 16:50:23 +00:00
|
|
|
.alert-danger {
|
|
|
|
background-color: $red-500;
|
|
|
|
border-color: $red-500;
|
2018-06-11 10:52:36 +00:00
|
|
|
}
|
|
|
|
|
2018-06-15 19:35:27 +00:00
|
|
|
.alert-success,
|
|
|
|
.alert-info,
|
2018-06-11 10:52:36 +00:00
|
|
|
.alert-warning,
|
2019-11-08 12:06:32 +00:00
|
|
|
.alert-danger {
|
2020-03-31 00:08:09 +00:00
|
|
|
color: $white;
|
2018-06-06 16:50:23 +00:00
|
|
|
|
2018-06-11 10:52:36 +00:00
|
|
|
h4,
|
|
|
|
.alert-link {
|
2020-03-31 00:08:09 +00:00
|
|
|
color: $white;
|
2018-06-06 16:50:23 +00:00
|
|
|
}
|
|
|
|
}
|
2018-06-07 16:14:34 +00:00
|
|
|
|
|
|
|
input[type=color].form-control {
|
|
|
|
height: $input-height;
|
|
|
|
}
|
2018-06-11 17:41:48 +00:00
|
|
|
|
|
|
|
.toggle-sidebar-button {
|
|
|
|
.collapse-text,
|
2020-06-22 18:08:47 +00:00
|
|
|
.icon-chevron-double-lg-left,
|
|
|
|
.icon-chevron-double-lg-right {
|
2018-06-11 17:41:48 +00:00
|
|
|
color: $gl-text-color-secondary;
|
|
|
|
}
|
|
|
|
}
|
2018-06-11 16:21:10 +00:00
|
|
|
|
2018-06-13 17:41:44 +00:00
|
|
|
.project-templates-buttons {
|
|
|
|
.btn {
|
|
|
|
vertical-align: unset;
|
|
|
|
}
|
2018-06-11 16:21:10 +00:00
|
|
|
}
|
2018-07-31 08:21:53 +00:00
|
|
|
|
2018-11-28 08:53:29 +00:00
|
|
|
/*
|
|
|
|
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:
|
2019-09-18 14:02:45 +00:00
|
|
|
- https://gitlab.com/gitlab-org/gitlab-foss/issues/51362
|
2018-11-28 08:53:29 +00:00
|
|
|
*/
|
|
|
|
svg {
|
|
|
|
vertical-align: baseline;
|
|
|
|
}
|