Make the logo icon more awesome

Dmitriy Zaporozhets
1 parent a87fccc0
Showing 7 changed files with 64 additions and 18 deletions Show diff stats
app/assets/stylesheets/sections/header.scss
app/assets/stylesheets/themes/ui_basic.scss
app/assets/stylesheets/themes/ui_color.scss
app/assets/stylesheets/themes/ui_gray.scss
app/assets/stylesheets/themes/ui_mars.scss
app/assets/stylesheets/themes/ui_modern.scss
app/views/layouts/_head_panel.html.haml
@@ -35,9 +35,14 @@ header {
   .app_logo {
     float: left;
     margin-right: 15px;
+    position: relative;
+    top: -5px;
+    padding-top: 5px;
+
     a {
       float: left;
       padding: 0px;
+      margin: 0 10px;
  
       h1 {
         background: url('logo_dark.png') no-repeat 0px 2px;
@@ -48,6 +53,9 @@ header {
         text-indent: -9999px;
       }
     }
+    &:hover {
+      background-color: #EEE;
+    }
   }
  
   /**
@@ -243,5 +251,23 @@ header {
       text-shadow: 0 1px 1px #111;
     }
   }
+
+  .app_logo {
+    .separator {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  .separator {
+    float: left;
+    height: 60px;
+    width: 1px;
+    background: white;
+    border-left: 1px solid #DDD;
+    margin-top: -10px;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
 }
  
@@ -4,21 +4,8 @@
  *
  */
 .ui_basic {
-  .app_logo {
-    .separator {
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
   .separator {
-    float: left;
-    height: 60px;
-    width: 1px;
     background: white;
     border-left: 1px solid #DDD;
-    margin-top: -10px;
-    margin-left: 10px;
-    margin-right: 10px;
   }
 }
@@ -17,6 +17,15 @@
     &.navbar-gitlab {
       .navbar-inner {
         background: #657;
+        .app_logo {
+          &:hover {
+            background-color: #6A5A7A;
+          }
+        }
+        .separator {
+          background: #546;
+          border-left: 1px solid #706080;
+        }
       }
     }
   }
@@ -17,6 +17,15 @@
     &.navbar-gitlab {
       .navbar-inner {
         background: #708090;
+        .app_logo {
+          &:hover {
+            background-color: #6A7A8A;
+          }
+        }
+        .separator {
+          background: #607080;
+          border-left: 1px solid #8090A0;
+        }
       }
     }
   }
@@ -46,21 +46,26 @@
     .app_logo {
       a {
         h1 {
-          background: url('logo_white.png') no-repeat 0px 2px;
+          background: url('logo_white.png') no-repeat center center;
           color: #eee;
           text-shadow: 0 1px 1px #111;
         }
       }
-      .separator {
-        display: none;
+      &:hover {
+        background-color: #41464e;
       }
-
     }
     .project_name {
       color: #eee;
       text-shadow: 0 1px 1px #111;
     }
   }
+
+  .separator {
+    background: #31363E;
+    border-left: 1px solid #666;
+  }
+
   /*
    *  End of Application Header
    *
@@ -17,6 +17,15 @@
     &.navbar-gitlab {
       .navbar-inner {
         background: #567;
+        .app_logo {
+          &:hover {
+            background-color: #516171;
+          }
+        }
+        .separator {
+          background: #456;
+          border-left: 1px solid #678;
+        }
       }
     }
   }
@@ -2,9 +2,10 @@
   .navbar-inner
     .container
       %div.app_logo
+        %span.separator
         = link_to root_path, class: "home has_bottom_tooltip", title: "Dashboard" do
           %h1 GITLAB
-      %span.separator
+        %span.separator
       %h1.project_name= title
       %ul.nav
         - if current_user.is_admin?
...	...	@@ -35,9 +35,14 @@ header {
35	35	.app_logo {
36	36	float: left;
37	37	margin-right: 15px;
	38	+ position: relative;
	39	+ top: -5px;
	40	+ padding-top: 5px;
	41	+
38	42	a {
39	43	float: left;
40	44	padding: 0px;
	45	+ margin: 0 10px;
41	46
42	47	h1 {
43	48	background: url('logo_dark.png') no-repeat 0px 2px;
...	...	@@ -48,6 +53,9 @@ header {
48	53	text-indent: -9999px;
49	54	}
50	55	}
	56	+ &:hover {
	57	+ background-color: #EEE;
	58	+ }
51	59	}
52	60
53	61	/**
...	...	@@ -243,5 +251,23 @@ header {
243	251	text-shadow: 0 1px 1px #111;
244	252	}
245	253	}
	254	+
	255	+ .app_logo {
	256	+ .separator {
	257	+ margin-left: 0;
	258	+ margin-right: 0;
	259	+ }
	260	+ }
	261	+
	262	+ .separator {
	263	+ float: left;
	264	+ height: 60px;
	265	+ width: 1px;
	266	+ background: white;
	267	+ border-left: 1px solid #DDD;
	268	+ margin-top: -10px;
	269	+ margin-left: 10px;
	270	+ margin-right: 10px;
	271	+ }
246	272	}
247	273
...	...
...	...	@@ -4,21 +4,8 @@
4	4	*
5	5	*/
6	6	.ui_basic {
7		- .app_logo {
8		- .separator {
9		- margin-left: 0;
10		- margin-right: 0;
11		- }
12		- }
13		-
14	7	.separator {
15		- float: left;
16		- height: 60px;
17		- width: 1px;
18	8	background: white;
19	9	border-left: 1px solid #DDD;
20		- margin-top: -10px;
21		- margin-left: 10px;
22		- margin-right: 10px;
23	10	}
24	11	}
...	...
...	...	@@ -17,6 +17,15 @@
17	17	&.navbar-gitlab {
18	18	.navbar-inner {
19	19	background: #657;
	20	+ .app_logo {
	21	+ &:hover {
	22	+ background-color: #6A5A7A;
	23	+ }
	24	+ }
	25	+ .separator {
	26	+ background: #546;
	27	+ border-left: 1px solid #706080;
	28	+ }
20	29	}
21	30	}
22	31	}
...	...
...	...	@@ -46,21 +46,26 @@
46	46	.app_logo {
47	47	a {
48	48	h1 {
49		- background: url('logo_white.png') no-repeat 0px 2px;
	49	+ background: url('logo_white.png') no-repeat center center;
50	50	color: #eee;
51	51	text-shadow: 0 1px 1px #111;
52	52	}
53	53	}
54		- .separator {
55		- display: none;
	54	+ &:hover {
	55	+ background-color: #41464e;
56	56	}
57		-
58	57	}
59	58	.project_name {
60	59	color: #eee;
61	60	text-shadow: 0 1px 1px #111;
62	61	}
63	62	}
	63	+
	64	+ .separator {
	65	+ background: #31363E;
	66	+ border-left: 1px solid #666;
	67	+ }
	68	+
64	69	/*
65	70	* End of Application Header
66	71	*
...	...
...	...	@@ -2,9 +2,10 @@
2	2	.navbar-inner
3	3	.container
4	4	%div.app_logo
	5	+ %span.separator
5	6	= link_to root_path, class: "home has_bottom_tooltip", title: "Dashboard" do
6	7	%h1 GITLAB
7		- %span.separator
	8	+ %span.separator
8	9	%h1.project_name= title
9	10	%ul.nav
10	11	- if current_user.is_admin?
...	...