diff options
Diffstat (limited to 'app/assets/stylesheets/framework')
20 files changed, 310 insertions, 134 deletions
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss index af79a4d9392..37a729c7a63 100644 --- a/app/assets/stylesheets/framework/avatar.scss +++ b/app/assets/stylesheets/framework/avatar.scss @@ -61,6 +61,10 @@ border: 0; } + &.avatar-placeholder { + border: 0; + } + &:not([href]):hover { border-color: darken($gray-normal, 10%); } diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss index 91dbb2a6365..cbd390e7145 100644 --- a/app/assets/stylesheets/framework/blank.scss +++ b/app/assets/stylesheets/framework/blank.scss @@ -69,6 +69,7 @@ @include media-breakpoint-up(sm) { display: flex; + height: 100%; align-items: center; padding: 50px 30px; } @@ -99,3 +100,30 @@ } } } + +@include media-breakpoint-up(lg) { + .column-large { + flex: 2; + } + + .column-small { + flex: 1; + margin-bottom: 15px; + + .blank-state { + max-width: 400px; + flex-wrap: wrap; + margin-left: 15px; + } + + .blank-state-icon { + margin-bottom: 30px; + } + } +} + +@include media-breakpoint-down(xs) { + .blank-state-icon svg { + width: 315px; + } +} diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index a4af84f8d27..695ce014659 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -443,7 +443,8 @@ border-color: transparent; } - &.btn-secondary-hover-link { + &.btn-secondary-hover-link, + &.btn-default-hover-link { color: $gl-text-color-secondary; &:hover, diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index d47931a49e4..d72597a6147 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -120,7 +120,7 @@ hr { text-overflow: ellipsis; white-space: nowrap; - > div, + > div:not(.block), .str-truncated { display: inline; } @@ -381,6 +381,7 @@ img.emoji { .prepend-left-5 { margin-left: 5px; } .prepend-left-8 { margin-left: 8px; } .prepend-left-10 { margin-left: 10px; } +.prepend-left-15 { margin-left: 15px; } .prepend-left-default { margin-left: $gl-padding; } .prepend-left-20 { margin-left: 20px; } .prepend-left-32 { margin-left: 32px; } @@ -388,6 +389,7 @@ img.emoji { .append-right-5 { margin-right: 5px; } .append-right-8 { margin-right: 8px; } .append-right-10 { margin-right: 10px; } +.append-right-15 { margin-right: 15px; } .append-right-default { margin-right: $gl-padding; } .append-right-20 { margin-right: 20px; } .prepend-right-32 { margin-right: 32px; } @@ -402,6 +404,8 @@ img.emoji { .prepend-bottom-32 { margin-bottom: 32px; } .inline { display: inline-block; } .center { text-align: center; } +.block { display: block; } +.flex { display: flex; } .vertical-align-middle { vertical-align: middle; } .vertical-align-sub { vertical-align: sub; } .flex-align-self-center { align-self: center; } @@ -458,10 +462,10 @@ img.emoji { } /** COMMON POSITIONING CLASSES */ -.position-bottom-0 { bottom: 0; } -.position-left-0 { left: 0; } -.position-right-0 { right: 0; } -.position-top-0 { top: 0; } +.position-bottom-0 { bottom: 0 !important; } +.position-left-0 { left: 0 !important; } +.position-right-0 { right: 0 !important; } +.position-top-0 { top: 0 !important; } .drag-handle { width: 4px; diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index 6108eaa1ad0..8d38310e8e6 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -25,10 +25,6 @@ } } - table { - @extend .table; - } - .file-title { position: relative; background-color: $gray-light; @@ -123,7 +119,7 @@ } } - &.wiki { + &.md { padding: $gl-padding; @include media-breakpoint-up(md) { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index f5ed6621c55..1e025b3a67d 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -304,7 +304,9 @@ } } -.caret-down { +.caret-down, +.btn .caret-down { + top: 0; height: 11px; width: 11px; margin-left: 4px; diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index 49b9b7014ae..3ab61cc5c47 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -31,6 +31,7 @@ } } +.ci-status-icon-preparing, .ci-status-icon-running { svg { fill: $blue-400; diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index 1a74e06a75d..298610a0631 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -156,6 +156,12 @@ ul.content-list { margin-top: 3px; margin-bottom: 4px; + &.btn-ldap-override { + @include media-breakpoint-up(sm) { + margin-bottom: 0; + } + } + &.has-tooltip, &:last-child { margin-right: 0; diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index d6c4e68f68f..7c10de828cd 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -50,10 +50,6 @@ transition: opacity 200ms ease-in-out; } -.md-area { - position: relative; -} - .md-header { .nav-links { a { @@ -61,6 +57,10 @@ padding-top: 0; line-height: 19px; + &.btn.btn-sm { + padding: 2px 5px; + } + &:focus { margin-top: -10px; padding-top: 10px; @@ -131,30 +131,6 @@ width: 100%; } -.md:not(.use-csslab) { - &.md-preview-holder { - // Reset ul style types since we're nested inside a ul already - @include bulleted-list; - } - - // On diffs code should wrap nicely and not overflow - code { - white-space: pre-wrap; - word-break: keep-all; - } - - hr { - // Darken 'whitesmoke' a bit to make it more visible in note bodies - border-color: darken($gray-normal, 8%); - margin: 10px 0; - } - - - table:not(.js-syntax-highlight) { - @include markdown-table; - } -} - .toolbar-btn { float: left; padding: 0 7px; diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 955ae80cd58..18eb10c1f23 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -22,27 +22,6 @@ } /* - * Mixin for markdown tables - */ -@mixin markdown-table { - width: auto; - display: block; - overflow-x: auto; - border: 0; - border-color: $gl-gray-100; - - tr { - th { - border-bottom: solid 2px $gl-gray-100; - } - - td { - border-color: $gl-gray-100; - } - } -} - -/* * Base mixin for lists in GitLab */ @mixin basic-list { @@ -94,20 +73,6 @@ } } -@mixin bulleted-list { - > ul { - list-style-type: disc; - - ul { - list-style-type: circle; - - ul { - list-style-type: square; - } - } - } -} - @mixin webkit-prefix($property, $value) { #{'-webkit-' + $property}: $value; #{$property}: $value; diff --git a/app/assets/stylesheets/framework/panels.scss b/app/assets/stylesheets/framework/panels.scss index 3a117106cff..cd3d6f8297e 100644 --- a/app/assets/stylesheets/framework/panels.scss +++ b/app/assets/stylesheets/framework/panels.scss @@ -7,7 +7,6 @@ margin-bottom: $gl-vert-padding; } - .card-header { padding: $gl-vert-padding $gl-padding; line-height: 36px; diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 19640ab5986..31297b9d20c 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -181,6 +181,33 @@ margin: 0; width: 100%; } + + &.inline { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + + > .btn, + > .btn-container, + > .dropdown, + > input, + > form { + flex: 1 1 auto; + margin: 0 0 10px; + margin-left: $gl-padding-top; + width: auto; + + &:first-child { + margin-left: 0; + float: none; + } + } + + .btn-full { + flex: 1 1 100%; + margin-left: 0; + } + } } } diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index ac673eafdc7..81ccea1e01f 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -264,6 +264,16 @@ } } +.project-result { + .project-name { + font-weight: $gl-font-weight-bold; + } + + .project-path { + color: $gl-gray-400; + } +} + .user-result { min-height: 24px; display: flex; diff --git a/app/assets/stylesheets/framework/sortable.scss b/app/assets/stylesheets/framework/sortable.scss new file mode 100644 index 00000000000..8c070200135 --- /dev/null +++ b/app/assets/stylesheets/framework/sortable.scss @@ -0,0 +1,92 @@ +.sortable-container { + background-color: $gray-light; + + .flex-list { + padding: 5px; + margin-bottom: 0; + } +} + +.sortable-row { + .flex-row { + display: flex; + + &.issuable-info-container { + padding-right: 0; + } + } + + .sortable-link { + color: $black; + } +} + +.gl-sortable { + .header { + user-select: none; + + &:hover { + cursor: pointer; + background-color: $gray-100; + } + + &:focus { + outline: 1px solid $blue-300; + } + } +} + +.related-issues-list-item { + .card-body, + .issuable-info-container { + padding: $gl-padding-4 $gl-padding-4 $gl-padding-4 $gl-padding; + + .block-truncated { + padding: $gl-padding-8 0; + line-height: $gl-btn-line-height; + } + + @include media-breakpoint-down(md) { + padding-left: $gl-padding; + + .block-truncated { + flex-direction: column-reverse; + padding: $gl-padding-4 0; + + .text-secondary { + margin-top: $gl-padding-4; + } + + .issue-token-title-text { + display: block; + } + } + + .issue-item-remove-button { + align-self: baseline; + } + } + + @include media-breakpoint-only(md) { + .block-truncated .issue-token-title-text { + white-space: nowrap; + } + + .issue-item-remove-button { + align-self: center; + } + } + + @include media-breakpoint-down(sm) { + padding-left: $gl-padding-8; + + .block-truncated .issue-token-title-text { + white-space: normal; + } + } + } + + &.is-dragging { + padding: 0; + } +} diff --git a/app/assets/stylesheets/framework/system_messages.scss b/app/assets/stylesheets/framework/system_messages.scss index 3d66136938f..e5edddec71e 100644 --- a/app/assets/stylesheets/framework/system_messages.scss +++ b/app/assets/stylesheets/framework/system_messages.scss @@ -12,7 +12,7 @@ p { @include str-truncated(100%); - margin-top: 0; + margin-top: -1px; margin-bottom: 0; } } diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 55ce0d7004e..244b414d334 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -1,4 +1,8 @@ -@mixin md-typography { +/** + * Apply Markdown typography + * + */ +.md:not(.use-csslab) { color: $gl-text-color; word-wrap: break-word; @@ -6,8 +10,35 @@ text-align: initial; } + *:first-child { + margin-top: 0; + } + + > :last-child { + margin-bottom: 0; + } + + p { + color: $gl-text-color; + margin: 0 0 16px; + + > code { + font-weight: inherit; + } + + a:not(.no-attachment-icon) img { + // Remove bottom padding because + // <p> already has $gl-padding bottom + margin-bottom: 0; + } + } + a { color: $blue-600; + + > code { + color: $blue-600; + } } img:not(.emoji) { @@ -28,18 +59,12 @@ max-width: 100%; } - p a:not(.no-attachment-icon) img { - // Remove bottom padding because - // <p> already has $gl-padding bottom - margin-bottom: 0; - } - - *:first-child { - margin-top: 0; - } - - > :last-child { - margin-bottom: 0; + &:not(.md-file) img:not(.emoji) { + border: 1px solid $white-normal; + padding: 5px; + margin: 5px 0; + // Ensure that image does not exceed viewport + max-height: calc(100vh - 100px); } // Single code lines should wrap @@ -47,6 +72,7 @@ font-family: $monospace-font; white-space: pre-wrap; word-wrap: normal; + word-break: keep-all; } kbd { @@ -131,20 +157,34 @@ } } - p { - color: $gl-text-color; - margin: 0 0 16px; + hr { + // Darken 'whitesmoke' a bit to make it more visible in note bodies + border-color: darken($gray-normal, 8%); + margin: 10px 0; } - table:not(.js-syntax-highlight) { + table:not(.code) { @extend .table; @extend .table-bordered; margin: 16px 0; color: $gl-text-color; border: 0; + width: auto; + display: block; + overflow-x: auto; - th { - background: $label-gray-bg; + tbody { + background-color: $white-light; + } + + tr { + th { + border-bottom: solid 2px $gl-gray-200; + } + + td { + border-color: $gl-gray-200; + } } } @@ -173,14 +213,6 @@ } } - p > code { - font-weight: inherit; - } - - a > code { - color: $blue-600; - } - dd { margin-left: $gl-padding; } @@ -196,6 +228,18 @@ margin: 3px 28px 3px 0 !important; } + > ul { + list-style-type: disc; + + ul { + list-style-type: circle; + + ul { + list-style-type: square; + } + } + } + li { line-height: 1.6em; margin-left: 25px; @@ -239,11 +283,11 @@ &:hover::before { text-decoration: none; } - } - a.no-attachment-icon { - &::before { - display: none; + &.no-attachment-icon { + &::before { + display: none; + } } } @@ -362,28 +406,6 @@ code { } /** - * Apply Markdown typography - * - */ -.wiki:not(.use-csslab) { - @include md-typography; -} - -.md:not(.use-csslab) { - @include md-typography; - - &:not(.wiki) { - img:not(.emoji) { - border: 1px solid $white-normal; - padding: 5px; - margin: 5px 0; - // Ensure that image does not exceed viewport - max-height: calc(100vh - 100px); - } - } -} - -/** * Textareas intended for GFM * */ diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 0333b9445c5..5d4c84c494d 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -23,6 +23,7 @@ $darken-border-dashed-factor: 25%; $white-light: #fff; $white-normal: #f0f0f0; $white-dark: #eaeaea; +$white-transparent: rgba(255, 255, 255, 0.8); $gray-lightest: #fdfdfd; $gray-light: #fafafa; @@ -277,7 +278,7 @@ $general-hover-transition-duration: 100ms; $general-hover-transition-curve: linear; $highlight-changes-color: rgb(235, 255, 232); $performance-bar-height: 35px; -$system-header-height: 35px; +$system-header-height: 16px; $system-footer-height: $system-header-height; $flash-height: 52px; $context-header-height: 60px; @@ -288,6 +289,10 @@ $gl-line-height: 16px; $gl-line-height-24: 24px; $gl-line-height-14: 14px; +$system-header-height: 35px; +$issue-box-upcoming-bg: #8f8f8f; +$pages-group-name-color: #4c4e54; + /* * Common component specific colors */ @@ -410,7 +415,7 @@ $award-emoji-menu-shadow: rgba(0, 0, 0, 0.175); $award-emoji-positive-add-bg: #fed159; $award-emoji-positive-add-lines: #bb9c13; $award-emoji-width: 376px; -$award-emoji-width-xs: 300px; +$award-emoji-width-xs: 90%; /* * Search Box @@ -626,6 +631,18 @@ Animation Functions $dropdown-animation-timing: cubic-bezier(0.23, 1, 0.32, 1); /* +GitLab Plans +*/ +$gl-gold-plan: #d4af37; +$gl-silver-plan: #91a1ab; +$gl-bronze-plan: #cd7f32; + +/* +Cross-project Pipelines + */ +$linked-project-column-margin: 60px; + +/* Performance Bar */ $perf-bar-production: #222; @@ -649,6 +666,17 @@ $image-comment-cursor-left-offset: 12; $image-comment-cursor-top-offset: 12; /* +Add GitLab Slack Application +*/ +$add-to-slack-popup-max-width: 400px; +$add-to-slack-gif-max-width: 850px; +$add-to-slack-well-max-width: 750px; +$add-to-slack-logo-size: 100px; +$double-headed-arrow-width: 100px; +$double-headed-arrow-height: 25px; +$right-arrow-size: 16px; + +/* Popup */ $popup-triangle-size: 15px; @@ -683,3 +711,11 @@ $mr-version-controls-height: 56px; Compare Branches */ $compare-branches-sticky-header-height: 68px; + +/** + Bootstrap 4.2.0 introduced new icons for validating forms. + Our design system does not use those, so we are disabling them for now: + - Docs: https://getbootstrap.com/docs/4.3/components/forms/#server-side + - Issue: https://gitlab.com/gitlab-org/design.gitlab.com/issues/242 + */ +$enable-validation-icons: false; diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss index efcc437bd7f..fb4d3f23cd9 100644 --- a/app/assets/stylesheets/framework/variables_overrides.scss +++ b/app/assets/stylesheets/framework/variables_overrides.scss @@ -9,7 +9,6 @@ $input-border-color: $gray-200; $input-color: $gl-text-color; $font-family-sans-serif: $regular-font; $font-family-monospace: $monospace-font; -$input-line-height: 20px; $btn-line-height: 20px; $table-accent-bg: $gray-light; $card-border-color: $border-color; diff --git a/app/assets/stylesheets/framework/vue_transitions.scss b/app/assets/stylesheets/framework/vue_transitions.scss index e07a177e153..e3bdc0b0199 100644 --- a/app/assets/stylesheets/framework/vue_transitions.scss +++ b/app/assets/stylesheets/framework/vue_transitions.scss @@ -1,9 +1,13 @@ .fade-enter-active, -.fade-leave-active { +.fade-leave-active, +.fade-in-enter-active, +.fade-out-leave-active { transition: opacity $sidebar-transition-duration $general-hover-transition-curve; } .fade-enter, +.fade-in-enter, +.fade-out-leave-to, .fade-leave-to { opacity: 0; } diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index 161943766d4..434cbd6d21c 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -12,6 +12,10 @@ border-bottom: 1px solid $well-inner-border; } + &.borderless { + border-bottom: 0; + } + &.branch-info { .commit-sha, .commit-info { |