1224 lines
22 KiB
SCSS
1224 lines
22 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-comment-avatar-holders {
|
|
position: absolute;
|
|
margin-left: -$gl-padding;
|
|
z-index: 100;
|
|
@include code-icon-size();
|
|
|
|
&:hover {
|
|
.diff-comment-avatar,
|
|
.diff-comments-more-count {
|
|
@for $i from 1 through 4 {
|
|
$x-pos: 14px;
|
|
|
|
&:nth-child(#{$i}) {
|
|
@if $i == 4 {
|
|
$x-pos: 14.5px;
|
|
}
|
|
|
|
transform: translateX((($i * $x-pos) - $x-pos));
|
|
|
|
&:hover {
|
|
transform: translateX((($i * $x-pos) - $x-pos));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.diff-comments-more-count {
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.diff-comment-avatar,
|
|
.diff-comments-more-count {
|
|
position: absolute;
|
|
left: 0;
|
|
margin-right: 0;
|
|
border-color: var(--white, $white);
|
|
cursor: pointer;
|
|
transition: all 0.1s ease-out;
|
|
@include code-icon-size();
|
|
|
|
@for $i from 1 through 4 {
|
|
&:nth-child(#{$i}) {
|
|
z-index: (4 - $i);
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
@include code-icon-size();
|
|
}
|
|
}
|
|
|
|
.diff-comments-more-count {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
overflow: hidden;
|
|
@include code-icon-size();
|
|
}
|
|
|
|
.diff-file-changes {
|
|
max-width: 560px;
|
|
width: 100%;
|
|
z-index: 150;
|
|
min-height: $dropdown-min-height;
|
|
max-height: $dropdown-max-height;
|
|
overflow-y: auto;
|
|
margin-bottom: 0;
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
left: $gl-padding;
|
|
}
|
|
|
|
.dropdown-input .dropdown-input-search {
|
|
pointer-events: all;
|
|
}
|
|
|
|
.diff-changed-file {
|
|
display: flex;
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.diff-file-changed-icon {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.diff-changed-file-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.diff-changed-file-name,
|
|
.diff-changed-blank-file-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.diff-changed-blank-file-name {
|
|
color: var(--gray-400, $gray-400);
|
|
font-style: italic;
|
|
}
|
|
|
|
.diff-changed-file-path {
|
|
color: var(--gray-400, $gray-400);
|
|
}
|
|
|
|
.diff-changed-stats {
|
|
margin-left: auto;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.diff-files-holder {
|
|
flex: 1;
|
|
min-width: 0;
|
|
z-index: 203;
|
|
|
|
.vue-recycle-scroller__item-wrapper {
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
.diff-grid {
|
|
.diff-td {
|
|
// By default min-width is auto with 1fr which causes some overflow problems
|
|
// https://gitlab.com/gitlab-org/gitlab/-/issues/296222
|
|
min-width: 0;
|
|
}
|
|
|
|
.diff-grid-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
|
|
&.diff-grid-row-full {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.diff-grid-left,
|
|
.diff-grid-right {
|
|
display: grid;
|
|
// Zero width column is a placeholder for the EE inline code quality diff
|
|
// see ee/.../diffs.scss for more details
|
|
grid-template-columns: 50px 8px 0 1fr;
|
|
}
|
|
|
|
.diff-grid-2-col {
|
|
grid-template-columns: 100px 1fr !important;
|
|
|
|
&.parallel {
|
|
grid-template-columns: 50px 1fr !important;
|
|
}
|
|
}
|
|
|
|
.diff-grid-comments {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.diff-grid-drafts {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
|
|
.content + .content {
|
|
@include gl-border-t;
|
|
}
|
|
}
|
|
|
|
&.inline-diff-view {
|
|
.diff-grid-comments {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.diff-grid-drafts {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.diff-grid-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.diff-grid-left,
|
|
.diff-grid-right {
|
|
// Zero width column is a placeholder for the EE inline code quality diff
|
|
// see ee/../diffs.scss for more details
|
|
grid-template-columns: 50px 50px 8px 0 1fr;
|
|
}
|
|
}
|
|
}
|
|
|
|
.diff-line-expand-button {
|
|
&:hover,
|
|
&:focus {
|
|
background-color: var(--gray-200, $gray-200);
|
|
}
|
|
}
|
|
|
|
.diff-table.code .diff-tr.line_holder .diff-td.line_content.parallel {
|
|
width: unset;
|
|
}
|
|
|
|
.diff-tr {
|
|
.timeline-discussion-body {
|
|
clear: left;
|
|
|
|
.note-body {
|
|
padding: 0 0 $gl-padding-8;
|
|
}
|
|
}
|
|
|
|
.timeline-entry img.avatar {
|
|
margin-top: -2px;
|
|
margin-right: $gl-padding-8;
|
|
}
|
|
|
|
// tiny adjustment to vertical align with the note header text
|
|
.discussion-collapsible {
|
|
margin-left: 1rem;
|
|
|
|
.timeline-icon {
|
|
padding-top: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
--initial-pos: calc(#{$header-height} + #{$mr-tabs-height} + #{$diff-file-header-top});
|
|
--top-pos: var(--initial-pos);
|
|
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: calc(var(--top-pos) + var(--performance-bar-height, 0px));
|
|
max-height: calc(100vh - var(--top-pos) - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px));
|
|
|
|
.drag-handle {
|
|
bottom: 16px;
|
|
}
|
|
|
|
&.is-sidebar-moved {
|
|
--top-pos: calc(var(--initial-pos) + 26px);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
display: grid;
|
|
grid-template-columns: max-content minmax(0, max-content) max-content;
|
|
grid-gap: $gl-spacing-scale-2;
|
|
|
|
@include media-breakpoint-up(xs) {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
width: 400px;
|
|
}
|
|
}
|
|
|
|
.deploy-heading,
|
|
.merge-train-position-indicator {
|
|
padding: $gl-padding-8;
|
|
@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-widget-body-loading 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-section {
|
|
> :first-child {
|
|
border-top-left-radius: $border-radius-default - 1px;
|
|
border-top-right-radius: $border-radius-default - 1px;
|
|
}
|
|
|
|
> :last-child,
|
|
.deploy-heading:last-child {
|
|
border-bottom-left-radius: $border-radius-default - 1px;
|
|
border-bottom-right-radius: $border-radius-default - 1px;
|
|
}
|
|
}
|
|
|
|
> .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;
|
|
}
|
|
|
|
.normal {
|
|
flex: 1;
|
|
flex-basis: auto;
|
|
}
|
|
|
|
.capitalize {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.label-branch {
|
|
@include gl-font-monospace;
|
|
font-size: 95%;
|
|
overflow: hidden;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.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: 24px;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
.state-label {
|
|
font-weight: $gl-font-weight-bold;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.danger {
|
|
color: var(--red-500, $red-500);
|
|
}
|
|
|
|
.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) {
|
|
.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-body-ready-merge {
|
|
@include media-breakpoint-down(sm) {
|
|
@include gl-p-3;
|
|
}
|
|
}
|
|
|
|
.mr-widget-border-top {
|
|
border-top: 1px solid var(--border-color, $border-color);
|
|
|
|
&:last-child {
|
|
.report-block-container {
|
|
border-bottom-left-radius: $border-radius-default - 1px;
|
|
border-bottom-right-radius: $border-radius-default - 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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-50p;
|
|
@include gl-top-half;
|
|
@include gl-opacity-3;
|
|
@include gl-border-solid;
|
|
@include gl-border-4;
|
|
@include gl-rounded-full;
|
|
|
|
width: 24px;
|
|
height: 24px;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.mr-widget-extension-icon::after {
|
|
@include gl-content-empty;
|
|
@include gl-absolute;
|
|
@include gl-rounded-full;
|
|
@include gl-left-50p;
|
|
@include gl-top-half;
|
|
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 4px solid;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.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 {
|
|
position: relative;
|
|
|
|
&:not(:first-child) {
|
|
margin-top: $gl-padding;
|
|
}
|
|
|
|
&:not(:last-child)::before {
|
|
content: '';
|
|
border-left: 2px solid var(--gray-10, $gray-10);
|
|
position: absolute;
|
|
bottom: -17px;
|
|
left: calc(1rem - 1px);
|
|
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;
|
|
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;
|
|
max-height: calc(100vh - 50px);
|
|
|
|
.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: 172px;
|
|
}
|
|
}
|
|
|
|
.mr-widget-merge-details {
|
|
li:not(:last-child) {
|
|
@include gl-mb-3;
|
|
}
|
|
}
|
|
|
|
.mr-ready-merge-related-links,
|
|
.mr-widget-merge-details {
|
|
a {
|
|
@include gl-text-decoration-underline;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
@include gl-text-decoration-none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.merge-request-sticky-header {
|
|
z-index: 204;
|
|
box-shadow: 0 1px 2px $issue-boards-card-shadow;
|
|
--width: calc(100% - #{$contextual-sidebar-width});
|
|
|
|
@include media-breakpoint-down(lg) {
|
|
--width: calc(100% - #{$contextual-sidebar-collapsed-width});
|
|
}
|
|
}
|
|
|
|
.detail-page-header-actions {
|
|
.gl-toggle {
|
|
@include gl-ml-auto;
|
|
@include gl-rounded-pill;
|
|
@include gl-w-9;
|
|
|
|
&.is-checked:hover {
|
|
background-color: $blue-500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-with-icon-sidebar .issue-sticky-header {
|
|
--width: calc(100% - #{$contextual-sidebar-collapsed-width});
|
|
}
|
|
|
|
.merge-request-notification-toggle {
|
|
.gl-toggle-label {
|
|
@include gl-font-weight-normal;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu li button.gl-toggle:not(.is-checked) {
|
|
background: $gray-400;
|
|
}
|
|
|
|
.mr-widget-content-row:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
.mr-widget-status-icon-level-1::before {
|
|
@include gl-content-empty;
|
|
@include gl-absolute;
|
|
@include gl-left-0;
|
|
@include gl-top-0;
|
|
@include gl-bottom-0;
|
|
@include gl-right-0;
|
|
@include gl-opacity-3;
|
|
@include gl-rounded-full;
|
|
@include gl-border-solid;
|
|
@include gl-border-4;
|
|
}
|
|
|
|
.mr-widget-status-icon-level-1::after {
|
|
@include gl-content-empty;
|
|
@include gl-absolute;
|
|
@include gl-rounded-full;
|
|
@include gl-border-solid;
|
|
@include gl-border-4;
|
|
@include gl-left-2;
|
|
@include gl-right-2;
|
|
@include gl-top-2;
|
|
@include gl-bottom-2;
|
|
}
|
|
|
|
.memory-graph-container {
|
|
background: var(--white, $white);
|
|
border: 1px solid var(--gray-100, $gray-100);
|
|
}
|
|
|
|
.review-bar-component {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: $zindex-dropdown-menu;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: $toggle-sidebar-height;
|
|
padding-left: $contextual-sidebar-width;
|
|
padding-right: $gutter_collapsed_width;
|
|
background: var(--white, $white);
|
|
border-top: 1px solid var(--border-color, $border-color);
|
|
transition: padding $gl-transition-duration-medium;
|
|
|
|
.page-with-icon-sidebar & {
|
|
padding-left: $contextual-sidebar-collapsed-width;
|
|
}
|
|
|
|
.right-sidebar-expanded & {
|
|
padding-right: $gutter_width;
|
|
}
|
|
|
|
@media (max-width: map-get($grid-breakpoints, sm)-1) {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.dropdown {
|
|
margin-left: $grid-size;
|
|
}
|
|
}
|
|
|
|
.review-bar-content {
|
|
max-width: $limited-layout-width;
|
|
padding: 0 $gl-padding;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.review-preview-item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-bottom: 4px;
|
|
|
|
> .bold {
|
|
display: flex;
|
|
min-width: 0;
|
|
line-height: 16px;
|
|
}
|
|
}
|
|
|
|
.review-preview-item-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.review-preview-item-content {
|
|
width: 100%;
|
|
|
|
p {
|
|
display: block;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.commits ol:not(:last-of-type) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mr-section-container {
|
|
.state-container-action-buttons {
|
|
@include media-breakpoint-up(md) {
|
|
flex-direction: row-reverse;
|
|
|
|
.btn {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|