diff --git a/app/views/people/_sub_header.html.haml b/app/views/people/_sub_header.html.haml
index fd3f5e9ba..334c60fe4 100644
--- a/app/views/people/_sub_header.html.haml
+++ b/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'
diff --git a/app/views/profiles/edit.haml b/app/views/profiles/edit.haml
index 2413fa95b..6efb68743 100644
--- a/app/views/profiles/edit.haml
+++ b/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)
- = t('or')
- = submit_tag t('.update_profile')
+ = link_to t('cancel'), person_path(current_user.person), :class => "button"
+ = submit_tag t('.update_profile'), :class => "creation"
= render :partial => 'edit', :locals => {:person => @person,
:profile => @profile, :aspect => @aspect, :step => @step}
diff --git a/public/stylesheets/sass/_mixins.scss b/public/stylesheets/sass/_mixins.scss
index 9f926d4a2..5e7448acd 100644
--- a/public/stylesheets/sass/_mixins.scss
+++ b/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: -moz-linear-gradient(top, $from $start, $to $end);
+ background-image: -webkit-gradient(linear, 0% $start, 0% $end, from($from), to($to));
+ 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))
-}
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index ff9da4f0c..f570ef33b 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -506,10 +506,6 @@ ul.as-selections
:margin
:bottom 5px
-.post_initial_info
- :margin
- :bottom 5px
-
.from
.details,
.details *
diff --git a/public/stylesheets/sass/ui.sass b/public/stylesheets/sass/ui.sass
index 853019ac9..50286def1 100644
--- a/public/stylesheets/sass/ui.sass
+++ b/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)
-
- :font
- :style normal
- :weight bold
+ @include transition(border)
: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
- :top 1px solid #bbb
- :bottom 1px solid darken(#aaa,13%)
-
- :cursor pointer
+ :border 1px solid $button-border-color
+ :cursor default
:white-space nowrap
- :color #444
-
&:hover
- @include linear-gradient(#d6d6d6,#b0b0b0)
-
- :text
- :decoration none
- :color #444
+ @include button-gradient-hover-no-saturation($light-grey)
+ :color #505050
+ :text-decoration none
+ :border 1px solid darken($button-border-color,15%)
&: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
- :color desaturate($red,10%)
+.button
+ &.delete
+ :color desaturate($red,10%)
-.button.in_aspects
- @include linear-gradient(lighten(#76C000,8%),#76C000)
+ &.in_aspects
+ @include button-gradient($green)
+ &:hover
+ @include button-gradient-hover($green)
-.button.creation
- @include linear-gradient(lighten($creation-blue,8%), darken($creation-blue, 3%))
- :color #fafafa
+ &.creation
+ @include button-gradient($creation-blue)
+ :color #fff
- :border 1px solid #666
- :top 1px solid #777
- :bottom 1px solid darken(#666,13%)
+ :border 1px solid darken($button-border-color,20%)
- &:hover
- @include linear-gradient(lighten($creation-blue,3%), darken($creation-blue, 8%))
+ &:hover
+ @include button-gradient-hover($creation-blue)
+ :border 1px solid darken($button-border-color,35%)
-.button.red_on_hover
- &:hover
- @include linear-gradient(lighten(#F74427, 10%), darken(#F74427,0%))
- :color #222
-
- :border 1px solid #666
- :top 1px solid #777
- :bottom 1px solid darken(#666,13%)
-
- &:active
- :text-shadow none
+ &.red_on_hover
+ &:hover
+ @include button-gradient(#F74427)
+ :color #222
.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