diff options
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r-- | app/assets/stylesheets/framework/avatar.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/buttons.scss | 10 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/common.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/header.scss | 10 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/mobile.scss | 9 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 6 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/_ide_mixins.scss | 18 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/ide.scss | 17 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/builds.scss | 17 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 187 |
10 files changed, 201 insertions, 76 deletions
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss index fcf282a7d7c..054c75912ea 100644 --- a/app/assets/stylesheets/framework/avatar.scss +++ b/app/assets/stylesheets/framework/avatar.scss @@ -21,6 +21,7 @@ &.s46 { @include avatar-size(46px, 15px); } &.s48 { @include avatar-size(48px, 10px); } &.s60 { @include avatar-size(60px, 12px); } + &.s64 { @include avatar-size(64px, 14px); } &.s70 { @include avatar-size(70px, 14px); } &.s90 { @include avatar-size(90px, 15px); } &.s100 { @include avatar-size(100px, 15px); } @@ -80,6 +81,7 @@ &.s40 { font-size: 16px; line-height: 38px; } &.s48 { font-size: 20px; line-height: 46px; } &.s60 { font-size: 32px; line-height: 58px; } + &.s64 { font-size: 32px; line-height: 64px; } &.s70 { font-size: 34px; line-height: 70px; } &.s90 { font-size: 36px; line-height: 88px; } &.s100 { font-size: 36px; line-height: 98px; } diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 219fd99b097..e36f99ac577 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -142,8 +142,14 @@ &.btn-sm { padding: 4px 10px; - font-size: 13px; - line-height: 18px; + font-size: $gl-btn-small-font-size; + line-height: $gl-btn-small-line-height; + } + + &.btn-xs { + padding: 2px $gl-btn-padding; + font-size: $gl-btn-small-font-size; + line-height: $gl-btn-small-line-height; } &.btn-success, diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 626c8f92d1d..f2f3a45ca09 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -386,3 +386,4 @@ img.emoji { .flex-no-shrink { flex-shrink: 0; } .mw-460 { max-width: 460px; } .ws-initial { white-space: initial; } +.min-height-0 { min-height: 0; } diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 39410ac56af..c0cda29e239 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -383,6 +383,16 @@ top: 1px; } } + + .dropdown-menu li a .identicon { + width: 17px; + height: 17px; + font-size: $gl-font-size-xs; + vertical-align: middle; + text-indent: 0; + line-height: $gl-font-size-xs + 2px; + display: inline-block; + } } .breadcrumbs-list { diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss index 6d20c46b99d..3bb046d0e51 100644 --- a/app/assets/stylesheets/framework/mobile.scss +++ b/app/assets/stylesheets/framework/mobile.scss @@ -39,15 +39,6 @@ .git-clone-holder { display: none; } - - // Display Star and Fork buttons without counters on mobile. - .project-repo-buttons { - display: block; - - .count-buttons .count-badge { - margin-top: $gl-padding-8; - } - } } .group-buttons { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 4fcdb862b6d..134b3a4521b 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -197,6 +197,7 @@ $well-light-text-color: #5b6169; $gl-font-size: 14px; $gl-font-size-xs: 11px; $gl-font-size-small: 12px; +$gl-font-size-large: 16px; $gl-font-weight-normal: 400; $gl-font-weight-bold: 600; $gl-text-color: #2e2e2e; @@ -270,7 +271,8 @@ $performance-bar-height: 35px; $flash-height: 52px; $context-header-height: 60px; $breadcrumb-min-height: 48px; -$project-title-row-height: 24px; +$project-title-row-height: 64px; +$project-avatar-mobile-size: 24px; $gl-line-height: 16px; $gl-line-height-24: 24px; @@ -365,6 +367,8 @@ $gl-btn-padding: 10px; $gl-btn-line-height: 16px; $gl-btn-vert-padding: 8px; $gl-btn-horz-padding: 12px; +$gl-btn-small-font-size: 13px; +$gl-btn-small-line-height: 13px; /* * Badges diff --git a/app/assets/stylesheets/page_bundles/_ide_mixins.scss b/app/assets/stylesheets/page_bundles/_ide_mixins.scss new file mode 100644 index 00000000000..896a3466cb4 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/_ide_mixins.scss @@ -0,0 +1,18 @@ +@mixin ide-trace-view { + display: flex; + flex-direction: column; + height: 100%; + margin-top: -$grid-size; + margin-bottom: -$grid-size; + + &.build-page .top-bar { + top: 0; + height: auto; + font-size: 12px; + border-top-right-radius: $border-radius-default; + } + + .top-bar { + margin-left: -$gl-padding; + } +} diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 07d82e984ba..98d0a2d43ea 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -1,5 +1,6 @@ @import 'framework/variables'; @import 'framework/mixins'; +@import './ide_mixins'; $search-list-icon-width: 18px; $ide-activity-bar-width: 60px; @@ -1111,11 +1112,7 @@ $ide-commit-header-height: 48px; } .ide-pipeline { - display: flex; - flex-direction: column; - height: 100%; - margin-top: -$grid-size; - margin-bottom: -$grid-size; + @include ide-trace-view(); .empty-state { margin-top: auto; @@ -1133,17 +1130,9 @@ $ide-commit-header-height: 48px; } } - .build-trace, - .top-bar { + .build-trace { margin-left: -$gl-padding; } - - &.build-page .top-bar { - top: 0; - height: auto; - font-size: 12px; - border-top-right-radius: $border-radius-default; - } } .ide-pipeline-list { diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index 81cb519883b..57918eafd6f 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -228,9 +228,16 @@ padding: 16px 0; } + .trigger-variables-btn-container { + @extend .d-flex; + justify-content: space-between; + align-items: center; + } + .trigger-build-variables { margin: 0; overflow-x: auto; + width: 100%; -ms-overflow-style: scrollbar; -webkit-overflow-scrolling: touch; } @@ -243,7 +250,15 @@ .trigger-build-value { padding: 2px 4px; color: $black; - background-color: $white-light; + } + + .trigger-variables-table-cell { + font-size: $gl-font-size-small; + line-height: $gl-line-height; + border: 1px solid $theme-gray-200; + padding: $gl-padding-4 6px; + width: 50%; + vertical-align: top; } .badge.badge-pill { diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 6cc21072acd..278800aba95 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -144,7 +144,6 @@ .group-home-panel { padding-top: 24px; padding-bottom: 24px; - border-bottom: 1px solid $border-color; .group-avatar { float: none; @@ -155,7 +154,6 @@ } } - .project-title, .group-title { margin-top: 10px; margin-bottom: 10px; @@ -195,25 +193,69 @@ } .project-home-panel { - padding-top: $gl-padding-8; - padding-bottom: $gl-padding-24; - - .project-title-row { - margin-right: $gl-padding-8; - } + padding-top: $gl-padding; + padding-bottom: $gl-padding; .project-avatar { width: $project-title-row-height; height: $project-title-row-height; flex-shrink: 0; flex-basis: $project-title-row-height; - margin: 0 $gl-padding-8 0 0; + margin: 0 $gl-padding 0 0; } .project-title { + margin-top: 8px; + margin-bottom: 5px; font-size: 20px; - line-height: $project-title-row-height; + line-height: $gl-line-height-24; font-weight: bold; + + .icon { + font-size: $gl-font-size-large; + } + + .project-visibility { + color: $gl-text-color-secondary; + } + + .project-tag-list { + font-size: $gl-font-size; + font-weight: $gl-font-weight-normal; + + .icon { + position: relative; + top: 3px; + margin-right: $gl-padding-4; + } + } + } + + .project-title-row { + @include media-breakpoint-down(sm) { + .project-avatar { + width: $project-avatar-mobile-size; + height: $project-avatar-mobile-size; + flex-basis: $project-avatar-mobile-size; + + .avatar { + font-size: 20px; + line-height: 46px; + } + } + + .project-title { + margin-top: 4px; + margin-bottom: 2px; + font-size: $gl-font-size; + line-height: $gl-font-size-large; + } + + .project-tag-list, + .project-metadata { + font-size: $gl-font-size-small; + } + } } .project-metadata { @@ -222,16 +264,6 @@ line-height: $gl-btn-line-height; color: $gl-text-color-secondary; - .icon { - margin-right: $gl-padding-4; - font-size: 16px; - } - - .project-visibility, - .project-license, - .project-tag-list { - margin-right: $gl-padding-8; - } .project-license { .btn { @@ -240,12 +272,22 @@ } } - .project-tag-list, - .project-license { - .icon { - position: relative; - top: 2px; - } + .access-request-link, + .project-tag-list { + padding-left: $gl-padding-8; + border-left: 1px solid $gl-text-color-secondary; + } + } + + .project-description { + @include media-breakpoint-up(md) { + font-size: $gl-font-size-large; + } + } + + .notifications-btn { + .fa-bell { + margin-right: 0; } } } @@ -298,14 +340,6 @@ vertical-align: top; margin-top: $gl-padding; - .count-badge { - height: $input-height; - - .icon { - top: -1px; - } - } - .count-badge-count, .count-badge-button { border: 1px solid $border-color; @@ -319,29 +353,25 @@ .count-badge-count { padding: 0 12px; - border-right: 0; - border-radius: $border-radius-base 0 0 $border-radius-base; background: $gray-light; + border-radius: 0 $border-radius-base $border-radius-base 0; } .count-badge-button { - border-radius: 0 $border-radius-base $border-radius-base 0; + border-right: 0; + border-radius: $border-radius-base 0 0 $border-radius-base; } } .project-clone-holder { display: inline-block; - margin: $gl-padding $gl-padding-8 0 0; + margin: $gl-padding 0 0; input { height: $input-height; } } - .clone-dropdown-btn { - background-color: $white-light; - } - .clone-options-dropdown { min-width: 240px; @@ -355,6 +385,31 @@ } } +.project-repo-buttons { + .icon { + top: 0; + } + + .count-badge, + .btn-xs { + height: 24px; + } + + .dropdown-toggle, + .clone-dropdown-btn { + .fa { + color: unset; + } + } + + .btn { + .notifications-icon { + top: 1px; + margin-right: 0; + } + } +} + .split-one { display: inline-table; margin-right: 12px; @@ -715,10 +770,10 @@ border-bottom: 1px solid $border-color; } -.project-stats { +.project-stats, +.project-buttons { font-size: 0; text-align: center; - border-bottom: 1px solid $border-color; .scrolling-tabs-container { .scrolling-tabs { @@ -786,23 +841,43 @@ font-size: $gl-font-size; line-height: $gl-btn-line-height; color: $gl-text-color-secondary; - white-space: nowrap; + white-space: pre-wrap; } .stat-link { border-bottom: 0; + color: $black; &:hover, &:focus { - color: $gl-text-color; text-decoration: underline; border-bottom: 0; } + + .project-stat-value { + color: $gl-text-color; + } + + .icon { + color: $gl-text-color-secondary; + } + + .add-license-link { + &, + .icon { + color: $blue-600; + } + } } .btn { - padding: $gl-btn-vert-padding $gl-btn-horz-padding; + margin-top: $gl-padding; + padding: $gl-btn-vert-padding $gl-btn-padding; line-height: $gl-btn-line-height; + + .icon { + top: 0; + } } .btn-missing { @@ -811,6 +886,13 @@ } } +.project-buttons { + .stat-text { + @extend .btn; + @extend .btn-default; + } +} + .repository-languages-bar { height: 8px; margin-bottom: $gl-padding-8; @@ -934,8 +1016,6 @@ pre.light-well { } .git-clone-holder { - width: 320px; - .btn-clipboard { border: 1px solid $border-color; } @@ -958,6 +1038,15 @@ pre.light-well { } } +.git-clone-holder, +.mobile-git-clone { + .btn { + .icon { + fill: $white; + } + } +} + .cannot-be-merged, .cannot-be-merged:hover { color: $red-500; |