updated buttons, mixin declarations

app/views/people/_sub_header.html.haml

@@ -1,7 +1,7 @@
 #author_info
   .right
     - if user_signed_in? && current_user.person != person
-      = aspect_membership_dropdown(contact, person, 'left')
+      = aspect_membership_dropdown(contact, person, 'right')
     - elsif user_signed_in? && current_user.person == person
       = link_to t('people.profile_sidebar.edit_my_profile'), edit_profile_path, :class => 'button creation'
 

app/views/profiles/edit.haml

@@ -10,9 +10,8 @@
 
 .span-12.prepend-5.last
   - content_for :submit_block do
-    = link_to t('cancel'), person_path(current_user.person)
+    = link_to t('cancel'), person_path(current_user.person), :class => "button"
-    = t('or')
+    = submit_tag t('.update_profile'), :class => "creation"
-    = submit_tag t('.update_profile')
   = render :partial => 'edit', :locals => {:person => @person, 
     :profile => @profile, :aspect => @aspect, :step => @step}
 

public/stylesheets/sass/_mixins.scss

@@ -1,11 +1,30 @@
+/* Mixin file for sass.  Here is where we define our variables and
+   browser compatability functions used in all scss/sass files */
+
+
+/* Diapora's default color palate */
 $blue: #3f8fba;
+$dark-blue: darken(#0984C8,10%);
+$green: #8EDE3D;
+
+$grey: #2b2b2b;
+$light-grey: #ddd;
+
 $red: #a80000;
 $background: #fff;
 $creation-blue: #0097ff;
 
+$red: #a80000;
+$background: #fff;
+$creation-blue: #0097ff;
+
+
+/* Transision defaults */
 $speed: 0.1s;
 $easing: linear;
 
+
+/* Style includes */
 @mixin mobile-box {
   margin: 10px;
   padding: 0 15px;
@@ -14,12 +33,30 @@ $easing: linear;
   border-radius: 15px;
 }
 
+/* Style includes */
 @mixin border-radius($tl, $tr:$tl, $br:$tl, $bl:$tl){
   -moz-border-radius: $tl $tr $br $bl;
   -webkit-border-radius: $tl $tr $br $bl;
   border-radius: $tl $tr $br $bl;
 }
 
+@mixin dropdown-shadow{
+  @include box-shadow(0,0px,13px,rgba(20,20,20,0.5))
+}
+
+@mixin button-gradient($color){
+  @include linear-gradient(lighten($color,20%), $color);
+}
+
+@mixin button-gradient-hover($color){
+  @include linear-gradient(lighten($color,20%), darken(saturate($color,15%),10%));
+}
+
+@mixin button-gradient-hover-no-saturation($color){
+  @include linear-gradient(lighten($color,20%), darken($color,15%));
+}
+
+/* Browser compatability */
 @mixin box-shadow($left, $top, $blur, $color:#000){
   -webkit-box-shadow: $left $top $blur $color; 
   -moz-box-shadow: $left $top $blur $color; 
@@ -27,13 +64,13 @@ $easing: linear;
 }
 
 @mixin linear-gradient($from, $to, $start:0%, $end:100%){
-  background: mix($from,$to);
+  background-image: mix($from,$to);
 
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=$from, endColorstr=$to);
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#{$from}, endColorstr=#{$to})";
   
-  background: -webkit-gradient(linear, 0% $start, 0% $end, from($from), to($to));
+  background-image: -webkit-gradient(linear, 0% $start, 0% $end, from($from), to($to));
-  background: -moz-linear-gradient(top, $from $start, $to $end);
+  background-image: -moz-linear-gradient(top, $from $start, $to $end);
 }
 
 @mixin opacity($val){
@@ -55,6 +92,3 @@ $easing: linear;
   transition: $type $speed $easing;
 }
 
-@mixin dropdown-shadow{
-  @include box-shadow(0,0px,13px,rgba(20,20,20,0.5))
-}

public/stylesheets/sass/application.sass

