Skip to content

G
gitlab-ce
Commit 564aa8bd authored by Coung Ngo's avatar Coung Ngo
Browse files
Options

Move css to merge request show page bundle 

Move to page bundle to reduce global css size
parent 0e114180
Show whitespace changes
Inline Side-by-side
Showing with 637 additions and 634 deletions
app/assets/stylesheets/framework/variables.scss
View file @ 564aa8bd
......@@ -929,8 +929,6 @@ Merge requests
*/
$mr-tabs-height: 48px;
$mr-version-controls-height: 56px;
$mr-widget-margin-left: 40px;
$mr-review-bar-height: calc(2rem + 13px);
/*
Compare Branches
......
app/assets/stylesheets/page_bundles/merge_requests.scss
View file @ 564aa8bd
@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;
}
......@@ -108,6 +113,638 @@
}
}
.ci-widget-container {
justify-content: space-between;
flex: 1;
flex-direction: row;
@include media-breakpoint-down(sm) {
flex-direction: column;
.stage-cell .stage-container {
margin-top: 16px;
}
.dropdown .mini-pipeline-graph-dropdown-menu.dropdown-menu {
transform: initial;
}
}
.coverage {
font-size: 12px;
color: $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 $border-color;
}
}
.diff-file-row.is-active {
background-color: $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 $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: $gl-text-color-secondary;
}
}
.mr-state-widget {
color: $gl-text-color;
.commit-message-edit {
border-radius: $border-radius-default;
}
.mr-widget-section:not(:first-child) {
border-top: solid 1px $border-color;
}
.mr-widget-alert-container + .mr-widget-section {
border-top: 0;
}
.mr-fast-forward-message {
padding-left: $gl-padding-50;
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: $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: $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: $gray-600;
margin-left: 10px;
}
.state-label {
font-weight: $gl-font-weight-bold;
padding-right: 10px;
}
.danger {
color: $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 $border-color;
.circle-icon-container {
color: $gl-text-color-quaternary;
}
}
}
.ci-coverage {
float: right;
}
.stop-env-container {
color: $gl-text-color;
float: right;
a {
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 $border-color;
}
.mr-widget-extension {
border-top: 1px solid $border-color;
background-color: $gray-50;
&.clickable:hover {
background-color: $gray-100;
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 $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;
&::before {
content: '';
border-left: 1px solid $gray-100;
position: absolute;
left: 28px;
top: -17px;
height: 16px;
}
}
.mr-version-controls {
position: relative;
z-index: $tabs-holder-z-index + 10;
background: $white;
color: $gl-text-color;
margin-top: -1px;
.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;
border-bottom: 0;
}
.mr-version-dropdown,
.mr-version-compare-dropdown {
margin: 0 0.5rem;
}
.dropdown-title {
color: $gl-text-color;
}
// Shortening button height by 1px to make compare-versions
// header 56px and fit into our 8px design grid
.btn {
height: 34px;
}
@include media-breakpoint-up(md) {
position: -webkit-sticky;
position: sticky;
top: calc(#{$header-height} + #{$mr-tabs-height});
.with-system-header & {
top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height});
}
.with-system-header.with-performance-bar & {
top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height} + #{$performance-bar-height});
}
.mr-version-menus-container {
flex-wrap: nowrap;
}
.with-performance-bar & {
top: calc(#{$header-height} + #{$performance-bar-height} + #{$mr-tabs-height});
}
}
}
// TODO: Move to GitLab UI
.mr-extenson-scrim {
background: linear-gradient(to bottom, rgba($gray-light, 0), rgba($gray-light, 1));
......
app/assets/stylesheets/pages/merge_requests.scss
View file @ 564aa8bd
......@@ -2,8 +2,6 @@
* MR -> show: Automerge widget
*
*/
$mr-widget-min-height: 69px;
$tabs-holder-z-index: 250;
.space-children {
......@@ -18,12 +16,6 @@ $tabs-holder-z-index: 250;
}
}
.mr-widget-border-top {
border-top: 1px solid $border-color;
}
.mr-widget-margin-left { margin-left: $mr-widget-margin-left; }
.media-section {
@include media-breakpoint-down(md) {
align-items: flex-start;
......@@ -42,140 +34,9 @@ $tabs-holder-z-index: 250;
}
}
.mr-widget-section {
.code-text {
flex: 1;
}
}
.mr-widget-heading {
position: relative;
border: 1px solid $border-color;
border-radius: $border-radius-default;
background: var(--white, $white);
.gl-skeleton-loader {
display: block;
}
}
.mr-widget-extension {
border-top: 1px solid $border-color;
background-color: $gray-50;
&.clickable:hover {
background-color: $gray-100;
cursor: pointer;
}
}
.mr-widget-workflow {
margin-top: $gl-padding;
position: relative;
&::before {
content: '';
border-left: 1px solid $gray-100;
position: absolute;
left: 28px;
top: -17px;
height: 16px;
}
}
.mr-section-container {
border: 1px solid $border-color;
border-radius: $border-radius-default;
background: var(--white, $white);
> .mr-widget-border-top:first-of-type {
border-top: 0;
}
}
.mr-widget-body,
.mr-widget-content,
.mr-widget-footer {
padding: $gl-padding;
}
.mr-widget-info {
padding-left: $gl-padding;
padding-right: $gl-padding;
}
.mr-state-widget {
color: $gl-text-color;
.commit-message-edit {
border-radius: $border-radius-default;
}
.mr-widget-section:not(:first-child),
.mr-widget-footer {
border-top: solid 1px $border-color;
}
.mr-widget-alert-container + .mr-widget-section {
border-top: 0;
}
.mr-fast-forward-message {
padding-left: $gl-padding-50;
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-widget-footer {
padding: 0;
}
.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;
.accept-merge-request {
&.ci-preparing,
&.ci-pending,
......@@ -192,226 +53,6 @@ $tabs-holder-z-index: 250;
}
}
}
.ci-widget {
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: $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: $gray-600;
margin-left: 10px;
}
.state-label {
font-weight: $gl-font-weight-bold;
padding-right: 10px;
}
.danger {
color: $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 $border-color;
.circle-icon-container {
color: $gl-text-color-quaternary;
}
}
}
.ci-coverage {
float: right;
}
.stop-env-container {
color: $gl-text-color;
float: right;
a {
color: $gl-text-color;
}
}
}
.mr_source_commit,
......@@ -477,72 +118,6 @@ $tabs-holder-z-index: 250;
}
}
.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-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: $gl-text-color-secondary;
}
}
.card-new-merge-request {
.card-header {
padding: 5px 10px;
......@@ -639,75 +214,6 @@ $tabs-holder-z-index: 250;
}
}
.mr-version-controls {
position: relative;
z-index: $tabs-holder-z-index + 10;
background: $white;
color: $gl-text-color;
margin-top: -1px;
.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;
border-bottom: 0;
}
.mr-version-dropdown,
.mr-version-compare-dropdown {
margin: 0 0.5rem;
}
.dropdown-title {
color: $gl-text-color;
}
// Shortening button height by 1px to make compare-versions
// header 56px and fit into our 8px design grid
.btn {
height: 34px;
}
@include media-breakpoint-up(md) {
position: -webkit-sticky;
position: sticky;
top: calc(#{$header-height} + #{$mr-tabs-height});
.with-system-header & {
top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height});
}
.with-system-header.with-performance-bar & {
top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height} + #{$performance-bar-height});
}
.mr-version-menus-container {
flex-wrap: nowrap;
}
.with-performance-bar & {
top: calc(#{$header-height} + #{$performance-bar-height} + #{$mr-tabs-height});
}
}
}
.merge-request-tabs-holder,
.epic-tabs-holder {
top: $header-height;
......@@ -833,80 +339,10 @@ $tabs-holder-z-index: 250;
}
}
.mr-memory-usage {
width: 100%;
p.usage-info-loading .usage-info-load-spinner {
margin-right: 10px;
font-size: 16px;
}
}
.fork-sprite {
margin-right: -5px;
}
.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 $border-color;
}
}
.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;
}
}
// Hack alert: we've rewritten `btn` class in a way that
// we've broken it and it is not possible to use with `btn-link`
// which causes a blank button when it's disabled and hovering
......@@ -924,30 +360,6 @@ $tabs-holder-z-index: 250;
}
}
.ci-widget-container {
justify-content: space-between;
flex: 1;
flex-direction: row;
@include media-breakpoint-down(sm) {
flex-direction: column;
.stage-cell .stage-container {
margin-top: 16px;
}
.dropdown .mini-pipeline-graph-dropdown-menu.dropdown-menu {
transform: initial;
}
}
.coverage {
font-size: 12px;
color: $gray-500;
line-height: initial;
}
}
.merge-request-details .file-finder-overlay.diff-file-finder {
position: fixed;
z-index: 99999;
......@@ -963,47 +375,3 @@ $tabs-holder-z-index: 250;
}
}
}
.diff-file-row.is-active {
background-color: $gray-50;
}
.mr-conflict-loader {
max-width: 334px;
> svg {
vertical-align: middle;
}
}
.mr-ready-to-merge-loader {
max-width: 418px;
> svg {
vertical-align: middle;
}
}
.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-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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7