Permalink
Browse files

Now I love Sass

  • Loading branch information...
1 parent 6eb94d2 commit ded77d7534b4518b84389ef995c329e5ab54e345 @nov committed May 15, 2011
View
71 app/assets/stylesheets/application.css
@@ -2,73 +2,4 @@
* FIXME: Introduce SCSS & Sprockets
*= require_self
*= require_tree .
-*/
-
-dl dt {
- font-weight: bold;
-}
-dl dd {
- margin-left: 1em;
-}
-
-div.jGrowl div.warn div.jGrowl-message {
- color: orange;
-}
-div.jGrowl div.error div.jGrowl-message {
- color: red;
-}
-
-body > header {
- position: relative;
-}
-body > header h1 {
- font-weight: normal;
-}
-body > header p {
- color: #616161;
-}
-body > header a {
- color: #333;
- text-decoration: none;
-}
-body > header a:hover {
- color: #666;
-}
-body > header .money {
- opacity: 0.6;
-}
-body > header figure {
- width: 100%;
- height: 150px;
- margin: 25px 0;
- overflow: hidden;
- border-radius: 6px;
-}
-@media only screen and (max-width: 767px) {
- body > header figure {
- height: 60px;
- }
-}
-
-body > footer {
- color: #666;
- font-size: 13px;
- text-align: right;
- margin-top: 20px;
- padding-top: 10px;
- border-top: 1px solid #ccc;
-}
-body > footer a {
- color: #666;
- text-decoration: none;
-}
-body > footer a:hover {
- color: #333;
-}
-body > footer ul {
- list-style: none;
-}
-body > footer li {
- display: inline-block;
- padding-left: 15px;
-}
+*/
View
10 app/assets/stylesheets/box.css.scss
@@ -1,10 +0,0 @@
-.boxes {
- display: -webkit-box;
- display: -moz-box;
-}
-
-@media only screen and (max-width: 767px) {
- .boxes {
- display: block;
- }
-}
View
25 app/assets/stylesheets/payments.css.scss
@@ -1,23 +1,20 @@
-/*
- Place all the styles related to the matching controller here.
- They will automatically be included in application.css.
- You can use Sass (SCSS) here: http://sass-lang.com/
-*/
+@import "common_variables";
.payments {
dl {
+ margin: 1% 0;
padding: 15px;
- border: 1px solid #ddd;
- border-radius: 6px;
+ border: 1px solid $light_gray;
+ border-radius: $default_radius;
}
.unsubscribe {
font-size: 12px;
- }
- .unsubscribe a {
- color: #900;
- text-decoration: none;
- }
- .unsubscribe a:hover {
- color: #d00;
+ a {
+ color: $dark_red;
+ text-decoration: none;
+ }
+ a:hover {
+ color: $red;
+ }
}
}
View
56 app/assets/stylesheets/top.css.scss
@@ -1,47 +1,49 @@
-/*
- Place all the styles related to the matching controller here.
- They will automatically be included in application.css.
- You can use Sass (SCSS) here: http://sass-lang.com/
-*/
+@import "common_variables";
-$article_margin: 1%;
+$article_margin: 2%;
$article_padding: 2%;
.top {
section {
margin: 20px 0;
}
article {
- width: 50% - $article_margin * 2 - $article_padding * 2;
- margin: 10px $article_margin;
+ width: 50% - $article_margin / 2 - $article_padding * 2;
+ margin: 10px 0;
padding: 10px $article_padding;
- border: 1px solid #ddd;
- border-radius: 6px;
- }
- article form {
- text-align: right;
- }
- article input[type=submit] {
- opacity: 0.6;
- text-indent: -9999px;
- width: 150px;
- height: 33px;
- border: none;
- background: url(https://www.paypal.com/en_US/i/btn/btn_dg_pay_w_paypal.gif);
- }
- article input[type=submit]:hover {
- opacity: 1;
+ border: 1px solid $light_gray;
+ border-radius: $default_radius;
+ form {
+ text-align: right;
+ }
+ input[type=submit] {
+ opacity: 0.6;
+ text-indent: -9999px;
+ width: 150px;
+ height: 33px;
+ border: none;
+ background: url(https://www.paypal.com/en_US/i/btn/btn_dg_pay_w_paypal.gif);
+ }
+ input[type=submit]:hover {
+ opacity: 1;
+ }
+ input[type=submit]:active {
+ opacity: 0.8;
+ }
}
- article input[type=submit]:active {
- opacity: 0.8;
+ .boxes article:first-child {
+ margin-right: $article_margin;
}
@media only screen and (max-width: 767px) {
$article_padding: $article_padding * 2;
article {
- width: 100% - $article_margin * 2 - $article_padding * 2;
+ width: 100% - $article_padding * 2;
padding: 10px $article_padding;
}
+ .boxes article:first-child {
+ margin-right: 0;
+ }
.popup {
display: none;
}

0 comments on commit ded77d7

Please sign in to comment.