Skip to content
Browse files

Convert to SASS and tweak the Rake build process to work.

  • Loading branch information...
1 parent b59cffd commit 49d42da4e51e75100a1d76f5fa7503d0b55cde9f @sj26 sj26 committed
Showing with 203 additions and 271 deletions.
  1. +3 −4 Rakefile
  2. +41 −41 public/stylesheets/application.css
  3. +159 −0 public/stylesheets/application.sass
  4. +0 −226 public/stylesheets/application.scss
View
7 Rakefile
@@ -18,10 +18,9 @@ end
desc "Compile SASS/SCSS files into SCSS"
task "build:sass" do
- require 'sass'
- Dir["public/stylesheets/**/*.scss"].each do |file|
- css_file = file.sub /\.scss$/, ".css"
- Sass.compile_file file, css_file, :cache => false
+ Dir["public/stylesheets/**/*.sass"].each do |file|
+ css_file = file.sub /\.sass$/, ".css"
+ system "sass", "--no-cache", "--compass", file, css_file
end
end
View
82 public/stylesheets/application.css
@@ -57,8 +57,8 @@ body {
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;
- background: #eee;
- color: #000;
+ background: #eeeeee;
+ color: black;
font-size: 12px;
font-family: Helvetica, sans-serif; }
body body {
@@ -70,7 +70,7 @@ body {
body > header {
overflow: hidden;
*zoom: 1;
- border-bottom: 1px solid #ccc; }
+ border-bottom: 1px solid #cccccc; }
body > header h1 {
float: left;
padding: 6px;
@@ -89,10 +89,10 @@ body > header {
-o-transition-duration: 1s;
transition-duration: 1s; }
body > header h1 a:hover {
- color: #4183C4; }
+ color: #4183c4; }
body > header nav {
- border-left: 1px solid #ccc;
- border-right: 1px solid #fff; }
+ border-left: 1px solid #cccccc;
+ border-right: 1px solid white; }
body > header nav.project {
float: left; }
body > header nav.app {
@@ -103,15 +103,15 @@ body > header {
display: inline-block;
float: left;
padding: 9px;
- border-left: 1px solid #fff;
- border-right: 1px solid #ccc;
- background: #eee;
- color: #666;
+ border-left: 1px solid white;
+ border-right: 1px solid #cccccc;
+ background: #eeeeee;
+ color: #666666;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px 0 white; }
body > header nav li a:hover {
- background: #fff; }
+ background: white; }
body > header nav li a:active {
margin: 1px -1px -1px 1px;
-moz-box-shadow: none;
@@ -123,18 +123,18 @@ body > header {
width: 100%;
height: 10em;
overflow: auto;
- background: #fff;
- border-top: 1px solid #fff;
- border-bottom: 1px solid #ccc; }
+ background: white;
+ border-top: 1px solid white;
+ border-bottom: 1px solid #cccccc; }
#messages table {
width: 100%; }
#messages table thead tr {
- background: #eee;
- color: #333; }
+ background: #eeeeee;
+ color: #333333; }
#messages table thead tr th {
- padding: .25em;
+ padding: 0.25em;
font-weight: bold;
- color: #666;
+ color: #666666;
text-shadow: 0 1px 0 white; }
#messages table tbody tr:nth-child(even) {
background: #f0f0f0; }
@@ -142,7 +142,7 @@ body > header {
background: Highlight;
color: HighlightText; }
#messages table tbody tr td {
- padding: .25em; }
+ padding: 0.25em; }
#message {
display: -moz-box;
@@ -154,24 +154,24 @@ body > header {
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
- border-top: 1px solid #fff; }
+ border-top: 1px solid white; }
#message > header {
overflow: hidden;
*zoom: 1; }
#message > header .metadata {
overflow: hidden;
*zoom: 1;
- padding: .5em; }
+ padding: 0.5em; }
#message > header .metadata dt, #message > header .metadata dd {
- padding: .25em; }
+ padding: 0.25em; }
#message > header .metadata dt {
float: left;
clear: left;
width: 8em;
- margin-right: .5em;
+ margin-right: 0.5em;
text-align: right;
font-weight: bold;
- color: #666;
+ color: #666666;
text-shadow: 0 1px 0 white; }
#message > header .metadata dd.subject {
font-weight: bold; }
@@ -185,26 +185,26 @@ body > header {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
- margin-right: .5em; }
+ margin-right: 0.5em; }
#message > header .metadata .attachments ul li {
*display: inline; }
#message > header .views ul {
- padding: 0 .5em;
- border-bottom: 1px solid #999; }
+ padding: 0 0.5em;
+ border-bottom: 1px solid #999999; }
#message > header .views .tab {
display: inline-block;
- padding: .5em;
- border: 1px solid #999;
- background: #ddd;
- color: #333;
+ padding: 0.5em;
+ border: 1px solid #999999;
+ background: #dddddd;
+ color: #333333;
border-width: 1px 1px 0 1px;
cursor: pointer;
text-shadow: 0 1px 0 #eeeeee; }
#message > header .views .tab:not(.selected):hover {
- background-color: #ddd; }
+ background-color: #dddddd; }
#message > header .views .tab.selected {
- background: #fff;
- color: #000;
+ background: white;
+ color: black;
height: 13px;
-moz-box-shadow: 1px 1px 0 #cccccc;
-webkit-box-shadow: 1px 1px 0 #cccccc;
@@ -214,13 +214,13 @@ body > header {
#message > header .views .button {
display: inline-block;
float: right;
- margin: 0 .25em; }
+ margin: 0 0.25em; }
#message > header .views .button a {
display: inline-block;
- padding: .25em .5em;
- border: 1px solid #999;
- background: #ddd;
- color: #333;
+ padding: 0.25em 0.5em;
+ border: 1px solid #999999;
+ background: #dddddd;
+ color: #333333;
text-decoration: none;
text-shadow: 1px 1px 0 #eeeeee;
-moz-box-shadow: 1px 1px 0 #cccccc;
@@ -228,7 +228,7 @@ body > header {
-o-box-shadow: 1px 1px 0 #cccccc;
box-shadow: 1px 1px 0 #cccccc; }
#message > header .views .button a:hover {
- background: #fff;
+ background: white;
text-shadow: none; }
#message > header .views .button a:active {
margin: 1px -1px -1px 1px;
@@ -244,4 +244,4 @@ body > header {
-webkit-box-flex: 1;
box-flex: 1;
width: 100%;
- background: #fff; }
+ background: white; }
View
159 public/stylesheets/application.sass
@@ -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
View
226 public/stylesheets/application.scss
@@ -1,226 +0,0 @@
-@import "compass";
-@import "compass/reset";
-
-html, body {
- width: 100%;
- height: 100%;
-}
-
-body {
- @include establish-baseline(12px);
- @include display-box;
- @include box-orient(vertical);
-
- background: #eee;
- color: #000;
- font-size: 12px;
- font-family: Helvetica, sans-serif;
-}
-
-body > header {
- @include clearfix;
-
- border-bottom: 1px solid #ccc;
-
- h1 {
- float: left;
- padding: 6px;
- font-size: 18px;
- font-weight: bold;
-
- a {
- color: black;
- text-decoration: none;
- @include text-shadow(0 1px 0 #fff);
- @include 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;
- @include text-shadow(0 1px 0 #fff);
-
- &:hover {
- background: #fff;
- }
- &:active {
- margin: 1px -1px -1px 1px;
- @include 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;
-
- @include text-shadow(0 1px 0 #fff);
- }
- }
-
- tbody tr {
- &:nth-child(even) {
- background: #f0f0f0;
- }
-
- &.selected {
- background: Highlight;
- color: HighlightText;
- }
-
- td {
- padding: .25em;
- }
- }
- }
-}
-
-#message {
- @include display-box;
- @include box-orient(vertical);
- @include box-flex(1);
-
- border-top: 1px solid #fff;
-
- > header {
- @include clearfix;
-
- .metadata {
- @include 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;
- @include text-shadow(0 1px 0 #fff);
- }
-
- dd.subject {
- font-weight: bold;
- }
-
- .attachments {
- display: none;
-
- ul {
- display: inline;
-
- li {
- @include 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;
- @include text-shadow(0 1px 0 #eee);
- }
- .tab:not(.selected):hover {
- background-color: #ddd;
- }
- .tab.selected {
- background: #fff;
- color: #000;
- height: 13px;
- @include box-shadow(1px 1px 0 #ccc);
- 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;
- @include text-shadow(1px 1px 0 #eee);
- @include box-shadow(1px 1px 0 #ccc);
-
- &:hover {
- background: #fff;
- @include text-shadow(none);
- }
- &:active {
- margin: 1px -1px -1px 1px;
- @include box-shadow(none);
- }
- }
- }
- }
- }
-
- .body {
- @include display-box;
- @include box-flex(1);
- width: 100%;
- background: #fff;
- }
-}

0 comments on commit 49d42da

Please sign in to comment.
Something went wrong with that request. Please try again.