Commit a30a5663 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets
Browse files

Merge branch 'refactor-header' into 'master'

UI: refactor header css

See merge request !1591
parents 5b7747bd 878e86bf
app/assets/images/logo-white.png

7.16 KB | W: | H:

app/assets/images/logo-white.png

7.52 KB | W: | H:

app/assets/images/logo-white.png
app/assets/images/logo-white.png
app/assets/images/logo-white.png
app/assets/images/logo-white.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -86,7 +86,7 @@ header {
.container {
width: 100% !important;
padding-left: 0px;
padding: 0px;
}
/**
......@@ -100,18 +100,14 @@ header {
a {
float: left;
padding: 0px;
margin: 0 6px;
h1 {
margin: 0;
background: image-url('logo-black.png') no-repeat center center;
background-size: 32px;
float: left;
height: 46px;
width: 40px;
@include header-font;
text-indent: -9999px;
padding: 5px 0;
height: 46px;
width: 52px;
text-align: center;
img {
width: 36px;
height: 36px;
}
}
&:hover {
......@@ -134,14 +130,13 @@ header {
}
.profile-pic {
position: relative;
top: -1px;
padding-right: 0px !important;
padding: 0px !important;
width: 46px;
height: 46px;
margin-left: 5px;
img {
width: 50px;
height: 50px;
margin: -15px;
margin-left: 5px;
width: 46px;
height: 46px;
}
}
......@@ -174,68 +169,6 @@ header {
@include transition(all 0.15s ease-in 0s);
}
}
/*
* Dark header
*
*/
&.header-dark {
&.navbar-gitlab {
.navbar-inner {
background: #708090;
border-bottom: 1px solid #AAA;
.navbar-toggle { color: #fff; }
.nav > li > a {
color: #AAA;
&:hover, &:focus, &:active {
background: none;
color: #FFF;
}
}
}
}
.turbolink-spinner {
color: #FFF;
}
.search {
.search-input {
background-color: #D2D5DA;
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid #AAA;
&:focus {
background-color: white;
}
}
}
.search-input::-webkit-input-placeholder {
color: #666;
}
.app_logo {
a {
h1 {
background: image-url('logo-white.png') no-repeat center center;
background-size: 32px;
color: #fff;
}
}
}
.title {
a {
color: #FFF;
&:hover {
text-decoration: underline;
}
}
color: #fff;
}
}
}
.search .search-input {
......
@mixin dark-theme($color-light, $color, $color-darker, $color-dark) {
header {
&.navbar-gitlab {
.navbar-inner {
background: $color;
.navbar-toggle {
color: #FFF;
}
.app_logo, .navbar-toggle {
&:hover {
background-color: $color-darker;
}
}
.app_logo {
background-color: $color-dark;
}
.title {
color: #FFF;
a {
color: #FFF;
&:hover {
text-decoration: underline;
}
}
}
.search {
.search-input {
background-color: $color-light;
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid $color-light;
&:focus {
background-color: white;
}
}
}
.search-input::-webkit-input-placeholder {
color: #666;
}
.nav > li > a {
color: $color-light;
&:hover, &:focus, &:active {
background: none;
color: #FFF;
}
}
.search-input {
border-color: $color-light;
}
}
}
}
}
......@@ -10,8 +10,15 @@
background: #F1F1F1;
border-bottom: 1px solid #DDD;
.app_logo {
background-color: #DDD;
.title {
color: #555;
a {
color: #555;
&:hover {
text-decoration: underline;
}
}
}
.nav > li > a {
......
/**
* This file represent some UI that can be changed
* during web app restyle or theme select.
*
* Next items should be placed there
* - link colors
* - header restyles
*
* Violet GitLab UI theme
*/
.ui_color {
/*
* Application Header
*
*/
header {
@extend .header-dark;
&.navbar-gitlab {
.navbar-inner {
background: #548;
border-bottom: 1px solid #436;
.app_logo, .navbar-toggle {
&:hover {
background-color: #436;
}
}
.app_logo {
background-color: #325;
}
.nav > li > a {
color: #98C;
}
.search-input {
border-color: #98C;
}
}
}
}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
background: #659;
}
@include dark-theme(#98C, #548, #436, #325);
}
/**
* This file represent some UI that can be changed
* during web app restyle or theme select.
*
* Next items should be placed there
* - link colors
* - header restyles
*
* Gray GitLab UI theme
*/
.ui_gray {
/*
* Application Header
*
*/
header {
@extend .header-dark;
&.navbar-gitlab {
.navbar-inner {
background: #373737;
border-bottom: 1px solid #272727;
.app_logo, .navbar-toggle {
&:hover {
background-color: #272727;
}
}
.app_logo {
background-color: #222;
}
}
}
}
@include dark-theme(#979797, #373737, #272727, #222222);
}
/**
* This file represent some UI that can be changed
* during web app restyle or theme select.
*
* Next items should be placed there
* - link colors
* - header restyles
*
* Classic GitLab UI theme
*/
.ui_mars {
/*
* Application Header
*
*/
header {
@extend .header-dark;
&.navbar-gitlab {
.navbar-inner {
background: #474D57;
border-bottom: 1px solid #373D47;
.app_logo, .navbar-toggle {
&:hover {
background-color: #373D47;
}
}
.app_logo {
background-color: #24272D;
}
.nav > li > a {
color: #979DA7;
}
.search-input {
border-color: #979DA7;
}
}
}
}
@include dark-theme(#979DA7, #474D57, #373D47, #24272D);
}
/**
* This file represent some UI that can be changed
* during web app restyle or theme select.
*
* Next items should be placed there
* - link colors
* - header restyles
*
* Modern GitLab UI theme
*/
.ui_modern {
/*
* Application Header
*
*/
header {
@extend .header-dark;
&.navbar-gitlab {
.navbar-inner {
background: #019875;
border-bottom: 1px solid #019875;
.app_logo, .navbar-toggle {
&:hover {
background-color: #018865;
}
}
.app_logo {
background-color: #017855;
}
.nav > li > a {
color: #ADC;
}
.search-input {
border-color: #8ba;
}
}
}
}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
background: #019875;
}
@include dark-theme(#ADC, #019875, #018865, #017855);
}
......@@ -14,4 +14,8 @@ def brand_image
def brand_text
nil
end
def brand_header_logo
image_tag 'logo-white.png'
end
end
......@@ -3,7 +3,7 @@
.container
%div.app_logo
= link_to root_path, class: "home has_bottom_tooltip", title: "Dashboard" do
%h1 GITLAB
= brand_header_logo
%h1.title= title
%button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}
......
......@@ -2,10 +2,8 @@
.navbar-inner
.container
%div.app_logo
%span.separator
= link_to explore_root_path, class: "home" do
%h1 GITLAB
%span.separator
= brand_header_logo
%h1.title= title
%button.navbar-toggle{"data-target" => ".navbar-collapse", "data-toggle" => "collapse", type: "button"}
......
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: "Admin area"
%body{class: "#{app_theme} #{theme_type} admin", :'data-page' => body_data_page}
%body{class: "#{app_theme} admin", :'data-page' => body_data_page}
= render "layouts/head_panel", title: link_to("Admin area", admin_root_path)
= render 'layouts/page', sidebar: 'layouts/nav/admin'
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: "Dashboard"
%body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page }
%body{class: "#{app_theme} application", :'data-page' => body_data_page }
= render "layouts/head_panel", title: link_to("Dashboard", root_path)
= render 'layouts/page', sidebar: 'layouts/nav/dashboard'
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: "Error"
%body{class: "#{app_theme} #{theme_type} application"}
%body{class: "#{app_theme} application"}
= render "layouts/head_panel", title: "" if current_user
.container.navless-container
= render "layouts/flash"
......
......@@ -2,7 +2,7 @@
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: page_title
%body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
%body{class: "#{app_theme} application", :'data-page' => body_data_page}
= render "layouts/broadcast"
- if current_user
= render "layouts/head_panel", title: link_to(page_title, explore_root_path)
......
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: group_head_title
%body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
%body{class: "#{app_theme} application", :'data-page' => body_data_page}
= render "layouts/head_panel", title: link_to(@group.name, group_path(@group))
= render 'layouts/page', sidebar: 'layouts/nav/group'
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: @title
%body{class: "#{app_theme} #{theme_type} application", :'data-page' => body_data_page}
%body{class: "#{app_theme} application", :'data-page' => body_data_page}
= render "layouts/broadcast"
= render "layouts/head_panel", title: defined?(@title_url) ? link_to(@title, @title_url) : @title
.container.navless-container
......
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: "Profile"
%body{class: "#{app_theme} #{theme_type} profile", :'data-page' => body_data_page}
%body{class: "#{app_theme} profile", :'data-page' => body_data_page}
= render "layouts/head_panel", title: link_to("Profile", profile_path)
= render 'layouts/page', sidebar: 'layouts/nav/profile'
!!! 5
%html{ lang: "en"}
= render "layouts/head", title: @project.name_with_namespace
%body{class: "#{app_theme} #{theme_type} project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
%body{class: "#{app_theme} project", :'data-page' => body_data_page, :'data-project-id' => @project.id }
= render "layouts/head_panel", title: project_title(@project)
= render "layouts/init_auto_complete"
- @project_settings_nav = true
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment