summaryrefslogtreecommitdiff
path: root/app/assets/stylesheets
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r--app/assets/stylesheets/bootstrap_migration.scss5
-rw-r--r--app/assets/stylesheets/components/popover.scss95
-rw-r--r--app/assets/stylesheets/framework/common.scss1
-rw-r--r--app/assets/stylesheets/framework/feature_highlight.scss7
-rw-r--r--app/assets/stylesheets/framework/forms.scss16
-rw-r--r--app/assets/stylesheets/framework/highlight.scss6
-rw-r--r--app/assets/stylesheets/framework/markdown_area.scss2
-rw-r--r--app/assets/stylesheets/framework/variables.scss8
-rw-r--r--app/assets/stylesheets/page_bundles/ide.scss15
-rw-r--r--app/assets/stylesheets/pages/detail_page.scss1
-rw-r--r--app/assets/stylesheets/pages/diff.scss14
-rw-r--r--app/assets/stylesheets/pages/merge_requests.scss3
-rw-r--r--app/assets/stylesheets/pages/milestone.scss21
-rw-r--r--app/assets/stylesheets/pages/prometheus.scss1
14 files changed, 131 insertions, 64 deletions
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index 7f6384f4eea..802d58779d0 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -147,11 +147,6 @@ table {
pointer-events: none;
}
-.popover,
-.popover-header {
- font-size: 14px;
-}
-
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
diff --git a/app/assets/stylesheets/components/popover.scss b/app/assets/stylesheets/components/popover.scss
index 774be9ef588..58aaca93160 100644
--- a/app/assets/stylesheets/components/popover.scss
+++ b/app/assets/stylesheets/components/popover.scss
@@ -1,37 +1,98 @@
.popover {
- min-width: 300px;
-
- .popover-body .user-popover {
- padding: $gl-padding-8;
- font-size: $gl-font-size-small;
- line-height: $gl-line-height;
-
- .category-icon {
- color: $gray-600;
- }
- }
+ max-width: $popover-max-width;
+ border: 1px solid $gray-200;
+ box-shadow: 0 2px 3px 1px $gray-200;
+ font-size: $gl-font-size-small;
+ /**
+ * Blue popover variation
+ */
&.blue {
background-color: $blue-600;
+ border-color: $blue-600;
.popover-body {
color: $white-light;
}
&.bs-popover-bottom {
+ .arrow::before,
.arrow::after {
border-bottom-color: $blue-600;
}
}
&.bs-popover-top {
+ .arrow::before,
.arrow::after {
border-top-color: $blue-600;
}
}
+
+ &.bs-popover-right {
+ .arrow::after,
+ .arrow::before {
+ border-right-color: $blue-600;
+ }
+ }
+
+ &.bs-popover-left {
+ .arrow::before,
+ .arrow::after {
+ border-left-color: $blue-600;
+ }
+ }
+ }
+}
+
+.bs-popover-top {
+ /* When popover position is top, the arrow is translated 1 pixel
+ * due to the box-shadow include in our custom styles.
+ */
+ > .arrow::before {
+ border-top-color: $gray-200;
+ bottom: 1px;
+ }
+
+ > .arrow::after {
+ bottom: 2px;
+ }
+}
+
+.bs-popover-bottom {
+ > .arrow::before {
+ border-bottom-color: $gray-200;
+ }
+
+ > .popover-header::before {
+ border-color: $white-light;
+ }
+}
+
+.bs-popover-right > .arrow::before {
+ border-right-color: $gray-200;
+}
+
+.bs-popover-left > .arrow::before {
+ border-left-color: $gray-200;
+}
+
+.popover-header {
+ background-color: $white-light;
+ font-size: $gl-font-size-small;
+}
+
+.popover-body {
+ padding: $gl-padding $gl-padding-12;
+
+ > .popover-hr {
+ margin: $gl-padding 0;
}
}
+/**
+* mr_popover component
+*/
.mr-popover {
.text-secondary {
font-size: 12px;
@@ -58,6 +119,18 @@
}
}
+/**
+* user_popover component
+*/
+.user-popover {
+ padding: $gl-padding-8;
+ line-height: $gl-line-height;
+
+ .category-icon {
+ color: $gray-600;
+ }
+}
+
.onboarding-welcome-page {
.popover {
min-width: auto;
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index db09118ba15..1bd5043ed10 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -416,6 +416,7 @@ img.emoji {
.center { text-align: center; }
.block { display: block; }
.flex { display: flex; }
+.vertical-align-top { vertical-align: top; }
.vertical-align-middle { vertical-align: middle; }
.vertical-align-sub { vertical-align: sub; }
.flex-align-self-center { align-self: center; }
diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss
index 85cabf43e9e..f9b167669a6 100644
--- a/app/assets/stylesheets/framework/feature_highlight.scss
+++ b/app/assets/stylesheets/framework/feature_highlight.scss
@@ -39,7 +39,7 @@
display: none;
hr {
- margin: $gl-padding * 0.5 0;
+ margin: $gl-padding 0;
}
.btn-link {
@@ -71,9 +71,6 @@
.feature-highlight-popover {
width: 240px;
- padding: 0;
- border: 1px solid $border-color;
- box-shadow: 0 2px 4px $dropdown-shadow-color;
&.right > .arrow {
border-right-color: $border-color;
@@ -85,7 +82,7 @@
}
.feature-highlight-popover-sub-content {
- padding: 9px 14px;
+ padding: $gl-padding $gl-padding-12;
}
@include keyframes(pulse-highlight) {
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 2a601afff53..821e6691fe4 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -248,14 +248,24 @@ label {
.gl-form-checkbox {
align-items: baseline;
+ margin-right: 1rem;
+ margin-bottom: 0.25rem;
+
+ .form-check-input {
+ margin-right: 0;
+ }
+
+ .form-check-label {
+ padding-left: $gl-padding-8;
+ }
&.form-check-inline .form-check-input {
align-self: flex-start;
- margin-right: $gl-padding-8;
height: 1.5 * $gl-font-size;
}
- .help-text {
- margin-bottom: 0;
+ .form-check-input:disabled,
+ .form-check-input:disabled ~ .form-check-label {
+ cursor: not-allowed;
}
}
diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
index 741f92110c3..983bd032da4 100644
--- a/app/assets/stylesheets/framework/highlight.scss
+++ b/app/assets/stylesheets/framework/highlight.scss
@@ -11,7 +11,7 @@
border-radius: 0 0 $border-radius-default $border-radius-default;
font-family: $monospace-font;
font-size: $code-font-size;
- line-height: 19px;
+ line-height: 1.5;
margin: 0;
overflow: auto;
overflow-y: hidden;
@@ -30,7 +30,7 @@
.line {
display: block;
width: 100%;
- min-height: 19px;
+ min-height: 1.5em;
padding-left: 10px;
padding-right: 10px;
white-space: pre;
@@ -48,7 +48,7 @@
font-family: $monospace-font;
display: block;
font-size: $code-font-size !important;
- min-height: 19px;
+ min-height: 1.5em;
white-space: nowrap;
i {
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index bfd96a4bc05..0bf911eec0a 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -154,11 +154,9 @@
}
.toolbar-fullscreen-btn {
- margin-left: $gl-padding;
margin-right: -5px;
@include media-breakpoint-down(xs) {
- margin-left: 0;
margin-right: 0;
}
}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index dc451a97e17..b6a24247d40 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -336,6 +336,7 @@ $tooltip-font-size: 12px;
*/
$gl-padding-4: 4px;
$gl-padding-8: 8px;
+$gl-padding-12: 12px;
$gl-padding: 16px;
$gl-padding-24: 24px;
$gl-padding-32: 32px;
@@ -810,6 +811,11 @@ $modal-border-color: #e9ecef;
$priority-label-empty-state-width: 114px;
/*
+Popovers
+*/
+$popover-max-width: 384px;
+
+/*
Issues Analytics
*/
$issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15);
@@ -817,7 +823,7 @@ $issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15);
/*
Merge Requests
*/
-$mr-tabs-height: 51px;
+$mr-tabs-height: 48px;
$mr-version-controls-height: 56px;
/*
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index f08fa80495d..cbcd8a474f1 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -396,10 +396,6 @@ $ide-commit-header-height: 48px;
font-size: inherit;
}
- > div + div {
- padding-left: $gl-padding;
- }
-
svg {
vertical-align: sub;
}
@@ -410,13 +406,14 @@ $ide-commit-header-height: 48px;
}
}
+.ide-status-list {
+ > div + div {
+ padding-left: $gl-padding;
+ }
+}
+
.ide-status-file {
text-align: right;
-
- .ide-status-branch + &,
- &:first-child {
- margin-left: auto;
- }
}
// Not great, but this is to deal with our current output
.multi-file-preview-holder {
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index c386493231c..62fc7311d94 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -9,7 +9,6 @@
color: $gl-text-color;
}
- .issue_created_ago,
.author-link {
white-space: nowrap;
}
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 4ebf1019456..d2d35d91e0b 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -14,7 +14,7 @@
position: -webkit-sticky;
position: sticky;
top: $mr-file-header-top;
- z-index: 102;
+ z-index: 220;
&::before {
content: '';
@@ -1122,3 +1122,15 @@ table.code {
outline: 0;
}
}
+
+.diff-suggest-popover {
+ &.popover {
+ width: 250px;
+ min-width: 250px;
+ z-index: 210;
+ }
+
+ .popover-header {
+ display: none;
+ }
+}
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 8cb3fab74e0..3917937f4af 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -904,7 +904,8 @@
margin-right: -5px;
}
-.deploy-heading {
+.deploy-heading,
+.merge-train-info {
@include media-breakpoint-up(md) {
padding: $gl-padding-8 $gl-padding;
}
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index 49608a3964f..00d84df1650 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -230,27 +230,6 @@ $status-box-line-height: 26px;
background-color: $white-light;
}
-.milestone-deprecation-message {
- .popover {
- padding: 0;
- }
-
- .popover-body,
- .popover-content {
- padding: 0;
- }
-}
-
-.milestone-popover-body {
- padding: $gl-padding-8;
- background-color: $gray-light;
-}
-
-.milestone-popover-footer {
- padding: $gl-padding-8 $gl-padding;
- border-top: 1px solid $white-dark;
-}
-
.milestone-popover-instructions-list {
padding-left: 2em;
diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss
index c03554b287f..2d600e3aef6 100644
--- a/app/assets/stylesheets/pages/prometheus.scss
+++ b/app/assets/stylesheets/pages/prometheus.scss
@@ -136,7 +136,6 @@
> .popover-header,
> .popover-body {
padding: 8px;
- font-size: 12px;
white-space: nowrap;
position: relative;
}
View Lorry Controller Status