Merge pull request #107 from zoombody/sass

make the CSS a little bit Sassier

.gitignore

@@ -21,3 +21,4 @@ rerun.txt
 tags
 /.bundle
 /public/assets/
+.sass-cache/

app/assets/stylesheets/login.css.scss

@@ -16,12 +16,12 @@ a, a:link, a:active, a:visited {
     text-decoration: none;
     padding-left: 1px;
     padding-right: 1px;
-      }
+}
 
 a:hover {
     color: #fff;
     background-color: #cc3334;
-      }
+}
 
 h1, h2, h3 { color: #333; font-family: verdana, arial, helvetica, sans-serif; text-align: center; }
 h1 { font-size: 28px }
@@ -64,9 +64,9 @@ div.memo {
 
 h4.alert  {
     font-size: 0.8em;
-   font-weight:bold;
+    font-weight: bold;
-   margin:0;
+    margin: 0;
-   padding:5px;
+    padding: 5px;
     text-align: center;
 }
 
@@ -92,7 +92,7 @@ h4.notice {
     color: #007E00;
     margin-bottom: 15px;
     text-align: center;
-  }
+}
 */
 
 #footer {
@@ -103,7 +103,7 @@ h4.notice {
     color: #999;
     margin: 20px auto;
     padding: 0px;
-  }
+}
 
 
 /* Error message styles */
@@ -119,9 +119,8 @@ h4.notice {
     padding-bottom: 12px;
     margin: 10px auto 10px auto;
     background-color: #f0f0f0;
-}
 
-#errorExplanation h2 {
+    h2 {
         text-align: left;
         font-weight: bold;
         padding: 5px 5px 5px 15px;
@@ -129,18 +128,19 @@ h4.notice {
         margin: -7px;
         background-color: #c00;
         color: #fff;
-}
+    }
 
-#errorExplanation p {
+    p {
         color: #333;
         margin-bottom: 0;
         padding: 5px;
-}
+    }
 
