From 1e50d1465a9d249f0a99e5add96e0ac3e432ad5e Mon Sep 17 00:00:00 2001
From: Bruno Machado <brunoalvirubro@gmail.com>
Date: Sat, 6 Apr 2013 15:34:15 -0300
Subject: [PATCH] Convert some stylesheets to SCSS #3796

---
 app/assets/stylesheets/application.css.sass  |   2 +-
 app/assets/stylesheets/autocomplete.css.sass |  64 ----
 app/assets/stylesheets/autocomplete.css.scss |  74 +++++
 app/assets/stylesheets/rtl.css.sass          | 259 ---------------
 app/assets/stylesheets/rtl.css.scss          | 326 +++++++++++++++++++
 app/assets/stylesheets/sessions.css.sass     | 146 ---------
 app/assets/stylesheets/sessions.css.scss     | 162 +++++++++
 app/assets/stylesheets/tags.css.sass         |  15 -
 app/assets/stylesheets/tags.css.scss         |  20 ++
 app/assets/stylesheets/ui.css.sass           | 211 ------------
 app/assets/stylesheets/ui.css.scss           | 255 +++++++++++++++
 11 files changed, 838 insertions(+), 696 deletions(-)
 delete mode 100644 app/assets/stylesheets/autocomplete.css.sass
 create mode 100644 app/assets/stylesheets/autocomplete.css.scss
 delete mode 100644 app/assets/stylesheets/rtl.css.sass
 create mode 100644 app/assets/stylesheets/rtl.css.scss
 delete mode 100644 app/assets/stylesheets/sessions.css.sass
 create mode 100644 app/assets/stylesheets/sessions.css.scss
 delete mode 100644 app/assets/stylesheets/tags.css.sass
 create mode 100644 app/assets/stylesheets/tags.css.scss
 delete mode 100644 app/assets/stylesheets/ui.css.sass
 create mode 100644 app/assets/stylesheets/ui.css.scss

diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
index fdb65529a..d232ee327 100644
--- a/app/assets/stylesheets/application.css.sass
+++ b/app/assets/stylesheets/application.css.sass
@@ -1,5 +1,5 @@
 @import 'compass'
-@import 'ui.css.sass'
+@import 'ui.css.scss'
 @import '_mixins.css.scss'
 @import '_flash_messages.scss'
 @import 'new_styles/_spinner'
