From 86b1dfc7a494b19a20cf677f040d2f9c8a1efad7 Mon Sep 17 00:00:00 2001 From: tauriedavis Date: Fri, 30 Dec 2016 12:18:27 -0800 Subject: 25701 standardize text colors --- app/assets/stylesheets/framework/badges.scss | 5 --- app/assets/stylesheets/framework/blocks.scss | 14 ++++----- app/assets/stylesheets/framework/buttons.scss | 6 ++-- app/assets/stylesheets/framework/common.scss | 2 +- app/assets/stylesheets/framework/dropdowns.scss | 14 ++++----- app/assets/stylesheets/framework/forms.scss | 2 +- app/assets/stylesheets/framework/header.scss | 6 ++-- app/assets/stylesheets/framework/icons.scss | 4 +-- app/assets/stylesheets/framework/issue_box.scss | 2 +- app/assets/stylesheets/framework/lists.scss | 4 +-- .../stylesheets/framework/markdown_area.scss | 4 +-- app/assets/stylesheets/framework/mixins.scss | 2 +- app/assets/stylesheets/framework/nav.scss | 4 +-- app/assets/stylesheets/framework/page-header.scss | 4 +-- app/assets/stylesheets/framework/timeline.scss | 4 +-- app/assets/stylesheets/framework/tw_bootstrap.scss | 2 +- .../framework/tw_bootstrap_variables.scss | 9 ++++-- app/assets/stylesheets/framework/typography.scss | 14 ++++----- app/assets/stylesheets/framework/variables.scss | 36 ++++++++-------------- app/assets/stylesheets/framework/wells.scss | 2 +- app/assets/stylesheets/framework/zen.scss | 2 +- app/assets/stylesheets/highlight/white.scss | 2 +- app/assets/stylesheets/pages/boards.scss | 2 +- app/assets/stylesheets/pages/branches.scss | 2 +- app/assets/stylesheets/pages/builds.scss | 4 +-- app/assets/stylesheets/pages/ci_projects.scss | 2 +- app/assets/stylesheets/pages/commits.scss | 16 +++++----- app/assets/stylesheets/pages/cycle_analytics.scss | 18 +++++------ app/assets/stylesheets/pages/detail_page.scss | 8 ++--- app/assets/stylesheets/pages/diff.scss | 6 ++-- app/assets/stylesheets/pages/environments.scss | 10 +++--- app/assets/stylesheets/pages/events.scss | 2 +- app/assets/stylesheets/pages/groups.scss | 2 +- app/assets/stylesheets/pages/issuable.scss | 16 +++++----- app/assets/stylesheets/pages/labels.scss | 2 +- app/assets/stylesheets/pages/merge_requests.scss | 14 ++++----- app/assets/stylesheets/pages/milestone.scss | 2 +- app/assets/stylesheets/pages/note_form.scss | 4 +-- app/assets/stylesheets/pages/notes.scss | 2 +- app/assets/stylesheets/pages/pipelines.scss | 26 ++++++++-------- app/assets/stylesheets/pages/projects.scss | 14 ++++----- app/assets/stylesheets/pages/settings.scss | 2 +- app/assets/stylesheets/pages/status.scss | 16 +++++----- app/assets/stylesheets/pages/todos.scss | 2 +- app/assets/stylesheets/pages/tree.scss | 10 +++--- app/assets/stylesheets/pages/wiki.scss | 4 +-- 46 files changed, 158 insertions(+), 172 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss index e9d7cda0647..47a8f44c709 100644 --- a/app/assets/stylesheets/framework/badges.scss +++ b/app/assets/stylesheets/framework/badges.scss @@ -4,8 +4,3 @@ color: $badge-color; vertical-align: baseline; } - -.badge-dark { - background-color: $badge-bg-dark; - color: $badge-color-dark; -} diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index e9aadffc73c..407c800feb7 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -1,13 +1,13 @@ .centered-light-block { text-align: center; - color: $gl-gray; + color: $gl-text-color; margin: 20px; } .nothing-here-block { text-align: center; padding: 20px; - color: $gl-gray; + color: $gl-text-color; font-weight: normal; font-size: 14px; line-height: 36px; @@ -29,7 +29,7 @@ margin-bottom: 0; border-top: 1px solid $white-dark; border-bottom: 1px solid $white-dark; - color: $gl-gray; + color: $gl-text-color; &.oneline-block { line-height: 42px; @@ -135,11 +135,11 @@ } .cover-title { - color: $gl-header-color; + color: $gl-text-color; font-size: 23px; h1 { - color: $gl-gray-dark; + color: $gl-text-color; margin-bottom: 6px; font-size: 23px; } @@ -153,7 +153,7 @@ p { padding: 0 $gl-padding; - color: $gl-text-color-dark; + color: $gl-text-color; } } @@ -211,7 +211,7 @@ display: inline; font-weight: normal; font-size: 24px; - color: $gl-title-color; + color: $gl-text-color; } } } diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index a11f1cd7735..e04a87a7327 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -88,7 +88,7 @@ } @mixin btn-gray { - @include btn-color($gray-light, $border-gray-normal, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-gray-dark); + @include btn-color($gray-light, $border-gray-normal, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-text-color); } @mixin btn-white { @@ -242,7 +242,7 @@ } .btn-transparent { - color: $gl-gray-light; + color: $gl-text-color-secondary; background-color: transparent; border: 0; @@ -338,7 +338,7 @@ margin-left: 10px; i { - color: $gl-gray-light; + color: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 67b5aa37ae7..0ce94a26a7f 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -412,7 +412,7 @@ table { padding: 0 10px; clip: auto; text-decoration: none; - color: $gl-title-color; + color: $gl-text-color; background: $gray-light; z-index: 1; } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 889366d6ddf..755eddefa42 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -201,7 +201,7 @@ } .icon-play { - fill: $gl-gray-light; + fill: $gl-text-color-secondary; margin-right: 6px; height: 12px; width: 11px; @@ -209,7 +209,7 @@ } .dropdown-header { - color: $gl-gray-light; + color: $gl-text-color-secondary; font-size: 13px; line-height: 22px; padding: 0 10px; @@ -222,7 +222,7 @@ .unclickable { cursor: not-allowed; padding: 5px 8px; - color: $gl-gray-light; + color: $gl-text-color-secondary; } } @@ -592,7 +592,7 @@ } .ui-datepicker-title { - color: $gl-gray; + color: $gl-text-color; font-size: 14px; line-height: 1; font-weight: normal; @@ -614,17 +614,17 @@ .dropdown-menu-inner-title { display: block; - color: $gl-title-color; + color: $gl-text-color; font-weight: 600; } .dropdown-menu-inner-content { display: block; - color: $gl-gray-light; + color: $gl-text-color-secondary; } .dropdown-toggle-text { &.is-default { - color: $gl-gray-light; + color: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index 8726a69867b..25d6fbe465a 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -153,7 +153,7 @@ label { } .form-control::-webkit-input-placeholder { - color: $gl-gray-light; + color: $gl-text-color-secondary; } .input-group { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 971940773f7..72b3fe2016c 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -45,7 +45,7 @@ header { padding: 0; .nav > li > a { - color: $gl-gray-light; + color: $gl-text-color-secondary; font-size: 18px; padding: 0; margin: ($header-height - 28) / 2 0; @@ -63,7 +63,7 @@ header { &:focus, &:active { background-color: $gray-light; - color: darken($gl-gray-light, 30%); + color: darken($gl-text-color-secondary, 30%); .todos-pending-count { background: darken($todo-alert-blue, 10%); @@ -88,7 +88,7 @@ header { } &.active { - color: $gl-gray-light; + color: $gl-text-color-secondary; } } } diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index 8624a25c052..dccf5177e35 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -34,10 +34,10 @@ .ci-status-icon-canceled, .ci-status-icon-disabled, .ci-status-icon-not-found { - color: $gl-gray; + color: $gl-text-color; svg { - fill: $gl-gray; + fill: $gl-text-color; } } diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss index 298913108ee..46632f15f35 100644 --- a/app/assets/stylesheets/framework/issue_box.scss +++ b/app/assets/stylesheets/framework/issue_box.scss @@ -41,6 +41,6 @@ } &.status-box-upcoming { - background: $gl-gray-light; + background: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index bffd0e6f0cd..771dfaec46e 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -128,7 +128,7 @@ ul.content-list { } a { - color: $gl-dark-link-color; + color: $gl-text-color; } .member-group-link { @@ -230,7 +230,7 @@ ul.content-list { } .label-default { - color: $gl-gray-light; + color: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index e30d81d09f0..5bff694658c 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -73,7 +73,7 @@ } .referenced-users { - color: $gl-header-color; + color: $gl-text-color; padding-top: 10px; } @@ -135,7 +135,7 @@ .toolbar-btn { float: left; padding: 0 5px; - color: $gl-gray-light; + color: $gl-text-color-secondary; background: transparent; border: 0; outline: 0; diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 4f2ac77f228..1acd06122a3 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -46,7 +46,7 @@ &.light { a { - color: $gl-gray; + color: $gl-text-color; } } } diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index 5abda13a963..a292e7686f9 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -51,7 +51,7 @@ margin-bottom: -1px; font-size: 14px; line-height: 28px; - color: $gl-gray-light; + color: $gl-text-color-secondary; border-bottom: 2px solid transparent; &:hover, @@ -315,7 +315,7 @@ .fa-caret-down { margin-left: 5px; - color: $gl-gray-light; + color: $gl-text-color-secondary; } .dropdown { diff --git a/app/assets/stylesheets/framework/page-header.scss b/app/assets/stylesheets/framework/page-header.scss index 625bea96aaa..4decee2c525 100644 --- a/app/assets/stylesheets/framework/page-header.scss +++ b/app/assets/stylesheets/framework/page-header.scss @@ -14,7 +14,7 @@ .header-action-buttons { i { - color: $gl-gray-light; + color: $gl-text-color-secondary; font-size: 13px; margin-right: 3px; } @@ -42,7 +42,7 @@ .commit-committer-link, .commit-author-link { - color: $gl-gray; + color: $gl-text-color; font-weight: bold; } diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index 6078505807e..ff185cd8767 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -7,7 +7,7 @@ .timeline-entry { padding: $gl-padding $gl-btn-padding 11px; border-color: $white-normal; - color: $gl-gray; + color: $gl-text-color; border-bottom: 1px solid $border-white-light; &:target { @@ -32,7 +32,7 @@ .system-note { .note-text { - color: $gl-gray !important; + color: $gl-text-color !important; } } diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss index 28cbae9a449..12d56359d7d 100644 --- a/app/assets/stylesheets/framework/tw_bootstrap.scss +++ b/app/assets/stylesheets/framework/tw_bootstrap.scss @@ -98,7 +98,7 @@ &.label-gray { background-color: $label-gray-bg; - color: $gl-gray; + color: $gl-text-color; text-shadow: none; } diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss index 876adf7f712..0fc89d5976a 100644 --- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss +++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss @@ -65,11 +65,11 @@ $legend-color: $text-color; // //## -$pagination-color: $gl-gray; +$pagination-color: $gl-text-color; $pagination-bg: $white-light; $pagination-border: $border-color; -$pagination-hover-color: $gl-gray; +$pagination-hover-color: $gl-text-color; $pagination-hover-bg: $row-hover; $pagination-hover-border: $border-color; @@ -121,6 +121,9 @@ $panel-default-heading-bg: $gray-light; $panel-footer-bg: $gray-light; $panel-inner-border: $border-color; +$badge-bg: $badge-bg; +$badge-color: $badge-color; + //== Wells // //## @@ -154,7 +157,7 @@ $nav-link-padding: 13px $gl-padding; // //## $pre-bg: $gray-light !default; -$pre-color: $gl-gray !default; +$pre-color: $gl-text-color !default; $pre-border-color: $border-color; $table-bg-accent: $gray-light; diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index d906d26bba9..bd58a26f429 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -1,5 +1,5 @@ @mixin md-typography { - color: $md-text-color; + color: $gl-text-color; word-wrap: break-word; a { @@ -50,14 +50,14 @@ margin: 16px 0 10px; padding: 0 0 0.3em; border-bottom: 1px solid $white-dark; - color: $gl-gray-dark; + color: $gl-text-color; } h2 { font-size: 1.5em; font-weight: 600; margin: 16px 0 10px; - color: $gl-gray-dark; + color: $gl-text-color; } h3 { @@ -100,7 +100,7 @@ } p { - color: $gl-text-color-dark; + color: $gl-text-color; margin: 6px 0 0; } @@ -108,7 +108,7 @@ @extend .table; @extend .table-bordered; margin: 12px 0; - color: $gl-text-color-dark; + color: $gl-text-color; th { background: $label-gray-bg; @@ -230,7 +230,7 @@ h3, h4, h5, h6 { - color: $gl-title-color; + color: $gl-text-color; font-weight: 600; } @@ -292,7 +292,7 @@ h2, h3, h4 { small { - color: $gl-gray; + color: $gl-text-color; } } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index dc211fc55a7..6595010d221 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -94,29 +94,22 @@ $well-light-text-color: #5b6169; * Text */ $gl-font-size: 14px; -$gl-title-color: #333; -$gl-text-color: #5c5c5c; -$gl-text-color-dark: #5c5d5e; -$gl-text-color-light: #8c8c8c; +$gl-text-color: rgba(0, 0, 0, .85); +$gl-text-color-secondary: rgba(0, 0, 0, .55); +$gl-text-color-disabled: rgba(0, 0, 0, .35); $gl-text-green: #4a2; $gl-text-red: #d12f19; $gl-text-orange: #d90; $gl-link-color: #3777b0; -$gl-diff-text-color: #555; -$gl-dark-link-color: #333; -$gl-gray-light: #8f8f8f; $gl-grayish-blue: #7f8fa4; -$gl-gray: $gl-text-color; -$gl-gray-dark: #313236; -$gl-header-color: #4c4e54; /* * Lists */ $list-font-size: $gl-font-size; -$list-title-color: $gl-title-color; +$list-title-color: $gl-text-color; $list-text-color: $gl-text-color; -$list-text-disabled-color: #888; +$list-text-disabled-color: $gl-text-color-disabled; $list-border-light: #eee; $list-border: rgba(0, 0, 0, 0.05); $list-text-height: 42px; @@ -127,7 +120,6 @@ $list-warning-row-color: #8a6d3b; /* * Markdown */ -$md-text-color: $gl-text-color; $md-link-color: $gl-link-color; $md-area-border: #ddd; @@ -168,9 +160,7 @@ $btn-side-margin: 10px; $btn-sm-side-margin: 7px; $btn-xs-side-margin: 5px; $issue-status-expired: #cea61b; -$issuable-sidebar-color: #999; -$issuable-avatar-hover-border: #999; -$issuable-clipboard-color: #999; +$issuable-sidebar-color: $gl-text-color-secondary; $show-aside-bg: #eee; $show-aside-color: #777; $show-aside-shadow: #ddd; @@ -282,10 +272,8 @@ $btn-active-gray-light: e4e7ed; /* * Badges */ -$badge-bg: #f3f3f3; -$badge-bg-dark: #eee; -$badge-color: #929292; -$badge-color-dark: #8f8f8f; +$badge-bg: #eee; +$badge-color: $gl-text-color-secondary; /* * Award emoji @@ -304,8 +292,8 @@ $location-icon-color: #e7e9ed; /* * Notes */ -$notes-light-color: #8e8e8e; -$notes-role-color: #8e8e8e; +$notes-light-color: $gl-text-color-secondary; +$notes-role-color: $gl-text-color-secondary; $note-disabled-comment-color: #b2b2b2; $note-targe3-outside: #fffff0; $note-targe3-inside: #ffffd3; @@ -330,7 +318,7 @@ $calendar-user-contrib-text: #959494; $cycle-analytics-box-padding: 30px; $cycle-analytics-box-text-color: #8c8c8c; $cycle-analytics-big-font: 19px; -$cycle-analytics-dark-text: $gl-title-color; +$cycle-analytics-dark-text: $gl-text-color; $cycle-analytics-light-gray: #bfbfbf; $cycle-analytics-dismiss-icon-color: #b2b2b2; @@ -382,7 +370,7 @@ $commit-message-text-area-bg: rgba(0, 0, 0, 0.0); /* * Common */ -$common-gray: $gl-gray; +$common-gray: $gl-text-color; $common-gray-light: #bbb; $common-gray-dark: #444; $common-red: $gl-text-red; diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index f9c850ebdc8..32eb750180f 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -1,6 +1,6 @@ .info-well { background: $gray-light; - color: $gl-gray; + color: $gl-text-color; border: 1px solid $border-color; border-radius: $border-radius-default; diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss index 84b639fabf5..97ade638db6 100644 --- a/app/assets/stylesheets/framework/zen.scss +++ b/app/assets/stylesheets/framework/zen.scss @@ -40,7 +40,7 @@ } .zen-control-full { - color: $gl-gray-light; + color: $gl-text-color-secondary; &:hover { color: $gl-link-color; diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss index 54a5664a874..b425c78e0d5 100644 --- a/app/assets/stylesheets/highlight/white.scss +++ b/app/assets/stylesheets/highlight/white.scss @@ -3,7 +3,7 @@ /* * White Syntax Colors */ -$white-code-color: #333; +$white-code-color: $gl-text-color; $white-highlight: #fafe3d; $white-pre-hll-bg: #f8eec7; $white-hll-bg: #f8f8f8; diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 76a88d96183..c18de7b940a 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -259,7 +259,7 @@ .board-list-count { padding: 10px 0; - color: $gl-gray-light; + color: $gl-text-color-secondary; font-size: 13px; > .fa { diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss index 8d671585b7a..3e2fa8ca88d 100644 --- a/app/assets/stylesheets/pages/branches.scss +++ b/app/assets/stylesheets/pages/branches.scss @@ -29,7 +29,7 @@ padding-top: 6px; padding-bottom: 0; font-size: 12px; - color: $gl-title-color; + color: $gl-text-color; display: block; } diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index f9e8d297c05..fd101d43b5b 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -160,7 +160,7 @@ flex: 1; a { - color: $gl-gray; + color: $gl-text-color; &:hover { color: $gl-link-color; @@ -357,7 +357,7 @@ } .build-light-text { - color: $gl-gray-light; + color: $gl-text-color-secondary; } .build-gutter-toggle { diff --git a/app/assets/stylesheets/pages/ci_projects.scss b/app/assets/stylesheets/pages/ci_projects.scss index d1cd1e5d848..90643832390 100644 --- a/app/assets/stylesheets/pages/ci_projects.scss +++ b/app/assets/stylesheets/pages/ci_projects.scss @@ -18,7 +18,7 @@ } td { - color: $gl-gray; + color: $gl-text-color; vertical-align: middle !important; a { diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index d890cf3502b..fef8e8eec27 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -19,7 +19,7 @@ .commit-title { margin: 0; - color: $gl-gray-dark; + color: $gl-text-color; } .commit-description { @@ -96,14 +96,14 @@ } .commit-row-message { - color: $gl-dark-link-color; + color: $gl-text-color; } } .text-expander { display: inline-block; background: $gray-light; - color: $gl-gray-light; + color: $gl-text-color-secondary; padding: 0 5px; cursor: pointer; border: 1px solid $border-gray-dark; @@ -153,7 +153,7 @@ a, button { - color: $gl-dark-link-color; + color: $gl-text-color; vertical-align: baseline; } @@ -176,7 +176,7 @@ } a { - color: $gl-dark-link-color; + color: $gl-text-color; } } @@ -193,7 +193,7 @@ } .branch-commit { - color: $gl-gray; + color: $gl-text-color; .commit-icon { text-align: center; @@ -203,7 +203,7 @@ height: 14px; width: 14px; vertical-align: middle; - fill: $gl-gray-light; + fill: $gl-text-color-secondary; } } @@ -212,6 +212,6 @@ } .commit-row-message { - color: $gl-gray; + color: $gl-text-color; } } diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index 9ce261eafef..6566f27ea2d 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -111,14 +111,14 @@ line-height: 19px; font-size: 14px; font-weight: 600; - color: $gl-title-color; + color: $gl-text-color; } &.text { color: $layout-link-gray; &.value-col { - color: $gl-title-color; + color: $gl-text-color; } } } @@ -260,7 +260,7 @@ .stage-empty, .not-available { - color: $gl-text-color-light; + color: $gl-text-color-secondary; } } } @@ -327,7 +327,7 @@ @include text-overflow(); a { - color: $gl-dark-link-color; + color: $gl-text-color; } } } @@ -355,7 +355,7 @@ .issue-link, .commit-author-link, .issue-author-link { - color: $gl-dark-link-color; + color: $gl-text-color; } // Custom CSS for components @@ -396,11 +396,11 @@ } .item-build-name { - color: $gl-title-color; + color: $gl-text-color; } .pipeline-id { - color: $gl-title-color; + color: $gl-text-color; padding: 0 3px 0 0; } @@ -423,7 +423,7 @@ } .fa { - color: $gl-text-color-light; + color: $gl-text-color-secondary; font-size: $code_font_size; } } @@ -435,7 +435,7 @@ width: 75%; margin: 0 auto; padding-top: 130px; - color: $gl-text-color-light; + color: $gl-text-color-secondary; h4 { color: $gl-text-color; diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss index 9b28df1afc5..46fd19c93f9 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/pages/detail_page.scss @@ -1,15 +1,15 @@ .detail-page-header { padding: $gl-padding-top 0; border-bottom: 1px solid $border-color; - color: $gl-text-color-dark; + color: $gl-text-color; line-height: 34px; .author { - color: $gl-text-color-dark; + color: $gl-text-color; } .identifier { - color: $gl-text-color-dark; + color: $gl-text-color; } .issue_created_ago, @@ -22,7 +22,7 @@ .title { margin: 0 0 16px; font-size: 2em; - color: $gl-gray-dark; + color: $gl-text-color; padding: 0 0 0.3em; border-bottom: 1px solid $white-dark; } diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index f30795fd2c2..96ba7c40634 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -14,7 +14,7 @@ background: $gray-light; border-bottom: 1px solid $border-color; padding: 10px 16px; - color: $gl-diff-text-color; + color: $gl-text-color; z-index: 10; border-radius: 3px 3px 0 0; @@ -50,7 +50,7 @@ overflow: auto; overflow-y: hidden; background: $white-light; - color: $gl-title-color; + color: $gl-text-color; border-radius: 0 0 3px 3px; .unfold { @@ -380,7 +380,7 @@ } cursor: default; - color: $gl-title-color; + color: $gl-text-color; } &.disabled { diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 5517dc5dcbd..778ef01430e 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -72,25 +72,25 @@ .external-url, .dropdown-new { - color: $gl-gray-light; + color: $gl-text-color-secondary; } .dropdown-menu { .fa { margin-right: 6px; - color: $gl-gray-light; + color: $gl-text-color-secondary; } } .build-link, .branch-name { - color: $gl-dark-link-color; + color: $gl-text-color; } .stop-env-link, .external-url { - color: $gl-gray-light; + color: $gl-text-color-secondary; .stop-env-icon { font-size: 14px; @@ -101,7 +101,7 @@ .build-column { .build-link { - color: $gl-dark-link-color; + color: $gl-text-color; } .avatar { diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss index 98925c2d0cb..b989d72ce1c 100644 --- a/app/assets/stylesheets/pages/events.scss +++ b/app/assets/stylesheets/pages/events.scss @@ -21,7 +21,7 @@ } a { - color: $gl-dark-link-color; + color: $gl-text-color; } .avatar { diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index 16bff5f1e03..d377526e655 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -13,7 +13,7 @@ .stats { float: right; line-height: $list-text-height; - color: $gl-gray; + color: $gl-text-color; span { margin-right: 15px; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 42a3f5baed9..0a8c037c402 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -103,7 +103,7 @@ } .edit-link { - color: $gl-gray; + color: $gl-text-color; &:hover { color: $md-link-color; @@ -139,7 +139,7 @@ } .btn-clipboard:hover { - color: $gl-gray; + color: $gl-text-color; } } @@ -174,7 +174,7 @@ } .no-value { - color: $gl-gray-light; + color: $gl-text-color-secondary; } .sidebar-collapsed-icon { @@ -242,7 +242,7 @@ color: $issuable-sidebar-color; &:hover { - color: $gl-gray; + color: $gl-text-color; } span { @@ -255,16 +255,16 @@ } .avatar:hover { - border-color: $issuable-avatar-hover-border; + border-color: $issuable-sidebar-color; } .btn-clipboard { border: none; - color: $issuable-clipboard-color; + color: $issuable-sidebar-color; &:hover { background: transparent; - color: $gl-gray; + color: $gl-text-color; } } } @@ -338,7 +338,7 @@ margin-left: 5px; a { - color: $gl-gray-light; + color: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index d129eb12a45..78683c7d574 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -117,7 +117,7 @@ .manage-labels-list { .btn-action { - color: $gl-dark-link-color; + color: $gl-text-color; .fa { font-size: 18px; diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 98d5967e76a..45ff9f7ff5f 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -4,7 +4,7 @@ */ .mr-state-widget { background: $gray-light; - color: $gl-gray; + color: $gl-text-color; border: 1px solid $border-color; border-radius: 2px; @@ -58,7 +58,7 @@ padding-right: 0; a { - color: $gl-gray; + color: $gl-text-color; } } @@ -70,7 +70,7 @@ .ci_widget { border-bottom: 1px solid $well-inner-border; - color: $gl-gray; + color: $gl-text-color; svg { margin-right: 4px; @@ -94,7 +94,7 @@ } .normal { - color: $gl-text-color-dark; + color: $gl-text-color; } .js-deployment-link { @@ -106,7 +106,7 @@ font-weight: 600; font-size: 16px; margin: 5px 0; - color: $gl-gray-dark; + color: $gl-text-color; &.has-conflicts .fa-exclamation-triangle { color: $gl-warning; @@ -190,7 +190,7 @@ } .label-branch { - color: $gl-gray-dark; + color: $gl-text-color; font-family: $monospace_font; font-weight: bold; overflow: hidden; @@ -363,7 +363,7 @@ th { background-color: $white-light; - color: $gl-gray-light; + color: $gl-text-color-secondary; } } } diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index f47ae9c6157..e284b7269ce 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -102,7 +102,7 @@ margin-top: 7px; .issuable-number { - color: $gl-gray-light; + color: $gl-text-color-secondary; margin-right: 5px; } diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index e54e12be82f..9f1c6a8a264 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -44,7 +44,7 @@ .note-textarea { display: block; padding: 10px 0; - color: $gl-gray; + color: $gl-text-color; font-family: $regular_font; border: 0; @@ -204,7 +204,7 @@ .comment-toolbar { padding-top: $gl-padding-top; - color: $gl-gray-light; + color: $gl-text-color-secondary; border-top: 1px solid $border-color; } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 21d72791e81..38c548908f8 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -345,7 +345,7 @@ ul.notes { } .author_link { - color: $gl-gray; + color: $gl-text-color; } } diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 578003f6d36..1e4f242d40d 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -131,7 +131,7 @@ height: 14px; width: 14px; vertical-align: middle; - fill: $gl-gray-light; + fill: $gl-text-color-secondary; } .fa { @@ -210,7 +210,7 @@ .duration, .finished-at { - color: $gl-gray-light; + color: $gl-text-color-secondary; margin: 4px 0; .fa { @@ -231,7 +231,7 @@ .btn { margin: 0; - color: $gl-gray-light; + color: $gl-text-color-secondary; } .cancel-retry-btns { @@ -244,10 +244,10 @@ .dropdown-toggle, .dropdown-menu { - color: $gl-gray-light; + color: $gl-text-color-secondary; .fa { - color: $gl-gray-light; + color: $gl-text-color-secondary; font-size: 14px; } @@ -281,7 +281,7 @@ .build-link { a { - color: $gl-dark-link-color; + color: $gl-text-color; } } @@ -344,7 +344,7 @@ a { text-decoration: none; - color: $gl-text-color-light; + color: $gl-text-color-secondary; } svg { @@ -468,13 +468,13 @@ width: 186px; margin-bottom: 10px; white-space: normal; - color: $gl-text-color-light; + color: $gl-text-color-secondary; .dropdown-menu-toggle { background-color: transparent; border: none; padding: 0; - color: $gl-text-color-light; + color: $gl-text-color-secondary; &:focus { outline: none; @@ -730,7 +730,7 @@ } .dropdown-build { - color: $gl-text-color-light; + color: $gl-text-color-secondary; .build-content { padding: 4px 7px 8px; @@ -784,7 +784,7 @@ .builds-dropdown { background-color: transparent; padding: 0; - color: $gl-text-color-light; + color: $gl-text-color-secondary; border: none; margin: 0; @@ -827,7 +827,7 @@ .ci-status-icon-canceled, .ci-status-icon-disabled, .ci-status-icon-not-found { - background-color: rgba($gl-gray, .1); + background-color: rgba($gl-text-color, .1); } .ci-status-icon-created, @@ -866,7 +866,7 @@ min-height: 50px; a { - color: $gl-text-color-light; + color: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 4a1bc560292..e30d73886e1 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -292,7 +292,7 @@ .option-title { font-weight: normal; display: inline-block; - color: $gl-gray-dark; + color: $gl-text-color; } .option-descr { @@ -331,7 +331,7 @@ a.deploy-project-label { padding: 5px; margin-right: 5px; - color: $gl-gray; + color: $gl-text-color; background-color: $row-hover; &:hover { @@ -372,7 +372,7 @@ a.deploy-project-label { } a { - color: $gl-dark-link-color; + color: $gl-text-color; } .dropdown-menu { @@ -426,7 +426,7 @@ a.deploy-project-label { width: 100%; height: 100%; padding-top: $gl-padding; - color: $gl-gray; + color: $gl-text-color; .caption { min-height: 30px; @@ -552,7 +552,7 @@ pre.light-well { margin: 0 7px 7px; h5 { - color: $gl-text-color-dark; + color: $gl-text-color; } .light-well { @@ -662,7 +662,7 @@ pre.light-well { } .commit-row-message { - color: $gl-gray; + color: $gl-text-color; } .commit_short_id { @@ -750,7 +750,7 @@ pre.light-well { .protected-branches-list { a { - color: $gl-gray; + color: $gl-text-color; &:hover { color: $gl-link-color; diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index ddee2c95247..a28a87ed4f8 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -1,5 +1,5 @@ .settings-list-icon { - color: $gl-gray-light; + color: $gl-text-color-secondary; font-size: $settings-icon-size; line-height: 42px; } diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index 2f6f03e9877..f19275770be 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -61,15 +61,15 @@ &.ci-canceled, &.ci-disabled { - color: $gl-gray; - border-color: $gl-gray; + color: $gl-text-color; + border-color: $gl-text-color; &:not(span):hover { - background-color: rgba($gl-gray, .07); + background-color: rgba($gl-text-color, .07); } svg { - fill: $gl-gray; + fill: $gl-text-color; } } @@ -101,15 +101,15 @@ &.ci-created, &.ci-skipped { - color: $gl-gray-light; - border-color: $gl-gray-light; + color: $gl-text-color-secondary; + border-color: $gl-text-color-secondary; &:not(span):hover { - background-color: rgba($gl-gray-light, .07); + background-color: rgba($gl-text-color-secondary, .07); } svg { - fill: $gl-gray-light; + fill: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss index 508b30f3947..01675acc62e 100644 --- a/app/assets/stylesheets/pages/todos.scss +++ b/app/assets/stylesheets/pages/todos.scss @@ -90,7 +90,7 @@ } p { - color: $gl-text-color-dark; + color: $gl-text-color; } } diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index fe4f08e4749..4cce1c363eb 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -78,7 +78,7 @@ i, a { - color: $gl-dark-link-color; + color: $gl-text-color; } img { @@ -104,21 +104,21 @@ padding-right: 8px; .commit-author-name { - color: $gl-gray; + color: $gl-text-color; } } .tree-time-ago { min-width: 135px; - color: $gl-gray-light; + color: $gl-text-color-secondary; } .tree-commit { max-width: 320px; - color: $gl-gray-light; + color: $gl-text-color-secondary; .tree-commit-link { - color: $gl-gray-light; + color: $gl-text-color-secondary; &:hover { text-decoration: underline; diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss index b9f81533150..d5783e14b21 100644 --- a/app/assets/stylesheets/pages/wiki.scss +++ b/app/assets/stylesheets/pages/wiki.scss @@ -15,7 +15,7 @@ } .wiki-last-edit-by { - color: $gl-gray-light; + color: $gl-text-color-secondary; strong { color: $gl-text-color; @@ -24,7 +24,7 @@ .light { font-weight: normal; - color: $gl-gray-light; + color: $gl-text-color-secondary; } .git-access-header { -- cgit v1.2.1 From 1100320b0cc4a1cc0f88eaf9f4d4d5c4b6f13c5c Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Fri, 14 Oct 2016 00:11:43 +0300 Subject: Refactor discussion edit widget to have only one at a time. --- app/assets/stylesheets/pages/notes.scss | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 21d72791e81..4eb81473e2b 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -601,3 +601,12 @@ ul.notes { position: relative; } } + + +.note-edit-warning.settings-message { + display: none; + position: relative; + top: 1px; + left: 7px; + padding: 5px 10px; +} -- cgit v1.2.1 From 2193ccec3d0cee689f7c62e4959a80589793af71 Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Wed, 16 Nov 2016 22:18:01 +0300 Subject: Fix warning styling for responsive design. --- app/assets/stylesheets/pages/note_form.scss | 16 ++++++++++++++++ app/assets/stylesheets/pages/notes.scss | 17 ----------------- 2 files changed, 16 insertions(+), 17 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index e54e12be82f..1ef757147a2 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -27,6 +27,7 @@ .new-note, .note-edit-form { .note-form-actions { + position: relative; margin-top: $gl-padding; } @@ -265,3 +266,18 @@ } } } + +.note-edit-warning.settings-message { + display: none; + padding: 5px 10px; + position: absolute; + left: 127px; + top: 2px; + + @media (max-width: $screen-xs-max) { + position: relative; + top: 0; + left: 0; + margin-bottom: 10px; + } +} diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 4eb81473e2b..3d111f6bfcb 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -586,23 +586,6 @@ ul.notes { } } -// Merge request notes in diffs -.diff-file { - - // Diff is side by side - .notes_content.parallel .note-header .note-headline-light { - display: block; - position: relative; - } - - // Diff is inline - .notes_content .note-header .note-headline-light { - display: inline-block; - position: relative; - } -} - - .note-edit-warning.settings-message { display: none; position: relative; -- cgit v1.2.1 From 509f0b1ac41254d010a1b94d05dbf0d2a75221d3 Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Wed, 28 Dec 2016 21:28:20 +0300 Subject: Remove unnecessary styling came from merge conflicts. --- app/assets/stylesheets/pages/notes.scss | 8 -------- 1 file changed, 8 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 3d111f6bfcb..10a9df18c47 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -585,11 +585,3 @@ ul.notes { } } } - -.note-edit-warning.settings-message { - display: none; - position: relative; - top: 1px; - left: 7px; - padding: 5px 10px; -} -- cgit v1.2.1 From 9ae7e99a09ad1d9ea570279ce02cd232a55daf28 Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Thu, 29 Dec 2016 19:19:11 +0300 Subject: Use gl.utils.isInViewport and improve gl.utils.animateToElement. --- app/assets/stylesheets/pages/notes.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 10a9df18c47..43fab67ad75 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -585,3 +585,17 @@ ul.notes { } } } + +// Merge request notes in diffs +.diff-file { + // Diff is side by side + .notes_content.parallel .note-header .note-headline-light { + display: block; + position: relative; + } + // Diff is inline + .notes_content .note-header .note-headline-light { + display: inline-block; + position: relative; + } +} -- cgit v1.2.1 From 97ecf20ca196ae362437fc37d136b3b293957d5c Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Thu, 5 Jan 2017 01:27:52 +0100 Subject: Decreases font-size on login page --- app/assets/stylesheets/pages/login.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 712bd3da22f..71ed5b1361a 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -17,14 +17,19 @@ line-height: 1.5; p { - font-size: 18px; + font-size: 16px; color: $login-brand-holder-color; } h1:first-child { font-weight: normal; - margin-bottom: 30px; + margin-bottom: 0.68em; margin-top: 0; + font-size: 34px; + } + + h3 { + font-size: 22px; } img { -- cgit v1.2.1 From 043cc8196e41a3b44301f1ae093bb5cd6b4ebc82 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Wed, 4 Jan 2017 11:48:48 +0000 Subject: Simplify HTML of mini pipeline graph and dropdown Creates individual html for dropdown Adds simplified CSS for the new dropdown Removes old CSS Improves dropdown item in Chrome, Firefox and Safari Use SCSS variables for colors. Fix scss linter errors Adds animation when the stage is hovered. Adds back tooltip on dropdown toggle Fixes broken tests additional css changes to get more into direction of mockups --- app/assets/stylesheets/framework/variables.scss | 1 + app/assets/stylesheets/pages/pipelines.scss | 468 ++++++++++++------------ 2 files changed, 225 insertions(+), 244 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 6595010d221..3e52c482ece 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -525,3 +525,4 @@ Pipeline Graph */ $stage-hover-bg: #eaf3fc; $stage-hover-border: #d1e7fc; +$action-icon-color: #d6d6d6; diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 1e4f242d40d..6061e53f386 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -177,12 +177,13 @@ .stage-cell { font-size: 0; - svg { - height: 18px; - width: 18px; - position: relative; + > .stage-container > button > svg { + height: 22px; + width: 22px; + position: absolute; + top: -1px; + left: -1px; z-index: 2; - vertical-align: middle; overflow: visible; } @@ -200,7 +201,7 @@ content: ''; width: 8px; position: absolute; - right: -7px; + right: -8px; top: 10px; border-bottom: 2px solid $border-color; } @@ -470,6 +471,47 @@ white-space: normal; color: $gl-text-color-secondary; + // Action Icons in big pipeline-graph nodes + > .ci-action-icon-container .ci-action-icon-wrapper { + i { + color: $border-color; + border-radius: 100%; + border: 1px solid $border-color; + padding: 5px 6px; + font-size: 13px; + background: $white-light; + height: 30px; + width: 30px; + + &::before { + position: relative; + top: 3px; + left: 3px; + } + + &:hover { + color: $gl-text-color; + background-color: $stage-hover-bg; + border: 1px solid $stage-hover-bg; + } + } + + .ci-play-icon { + padding: 5px 5px 5px 7px; + } + } + + > .ci-action-icon-container { + position: absolute; + right: 5px; + top: 5px; + } + + .ci-status-icon svg { + height: 20px; + width: 20px; + } + .dropdown-menu-toggle { background-color: transparent; border: none; @@ -504,16 +546,6 @@ } } - > .ci-action-icon-container { - position: absolute; - right: 5px; - top: 5px; - } - - .ci-status-icon svg { - height: 20px; - width: 20px; - } .arrow { &::before, @@ -596,29 +628,9 @@ } } } - - .grouped-pipeline-dropdown { - .dropdown-build { - .build-content { - width: 100%; - - &:hover { - background-color: $stage-hover-bg; - color: $gl-text-color; - } - } - - .ci-action-icon-container { - padding: 0; - font-size: 11px; - position: absolute; - top: 1px; - right: 8px; - } - } - } } +// Triggers the dropdown in the big pipeline graph .dropdown-counter-badge { color: $border-color; font-weight: 100; @@ -628,7 +640,8 @@ top: 8px; } -.grouped-pipeline-dropdown { +// Dropdown in the big pipeline graph +.big-pipeline-graph-dropdown-menu { padding: 0; width: 195px; min-width: 195px; @@ -636,56 +649,6 @@ right: -195px; top: -4px; box-shadow: 0 1px 5px $black-transparent; - - a { - display: inline-block; - } - - .dropdown-build { - .build-content { - width: 100%; - - &:hover { - background-color: $stage-hover-bg; - color: $gl-text-color; - } - } - - .ci-action-icon-container { - padding: 0; - font-size: 11px; - position: absolute; - margin-top: 3px; - right: 7px; - } - } - - ul { - max-height: 245px; - overflow: auto; - margin: 3px 0; - - li { - margin: 4px 8px 4px 9px; - padding: 0; - line-height: 1.1; - position: relative; - - .ci-action-icon-container:hover { - background-color: transparent; - } - - .ci-status-icon { - position: relative; - top: 2px; - } - } - } -} - -.pipeline-graph .dropdown-build .ci-status-icon svg { - width: 18px; - height: 18px; } .ci-status-text { @@ -699,177 +662,217 @@ font-weight: 200; } -// Action Icons -.ci-action-icon-container .ci-action-icon-wrapper { - i { - color: $border-color; - border-radius: 100%; - border: 1px solid $border-color; - padding: 5px 6px; - font-size: 13px; - background: $white-light; - height: 30px; - width: 30px; - - &::before { - position: relative; - top: 3px; - left: 3px; - } - - &:hover { - color: $gl-text-color; - background-color: $stage-hover-bg; - border: 1px solid $stage-hover-bg; - } - } +// Dropdown button in mini pipeline graph +.mini-pipeline-graph-dropdown-toggle { + border-radius: 100px; + background-color: $white-light; + border-width: 1px; + border-style: solid; + width: 22px; + height: 22px; + margin: 0; + padding: 0; + transition: all 0.2s linear; + position: relative; - .ci-play-icon { - padding: 5px 5px 5px 7px; + > .fa.fa-caret-down { + position: absolute; + left: 20px; + top: 5px; + display: inline-block; + visibility: hidden; + opacity: 0; + color: inherit; + font-size: 12px; + transition: visibility 0.1s, opacity 0.1s linear; } -} -.dropdown-build { - color: $gl-text-color-secondary; + &:active, + &:focus, + &:hover { + outline: none; + width: 35px; - .build-content { - padding: 4px 7px 8px; + .fa.fa-caret-down { + visibility: visible; + opacity: 1; + } } - .ci-action-icon-container { - padding: 0; - font-size: 11px; - float: right; - margin-top: 3px; - display: inline-block; - position: relative; + // Dropdown button animation in mini pipeline graph + &.ci-status-icon-success { + border-color: $gl-success; + color: $gl-success; - i { - font-size: 11px; - margin-top: 0; + &:hover, + &:focus, + &:active { + background-color: rgba($gl-success, 0.1); + border-color: $gl-success; } } - .ci-action-icon-container { - i { - width: 24px; - height: 24px; + &.ci-status-icon-failed { + border-color: $gl-danger; + color: $gl-danger; - &::before { - top: 1px; - left: 1px; - } + &:hover, + &:focus, + &:active { + background-color: rgba($gl-danger, 0.1); + border-color: $gl-danger; } } - .stage { - max-width: 100px; - width: 100px; - } - - .ci-status-icon svg { - height: 18px; - width: 18px; - } + &.ci-status-icon-pending, + &.ci-status-icon-success_with_warnings { + border-color: $gl-warning; + color: $gl-warning; - .ci-status-text { - max-width: 95px; + &:hover, + &:focus, + &:active { + background-color: rgba($gl-warning, 0.1); + border-color: $gl-warning; + } } -} -/** - * Builds dropdown in mini pipeline - */ -.mini-pipeline-graph { - .builds-dropdown { - background-color: transparent; - padding: 0; - color: $gl-text-color-secondary; - border: none; - margin: 0; + &.ci-status-icon-running { + border-color: $blue-normal; + color: $blue-normal; + &:hover, &:focus, - &:hover { - outline: none; - margin-right: -8px; - - .ci-status-icon { - width: 32px; - padding: 0 8px 0 0; - transition: width 0.1s cubic-bezier(0.25, 0, 1, 1); - - + .dropdown-caret { - visibility: visible; - opacity: 1; - } - } + &:active { + background-color: rgba($blue-normal, 0.1); + border-color: $blue-normal; } + } + + &.ci-status-icon-canceled, + &.ci-status-icon-disabled, + &.ci-status-icon-not-found, + &.ci-status-icon-manual { + border-color: $gl-text-color; + color: $gl-text-color; + &:hover, &:focus, &:active { - .ci-status-icon-success { - background-color: rgba($gl-success, .1); - } - - .ci-status-icon-failed { - background-color: rgba($gl-danger, .1); - } - - .ci-status-icon-pending, - .ci-status-icon-success_with_warnings { - background-color: rgba($gl-warning, .1); - } - - .ci-status-icon-running { - background-color: rgba($blue-normal, .1); - } + background-color: rgba($gl-text-color, 0.1); + border-color: $gl-text-color; + } + } - .ci-status-icon-canceled, - .ci-status-icon-disabled, - .ci-status-icon-not-found { - background-color: rgba($gl-text-color, .1); - } + &.ci-status-icon-created, + &.ci-status-icon-skipped { + border-color: $gray-darkest; + color: $gray-darkest; - .ci-status-icon-created, - .ci-status-icon-skipped { - background-color: rgba($gray-darkest, .1); - } + &:hover, + &:focus, + &:active { + background-color: rgba($gray-darkest, 0.1); + border-color: $gray-darkest; } + } +} - .mini-pipeline-graph-icon-container { - .dropdown-caret { - font-size: 11px; - position: absolute; - top: 6px; - left: 20px; - margin-right: -6px; - z-index: 2; - visibility: hidden; - opacity: 0; - transition: visibility 0.1s, opacity 0.1s linear; - } - } +// dropdown content for big and mini pipeline +.big-pipeline-graph-dropdown-menu, +.mini-pipeline-graph-dropdown-menu { + width: 195px; + max-width: 195px; + + li { + padding: 2px 3px; } - .dropdown-build .build-content { - padding: 3px 7px 7px; + .scrollable-menu { + max-height: 245px; + overflow: auto; } + // Loading icon .builds-dropdown-loading { - margin: 10px auto; - width: 18px; + margin: 0 auto; + width: 20px; + } + + // Action icon on the right + a.ci-action-icon-wrapper { + color: $action-icon-color; + border: 1px solid $action-icon-color; + border-radius: 20px; + width: 22px; + height: 22px; + padding: 2px 0 0 5px; + cursor: pointer; + float: right; + margin: -26px 9px 0 0; + font-size: 12px; + background-color: $white-light; + + &:hover, + &:focus { + text-decoration: none; + color: $gl-text-color; + background-color: $stage-hover-bg; + border: 1px solid transparent; + } } - .grouped-pipeline-dropdown { - right: -172px; - top: 23px; - min-height: 50px; + // link to the build + .mini-pipeline-graph-dropdown-item { + padding: 3px 7px 4px; + clear: both; + font-weight: normal; + line-height: 1.428571429; + white-space: nowrap; + margin: 0 5px; + border-radius: 3px; - a { + // build name + .ci-build-text { + font-weight: 200; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + width: 90px; color: $gl-text-color-secondary; + margin-left: 2px; + display: inline-block; + top: 1px; + vertical-align: text-bottom; + position: relative; + } + + // status icon on the left + .ci-status-icon { + top: 3px; + position: relative; + + > svg { + overflow: visible; + width: 18px; + height: 18px; + } + } + + &:hover, + &:focus { + outline: none; + text-decoration: none; + color: $gl-text-color; + background-color: $stage-hover-bg; } } +} +/** + * Top arrow in the dropdown in the mini pipeline graph + */ +.mini-pipeline-graph-dropdown-menu { .arrow-up { &::before, &::after { @@ -898,31 +901,8 @@ } /** - * Icons in mini pipeline graph + * Terminal */ -.mini-pipeline-graph-icon-container .ci-status-icon { - display: inline-block; - border: 1px solid; - border-radius: 22px; - margin-right: 1px; - width: 22px; - height: 22px; - position: relative; - z-index: 2; - transition: all 0.1s cubic-bezier(0.25, 0, 1, 1); - - svg { - top: -1px; - left: -1px; - } -} - -.stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg { - width: 22px; - height: 22px; -} - - .terminal-icon { margin-left: 3px; } -- cgit v1.2.1 From 5ab5c7552f1c73e06b565e4185d4b38315ed3f18 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Thu, 5 Jan 2017 10:47:49 -0600 Subject: Fix dropdown icon alignment --- app/assets/stylesheets/pages/pipelines.scss | 30 +++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 6061e53f386..ed53ad94021 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -339,7 +339,8 @@ white-space: nowrap; transition: max-height 0.3s, padding 0.3s; - ul { + .stage-column-list, + .builds-container > ul { padding: 0; } @@ -640,17 +641,6 @@ top: 8px; } -// Dropdown in the big pipeline graph -.big-pipeline-graph-dropdown-menu { - padding: 0; - width: 195px; - min-width: 195px; - left: auto; - right: -195px; - top: -4px; - box-shadow: 0 1px 5px $black-transparent; -} - .ci-status-text { max-width: 110px; white-space: nowrap; @@ -869,6 +859,22 @@ } } +// Dropdown in the big pipeline graph +.big-pipeline-graph-dropdown-menu { + width: 195px; + min-width: 195px; + left: auto; + right: -195px; + top: -4px; + box-shadow: 0 1px 5px $black-transparent; + + .mini-pipeline-graph-dropdown-item { + .ci-status-icon { + top: -1px; + } + } +} + /** * Top arrow in the dropdown in the mini pipeline graph */ -- cgit v1.2.1