Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

moved css into own files from backbone example

  • Loading branch information...
commit 83ad01c3e01ff10ec11fdb7c46e69ceb8cae0eca 1 parent d9a644f
@dodo authored
Showing with 88 additions and 89 deletions.
  1. +2 −89 example/backbone.html
  2. +55 −0 example/base.css
  3. +31 −0 example/list.css
View
91 example/backbone.html
@@ -2,95 +2,8 @@
<html>
<head>
<title>dynamictemplate test</title>
- <style>
-
-body {
- background:white;
- color: black;
-}
-
-a, input {
- text-decoration:none;
- color: #545454;
- padding: 1px;
- border: 1px solid transparent;
- margin: 3px;
- display:inline-block;
- min-width: 1em;
- text-align:center;
- vertical-align:middle;
- -webkit-transition: 300ms;
- -moz-transition: 300ms;
- -o-transition: 300ms;
- transition: 300ms;
- border-radius:0.3em;
-
- background-size: 0% 0%;
- background-position: center center;
- background-repeat: no-repeat;
- background-color:transparent;
- background-image: -webkit-radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
- background-image: -moz-radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
- background-image: -o-radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
- background-image: -ms-radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
- background-image: radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
-}
-
-a:hover, a:focus, input:hover, input:focus {
- background-size: 2222% 2222%;
- border-color:transparent;
- color:white;
-}
-
-input {
- text-align:left;
- padding: 3px;
-
- -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.42);
- -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.42);
- box-shadow: inset 0 0 3px rgba(0,0,0,0.42);
-}
-
-input[type="button"] {
- cursor: pointer;
- background-color:rgba(0,0,0,0.1);
- -webkit-box-shadow: inset 0 0 3px rgba(255,255,255,0.42);
- -moz-box-shadow: inset 0 0 3px rgba(255,255,255,0.42);
- box-shadow: inset 0 0 3px rgba(255,255,255,0.42);
-}
-
-.list {
- clear:both;
- list-style-type: none;
- border:1px dashed gray;
- border-bottom:0px;
- padding:0;
-}
-.list li {
- list-style-type: none;
- border-bottom:1px dashed gray;
- padding:2px;
- padding-left:20px;
- margin:0;
- min-height: 2em;
-}
-
-.control {
- text-align:center;
- border-radius:1.1em;
- min-height: 1.3em;
- min-width: 1.3em;
- font-size:1.1em;
- float:right;
- padding:0;
-}
-
-input[type="number"] {
- width: 3em;
-}
-
-
- </style>
+ <link rel="stylesheet" href="base.css">
+ <link rel="stylesheet" href="list.css">
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script src="http://coffeescript.org/extras/coffee-script.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
View
55 example/base.css
@@ -0,0 +1,55 @@
+
+body {
+ background:white;
+ color: black;
+}
+
+a, input {
+ text-decoration:none;
+ color: #545454;
+ padding: 1px;
+ border: 1px solid transparent;
+ margin: 3px;
+ display:inline-block;
+ min-width: 1em;
+ text-align:center;
+ vertical-align:middle;
+ -webkit-transition: 300ms;
+ -moz-transition: 300ms;
+ -o-transition: 300ms;
+ transition: 300ms;
+ border-radius:0.3em;
+
+ background-size: 0% 0%;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-color:transparent;
+ background-image: -webkit-radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
+ background-image: -moz-radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
+ background-image: -o-radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
+ background-image: -ms-radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
+ background-image: radial-gradient(circle contain, black, black 50%, transparent 50%, transparent);
+}
+
+a:hover, a:focus, input:hover, input:focus {
+ background-size: 2222% 2222%;
+ border-color:transparent;
+ color:white;
+}
+
+input {
+ text-align:left;
+ padding: 3px;
+
+ -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.42);
+ -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.42);
+ box-shadow: inset 0 0 3px rgba(0,0,0,0.42);
+}
+
+input[type="button"] {
+ cursor: pointer;
+ background-color:rgba(0,0,0,0.1);
+ -webkit-box-shadow: inset 0 0 3px rgba(255,255,255,0.42);
+ -moz-box-shadow: inset 0 0 3px rgba(255,255,255,0.42);
+ box-shadow: inset 0 0 3px rgba(255,255,255,0.42);
+}
View
31 example/list.css
@@ -0,0 +1,31 @@
+/* depends on base.css */
+
+.list {
+ clear:both;
+ list-style-type: none;
+ border:1px dashed gray;
+ border-bottom:0px;
+ padding:0;
+}
+.list li {
+ list-style-type: none;
+ border-bottom:1px dashed gray;
+ padding:2px;
+ padding-left:20px;
+ margin:0;
+ min-height: 2em;
+}
+
+.control {
+ text-align:center;
+ border-radius:1.1em;
+ min-height: 1.3em;
+ min-width: 1.3em;
+ font-size:1.1em;
+ float:right;
+ padding:0;
+}
+
+input[type="number"] {
+ width: 3em;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.