-#errorExplanation ul li {
+    ul li {
         font-size: 1em;
         list-style-type: disc;
         list-style-position: outside;
+    }
 }
 
 input.login_text {
@@ -152,11 +152,9 @@ input.open_id {
     background-position: 0 50%;
     color: #000;
     padding-left: 18px;
-   width:182px;
+    width: 182px;
 }
 p.alternate_auth {
-   text-align:center;
+    text-align: center;
-}
+    a { text-decoration:underline; }
-p.alternate_auth a {
-	text-decoration:underline;
 }

app/assets/stylesheets/mobile.css.scss

@@ -26,7 +26,7 @@ a:hover {
 div.footer a {
     text-decoration: underline;
     color: #999999;
-    }
+}
 
 h1 {
     color: #fff;
@@ -44,17 +44,17 @@ h2 {
     padding: .3em 0 .1em .3em;
     border-top: 1px solid #777777;
     font-size:medium;
-}
 
-h2 a, h2 a:link, h2 a:active, h2 a:visited {
+    a, a:link, a:active, a:visited {
         color: #666666;
         text-decoration: none;
-}
+    }
 
-h2 a:hover {
+    a:hover {
         background-color: transparent;
         color: #CC3334;
         text-decoration: none;
+    }
 }
 
 h4.alert  {
@@ -150,7 +150,7 @@ span.prj, span.ctx{
 }
 
 ul.c li {
-list-style-type: none;
+    list-style-type: none;
 }
 
 ul.c {
@@ -190,32 +190,32 @@ span.r {
     overflow:auto;
     list-style:none;
     margin:0;
-}
 
-.nav a, .nav a:link, .nav a:active, .nav a:visited {
+    a, a:link, a:active, a:visited {
         background: #666;
         color: #fff;
         padding: 0.5em;
-}
+    }
 
-.nav a:focus, .nav a:hover, .nav a:active {
+    a:focus, a:hover, a:active {
         background: transparent;
         text-decoration: underline;
-}
+    }
 
-.nav li:hover, .nav a:focus, .nav a:hover, .nav a:active {
+    li:hover, a:focus, a:hover, a:active {
         color: #CCCCCC;
-}
+    }
 
-.nav li.link {
+    li.link {
         width:20%;
         float:left;
         outline:black solid 1px;
-}
+    }
-.nav .link a {
+    .link a {
         font-size:small;
         text-align:center;
         display:block;
+    }
 }
 
 #database_auth_form table td {
@@ -261,18 +261,18 @@ input#todo_description, input#tag_list, textarea#todo_notes, select#todo_project
 .prev a {
     background: image-url('previous.png') left center no-repeat;
     padding-left: 20px;
-}
 
-.prev a:hover {
+    &:hover {
         background: #cc3334 image-url('previous.png') left center no-repeat;
+    }
 }
 
 .next a {
     text-align:right;
     background: image-url('next.png') right center no-repeat;
     padding-right: 20px;
-}
 
-.next a:hover {
+    &:hover {
         background: #cc3334 image-url('next.png') right center no-repeat;
+    }
 }

app/assets/stylesheets/print.css.scss

@@ -31,10 +31,8 @@ img {
     margin: 0 0 2em 0;
     border-top: 1px solid #000;
     page-break-before: always;
-}
 
-.contexts:first-child {
+    &:first-child { page-break-before: avoid; }
-	page-break-before: avoid;
 }
 
 h2 {

app/assets/stylesheets/tracks.css.scss

@@ -106,11 +106,31 @@ h3 {
 
 /* Rules for the icon links */
 
-img.edit_item {background-image: image-url('edit_off.png'); background-repeat: no-repeat; border: none;}
+img.edit_item {
-a:hover img.edit_item {background-image: image-url('edit_on.png'); background-color: transparent; background-repeat: no-repeat; border: none;}
+    background-image: image-url('edit_off.png');
+    background-repeat: no-repeat;
+    border: none;
 
-img.delete_item {background-image: image-url('delete_off.png'); background-repeat: no-repeat; border: none;}
+    a:hover & {
-a:hover img.delete_item {background-image: image-url('delete_on.png');background-color: transparent;background-repeat: no-repeat; border: none;}
+        background-image: image-url('edit_on.png');
+        background-color: transparent;
+        background-repeat: no-repeat;
+        border: none;
+    }
+}
+
+img.delete_item {
+    background-image: image-url('delete_off.png');
+    background-repeat: no-repeat;
+    border: none;
+
+    a:hover & {
+        background-image: image-url('delete_on.png');
+        background-color: transparent;
+        background-repeat: no-repeat;
+        border: none;
+    }
+}
 
 a.undecorated_link {background-color:transparent;color:transparent;}
 img.todo_star {background-image: image-url('staricons.png'); background-repeat: no-repeat; border:none; background-position: -32px 0px;}
@@ -118,14 +138,20 @@ img.todo_star.starred{ background-position: 0px 0px; }
 a:hover img.todo_star { background-position: -48px 0px;}
 a:hover img.todo_star.starred { background-position: -16px 0px; }
 
-a.to_top {background: transparent image-url('top_off.png') no-repeat;}
+a.to_top {
-a.to_top:hover {background: transparent image-url('top_on.png') no-repeat;}
+    background: transparent image-url('top_off.png') no-repeat;
+    &:hover {background: transparent image-url('top_on.png') no-repeat;}
+}
 
-a.up {background: transparent image-url('up_off.png') no-repeat;}
+a.up {
-a.up:hover {background: transparent image-url('up_on.png') no-repeat;}
+    background: transparent image-url('up_off.png') no-repeat;
+    &:hover {background: transparent image-url('up_on.png') no-repeat;}
+}
 
-a.down {background: transparent image-url('down_off.png') no-repeat;}
+a.down {
-a.down:hover {background: transparent image-url('down_on.png') no-repeat;}
+    background: transparent image-url('down_off.png') no-repeat;
+    &:hover {background: transparent image-url('down_on.png') no-repeat;}
+}
 
 a.to_bottom {background: transparent image-url('bottom_off.png') no-repeat;}
 a.to_bottom:hover {background: transparent image-url('bottom_on.png') no-repeat;}
@@ -203,8 +229,8 @@ a.show_successors:hover, a.link_to_successors:hover {background-image: image-url
     float: left;
 }
 
-#recurring_todo input, #recurring_todo textarea {
+#recurring_todo {
-    width: 100%;
+    input, textarea { width: 100%; }
 }
 
 .recurring_container {
@@ -226,32 +252,32 @@ a.show_successors:hover, a.link_to_successors:hover {background-image: image-url
 #navlist {
     margin: 0;
     padding: 0 0 20px 5px;
-}
 
-#navlist ul, #navlist li {
+    ul, li {
         margin: 0;
         padding: 0;
         display: inline;
         list-style-type: none;
-}
+    }
 
-#navlist a:link, #navlist a:visited {
+    a:link, a:visited {
         float: left;
         line-height: 14px;
         font-weight: bold;
         margin: 0 10px 4px 10px;
         text-decoration: none;
         color: #eee;
-}
+    }
 
-#navlist a:link#current, #navlist a:visited#current, #navlist a:hover {
+    a:link#current, a:visited#current, a:hover {
         border-bottom: 4px solid #CCC;
         padding-bottom: 2px;
         background: transparent;
         color: #CCC;
-}
+    }
 
-#navlist a:hover { color: #CCC; }
+    a:hover { color: #CCC; }
+}
 
 #develop-notify-bar {
     line-height:0.5;
@@ -279,9 +305,8 @@ a.show_successors:hover, a.link_to_successors:hover {background-image: image-url
     margin-top: 15px;
     margin-bottom: 5px;
     white-space: nowrap; /* added 2006-05-17 for safari display, timfm */
-}
+
-#date h1 {
+    h1 { font-size: 152%; }
-    font-size: 152%;
 }
 
 #minilinks {
@@ -323,15 +348,17 @@ a.show_successors:hover, a.link_to_successors:hover {background-image: image-url
     border:0px;
 }
 
-h2 a, h2 a:link, h2 a:active, h2 a:visited {
+h2 {
+    a, a:link, a:active, a:visited {
         color: #666;
         text-decoration: none;
-}
+    }
 
-h2 a:hover {
+    a:hover {
         color: #cc3334;
         background-color: transparent;
         text-decoration: none;
+    }
 }
 
 div#input_box {
@@ -389,8 +416,10 @@ a:hover img.icon_delete_dep {width: 10px; background-image: image-url('icon_dele
 a.icon_delete_dep:hover {width: 10px; background-color: black;}
 
 /* deleting dependency from edit form of a todo */
-form.edit_todo_form a.icon_delete_dep:hover { background-color: #cccccc;}
+form.edit_todo_form {
-form.edit_todo_form a:hover img.icon_delete_dep { background-color: #cccccc; }
+    a.icon_delete_dep:hover { background-color: #cccccc;}
+    a:hover img.icon_delete_dep { background-color: #cccccc; }
+}
 
 /* delete button for deleting a dep from the tree of a todo */
 a.delete_dependency_button:hover {background-color: white;}
@@ -458,40 +487,40 @@ input.item-checkbox {
     padding: 0px;
 }
 
-a.footer_link {color: #cc3334; font-style: normal;}
+a.footer_link {
-a.footer_link:hover {color: #fff; background-color: #cc3334 !important;}
+    color: #cc3334;
+    font-style: normal;
+    
+    &:hover {
+        color: #fff;
+        background-color: #cc3334 !important;
+    }
+}
 
 /* preferences */
 
-body.preferences div#display_box {
+body.preferences {
+    div#display_box {
         margin-right:510px;
-}
+    }
 
-body.preferences div#input_box {
+    div#input_box {
         width:490px;
         right:15px;
-}
+    }
 
-body.preferences select#prefs_time_zone, body.preferences select#prefs_sms_context_id {
+    select#prefs_time_zone, select#prefs_sms_context_id {
         width: 250px;
-}
+    }
 
-body.preferences div#footer {
+    div#footer {
         margin-right:410px;
-}
+    }
 
-/* override jquery css to match tracks defaults better */
+    /* override jquery css to match tracks defaults better */
-
+    div.ui-widget { font-size: 1em; }
-body.preferences div.ui-widget {
+    div.ui-tabs li a { padding: 0.1em 1em; }
-  font-size: 1em;
+    div.pref_new_token a { color: #CC3334; }
-}
-
-body.preferences div.ui-tabs li a {
-  padding: 0.1em 1em;
-}
-
-body.preferences div.pref_new_token a {
-  color: #CC3334;
 }
 
 /* The notes which may be attached to an item */
@@ -915,54 +944,54 @@ input#go_to_project, input#context_hide {
     width: 5%;
 }
 
-#todo_new_action_container .show_from_input, #todo_new_action_container .due_input {
+#todo_new_action_container {
+    .show_from_input, .due_input {
         width: 45%;
+    }
 }
 
 #todo_new_action_container .show_from_input {
     float: right;
 }
 
-#todo-form-new-action .submit_box, #project_form .submit_box, #context_form .submit_box, #todo-form-multi-new-action .submit_box {
+#todo-form-new-action, #project_form, #context_form, #todo-form-multi-new-action {
+    .submit_box {
         height: 25px;
         padding: 5px 0;
         text-align: center;
         clear: right;
+    }
 }
 
