mirror of
https://github.com/moparisthebest/mailcatcher
synced 2024-08-13 17:03:45 -04:00
Convert to SASS and tweak the Rake build process to work.
This commit is contained in:
Samuel Cochran
parent
b59cffd784
commit
49d42da4e5
7
Rakefile
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
|
||||
|
||||
|
||||
@ -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; }
|
||||
|
||||
159
public/stylesheets/application.sass
Normal file
159
public/stylesheets/application.sass
Normal 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
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user