@@ -506,10 +506,6 @@ ul.as-selections
     :margin
       :bottom 5px
 
-.post_initial_info
-  :margin
-    :bottom 5px
-
 .from
   .details,
   .details *

public/stylesheets/sass/ui.sass

@@ -4,102 +4,89 @@
 
 @import 'mixins'
 
+$button-border-color: #aaa 
+
 .ui-autocomplete
   :left -11px
 
 .button
-  @include border-radius(2px)
+  @include border-radius(3px)
   @include linear-gradient(rgb(248,250,250),rgb(228,223,223))
+  @include button-gradient($light-grey)
   @include box-shadow(0,1px,1px,#cfcfcf)
-  @include transition(width, 3s)
+  @include transition(border)
-
-  :font
-    :style normal
-    :weight bold
 
   :display inline
 
+  :font
+    :style normal
+    :size 12px
+  :color #505050
+
   :padding 4px 9px
+
   :min-width 90px
-
-  :font-size 12px
-  :line
-    :height 13px
-
   :min-height 10px
 
-  :border 1px solid #aaa
+  :border 1px solid $button-border-color
-    :top 1px solid #bbb
-    :bottom 1px solid darken(#aaa,13%)
-
-  :cursor pointer
 
+  :cursor default
   :white-space nowrap
 
-  :color #444
-
   &:hover
-    @include linear-gradient(#d6d6d6,#b0b0b0)
+    @include button-gradient-hover-no-saturation($light-grey)
-
+    :color #505050
-    :text
+    :text-decoration none
-      :decoration none
+    :border 1px solid darken($button-border-color,15%)
-    :color #444
 
   &:active
     @include linear-gradient(#acacac,#808080)
 
-    :color #111
-    :text-shadow 0 1px 0 #ccc
-    :border 1px solid #666
-      :top 1px solid #444
-      :bottom 1px solid #999
-
   img
     :position relative
     :height 20px
     :width 20px
     :top 6px
 
+/* fix for input height */
+input.button
+  :padding 3px 9px
+    :bottom 4px
+
 .button .selected
   @include linear-gradient(#f0f0f0,#fafafa,29%,85%)
 
   :border
     :top 1px solid #aaa
 
-.button.delete
+.button
+  &.delete
     :color desaturate($red,10%)
 
-.button.in_aspects
+  &.in_aspects
-  @include linear-gradient(lighten(#76C000,8%),#76C000)
+    @include button-gradient($green)
+    &:hover
+      @include button-gradient-hover($green)
 
-.button.creation
+  &.creation
-  @include linear-gradient(lighten($creation-blue,8%), darken($creation-blue, 3%))
+    @include button-gradient($creation-blue)
-  :color #fafafa
+    :color #fff
 
-  :border 1px solid #666
+    :border 1px solid darken($button-border-color,20%)
-    :top 1px solid #777
-    :bottom 1px solid darken(#666,13%)
 
     &:hover
-    @include linear-gradient(lighten($creation-blue,3%), darken($creation-blue, 8%))
+      @include button-gradient-hover($creation-blue)
+      :border 1px solid darken($button-border-color,35%)
 
-.button.red_on_hover
+  &.red_on_hover
     &:hover
-    @include linear-gradient(lighten(#F74427, 10%), darken(#F74427,0%))
+      @include button-gradient(#F74427)
       :color #222
 
-    :border 1px solid #666
-      :top 1px solid #777
-      :bottom 1px solid darken(#666,13%)
-
-  &:active
-    :text-shadow none
-
 .right
   :position absolute
   :right 0
 
-
 .dropdown
   :position relative
   :display inline-block
@@ -115,7 +102,7 @@
     :display none
     :width 140px
     :padding 4px 0
-    :margin-top 1px
+    :margin-top 2px
     :background
       :color #fff
     :border 1px solid #999
@@ -185,7 +172,6 @@
     .button
       @include border-radius(3px, 3px, 0, 0)
       :border 1px solid #444
-        :bottom none
 
     .selected
       :font-weight bold