/* 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-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 .dijitCalendar table { border-collapse: separate; // in case user CSS has set border-collapse: collapse for tables } .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 .dijitCalendarLite .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 .dijitCalendarMonthLabelActive { border-color: @hovered-border-color; border-width:1px 0; .gradient-and-filter(@hovered-background-color, 70, 0); }