278 lines
9.3 KiB
Plaintext
278 lines
9.3 KiB
Plaintext
/* Calendar
|
|
*
|
|
* Styling Calendar mainly includes:
|
|
*
|
|
* 1. Calendar container
|
|
* .dijitCalendar - main container
|
|
* .dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active
|
|
*
|
|
* 2. Month
|
|
* .dijitCalendarMonthContainer
|
|
* .dijitCalendarMonthLabel
|
|
* .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month
|
|
* .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active
|
|
*
|
|
* 3. Date
|
|
* .dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S
|
|
* .dijitCalendarDateTemplate - date label wrapper
|
|
* .dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month
|
|
* .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date
|
|
* .dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date
|
|
* .dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active
|
|
*
|
|
* 4. Year
|
|
* .dijitCalendarYearContainer
|
|
* .dijitCalendarYearLabel
|
|
* .dijitCalendarPreviousYear /.dijitCalendarNextYear
|
|
* .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active
|
|
*
|
|
* 5. Dropdown Month Menu
|
|
* .dijitCalendarMonthMenu - menu container
|
|
* .dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item
|
|
* .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state
|
|
*/
|
|
|
|
@import "variables";
|
|
|
|
.claro .dijitCalendar {
|
|
border: solid 1px @border-color;
|
|
border-collapse: separate; // in case user CSS has set border-collapse: collapse for tables
|
|
.border-radius(4px);
|
|
|
|
// Background color and alpha-gradient
|
|
background-color: @calendar-background-color;
|
|
background-image: url("images/calendar.png"); // fallback for browsers that don't support CSS gradients
|
|
background-repeat: repeat-x; // so bottom of calendar isn't affected by gradient image repeating
|
|
.alpha-white-gradient(1, 0px, 0.4, 2px, 0, 100%);
|
|
|
|
text-align:center;
|
|
padding:6px 5px 3px 5px;
|
|
}
|
|
.dj_ie6 .claro .dijitCalendar {
|
|
background-image:none; // because on IE6 background-image overrides background-color
|
|
}
|
|
.claro .dijitCalendar img {
|
|
border:none;
|
|
}
|
|
.claro .dijitCalendarHover, .claro .dijitCalendar:hover,
|
|
.claro .dijitCalendarActive {
|
|
/* treat dijitCalendarActive like hover since there's
|
|
* no concept of clicking a Calendar as a whole (although you can click things inside the calendar)
|
|
*/
|
|
background-color: @hovered-background-color;
|
|
border:solid 1px @hovered-border-color;
|
|
}
|
|
.claro .dijitCalendarMonthContainer th {
|
|
text-align:center;
|
|
padding-bottom:4px;
|
|
vertical-align:middle;
|
|
}
|
|
.claro .dijitCalendarMonthLabel {
|
|
color: @text-color;
|
|
font-size: 1.091em;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
/* next/previous month arrows */
|
|
.claro .dijitCalendarIncrementControl {
|
|
width:18px;
|
|
height:16px;
|
|
background-image: url(@image-calendar-arrows);
|
|
background-repeat: no-repeat;
|
|
}
|
|
.dj_ie6 .claro .dijitCalendarIncrementControl {
|
|
background-image: url(@image-calendar-arrows-ie6);
|
|
}
|
|
.claro .dijitCalendarIncrease {
|
|
background-position:-18px 0;
|
|
}
|
|
.claro .dijitCalendarArrowHover .dijitCalendarDecrease,
|
|
.claro .dijitCalendarArrow:hover .dijitCalendarDecrease {
|
|
background-position:-36px 0;
|
|
}
|
|
.claro .dijitCalendarArrowHover .dijitCalendarIncrease,
|
|
.claro .dijitCalendarArrow:hover .dijitCalendarIncrease {
|
|
background-position:-55px 0;
|
|
}
|
|
.claro .dijitCalendarArrowActive .dijitCalendarDecrease,
|
|
.claro .dijitCalendarArrow:active .dijitCalendarDecrease {
|
|
background-position:-72px 0;
|
|
}
|
|
.claro .dijitCalendarArrowActive .dijitCalendarIncrease,
|
|
.claro .dijitCalendarArrow:active .dijitCalendarIncrease {
|
|
background-position:-91px 0;
|
|
}
|
|
.claro .dijitA11ySideArrow {
|
|
/* text +/- labels instead of arrow icons, for high contrast mode */
|
|
display: none;
|
|
}
|
|
|
|
.claro .dijitCalendarDayLabelTemplate {
|
|
padding-bottom:0;
|
|
text-align:center;
|
|
border-bottom:1px solid @border-color;
|
|
padding:0 3px 2px;
|
|
}
|
|
.claro .dijitCalendarDayLabel {
|
|
padding:0 4px 0 4px;
|
|
font-weight:bold;
|
|
font-size:0.909em;
|
|
text-align:center;
|
|
color: @text-color;
|
|
}
|
|
.claro .dijitCalendarDateTemplate {
|
|
text-align:center;
|
|
background-color:@calendar-currentmonth-background-color;
|
|
border-bottom: 1px solid @minor-border-color;
|
|
padding-top:0;
|
|
font-size:0.909em;
|
|
font-family: Arial;
|
|
font-weight:bold;
|
|
letter-spacing:.05em;
|
|
text-align:center;
|
|
color: @text-color;
|
|
}
|
|
.dj_ie6 .claro .dijitCalendarDateTemplate {
|
|
background-image: none;
|
|
}
|
|
.claro .dijitCalendarPreviousMonth,
|
|
.claro .dijitCalendarNextMonth {
|
|
background-color: @calendar-adjacentmonth-background-color;
|
|
background-image:none;
|
|
border-bottom:solid 1px @minor-border-color; /* todo: redundant with above .dijitCalendarDateTemplate rule */
|
|
}
|
|
.claro .dijitCalendarDateTemplate .dijitCalendarDateLabel {
|
|
text-decoration:none;
|
|
display:block;
|
|
padding:3px 5px 3px 4px;
|
|
border:solid 1px @calendar-currentmonth-background-color; /* intentionally matches background-color, no visible border until hover/selection */
|
|
background-color:rgba(171,212,251,0); /* transparent causes black-flash animation problem on webkit */
|
|
.transition-property(background-color, border);
|
|
.transition-duration(.35s);
|
|
}
|
|
.claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel,
|
|
.claro .dijitCalendarNextMonth .dijitCalendarDateLabel{
|
|
color: @calendar-adjacentmonth-text-color;
|
|
border-color: @calendar-adjacentmonth-background-color; /* intentionally matches background-color, no visible border until hover/selection */
|
|
}
|
|
|
|
.claro .dijitCalendarYearContainer {
|
|
vertical-align:middle;
|
|
}
|
|
.claro .dijitCalendarYearControl {
|
|
padding: 1px 2px 2px 2px;
|
|
}
|
|
.claro .dijitCalendarYearLabel {
|
|
padding: 2px 0 0 0;
|
|
margin: 0;
|
|
font-size: 1.17em;
|
|
}
|
|
.claro .dijitCalendarYearLabel span {
|
|
/* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */
|
|
vertical-align:middle;
|
|
}
|
|
.claro .dijitCalendarSelectedYear {
|
|
padding:0 3px;
|
|
}
|
|
.claro .dijitCalendarNextYear,
|
|
.claro .dijitCalendarPreviousYear {
|
|
padding: 1px 6px 1px 6px;
|
|
font-size:0.909em;
|
|
}
|
|
.claro .dijitCalendarSelectedYear {
|
|
font-size:1.091em;
|
|
color:@selected-text-color;
|
|
}
|
|
/* End Normal Calendar Style */
|
|
/* Hovered Calendar Style */
|
|
.claro .dijitCalendarHoveredDate .dijitCalendarDateLabel,
|
|
.claro .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel {
|
|
background-color:@hovered-background-color;
|
|
border:solid 1px @hovered-border-color;
|
|
color:@hovered-text-color;
|
|
.transition-duration(.2s);
|
|
}
|
|
.claro .dijitCalendarNextYearHover, .claro .dijitCalendarNextYear:hover,
|
|
.claro .dijitCalendarPreviousYearHover, .claro .dijitCalendarPreviousYear:hover {
|
|
color:@hovered-text-color;
|
|
border:solid 1px @calendar-button-hovered-border-color;
|
|
padding: 0 5px 0 5px; /* reduced by 1 to make room for border */
|
|
background-color: @calendar-button-hovered-background-color;
|
|
}
|
|
/* End Hovered Calendar Style */
|
|
/* Active Calendar Style */
|
|
.claro .dijitCalendarNextYearActive, .claro .dijitCalendarNextYear:active
|
|
.claro .dijitCalendarPreviousYearActive, .claro .dijitCalendarPreviousYear:active {
|
|
border: solid 1px @calendar-button-pressed-border-color;
|
|
padding: 0 5px 0 5px; /* reduced by 1 to make room for border */
|
|
background-color:@calendar-button-pressed-background-color;
|
|
}
|
|
.claro .dijitCalendarActiveDate .dijitCalendarDateLabel,
|
|
.claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel {
|
|
background-color: @calendar-date-pressed-background-color;
|
|
border:solid 1px @calendar-date-pressed-border-color;
|
|
.transition-duration(.1s);
|
|
}
|
|
.dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel {
|
|
background-image:none;
|
|
}
|
|
/* End Active Calendar Style */
|
|
/* Selected Calendar Style */
|
|
.claro .dijitCalendarSelectedDate .dijitCalendarDateLabel {
|
|
color:@selected-text-color;
|
|
background-color: @calendar-date-selected-background-color;
|
|
border-color: @calendar-date-selected-border-color;
|
|
}
|
|
/* End Selected Calendar Style */
|
|
/* Disabled Calendar Style*/
|
|
.claro .dijitCalendarDisabledDate .dijitCalendarDateLabel {
|
|
color: @disabled-text-color;
|
|
text-decoration:line-through;
|
|
}
|
|
|
|
/* End Disabled Calendar Style */
|
|
|
|
/* Styling for month DropDownButton */
|
|
|
|
.claro .dijitCalendar .dijitDropDownButton {
|
|
margin: 0;
|
|
}
|
|
.claro .dijitCalendar .dijitButtonText {
|
|
padding: 1px 0 3px;
|
|
margin-right:-4px;
|
|
}
|
|
.claro .dijitCalendar .dijitDropDownButton .dijitButtonNode {
|
|
padding: 0 3px 0 2px;
|
|
border:solid 1px @border-color;
|
|
.box-shadow(0 0 0 rgba(0,0,0,0));
|
|
|
|
// Override background settings from vanilla .dijitButtonNode. We want to inherit background of Calendar.
|
|
background-color: transparent;
|
|
background-image: none;
|
|
}
|
|
.claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode,
|
|
.claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode {
|
|
background-color: @calendar-button-hovered-background-color;
|
|
border:solid 1px @calendar-button-hovered-border-color;
|
|
}
|
|
|
|
/* Styling for month drop down list */
|
|
|
|
.claro .dijitCalendarMonthMenu {
|
|
border-color: @popup-border-color;
|
|
background-color: @menu-background-color;
|
|
text-align:center;
|
|
background-image: none;
|
|
}
|
|
.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel {
|
|
border-top: solid 1px @menu-background-color; /* intentionally invisible until hover */
|
|
border-bottom: solid 1px @menu-background-color;
|
|
padding: 2px 0;
|
|
}
|
|
.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover,
|
|
.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover {
|
|
border-color: @hovered-border-color;
|
|
border-width:1px 0;
|
|
.gradient-and-filter(@hovered-background-color, 70, 0);
|
|
}
|