diff options
Diffstat (limited to 'lib/dijit/themes/claro/Calendar.less')
| -rw-r--r-- | lib/dijit/themes/claro/Calendar.less | 273 |
1 files changed, 273 insertions, 0 deletions
diff --git a/lib/dijit/themes/claro/Calendar.less b/lib/dijit/themes/claro/Calendar.less new file mode 100644 index 000000000..ec6aa4696 --- /dev/null +++ b/lib/dijit/themes/claro/Calendar.less @@ -0,0 +1,273 @@ +/* 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; + background-color: @calendar-background-color; + background-image:url("images/calendarContainerImages.png"); + background-position:0 -448px; + background-repeat:repeat-x; + text-align:center; + padding:6px 5px 3px 5px; + .border-radius(4px); +} +.dj_ie6 .claro .dijitCalendar { + background-image:none; +} +.claro .dijitCalendar img { + border:none; +} +.claro .dijitCalendarHover, +.claro .dijitCalendarActive { + /* treat dijitCalenderActive 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("images/calendarArrows.png"); + background-repeat: no-repeat; +} +.dj_ie6 .claro .dijitCalendarIncrementControl { + background-image: url("images/calendarArrows8bit.png"); +} +.claro .dijitCalendarIncrease { + background-position:-18px 0; +} +.claro .dijitCalendarArrowHover .dijitCalendarDecrease { + background-position:-36px 0; +} +.claro .dijitCalendarArrowHover .dijitCalendarIncrease { + background-position:-55px 0; +} +.claro .dijitCalendarArrowActive .dijitCalendarDecrease { + background-position:-72px 0; +} +.claro .dijitCalendarArrowActive .dijitCalendarIncrease { + background-position:-91px 0; +} +.claro .dijitA11ySideArrow { + /* text +/- labels instead of arrow icons, for high contrast mode */ + display: none; +} + + +.claro .dijitDayLabels th { + padding:0 4px 0 4px; + font-weight:bold; + text-align:center; +} +.claro .dijitCalendarDayLabelTemplate { + padding-bottom:0; + text-align:center; + border-bottom:1px solid @border-color; + font-size:0.909em; + padding:0 3px 2px; +} +.claro .dijitCalendarDateTemplate { + text-align:center; + background-color:@calendar-currentmonth-background-color; + background-image:url("images/calendarContainerImages.png"); + background-position:0 0; + background-repeat:repeat-x; + 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; +} +.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; +} +.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{ + background-color:@hovered-background-color; + border:solid 1px @hovered-border-color; + color:@hovered-text-color; + .transition-duration(.2s); +} +.claro .dijitCalendarNextYearHover, +.claro .dijitCalendarPreviousYearHover { + 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 .dijitCalendarPreviousYearActive { + 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 { + background-image:url("images/calendarContainerImages.png"); + background-position:0 -300px; + 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 { + text-decoration:line-through; + + /* override hover effects above, hover and click on disabled date should have no effect */ + background-color: transparent; + border-width: 0; + padding: 4px 6px 4px 5px; + color: @disabled-text-color; +} + +/* 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 { + background-color: transparent; + background-image: none; + padding: 0 3px 0 2px; + border:solid 1px @border-color; + .box-shadow(0 0 0 rgba(0,0,0,0)); +} +.claro .dijitCalendar .dijitDropDownButtonHover .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 { + background-color: @hovered-background-color; + border-color: @hovered-border-color; + border-width:1px 0; + background-image: url("images/commonHighlight.png"); + background-repeat:repeat-x; +} |