Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Clean up example page styles a little

  • Loading branch information...
commit c2b192b6e247a227d71554bd24201c9b48945126 1 parent 4f326a3
@kneath authored
Showing with 226 additions and 4 deletions.
  1. +52 −4 example/index.html
  2. +174 −0 src/timeframe.css
View
56 example/index.html
@@ -7,12 +7,60 @@
<title>Timeframe Example Page</title>
<script src="../lib/mootools.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/timeframe.js" type="text/javascript" charset="utf-8"></script>
+ <link rel="stylesheet" href="../src/timeframe.css" type="text/css" />
+ <style type="text/css" media="screen">
+ /*------------------------------------------------------------------------------------
+ @group Global Reset
+ ------------------------------------------------------------------------------------*/
+ * {
+ padding:0;
+ margin:0;
+ }
+ h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 0; }
+ li, dd { margin-left:5%; }
+ fieldset { padding: .5em; }
+ select option{ padding:0 5px; }
+
+ .access{ display:none; } /* For accessibility related elements */
+ .clear{ clear:both; height:0px; font-size:0px; line-height:0px; overflow:hidden; }
+ a{ outline:none; }
+ a img{ border:none; }
+
+ .clearfix:after {
+ content: ".";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+ }
+ * html .clearfix {height: 1%;}
+ .clearfix {display:inline-block;}
+ .clearfix {display: block;}
+
+ /* @end */
+
+ body{
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size:12px;
+ background:#eee;
+ }
+
+ #wrapper{
+ margin:30px auto;
+ width:600px;
+ padding:10px;
+ background:#fff;
+ border:4px solid #ddd;
+ }
+ </style>
</head>
<body>
- <div id="calendar"></div>
- <script type="text/javascript" charset="utf-8">
- new Timeframe('calendar');
- </script>
+ <div id="wrapper">
+ <div id="calendar"></div>
+ <script type="text/javascript" charset="utf-8">
+ new Timeframe('calendar');
+ </script>
+ </div>
</body>
</html>
View
174 src/timeframe.css
@@ -0,0 +1,174 @@
+div.timeframe_calendar {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ text-align: center;
+ text-shadow: none;
+}
+
+/* Menu */
+div.timeframe_calendar ul.timeframe_menu {
+ list-style-type: none;
+ font-weight: bold;
+ margin: auto;
+ padding: 0 0 6px;
+ width: 60px;
+}
+ div.timeframe_calendar ul.timeframe_menu li {
+ display: inline;
+ }
+ div.timeframe_calendar ul.timeframe_menu li a {
+ display: inline-block;
+ height: 20px;
+ padding: 2px 0 0;
+ text-decoration: none;
+ width: 20px;
+ -webkit-box-shadow: 0 1px 2px #999;
+ }
+ div.timeframe_calendar ul.timeframe_menu li a.previous, div.timeframe_calendar ul.timeframe_menu li a.next {
+ background: #fff;
+ color: #468966;
+ }
+ div.timeframe_calendar ul.timeframe_menu li a.previous:hover, div.timeframe_calendar ul.timeframe_menu li a.next:hover {
+ background: #ccc;
+ }
+ div.timeframe_calendar ul.timeframe_menu li a.previous:active, div.timeframe_calendar ul.timeframe_menu li a.next:active {
+ background: #aaa;
+ }
+ div.timeframe_calendar ul.timeframe_menu li a.disabled, div.timeframe_calendar ul.timeframe_menu li a.disabled:hover, div.timeframe_calendar ul.timeframe_menu li a.disabled:active {
+ background: #fff;
+ color: #ccc;
+ cursor: default;
+ }
+ div.timeframe_calendar ul.timeframe_menu li a.today {
+ background: #468966;
+ color: #eee;
+ }
+ div.timeframe_calendar ul.timeframe_menu li a.today:hover {
+ background: #246744;
+ }
+ div.timeframe_calendar ul.timeframe_menu li a.today:active {
+ background: #024522;
+ }
+ div.timeframe_calendar ul.timeframe_menu li a.previous {
+ -webkit-border-top-left-radius: 10px;
+ -webkit-border-bottom-left-radius: 10px;
+ -moz-border-radius-topleft: 11px;
+ -moz-border-radius-bottomleft: 11px;
+ }
+ div.timeframe_calendar ul.timeframe_menu li a.next {
+ -webkit-border-top-right-radius: 10px;
+ -webkit-border-bottom-right-radius: 10px;
+ -moz-border-radius-topright: 11px;
+ -moz-border-radius-bottomright: 11px;
+ }
+
+/* Calendar*/
+div.timeframe_calendar table {
+ border-collapse: collapse;
+ display: inline;
+ display: inline-block;
+ font-size: 15px;
+ margin: 0 6px 12px;
+}
+ /* Month names */
+ div.timeframe_calendar table caption {
+ text-shadow: 0 0 0 #fff;
+ }
+ /* Cell sizes */
+ div.timeframe_calendar thead th, div.timeframe_calendar tbody td {
+ height: 18px;
+ margin: 0;
+ padding: 2px 1px;
+ width: 20px;
+ }
+ /* Weekday letters */
+ div.timeframe_calendar thead {
+ background: #222;
+ color: #eee;
+ }
+ /* Days */
+ div.timeframe_calendar tbody {
+ background: #fff;
+ -webkit-box-shadow: 0px 2px 6px #999;
+ }
+ div.timeframe_calendar tbody td {
+ cursor: pointer;
+ }
+ /* Hover states not available in IE */
+ div.timeframe_calendar tbody td.selectable:hover {
+ background-color: #bbb;
+ }
+ div.timeframe_calendar tbody td.selected:hover, div.timeframe_calendar tbody td.stuck:hover {
+ background-color: #e99a27;
+ }
+ /* Selected states */
+ div.timeframe_calendar tbody td.selected {
+ background-color: #ffb03b;
+ }
+ div.timeframe_calendar tbody td.stuck {
+ background-color: #e99a27;
+ }
+ /* Range markers */
+ div.timeframe_calendar tbody td.startrange, div.timeframe_calendar tbody td.endrange, div.timeframe_calendar tbody td.startendrange {
+ cursor: col-resize;
+ }
+ div.timeframe_calendar tbody td.startrange {
+ background-image: url(../images/start.png);
+ }
+ div.timeframe_calendar tbody td.endrange {
+ background-image: url(../images/end.png);
+ }
+ div.timeframe_calendar tbody td.startendrange {
+ background-image: url(../images/startend.png);
+ }
+ /* Today */
+ div.timeframe_calendar tbody td.today {
+ background-color: #468966;
+ color: #eee;
+ }
+ div.timeframe_calendar tbody td.today_selected {
+ background-color: #b64926;
+ }
+ div.timeframe_calendar tbody td.today_stuck {
+ background-color: #8e2800;
+ }
+ /* Post/pre-month */
+ div.timeframe_calendar tbody td.beyond {
+ background-color: #aaa;
+ background-image: none;
+ color: #ccc;
+ }
+ div.timeframe_calendar tbody td.beyond_selected {
+ background-color: #999;
+ }
+ div.timeframe_calendar tbody td.beyond_stuck {
+ background-color: #888;
+ }
+
+ div.timeframe_calendar tbody td.unselectable {
+ color: #ccc;
+ cursor: default;
+ }
+ /* Clear button */
+ div.timeframe_calendar tbody td span.clear {
+ color: transparent;
+ display: block;
+ height: 0;
+ position: absolute;
+ width: 0;
+ }
+ div.timeframe_calendar tbody td span.clear span {
+ background-image: url(../images/closebox.png);
+ cursor: pointer;
+ display: block;
+ height: 30px;
+ left: -18px;
+ position: relative;
+ text-indent: -10000px;
+ top: -18px;
+ width: 30px;
+ }
+ div.timeframe_calendar tbody td span.clear span.active {
+ background-image: url(../images/closebox_selected.png);
+ }
Please sign in to comment.
Something went wrong with that request. Please try again.