diff options
Diffstat (limited to 'app/assets/stylesheets/framework')
20 files changed, 268 insertions, 87 deletions
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss index 4ae2b164d2e..06f7af33f94 100644 --- a/app/assets/stylesheets/framework/avatar.scss +++ b/app/assets/stylesheets/framework/avatar.scss @@ -60,7 +60,7 @@ } &:not([href]):hover { - border-color: rgba($avatar-border, .2); + border-color: darken($avatar-border, 10%); } } @@ -99,7 +99,7 @@ .avatar-counter { background-color: $gray-darkest; color: $white-light; - border: 1px solid $border-color; + border: 1px solid $avatar-border; border-radius: 1em; font-family: $regular_font; font-size: 9px; diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index 19166757e64..bb30da4f4b2 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -24,7 +24,7 @@ opacity: 0; transform: scale(.2); transform-origin: 0 -45px; - transition: .3s cubic-bezier(.67,.06,.19,1.44); + transition: .3s cubic-bezier(.67, .06, .19, 1.44); transition-property: transform, opacity; &.is-aligned-right { @@ -231,11 +231,11 @@ .award-control-icon-positive, .award-control-icon-super-positive { + @include transition(opacity, transform); position: absolute; left: 10px; bottom: 6px; opacity: 0; - @include transition(opacity, transform); } .award-control-text { diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss index a2fa2e7769b..6bb096fc5bd 100644 --- a/app/assets/stylesheets/framework/blank.scss +++ b/app/assets/stylesheets/framework/blank.scss @@ -1,9 +1,14 @@ -.blank-state-welcome { - text-align: center; - border-bottom: 1px solid $border-color; +.blank-state-parent-container { + .section-container { + padding: 10px; + } - .blank-state-text { - margin-bottom: 0; + .section-body { + width: 100%; + height: 100%; + padding-bottom: 25px; + border: 1px solid $border-color; + border-radius: $border-radius-default; } } @@ -11,41 +16,35 @@ padding-top: 20px; padding-bottom: 20px; text-align: center; -} -.blank-state-no-icon { - padding-top: 40px; - padding-bottom: 40px; -} - -.blank-state-icon { - padding-bottom: 20px; - color: $gray-darkest; - font-size: 56px; + &.blank-state-welcome { + .blank-state-welcome-title { + font-size: 24px; + } - path, - polygon { - fill: currentColor; + .blank-state-text { + margin-bottom: 0; + } } -} -.blank-state-title { - margin-top: 0; - margin-bottom: 5px; - font-size: 18px; - font-weight: normal; -} + .blank-state-icon { + padding-bottom: 20px; -.blank-state-text { - margin-top: 0; - margin-bottom: $gl-padding; - font-size: 14px; + svg { + display: block; + margin: auto; + } + } - > strong { - font-weight: 600; + .blank-state-title { + margin-top: 0; + margin-bottom: 10px; + font-size: 18px; } -} -.blank-state-welcome-title { - font-size: 24px; + .blank-state-text { + max-width: $container-text-max-width; + margin: 0 auto $gl-padding; + font-size: 14px; + } } diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 4369ae78bde..6eabdc63d9e 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -20,17 +20,29 @@ color: $text; border-color: $border; + > .icon { + color: $text; + } + &:hover, &:focus { background-color: $hover-background; border-color: $hover-border; color: $hover-text; + + > .icon { + color: $hover-text; + } } &:active { background-color: $active-background; border-color: $active-border; color: $hover-text; + + > .icon { + color: $hover-text; + } } } @@ -163,7 +175,8 @@ @include btn-orange; } - &.btn-close { + &.btn-close, + &.btn-close-color { @include btn-outline($white-light, $orange-600, $orange-500, $orange-500, $white-light, $orange-600, $orange-600, $orange-700); } @@ -181,7 +194,8 @@ float: right; } - &.btn-reopen { + &.btn-reopen, + .btn-reopen-color { /* should be same as parent class for now */ } diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 00c981f64c5..5e374360359 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -336,11 +336,6 @@ table { text-align: center; } -#nprogress .spinner { - top: 15px !important; - right: 10px !important; -} - .header-with-avatar { h3 { margin: 0; @@ -450,4 +445,3 @@ table { pointer-events: none; opacity: .5; } - diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index cba890ce831..5e410cbf563 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -35,8 +35,8 @@ .open { .dropdown-menu, .dropdown-menu-nav { - display: block; @include set-visible; + display: block; @media (max-width: $screen-xs-max) { width: 100%; @@ -184,13 +184,15 @@ .dropdown-menu, .dropdown-menu-nav { + @include set-invisible; display: block; position: absolute; - width: 100%; + width: auto; top: 100%; left: 0; z-index: 9; min-width: 240px; + max-width: 500px; margin-top: 2px; margin-bottom: 0; font-size: 14px; @@ -200,10 +202,10 @@ border: 1px solid $dropdown-border-color; border-radius: $border-radius-base; box-shadow: 0 2px 4px $dropdown-shadow-color; - @include set-invisible; @media (max-width: $screen-sm-min) { width: 100%; + min-width: 180px; } &.dropdown-open-left { @@ -287,17 +289,80 @@ padding: 5px 8px; color: $gl-text-color-secondary; } +} - .badge { - position: absolute; - right: 8px; - top: 5px; +.droplab-dropdown { + .dropdown-toggle > i { + pointer-events: none; + } + + .dropdown-menu li { + padding: $gl-btn-padding; + cursor: pointer; + + > a, + > button { + display: flex; + margin: 0; + padding: 0; + border-radius: 0; + text-overflow: inherit; + background-color: inherit; + color: inherit; + border: inherit; + text-align: left; + + &:hover, + &:focus { + background-color: inherit; + color: inherit; + } + + &.btn .fa:not(:last-child) { + margin-left: 5px; + } + } + + &:hover, + &:focus { + background-color: $dropdown-hover-color; + color: $white-light; + } + + &.droplab-item-selected i { + visibility: visible; + } + + &.divider { + margin: 0 8px; + padding: 0; + border-top: $gray-darkest; + } + + .icon { + visibility: hidden; + } + + .description { + display: inline-block; + white-space: normal; + margin-left: 5px; + + p { + margin-bottom: 0; + } + } + } + + .icon { + display: inline-block; + vertical-align: top; + padding-top: 2px; } } -.filtered-search-box-input-container .dropdown-menu, -.filtered-search-box-input-container .dropdown-menu-nav, -.comment-type-dropdown .dropdown-menu { +.droplab-dropdown .dropdown-menu, +.droplab-dropdown .dropdown-menu-nav { display: none; opacity: 1; visibility: visible; @@ -395,6 +460,7 @@ .dropdown-menu-align-right { left: auto; right: 0; + margin-top: -5px; } .dropdown-menu-selectable { @@ -605,8 +671,8 @@ } .pika-single { - position: relative!important; - top: 0!important; + position: relative !important; + top: 0 !important; border: 0; box-shadow: none; } diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index da03e4f5b5e..c7c2684d548 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -12,6 +12,14 @@ &.readme-holder { margin: $gl-padding 0; + + &.limited-width-container .file-content { + max-width: $limited-layout-width-sm; + margin-left: auto; + margin-right: auto; + padding-top: 64px; + padding-bottom: 64px; + } } table { @@ -123,7 +131,7 @@ } /** - * Annotate file + * Blame file */ &.blame { table { diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 767cf5ffea5..41184907abb 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -70,6 +70,13 @@ .input-token { max-width: 200px; + padding: 0; + + &:hover, + &:focus { + background-color: inherit; + color: inherit; + } } .input-token:only-child, @@ -156,6 +163,16 @@ } } +.droplab-dropdown li.filtered-search-token { + padding: 0; + + &:hover, + &:focus { + background-color: inherit; + color: inherit; + } +} + .filtered-search-term { .name { background-color: inherit; @@ -258,7 +275,7 @@ } .filtered-search-input-dropdown-menu { - max-height: 215px; + max-height: 225px; max-width: 280px; overflow: auto; @@ -351,7 +368,7 @@ margin-right: 0.3em; } - & > .value { + > .value { font-weight: 600; } } @@ -365,10 +382,6 @@ } } -.dropdown-menu .filter-dropdown-item { - padding: 0; -} - @media (max-width: $screen-xs-max) { .issues-details-filters { padding: 0 0 10px; @@ -418,6 +431,7 @@ .fa { width: 15px; + line-height: $line-height-base; } .dropdown-label-box { @@ -450,7 +464,7 @@ -webkit-flex-direction: column; flex-direction: column; - &> span { + > span { white-space: normal; word-break: break-all; } diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index d8645afb7da..20fb10c28d4 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -34,6 +34,8 @@ header { top: 0; left: 0; right: 0; + color: $gl-text-color-secondary; + border-radius: 0; @media (max-width: $screen-xs-min) { padding: 0 16px; @@ -59,7 +61,7 @@ header { padding: 0; .nav > li > a { - color: $gl-text-color-secondary; + color: currentColor; font-size: 18px; padding: 0; margin: (($header-height - 28) / 2) 3px; @@ -84,7 +86,7 @@ header { &:hover, &:focus, &:active { - background-color: $gray-light; + background-color: transparent; color: $gl-text-color; svg { @@ -96,13 +98,19 @@ header { font-size: 14px; } + .fa-chevron-down { + position: relative; + top: -3px; + font-size: 10px; + } + svg { position: relative; top: 2px; height: 17px; // hack to get SVG to line up with FA icons width: 23px; - fill: $gl-text-color-secondary; + fill: currentColor; } } @@ -225,7 +233,7 @@ header { } a { - color: $gl-text-color; + color: currentColor; &:hover { text-decoration: underline; @@ -322,7 +330,7 @@ header { padding-left: 5px; .nav > li:not(.hidden-xs) { - display: table-cell!important; + display: table-cell !important; width: 25%; a { @@ -346,6 +354,8 @@ header { width: auto; min-width: 140px; margin-top: -5px; + color: $gl-text-color; + left: auto; .current-user { padding: 5px 18px; diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss index 6d27d7568cf..71d5949b023 100644 --- a/app/assets/stylesheets/framework/highlight.scss +++ b/app/assets/stylesheets/framework/highlight.scss @@ -61,7 +61,7 @@ &:focus { outline: none; - & i { + i { visibility: visible; } } diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index 185d11dfdd7..70c830382df 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -53,7 +53,7 @@ body { } &.limit-container-width-sm { - max-width: 790px; + max-width: $limited-layout-width-sm; } } diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index 38727e15c6f..868e65a8f46 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -236,6 +236,8 @@ ul.content-list { ul.controls { float: right; list-style: none; + display: flex; + align-items: center; .btn { padding: 10px 14px; @@ -259,6 +261,12 @@ ul.controls { } } } + + .issuable-pipeline-broken a, + .issuable-pipeline-status a, + .author_link { + display: flex; + } } ul.indent-list { @@ -343,6 +351,12 @@ ul.indent-list { .group-row { padding: 0; border: none; + + &:last-of-type { + .group-row-contents:not(:hover) { + border-bottom: 1px solid transparent; + } + } } .group-row-contents { diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index b21bcc22a87..a2de4598167 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -165,8 +165,8 @@ .cur { .avatar { - border: 1px solid $white-light; @include disableAllAnimation; + border: 1px solid $white-light; } } diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss index 7098203321d..a28f54936be 100644 --- a/app/assets/stylesheets/framework/modal.scss +++ b/app/assets/stylesheets/framework/modal.scss @@ -21,3 +21,9 @@ body.modal-open { width: 860px; } } + +@media (min-width: $screen-lg-min) { + .modal-full { + width: 98%; + } +} diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index 28b2a7cfacd..e71bf04aec7 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -325,7 +325,7 @@ position: absolute; top: 7px; right: 15px; - z-index: 2; + z-index: 300; li.active { font-weight: bold; diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss index d2c90908baa..8e653c443cf 100644 --- a/app/assets/stylesheets/framework/responsive-tables.scss +++ b/app/assets/stylesheets/framework/responsive-tables.scss @@ -100,9 +100,9 @@ } .table-mobile-header { + @include flex-max-width(40); color: $gl-text-color-secondary; text-align: left; - @include flex-max-width(40); @media (min-width: $screen-md-min) { display: none; diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 5cf9330b8f8..542b641e3dd 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -92,7 +92,7 @@ @mixin maintain-sidebar-dimensions { display: block; width: $gutter-width; - padding: 10px 20px; + padding: 10px 0; } .issues-bulk-update.right-sidebar { diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 785b09e622f..8a58c1ed567 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -2,6 +2,10 @@ color: $gl-text-color; word-wrap: break-word; + [dir="auto"] { + text-align: initial; + } + a { color: $md-link-color; } @@ -112,9 +116,12 @@ blockquote p { color: $gl-grayish-blue !important; - margin: 0; font-size: inherit; line-height: 1.5; + + &:last-child { + margin: 0; + } } p { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 3e2de82c830..6b96a88e7ac 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -74,6 +74,18 @@ $red-700: #a62d19; $red-800: #8b2615; $red-900: #711e11; +$indigo-50: #f7f7ff; +$indigo-100: #ebebfa; +$indigo-200: #d1d1f0; +$indigo-300: #a6a6de; +$indigo-400: #7c7ccc; +$indigo-500: #6666c4; +$indigo-600: #5b5bbd; +$indigo-700: #4b4ba3; +$indigo-800: #393982; +$indigo-900: #292961; +$indigo-950: #1a1a40; + $black: #000; $black-transparent: rgba(0, 0, 0, 0.3); $almost-black: #242424; @@ -99,9 +111,10 @@ $well-light-text-color: #5b6169; * Text */ $gl-font-size: 14px; -$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-color: #2e2e2e; +$gl-text-color-secondary: #707070; +$gl-text-color-tertiary: #949494; +$gl-text-color-quaternary: #d6d6d6; $gl-text-color-inverted: rgba(255, 255, 255, 1.0); $gl-text-color-secondary-inverted: rgba(255, 255, 255, .85); $gl-text-green: $green-600; @@ -115,7 +128,7 @@ $gl-gray-dark: #313236; $gl-gray-light: #5c5c5c; $gl-header-color: #4c4e54; $gl-header-nav-hover-color: #434343; -$placeholder-text-color: rgba(0, 0, 0, .42); +$placeholder-text-color: $gl-text-color-tertiary; /* * Lists @@ -123,7 +136,7 @@ $placeholder-text-color: rgba(0, 0, 0, .42); $list-font-size: $gl-font-size; $list-title-color: $gl-text-color; $list-text-color: $gl-text-color; -$list-text-disabled-color: $gl-text-color-disabled; +$list-text-disabled-color: $gl-text-color-tertiary; $list-border-light: #eee; $list-border: rgba(0, 0, 0, 0.05); $list-text-height: 42px; @@ -147,6 +160,7 @@ $code_line_height: 1.6; * Padding */ $gl-padding: 16px; +$gl-col-padding: 15px; $gl-btn-padding: 10px; $gl-input-padding: 10px; $gl-vert-padding: 6px; @@ -162,6 +176,8 @@ $progress-color: #c0392b; $header-height: 50px; $fixed-layout-width: 1280px; $limited-layout-width: 990px; +$limited-layout-width-sm: 790px; +$container-text-max-width: 540px; $gl-avatar-size: 40px; $error-exclamation-point: $red-500; $border-radius-default: 3px; @@ -257,7 +273,7 @@ $diff-view-modes-border: #c1c1c1; /* * Fonts */ -$monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace; +$monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace; $regular_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* @@ -302,7 +318,7 @@ $badge-color: $gl-text-color-secondary; /* * Award emoji */ -$award-emoji-menu-shadow: rgba(0,0,0,.175); +$award-emoji-menu-shadow: rgba(0, 0, 0, .175); $award-emoji-positive-add-bg: #fed159; $award-emoji-positive-add-lines: #bb9c13; @@ -364,7 +380,7 @@ $issue-boards-card-shadow: rgba(186, 186, 186, 0.5); * Avatar */ $avatar_radius: 50%; -$avatar-border: rgba(0, 0, 0, .1); +$avatar-border: $border-color; $gl-avatar-size: 40px; /* @@ -436,6 +452,7 @@ $logs-p-color: #333; /* * Forms */ +$input-height: 34px; $input-danger-bg: #f2dede; $input-danger-border: $red-400; $input-group-addon-bg: #f7f8fa; @@ -552,7 +569,7 @@ $kdb-color: #555; $kdb-border: #ccc; $kdb-border-bottom: #bbb; $kdb-shadow: #bbb; -$body-text-shadow: rgba(255,255,255,0.01); +$body-text-shadow: rgba(255, 255, 255, 0.01); /* * UI Dev Kit @@ -568,6 +585,12 @@ $stage-hover-border: #d1e7fc; $action-icon-color: #d6d6d6; /* +Pipeline Schedules +*/ +$pipeline-variable-remove-button-width: calc(1em + #{2 * $gl-padding}); + + +/* Filtered Search */ $filter-name-resting-color: #f8f8f8; @@ -594,3 +617,15 @@ Repo editor $repo-editor-grey: #f6f7f9; $repo-editor-grey-darker: #e9ebee; $repo-editor-linear-gradient: linear-gradient(to right, $repo-editor-grey 0%, $repo-editor-grey-darker, 20%, $repo-editor-grey 40%, $repo-editor-grey 100%); + +/* +Performance Bar +*/ +$perf-bar-text: #999; +$perf-bar-production: #222; +$perf-bar-staging: #291430; +$perf-bar-development: #4c1210; +$perf-bar-bucket-bg: #111; +$perf-bar-bucket-color: #ccc; +$perf-bar-bucket-box-shadow-from: rgba($white-light, .2); +$perf-bar-bucket-box-shadow-to: rgba($black, .25); diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index 1c1392f8f67..b1ff2659131 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -3,6 +3,7 @@ color: $gl-text-color; border: 1px solid $border-color; border-radius: $border-radius-default; + margin-bottom: $gl-padding; .well-segment { padding: $gl-padding; @@ -21,6 +22,11 @@ font-size: 12px; } } + + &.admin-well h4 { + border-bottom: 1px solid $border-color; + padding-bottom: 8px; + } } .icon-container { @@ -53,6 +59,14 @@ padding: 15px; } +.dark-well { + background-color: $gray-normal; + + .btn { + width: 100%; + } +} + .well-centered { h1 { font-weight: normal; |