refactor CSS to take some advantage of Sass nesting

This commit is contained in:
Dan Rice 2012-09-27 13:10:09 -04:00
parent 735ee8fe34
commit a24b18b724
5 changed files with 314 additions and 299 deletions

1
.gitignore vendored
View file

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

View file

@ -119,28 +119,28 @@ h4.notice {
padding-bottom: 12px; padding-bottom: 12px;
margin: 10px auto 10px auto; margin: 10px auto 10px auto;
background-color: #f0f0f0; background-color: #f0f0f0;
}
#errorExplanation h2 { h2 {
text-align: left; text-align: left;
font-weight: bold; font-weight: bold;
padding: 5px 5px 5px 15px; padding: 5px 5px 5px 15px;
font-size: 12px; font-size: 12px;
margin: -7px; margin: -7px;
background-color: #c00; background-color: #c00;
color: #fff; color: #fff;
} }
#errorExplanation p { p {
color: #333; color: #333;
margin-bottom: 0; margin-bottom: 0;
padding: 5px; padding: 5px;
} }
#errorExplanation ul li { ul li {
font-size: 1em; font-size: 1em;
list-style-type: disc; list-style-type: disc;
list-style-position: outside; list-style-position: outside;
}
} }
input.login_text { input.login_text {
@ -156,7 +156,5 @@ input.open_id {
} }
p.alternate_auth { p.alternate_auth {
text-align: center; text-align: center;
} a { text-decoration:underline; }
p.alternate_auth a {
text-decoration: underline;
} }

View file

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

View file

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

View file

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