[Pkg-javascript-commits] [backbone] 12/74: cleaning up generated CSS
Jonas Smedegaard
js at moszumanska.debian.org
Sat May 3 16:59:04 UTC 2014
This is an automated email from the git hooks/post-receive script.
js pushed a commit to tag 0.3.0
in repository backbone.
commit 62f43bde9de9f6f8b04cfe676d26e57437e0a647
Author: Jeremy Ashkenas <jashkenas at gmail.com>
Date: Mon Oct 25 15:44:31 2010 -0400
cleaning up generated CSS
---
examples/todos/todos.css | 427 +++++++++++++++++++++++++--------------------
examples/todos/todos.js | 50 +++---
examples/todos/tooltip.css | 100 -----------
3 files changed, 258 insertions(+), 319 deletions(-)
diff --git a/examples/todos/todos.css b/examples/todos/todos.css
index ff29efe..b59da80 100644
--- a/examples/todos/todos.css
+++ b/examples/todos/todos.css
@@ -1,5 +1,3 @@
- at import url(tooltip.css);
-/* line 14, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
@@ -18,62 +16,29 @@ table, caption, tbody, tfoot, thead, tr, th, td {
font-family: inherit;
vertical-align: baseline;
}
-
-/* line 17, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
body {
line-height: 1;
color: black;
background: white;
}
-
-/* line 19, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
list-style: none;
}
-
-/* line 21, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
-table {
- border-collapse: separate;
- border-spacing: 0;
- vertical-align: middle;
-}
-
-/* line 23, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
-caption, th, td {
- text-align: left;
- font-weight: normal;
- vertical-align: middle;
-}
-
-/* line 25, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
-q, blockquote {
- quotes: "" "";
-}
-/* line 96, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
-q:before, q:after, blockquote:before, blockquote:after {
- content: "";
-}
-
-/* line 27, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
border: none;
}
-/* line 6 */
html {
background: #eeeeee;
}
+ body {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.4em;
+ background: #eeeeee;
+ color: #333333;
+ }
-/* line 9 */
-body {
- font-family: "Helvetica Neue", helvetica, arial, sans-serif;
- font-size: 14px;
- line-height: 1.4em;
- background: #eeeeee;
- color: #333333;
-}
-
-/* line 17 */
#todoapp {
width: 480px;
margin: 0 auto 40px;
@@ -84,163 +49,143 @@ body {
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 5px 6px 0;
}
-/* line 24 */
-#todoapp .title h1 {
- font-size: 36px;
- font-weight: bold;
- text-align: center;
- padding: 20px 0 30px 0;
- line-height: 1;
-}
-/* line 31 */
-#todoapp .content #create-todo {
- position: relative;
-}
-/* line 33 */
-#todoapp .content #create-todo input {
- width: 466px;
- font-size: 24px;
- font-family: inherit;
- line-height: 1.4em;
- border: 0;
- outline: none;
- padding: 6px;
- border: 1px solid #999999;
- -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
- -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
- -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
- box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-}
-/* line 44 */
-#todoapp .content #create-todo input::-webkit-input-placeholder {
- font-style: italic;
-}
-/* line 46 */
-#todoapp .content #create-todo span {
- position: absolute;
- z-index: 999;
- width: 170px;
- left: 50%;
- margin-left: -85px;
-}
-/* line 54 */
-#todoapp .content ul#todo-list {
- margin-top: 10px;
-}
-/* line 56 */
-#todo-list li {
- padding: 15px 20px 15px 0;
+ #todoapp h1 {
+ font-size: 36px;
+ font-weight: bold;
+ text-align: center;
+ padding: 20px 0 30px 0;
+ line-height: 1;
+ }
+
+#create-todo {
position: relative;
- font-size: 24px;
- border-bottom: 1px solid #cccccc;
}
+ #create-todo input {
+ width: 466px;
+ font-size: 24px;
+ font-family: inherit;
+ line-height: 1.4em;
+ border: 0;
+ outline: none;
+ padding: 6px;
+ border: 1px solid #999999;
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+ -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+ }
+ #create-todo input::-webkit-input-placeholder {
+ font-style: italic;
+ }
+ #create-todo span {
+ position: absolute;
+ z-index: 999;
+ width: 170px;
+ left: 50%;
+ margin-left: -85px;
+ }
-#todoapp .content ul#todo-list li:after {
- content: "\0020";
- display: block;
- height: 0;
- clear: both;
- overflow: hidden;
- visibility: hidden;
-}
-/* line 62 */
-#todo-list li.editing {
- padding: 0;
- border-bottom: 0;
-}
-#todo-list .editing .display,
-#todo-list .edit {
- display: none;
+#todo-list {
+ margin-top: 10px;
}
- #todo-list .editing .edit {
- display: block;
+ #todo-list li {
+ padding: 15px 20px 15px 0;
+ position: relative;
+ font-size: 24px;
+ border-bottom: 1px solid #cccccc;
}
-/* line 65 */
-#todoapp .content ul#todo-list .editing input {
- width: 444px;
- font-size: 24px;
- font-family: inherit;
- margin: 0;
- line-height: 1.6em;
- border: 0;
- outline: none;
- padding: 10px 7px 0px 27px;
- border: 1px solid #999999;
- -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
- -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
- -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
- box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-}
-/* line 76 */
-#todoapp .content ul#todo-list li input[type=checkbox] {
- position: relative;
- top: 6px;
- margin: 0 10px 0 7px;
- float: left;
-}
-/* line 82 */
-#todo-list .done .todo-content {
- text-decoration: line-through;
- color: #777777;
-}
-/* line 85 */
-#todoapp .content ul#todo-list li .todo-destroy {
- position: absolute;
- right: 0px;
- top: 16px;
- display: none;
- cursor: pointer;
- width: 20px;
- height: 20px;
- background: url(destroy.png) no-repeat center center;
-}
-/* line 95 */
-#todoapp .content ul#todo-list li:hover .todo-destroy {
- display: block;
-}
-/* line 98 */
-#todoapp .content #todo-stats {
+ #todo-list li:after {
+ content: "\0020";
+ display: block;
+ height: 0;
+ clear: both;
+ overflow: hidden;
+ visibility: hidden;
+ }
+ #todo-list li.editing {
+ padding: 0;
+ border-bottom: 0;
+ }
+ #todo-list .editing .display,
+ #todo-list .edit {
+ display: none;
+ }
+ #todo-list .editing .edit {
+ display: block;
+ }
+ #todo-list .editing input {
+ width: 444px;
+ font-size: 24px;
+ font-family: inherit;
+ margin: 0;
+ line-height: 1.6em;
+ border: 0;
+ outline: none;
+ padding: 10px 7px 0px 27px;
+ border: 1px solid #999999;
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+ -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+ box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+ }
+ #todo-list .check {
+ position: relative;
+ top: 6px;
+ margin: 0 10px 0 7px;
+ float: left;
+ }
+ #todo-list .done .todo-content {
+ text-decoration: line-through;
+ color: #777777;
+ }
+ #todo-list .todo-destroy {
+ position: absolute;
+ right: 0px;
+ top: 16px;
+ display: none;
+ cursor: pointer;
+ width: 20px;
+ height: 20px;
+ background: url(destroy.png) no-repeat center center;
+ }
+ #todo-list li:hover .todo-destroy {
+ display: block;
+ }
+
+#todo-stats {
*zoom: 1;
margin-top: 10px;
color: #777777;
}
-/* line 22, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
-#todoapp .content #todo-stats:after {
- content: "\0020";
- display: block;
- height: 0;
- clear: both;
- overflow: hidden;
- visibility: hidden;
-}
-/* line 102 */
-#todoapp .content #todo-stats .todo-count {
- float: left;
-}
-/* line 105 */
-#todoapp .content #todo-stats .todo-count .number {
- font-weight: bold;
- color: #333333;
-}
-/* line 108 */
-#todoapp .content #todo-stats .todo-clear {
- float: right;
-}
-/* line 111 */
-#todoapp .content #todo-stats .todo-clear a {
- color: #777777;
- font-size: 12px;
-}
-/* line 114 */
-#todoapp .content #todo-stats .todo-clear a:visited {
- color: #777777;
-}
-/* line 116 */
-#todoapp .content #todo-stats .todo-clear a:hover {
- color: #336699;
-}
+ #todo-stats:after {
+ content: "\0020";
+ display: block;
+ height: 0;
+ clear: both;
+ overflow: hidden;
+ visibility: hidden;
+ }
+ #todo-stats .todo-count {
+ float: left;
+ }
+ #todo-stats .todo-count .number {
+ font-weight: bold;
+ color: #333333;
+ }
+ #todo-stats .todo-clear {
+ float: right;
+ }
+ #todo-stats .todo-clear a {
+ color: #777777;
+ font-size: 12px;
+ }
+ #todo-stats .todo-clear a:visited {
+ color: #777777;
+ }
+ #todo-stats .todo-clear a:hover {
+ color: #336699;
+ }
-/* line 120 */
#instructions {
width: 520px;
margin: 10px auto;
@@ -252,7 +197,6 @@ body {
color: #336699;
}
-/* line 127 */
#credits {
width: 520px;
margin: 30px auto;
@@ -260,7 +204,104 @@ body {
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center;
}
-/* line 133 */
-#credits a {
- color: #888;
+ #credits a {
+ color: #888;
+ }
+
+
+/*
+ * François 'cahnory' Germain
+ */
+.ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left {
+ color:#ffffff;
+ cursor:normal;
+ display:-moz-inline-stack;
+ display:inline-block;
+ font-size:12px;
+ font-family:arial;
+ padding:.5em 1em;
+ position:relative;
+ text-align:center;
+ text-shadow:0 -1px 1px #111111;
+ -webkit-border-top-left-radius:4px ;
+ -webkit-border-top-right-radius:4px ;
+ -webkit-border-bottom-right-radius:4px ;
+ -webkit-border-bottom-left-radius:4px ;
+ -khtml-border-top-left-radius:4px ;
+ -khtml-border-top-right-radius:4px ;
+ -khtml-border-bottom-right-radius:4px ;
+ -khtml-border-bottom-left-radius:4px ;
+ -moz-border-radius-topleft:4px ;
+ -moz-border-radius-topright:4px ;
+ -moz-border-radius-bottomright:4px ;
+ -moz-border-radius-bottomleft:4px ;
+ border-top-left-radius:4px ;
+ border-top-right-radius:4px ;
+ border-bottom-right-radius:4px ;
+ border-bottom-left-radius:4px ;
+ -o-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
+ -moz-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
+ -khtml-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
+ -webkit-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
+ box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
+ background-color:#3b3b3b;
+ background-image:-moz-linear-gradient(top,#555555,#222222);
+ background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#555555),color-stop(1,#222222));
+ filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
+ -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
+}
+.ui-tooltip:after, .ui-tooltip-top:after, .ui-tooltip-right:after, .ui-tooltip-bottom:after, .ui-tooltip-left:after {
+ content:"\25B8";
+ display:block;
+ font-size:2em;
+ height:0;
+ line-height:0;
+ position:absolute;
+}
+.ui-tooltip:after, .ui-tooltip-bottom:after {
+ color:#2a2a2a;
+ bottom:0;
+ left:1px;
+ text-align:center;
+ text-shadow:1px 0 2px #000000;
+ -o-transform:rotate(90deg);
+ -moz-transform:rotate(90deg);
+ -khtml-transform:rotate(90deg);
+ -webkit-transform:rotate(90deg);
+ width:100%;
+}
+.ui-tooltip-top:after {
+ bottom:auto;
+ color:#4f4f4f;
+ left:-2px;
+ top:0;
+ text-align:center;
+ text-shadow:none;
+ -o-transform:rotate(-90deg);
+ -moz-transform:rotate(-90deg);
+ -khtml-transform:rotate(-90deg);
+ -webkit-transform:rotate(-90deg);
+ width:100%;
+}
+.ui-tooltip-right:after {
+ color:#222222;
+ right:-0.375em;
+ top:50%;
+ margin-top:-.05em;
+ text-shadow:0 1px 2px #000000;
+ -o-transform:rotate(0);
+ -moz-transform:rotate(0);
+ -khtml-transform:rotate(0);
+ -webkit-transform:rotate(0);
+}
+.ui-tooltip-left:after {
+ color:#222222;
+ left:-0.375em;
+ top:50%;
+ margin-top:.1em;
+ text-shadow:0 -1px 2px #000000;
+ -o-transform:rotate(180deg);
+ -moz-transform:rotate(180deg);
+ -khtml-transform:rotate(180deg);
+ -webkit-transform:rotate(180deg);
}
diff --git a/examples/todos/todos.js b/examples/todos/todos.js
index 0004887..64bb111 100644
--- a/examples/todos/todos.js
+++ b/examples/todos/todos.js
@@ -118,20 +118,16 @@ $(function(){
},
initialize: function() {
- _.bindAll(this, 'addTodo', 'clearCompleted', 'showTooltip', 'createIfEnter', 'render');
+ _.bindAll(this, 'addOne', 'addAll', 'clearCompleted', 'showTooltip',
+ 'createIfEnter', 'render');
- this.list = $("#todo-list");
- this.newInput = $("#new-todo");
- this.tooltip = this.$(".ui-tooltip-top");
+ this.input = this.$("#new-todo");
- Todos.bind('add', this.addTodo);
- Todos.bind('all', this.render);
+ Todos.bind('add', this.addOne);
+ Todos.bind('refresh', this.addAll);
+ Todos.bind('all', this.render);
- Todos.fetch({
- success: _.bind(function(coll) {
- _.each(coll.models, this.addTodo);
- }, this)
- });
+ Todos.fetch();
},
render: function() {
@@ -143,32 +139,34 @@ $(function(){
}));
},
- addTodo: function(todo) {
+ addOne: function(todo) {
var view = new TodoView({model: todo});
- this.list.append(view.render().el);
+ this.$("#todo-list").append(view.render().el);
+ },
+
+ addAll: function() {
+ Todos.each(this.addOne);
},
createIfEnter: function(e) {
- if (e.keyCode == 13) {
- Todos.create({
- content: this.newInput.val(),
- order: Todos.nextOrder(),
- done: false
- });
- this.newInput.val('');
- }
+ if (e.keyCode != 13) return;
+ Todos.create({
+ content: this.input.val(),
+ order: Todos.nextOrder(),
+ done: false
+ });
+ this.input.val('');
},
showTooltip: function(e) {
- this.tooltip.fadeOut();
+ var tooltip = this.$(".ui-tooltip-top");
+ tooltip.fadeOut();
if (this.tooltipTimeout) clearTimeout(this.tooltipTimeout);
- var tt = this.tooltip;
-
- if (this.newInput.val() !== "" && this.newInput.val() !== this.newInput.attr('placeholder')) {
+ if (this.input.val() !== "" && this.input.val() !== this.input.attr('placeholder')) {
this.tooltipTimeout = setTimeout(function(){
- tt.show().fadeIn();
+ tooltip.show().fadeIn();
}, 1000);
}
},
diff --git a/examples/todos/tooltip.css b/examples/todos/tooltip.css
deleted file mode 100644
index 469998e..0000000
--- a/examples/todos/tooltip.css
+++ /dev/null
@@ -1,100 +0,0 @@
-/*
- * François 'cahnory' Germain
- */
-.ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left {
- color:#ffffff;
- cursor:normal;
- display:-moz-inline-stack;
- display:inline-block;
- font-size:12px;
- font-family:arial;
- padding:.5em 1em;
- position:relative;
- text-align:center;
- text-shadow:0 -1px 1px #111111;
- -webkit-border-top-left-radius:4px ;
- -webkit-border-top-right-radius:4px ;
- -webkit-border-bottom-right-radius:4px ;
- -webkit-border-bottom-left-radius:4px ;
- -khtml-border-top-left-radius:4px ;
- -khtml-border-top-right-radius:4px ;
- -khtml-border-bottom-right-radius:4px ;
- -khtml-border-bottom-left-radius:4px ;
- -moz-border-radius-topleft:4px ;
- -moz-border-radius-topright:4px ;
- -moz-border-radius-bottomright:4px ;
- -moz-border-radius-bottomleft:4px ;
- border-top-left-radius:4px ;
- border-top-right-radius:4px ;
- border-bottom-right-radius:4px ;
- border-bottom-left-radius:4px ;
- -o-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
- -moz-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
- -khtml-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
- -webkit-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
- box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
- background-color:#3b3b3b;
- background-image:-moz-linear-gradient(top,#555555,#222222);
- background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#555555),color-stop(1,#222222));
- filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
- -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
-}
-.ui-tooltip:after, .ui-tooltip-top:after, .ui-tooltip-right:after, .ui-tooltip-bottom:after, .ui-tooltip-left:after {
- content:"\25B8";
- display:block;
- font-size:2em;
- height:0;
- line-height:0;
- position:absolute;
-}
-.ui-tooltip:after, .ui-tooltip-bottom:after {
- color:#2a2a2a;
- bottom:0;
- left:1px;
- text-align:center;
- text-shadow:1px 0 2px #000000;
- -o-transform:rotate(90deg);
- -moz-transform:rotate(90deg);
- -khtml-transform:rotate(90deg);
- -webkit-transform:rotate(90deg);
- width:100%;
-}
-.ui-tooltip-top:after {
- bottom:auto;
- color:#4f4f4f;
- left:-2px;
- top:0;
- text-align:center;
- text-shadow:none;
- -o-transform:rotate(-90deg);
- -moz-transform:rotate(-90deg);
- -khtml-transform:rotate(-90deg);
- -webkit-transform:rotate(-90deg);
- width:100%;
-}
-.ui-tooltip-right:after {
- color:#222222;
- right:-0.375em;
- top:50%;
- margin-top:-.05em;
- text-shadow:0 1px 2px #000000;
- -o-transform:rotate(0);
- -moz-transform:rotate(0);
- -khtml-transform:rotate(0);
- -webkit-transform:rotate(0);
-}
-.ui-tooltip-left:after {
- color:#222222;
- left:-0.375em;
- top:50%;
- margin-top:.1em;
- text-shadow:0 -1px 2px #000000;
- -o-transform:rotate(180deg);
- -moz-transform:rotate(180deg);
- -khtml-transform:rotate(180deg);
- -webkit-transform:rotate(180deg);
-}
-
-/* demo css */
-h2 { margin: 2em 0 1em; }
-p { margin: 0 0 1em; }
\ No newline at end of file
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/backbone.git
More information about the Pkg-javascript-commits
mailing list