Styling

Replaced Open Sans fonts locally with googleapis
Styling sections menu

src/Umbraco.Web.UI.Client/src/common/mocks/resources/section.resource.js

@@ -18,6 +18,8 @@ function sectionMocks($httpBackend, mocksUtils) {
             { name: "Media", cssclass: "icon-umb-media", alias: "media" },
             { name: "Settings", cssclass: "icon-umb-settings", alias: "settings" },
             { name: "Developer", cssclass: "icon-umb-developer", alias: "developer" },
+            { name: "Users", cssclass: "icon-umb-users", alias: "users" },
+            { name: "Developer", cssclass: "icon-umb-developer", alias: "developer" },
             { name: "Users", cssclass: "icon-umb-users", alias: "users" }
         ];
         

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -8,6 +8,7 @@
  */
 
 // Core variables and mixins
+@import "fonts.less"; // Loading fonts
 @import "variables.less"; // Modify this for custom colors, font-sizes, etc
 @import "mixins.less";
 

src/Umbraco.Web.UI.Client/src/less/fonts.less

@@ -0,0 +1,9 @@
+/*
+  Open Sans
+
+  Normal: font-weight: 400;
+  Semi-bold: font-weight: 600;
+
+*/
+
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600);

src/Umbraco.Web.UI.Client/src/less/panel.less

@@ -30,9 +30,6 @@
   cursor: text;
 }
 
-.umb-panel-header h1.umb-headline-editor {
-  cursor: text;
-}
 .umb-headline-editor-wrapper, 
 h1.headline{height: 40px; padding: 30px 0 0 20px;}
 
@@ -55,15 +52,17 @@ h1.headline{height: 40px; padding: 30px 0 0 20px;}
 }
 .umb-panel-header h1, {
   margin: 0;
-  font-size: @fontSizeLarge;
+  font-size: @fontSizeMedium;
   font-weight: 400;
   color: @gray;
-  line-height: 22px;
+  line-height: 1em;
   width: 100%;
+  margin: -2px 0 0 0;
 }
 
 .umb-headline-editor-wrapper input{
   display: none;
+  font-size: @fontSizeMedium
 }
 
 .umb-headline-editor-wrapper h1.umb-headline-editor:hover, .umb-headline-editor-wrapper input  {
@@ -71,9 +70,14 @@ h1.headline{height: 40px; padding: 30px 0 0 20px;}
 }
 
 .umb-headline-editor-wrapper input:focus  {
-  border: 1px solid @grayLight;
-  background: @white;
-  width: 100%;
+  background: none;
+  border: none;
+  width: auto;
+  margin: -9px 0 0 0;
+  padding: 0 0 2px 0;
+  border-radius: 0;
+  line-height: 1em;
+  color: @black
 }
 
 

src/Umbraco.Web.UI.Client/src/less/sections.less

@@ -9,37 +9,52 @@ ul.sections {
 }
 
 ul.sections li {
-	border-bottom: 1px solid @grayDark;
 	display: block;
+	border-left: 4px @blackLight solid;
+	-webkit-transition: all .3s linear;
+	-moz-transition: all .3s linear;
+	transition: all .3s linear;
 }
 
-ul.sections li [class^="icon-"]:before, ul.sections li [class*=" icon-"]:before{
-	font-size: 24px;
+ul.sections li [class^="icon-"]:before, 
+ul.sections li [class*=" icon-"]:before{
+	font-size: 30px;
+	margin: 1px 0 0 0;
+	opacity: 0.4;
+	-webkit-transition: all .3s linear;
+	-moz-transition: all .3s linear;
+	transition: all .3s linear;
+}
+
+ul.sections:hover li [class^="icon-"]:before, 
+ul.sections:hover li [class*=" icon-"]:before {
+	opacity: 1
 }
 
 ul.sections li a {
-	display: inline-block;
+	display: block;
 	text-decoration: none;
-	font-size: 10px;
 	text-align: center;
-	color: @gray;
-	-webkit-transition: color .5s linear;
-	-moz-transition: color .5s linear;
-	transition: color .5s linear;
-
-	padding-top: 15px;
-	padding-bottom: 15px;
+	color: @grayLight;
+	padding: 20px 4px 4px 0;
+	border-bottom: 1px solid @grayDark;
+	width: 100%;
+	height: 100%;
+	margin: 0 0 0 -4px;
 }
 
 ul.sections a span {
-	display: block;
 	font-size: 10px;
-	line-height: 1em;
+	line-height: 1.4em;
+	opacity: 0;
+	-webkit-transition: all .3s linear;
+	-moz-transition: all .3s linear;
+	transition: all .3s linear;
+	display: block;
 }
 
-
-ul.sections:hover li a {
-	color: @grayLight;
+ul.sections:hover a span {
+	opacity: 1
 }
 
 
@@ -50,6 +65,8 @@ ul.sections li.avatar {
 	height: 69px;
 	padding: 30px 0 0 0;
 	text-align: center;
+	margin: 0 0 0 -4px;
+	border-bottom: 1px solid @grayDark;
 }
 
 ul.sections li.avatar a {
@@ -57,6 +74,7 @@ ul.sections li.avatar a {
 	padding: 0;
 	width: 40px;
 	height: 40px;
+	border: none
 }
 
 ul.sections li.avatar a img {
@@ -67,27 +85,20 @@ ul.sections li.avatar a img {
 	opacity: 0.4
 }
 
-ul.sections li i {
-	display: inline-block;
-}
-
-ul.sections li a {
-	display: inline-block;
-	padding-left: 4px;
-	padding-right: 4px;
-}
-
-ul.sections li.current {
+ul.sections li.current, ul.sections li:hover {
     border-left: 4px @orange solid;
 }
 
+ul.sections li.avatar.current, ul.sections li.avatar:hover {
+	border-left: 4px @blackLight solid;
+}
+
 ul.sections li.current a{
     padding-left: 0px;
 }
 
 ul.sections li.help {
-	border-top: 1px solid @grayDark;
-	border-bottom: none;
+	
 	margin: 0;
 	position: absolute;
 	bottom: 0;
@@ -95,3 +106,7 @@ ul.sections li.help {
 	display: block;
 	width: 100%;
 }
+
+ul.sections li.help a {
+	border-bottom: none;
+}

src/Umbraco.Web.UI.Client/src/less/variables.less

@@ -44,7 +44,7 @@
 
 // Typography
 // -------------------------
-@sansFontFamily:        "Helvetica Neue", "Open Sans", Helvetica, Arial, sans-serif;
+@sansFontFamily:        "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 @serifFontFamily:       Georgia, "Times New Roman", Times, serif;
 @monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;
 
@@ -63,6 +63,7 @@
 // Based on 14px font-size and 20px line-height
 
 @fontSizeLarge:         @baseFontSize * 1.25; // ~18px
+@fontSizeMedium:        @baseFontSize * 1.15; // ~14px
 @fontSizeSmall:         @baseFontSize * 0.85; // ~12px
 @fontSizeMini:          @baseFontSize * 0.75; // ~11px