diff --git a/app/assets/stylesheets/autocomplete.css.sass b/app/assets/stylesheets/autocomplete.css.sass
deleted file mode 100644
index 0ac0726af..000000000
--- a/app/assets/stylesheets/autocomplete.css.sass
+++ /dev/null
@@ -1,64 +0,0 @@
-.ac_results
-  :border 1px solid #999
-  :background-color transparent
-  :overflow hidden
-  :z-index 99999
-  :min-width 247px !important
-  :width 100%
-
-  :-webkit-border-radius 3px
-  :-moz-border-radius 3px
-  :border-radius 3px
-
-  :-webkit-box-shadow 0 1px 3px #999
-  :-moz-box-shadow 0 1px 3px #999
-  :box-shadow 0 1px 3px #999
-
-.ac_results ul
-  :width 100%
-  :list-style-position outside
-  :list-style none
-  :padding 0
-  :margin 0
-
-.ac_results li
-  :margin 0px
-  :padding 2px 5px
-    :left 50px
-    :top 6px
-  :cursor default
-  :display block
-  :height 37px
-  :position relative
-  // if width will be 100% horizontal scrollbar will apear
-  // when scroll mode will be used
-  // width 100%
-  :font menu
-  :font-size 1em
-  // it is very important, if line-height not setted or setted
-  // in relative units scroll will be broken in firefox
-  //:line-height 16px
-  :overflow hidden
-
-.ac_loading
-  :background white image-url('ajax-loader.gif') right center no-repeat
-
-.ac_odd
-  :background-color #fafafa
-  :background-color rgba(250,250,250,0.95) 
-
-.ac_even
-  :background-color #fff
-  :background-color rgba(255,255,255,0.95) 
-
-.ac_over
-  :background-color #3F8FBA
-  :color white
-
-.ac_results
-  .avatar
-    :height 35px
-    :width 35px
-    :position absolute
-    :left 5px
-    :top 5px
diff --git a/app/assets/stylesheets/autocomplete.css.scss b/app/assets/stylesheets/autocomplete.css.scss
new file mode 100644
index 000000000..bed1a77b4
--- /dev/null
+++ b/app/assets/stylesheets/autocomplete.css.scss
@@ -0,0 +1,74 @@
+.ac_results {
+  border: 1px solid #999;
+  background-color: transparent;
+  overflow: hidden;
+  z-index: 99999;
+  min-width: 247px !important;
+  width: 100%;
+
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+
+  -webkit-box-shadow: 0 1px 3px #999;
+  -moz-box-shadow: 0 1px 3px #999;
+  box-shadow: 0 1px 3px #999;
+}
+
+.ac_results ul {
+  width: 100%;
+  list-style-position: outside;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ac_results li {
+  margin: 0px;
+  padding: 2px 5px {
+    left: 50px;
+    top: 6px;
+  }
+  cursor: default;
+  display: block;
+  height: 37px;
+  position: relative;
+  // if width will be 100% horizontal scrollbar will apear
+  // when scroll mode will be used
+  // width 100%
+  font: menu;
+  font-size: 1em;
+  // it is very important, if line-height not setted or setted
+  // in relative units scroll will be broken in firefox
+  //:line-height 16px
+  overflow: hidden;
+}
+
+.ac_loading {
+  background: white image-url('ajax-loader.gif') right center no-repeat;
+}
+
+.ac_odd {
+  background-color: #fafafa;
+  background-color: rgba(250,250,250,0.95);
+}
+
+.ac_even {
+  background-color: #fff;
+  background-color: rgba(255,255,255,0.95);
+}
+
+.ac_over {
+  background-color: #3F8FBA;
+  color: white;
+}
+
+.ac_results {
+  .avatar {
+    height: 35px;
+    width: 35px;
+    position: absolute;
+    left: 5px;
+    top: 5px;
+  }
+}
diff --git a/app/assets/stylesheets/rtl.css.sass b/app/assets/stylesheets/rtl.css.sass
deleted file mode 100644
index 867225603..000000000
--- a/app/assets/stylesheets/rtl.css.sass
+++ /dev/null
@@ -1,259 +0,0 @@
-body
-  :direction rtl
-  :text-align right
-
-#user_menu
-  :left 0
-  :right auto
-
-.diaspora_header_logo
-  :float right
-  :margin-left 1em
-  :margin-right 0
-
-#global_search
-  :float right
-  
-#notification_badge, #message_inbox_badge 
-  :margin 0 10px 0 -5px
-
-#nav_badges 
-  :left auto
-  :right 460px
-  :margin-right -20px
-
-
-#notification_dropdown 
-  :left auto
-  :right 507px
-
-#view_all_notifications 
-  :float left
-  :margin-right 0
-  :margin-left 3px
-
-#notification_badge, #message_inbox_badge
-  :margin 0 10px 0 -5px
-
-#notification_badge a, #message_inbox_badge a
-  :right 0
-
-.append-2
-  :padding-left 80px
-  :padding-right 0px
-  :float right
-
-footer ul#footer_nav
-  :float left
-
-.right
-  :left 0
-  :right auto
-
-.rightBar .right 
-  :margin-right 70px
-
-.stream .avatar
-  :float right
-
-.stream_element .content
-  :padding-right 60px
-  :padding-left 0
-
-#publisher_textarea_wrapper textarea
-  :left auto
-
-#publisher_textarea_wrapper #file-upload, #publisher_textarea_wrapper #hide_publisher, #facebox .close 
-  :right auto
-  :left 0
-  :margin-left 3px
-
-#publisher .options_and_submit .public_toggle
-  :text-align left
-
-#publisher #click_to_share img
-  :right 0
-  :left auto
-
-#publisher #click_to_share span
-  :margin-right 12px
-  :margin-left 0
-
-#publisher_textarea_wrapper #photodropzone
-  :right 5px
-  :left auto
-
-#publisher_textarea_wrapper #photodropzone li .circle
-  :left -7px
-  :right auto
-
-#publisher_textarea_wrapper #photodropzone li .x
-  :left -1px
-  :right auto
-
-#webSocketContainer
-  :left auto !important
-  :right -100px
-
-header ul#user_menu
-  :padding 5px 30px 5px 5px
-  :right auto
-  :margin -2px 0 0 -5px
-
-header ul#user_menu .avatar
-  :left auto
-  :right 2px
-
-header ul#user_menu a
-  :padding-left 15px
-
-header ul#user_menu .right
-  :right auto
-  :left 5px
-  
-#sort_by 
-  :float left
-
-.stream_element .right
-  :left 12px
-  :right auto
-
-ul.as-selections li
-  :float right
-
-ul.as-selections li.as-selection-item a.as-close
-  :float left
-  :margin 0 0 0 3px
-
-ul.as-selections li.as-selection-item
-  :padding 3px 6px 3px 0
-
-#profile_photo_upload img
-  :left auto
-  :right 0
-
-#profile_photo_upload
-  :padding-left 0
-  :padding-right 120px
-
-form p.checkbox_select label
-  :right 20px
-  :left auto
-
-.prepend-5
-  :float right
-  :padding-right 200px
-  :padding-left 0
-
-#update_profile_form h4 textarea[placeholder]
-  :right -9999px
-  :left auto
-
-.prepend-8
-  :padding-right 320px
-  :padding-left 0
-
-.span-2
-  :float right
-  :text-align right
-  :margin-left 0
-  :margin-right 10px
-
-#facebox_header h3, #facebox_header h4
-  :text-align right
-
-textarea.comment_box
-  :left auto
-  :right -9999px
-
-label
-  :right 0.48em
-  :left auto
-
-ul#settings_nav
-  :right 198px
-  :left auto
-
-ul, ol
-  :margin 0 0 1.5em 1.5em
-  :padding-right 3.333em
-
-ul#settings_nav > li
-  :margin-left 1em
-  :margin-right 0
-
-.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24
-  :float right
-  :margin-left 10px
-  :margin-right 0
-
-.last
-  :margin-left 0
-
-ul.comments li .content, ul.show_comments li .content, div.likes li .content, div.dislikes li .content
-  :padding-left 10px
-  :padding-right 36px
-
-ul.comments li form p, ul.show_comments li form p, div.likes li form p, div.dislikes li form p
-  :left auto
-  :right 35px
-
-ul.comments li.posted .controls .delete 
-  :float left
-
-.stream .stream_element time
-  :right auto
-  :left 20px
-
-.aspect_list .name
-  :right 1em
-  :left auto
-
-.aspect_list ul > li .right
-  :left 1em
-  :right auto
-
-.share_with .add_aspect .right
-  :right auto
-  :left 1em
-
-.share_with .done .right
-  :right auto
-  :left 1em
-
-.share_with .add_aspect p
-  :padding-right 1em
-  :padding-left 0
-
-#facebox
-  :text-align right
-
-.stream_element.conversation .message_count
-  :right auto
-  :left 10px
-
-.stream_element.conversation .timestamp
-  :right auto
-  :left 10px
-
-ul.left_nav .contact_count, ul.left_nav .edit 
-  :float left
-
-.conversation_participants .right, .stream .new_message .right
-  :right auto
-  :left 0
-
-.prepend-9 
-  :padding-left 0
-  :padding-right 361px
-
-.stream_container 
-  :border-left 0
-  :border-right 1px solid #DDDDDD
-
-.stream .new_message .right input[type=reset] 
-  :float left
-  :margin-right 10px
-
-div.content span.rtl
-  :display block
diff --git a/app/assets/stylesheets/rtl.css.scss b/app/assets/stylesheets/rtl.css.scss
new file mode 100644
index 000000000..8cacfa335
--- /dev/null
+++ b/app/assets/stylesheets/rtl.css.scss
@@ -0,0 +1,326 @@
+body {
+  direction: rtl;
+  text-align: right;
+}
+
+#user_menu {
+  left: 0;
+  right: auto;
+}
+
+.diaspora_header_logo {
+  float: right;
+  margin-left: 1em;
+  margin-right: 0;
+}
+
+#global_search {
+  float: right;
+}
+
+#notification_badge, #message_inbox_badge {
+  margin: 0 10px 0 -5px;
+}
+
+#nav_badges {
+  left: auto;
+  right: 460px;
+  margin-right: -20px;
+}
+
+
+#notification_dropdown {
+  left: auto;
+  right: 507px;
+}
+
+#view_all_notifications {
+  float: left;
+  margin-right: 0;
+  margin-left: 3px;
+}
+
+#notification_badge, #message_inbox_badge {
+  margin: 0 10px 0 -5px;
+}
+
+#notification_badge a, #message_inbox_badge a {
+  right: 0;
+}
+
+.append-2 {
+  padding-left: 80px;
+  padding-right: 0px;
+  float: right;
+}
+
+footer ul#footer_nav {
+  float: left;
+}
+
+.right {
+  left: 0;
+  right: auto;
+}
+
+.rightBar .right {
+  margin-right: 70px;
+}
+
+.stream .avatar {
+  float: right;
+}
+
+.stream_element .content {
+  padding-right: 60px;
+  padding-left: 0;
+}
+
+#publisher_textarea_wrapper textarea {
+  left: auto;
+}
+
+#publisher_textarea_wrapper #file-upload, #publisher_textarea_wrapper #hide_publisher, #facebox .close {
+  right: auto;
+  left: 0;
+  margin-left: 3px;
+}
+
+#publisher .options_and_submit .public_toggle {
+  text-align: left;
+}
+
+#publisher #click_to_share img {
+  right: 0;
+  left: auto;
+}
+
+#publisher #click_to_share span {
+  margin-right: 12px;
+  margin-left: 0;
+}
+
+#publisher_textarea_wrapper #photodropzone {
+  right: 5px;
+  left: auto;
+}
+
+#publisher_textarea_wrapper #photodropzone li .circle {
+  left: -7px;
+  right: auto;
+}
+
+#publisher_textarea_wrapper #photodropzone li .x {
+  left: -1px;
+  right: auto;
+}
+
+#webSocketContainer {
+  left: auto !important;
+  right: -100px;
+}
+
+header ul#user_menu {
+  padding: 5px 30px 5px 5px;
+  right: auto;
+  margin: -2px 0 0 -5px;
+}
+
+header ul#user_menu .avatar {
+  left: auto;
+  right: 2px;
+}
+
+header ul#user_menu a {
+  padding-left: 15px;
+}
+
+header ul#user_menu .right {
+  right: auto;
+  left: 5px;
+}
+
+#sort_by {
+  float: left;
+}
+
+.stream_element .right {
+  left: 12px;
+  right: auto;
+}
+
+ul.as-selections li {
+  float: right;
+}
+
+ul.as-selections li.as-selection-item a.as-close {
+  float: left;
+  margin: 0 0 0 3px;
+}
+
+ul.as-selections li.as-selection-item {
+  padding: 3px 6px 3px 0;
+}
+
+#profile_photo_upload img {
+  left: auto;
+  right: 0;
+}
+
+#profile_photo_upload {
+  padding-left: 0;
+  padding-right: 120px;
+}
+
+form p.checkbox_select label {
+  right: 20px;
+  left: auto;
+}
+
+.prepend-5 {
+  float: right;
+  padding-right: 200px;
+  padding-left: 0;
+}
+
+#update_profile_form h4 textarea[placeholder] {
+  right: -9999px;
+  left: auto;
+}
+
+.prepend-8 {
+  padding-right: 320px;
+  padding-left: 0;
+}
+
+.span-2 {
+  float: right;
+  text-align: right;
+  margin-left: 0;
+  margin-right: 10px;
+}
+
+#facebox_header h3, #facebox_header h4 {
+  text-align: right;
+}
+
+textarea.comment_box {
+  left: auto;
+  right: -9999px;
+}
+
+label {
+  right: 0.48em;
+  left: auto;
+}
+
+ul#settings_nav {
+  right: 198px;
+  left: auto;
+}
+
+ul, ol {
+  margin: 0 0 1.5em 1.5em;
+  padding-right: 3.333em;
+}
+
+ul#settings_nav > li {
+  margin-left: 1em;
+  margin-right: 0;
+}
+
+.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {
+  float: right;
+  margin-left: 10px;
+  margin-right: 0;
+}
+
+.last {
+  margin-left: 0;
+}
+
+ul.comments li .content, ul.show_comments li .content, div.likes li .content, div.dislikes li .content {
+  padding-left: 10px;
+  padding-right: 36px;
+}
+
+ul.comments li form p, ul.show_comments li form p, div.likes li form p, div.dislikes li form p {
+  left: auto;
+  right: 35px;
+}
+
+ul.comments li.posted .controls .delete {
+  float: left
+}
+
+.stream .stream_element time {
+  right: auto;
+  left: 20px;
+}
+
+.aspect_list .name {
+  right: 1em;
+  left: auto;
+}
+
+.aspect_list ul > li .right {
+  left: 1em;
+  right: auto;
+}
+
+.share_with .add_aspect .right {
+  right: auto;
+  left: 1em;
+}
+
+.share_with .done .right {
+  right: auto;
+  left: 1em;
+}
+
+.share_with .add_aspect p {
+  padding-right: 1em;
+  padding-left: 0;
+}
+
+#facebox {
+  text-align: right;
+}
+
+.stream_element.conversation .message_count {
+  right: auto;
+  left: 10px;
+}
+
+.stream_element.conversation .timestamp {
+  right: auto;
+  left: 10px;
+}
+
+ul.left_nav .contact_count, ul.left_nav .edit {
+  float: left;
+}
+
+.conversation_participants .right, .stream .new_message .right {
+  right: auto;
+  left: 0;
+}
+
+.prepend-9 {
+  padding-left: 0;
+  padding-right: 361px;
+}
+
+.stream_container {
+  border-left: 0;
+  border-right: 1px solid #DDDDDD;
+}
+
+.stream .new_message .right input[type=reset] {
+  float: left;
+  margin-right: 10px;
+}
+
+div.content span.rtl {
+  display: block;
+}
diff --git a/app/assets/stylesheets/sessions.css.sass b/app/assets/stylesheets/sessions.css.sass
deleted file mode 100644
index 707109233..000000000
--- a/app/assets/stylesheets/sessions.css.sass
+++ /dev/null
@@ -1,146 +0,0 @@
-//   Copyright (c) 2010-2011, Diaspora Inc.  This file is
-//   licensed under the Affero General Public License version 3 or later.  See
-//   the COPYRIGHT file.
-
-@font-face
-  :font-family 'BrandonGrotesqueLightRegular'
-  :src url('brandongrotesque_light/Brandon_light-webfont.eot')
-  :src local('☺'), url('brandongrotesque_light/Brandon_light-webfont.woff') format('woff'), url('brandongrotesque_light/Brandon_light-webfont.ttf') format('truetype'), url('brandongrotesque_light/Brandon_light-webfont.svg#webfont') format('svg')
-  font
-    :weight normal
-    :style normal
-
-#flash_notice,
-#flash_error,
-#flash_alert
-  :z-index 100
-  :top 32px
-  :position absolute
-  :color #000
-  :width 400px
-  :margin 0 0 0 -200px
-  :left 50%
-  :text
-    :align center
-  :font
-    :size 14px
-  :padding 3px 0
-
-#flash_notice
-  :background-color #CFC
-  :border solid 1px #6C6
-
-#flash_error,
-#flash_alert
-  :background-color #FCC
-  :border solid 1px #C66
-
-.fieldWithErrors
-  :display inline
-
-.error_messages
-  :width 400px
-  :border 2px solid #CF0000
-  :padding 0
-  :padding-bottom 12px
-  :margin-bottom 20px
-  :background-color #f0f0f0
-  :font
-    :size 12px
-  h2
-    :text-align left
-    :padding 5px 5px 5px 15px
-    :margin 0
-    :font
-      :weight bold
-      :size 12px
-    :background-color #c00
-  p
-    :margin 8px 10px
-  ul
-    :margin 0
-
-/* via blueprint */
-html
-  :font
-    :size 100.01%
-
-/* via blueprint */
-body
-  :font
-    :size 75%
-    :family "Helvetica Neue", Arial, Helvetica, sans-serif
-  :color #222
-  :background #fff
-
-  :margin
-    :left 100px
-
-/* via blueprint */
-input[type=text],
-input[type=password],
-textarea, select
-  :background
-    :color #fff
-  :border 1px solid #bbb
-
-/* via blueprint */
-input[type=text]:focus,
-input[type=password]:focus,
-input.text:focus,
-input.title:focus,
-textarea:focus, select:focus
-  :border
-    :color #666
-
-#huge_text
-  :font
-    :size 40px
-    :family 'BrandonGrotesqueLightRegular'
-  :line-height 120px
-  :color #333
-  :text-shadow 0 1px 1px #999
-
-input
-  :font
-    :size 14px
-
-form p
-  :position relative
-  :padding 0
-
-label
-  :color #999
-  :position absolute
-  :padding
-    :top 7px
-  :left 8px
-  :font
-    :size 14px
-    :weight normal
-
-input[type='text'],
-input[type='password']
-  :font
-    :family "Helvetica Neue", Arial, Helvetica, sans-serif
-  :padding 0.3em
-  :width 395px
-  :border-top 1px solid #999
-
-#user
-  :display inline
-  :width 500px
-  .username
-    :width 200px
-    :display inline
-
-    input
-      :display inline
-      :width 200px
-
-  .user_network
-    :width 200px
-    :display inline
-    :font
-      :size 18px
-
diff --git a/app/assets/stylesheets/sessions.css.scss b/app/assets/stylesheets/sessions.css.scss
new file mode 100644
index 000000000..f693641f0
--- /dev/null
+++ b/app/assets/stylesheets/sessions.css.scss
@@ -0,0 +1,162 @@
+//   Copyright (c) 2010-2011, Diaspora Inc.  This file is
+//   licensed under the Affero General Public License version 3 or later.  See
+//   the COPYRIGHT file.
+
+@font-face {
+  font-family: 'BrandonGrotesqueLightRegular';
+  src: url('brandongrotesque_light/Brandon_light-webfont.eot');
+  src: local('☺'), url('brandongrotesque_light/Brandon_light-webfont.woff') format('woff'), url('brandongrotesque_light/Brandon_light-webfont.ttf') format('truetype'), url('brandongrotesque_light/Brandon_light-webfont.svg#webfont') format('svg');
+  font: {
+    weight: normal;
+    style: normal;
+  }
+}
+
+#flash_notice,
+#flash_error,
+#flash_alert {
+  z-index: 100;
+  top: 32px;
+  position: absolute;
+  color: #000;
+  width: 400px;
+  margin: 0 0 0 -200px;
+  left: 50%;
+  text-align: center;
+  font-size: 14px;
+  padding: 3px 0;
+}
+
+#flash_notice {
+  background-color: #CFC;
+  border: solid 1px #6C6;
+}
+
+#flash_error,
+#flash_alert {
+  background-color: #FCC;
+  border: solid 1px #C66;
+}
+
+.fieldWithErrors {
+  display: inline;
+}
+
+.error_messages {
+  width: 400px;
+  border: 2px solid #CF0000;
+  padding: 0;
+  padding-bottom: 12px;
+  margin-bottom: 20px;
+  background-color: #f0f0f0;
+  font-size: 12px;
+  h2 {
+    text-align: left;
+    padding: 5px 5px 5px 15px;
+    margin: 0;
+    font: {
+      weight: bold;
+      size: 12px;
+    }
+    background-color: #c00;
+  }
+  p {
+    margin: 8px 10px;
+  }
+  ul {
+    margin: 0;
+  }
+}
+
+/* via blueprint */
+html {
+  font-size: 100.01%;
+}
+
+/* via blueprint */
+body {
+  font: {
+    size: 75%;
+    family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+  }
+  color: #222;
+  background: #fff;
+
+  margin-left: 100px;
+}
+
+/* via blueprint */
+input[type=text],
+input[type=password],
+textarea, select {
+  background-color: #fff;
+  border: 1px solid #bbb;
+}
+
+/* via blueprint */
+input[type=text]:focus,
+input[type=password]:focus,
+input.text:focus,
+input.title:focus,
+textarea:focus, select:focus {
+  border-color: #666;
+}
+
+#huge_text {
+  font: {
+    size: 40px;
+    family: 'BrandonGrotesqueLightRegular';
+  }
+  line-height: 120px;
+  color: #333;
+  text-shadow: 0 1px 1px #999;
+}
+
+input {
+  font-size: 14px;
+}
+
+form p {
+  position: relative;
+  padding: 0;
+}
+
+label {
+  color: #999;
+  position: absolute;
+  padding-top: 7px;
+  left: 8px;
+  font: {
+    size: 14px;
+    weight: normal;
+  }
+}
+
+input[type='text'],
+input[type='password'] {
+  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+  padding: 0.3em;
+  width: 395px;
+  border-top: 1px solid #999;
+}
+
+#user {
+  display: inline;
+  width: 500px;
+  .username {
+    width: 200px;
+    display: inline;
+
+    input {
+      display: inline;
+      width: 200px;
+    }
+  }
+
+  .user_network {
+    width: 200px;
+    display: inline;
+    font-size: 18px;
+  }
+}
+
diff --git a/app/assets/stylesheets/tags.css.sass b/app/assets/stylesheets/tags.css.sass
deleted file mode 100644
index f20719410..000000000
--- a/app/assets/stylesheets/tags.css.sass
+++ /dev/null
@@ -1,15 +0,0 @@
-//   Copyright (c) 2010-2011, Diaspora Inc.  This file is
-//   licensed under the Affero General Public License version 3 or later.  See
-//   the COPYRIGHT file.
-
-.tags_show
-  .side_stream
-    .stream_element
-      .add_contact
-        :display inline
-        :float right
-        :font-size 10px
-        .button
-          :padding 5px 1px 4px 1px
-          :margin-right 3px
-          :font-size 10px
diff --git a/app/assets/stylesheets/tags.css.scss b/app/assets/stylesheets/tags.css.scss
new file mode 100644
index 000000000..189531472
--- /dev/null
+++ b/app/assets/stylesheets/tags.css.scss
@@ -0,0 +1,20 @@
+//   Copyright (c) 2010-2011, Diaspora Inc.  This file is
+//   licensed under the Affero General Public License version 3 or later.  See
+//   the COPYRIGHT file.
+
+.tags_show {
+  .side_stream {
+    .stream_element {
+      .add_contact {
+        display: inline;
+        float: right;
+        font-size: 10px;
+        .button {
+          padding: 5px 1px 4px 1px;
+          margin-right: 3px;
+          font-size: 10px;
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/ui.css.sass b/app/assets/stylesheets/ui.css.sass
deleted file mode 100644
index feb3506f1..000000000
--- a/app/assets/stylesheets/ui.css.sass
+++ /dev/null
@@ -1,211 +0,0 @@
-//   Copyright (c) 2010-2011, Diaspora Inc.  This file is
-//   licensed under the Affero General Public License version 3 or later.  See
-//   the COPYRIGHT file.
-
-@import '_mixins.css.scss'
-
-$button-border-color: #aaa 
-
-.ui-autocomplete
-  :left -11px
-
-.button
-  @include border-radius(3px)
-  @include button-gradient($light-grey)
-  @include box-shadow(0,1px,1px,#cfcfcf)
-  @include transition(border)
-
-  :display inline
-
-  :font
-    :style normal
-    :size 12px
-  :color #505050
-
-  :padding 4px 9px
-
-  :min-width 90px
-  :min-height 10px
-
-  :border 1px solid $button-border-color
-
-  :cursor pointer
-  :white-space nowrap
-
-  &:hover
-    @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)
-
-  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%)
-
-  &.in_aspects
-    @include button-gradient($green)
-    &:hover
-      @include button-gradient-hover($green)
-
-  &.creation
-    @include button-gradient($creation-blue)
-    :color #fff
-
-    :border 1px solid darken($button-border-color,20%)
-
-    &:hover
-      @include button-gradient-hover($creation-blue)
-      :border 1px solid darken($button-border-color,35%)
-
-  &.red_on_hover
-    &:hover
-      @include button-gradient(#F74427)
-      :color #222
-
-.right
-  :position absolute
-  :right 0
-
-.dropdown
-  :position relative
-  :display inline-block
-
-  .button
-    :width 240px
-
-  .wrapper
-    @include box-shadow(0, 2px, 5px, #666)
-    //@include opacity(0)
-    @include transition(opacity)
-
-    :display none
-    :z-index 20
-    :position absolute
-    :width 140px
-    :padding 4px 0
-    :margin-top 2px
-    :background
-      :color #fff
-    :border 1px solid #999
-
-    ul
-      @include user-select(none)
-      :font
-        :size normal
-
-      :padding 0 !important
-      :margin 0 !important
-      :color #000
-
-      > li
-        :font-size 11px !important
-        :padding 6px 2px 
-          :left 24px
-        :position relative
-        :color #222
-        :list-style none !important
-
-        &.selected
-          :background
-            :image image-url('icons/check_yes_ok.png')
-            :position 3px 1px
-            :repeat no-repeat
-
-        &.selected:hover
-          :background
-            :image image-url('icons/check_yes_ok_white.png')
-            /* bump top position up 1px to compensate for the 1px added top border */
-            :position 3px 0px
-
-        &.loading
-          :background
-            :image image-url('ajax-loader.gif')
-            :repeat no-repeat
-            :position 4px 2px
-
-        &.loading:hover
-          :background
-            :image image-url('ajax-loader_inverted.gif')
-            /* bump top position up 1px to compensate for the 1px added top border */
-            :position 4px 1px
-
-        &.newItem
-          a
-            :color #999
-            :font-style italic
-
-            &:hover
-              :text-decoration none
-
-  &.hang_right
-    .wrapper
-      @include border-radius(3px, 0, 3px, 3px)
-      :right 3px
-
-  &.hang_left
-    .wrapper
-      @include border-radius(0, 3px, 3px, 3px)
-      :left 0px
-
-  .selected
-    :font-weight bold
-
-  &.active
-    .wrapper
-      //@include opacity(1)
-      :display block
-
-    .button
-      @include border-radius(3px, 3px, 0, 0)
-      :border 1px solid #444
-
-    .button
-      :background #666
-
-    .button,
-    .wrapper ul > li:hover
-      :background
-        :color #666
-      :color #fff
-      :text-shadow none
-
-
-    .wrapper ul > li:hover
-      :border
-        :top 1px solid #444
-        :bottom 1px solid #444
-      :padding
-        :top 5px
-        :bottom 5px
-
-      &.divider
-        :padding
-          :bottom 3px
-
-      a
-        :color #ccc
-
-    .wrapper ul > li,
-    .wrapper ul > li *
-      :cursor pointer
-
diff --git a/app/assets/stylesheets/ui.css.scss b/app/assets/stylesheets/ui.css.scss
new file mode 100644
index 000000000..ee170b8b8
--- /dev/null
+++ b/app/assets/stylesheets/ui.css.scss
@@ -0,0 +1,255 @@
+//   Copyright (c) 2010-2011, Diaspora Inc.  This file is
+//   licensed under the Affero General Public License version 3 or later.  See
+//   the COPYRIGHT file.
+
+@import "_mixins.css.scss";
+
+$button-border-color: #aaa;
+
+.ui-autocomplete {
+  left: -11px
+}
+
+.button {
+  @include border-radius(3px);
+  @include button-gradient($light-grey);
+  @include box-shadow(0,1px,1px,#cfcfcf);
+  @include transition(border);
+
+  display: inline;
+
+  font: {
+    style: normal;
+    size: 12px;
+  }
+  color: #505050;
+
+  padding: 4px 9px;
+
+  min-width: 90px;
+  min-height: 10px;
+
+  border: 1px solid $button-border-color;
+
+  cursor: pointer;
+  white-space: nowrap;
+
+  &:hover {
+    @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);
+  }
+
+  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%);
+  }
+
+  &.in_aspects {
+    @include button-gradient($green);
+    &:hover {
+      @include button-gradient-hover($green);
+    }
+  }
+
+  &.creation {
+    @include button-gradient($creation-blue);
+    color: #fff;
+
+    border: 1px solid darken($button-border-color,20%);
+
+    &:hover {
+      @include button-gradient-hover($creation-blue);
+      border: 1px solid darken($button-border-color,35%);
+    }
+  }
+
+  &.red_on_hover {
+    &:hover {
+      @include button-gradient(#F74427);
+      color: #222;
+    }
+  }
+}
+
+.right {
+  position: absolute;
+  right: 0;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+
+  .button {
+    width: 240px;
+  }
+
+  .wrapper {
+    @include box-shadow(0, 2px, 5px, #666);
+    //@include opacity(0)
+    @include transition(opacity);
+
+    display: none;
+    z-index: 20;
+    position: absolute;
+    width: 140px;
+    padding: 4px 0;
+    margin-top: 2px;
+    background-color: #fff;
+    border: 1px solid #999;
+
+    ul {
+      @include user-select(none);
+      font-size: normal;
+
+      padding: 0 !important;
+      margin: 0 !important;
+      color: #000;
+
+      > li {
+        font-size: 11px !important;
+        padding: 6px 2px {
+          left: 24px; }
+        position: relative;
+        color: #222;
+        list-style: none !important;
+
+        &.selected {
+          background: {
+            image: image-url('icons/check_yes_ok.png');
+            position: 3px 1px;
+            repeat: no-repeat;
+          }
+        }
+
+        &.selected:hover {
+          background: {
+            image: image-url('icons/check_yes_ok_white.png');
+            /* bump top position up 1px to compensate for the 1px added top border */
+            position: 3px 0px;
+          }
+        }
+
+        &.loading {
+          background: {
+            image: image-url('ajax-loader.gif');
+            repeat: no-repeat;
+            position: 4px 2px;
+          }
+        }
+
+        &.loading:hover {
+          background: {
+            image: image-url('ajax-loader_inverted.gif');
+            /* bump top position up 1px to compensate for the 1px added top border */
+            position: 4px 1px;
+          }
+        }
+
+        &.newItem {
+          a {
+            color: #999;
+            font-style: italic;
+
+            &:hover {
+              text-decoration: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.hang_right {
+    .wrapper {
+      @include border-radius(3px, 0, 3px, 3px);
+      right: 3px;
+    }
+  }
+
+  &.hang_left {
+    .wrapper {
+      @include border-radius(0, 3px, 3px, 3px);
+      left: 0px;
+    }
+  }
+
+  .selected {
+    font-weight: bold;
+  }
+
+  &.active {
+    .wrapper {
+      //@include opacity(1)
+      display: block;
+    }
+
+    .button {
+      @include border-radius(3px, 3px, 0, 0);
+      border: 1px solid #444;
+    }
+
+    .button {
+      background: #666;
+    }
+
+    .button,
+    .wrapper ul > li:hover {
+      background-color: #666;
+      color: #fff;
+      text-shadow: none;
+    }
+
+    .wrapper ul > li:hover {
+      border: {
+        top: 1px solid #444;
+        bottom: 1px solid #444;
+      }
+      padding: {
+        top: 5px;
+        bottom: 5px;
+      }
+
+      &.divider {
+        padding-bottom: 3px;
+      }
+
+      a {
+        color: #ccc;
+      }
+    }
+
+    .wrapper ul > li,
+    .wrapper ul > li * {
+      cursor: pointer;
+    }
+  }
+}
+