gitlab-org--gitlab-foss/app/assets/stylesheets/pages/merge_requests.scss
Jarek Ostrowski 7a796c76c2 Align merge request icons and text
Align icons left
Align text left
Adjust padding to be consistent
Make icons same 24 size
Add changelog mr number
Add right margin to widget status container
Add left margin inside widget icon container
Prepend left padding for error message
Only give button left margin, some have buttons
Prettify
Adjust test summary icons
Prettify
Fix empty line before lint
Remove author
Switch to use gl-padding
Use utility classes instead
Prettify
Change loading icon size to md
Update summary_row.vue
2019-07-16 17:31:12 +00:00

1039 lines
16 KiB
SCSS

/**
* MR -> show: Automerge widget
*
*/
.space-children {
@include clearfix;
> * {
float: left;
}
> *:not(:first-child) {
margin-left: 10px;
}
}
.mr-widget-border-top {
border-top: 1px solid $border-color;
}
.media-section {
@include media-breakpoint-down(md) {
align-items: flex-start;
.media-body {
flex-direction: column;
align-items: flex-start;
}
}
.code-text {
@include media-breakpoint-up(lg) {
align-self: center;
flex: 1;
}
}
}
.mr-widget-section {
border-radius: $border-radius-default $border-radius-default 0 0;
.code-text {
flex: 1;
}
}
.mr-widget-heading {
position: relative;
border: 1px solid $border-color;
border-radius: $border-radius-default;
}
.mr-widget-extension {
border-top: 1px solid $border-color;
background-color: $gray-light;
&.clickable:hover {
background-color: $gl-gray-200;
cursor: pointer;
}
}
.mr-widget-workflow {
margin-top: $gl-padding;
position: relative;
&::before {
content: '';
border-left: 1px solid $gray-200;
position: absolute;
left: 28px;
top: -17px;
height: 16px;
}
}
.mr-section-container {
border: 1px solid $border-color;
border-radius: $border-radius-default;
border-top: 0;
}
.mr-widget-body,
.mr-widget-content,
.mr-widget-footer {
padding: $gl-padding;
}
.mr-widget-info {
padding-left: $gl-padding-50 - $gl-padding-32;
padding-right: $gl-padding;
}
.mr-state-widget {
color: $gl-text-color;
.commit-message-edit {
border-radius: $border-radius-default;
}
.mr-widget-section,
.mr-widget-footer {
border-top: solid 1px $border-color;
}
.mr-fast-forward-message {
padding-left: $gl-padding-50;
padding-bottom: $gl-padding;
}
.commits-list {
> li {
padding: $gl-padding;
@include media-breakpoint-up(md) {
padding-left: $gl-padding-8 * 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;
&[disabled] {
opacity: 0.3;
}
&.dropdown-toggle {
.fa {
color: inherit;
}
}
}
.accept-merge-holder {
.accept-action {
display: inline-block;
float: left;
.accept-merge-request {
&.ci-preparing,
&.ci-pending,
&.ci-running {
@include btn-blue;
}
&.ci-skipped,
&.ci-failed,
&.ci-canceled,
&.ci-error {
@include btn-red;
}
}
}
}
.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;
}
.ci-status-icon svg {
margin: 3px 0;
position: relative;
overflow: visible;
display: block;
}
.mr-widget-pipeline-graph {
.dropdown-menu {
z-index: 300;
}
}
.mini-pipeline-graph-dropdown-toggle {
vertical-align: top;
}
.normal {
flex: 1;
flex-basis: auto;
}
.capitalize {
text-transform: capitalize;
}
.label-branch {
@extend .ref-name;
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: -3px;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 14px;
overflow: hidden;
}
}
}
.widget-status-icon {
align-self: flex-start;
button {
margin-left: $gl-padding;
}
}
.mr-widget-body {
line-height: 28px;
@include clearfix;
button {
margin-left: $gl-padding;
}
.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;
&.has-conflicts .fa-exclamation-triangle {
color: $orange-500;
}
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 {
font-weight: $gl-font-weight-bold;
color: $gl-gray-light;
margin-left: 10px;
}
.state-label {
font-weight: $gl-font-weight-bold;
padding-right: 10px;
}
.danger {
color: $red-500;
}
.spacing,
.bold {
vertical-align: middle;
}
.dropdown-menu {
li a {
padding: 5px;
}
.merge-opt-icon {
line-height: 1.5;
}
.merge-opt-title {
margin-left: 8px;
}
}
.dropdown-toggle {
.fa {
margin-left: 0;
color: inherit;
}
}
.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 {
span {
font-weight: $gl-font-weight-bold;
}
p {
margin-top: $gl-padding;
}
}
}
}
.mr-widget-help {
padding: 10px 16px 10px ($gl-padding-8 * 7);
font-style: italic;
}
.ci-coverage {
float: right;
}
.stop-env-container {
color: $gl-text-color;
float: right;
a {
color: $gl-text-color;
}
}
}
.mr_source_commit,
.mr_target_commit {
margin-bottom: 0;
.commit {
margin: 0;
padding: 10px;
list-style: none;
&:hover {
background: none;
}
}
}
.commits-empty {
text-align: center;
h4 {
padding-top: 20px;
padding-bottom: 10px;
}
svg {
width: 230px;
}
}
.nothing-here-block {
img {
width: 230px;
}
}
.mr-list {
.merge-request {
padding: 10px 0 10px 15px;
position: relative;
display: flex;
.issuable-info-container {
flex: 1;
}
.issuable-meta {
.author-link {
display: inline-block;
}
.issuable-comments {
height: 18px;
}
}
.merge-request-title {
margin-bottom: 2px;
.ci-status-link {
svg {
height: 16px;
width: 16px;
position: relative;
top: 3px;
}
&:hover,
&:focus {
text-decoration: none;
}
}
}
}
.merge-request-labels {
display: inline-block;
}
}
.merge-request-angle {
text-align: center;
margin: 0 auto;
font-size: 2em;
line-height: 1.1;
}
// hide mr close link for inline diff comment form
.diff-file .close-mr-link,
.diff-file .reopen-mr-link {
display: none;
}
#modal_merge_info .modal-dialog {
.dark {
margin-right: 40px;
}
.btn-clipboard {
margin-right: 20px;
margin-top: 5px;
position: absolute;
right: 0;
}
}
.mr-links {
padding-left: $status-icon-size + $gl-btn-padding;
&:last-child {
padding-bottom: $gl-padding;
}
}
.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 {
display: flex;
flex-wrap: wrap;
border-radius: $border-radius-default;
padding: $gl-padding;
border: 1px solid $border-color;
min-height: 69px;
@include media-breakpoint-up(md) {
align-items: center;
}
.dropdown-toggle .fa {
color: $gl-text-color;
}
.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;
font-weight: $gl-font-weight-bold;
line-height: 25px;
}
.card-body {
padding: 10px 5px;
}
.card-footer {
padding: 0;
.btn {
min-width: auto;
}
}
.commit {
.commit-row-title {
margin-bottom: 4px;
}
.item-title {
@include media-breakpoint-up(sm) {
width: 45%;
}
}
.avatar {
left: 0;
top: 2px;
}
}
.btn-clipboard {
margin-right: 5px;
padding: 0;
background: transparent;
}
.ci-status-link {
margin-right: 5px;
}
}
.merge-request-select {
padding-left: 5px;
padding-right: 5px;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
@include media-breakpoint-up(xs) {
float: left;
width: 50%;
margin-bottom: 0;
}
.dropdown-menu-toggle {
width: 100%;
}
.dropdown-menu {
left: 5px;
right: 5px;
width: auto;
}
}
.issuable-form-select-holder {
display: inline-block;
width: 250px;
.dropdown-menu-toggle {
width: 100%;
}
}
.target-branch-select-dropdown-container {
position: relative;
}
.assign-to-me-link {
padding-left: 12px;
white-space: nowrap;
}
.table-holder {
.ci-table {
th {
background-color: $white-light;
color: $gl-text-color-secondary;
}
}
}
.merged-buttons {
.btn {
float: left;
}
}
.mr-version-controls {
position: relative;
z-index: 203;
background: $gray-light;
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;
.dropdown-menu-toggle {
width: auto;
max-width: 170px;
svg {
top: 10px;
right: 8px;
}
}
}
.content-block {
padding: $gl-padding-top $gl-padding;
border-bottom: 0;
}
.comments-disabled-notif {
line-height: 28px;
.btn {
margin-left: 5px;
}
}
.mr-version-dropdown,
.mr-version-compare-dropdown {
margin: 0 7px;
}
.dropdown-title {
color: $gl-text-color;
}
.fa-info-circle {
color: $orange-500;
padding-right: 5px;
}
// Shortening button height by 1px to make compare-versions
// header 56px and fit into our 8px design grid
button {
height: 34px;
}
@include media-breakpoint-up(md) {
position: -webkit-sticky;
position: sticky;
top: $header-height + $mr-tabs-height;
margin-left: -16px;
width: calc(100% + 32px);
.mr-version-menus-container {
flex-wrap: nowrap;
}
.with-performance-bar & {
top: $header-height + $performance-bar-height + $mr-tabs-height;
}
}
}
.merge-request-tabs-holder,
.epic-tabs-holder {
top: $header-height;
z-index: 250;
background-color: $white-light;
border-bottom: 1px solid $border-color;
@include media-breakpoint-up(sm) {
position: -webkit-sticky;
position: sticky;
}
&.affix {
left: 0;
transition: right 0.15s;
@include media-breakpoint-down(xs) {
right: 0;
}
}
.nav-links {
border: 0;
}
}
.merge-request-tabs-holder.affix .merge-request-tabs-container,
.epic-tabs-holder.affix .epic-tabs-container {
padding-left: $gl-padding;
padding-right: $gl-padding;
}
.with-performance-bar {
.merge-request-tabs-holder,
.epic-tabs-holder {
top: $header-height + $performance-bar-height;
}
}
.merge-request-tabs,
.epic-tabs {
display: flex;
flex-wrap: nowrap;
margin-bottom: 0;
padding: 0;
}
.limit-container-width {
.merge-request-tabs-container,
.epic-tabs-container {
max-width: $limited-layout-width;
margin-left: auto;
margin-right: auto;
.inner-page-scroll-tabs {
background-color: $white-light;
margin-left: -$gl-padding;
padding-left: $gl-padding;
}
}
}
.merge-request-tabs-container,
.epic-tabs-container {
display: flex;
justify-content: space-between;
@include media-breakpoint-down(xs) {
.discussion-filter-container,
.line-resolve-all-container {
margin-bottom: $gl-padding-4;
}
}
.discussion-filter-container {
&:not(:only-child) {
margin: $gl-padding-4;
}
}
.merge-request-tabs {
height: $grid-size * 6;
}
}
// Wrap MR tabs/buttons so you don't have to scroll on desktop
@include media-breakpoint-down(md) {
.merge-request-tabs-container,
.epic-tabs-container {
flex-direction: column-reverse;
padding-top: $gl-padding-8;
}
}
@include media-breakpoint-down(lg) {
.right-sidebar-expanded {
.merge-request-tabs-container,
.epic-tabs-container {
flex-direction: column-reverse;
align-items: flex-start;
padding-top: $gl-padding-8;
}
}
}
.limit-container-width:not(.container-limited) {
.merge-request-tabs-holder:not(.affix) .merge-request-tabs-container,
.epic-tabs-holder:not(.affix) .epic-tabs-container {
max-width: $limited-layout-width - ($gl-padding * 2);
}
}
.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-info {
@include media-breakpoint-up(md) {
padding: $gl-padding-8 $gl-padding;
}
.media-body {
min-width: 0;
font-size: 12px;
margin-left: 40px;
}
&: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;
overflow: hidden;
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
// The css in here is the boostrap one
.btn-link-retry {
&[disabled] {
cursor: not-allowed;
box-shadow: none;
opacity: 0.65;
&:hover {
color: $gl-gray-500;
text-decoration: none;
}
}
}
.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-700;
line-height: initial;
}
.mini-pipeline-graph-dropdown-toggle,
.stage-cell .mini-pipeline-graph-dropdown-toggle svg {
height: $ci-action-icon-size-lg;
width: $ci-action-icon-size-lg;
}
}
.merge-request-details .file-finder-overlay.diff-file-finder {
position: fixed;
z-index: 99999;
background: $black-transparent;
}
.mr-compare {
.diff-file .file-title-flex-parent {
top: $header-height + 51px;
.with-performance-bar & {
top: $performance-bar-height + $header-height + 51px;
}
}
}