diff options
Diffstat (limited to 'app/assets/stylesheets/framework')
| -rw-r--r-- | app/assets/stylesheets/framework/animations.scss | 3 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/blocks.scss | 10 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/buttons.scss | 22 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/dropdowns.scss | 4 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/gitlab-theme.scss | 6 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/header.scss | 595 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/images.scss | 1 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/layout.scss | 4 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/modal.scss | 13 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/new-nav.scss | 404 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/new-sidebar.scss | 10 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/secondary-navigation-elements.scss (renamed from app/assets/stylesheets/framework/nav.scss) | 335 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/sidebar.scss | 6 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/timeline.scss | 6 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 11 |
15 files changed, 531 insertions, 899 deletions
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index 667b73e150d..f0e6b23757f 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -115,8 +115,7 @@ @return $unfoldedTransition; } -.btn, -.global-dropdown-toggle { +.btn { @include transition(background-color, border-color, color, box-shadow); } diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index 1d72a70f0f5..dbd990f84c1 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -207,6 +207,16 @@ &.user-cover-block { padding: 24px 0 0; + + .nav-links { + justify-content: center; + width: 100%; + float: none; + + &.scrolling-tabs { + float: none; + } + } } .group-info { diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index c77160a678b..b131e2d57ee 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -1,3 +1,25 @@ +@mixin btn-comment-icon { + border-radius: 50%; + background: $white-light; + padding: 1px 5px; + font-size: 12px; + color: $blue-500; + width: 23px; + height: 23px; + border: 1px solid $blue-500; + + &:hover, + &.inverted { + background: $blue-500; + border-color: $blue-600; + color: $white-light; + } + + &:active { + outline: 0; + } +} + @mixin btn-default { border-radius: 3px; font-size: $gl-font-size; diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index fa92d4ccf4f..5b950ae0ba0 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -749,7 +749,7 @@ margin-bottom: $dropdown-vertical-offset; } - li { + li:not(.dropdown-bold-header) { display: block; padding: 0 1px; @@ -889,7 +889,7 @@ @include new-style-dropdown('.breadcrumbs-list .dropdown '); @include new-style-dropdown('.js-namespace-select + '); -header.navbar-gitlab-new .header-content .dropdown-menu.projects-dropdown-menu { +header.header-content .dropdown-menu.projects-dropdown-menu { padding: 0; } diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss index a6bdcf46aa7..52b87de7a3d 100644 --- a/app/assets/stylesheets/framework/gitlab-theme.scss +++ b/app/assets/stylesheets/framework/gitlab-theme.scss @@ -5,7 +5,7 @@ @mixin gitlab-theme($color-100, $color-200, $color-500, $color-700, $color-800, $color-900, $color-alternate) { // Header - header.navbar-gitlab-new { + .navbar-gitlab { background-color: $color-900; .navbar-collapse { @@ -200,9 +200,9 @@ body { &.ui_light { @include gitlab-theme($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-700, $theme-gray-700, $theme-gray-100, $theme-gray-700); - header.navbar-gitlab-new { + .navbar-gitlab { background-color: $theme-gray-100; - box-shadow: 0 2px 0 0 $border-color; + box-shadow: 0 1px 0 0 $border-color; .logo-text svg { fill: $theme-gray-900; diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index d932ea8794f..22945e935ef 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -1,112 +1,37 @@ -/* - * Application Header - * - */ +.content-wrapper.page-with-new-nav { + margin-top: $header-height; +} -header { +.navbar-gitlab { @include new-style-dropdown; - transition: padding $sidebar-transition-duration; - - &.navbar-empty { - height: $header-height; - background: $white-light; - border-bottom: 1px solid $white-normal; - - .center-logo { - margin: 8px 0; - text-align: center; - - .tanuki-logo, - img { - height: 36px; - } - } - } - &.navbar-gitlab { padding: 0 16px; z-index: 1000; margin-bottom: 0; min-height: $header-height; - background-color: $gray-light; border: none; border-bottom: 1px solid $border-color; position: fixed; top: 0; left: 0; right: 0; - color: $gl-text-color-secondary; border-radius: 0; - @media (max-width: $screen-xs-min) { - padding: 0 16px; - } - - &.with-horizontal-nav { - border-bottom: 0; + .logo-text { + line-height: initial; - .navbar-border { - height: 1px; - position: absolute; - right: 0; - left: 0; - bottom: -1px; - background-color: $border-color; - opacity: 0; + svg { + width: 55px; + height: 14px; + margin: 0; + fill: $white-light; } } .container-fluid { - width: 100% !important; - filter: none; padding: 0; - .nav > li > a { - color: currentColor; - font-size: 18px; - padding: 0; - margin: (($header-height - 28) / 2) 3px; - margin-left: 8px; - height: 28px; - min-width: 32px; - line-height: 28px; - text-align: center; - - &.header-user-dropdown-toggle { - margin-left: 14px; - - &:hover, - &:focus, - &:active { - .header-user-avatar { - border-color: rgba($avatar-border, .2); - } - } - } - - &:hover, - &:focus, - &:active { - background-color: transparent; - color: $gl-text-color; - - svg { - fill: $gl-text-color; - } - } - - .fa-caret-down { - font-size: 14px; - } - - .fa-chevron-down { - position: relative; - top: -3px; - font-size: 10px; - } - } - .user-counter { svg { margin-right: 3px; @@ -114,81 +39,117 @@ header { } .navbar-toggle { - color: $nav-toggle-gray; - margin: 5px 0; - border-radius: 0; right: -10px; - padding: 6px 10px; + border-radius: 0; + min-width: 45px; + padding: 0; + margin-right: -7px; + font-size: 14px; + text-align: center; + color: currentColor; - &:hover { - background-color: $white-normal; + &:hover, + &:focus, + &.active { + color: currentColor; + background-color: transparent; } - &.active { - color: $gl-text-color-secondary; + .more-icon, + .close-icon { + fill: $white-light; + margin: auto; } } } } - &.navbar-gitlab-new { - .close-icon { + .close-icon { + display: none; + } + + .menu-expanded { + .more-icon { display: none; } - .menu-expanded { - .more-icon { - display: none; - } - - .close-icon { - display: block; - } + .close-icon { + display: block; } } - .global-dropdown { - position: absolute; - left: -10px; + .header-content { + display: -webkit-flex; + display: flex; + justify-content: space-between; + position: relative; + min-height: $header-height; + padding-left: 0; - .badge { - font-size: 11px; + .title-container { + display: -webkit-flex; + display: flex; + -webkit-align-items: stretch; + align-items: stretch; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + padding-top: 0; + overflow: visible; } - li { - &.active a { - font-weight: $gl-font-weight-bold; + .title { + padding-right: 0; + color: currentColor; + display: -webkit-flex; + display: flex; + position: relative; + margin: 0; + font-size: 18px; + vertical-align: top; + white-space: nowrap; + + img { + height: 28px; + margin-right: 8px; } - } - } - .global-dropdown-toggle { - margin: 7px 0; - font-size: 18px; - padding: 6px 10px; - border: none; - background-color: $gray-light; + &.wrap { + white-space: normal; + } - &:hover { - background-color: $white-normal; - } + &.initializing { + opacity: 0; + } + + a { + display: -webkit-flex; + display: flex; + align-items: center; + padding: 2px 8px; + margin: 5px 2px 5px -8px; + border-radius: $border-radius-default; - &:focus { - outline: none; - background-color: $white-normal; + svg { + @media (min-width: $screen-sm-min) { + margin-right: 8px; + } + } + } + + .project-item-select { + right: auto; + left: 0; + } } - } - .header-content { - display: flex; - justify-content: space-between; - position: relative; - min-height: $header-height; - padding-left: 30px; + .dropdown.open { + > a { + border-bottom-color: $white-light; + } + } &.menu-expanded { @media (max-width: $screen-xs-max) { - .header-logo, .title-container { display: none; } @@ -198,111 +159,180 @@ header { } } } + } - .dropdown-menu { - margin-top: -5px; - } + .dropdown-bold-header { + color: $gl-text-color-secondary; + font-size: 12px; + } - .header-logo { - display: inline-block; - margin: 0 12px 0 2px; - position: relative; - top: 10px; - transition-duration: .3s; + .navbar-collapse { + flex: 0 0 auto; + border-top: none; + padding: 0; - svg, - img { - height: 28px; - } + @media (max-width: $screen-xs-max) { + flex: 1 1 auto; + } - &:hover { - cursor: pointer; + .nav { + > li:not(.hidden-xs) a { + @media (max-width: $screen-xs-max) { + margin-left: 0; + min-width: 100%; + } } } + } - .group-name-toggle { - margin: 3px 5px; - } + .container-fluid { - .group-title { - &.is-hidden { - .hidable:not(:last-of-type) { - display: none; + .navbar-nav { + @media (max-width: $screen-xs-max) { + display: -webkit-flex; + display: flex; + padding-right: 10px; + } + + li { + .badge { + box-shadow: none; + font-weight: $gl-font-weight-bold; } } } - .title-container { - display: flex; - align-items: flex-start; - flex: 1 1 auto; - padding-top: 14px; - overflow: hidden; - } + .nav > li { + &.header-user { + @media (max-width: $screen-xs-max) { + padding-left: 10px; + } + } - .title { - position: relative; - padding-right: 20px; - margin: 0; - font-size: 18px; - line-height: 22px; - display: inline-block; - font-weight: $gl-font-weight-normal; - color: $gl-text-color; - vertical-align: top; - white-space: nowrap; + > a { + will-change: color; + margin: 4px 2px; + padding: 6px 8px; + height: 32px; - &.wrap { - white-space: normal; + @media (max-width: $screen-xs-max) { + padding: 0; + } + + &.header-user-dropdown-toggle { + margin-left: 2px; + + .header-user-avatar { + margin-right: 0; + } + } + + &:hover, + &:focus { + text-decoration: none; + outline: 0; + opacity: 1; + color: $white-light; + + svg { + fill: currentColor; + } + + &.header-user-dropdown-toggle { + .header-user-avatar { + border-color: $white-light; + } + } + } } - &.initializing { - opacity: 0; + .header-new-dropdown-toggle { + margin-right: 0; } - a { - color: currentColor; + .impersonated-user, + .impersonated-user:hover { + margin-right: 1px; + background-color: $white-light; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } - &:hover { - text-decoration: underline; - color: $gl-header-nav-hover-color; + .impersonation-btn, + .impersonation-btn:hover { + background-color: $white-light; + margin-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + i { + color: $orange-500; + font-size: 20px; } } - .dropdown-toggle-caret { - color: $gl-text-color; - border: transparent; - background: transparent; - position: absolute; - top: 2px; - right: 3px; - width: 12px; - line-height: 19px; - padding: 0; - font-size: 10px; - text-align: center; - cursor: pointer; + &.active > a, + &.dropdown.open > a { - &:hover { - color: $gl-header-nav-hover-color; + svg { + fill: currentColor; } } + } + } +} - .project-item-select { - right: auto; - left: 0; +.navbar-sub-nav, +.navbar-nav { + > li { + > a:hover, + > a:focus { + text-decoration: none; + outline: 0; + color: $white-light; + + svg { + fill: currentColor; } } - .navbar-collapse { - flex: 0 0 auto; - border-top: none; - padding: 0; - - @media (max-width: $screen-xs-max) { - flex: 1 1 auto; + > a { + display: -webkit-flex; + display: flex; + align-items: center; + justify-content: center; + padding: 6px 8px; + margin: 4px 2px; + font-size: 12px; + color: currentColor; + border-radius: $border-radius-default; + height: 32px; + font-weight: $gl-font-weight-bold; + + svg { + fill: currentColor; } } + + &.line-separator { + margin: 8px; + } + } +} + +.navbar-sub-nav { + display: -webkit-flex; + display: flex; + margin: 0 0 0 6px; + + .projects-dropdown-menu { + padding: 0; + } + + .dropdown-chevron { + position: relative; + top: -1px; + font-size: 10px; } .project-item-select-holder { @@ -314,8 +344,123 @@ header { } } -.with-performance-bar header.navbar-gitlab { - top: $performance-bar-height; +.caret-down { + height: 11px; + width: 11px; + margin-left: 4px; + fill: currentColor; +} + +.header-user .dropdown-menu-nav, +.header-new .dropdown-menu-nav { + margin-top: $dropdown-vertical-offset; +} + +.breadcrumbs { + display: -webkit-flex; + display: flex; + min-height: 48px; + color: $gl-text-color; +} + +.breadcrumbs-container { + display: -webkit-flex; + display: flex; + width: 100%; + position: relative; + padding-top: $gl-padding / 2; + padding-bottom: $gl-padding / 2; + align-items: center; + border-bottom: 1px solid $border-color; +} + +.breadcrumbs-links { + -webkit-flex: 1; + flex: 1; + min-width: 0; + align-self: center; + color: $gl-text-color-secondary; + + .avatar-tile { + margin-right: 4px; + border: 1px solid $border-color; + border-radius: 50%; + vertical-align: sub; + } + + .text-expander { + margin-left: 0; + margin-right: 2px; + + > i { + position: relative; + top: 1px; + } + } +} + +.breadcrumbs-list { + display: -webkit-flex; + display: flex; + flex-wrap: wrap; + margin-bottom: 0; + line-height: 16px; + + > li { + display: flex; + align-items: center; + position: relative; + padding: 2px 0; + + &:not(:last-child) { + margin-right: 20px; + } + + > a { + font-size: 12px; + color: currentColor; + } + } +} + +.breadcrumb-item-text { + @include str-truncated(128px); + text-decoration: inherit; +} + +.breadcrumbs-list-angle { + position: absolute; + right: -12px; + top: 50%; + color: $gl-text-color-tertiary; + transform: translateY(-50%); +} + +.breadcrumbs-extra { + display: -webkit-flex; + display: flex; + flex: 0 0 auto; + margin-left: auto; +} + +.breadcrumbs-sub-title { + margin: 0; + font-size: 12px; + font-weight: 600; + line-height: 16px; + + a { + color: $gl-text-color; + } +} + +.btn-sign-in { + margin-top: 3px; + font-weight: $gl-font-weight-bold; + + &:hover { + background-color: $white-light; + } } .navbar-nav { @@ -347,11 +492,10 @@ header { } @media (max-width: $screen-xs-max) { - header .container-fluid { + .navbar-gitlab .container-fluid { font-size: 18px; .navbar-nav { - display: table; table-layout: fixed; width: 100%; margin: 0; @@ -359,7 +503,8 @@ header { } .navbar-collapse { - padding-left: 5px; + margin-left: -8px; + margin-right: -10px; .nav > li:not(.hidden-xs) { display: table-cell !important; @@ -385,11 +530,11 @@ header { .dropdown-menu-nav { width: auto; min-width: 140px; - margin-top: -5px; + margin-top: 4px; color: $gl-text-color; left: auto; - .current-user { + li.current-user { padding: 5px 18px; .user-name { @@ -405,3 +550,23 @@ header { border-radius: 50%; border: 1px solid $avatar-border; } + +.with-performance-bar .navbar-gitlab { + top: $performance-bar-height; +} + +.navbar-empty { + height: $header-height; + background: $white-light; + border-bottom: 1px solid $white-normal; + + .center-logo { + margin: 8px 0; + text-align: center; + + .tanuki-logo, + img { + height: 36px; + } + } +} diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss index 59bfc5a8d77..6819fd88b7f 100644 --- a/app/assets/stylesheets/framework/images.scss +++ b/app/assets/stylesheets/framework/images.scss @@ -28,6 +28,7 @@ svg { &.s8 { @include svg-size(8px); } + &.s12 { @include svg-size(12px); } &.s16 { @include svg-size(16px); } &.s18 { @include svg-size(18px); } &.s24 { @include svg-size(24px); } diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index bd521028c44..69d19ea2962 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -25,10 +25,6 @@ body { .content-wrapper { padding-bottom: 100px; - - &:not(.page-with-layout-nav) { - margin-top: $header-height; - } } .container { diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss index 5b581780447..1cebd02df48 100644 --- a/app/assets/stylesheets/framework/modal.scss +++ b/app/assets/stylesheets/framework/modal.scss @@ -1,10 +1,17 @@ +.modal-header { + padding: #{3 * $grid-size} #{2 * $grid-size}; + + .page-title { + margin-top: 0; + } +} + .modal-body { position: relative; - padding: 15px; + padding: #{3 * $grid-size} #{2 * $grid-size}; .form-actions { - margin: -$gl-padding + 1; - margin-top: 15px; + margin: #{2 * $grid-size} #{-2 * $grid-size} #{-2 * $grid-size}; } .text-danger { diff --git a/app/assets/stylesheets/framework/new-nav.scss b/app/assets/stylesheets/framework/new-nav.scss index 7899be2c2d3..e69de29bb2d 100644 --- a/app/assets/stylesheets/framework/new-nav.scss +++ b/app/assets/stylesheets/framework/new-nav.scss @@ -1,404 +0,0 @@ -@import "framework/variables"; -@import 'framework/tw_bootstrap_variables'; -@import "bootstrap/variables"; -@import "framework/mixins"; - -.content-wrapper.page-with-new-nav { - margin-top: $new-navbar-height; -} - -header.navbar-gitlab-new { - color: $white-light; - border-bottom: 0; - min-height: $new-navbar-height; - - .logo-text { - line-height: initial; - - svg { - width: 55px; - height: 14px; - margin: 0; - fill: $white-light; - } - } - - .header-content { - display: -webkit-flex; - display: flex; - padding-left: 0; - min-height: $new-navbar-height; - - .title-container { - display: -webkit-flex; - display: flex; - -webkit-align-items: stretch; - align-items: stretch; - -webkit-flex: 1 1 auto; - flex: 1 1 auto; - padding-top: 0; - overflow: visible; - } - - .title { - display: -webkit-flex; - display: flex; - padding-right: 0; - color: currentColor; - - img { - height: 28px; - margin-right: 8px; - } - - a { - display: -webkit-flex; - display: flex; - align-items: center; - padding: 2px 8px; - margin: 5px 2px 5px -8px; - border-radius: $border-radius-default; - - svg { - @media (min-width: $screen-sm-min) { - margin-right: 8px; - } - } - } - } - - .dropdown.open { - > a { - border-bottom-color: $white-light; - } - } - - .dropdown-menu { - margin-top: 4px; - min-width: 130px; - - @media (max-width: $screen-xs-max) { - left: auto; - right: 0; - } - } - - &.menu-expanded { - @media (max-width: $screen-xs-max) { - .title-container, - .header-logo, { - display: none; - } - } - } - } - - .dropdown-bold-header { - color: $gl-text-color-secondary; - font-size: 12px; - } - - .navbar-collapse { - padding-left: 0; - box-shadow: 0; - - @media (max-width: $screen-xs-max) { - margin-left: -8px; - margin-right: -10px; - } - - .nav { - > li:not(.hidden-xs) a { - @media (max-width: $screen-xs-max) { - margin-left: 0; - min-width: 100%; - } - } - } - } - - .container-fluid { - .navbar-toggle { - min-width: 45px; - padding: 0 $gl-padding; - margin-right: -7px; - text-align: center; - color: currentColor; - - svg { - fill: currentColor; - } - - &:hover, - &:focus, - &.active { - color: currentColor; - background-color: transparent; - - svg { - fill: currentColor; - } - } - } - - .navbar-nav { - @media (max-width: $screen-xs-max) { - display: flex; - padding-right: 10px; - } - - li { - .badge { - box-shadow: none; - font-weight: $gl-font-weight-bold; - } - } - } - - .nav > li { - &.header-user { - @media (max-width: $screen-xs-max) { - padding-left: 10px; - } - } - - > a { - will-change: color; - margin: 4px 2px; - padding: 6px 8px; - height: 32px; - - @media (max-width: $screen-xs-max) { - padding: 0; - } - - &.header-user-dropdown-toggle { - margin-left: 2px; - - .header-user-avatar { - margin-right: 0; - } - } - - &:hover, - &:focus { - text-decoration: none; - outline: 0; - opacity: 1; - color: $white-light; - - svg { - fill: currentColor; - } - - &.header-user-dropdown-toggle { - .header-user-avatar { - border-color: $white-light; - } - } - } - } - - .header-new-dropdown-toggle { - margin-right: 0; - } - - .impersonated-user, - .impersonated-user:hover { - margin-right: 1px; - background-color: $white-light; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - .impersonation-btn, - .impersonation-btn:hover { - background-color: $white-light; - margin-left: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - - i { - color: $orange-500; - font-size: 20px; - } - } - - &.active > a, - &.dropdown.open > a { - - svg { - fill: currentColor; - } - } - } - } -} - -.navbar-sub-nav { - display: -webkit-flex; - display: flex; - margin: 0 0 0 6px; - - .dropdown-chevron { - position: relative; - top: -1px; - font-size: 10px; - } -} - -.navbar-gitlab-new { - .navbar-sub-nav, - .navbar-nav { - > li { - > a:hover, - > a:focus { - text-decoration: none; - outline: 0; - color: $white-light; - - svg { - fill: currentColor; - } - } - - > a { - display: flex; - align-items: center; - justify-content: center; - padding: 6px 8px; - margin: 4px 2px; - font-size: 12px; - color: currentColor; - border-radius: $border-radius-default; - height: 32px; - font-weight: $gl-font-weight-bold; - - svg { - fill: currentColor; - } - } - - &.line-separator { - margin: 8px; - } - } - } -} - -.caret-down { - height: 11px; - width: 11px; - margin-left: 4px; - fill: currentColor; -} - -.header-user .dropdown-menu-nav, -.header-new .dropdown-menu-nav { - margin-top: $dropdown-vertical-offset; -} - -.breadcrumbs { - display: flex; - min-height: 48px; - color: $gl-text-color; -} - -.breadcrumbs-container { - display: -webkit-flex; - display: flex; - width: 100%; - position: relative; - padding-top: $gl-padding / 2; - padding-bottom: $gl-padding / 2; - align-items: center; - border-bottom: 1px solid $border-color; -} - -.breadcrumbs-links { - -webkit-flex: 1; - flex: 1; - min-width: 0; - align-self: center; - color: $gl-text-color-secondary; - - .avatar-tile { - margin-right: 4px; - border: 1px solid $border-color; - border-radius: 50%; - vertical-align: sub; - } - - .text-expander { - margin-left: 0; - margin-right: 2px; - - > i { - position: relative; - top: 1px; - } - } -} - -.breadcrumbs-list { - display: -webkit-flex; - display: flex; - flex-wrap: wrap; - margin-bottom: 0; - line-height: 16px; - - > li { - display: flex; - align-items: center; - position: relative; - padding: 2px 0; - - &:not(:last-child) { - margin-right: 20px; - } - - > a { - font-size: 12px; - color: currentColor; - } - } -} - -.breadcrumb-item-text { - @include str-truncated(128px); - text-decoration: inherit; -} - -.breadcrumbs-list-angle { - position: absolute; - right: -12px; - top: 50%; - color: $gl-text-color-tertiary; - transform: translateY(-50%); -} - -.breadcrumbs-extra { - display: flex; - flex: 0 0 auto; - margin-left: auto; -} - -.breadcrumbs-sub-title { - margin: 0; - font-size: 12px; - font-weight: 600; - line-height: 16px; - - a { - color: $gl-text-color; - } -} - -.btn-sign-in { - margin-top: 3px; - font-weight: $gl-font-weight-bold; - - &:hover { - background-color: $white-light; - } -} diff --git a/app/assets/stylesheets/framework/new-sidebar.scss b/app/assets/stylesheets/framework/new-sidebar.scss index 8332cec2962..caf4c7a40b1 100644 --- a/app/assets/stylesheets/framework/new-sidebar.scss +++ b/app/assets/stylesheets/framework/new-sidebar.scss @@ -24,7 +24,7 @@ $new-sidebar-collapsed-width: 50px; // Override position: absolute .right-sidebar { position: fixed; - height: calc(100% - #{$new-navbar-height}); + height: calc(100% - #{$header-height}); } .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header { @@ -87,7 +87,7 @@ $new-sidebar-collapsed-width: 50px; z-index: 400; width: $new-sidebar-width; transition: left $sidebar-transition-duration; - top: $new-navbar-height; + top: $header-height; bottom: 0; left: 0; background-color: $gray-normal; @@ -197,7 +197,7 @@ $new-sidebar-collapsed-width: 50px; } .with-performance-bar .nav-sidebar { - top: $new-navbar-height + $performance-bar-height; + top: $header-height + $performance-bar-height; } .sidebar-sub-level-items { @@ -495,7 +495,7 @@ $new-sidebar-collapsed-width: 50px; // Make issue boards full-height now that sub-nav is gone .boards-list { - height: calc(100vh - #{$new-navbar-height}); + height: calc(100vh - #{$header-height}); @media (min-width: $screen-sm-min) { height: 475px; // Needed for PhantomJS @@ -506,5 +506,5 @@ $new-sidebar-collapsed-width: 50px; } .with-performance-bar .boards-list { - height: calc(100vh - #{$new-navbar-height} - #{$performance-bar-height}); + height: calc(100vh - #{$header-height} - #{$performance-bar-height}); } diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/secondary-navigation-elements.scss index f8777d1fd9d..5c96b3b78e7 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/secondary-navigation-elements.scss @@ -1,12 +1,11 @@ - - +// For tabbed navigation links, scrolling tabs, etc. For all top/main navigation, +// please check nav.scss .nav-links { display: flex; padding: 0; margin: 0; list-style: none; height: auto; - border-bottom: 1px solid $border-color; li { display: flex; @@ -24,7 +23,6 @@ &:active, &:focus { text-decoration: none; - border-bottom: 2px solid $gray-darkest; color: $black; .badge { @@ -34,7 +32,6 @@ } &.active a { - border-bottom: 2px solid $link-underline-blue; color: $black; font-weight: $gl-font-weight-bold; @@ -43,35 +40,6 @@ } } } - - &.sub-nav { - text-align: center; - background-color: $gray-normal; - - .container-fluid { - background-color: $gray-normal; - margin-bottom: 0; - display: flex; - } - - li { - &.active a { - border-bottom: none; - color: $link-underline-blue; - } - - a { - margin: 0; - padding: 11px 10px 9px; - - &:hover, - &:active, - &:focus { - border-color: transparent; - } - } - } - } } .top-area { @@ -91,17 +59,6 @@ } } - .nav-search { - display: inline-block; - width: 100%; - padding: 11px 0; - - /* Small devices (phones, tablets, 768px and lower) */ - @media (min-width: $screen-sm-min) { - width: 50%; - } - } - .nav-links { margin-bottom: 0; border-bottom: none; @@ -150,12 +107,6 @@ } } - &.nav-controls-new-nav { - > .dropdown { - margin-right: 0; - } - } - > .btn-grouped { float: none; } @@ -248,114 +199,43 @@ pre { width: 100%; } -} - -.project-item-select-holder.btn-group { - display: flex; - max-width: 350px; - overflow: hidden; - float: right; - - .new-project-item-link { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .new-project-item-select-button { - width: 32px; - } -} - -.empty-state .project-item-select-holder.btn-group { - float: none; - display: inline-block; - - .btn { - // overrides styles applied to plain `.empty-state .btn` - margin: 10px 0; - max-width: 300px; - width: auto; - - @media(max-width: $screen-xs-max) { - max-width: 250px; - } - - } -} -.new-project-item-select-button .fa-caret-down { - margin-left: 2px; -} - -.layout-nav { - width: 100%; - background: $gray-light; - border-bottom: 1px solid $border-color; - transition: padding $sidebar-transition-duration; - text-align: center; - margin-top: $new-navbar-height; + @media (max-width: $screen-xs-max) { + flex-flow: row wrap; - .container-fluid { - position: relative; + .nav-controls { + $controls-margin: $btn-xs-side-margin - 2px; + flex: 0 0 100%; - .nav-control { - @media (max-width: $screen-sm-max) { - margin-right: 2px; + &.controls-flex { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: center; + padding: 0 0 $gl-padding-top; } - } - } - - .controls { - float: right; - padding: 7px 0 0; - - i { - color: $layout-link-gray; - } - - .fa-rss, - .fa-cog { - font-size: 16px; - } - .fa-caret-down { - margin-left: 5px; - color: $gl-text-color-secondary; - } - - .dropdown { - position: absolute; - top: 7px; - right: 15px; - z-index: 300; + .controls-item, + .controls-item-full, + .controls-item:last-child { + flex: 1 1 35%; + display: block; + width: 100%; + margin: $controls-margin; - li.active { - font-weight: $gl-font-weight-bold; + .btn, + .dropdown { + margin: 0; + } } - } - } - .nav-links { - border-bottom: none; - height: 51px; - - @media (min-width: $screen-sm-min) { - justify-content: center; - } - - li { - a { - padding-top: 10px; + .controls-item-full { + flex: 1 1 100%; } } } } -.with-performance-bar .layout-nav { - margin-top: $header-height + $performance-bar-height; -} - .scrolling-tabs-container { position: relative; @@ -385,25 +265,41 @@ left: -7px; } } +} - &.sub-nav-scroll { +.inner-page-scroll-tabs { + position: relative; - .fade-right { - @include fade(left, $gray-normal); - right: 0; + .fade-right { + @include fade(left, $white-light); + right: 0; + text-align: right; - .fa { - right: -23px; - } + .fa { + right: 5px; } + } - .fade-left { - @include fade(right, $gray-normal); - left: 0; + .fade-left { + @include fade(right, $white-light); + left: 0; + text-align: left; - .fa { - left: 10px; - } + .fa { + left: 5px; + } + } + + .fade-right, + .fade-left { + top: 16px; + bottom: auto; + } + + &.is-smaller { + .fade-right, + .fade-left { + top: 11px; } } } @@ -432,41 +328,7 @@ } } } -} - -.page-with-layout-nav { - .right-sidebar { - top: ($header-height + 1) * 2; - } - - &.page-with-sub-nav { - .right-sidebar { - top: ($header-height + 1) * 3; - - &.affix { - top: $header-height; - } - } - } -} - -.with-performance-bar .page-with-layout-nav { - .right-sidebar { - top: ($header-height + 1) * 2 + $performance-bar-height; - } - - &.page-with-sub-nav { - .right-sidebar { - top: ($header-height + 1) * 3 + $performance-bar-height; - - &.affix { - top: $header-height + $performance-bar-height; - } - } - } -} -.nav-block { &.activities { border-bottom: 1px solid $border-color; @@ -476,76 +338,39 @@ } } -@media (max-width: $screen-xs-max) { - .top-area { - flex-flow: row wrap; - - .nav-controls { - $controls-margin: $btn-xs-side-margin - 2px; - flex: 0 0 100%; - - &.controls-flex { - display: flex; - flex-flow: row wrap; - align-items: center; - justify-content: center; - padding: 0 0 $gl-padding-top; - } - - .controls-item, - .controls-item-full, - .controls-item:last-child { - flex: 1 1 35%; - display: block; - width: 100%; - margin: $controls-margin; +.project-item-select-holder.btn-group { + display: flex; + max-width: 350px; + overflow: hidden; + float: right; - .btn, - .dropdown { - margin: 0; - } - } + .new-project-item-link { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } - .controls-item-full { - flex: 1 1 100%; - } - } + .new-project-item-select-button { + width: 32px; } } -.inner-page-scroll-tabs { - position: relative; - - .fade-right { - @include fade(left, $white-light); - right: 0; - text-align: right; - - .fa { - right: 5px; - } - } +.empty-state .project-item-select-holder.btn-group { + float: none; + display: inline-block; - .fade-left { - @include fade(right, $white-light); - left: 0; - text-align: left; + .btn { + // overrides styles applied to plain `.empty-state .btn` + margin: 10px 0; + max-width: 300px; + width: auto; - .fa { - left: 5px; + @media(max-width: $screen-xs-max) { + max-width: 250px; } } +} - .fade-right, - .fade-left { - top: 16px; - bottom: auto; - } - - &.is-smaller { - .fade-right, - .fade-left { - top: 11px; - } - } +.new-project-item-select-button .fa-caret-down { + margin-left: 2px; } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 48dc25d343b..ef58382ba41 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -78,16 +78,16 @@ .right-sidebar { border-left: 1px solid $border-color; - height: calc(100% - #{$new-navbar-height}); + height: calc(100% - #{$header-height}); &.affix { position: fixed; - top: $new-navbar-height; + top: $header-height; } } .with-performance-bar .right-sidebar.affix { - top: $new-navbar-height + $performance-bar-height; + top: $header-height + $performance-bar-height; } @mixin maintain-sidebar-dimensions { diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index 3d68a50f91f..f718ec4bcad 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -17,15 +17,19 @@ .diff-file { border: 1px solid $border-color; - border-bottom: none; margin: 0; } + + &.text-file .diff-file { + border-bottom: none; + } } .timeline-entry { border-color: $white-normal; color: $gl-text-color; border-bottom: 1px solid $border-white-light; + background: $white-light; .timeline-entry-inner { position: relative; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 5ab40947da9..bbbd16322eb 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -1,6 +1,7 @@ /* * Layout */ +$grid-size: 8px; $gutter_collapsed_width: 62px; $gutter_width: 290px; $gutter_inner_width: 250px; @@ -224,8 +225,7 @@ $gl-sidebar-padding: 22px; $row-hover: $blue-50; $row-hover-border: $blue-200; $progress-color: #c0392b; -$header-height: 50px; -$new-navbar-height: 40px; +$header-height: 40px; $fixed-layout-width: 1280px; $limited-layout-width: 990px; $limited-layout-width-sm: 790px; @@ -322,6 +322,7 @@ $diff-image-info-color: grey; $diff-swipe-border: #999; $diff-view-modes-color: grey; $diff-view-modes-border: #c1c1c1; +$diff-jagged-border-gradient-color: darken($white-normal, 8%); /* * Fonts @@ -711,3 +712,9 @@ Issuable warning */ $issuable-warning-size: 24px; $issuable-warning-icon-margin: 4px; + +/* +Image Commenting cursor +*/ +$image-comment-cursor-left-offset: 12; +$image-comment-cursor-top-offset: 30; |