-.edit_todo_form .submit_box {
+.edit_todo_form {
+    input, textarea { width:100%; }
+
+    .submit_box {
         height: 25px;
         padding: 5px 0;
         text-align: center;
         clear: right;
-}
+    }
 
-.edit_todo_form input, .edit_todo_form textarea {
+    .Date { width:89%; }
-    width:100%;
-}
 
-.edit_todo_form .Date {
+    a.date_clear:hover { background: #CCCCCC; }
-    width:89%;
-}
 
-.edit_todo_form a.date_clear:hover {
+    .tag_list_label { clear:both; }
-    background: #CCCCCC;
-}
 
-.edit_todo_form .tag_list_label {
+    .due_input, .show_from_input, .project_input, .context_input {
-    clear:both;
-}
-.edit_todo_form .due_input, .edit_todo_form .show_from_input, .edit_todo_form .project_input, .edit_todo_form .context_input {
         width:48%;
-}
+    }
 
-.edit_todo_form .show_from_input, .edit_todo_form .context_input {
+    .show_from_input, .context_input {
         float: right;
+    }
+
+    .submit_box input {
+        width:120px;
+    }
 }
 
-.edit_todo_form .submit_box input {
-    width:120px;
-}
 .hide_form {
     text-align:right;
 }
@@ -1067,9 +1096,8 @@ div.message {
     padding-bottom: 12px;
     margin: 10px auto 20px auto;
     background-color: #f0f0f0;
-}
 
-#errorExplanation h2 {
+    h2 {
         text-align: left;
         font-weight: bold;
         padding: 5px 5px 5px 15px;
@@ -1077,21 +1105,22 @@ div.message {
         margin: -7px;
         background-color: #c00;
         color: #fff;
-}
+    }
 
-#errorExplanation > p {
+    > p {
         color: #333;
         margin-top: 5px;
         margin-bottom: 0;
         padding: 5px;
-}
+    }
 
-#errorExplanation ul li {
+    ul li {
         font-size: 1em;
         list-style-type: disc;
         list-style-position: inside;
         margin-left:7px;
         color: #333;
+    }
 }
 
 ul#prefs {list-style-type: disc; margin-left: 15px;}
