diff options
author | Andrew Dolgov <[email protected]> | 2011-11-08 20:40:44 +0400 |
---|---|---|
committer | Andrew Dolgov <[email protected]> | 2011-11-08 20:40:44 +0400 |
commit | 81bea17aefb26859f825b9293c7c99192874806e (patch) | |
tree | fb244408ca271affa2899adb634788802c9a89d8 /lib/dijit/themes/claro/Calendar.css | |
parent | 870a70e109ac9e80a88047044530de53d0404ec7 (diff) |
upgrade Dojo to 1.6.1
Diffstat (limited to 'lib/dijit/themes/claro/Calendar.css')
-rw-r--r-- | lib/dijit/themes/claro/Calendar.css | 370 |
1 files changed, 223 insertions, 147 deletions
diff --git a/lib/dijit/themes/claro/Calendar.css b/lib/dijit/themes/claro/Calendar.css index 3a3256ef0..ff8e64fa7 100644 --- a/lib/dijit/themes/claro/Calendar.css +++ b/lib/dijit/themes/claro/Calendar.css @@ -1,206 +1,282 @@ - +/* 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 + */ .claro .dijitCalendar { - border:solid 1px #b5bcc7; - background-color:#d4ebff; - background-image:url("images/calendarContainerImages.png"); - background-position:0px -448px; - background-repeat:repeat-x; - text-align:center; - padding:6px 5px 3px 5px; - -moz-border-radius:4px; - -webkit-border-radius:4px; + border: solid 1px #b5bcc7; + background-color: #cfe5fa; + background-image: url("images/calendarContainerImages.png"); + background-position: 0 -448px; + background-repeat: repeat-x; + text-align: center; + padding: 6px 5px 3px 5px; + -moz-border-radius: 4px; + border-radius: 4px; } .dj_ie6 .claro .dijitCalendar { - background-image:none; + background-image: none; } .claro .dijitCalendar img { - border:none; + border: none; } -.claro .dijitCalendarHover, -.claro .dijitCalendarActive { - background-color: #b7dcff; - border:solid 1px #769dc0; +.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: #abd6ff; + border: solid 1px #769dc0; } .claro .dijitCalendarMonthContainer th { - text-align:center; - padding-bottom:4px; - vertical-align:middle; -} -.claro .dijitCalendarMonthLabelSpacer { - display:none; + text-align: center; + padding-bottom: 4px; + vertical-align: middle; } .claro .dijitCalendarMonthLabel { - color:#000000; - font-size: 1.091em; - display: block; + color: #000000; + 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; + width: 18px; + height: 16px; + background-image: url("images/calendarArrows.png"); + background-repeat: no-repeat; } .dj_ie6 .claro .dijitCalendarIncrementControl { - background-image: url("images/calendarArrows8bit.png"); + background-image: url("images/calendarArrows8bit.png"); } .claro .dijitCalendarIncrease { - background-position:-18px 0px; + background-position: -18px 0; } .claro .dijitCalendarArrowHover .dijitCalendarDecrease { - background-position:-36px 0px; + background-position: -36px 0; } .claro .dijitCalendarArrowHover .dijitCalendarIncrease { - background-position:-55px 0px; + background-position: -55px 0; } .claro .dijitCalendarArrowActive .dijitCalendarDecrease { - background-position:-72px 0px; + background-position: -72px 0; } .claro .dijitCalendarArrowActive .dijitCalendarIncrease { - background-position:-91px 0px; + background-position: -91px 0; } .claro .dijitA11ySideArrow { - - display: none; + /* text +/- labels instead of arrow icons, for high contrast mode */ + + display: none; } .claro .dijitDayLabels th { - padding:0px 4px 0px 4px; - border-bottom:solid 1px #99b5cd; - font-weight:bold; - text-align:center; + padding: 0 4px 0 4px; + font-weight: bold; + text-align: center; } .claro .dijitCalendarDayLabelTemplate { - padding-bottom:0em; - text-align:center; - border-bottom:1px solid #99B5CD; - font-size:0.909em; - padding:0 3px 2px; + padding-bottom: 0; + text-align: center; + border-bottom: 1px solid #b5bcc7; + font-size: 0.909em; + padding: 0 3px 2px; } .claro .dijitCalendarDateTemplate { - text-align:center; - background-color:#fff; - background-image:url("images/calendarContainerImages.png"); - background-position:0px 0px; - background-repeat:repeat-x; - border-bottom: 1px solid #dadde1; - padding-top:0px; - font-size:0.909em; - font-family: Arial; - font-weight:bold; - letter-spacing:.05em; - text-align:center; + text-align: center; + background-color: #ffffff; + background-image: url("images/calendarContainerImages.png"); + background-position: 0 0; + background-repeat: repeat-x; + border-bottom: 1px solid #d3d3d3; + 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; + background-image: none; } -.claro .dijitCalendarPreviousMonth, -.claro .dijitCalendarNextMonth { - background-color:#ebf3f9; - background-image:none; - border-bottom:solid 1px #d2dae8; - color:#547da1; +.claro .dijitCalendarPreviousMonth, .claro .dijitCalendarNextMonth { + background-color: #e9f4fe; + background-image: none; + border-bottom: solid 1px #d3d3d3; + /* todo: redundant with above .dijitCalendarDateTemplate rule */ } .claro .dijitCalendarDateTemplate .dijitCalendarDateLabel { - text-decoration:none; - display:block; - padding:3px 5px 3px 4px; - border:solid 1px #fff; - color:#1e1e1e; - background-color:rgba(171,212,251,0); - -webkit-transition-property:background-color, border; - -webkit-transition-duration:.35s; -} -.claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel, -.claro .dijitCalendarNextMonth .dijitCalendarDateLabel{ - color:#547da1; - border-color:#ebf3f9; + text-decoration: none; + display: block; + padding: 3px 5px 3px 4px; + border: solid 1px #ffffff; + /* 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 */ + + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + transition-property: background-color, border; + -webkit-transition-duration: 0.35s; + -moz-transition-duration: 0.35s; + transition-duration: 0.35s; +} +.claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel, .claro .dijitCalendarNextMonth .dijitCalendarDateLabel { + color: #769dc0; + border-color: #e9f4fe; + /* intentionally matches background-color, no visible border until hover/selection */ + } .claro .dijitCalendarYearContainer { - vertical-align:middle; + vertical-align: middle; } .claro .dijitCalendarYearControl { - padding: 1px 2px 2px 2px; + padding: 1px 2px 2px 2px; } .claro .dijitCalendarYearLabel { - padding:2px 0px 0px 0px; - margin:0; + padding: 2px 0 0 0; + margin: 0; } .claro .dijitCalendarYearLabel span { - - vertical-align:middle; + /* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */ + + vertical-align: middle; } .claro .dijitCalendarSelectedYear { - padding:0px 3px; + padding: 0 3px; } -.claro .dijitCalendarNextYear, -.claro .dijitCalendarPreviousYear { - padding: 1px 6px 1px 6px; - font-size:0.909em; +.claro .dijitCalendarNextYear, .claro .dijitCalendarPreviousYear { + padding: 1px 6px 1px 6px; + font-size: 0.909em; } .claro .dijitCalendarSelectedYear { - font-size:1.091em; - color:#000; -} -.claro .dijitCalendarHoveredDate .dijitCalendarDateLabel{ - background-color:#abd4fb; - border:solid 1px #729dc2; - color:#000; - -webkit-transition-duration:.2s; -} -.claro .dijitCalendarNextYearHover, -.claro .dijitCalendarPreviousYearHover { - color:#000; - border:solid 1px #fefefe; - padding: 0px 5px 0px 5px; - background-color:#eaf4fe; -} -.claro .dijitCalendarNextYearActive, -.claro .dijitCalendarPreviousYearActive { - border: solid 1px #87b3d9; - padding: 0px 5px 0px 5px; - background-color:#90bde6; + font-size: 1.091em; + color: #000000; +} +/* End Normal Calendar Style */ +/* Hovered Calendar Style */ +.claro .dijitCalendarHoveredDate .dijitCalendarDateLabel { + background-color: #abd6ff; + border: solid 1px #769dc0; + color: #000000; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; +} +.claro .dijitCalendarNextYearHover, .claro .dijitCalendarPreviousYearHover { + color: #000000; + border: solid 1px #ffffff; + padding: 0 5px 0 5px; + /* reduced by 1 to make room for border */ + + background-color: #e9f4fe; +} +/* End Hovered Calendar Style */ +/* Active Calendar Style */ +.claro .dijitCalendarNextYearActive, .claro .dijitCalendarPreviousYearActive { + border: solid 1px #769dc0; + padding: 0 5px 0 5px; + /* reduced by 1 to make room for border */ + + background-color: #cfe5fa; } .claro .dijitCalendarActiveDate .dijitCalendarDateLabel { - background-image:url("images/calendarContainerImages.png"); - background-position:0px -300px; - background-color:#75b5f0; - border:solid 1px #fff; - -webkit-transition-duration:.1s; + background-image: url("images/calendarContainerImages.png"); + background-position: 0 -300px; + background-color: #7dbefa; + border: solid 1px #ffffff; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; } .dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel { - background-image:none; + background-image: none; } +/* End Active Calendar Style */ +/* Selected Calendar Style */ .claro .dijitCalendarSelectedDate .dijitCalendarDateLabel { - color:#000; - background-color:#e7f4ff; - border-color:#accfed; + color: #000000; + background-color: #abd6ff; + border-color: #769dc0; } +/* End Selected Calendar Style */ +/* Disabled Calendar Style*/ .claro .dijitCalendarDisabledDate .dijitCalendarDateLabel { - text-decoration:line-through; - - - background-color: transparent; - border-width: 0px; - padding: 4px 6px 4px 5px; - color: #547DA1; -} -.claro .dijitCalendarMonthContainer .dijitMenu{ - - top: 20px !important; - left: 0px; - border-color: #769dc0; - background-color: #fff; - text-align:center; - background-image: none; -} -.claro .dijitCalendarMonthContainer .dijitMenu .dijitCalendarMonthLabel{ - border-top: solid 1px #fff; - border-bottom: solid 1px #fff; - padding: 2px 20px; -} -.claro .dijitCalendarMonthContainer .dijitMenu .dijitMenuItemHover { - background-color: #abd6ff; - border-color: #769dc0; - border-width:1px 0px; - background-image: url("images/commonHighlight.png"); - background-repeat:repeat-x; + 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: #818181; +} +/* 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 #b5bcc7; + -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + box-shadow: 0 0 0 rgba(0, 0, 0, 0); +} +.claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode { + background-color: #e9f4fe; + border: solid 1px #ffffff; +} +/* Styling for month drop down list */ +.claro .dijitCalendarMonthMenu { + border-color: #769dc0; + background-color: #ffffff; + text-align: center; + background-image: none; +} +.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel { + border-top: solid 1px #ffffff; + /* intentionally invisible until hover */ + + border-bottom: solid 1px #ffffff; + padding: 2px 0; +} +.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover { + background-color: #abd6ff; + border-color: #769dc0; + border-width: 1px 0; + background-image: url("images/commonHighlight.png"); + background-repeat: repeat-x; } |