Styled the calendar.

etgryphon · Mar 24, 2011 · 22e1a78 · 22e1a78
1 parent a64ed28
commit 22e1a78
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 38 deletions.
diff --git a/frameworks/calendar/views/calendar.js b/frameworks/calendar/views/calendar.js
@@ -59,7 +59,7 @@ SCUI.CalendarView = SC.View.extend({
                       .begin('div').addClass('body');
 
     for (var i = 0; i < 7; i++) {
-      context = context.begin('div').addClass('day header').text(weekdayStrings[i]).end();
+      context = context.begin('div').addClass('day name').text(weekdayStrings[i]).end();
     }
 
     context = context.begin('div').addClass('grid');

diff --git a/frameworks/calendar/views/datepicker.js b/frameworks/calendar/views/datepicker.js
@@ -99,17 +99,17 @@ SCUI.DatePickerView = SC.View.extend(
     hb = SC.none(hb) ? YES : hb;
     // Create the reference to the calendar
     this._calendar_popup = SC.PickerPane.create({
-      layout: cl || { width: 205, height: 255 },
+      classNames: ['scui-calendar'],
+      layout: cl || { width: 205, height: 244 },
       contentView: SC.View.design({
         childViews: 'calendar todayButton noneButton'.w(),
         calendar: SCUI.CalendarView.design({
-          classNames: ['calendar'],
-          layout: { left: 0, top: 0, height: 230, right: 0 },
+          layout: { left: 0, top: 0, bottom: 0, right: 0 },
           selectedDateBinding: SC.Binding.from('date', that)
         }),
         todayButton: SC.View.extend(SCUI.SimpleButton, {
-          classNames: ['scui-datepicker-today'],
-          layout: {left: 10, bottom: 5, width: 50, height: 18},
+          classNames: ['date-today'],
+          layout: {left: 11, bottom: 7, width: 50, height: 16 },
           target: this,
           action: 'selectToday',
           isVisible: hb,
@@ -120,8 +120,8 @@ SCUI.DatePickerView = SC.View.extend(
           }
         }),
         noneButton: SC.View.design( SCUI.SimpleButton, {
-          classNames: ['scui-datepicker-none'],
-          layout: {right: 10, bottom: 5, width: 50, height: 18},
+          classNames: ['date-none'],
+          layout: {right: 11, bottom: 7, width: 50, height: 16 },
           target: this,
           action: 'clearSelection',
           isVisible: hb,

diff --git a/themes/standard_theme/resources/img/calendar.png b/themes/standard_theme/resources/img/calendar.png
diff --git a/themes/standard_theme/resources/calendar.css → themes/standard_theme/resources/main.css b/themes/standard_theme/resources/calendar.css → themes/standard_theme/resources/main.css
@@ -1,21 +1,24 @@
 /* ==========================================================================
-*  Project:   StandardTheme Theme Styles
-*  Copyright: ©2011 My Company, Inc.
+*  Project: SCUI Standard Theme
+*  Note:    Place any styles you want to define in this file. You can also
+*           break your styles into multiple files. Just add them to your
+*           resources or .lrpoj directories to be included in the build.
 *  ==========================================================================
 */
 
-/* 
-  Place any styles you want to define in this file.  You can also break your
-  styles into multiple files.  Just add them to your resources or .lrpoj
-  directories to be included in the build.
-*/
-
-/* Core
+/* Calendar
 ---------------------------------------------- */
 
+/* Reset */
+
+.sc-pane.scui-calendar > .sc-view {
+  border: 0;
+  background: none;
+}
+
 /* Header */
 
-.sc-theme .calendar > .header {
+.scui-calendar .header {
   width: 203px;
   height: 31px;
   border: 1px solid #910009;
@@ -27,12 +30,11 @@
 	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
 	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
 	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
-	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f41c2f', endColorstr='#a5000a');
   background: -webkit-gradient(linear, left top, left bottom, from(#f41c2f), to(#a5000a));
   background: -moz-linear-gradient(top, #f41c2f, #a5000a);
 }
 
-.sc-theme .calendar .month {
+.scui-calendar .month {
   margin: 0 29px;
   color: #fff;
   font-size: 14px;
@@ -41,26 +43,36 @@
   text-shadow: 0 1px 0 rgba(0, 0, 0, .7);
 }
 
-.sc-theme .calendar .button {
+.scui-calendar .button {
   width: 9px;
   height: 10px;
   position: absolute;
   top: 12px;
+  background: static_url('img/calendar.png');
 }
 
-.sc-theme .calendar .previous {
+.scui-calendar .previous {
   left: 10px;
 }
 
-.sc-theme .calendar .next {
+.scui-calendar .previous.active {
+  background-position: 0 -10px;
+}
+
+.scui-calendar .next {
   right: 10px;
+  background-position: -9px 0;
+}
+
+.scui-calendar .active {
+  background-position: -9px -10px;
 }
 
 /* Body */
 
-.sc-theme .calendar .body {
+.scui-calendar .body {
   display: inline-block;
-  padding: 10px;
+  padding: 10px 10px 30px;
   border: 1px solid #a6a09c;
   border-top: 0;
   background: #f7f2ee;
@@ -69,14 +81,14 @@
 	border-radius: 0 0 4px 4px;
 }
 
-.sc-theme .calendar .grid {
+.scui-calendar .grid {
   width: 182px;
   overflow: hidden;
   border-top: 1px solid #c6c2be;
   border-left: 1px solid #c6c2be;
 }
 
-.sc-theme .calendar .day {
+.scui-calendar .day {
   width: 25px;
   height: 25px;
   float: left;
@@ -86,29 +98,28 @@
   text-align: center;
 }
 
-.sc-theme .calendar .day.header {
+.scui-calendar .day.name {
   height: 12px;
   border-color: transparent;
   font-size: 10px;
   line-height: 12px;
 }
 
-.sc-theme .calendar .day.present {
+.scui-calendar .day.present {
   color: #353535;
   text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
   background: #ededea;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f7', endColorstr='#e1e0dc');
   background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f7), to(#e1e0dc));
   background: -moz-linear-gradient(top, #f8f8f7, #e1e0dc);
 }
 
-.sc-theme .calendar .day.past {
+.scui-calendar .day.past {
   color: #aaa;
   text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
   background: #f6f6f6;
 }
 
-.sc-theme .calendar .day.today {
+.scui-calendar .day.today {
   color: #fff;
   text-shadow: 0 1px 0 rgba(0, 0, 0, .7);
   background: #a2a8ae;
@@ -117,16 +128,19 @@
 	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
 }
 
-.sc-theme .calendar .day.sel {
+.scui-calendar .day.sel {
   color: #fff;
   text-shadow: 0 1px 0 rgba(0, 0, 0, .7);
   background: #db0c10;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f50f0f', endColorstr='#bd0915');
   background: -webkit-gradient(linear, left top, left bottom, from(#f50f0f), to(#bd0915));
   background: -moz-linear-gradient(top, #f50f0f, #bd0915);
 }
 
-body {
-	width: 205px;
-	height: 255px;
-}
+.scui-calendar .date-today,
+.scui-calendar .date-none {
+  border: 1px solid #a6a09c;
+  font-size: 11px;
+  line-height: 16px;
+  text-align: center;
+  background: #fff;
+}