Skip to content

Commit

Permalink
Convert to SASS and tweak the Rake build process to work.
Browse files Browse the repository at this point in the history
  • Loading branch information
@sj26
sj26 committed Jun 10, 2011
1 parent b59cffd commit 49d42da
Show file tree
Hide file tree
Showing 4 changed files with 203 additions and 271 deletions.
7 changes: 3 additions & 4 deletions Rakefile
View file
Expand Up @@ -18,10 +18,9 @@ end


desc "Compile SASS/SCSS files into SCSS" desc "Compile SASS/SCSS files into SCSS"
task "build:sass" do task "build:sass" do
require 'sass' Dir["public/stylesheets/**/*.sass"].each do |file|
Dir["public/stylesheets/**/*.scss"].each do |file| css_file = file.sub /\.sass$/, ".css"
css_file = file.sub /\.scss$/, ".css" system "sass", "--no-cache", "--compass", file, css_file
Sass.compile_file file, css_file, :cache => false
end end
end end


Expand Down
82 changes: 41 additions & 41 deletions public/stylesheets/application.css
View file
Expand Up @@ -57,8 +57,8 @@ body {
-moz-box-orient: vertical; -moz-box-orient: vertical;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
box-orient: vertical; box-orient: vertical;
background: #eee; background: #eeeeee;
color: #000; color: black;
font-size: 12px; font-size: 12px;
font-family: Helvetica, sans-serif; } font-family: Helvetica, sans-serif; }
body body { body body {
Expand All @@ -70,7 +70,7 @@ body {
body > header { body > header {
overflow: hidden; overflow: hidden;
*zoom: 1; *zoom: 1;
border-bottom: 1px solid #ccc; } border-bottom: 1px solid #cccccc; }
body > header h1 { body > header h1 {
float: left; float: left;
padding: 6px; padding: 6px;
Expand All @@ -89,10 +89,10 @@ body > header {
-o-transition-duration: 1s; -o-transition-duration: 1s;
transition-duration: 1s; } transition-duration: 1s; }
body > header h1 a:hover { body > header h1 a:hover {
color: #4183C4; } color: #4183c4; }
body > header nav { body > header nav {
border-left: 1px solid #ccc; border-left: 1px solid #cccccc;
border-right: 1px solid #fff; } border-right: 1px solid white; }
body > header nav.project { body > header nav.project {
float: left; } float: left; }
body > header nav.app { body > header nav.app {
Expand All @@ -103,15 +103,15 @@ body > header {
display: inline-block; display: inline-block;
float: left; float: left;
padding: 9px; padding: 9px;
border-left: 1px solid #fff; border-left: 1px solid white;
border-right: 1px solid #ccc; border-right: 1px solid #cccccc;
background: #eee; background: #eeeeee;
color: #666; color: #666666;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
text-shadow: 0 1px 0 white; } text-shadow: 0 1px 0 white; }
body > header nav li a:hover { body > header nav li a:hover {
background: #fff; } background: white; }
body > header nav li a:active { body > header nav li a:active {
margin: 1px -1px -1px 1px; margin: 1px -1px -1px 1px;
-moz-box-shadow: none; -moz-box-shadow: none;
Expand All @@ -123,26 +123,26 @@ body > header {
width: 100%; width: 100%;
height: 10em; height: 10em;
overflow: auto; overflow: auto;
background: #fff; background: white;
border-top: 1px solid #fff; border-top: 1px solid white;
border-bottom: 1px solid #ccc; } border-bottom: 1px solid #cccccc; }
#messages table { #messages table {
width: 100%; } width: 100%; }
#messages table thead tr { #messages table thead tr {
background: #eee; background: #eeeeee;
color: #333; } color: #333333; }
#messages table thead tr th { #messages table thead tr th {
padding: .25em; padding: 0.25em;
font-weight: bold; font-weight: bold;
color: #666; color: #666666;
text-shadow: 0 1px 0 white; } text-shadow: 0 1px 0 white; }
#messages table tbody tr:nth-child(even) { #messages table tbody tr:nth-child(even) {
background: #f0f0f0; } background: #f0f0f0; }
#messages table tbody tr.selected { #messages table tbody tr.selected {
background: Highlight; background: Highlight;
color: HighlightText; } color: HighlightText; }
#messages table tbody tr td { #messages table tbody tr td {
padding: .25em; } padding: 0.25em; }


#message { #message {
display: -moz-box; display: -moz-box;
Expand All @@ -154,24 +154,24 @@ body > header {
-moz-box-flex: 1; -moz-box-flex: 1;
-webkit-box-flex: 1; -webkit-box-flex: 1;
box-flex: 1; box-flex: 1;
border-top: 1px solid #fff; } border-top: 1px solid white; }
#message > header { #message > header {
overflow: hidden; overflow: hidden;
*zoom: 1; } *zoom: 1; }
#message > header .metadata { #message > header .metadata {
overflow: hidden; overflow: hidden;
*zoom: 1; *zoom: 1;
padding: .5em; } padding: 0.5em; }
#message > header .metadata dt, #message > header .metadata dd { #message > header .metadata dt, #message > header .metadata dd {
padding: .25em; } padding: 0.25em; }
#message > header .metadata dt { #message > header .metadata dt {
float: left; float: left;
clear: left; clear: left;
width: 8em; width: 8em;
margin-right: .5em; margin-right: 0.5em;
text-align: right; text-align: right;
font-weight: bold; font-weight: bold;
color: #666; color: #666666;
text-shadow: 0 1px 0 white; } text-shadow: 0 1px 0 white; }
#message > header .metadata dd.subject { #message > header .metadata dd.subject {
font-weight: bold; } font-weight: bold; }
Expand All @@ -185,26 +185,26 @@ body > header {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
*vertical-align: auto; *vertical-align: auto;
margin-right: .5em; } margin-right: 0.5em; }
#message > header .metadata .attachments ul li { #message > header .metadata .attachments ul li {
*display: inline; } *display: inline; }
#message > header .views ul { #message > header .views ul {
padding: 0 .5em; padding: 0 0.5em;
border-bottom: 1px solid #999; } border-bottom: 1px solid #999999; }
#message > header .views .tab { #message > header .views .tab {
display: inline-block; display: inline-block;
padding: .5em; padding: 0.5em;
border: 1px solid #999; border: 1px solid #999999;
background: #ddd; background: #dddddd;
color: #333; color: #333333;
border-width: 1px 1px 0 1px; border-width: 1px 1px 0 1px;
cursor: pointer; cursor: pointer;
text-shadow: 0 1px 0 #eeeeee; } text-shadow: 0 1px 0 #eeeeee; }
#message > header .views .tab:not(.selected):hover { #message > header .views .tab:not(.selected):hover {
background-color: #ddd; } background-color: #dddddd; }
#message > header .views .tab.selected { #message > header .views .tab.selected {
background: #fff; background: white;
color: #000; color: black;
height: 13px; height: 13px;
-moz-box-shadow: 1px 1px 0 #cccccc; -moz-box-shadow: 1px 1px 0 #cccccc;
-webkit-box-shadow: 1px 1px 0 #cccccc; -webkit-box-shadow: 1px 1px 0 #cccccc;
Expand All @@ -214,21 +214,21 @@ body > header {
#message > header .views .button { #message > header .views .button {
display: inline-block; display: inline-block;
float: right; float: right;
margin: 0 .25em; } margin: 0 0.25em; }
#message > header .views .button a { #message > header .views .button a {
display: inline-block; display: inline-block;
padding: .25em .5em; padding: 0.25em 0.5em;
border: 1px solid #999; border: 1px solid #999999;
background: #ddd; background: #dddddd;
color: #333; color: #333333;
text-decoration: none; text-decoration: none;
text-shadow: 1px 1px 0 #eeeeee; text-shadow: 1px 1px 0 #eeeeee;
-moz-box-shadow: 1px 1px 0 #cccccc; -moz-box-shadow: 1px 1px 0 #cccccc;
-webkit-box-shadow: 1px 1px 0 #cccccc; -webkit-box-shadow: 1px 1px 0 #cccccc;
-o-box-shadow: 1px 1px 0 #cccccc; -o-box-shadow: 1px 1px 0 #cccccc;
box-shadow: 1px 1px 0 #cccccc; } box-shadow: 1px 1px 0 #cccccc; }
#message > header .views .button a:hover { #message > header .views .button a:hover {
background: #fff; background: white;
text-shadow: none; } text-shadow: none; }
#message > header .views .button a:active { #message > header .views .button a:active {
margin: 1px -1px -1px 1px; margin: 1px -1px -1px 1px;
Expand All @@ -244,4 +244,4 @@ body > header {
-webkit-box-flex: 1; -webkit-box-flex: 1;
box-flex: 1; box-flex: 1;
width: 100%; width: 100%;
background: #fff; } background: white; }
159 changes: 159 additions & 0 deletions public/stylesheets/application.sass
View file
@@ -0,0 +1,159 @@
@import compass
@import compass/reset

html, body
width: 100%
height: 100%

body
+establish-baseline(12px)
+display-box
+box-orient(vertical)
background: #eee
color: #000
font-size: 12px
font-family: Helvetica, sans-serif

body > header
+clearfix
border-bottom: 1px solid #ccc
h1
float: left
padding: 6px
font-size: 18px
font-weight: bold
a
color: black
text-decoration: none
+text-shadow(0 1px 0 white)
+transition(0.1s ease)
&:hover
color: #4183C4
nav
&.project
float: left
&.app
float: right
border-left: 1px solid #ccc
border-right: 1px solid #fff
li
display: inline
// @include inline-block;
a
display: inline-block
float: left
padding: 9px
border-left: 1px solid #fff
border-right: 1px solid #ccc
background: #eee
color: #666
font-weight: bold
text-decoration: none
+text-shadow(0 1px 0 white)
&:hover
background: #fff
&:active
margin: 1px -1px -1px 1px
+box-shadow(none)

#messages
width: 100%
height: 10em
overflow: auto
background: #fff
border-top: 1px solid #fff
border-bottom: 1px solid #ccc
table
width: 100%
thead tr
background: #eee
color: #333
th
padding: .25em
font-weight: bold
color: #666
+text-shadow(0 1px 0 white)
tbody tr
&:nth-child(even)
background: #f0f0f0
&.selected
background: Highlight
color: HighlightText
td
padding: .25em

#message
+display-box
+box-orient(vertical)
+box-flex(1)
border-top: 1px solid #fff
> header
+clearfix
.metadata
+clearfix
padding: .5em
dt, dd
padding: .25em
dt
float: left
clear: left
width: 8em
margin-right: .5em
text-align: right
font-weight: bold
color: #666
+text-shadow(0 1px 0 white)
dd.subject
font-weight: bold
.attachments
display: none
ul
display: inline
li
+inline-block
margin-right: .5em
.views
ul
padding: 0 .5em
border-bottom: 1px solid #999
.tab
display: inline-block
padding: .5em
border: 1px solid #999
background: #ddd
color: #333
border-width: 1px 1px 0 1px
cursor: pointer
+text-shadow(0 1px 0 #eeeeee)
.tab:not(.selected):hover
background-color: #ddd
.tab.selected
background: #fff
color: #000
height: 13px
+box-shadow(1px 1px 0 #cccccc)
margin-bottom: -2px
.button
display: inline-block
float: right
margin: 0 .25em
a
display: inline-block
padding: .25em .5em
border: 1px solid #999
background: #ddd
color: #333
text-decoration: none
+text-shadow(1px 1px 0 #eeeeee)
+box-shadow(1px 1px 0 #cccccc)
&:hover
background: #fff
+text-shadow(none)
&:active
margin: 1px -1px -1px 1px
+box-shadow(none)
.body
+display-box
+box-flex(1)
width: 100%
background: #fff

0 comments on commit 49d42da

Please sign in to comment.