diff options
Diffstat (limited to 'app/assets/stylesheets/new_nav.scss')
| -rw-r--r-- | app/assets/stylesheets/new_nav.scss | 445 |
1 files changed, 445 insertions, 0 deletions
diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss new file mode 100644 index 00000000000..1c4a84de7ec --- /dev/null +++ b/app/assets/stylesheets/new_nav.scss @@ -0,0 +1,445 @@ +@import "framework/variables"; +@import 'framework/tw_bootstrap_variables'; +@import "bootstrap/variables"; + +header.navbar-gitlab-new { + color: $white-light; + background: linear-gradient(to right, $indigo-900, $indigo-800); + border-bottom: 0; + + .header-content { + padding-left: 0; + + .title-container { + align-items: stretch; + padding-top: 0; + overflow: visible; + } + + .title { + display: flex; + padding-right: 0; + color: currentColor; + + img { + height: 28px; + margin-right: 10px; + } + + > a { + display: flex; + align-items: center; + padding-right: $gl-padding; + padding-left: $gl-padding; + margin-left: -$gl-padding; + + @media (min-width: $screen-sm-min) { + padding-right: $gl-padding; + padding-left: $gl-padding; + } + + svg { + margin-top: -3px; + + @media (min-width: $screen-sm-min) { + margin-right: 10px; + } + } + + .logo-text { + line-height: initial; + + svg { + width: 55px; + height: 15px; + margin: 0; + fill: $white-light; + } + } + + &:hover, + &:focus { + .logo-text svg { + fill: $tanuki-yellow; + } + } + } + } + + .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; + } + } + } + + .navbar-collapse { + padding-left: 0; + color: $indigo-200; + box-shadow: 0; + + @media (max-width: $screen-xs-max) { + margin-left: -$gl-padding; + margin-right: -10px; + } + + .dropdown-bold-header { + color: initial; + } + + .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: 6px $gl-padding; + margin-right: -7px; + font-size: 14px; + text-align: center; + color: currentColor; + border-left: 1px solid lighten($indigo-700, 10%); + + &:hover, + &:focus, + &.active { + color: currentColor; + background-color: transparent; + } + } + + .navbar-nav { + @media (max-width: $screen-xs-max) { + display: flex; + padding-right: 10px; + } + + li { + .badge { + box-shadow: none; + font-weight: 600; + } + } + } + + .nav > li { + &.header-user { + @media (max-width: $screen-xs-max) { + padding-left: 10px; + } + } + + > a { + background: none; + will-change: color; + + &.header-user-dropdown-toggle { + .header-user-avatar { + border-color: $indigo-200; + } + } + + &:hover, + &:focus { + color: $white-light; + opacity: 1; + + > svg { + fill: $white-light; + } + + &.header-user-dropdown-toggle { + .header-user-avatar { + border-color: $white-light; + } + } + } + } + } + } +} + +.navbar-sub-nav { + display: flex; + margin-bottom: 0; + color: $indigo-200; + + > li { + > a:hover, + > a:focus { + box-shadow: inset 0 -3px 0 rgba($indigo-200, .4); + text-decoration: none; + outline: 0; + color: $white-light; + } + + &.active > a { + box-shadow: inset 0 -3px 0 $indigo-500; + color: $white-light; + font-weight: 700; + } + + > a { + display: block; + padding: 16px 10px; + font-size: 13px; + color: currentColor; + box-shadow: inset 0 0 0 transparent; + will-change: box-shadow; + transition: box-shadow 0.15s; + + @media (min-width: $screen-sm-min) { + padding: 15px $gl-padding; + font-size: 14px; + } + } + } + + .dropdown-chevron { + position: relative; + top: -1px; + font-size: 10px; + } +} + +.header-user .dropdown-menu-nav, +.header-new .dropdown-menu-nav { + margin-top: 4px; +} + +.search { + form { + border: 0; + background-color: rgba($indigo-200, .2); + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, background-color ease-in-out 0.15s; + + &:hover { + background-color: rgba($indigo-200, .3); + box-shadow: none; + } + } + + &.search-active form { + background-color: rgba($indigo-200, .3); + box-shadow: none; + } + + .search-input { + color: $white-light; + background: none; + } + + .search-input::placeholder { + color: rgba($indigo-200, .8); + } + + .location-badge { + font-size: 12px; + color: $indigo-100; + background-color: rgba($indigo-200, .1); + transition: color 0.15s; + will-change: color; + margin: -4px 4px -4px -4px; + line-height: 25px; + padding: 4px 8px; + border-radius: 2px 0 0 2px; + border-right: 1px solid $indigo-800; + height: 34px; + } + + .search-input-wrap { + .search-icon, + .clear-icon { + color: rgba($indigo-200, .8); + } + } + + &.search-active { + .location-badge { + color: $white-light; + background-color: rgba($indigo-200, .2); + } + + .search-input-wrap { + .search-icon { + color: rgba($indigo-200, .8); + } + + .clear-icon { + color: $white-light; + } + } + } +} + +.breadcrumbs { + display: flex; + min-height: 61px; + color: $gl-text-color; + border-bottom: 1px solid $border-color; + + .dropdown-toggle-caret { + position: relative; + top: -1px; + padding: 0 5px; + color: $gl-text-color-secondary; + font-size: 10px; + line-height: 1; + background: none; + border: 0; + + &:focus { + outline: 0; + } + } + + // TODO: fallback to global style + .dropdown-menu { + li { + padding: 0 1px; + + a { + border-radius: 0; + padding: 8px 16px; + + &.is-focused, + &:hover, + &:active, + &:focus { + background-color: $gray-darker; + } + } + } + } +} + +.breadcrumbs-container { + display: flex; + width: 100%; + position: relative; + align-items: center; + + .dropdown-menu-projects { + margin-top: -$gl-padding; + margin-left: $gl-padding; + } +} + +.breadcrumbs-links { + flex: 1; + min-width: 0; + align-self: center; + color: $gl-text-color-quaternary; + + a { + color: $gl-text-color-secondary; + + &:not(:first-child), + &.group-path { + margin-left: 4px; + } + + &:not(:last-of-type), + &.group-path { + margin-right: 3px; + } + } + + .title { + display: inline-block; + + > a { + &:last-of-type:not(:first-child) { + font-weight: 600; + } + } + } + + .avatar-tile { + margin-right: 5px; + border: 1px solid $border-color; + border-radius: 50%; + vertical-align: sub; + + &.identicon { + float: left; + width: 16px; + height: 16px; + margin-top: 2px; + font-size: 10px; + } + } + + .text-expander { + margin-left: 4px; + margin-right: 4px; + + > i { + position: relative; + top: 1px; + } + } +} + +.breadcrumbs-extra { + flex: 0 0 auto; + margin-left: auto; +} + +.breadcrumbs-sub-title { + margin: 2px 0; + font-size: 16px; + font-weight: normal; + line-height: 1; + + ul { + margin: 0; + } + + li { + display: inline-block; + + &:not(:last-child) { + &::after { + content: "/"; + margin: 0 2px 0 5px; + color: rgba($black, .65); + } + } + + &:last-child a { + font-weight: 600; + } + } + + a { + color: $gl-text-color; + } +} + +.top-area { + .nav-controls-new-nav { + .dropdown { + @media (min-width: $screen-sm-min) { + margin-right: 0; + } + } + } +} |