diff options
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r-- | app/assets/stylesheets/framework/files.scss | 51 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/page-header.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/responsive-tables.scss | 48 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 7 | ||||
-rw-r--r-- | app/assets/stylesheets/mailers/devise.scss | 140 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/environments.scss | 37 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/milestone.scss | 6 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/pipelines.scss | 176 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/status.scss | 182 |
9 files changed, 216 insertions, 435 deletions
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index d08df05fd6c..da03e4f5b5e 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -59,6 +59,44 @@ } } + .file-blame-legend { + background-color: $gray-light; + text-align: right; + padding: 8px $gl-padding; + border-bottom: 1px solid $border-color; + + @media (max-width: $screen-xs-max) { + text-align: left; + } + + .left-label { + padding-right: 5px; + } + + .right-label { + padding-left: 5px; + } + + .legend-box { + display: inline-block; + width: 10px; + height: 10px; + padding: 0 2px; + } + + @for $i from 0 through 5 { + .legend-box-#{$i} { + background-color: mix($blame-cyan, $blame-blue, $i / 5.0 * 100%); + } + } + + @for $i from 1 through 4 { + .legend-box-#{$i + 5} { + background-color: mix($blame-gray, $blame-cyan, $i / 4.0 * 100%); + } + } + } + .file-content { background: $white-light; @@ -118,6 +156,19 @@ padding: 5px 10px; min-width: 400px; background: $gray-light; + border-left: 3px solid; + } + + @for $i from 0 through 5 { + td.blame-commit-age-#{$i} { + border-left-color: mix($blame-cyan, $blame-blue, $i / 5.0 * 100%); + } + } + + @for $i from 1 through 4 { + td.blame-commit-age-#{$i + 5} { + border-left-color: mix($blame-gray, $blame-cyan, $i / 4.0 * 100%); + } } td.line-numbers { diff --git a/app/assets/stylesheets/framework/page-header.scss b/app/assets/stylesheets/framework/page-header.scss index 5f4211147f3..f1ecd050a0a 100644 --- a/app/assets/stylesheets/framework/page-header.scss +++ b/app/assets/stylesheets/framework/page-header.scss @@ -59,4 +59,8 @@ margin: 0 2px 0 3px; } } + + .ci-status { + margin-right: 10px; + } } diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss index f0a4c66aa1a..d2c90908baa 100644 --- a/app/assets/stylesheets/framework/responsive-tables.scss +++ b/app/assets/stylesheets/framework/responsive-tables.scss @@ -36,13 +36,58 @@ align-self: stretch; padding: 10px; align-items: center; - height: 62px; + min-height: 62px; &:not(:first-of-type) { border-top: 1px solid $white-normal; } } } + + &.section-wrap { + white-space: normal; + + @media (max-width: $screen-sm-max) { + flex-wrap: wrap; + } + } + } +} + + +.table-button-footer { + @media (min-width: $screen-md-min) { + text-align: right; + } + + @media (max-width: $screen-sm-max) { + background-color: $gray-normal; + align-self: stretch; + border-top: 1px solid $border-color; + + .table-action-buttons { + padding: 10px 5px; + display: flex; + + .btn { + border-radius: 3px; + } + + > .btn-group, + > .external-url, + > .btn { + flex: 1 1 28px; + margin: 0 5px; + } + + .dropdown-new { + width: 100%; + } + + .dropdown-menu { + min-width: initial; + } + } } } @@ -56,6 +101,7 @@ .table-mobile-header { color: $gl-text-color-secondary; + text-align: left; @include flex-max-width(40); @media (min-width: $screen-md-min) { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 4114a050d9a..49ba0108228 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -365,6 +365,13 @@ $avatar-border: rgba(0, 0, 0, .1); $gl-avatar-size: 40px; /* +* Blame +*/ +$blame-gray: #ededed; +$blame-cyan: #acd5f2; +$blame-blue: #254e77; + +/* * Builds */ $builds-trace-bg: #111; diff --git a/app/assets/stylesheets/mailers/devise.scss b/app/assets/stylesheets/mailers/devise.scss deleted file mode 100644 index 9f613710cf4..00000000000 --- a/app/assets/stylesheets/mailers/devise.scss +++ /dev/null @@ -1,140 +0,0 @@ -@import "framework/variables"; - -// NOTE: This stylesheet is for the exclusive use of the `devise_mailer` layout -// used for Devise email templates, and _should not_ be included in any -// application stylesheets. -// -// Styles defined here are embedded directly into the resulting email HTML via -// the `premailer` gem. - -$body-background-color: #363636; -$message-background-color: #fafafa; - -$header-color: #6b4fbb; -$body-color: #444; -$cta-color: #e14329; -$footer-link-color: #7e7e7e; - -$font-family: Helvetica, Arial, sans-serif; - -body { - background-color: $body-background-color; - font-family: $font-family; - margin: 0; - padding: 0; -} - -table { - -premailer-cellpadding: 0; - -premailer-cellspacing: 0; - - border: 0; - border-collapse: separate; - - &#wrapper { - background-color: $body-background-color; - width: 100%; - } - - &#header { - margin: 0 auto; - text-align: left; - width: 600px; - - & > td { - text-align: center; - } - } - - &#body { - background-color: $message-background-color; - border: 1px solid $black; - border-radius: 4px; - margin: 0 auto; - width: 600px; - } - - &#footer { - color: $footer-link-color; - font-size: 14px; - text-align: center; - width: 100%; - } - - td { - &#body-container { - padding: 20px 40px; - } - } -} - -.center { - text-align: center; -} - -#logo { - border: none; - outline: none; - min-height: 88px; - width: 134px; -} - -#content { - h2 { - color: $header-color; - font-size: 30px; - font-weight: 400; - line-height: 34px; - margin-top: 0; - } - - p { - color: $body-color; - font-size: 17px; - line-height: 24px; - margin-bottom: 0; - } -} - -#cta { - border: 1px solid $cta-color; - border-radius: 3px; - display: inline-block; - margin: 20px 0; - padding: 12px 24px; - - a { - background-color: $message-background-color; - color: $cta-color; - display: inline-block; - text-decoration: none; - } -} - -#tanuki { - padding: 40px 0 0; - - img { - border: none; - outline: none; - width: 37px; - min-height: 36px; - } -} - -#tagline { - font-size: 22px; - font-weight: 100; - padding: 4px 0 40px; -} - -#social { - padding: 0 10px 20px; - width: 600px; - word-spacing: 20px; - - a { - color: $footer-link-color; - text-decoration: none; - } -} diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index b24803678ea..89bd437b362 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -124,43 +124,6 @@ } .gl-responsive-table-row { - .environments-actions { - @media (min-width: $screen-md-min) { - text-align: right; - } - - @media (max-width: $screen-sm-max) { - background-color: $gray-normal; - align-self: stretch; - border-top: 1px solid $border-color; - - .environment-action-buttons { - padding: 10px 5px; - display: flex; - - .btn { - border-radius: 3px; - } - - > .btn-group, - > .external-url, - > .btn { - flex: 1; - flex-basis: 28px; - margin: 0 5px; - } - - .dropdown-new { - width: 100%; - } - - .dropdown-menu { - min-width: initial; - } - } - } - } - .branch-commit { max-width: 100%; } diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 335e587b8f4..55e0ee1936e 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -111,8 +111,8 @@ } } -.issues-sortable-list, -.merge_requests-sortable-list { +.milestone-issues-list, +.milestone-merge_requests-list { .issuable-detail { display: block; margin-top: 7px; @@ -197,6 +197,4 @@ .issuable-row { background-color: $white-light; - cursor: -webkit-grab; - cursor: grab; } diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 3d88e273a9e..a85ba3a5955 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -10,17 +10,13 @@ .table-holder { width: 100%; - - @media (max-width: $screen-sm-max) { - overflow: auto; - } } .commit-title { margin: 0; } - .table.ci-table { + .ci-table { .label { margin-bottom: 3px; @@ -30,11 +26,6 @@ color: $black; } - .stage-cell { - min-width: 130px; // Guarantees we show at least 4 stages in line - width: 20%; - } - .pipelines-time-ago { text-align: right; } @@ -108,39 +99,7 @@ } } -.table.ci-table { - - &.builds-page tbody tr { - height: 71px; - } - - tr { - th { - padding: 16px 8px; - border: none; - } - - td { - padding: 10px 8px; - } - - td.environments-actions { - padding-right: 0; - } - - td.stage-cell { - padding: 10px 0; - } - - .commit-link { - padding: 9px 8px 10px 2px; - } - } - - tbody { - border-top-width: 1px; - } - +.ci-table { .build.retried { background-color: $gray-lightest; } @@ -194,13 +153,6 @@ color: $gl-link-color; } - .commit-title { - max-width: 225px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - .label { margin-right: 4px; } @@ -253,11 +205,7 @@ } .stage-cell { - font-size: 0; - padding: 0 4px; - - > .stage-container > div > button > span > svg, - > .stage-container > button > svg { + .mini-pipeline-graph-dropdown-toggle svg { height: 22px; width: 22px; position: absolute; @@ -631,6 +579,23 @@ font-weight: normal; } +@mixin mini-pipeline-graph-color($color-light, $color-main, $color-dark) { + border-color: $color-main; + color: $color-main; + + &:hover, + &:focus, + &:active { + background-color: $color-light; + border-color: $color-dark; + color: $color-dark; + + svg { + fill: $color-dark; + } + } +} + // Dropdown button in mini pipeline graph .mini-pipeline-graph-dropdown-toggle { border-radius: 100px; @@ -670,100 +635,32 @@ // Dropdown button animation in mini pipeline graph &.ci-status-icon-success { - border-color: $green-500; - color: $green-500; - - &:hover, - &:focus, - &:active { - background-color: $green-50; - border-color: $green-600; - color: $green-600; - - svg { - fill: $green-600; - } - } + @include mini-pipeline-graph-color($green-50, $green-500, $green-600); } &.ci-status-icon-failed { - border-color: $red-500; - color: $red-500; - - &:hover, - &:focus, - &:active { - background-color: $red-50; - border-color: $red-600; - color: $red-600; - - svg { - fill: $red-600; - } - } + @include mini-pipeline-graph-color($red-50, $red-500, $red-600); } &.ci-status-icon-pending, &.ci-status-icon-success_with_warnings { - border-color: $orange-500; - color: $orange-500; - - &:hover, - &:focus, - &:active { - background-color: $orange-50; - border-color: $orange-600; - color: $orange-600; - - svg { - fill: $orange-600; - } - } + @include mini-pipeline-graph-color($orange-50, $orange-500, $orange-600); } &.ci-status-icon-running { - border-color: $blue-400; - color: $blue-400; - - &:hover, - &:focus, - &:active { - background-color: $blue-50; - border-color: $blue-600; - color: $blue-600; - - svg { - fill: $blue-600; - } - } + @include mini-pipeline-graph-color($blue-50, $blue-400, $blue-600); } &.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 { - background-color: rgba($gl-text-color, 0.1); - border-color: $gl-text-color; - } + @include mini-pipeline-graph-color(rgba($gl-text-color, 0.1), $gl-text-color, $gl-text-color); } &.ci-status-icon-created, &.ci-status-icon-skipped { - border-color: $gray-darkest; - color: $gray-darkest; - - &:hover, - &:focus, - &:active { - background-color: rgba($gray-darkest, 0.1); - border-color: $gray-darkest; - } + @include mini-pipeline-graph-color(rgba($gray-darkest, 0.1), $gray-darkest, $gray-darkest); } } @@ -842,6 +739,10 @@ top: 1px; vertical-align: text-bottom; position: relative; + + @media (max-width: $screen-xs-max) { + max-width: 60%; + } } // status icon on the left @@ -932,6 +833,11 @@ left: 50%; transform: translate(-50%, 0); border-width: 0 5px 6px; + + @media (max-width: $screen-sm-max) { + left: 100%; + margin-left: -12px; + } } &::before { @@ -949,9 +855,15 @@ * Center dropdown menu in mini graph */ .mini-pipeline-graph-dropdown-menu.dropdown-menu { - right: auto; - left: 50%; - transform: translate(-50%, 0); + transform: translate(-80%, 0); + min-width: 150px; + + @media(min-width: $screen-md-min) { + transform: translate(-50%, 0); + right: auto; + left: 50%; + min-width: 240px; + } } /** * Terminal diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index 4ed8617b6a3..67ad1ae60af 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -1,142 +1,82 @@ -.container-fluid { - .ci-status { - padding: 2px 7px 4px; - margin-right: 10px; - border: 1px solid $gray-darker; - white-space: nowrap; - border-radius: 4px; - - &:hover, - &:focus { - text-decoration: none; - } - - svg { - height: 13px; - width: 13px; - position: relative; - top: 2px; - overflow: visible; - } +@mixin status-color($color-light, $color-main, $color-dark) { + color: $color-main; + border-color: $color-main; - &.ci-failed { - color: $red-500; - border-color: $red-500; + &:not(span):hover { + background-color: $color-light; + color: $color-dark; + border-color: $color-dark; - &:not(span):hover { - background-color: $red-50; - color: $red-600; - border-color: $red-600; - - svg { - fill: $red-600; - } - } - - svg { - fill: $red-500; - } + svg { + fill: $color-dark; } + } - &.ci-success { - color: $green-600; - border-color: $green-500; + svg { + fill: $color-main; + } +} - &:not(span):hover { - background-color: $green-50; - color: $green-700; - border-color: $green-600; +.ci-status { + padding: 2px 7px 4px; + border: 1px solid $gray-darker; + white-space: nowrap; + border-radius: 4px; - svg { - fill: $green-600; - } - } + &:hover, + &:focus { + text-decoration: none; + } - svg { - fill: $green-500; - } - } + svg { + height: 13px; + width: 13px; + position: relative; + top: 2px; + overflow: visible; + } - &.ci-canceled, - &.ci-disabled { - color: $gl-text-color; - border-color: $gl-text-color; + &.ci-failed { + @include status-color($red-50, $red-500, $red-600); + } - &:not(span):hover { - background-color: rgba($gl-text-color, .07); - } + &.ci-success { + @include status-color($green-50, $green-500, $green-700); + } - svg { - fill: $gl-text-color; - } - } + &.ci-canceled, + &.ci-disabled, + &.ci-manual { + color: $gl-text-color; + border-color: $gl-text-color; - &.ci-pending, - &.ci-success_with_warnings, - &.ci-failed_with_warnings { - color: $orange-600; - border-color: $orange-500; - - &:not(span):hover { - background-color: $orange-50; - color: $orange-700; - border-color: $orange-600; - - svg { - fill: $orange-600; - } - } - - svg { - fill: $orange-500; - } + &:not(span):hover { + background-color: rgba($gl-text-color, .07); } + } - &.ci-info, - &.ci-running { - color: $blue-500; - border-color: $blue-500; - - &:not(span):hover { - background-color: $blue-50; - color: $blue-600; - border-color: $blue-600; - - svg { - fill: $blue-600; - } - } - - svg { - fill: $blue-500; - } - } + &.ci-pending, + &.ci-failed_with_warnings, + &.ci-success_with_warnings { + @include status-color($orange-50, $orange-500, $orange-700); + } - &.ci-created, - &.ci-skipped { - color: $gl-text-color-secondary; - border-color: $gl-text-color-secondary; + &.ci-info, + &.ci-running { + @include status-color($blue-50, $blue-500, $blue-600); + } - &:not(span):hover { - background-color: rgba($gl-text-color-secondary, .07); - } + &.ci-created, + &.ci-skipped { + color: $gl-text-color-secondary; + border-color: $gl-text-color-secondary; - svg { - fill: $gl-text-color-secondary; - } + &:not(span):hover { + background-color: rgba($gl-text-color-secondary, .07); } - &.ci-manual { - color: $gl-text-color; - border-color: $gl-text-color; - - &:not(span):hover { - background-color: rgba($gl-text-color, .07); - } - - svg { - fill: $gl-text-color; - } + svg { + fill: $gl-text-color-secondary; } } } |