spina.sass in spina-0.12.0

- old
+ new

@@ -1,12 +1,11 @@
-// Frameworks
-@import bourbon
-@import neat
-
 // Configuration
 @import spina/configuration
 
+// Mixins
+@import spina/mixins
+
 // Normalizing
 @import spina/normalize
 
 // Icons
 @import spina/ics_spina
@@ -23,19 +22,14 @@
 @import spina/labels
 @import spina/modal
 @import spina/sortable_lists
 @import spina/gallery
 @import spina/login
-@import spina/cards
 @import spina/trix
 @import spina/wizard
 @import spina/notifications
 
-// Plugins
-@import spina/morris
-@import spina/wysihtml5
-@import spina/farbtastic
 
 html
   box-sizing: border-box
   min-height: 100%
 
@@ -51,16 +45,16 @@
   background: #f5f5fa
   min-width: 1024px
 
 // Primary navigation
 nav#primary
+  background: linear-gradient(#3b3f74, #7a76ad)
   height: 100%
   overflow: hidden
   position: fixed
   width: 300px
   z-index: 5
-  @include linear-gradient(#3b3f74, #7a76ad)
 
   & > ul
     height: 100%
     padding-top: 12px
     position: relative
@@ -104,19 +98,19 @@
 
   ul li.active > a
     opacity: 1
 
   ul li ul
+    background: linear-gradient(#3b3f74, #7a76ad)
     bottom: 0
     left: 80px
     padding-top: 20px
     position: absolute
     top: 0
+    transform: translateX(100%)
     width: calc(100% - 80px)
     z-index: 1
-    @include linear-gradient(#3b3f74, #7a76ad)
-    @include transform(translateX(100%))
 
     li a
       line-height: 40px
 
   ul li ul li a.back-to-main-menu
@@ -149,46 +143,46 @@
     padding: 0 8px
     position: absolute
     right: 20px
     text-align: center
     top: 50%
+    transform: translateY(-50%)
     vertical-align: middle
     z-index: 1
-    @include transform(translateY(-50%))
 
   ul li ul li[data-badge] a
     z-index: 2
 
   ul li ul li.active[data-badge], ul li ul li:hover[data-badge]
     &:after
       background: rgba(255, 255, 255, .9)
 
   &.animated > ul
-    @include transition(background .3s ease)
+    transition: background .3s ease
 
     & > li > a
-      @include transition(all .3s ease)
+      transition: all .3s ease
 
       .icon
-        @include transition(all .3s ease)
+        transition: all .3s ease
 
     li.active ul
-      @include transition(all .3s ease)
+      transition: all .3s ease
 
   &.transformed > ul
     background: rgba(0, 0, 0, .4)
 
     & > li > a
       color: transparent
-      @include transform(translateX(-10px))
+      transform: translateX(-10px)
 
       .icon
         color: #f5f5fa
-        @include transform(translateX(10px))
+        transform: translateX(10px)
 
     li.active ul
-      @include transform(translateX(0%))
+      transform: translateX(0%)
 
 // Secondary navigation
 nav#secondary
   margin-bottom: -30px
   margin-top: 20px
@@ -214,12 +208,12 @@
       content: " "
       height: 3px
       left: 0px
       opacity: 0
       position: absolute
+      transform: scale(0)
       width: 100%
-      @include transform(scale(0))
 
   ul li a:hover
     opacity: 1
 
   ul li.active a
@@ -228,13 +222,13 @@
     margin: 0 16px
     padding: 0
 
     &:after
       opacity: 1
-      @include transform(scale(1))
-      @include transition(all .2s ease)
-      @include transition-delay(.05s)
+      transform: scale(1)
+      transition: all .2s ease
+      transition-delay: .05s
 
   ul li:first-child a
     margin-left: 0
     padding-left: 0
 
@@ -525,19 +519,21 @@
   float: left
 
 .pull-right
   float: right
 
-.clearfix
-  @include clearfix()
+.clearfix:after
+  clear: both
+  content: " "
+  display: block
 
 .spina-logo
   bottom: 0px
   opacity: .5
   padding: 20px
   position: fixed
   right: 0px
-  @include transition(opacity .2s ease)
+  transition: opacity .2s ease
 
   &:hover
     opacity: 1
 
   img