Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/app/assets/stylesheets/framework
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets/framework')
-rw-r--r--app/assets/stylesheets/framework/broadcast_messages.scss7
-rw-r--r--app/assets/stylesheets/framework/buttons.scss10
-rw-r--r--app/assets/stylesheets/framework/diffs.scss40
-rw-r--r--app/assets/stylesheets/framework/files.scss13
-rw-r--r--app/assets/stylesheets/framework/filters.scss2
-rw-r--r--app/assets/stylesheets/framework/forms.scss1
-rw-r--r--app/assets/stylesheets/framework/header.scss46
-rw-r--r--app/assets/stylesheets/framework/icons.scss72
-rw-r--r--app/assets/stylesheets/framework/logo.scss101
-rw-r--r--app/assets/stylesheets/framework/secondary_navigation_elements.scss6
-rw-r--r--app/assets/stylesheets/framework/sidebar.scss60
-rw-r--r--app/assets/stylesheets/framework/tables.scss24
-rw-r--r--app/assets/stylesheets/framework/variables.scss4
-rw-r--r--app/assets/stylesheets/framework/wells.scss2
14 files changed, 215 insertions, 173 deletions
diff --git a/app/assets/stylesheets/framework/broadcast_messages.scss b/app/assets/stylesheets/framework/broadcast_messages.scss
index 58f986ec0ae..a0bfca79dc3 100644
--- a/app/assets/stylesheets/framework/broadcast_messages.scss
+++ b/app/assets/stylesheets/framework/broadcast_messages.scss
@@ -14,11 +14,14 @@
}
.broadcast-banner-message {
- text-align: center;
-
p {
margin-bottom: 0;
}
+
+ a {
+ color: inherit;
+ text-decoration: underline;
+ }
}
.broadcast-notification-message {
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 9cebd4f49a4..33522c66024 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -121,6 +121,10 @@
@include btn-color($white, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-normal, $gl-text-color);
}
+@mixin btn-purple {
+ @include btn-color($purple-700, $purple-800, $purple-800, $purple-900, $purple-900, $purple-950, $white);
+}
+
@mixin btn-with-margin {
margin-left: $btn-side-margin;
float: left;
@@ -194,6 +198,10 @@
@include btn-red;
}
+ &.btn-purple {
+ @include btn-purple;
+ }
+
&.btn-grouped {
@include btn-with-margin;
}
@@ -261,7 +269,7 @@
.btn-block {
width: 100%;
margin: 0;
- margin-bottom: 15px;
+ @include gl-mb-5;
&.btn {
padding: 6px 0;
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index f0495fdc94e..7a77256398e 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -34,7 +34,7 @@
@media (min-width: map-get($grid-breakpoints, md)) {
// The `+11` is to ensure the file header border shows when scrolled -
// the bottom of the compare-versions header and the top of the file header
- $mr-file-header-top: calc(#{$mr-version-controls-height} + #{$header-height} + #{$mr-tabs-height} + 11px);
+ $mr-file-header-top: calc(#{$header-height} + #{$mr-tabs-height});
position: -webkit-sticky;
position: sticky;
@@ -582,25 +582,6 @@ table.code {
}
}
-.diff-expansion-cell {
- flex: 1 1;
- min-width: max-content;
-}
-
-.diff-expansion-cell-middle {
- flex: 0 1 max-content;
-}
-
-@media only screen and (min-width: $breakpoint-xl) {
- .diff-expansion-cell-start {
- text-align: right;
- }
-
- .diff-expansion-cell-end {
- text-align: left;
- }
-}
-
// Merge request diff grid layout
.diff-grid {
.diff-td {
@@ -612,6 +593,10 @@ table.code {
.diff-grid-row {
display: grid;
grid-template-columns: 1fr 1fr;
+
+ &.diff-grid-row-full {
+ grid-template-columns: 1fr;
+ }
}
.diff-grid-left,
@@ -626,6 +611,14 @@ table.code {
grid-template-columns: 50px 1fr !important;
}
+ .diff-grid-2-col {
+ grid-template-columns: 100px 1fr !important;
+
+ &.parallel {
+ grid-template-columns: 50px 1fr !important;
+ }
+ }
+
&.inline-diff-view .diff-grid-3-col {
grid-template-columns: 50px 50px 1fr !important;
}
@@ -1209,3 +1202,10 @@ table.code {
position: absolute;
bottom: 100vh;
}
+
+.diff-line-expand-button {
+ &:hover,
+ &:focus {
+ @include gl-bg-gray-200;
+ }
+}
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index e378fcb6129..f322c6c8929 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -376,14 +376,12 @@ span.idiff {
a {
color: $gl-text-color;
}
+}
- @include media-breakpoint-down(md) {
- .file-actions {
- margin-top: $gl-padding-8;
-
- .btn {
- margin-bottom: $gl-padding-8;
- }
+.blob-content-holder .file-actions {
+ @include media-breakpoint-down(sm) {
+ .btn {
+ margin-bottom: $gl-padding-8;
}
}
}
@@ -452,7 +450,6 @@ span.idiff {
.note-container {
.user-avatar-link.new-comment {
position: absolute;
- margin: 40px $gl-padding 0 116px;
}
}
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 5dd71cec8d1..37b61d36911 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -49,7 +49,7 @@
margin: 0 0 10px;
}
- .dropdown-menu-toggle,
+ .dropdown-menu-toggle.dropdown-menu-toggle,
.update-issues-btn .btn {
width: 100%;
}
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 4d0d64ae723..50783433c3d 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -83,7 +83,6 @@ label {
margin-right: 0;
.form-control {
- height: 29px;
background: $white;
font-family: $monospace-font;
}
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index f44123fc2ed..f76a0cbbae8 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -10,17 +10,6 @@
right: 0;
border-radius: 0;
- .logo-text {
- line-height: initial;
-
- svg {
- width: 55px;
- height: 14px;
- margin: 0;
- fill: $white;
- }
- }
-
.close-icon {
display: none;
}
@@ -33,14 +22,6 @@
min-height: $header-height;
padding-left: 0;
- .title-container {
- display: flex;
- align-items: stretch;
- flex: 1 1 auto;
- padding-top: 0;
- overflow: visible;
- }
-
.title {
padding-right: 0;
color: currentColor;
@@ -71,10 +52,14 @@
display: flex;
align-items: center;
padding: 2px 8px;
- margin: 5px 2px 5px -8px;
+ margin: 4px 2px 4px -12px;
border-radius: $border-radius-default;
}
+ .canary-badge {
+ margin-left: -8px;
+ }
+
.project-item-select {
right: auto;
left: 0;
@@ -127,7 +112,7 @@
border-radius: 0;
min-width: 45px;
padding: 0;
- margin: $gl-padding-8 -7px $gl-padding-8 0;
+ margin: $gl-padding-8 $gl-padding-8 $gl-padding-8 0;
font-size: 14px;
text-align: center;
color: currentColor;
@@ -353,6 +338,14 @@
}
}
+ &:last-child {
+ > a {
+ font-weight: 600;
+ line-height: 16px;
+ color: $gl-text-color;
+ }
+ }
+
> a {
font-size: 12px;
color: currentColor;
@@ -390,17 +383,6 @@
margin-left: auto;
}
-.breadcrumbs-sub-title {
- margin: 0;
- font-size: 12px;
- font-weight: 600;
- line-height: 16px;
-
- a {
- color: $gl-text-color;
- }
-}
-
.btn-sign-in {
background-color: $indigo-100;
color: $indigo-900;
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index 0aeb7208c59..ca0240b6a65 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -3,6 +3,17 @@
svg {
fill: $green-500;
}
+
+ &.interactive {
+ &:hover {
+ background: $green-500;
+
+ svg {
+ --svg-status-bg: #{$green-100};
+ box-shadow: 0 0 0 1px $green-500;
+ }
+ }
+ }
}
.ci-status-icon-error,
@@ -10,6 +21,17 @@
svg {
fill: $red-500;
}
+
+ &.interactive {
+ &:hover {
+ background: $red-500;
+
+ svg {
+ --svg-status-bg: #{$red-100};
+ box-shadow: 0 0 0 1px $red-500;
+ }
+ }
+ }
}
.ci-status-icon-pending,
@@ -19,11 +41,33 @@
svg {
fill: $orange-500;
}
+
+ &.interactive {
+ &:hover {
+ background: $orange-500;
+
+ svg {
+ --svg-status-bg: #{$orange-100};
+ box-shadow: 0 0 0 1px $orange-500;
+ }
+ }
+ }
}
.ci-status-icon-running {
svg {
- fill: $blue-400;
+ fill: $blue-500;
+ }
+
+ &.interactive {
+ &:hover {
+ background: $blue-500;
+
+ svg {
+ --svg-status-bg: #{$blue-100};
+ box-shadow: 0 0 0 1px $blue-500;
+ }
+ }
}
}
@@ -32,7 +76,18 @@
.ci-status-icon-scheduled,
.ci-status-icon-manual {
svg {
- fill: $gl-text-color;
+ fill: $gray-900;
+ }
+
+ &.interactive {
+ &:hover {
+ background: $gray-900;
+
+ svg {
+ --svg-status-bg: #{$gray-100};
+ box-shadow: 0 0 0 1px $gray-900;
+ }
+ }
}
}
@@ -42,7 +97,18 @@
.ci-status-icon-skipped,
.ci-status-icon-notfound {
svg {
- fill: var(--gray-400, $gray-400);
+ fill: $gray-500;
+ }
+
+ &.interactive {
+ &:hover {
+ background: $gray-500;
+
+ svg {
+ --svg-status-bg: #{$gray-100};
+ box-shadow: 0 0 0 1px $gray-500;
+ }
+ }
}
}
diff --git a/app/assets/stylesheets/framework/logo.scss b/app/assets/stylesheets/framework/logo.scss
index c5feefb8c54..1845438eedb 100644
--- a/app/assets/stylesheets/framework/logo.scss
+++ b/app/assets/stylesheets/framework/logo.scss
@@ -9,19 +9,16 @@
}
.tanuki-logo {
- .tanuki-left-ear,
- .tanuki-right-ear,
- .tanuki-nose {
+ .tanuki {
@include tanuki-logo-colors($tanuki-red);
}
- .tanuki-left-eye,
- .tanuki-right-eye {
+ .left-cheek,
+ .right-cheek {
@include tanuki-logo-colors($tanuki-orange);
}
- .tanuki-left-cheek,
- .tanuki-right-cheek {
+ .chin {
@include tanuki-logo-colors($tanuki-yellow);
}
@@ -31,98 +28,54 @@
@include webkit-prefix(animation-iteration-count, infinite);
}
- .tanuki-left-cheek {
- @include include-keyframes(animate-tanuki-left-cheek) {
+ .tanuki {
+ @include include-keyframes(animate-tanuki-base) {
0%,
- 10%,
- 100% {
- fill: lighten($tanuki-yellow, 25%);
- }
-
- 90% {
- fill: $tanuki-yellow;
- }
- }
- }
-
- .tanuki-left-eye {
- @include include-keyframes(animate-tanuki-left-eye) {
- 10%,
- 80% {
- fill: $tanuki-orange;
- }
-
- 20%,
- 90% {
- fill: lighten($tanuki-orange, 25%);
- }
- }
- }
-
- .tanuki-left-ear {
- @include include-keyframes(animate-tanuki-left-ear) {
- 10%,
- 80% {
+ 50% {
fill: $tanuki-red;
}
- 20%,
- 90% {
+ 25% {
fill: lighten($tanuki-red, 25%);
}
}
}
- .tanuki-nose {
- @include include-keyframes(animate-tanuki-nose) {
- 20%,
- 70% {
- fill: $tanuki-red;
- }
-
- 30%,
- 80% {
- fill: lighten($tanuki-red, 25%);
- }
- }
- }
-
- .tanuki-right-eye {
- @include include-keyframes(animate-tanuki-right-eye) {
- 30%,
- 60% {
+ .right-cheek {
+ @include include-keyframes(animate-tanuki-right-cheek) {
+ 25%,
+ 75% {
fill: $tanuki-orange;
}
- 40%,
- 70% {
+ 50% {
fill: lighten($tanuki-orange, 25%);
}
}
}
- .tanuki-right-ear {
- @include include-keyframes(animate-tanuki-right-ear) {
- 30%,
- 60% {
- fill: $tanuki-red;
+ .chin {
+ @include include-keyframes(animate-tanuki-chin) {
+ 50%,
+ 100% {
+ fill: $tanuki-yellow;
}
- 40%,
- 70% {
- fill: lighten($tanuki-red, 25%);
+ 75% {
+ fill: lighten($tanuki-yellow, 25%);
}
}
}
- .tanuki-right-cheek {
- @include include-keyframes(animate-tanuki-right-cheek) {
- 40% {
- fill: $tanuki-yellow;
+ .left-cheek {
+ @include include-keyframes(animate-tanuki-left-cheek) {
+ 25%,
+ 75% {
+ fill: $tanuki-orange;
}
- 60% {
- fill: lighten($tanuki-yellow, 25%);
+ 100% {
+ fill: lighten($tanuki-orange, 25%);
}
}
}
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 8cad55f414a..549b61aedae 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -174,6 +174,10 @@
width: 100%;
}
+ .btn.dropdown-toggle-split {
+ margin-left: 1px;
+ }
+
/* This resets the width of the control so that the search button doesn't wrap */
.gl-search-box-by-click .form-control {
width: 1%;
@@ -368,7 +372,7 @@
.project-item-select-holder.btn-group {
.new-project-item-select-button {
- max-width: 44px;
+ max-width: 32px;
}
}
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index d270f802c56..dd9581c4692 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -19,13 +19,23 @@
.right-sidebar-collapsed {
padding-right: 0;
- @include media-breakpoint-up(sm) {
- &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
- padding-right: $gutter-collapsed-width;
+ &:not(.is-merge-request) {
+ @include media-breakpoint-up(sm) {
+ &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
+ padding-right: $gutter-collapsed-width;
+ }
+
+ .merge-request-tabs-holder.affix {
+ right: $gutter-collapsed-width;
+ }
}
+ }
- .merge-request-tabs-holder.affix {
- right: $gutter-collapsed-width;
+ &.is-merge-request {
+ @include media-breakpoint-up(md) {
+ .content-wrapper {
+ padding-right: $gutter-collapsed-width;
+ }
}
}
@@ -49,6 +59,18 @@
padding-right: 0;
z-index: $zindex-dropdown-menu;
+ &.right-sidebar-merge-requests {
+ width: 270px;
+
+ @include media-breakpoint-up(md) {
+ z-index: auto;
+ }
+
+ .shortcut-sidebar-dropdown-toggle {
+ margin-right: 0 !important;
+ }
+ }
+
@include media-breakpoint-only(sm) {
&:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
padding-right: $gutter-collapsed-width;
@@ -71,12 +93,20 @@
}
.right-sidebar {
- border-left: 1px solid $border-color;
+ border-left: 1px solid $gray-100;
- .sidebar-container,
- .issuable-sidebar {
- // Add 100px so that potentially visible vertical scroll bar is hidden
- width: calc(100% + 100px);
+ &.right-sidebar-merge-requests {
+ @include media-breakpoint-up(md) {
+ border-left: 0;
+ }
+ }
+
+ &:not(.right-sidebar-merge-requests) {
+ .sidebar-container,
+ .issuable-sidebar {
+ // Add 100px so that potentially visible vertical scroll bar is hidden
+ width: calc(100% + 100px);
+ }
}
}
@@ -135,7 +165,11 @@
// rest of the sidebar, and could be removed once the sidebar has been fully converted to use
// gitlab-ui components.
.title .gl-button {
- color: $gl-text-color;
+ font-weight: $gl-font-weight-bold;
+
+ .gl-button {
+ color: $gl-text-color;
+ }
}
}
@@ -227,6 +261,10 @@
margin-right: -$gl-spacing-scale-2;
}
+.issuable-sidebar.is-merge-request .edit-link {
+ margin-right: 0;
+}
+
.assignee-grid {
grid-template-areas: ' attention user';
grid-template-columns: min-content 1fr;
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 6348703e9e1..f39d53c5b1c 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -10,9 +10,6 @@ table {
* color palette in https://gitlab.com/gitlab-org/gitlab/-/issues/213570
*
* The overwrites here affected the following areas:
- * - The security dashboard tables. When removing
- * this code, table-th-transparent and original-text-color classes should
- * be removed there.
* - The subscription seats table. When removing this code, the .seats-table
* <th> and margin overrides should be removed there.
*
@@ -23,8 +20,16 @@ table {
@include gl-text-gray-500;
}
- .md &:not(.code),
&.table {
+ .thead-white {
+ th {
+ background-color: $white;
+ }
+ }
+ }
+
+ .md &:not(.code),
+ &.table:not(.gl-table) {
margin-bottom: $gl-padding;
.dropdown-menu a {
@@ -58,23 +63,12 @@ table {
&.wide {
width: 55%;
}
-
- &.table-th-transparent {
- background: none;
- color: $gl-text-color-secondary;
- }
-
- &.original-gl-th {
- @include gl-text-gray-500;
- border-bottom: 1px solid $cycle-analytics-light-gray;
- }
}
}
.thead-white {
th {
- background-color: $white;
color: $gl-text-color-secondary;
border-top: 0;
}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 8e3b34e4eaf..bc649b6407d 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -453,7 +453,7 @@ $border-radius-small: 2px;
$border-radius-large: 8px;
$default-icon-size: 16px;
$layout-link-gray: #7e7c7c;
-$btn-side-margin: 10px;
+$btn-side-margin: $grid-size;
$btn-sm-side-margin: 7px;
$btn-margin-5: 5px;
$count-arrow-border: #dce0e5;
@@ -658,7 +658,6 @@ $calendar-user-contrib-text: #959494;
$cycle-analytics-box-padding: 30px;
$cycle-analytics-box-text-color: #8c8c8c;
$cycle-analytics-big-font: 19px;
-$cycle-analytics-light-gray: #bfbfbf;
$cycle-analytics-dismiss-icon-color: #b2b2b2;
/*
@@ -934,7 +933,6 @@ $issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15);
Merge requests
*/
$mr-tabs-height: 48px;
-$mr-version-controls-height: 56px;
/*
Compare Branches
diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss
index b796f04750b..cfd215b81b8 100644
--- a/app/assets/stylesheets/framework/wells.scss
+++ b/app/assets/stylesheets/framework/wells.scss
@@ -39,7 +39,7 @@
.icon-container {
display: inline-block;
- margin-right: 8px;
+ margin: 0 0.5rem 0 0.25rem;
svg {
position: relative;
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-16 00:17:41 +0300