Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Styled the calendar.

  • Loading branch information...
commit 22e1a785c77491a7cad1629ce67a600818f6fe54 1 parent a64ed28
Ryan Mudryk authored committed
View
2  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');
View
14 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,
View
BIN  themes/standard_theme/resources/img/calendar.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
74 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;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.