@@ -1126,38 +1155,32 @@ ul#prefs {list-style-type: disc; margin-left: 15px;}
     color: #666;
     padding: 5px 20px;
     text-align: left;
-}
 
-#feedlegend h3, #feedlegend dl, #feedlegend dt, #feedlegend dd {
+    h3, dl, dt, dd {
         display: inline;
+    }
+
+    dt { margin-left: 15px; }
+    dd { margin-left: 3px; }
+    p { margin-bottom: 0px; }
 }
 
-#feedlegend dt {
+#feeds {
-    margin-left: 15px;
+    img.rss-icon {
-}
-
-#feedlegend dd {
-    margin-left: 3px;
-}
-
-#feedlegend p {
-    margin-bottom: 0px;
-}
-
-#feeds img.rss-icon {
         margin-bottom: -4px;
-}
+    }
 
-#feeds li {
+    li {
         font-size:13px;
         font-family: "Lucida Grande", Verdana, Geneva, Arial, sans-serif;
-}
 
-#feeds li h4 {
+        h4 {
             margin-top: 12px;
             margin-bottom: 4px;
             font-weight: normal;
             font-style:oblique;
+        }
+    }
 }
 
 input.open_id {
@@ -1174,32 +1197,32 @@ div.page_name_auto_complete {
     background: #fff;
     display: inline;
     z-index: 100;
-}
 
-div.page_name_auto_complete ul {
+    ul {
         border: 1px solid #888;
         margin: 0;
         padding: 0;
         width: 100%;
         list-style-type: none;
-}
 
-div.page_name_auto_complete ul li {
+        li {
             margin: 0;
             padding: 2px;
             font-weight:bold;
             list-style-type: none;
             color: #000;
-}
+        }
 
-div.page_name_auto_complete ul li.selected {
+        li.selected {
             background-color: #ffb;
-}
+        }
 
-div.page_name_auto_complete ul strong.highlight {
+        strong.highlight {
             color: #800;
             margin: 0;
             padding: 0;
+        }
+    }
 }
 
 table.next_actions td {
@@ -1355,72 +1378,67 @@ button.positive, .widgets a.positive{
     margin-bottom:15px;
 }
 
-div.integrations h2 {
+div.integrations {
+    h2 {
         margin-top:40px;
         padding-top:20px;
         margin-bottom:10px;
         border-top:1px solid #ccc;
-}
+    }
 
-div.integrations p, div.integrations li {
+    p, li { font-size:1.0em; }
-    font-size:1.0em;
+    pre { font-size:1.1em; }
-}
 
-div.integrations pre {
+    li {
-    font-size:1.1em;
-}
-
-div.integrations li {
         list-style-type: disc;
         list-style-position: inside;
         margin-left:30px;
-}
+    }
 
-div.integrations textarea {
+    textarea {
         margin:10px;
         padding:3px;
         width:80%;
         background-color:#ddd;
+    }
 }
 
 .defer-container {
     float:right;
-}
 
-.defer-container a:hover {
+    a:hover { background-color: inherit; }
-  background-color: inherit;
 }
 
 div.auto_complete {
     width: 350px;
     background: #fff;
     color: #000;
-}
 
-div.auto_complete ul {
+    ul {
         border:1px solid #888;
         margin:0;
         padding:0;
         width:100%;
         list-style-type:none;
-}
 
-div.auto_complete ul li {
+        li {
             font-size: 1.0em;
             margin:0;
             padding:3px;
             list-style-type: none;
-}
+        }
 
-div.auto_complete ul li.selected {
+        li.selected {
             background-color: #ffb;
             font-weight:bold;
-}
+        }
 
-div.auto_complete ul strong.highlight {
+        strong.highlight {
             color: #800;
             margin:0;
             padding:0;
+        }
+    }
 }
 
 .ui-datepicker {
@@ -1439,10 +1457,10 @@ a.item-downarrow {
 ul.todo-submenu > li > a {
     position: relative;
     padding-left: 24px;
-}
 
-ul.todo-submenu > li > a > img {
+    > img {
         position: absolute;
         left: 0px;
         top: 0px;
+    }
 }