spina.css.sass in spina-template-0.2.16

- old
+ new

@@ -50,25 +50,27 @@
   @include display(flex)
 
 // Primary navigation
 
 nav#primary
-  background: #111
+  background: #444882
   height: 100%
   padding-top: 10px
   position: relative
   text-align: center
-  width: 100px
+  width: 80px
+  @include linear-gradient(#3b3f74, #7a76ad)
 
   @include media($tablet)
     width: 80px
 
   ul li a
-    color: #999
+    color: #fff
     display: block
     font-size: 10px
     font-weight: 700
+    opacity: .6
     padding: 20px 0
     position: relative
     text-decoration: none
     text-transform: uppercase
     width: 100%
@@ -76,26 +78,30 @@
 
     @include media($tablet)
       padding: 12px 0
 
   ul li.active a, ul li a:hover
-    color: #fff
+    opacity: 1
 
   ul li.bottom a
     bottom: 0
     left: 0
     position: absolute
 
   ul li a i.icon
     display: block
-    font-size: 26px
+    font-size: 28px
     margin-bottom: 8px
     text-transform: none
 
     @include media($tablet)
       font-size: 20px
 
+  ul li:first-child a i.icon
+    font-size: 32px
+    margin-bottom: 3px
+
   ul li a[data-badge]:after
     background: $danger-color
     border-radius: 8px
     color: #fff
     content: attr(data-badge)
@@ -110,11 +116,11 @@
     top: 12px
 
 // Secondary navigation
 
 nav#secondary
-  background: #f5f5f5
+  background: #f9f9f9
   border-right: 1px solid #ccc
   height: 100%
   padding: 30px 0
   width: 300px
 
@@ -140,13 +146,13 @@
     color: #333
     display: block
     font-size: 15px
     font-weight: 600
     line-height: 15px
-    margin-left: 36px
-    padding: 16px 30px
+    padding: 16px 30px 16px 66px
     text-decoration: none
+    @include transition(all .2s ease)
 
     @include media($tablet)
       margin-left: 24px
       padding-left: 0
 
@@ -161,16 +167,14 @@
 
       @include media($tablet)
         display: none
 
   ul li a:hover
-    color: #333
+    background: #f1f1f1
 
-    small, i.icon
-      color: inherit
-
   ul li.active a
+    background: #f1f1f1
     color: $primary-color
 
     small, i.icon
       color: inherit
 
@@ -200,11 +204,11 @@
       content: ""
       display: block
       position: absolute
       right: -11px
       top: 33%
-      @include triangle(22px, #f5f5f5, right)
+      @include triangle(22px, #f1f1f1, right)
 
 // Tabs
 
 nav.tabs
   border-bottom: 1px solid #ddd
@@ -452,10 +456,13 @@
 // Breadcrumbs
 
 #main_content_header
   min-height: 50px
 
+  .preview-website i
+    vertical-align: bottom
+
   @include media($tablet)
     .button
       overflow: hidden
       height: 32px
       width: 35px
@@ -519,5 +526,19 @@
 .pull-left
   float: left
 
 .pull-right
   float: right
+
+.spina-logo
+  bottom: 0px
+  opacity: .5
+  padding: 20px
+  position: absolute
+  right: 0px
+  @include transition(opacity .2s ease)
+
+  &:hover
+    opacity: 1
+
+  img
+    display: block
\ No newline at end of file