806 lines
14 KiB
SCSS
806 lines
14 KiB
SCSS
@import 'mixins_and_variables_and_functions';
|
|
|
|
$mr-review-bar-height: calc(2rem + 13px);
|
|
$mr-widget-margin-left: 40px;
|
|
$mr-widget-min-height: 69px;
|
|
$tabs-holder-z-index: 250;
|
|
|
|
.compare-versions-container {
|
|
min-width: 0;
|
|
}
|
|
|
|
.diff-files-holder {
|
|
flex: 1;
|
|
min-width: 0;
|
|
z-index: 203;
|
|
|
|
.vue-recycle-scroller__item-wrapper {
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
.with-system-header {
|
|
--system-header-height: #{$system-header-height};
|
|
}
|
|
|
|
.with-performance-bar {
|
|
--performance-bar-height: #{$performance-bar-height};
|
|
}
|
|
|
|
.review-bar-visible {
|
|
--review-bar-height: #{$mr-review-bar-height};
|
|
}
|
|
|
|
.diff-tree-list {
|
|
// This 11px value should match the additional value found in
|
|
// /assets/stylesheets/framework/diffs.scss
|
|
// for the $mr-file-header-top SCSS variable within the
|
|
// .file-title,
|
|
// .file-title-flex-parent {
|
|
// rule.
|
|
// If they don't match, the file tree and the diff files stick
|
|
// to the top at different heights, which is a bad-looking defect
|
|
$diff-file-header-top: 11px;
|
|
$top-pos: calc(#{$header-height} + #{$mr-tabs-height} + #{$diff-file-header-top});
|
|
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
// Unitless zero values are not allowed in calculations
|
|
// stylelint-disable-next-line length-zero-no-unit
|
|
top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px));
|
|
// stylelint-disable-next-line length-zero-no-unit
|
|
max-height: calc(100vh - #{$top-pos} - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px));
|
|
|
|
.drag-handle {
|
|
bottom: 16px;
|
|
}
|
|
}
|
|
|
|
.tree-list-holder {
|
|
height: 100%;
|
|
|
|
.file-row {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.tree-list-scroll {
|
|
max-height: 100%;
|
|
padding-bottom: $grid-size;
|
|
overflow-y: scroll;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.tree-list-search {
|
|
flex: 0 0 34px;
|
|
|
|
.form-control {
|
|
padding-left: 30px;
|
|
}
|
|
}
|
|
|
|
.tree-list-icon {
|
|
top: 50%;
|
|
left: 10px;
|
|
transform: translateY(-50%);
|
|
|
|
&,
|
|
svg {
|
|
fill: var(--gray-400, $gray-400);
|
|
}
|
|
}
|
|
|
|
.tree-list-clear-icon {
|
|
right: 10px;
|
|
left: auto;
|
|
line-height: 0;
|
|
}
|
|
|
|
@media (max-width: map-get($grid-breakpoints, lg)-1) {
|
|
.diffs .files {
|
|
.diff-tree-list {
|
|
position: relative;
|
|
top: 0;
|
|
// !important is required to override inline styles of resizable sidebar
|
|
width: 100% !important;
|
|
}
|
|
|
|
.tree-list-holder {
|
|
max-height: calc(50px + 50vh);
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ci-widget-container {
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
flex-direction: row;
|
|
|
|
@include media-breakpoint-down(sm) {
|
|
flex-direction: column;
|
|
|
|
.dropdown .mini-pipeline-graph-dropdown-menu.dropdown-menu {
|
|
transform: initial;
|
|
}
|
|
}
|
|
|
|
.coverage {
|
|
font-size: 12px;
|
|
color: var(--gray-500, $gray-500);
|
|
line-height: initial;
|
|
}
|
|
}
|
|
|
|
.deploy-body {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
@include media-breakpoint-up(xs) {
|
|
flex-wrap: nowrap;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@include media-breakpoint-down(md) {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
|
|
.deployment-info {
|
|
margin-bottom: $gl-padding;
|
|
}
|
|
}
|
|
|
|
> *:not(:last-child) {
|
|
margin-right: 0.3em;
|
|
}
|
|
|
|
svg {
|
|
vertical-align: text-top;
|
|
}
|
|
|
|
.deployment-info {
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
min-width: 100px;
|
|
|
|
@include media-breakpoint-up(xs) {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
width: 400px;
|
|
}
|
|
}
|
|
|
|
.deploy-heading,
|
|
.merge-train-position-indicator {
|
|
@include media-breakpoint-up(md) {
|
|
padding: $gl-padding-8 $gl-padding;
|
|
}
|
|
|
|
.media-body {
|
|
min-width: 0;
|
|
font-size: 12px;
|
|
margin-left: 32px;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: 1px solid var(--border-color, $border-color);
|
|
}
|
|
}
|
|
|
|
.diff-file-row.is-active {
|
|
background-color: var(--gray-50, $gray-50);
|
|
}
|
|
|
|
.mr-conflict-loader {
|
|
max-width: 334px;
|
|
|
|
> svg {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.mr-info-list {
|
|
clear: left;
|
|
position: relative;
|
|
padding-top: 4px;
|
|
|
|
p {
|
|
margin: 0;
|
|
position: relative;
|
|
padding: 4px 0;
|
|
|
|
&:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&.mr-memory-usage {
|
|
p {
|
|
float: left;
|
|
}
|
|
|
|
.memory-graph-container {
|
|
float: left;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mr-memory-usage {
|
|
width: 100%;
|
|
|
|
p.usage-info-loading .usage-info-load-spinner {
|
|
margin-right: 10px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.mr-ready-to-merge-loader {
|
|
max-width: 418px;
|
|
|
|
> svg {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.mr-section-container {
|
|
border: 1px solid var(--border-color, $border-color);
|
|
border-radius: $border-radius-default;
|
|
background: var(--white, $white);
|
|
|
|
> .mr-widget-border-top:first-of-type {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
.mr-source-target {
|
|
flex-wrap: wrap;
|
|
padding: $gl-padding;
|
|
background: var(--white, $white);
|
|
min-height: $mr-widget-min-height;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
align-items: center;
|
|
}
|
|
|
|
.git-merge-container {
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
@include media-breakpoint-down(md) {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
|
|
.branch-actions {
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
.branch-actions {
|
|
align-self: center;
|
|
margin-left: $gl-padding;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.diverged-commits-count {
|
|
color: var(--gray-500, $gl-text-color-secondary);
|
|
}
|
|
}
|
|
|
|
.mr-state-widget {
|
|
color: var(--gl-text-color, $gl-text-color);
|
|
|
|
.commit-message-edit {
|
|
border-radius: $border-radius-default;
|
|
}
|
|
|
|
.mr-widget-section:not(:first-child) {
|
|
border-top: solid 1px var(--border-color, $border-color);
|
|
}
|
|
|
|
.mr-widget-alert-container + .mr-widget-section {
|
|
border-top: 0;
|
|
}
|
|
|
|
.mr-fast-forward-message {
|
|
padding-left: $gl-spacing-scale-9;
|
|
padding-bottom: $gl-padding;
|
|
}
|
|
|
|
.commits-list {
|
|
> li {
|
|
padding: $gl-padding;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
margin-left: $gl-spacing-scale-7;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mr-commit-dropdown {
|
|
.dropdown-menu {
|
|
@include media-breakpoint-up(md) {
|
|
width: 150%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mr-report {
|
|
padding: 0;
|
|
|
|
> .media {
|
|
padding: $gl-padding;
|
|
}
|
|
}
|
|
|
|
form {
|
|
margin-bottom: 0;
|
|
|
|
.clearfix {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
label {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.btn {
|
|
font-size: $gl-font-size;
|
|
}
|
|
|
|
.accept-merge-holder {
|
|
.accept-action {
|
|
display: inline-block;
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
.ci-widget {
|
|
color: var(--gl-text-color, $gl-text-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
@include media-breakpoint-down(xs) {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ci-widget-content {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.mr-widget-icon {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.mr-loading-icon {
|
|
margin: 3px 0;
|
|
}
|
|
|
|
.ci-status-icon svg {
|
|
margin: 3px 0;
|
|
position: relative;
|
|
overflow: visible;
|
|
display: block;
|
|
}
|
|
|
|
.mr-widget-pipeline-graph {
|
|
.dropdown-menu {
|
|
z-index: $zindex-dropdown-menu;
|
|
}
|
|
}
|
|
|
|
.normal {
|
|
flex: 1;
|
|
flex-basis: auto;
|
|
}
|
|
|
|
.capitalize {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.label-branch {
|
|
@include gl-font-monospace;
|
|
font-size: 95%;
|
|
color: var(--gl-text-color, $gl-text-color);
|
|
font-weight: normal;
|
|
overflow: hidden;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.deploy-link,
|
|
.label-branch {
|
|
&.label-truncate {
|
|
// NOTE: This selector targets its children because some of the HTML comes from
|
|
// 'source_branch_link'. Once this external HTML is no longer used, we could
|
|
// simplify this.
|
|
> a,
|
|
> span {
|
|
display: inline-block;
|
|
max-width: 12.5em;
|
|
margin-bottom: -6px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mr-widget-body {
|
|
&:not(.mr-widget-body-line-height-1) {
|
|
line-height: 28px;
|
|
}
|
|
|
|
@include clearfix;
|
|
|
|
.approve-btn {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
h4 {
|
|
float: left;
|
|
font-weight: $gl-font-weight-bold;
|
|
font-size: 14px;
|
|
line-height: inherit;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
|
|
time {
|
|
font-weight: $gl-font-weight-normal;
|
|
}
|
|
}
|
|
|
|
.btn-grouped {
|
|
margin-left: 0;
|
|
margin-right: 7px;
|
|
}
|
|
|
|
label {
|
|
font-weight: $gl-font-weight-normal;
|
|
}
|
|
|
|
.spacing {
|
|
margin: 0 0 0 10px;
|
|
}
|
|
|
|
.bold,
|
|
.gl-font-weight-bold {
|
|
font-weight: $gl-font-weight-bold;
|
|
color: var(--gray-600, $gray-600);
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.state-label {
|
|
font-weight: $gl-font-weight-bold;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.danger {
|
|
color: var(--red-500, $red-500);
|
|
}
|
|
|
|
.spacing,
|
|
.bold,
|
|
.gl-font-weight-bold {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
li a {
|
|
padding: 5px;
|
|
}
|
|
|
|
.merge-opt-icon {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.merge-opt-title {
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
|
|
.has-custom-error {
|
|
display: inline-block;
|
|
}
|
|
|
|
@include media-breakpoint-down(xs) {
|
|
p {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.btn-grouped {
|
|
float: none;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.accept-action {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.commit-message-editor {
|
|
label {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
&.mr-widget-empty-state {
|
|
line-height: 20px;
|
|
padding: $gl-padding;
|
|
|
|
.artwork {
|
|
|
|
@include media-breakpoint-down(md) {
|
|
margin-bottom: $gl-padding;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
p {
|
|
margin-top: $gl-padding;
|
|
}
|
|
|
|
.highlight {
|
|
margin: 0 0 $gl-padding;
|
|
font-weight: $gl-font-weight-bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.mr-pipeline-suggest {
|
|
border-radius: $border-radius-default;
|
|
line-height: 20px;
|
|
border: 1px solid var(--border-color, $border-color);
|
|
|
|
.circle-icon-container {
|
|
color: var(--gray-100, $gl-text-color-quaternary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ci-coverage {
|
|
float: right;
|
|
}
|
|
|
|
.stop-env-container {
|
|
color: var(--gl-text-color, $gl-text-color);
|
|
float: right;
|
|
|
|
a {
|
|
color: var(--gl-text-color, $gl-text-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.mr-widget-alert-container {
|
|
$radius: $border-radius-default - 1px;
|
|
|
|
border-radius: $radius $radius 0 0;
|
|
|
|
.gl-alert:not(:last-child) {
|
|
margin-bottom: 1px;
|
|
}
|
|
}
|
|
|
|
.mr-widget-body,
|
|
.mr-widget-content {
|
|
padding: $gl-padding;
|
|
}
|
|
|
|
.mr-widget-border-top {
|
|
border-top: 1px solid var(--border-color, $border-color);
|
|
}
|
|
|
|
.mr-widget-extension {
|
|
border-top: 1px solid var(--border-color, $border-color);
|
|
background-color: var(--gray-10, $gray-10);
|
|
|
|
&.clickable:hover {
|
|
background-color: var(--gray-50, $gray-50);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.mr-widget-extension-icon::before {
|
|
@include gl-content-empty;
|
|
@include gl-absolute;
|
|
@include gl-left-0;
|
|
@include gl-top-0;
|
|
@include gl-opacity-3;
|
|
@include gl-border-solid;
|
|
@include gl-border-4;
|
|
@include gl-rounded-full;
|
|
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.mr-widget-heading {
|
|
position: relative;
|
|
border: 1px solid var(--border-color, $border-color);
|
|
border-radius: $border-radius-default;
|
|
background: var(--white, $white);
|
|
|
|
.gl-skeleton-loader {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.mr-widget-info {
|
|
padding-left: $gl-padding;
|
|
padding-right: $gl-padding;
|
|
}
|
|
|
|
.mr-widget-margin-left {
|
|
margin-left: $mr-widget-margin-left;
|
|
}
|
|
|
|
.mr-widget-section {
|
|
.code-text {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.mr-widget-workflow {
|
|
margin-top: $gl-padding;
|
|
position: relative;
|
|
|
|
&:not(:last-child)::before {
|
|
content: '';
|
|
border-left: 1px solid var(--gray-100, $gray-100);
|
|
position: absolute;
|
|
left: 28px;
|
|
bottom: -17px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
|
|
.mr-version-controls {
|
|
background: var(--white, $white);
|
|
color: var(--gl-text-color, $gl-text-color);
|
|
|
|
.mr-version-menus-container {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
padding: 16px;
|
|
z-index: 199;
|
|
white-space: nowrap;
|
|
|
|
.gl-dropdown-toggle {
|
|
width: auto;
|
|
max-width: 170px;
|
|
|
|
svg {
|
|
top: 10px;
|
|
right: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-block {
|
|
padding: $gl-padding-8 $gl-padding;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.mr-version-dropdown,
|
|
.mr-version-compare-dropdown {
|
|
margin: 0 $gl-spacing-scale-1;
|
|
|
|
.dropdown-toggle.gl-button {
|
|
padding: $gl-spacing-scale-2 2px $gl-spacing-scale-2 $gl-spacing-scale-2;
|
|
font-weight: $gl-font-weight-bold;
|
|
|
|
.gl-button-icon {
|
|
margin-left: $gl-spacing-scale-1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-title {
|
|
color: var(--gl-text-color, $gl-text-color);
|
|
}
|
|
}
|
|
|
|
.mr-section-container .resize-observer > object {
|
|
height: 0;
|
|
}
|
|
|
|
// TODO: Move to GitLab UI
|
|
.mr-extenson-scrim {
|
|
background: linear-gradient(to bottom, rgba($gray-light, 0), rgba($gray-light, 1));
|
|
|
|
.gl-dark & {
|
|
background: linear-gradient(to bottom, rgba(#333, 0), rgba(#333, 1));
|
|
}
|
|
}
|
|
|
|
.attention-request-sidebar-popover {
|
|
z-index: 999;
|
|
}
|
|
|
|
.merge-request-overview {
|
|
@include media-breakpoint-up(lg) {
|
|
display: grid;
|
|
grid-template-columns: calc(95% - 285px) auto;
|
|
grid-gap: 5%;
|
|
}
|
|
}
|
|
|
|
.container-fluid:not(.container-limited) {
|
|
.detail-page-header,
|
|
.detail-page-description,
|
|
.merge-request-tabs-container {
|
|
&.is-merge-request {
|
|
@include gl-mx-auto;
|
|
max-width: $fixed-layout-width - ($gl-padding * 2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.submit-review-dropdown {
|
|
&.show .dropdown-menu {
|
|
width: calc(100vw - 20px);
|
|
max-width: 650px;
|
|
|
|
.gl-new-dropdown-inner {
|
|
max-height: none !important;
|
|
}
|
|
|
|
.md-header {
|
|
.gl-tab-nav-item {
|
|
@include gl-text-gray-900;
|
|
@include gl-pb-5;
|
|
|
|
&:hover {
|
|
@include gl-bg-none;
|
|
@include gl-text-gray-900;
|
|
|
|
&:not(.gl-tab-nav-item-active) {
|
|
@include gl-inset-border-b-2-gray-200;
|
|
}
|
|
}
|
|
}
|
|
|
|
.gl-tab-nav-item-active {
|
|
@include gl-font-weight-bold;
|
|
@include gl-text-gray-900;
|
|
@include gl-inset-border-b-2-theme-accent;
|
|
|
|
&:active,
|
|
&:focus,
|
|
&:focus:active {
|
|
box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500),
|
|
$focus-ring;
|
|
@include gl-outline-none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.gl-new-dropdown-contents {
|
|
padding: $gl-spacing-scale-4 !important;
|
|
}
|
|
|
|
.md-preview-holder {
|
|
max-height: 180px;
|
|
height: 180px;
|
|
}
|
|
}
|