From 81bea17aefb26859f825b9293c7c99192874806e Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Tue, 8 Nov 2011 20:40:44 +0400 Subject: upgrade Dojo to 1.6.1 --- lib/dijit/themes/claro/Calendar.css | 370 +- lib/dijit/themes/claro/Calendar.less | 273 ++ lib/dijit/themes/claro/Calendar_rtl.css | 14 +- lib/dijit/themes/claro/Calendar_rtl.less | 19 + lib/dijit/themes/claro/ColorPalette.css | 45 +- lib/dijit/themes/claro/ColorPalette.less | 44 + lib/dijit/themes/claro/Common.css | 95 +- lib/dijit/themes/claro/Common.less | 76 + lib/dijit/themes/claro/Dialog.css | 265 +- lib/dijit/themes/claro/Dialog.less | 203 + lib/dijit/themes/claro/Dialog_rtl.css | 10 +- lib/dijit/themes/claro/Dialog_rtl.less | 13 + lib/dijit/themes/claro/Editor.css | 62 +- lib/dijit/themes/claro/Editor.less | 59 + lib/dijit/themes/claro/Editor_rtl.css | 6 +- lib/dijit/themes/claro/Editor_rtl.less | 9 + lib/dijit/themes/claro/InlineEditBox.css | 19 +- lib/dijit/themes/claro/InlineEditBox.less | 25 + lib/dijit/themes/claro/Menu.css | 235 +- lib/dijit/themes/claro/Menu.less | 188 + lib/dijit/themes/claro/Menu_rtl.css | 8 +- lib/dijit/themes/claro/Menu_rtl.less | 11 + lib/dijit/themes/claro/ProgressBar.css | 61 +- lib/dijit/themes/claro/ProgressBar.less | 56 + lib/dijit/themes/claro/README | 64 + lib/dijit/themes/claro/TimePicker.css | 164 +- lib/dijit/themes/claro/TimePicker.less | 124 + lib/dijit/themes/claro/TimePicker_rtl.css | 8 +- lib/dijit/themes/claro/TimePicker_rtl.less | 12 + lib/dijit/themes/claro/TitlePane.css | 79 +- lib/dijit/themes/claro/TitlePane.less | 74 + lib/dijit/themes/claro/TitlePane_rtl.css | 4 +- lib/dijit/themes/claro/TitlePane_rtl.less | 7 + lib/dijit/themes/claro/Toolbar.css | 233 +- lib/dijit/themes/claro/Toolbar.less | 157 + lib/dijit/themes/claro/Toolbar_rtl.css | 30 + lib/dijit/themes/claro/Toolbar_rtl.less | 32 + lib/dijit/themes/claro/Tree.css | 156 +- lib/dijit/themes/claro/Tree.less | 133 + lib/dijit/themes/claro/claro.css | 4715 +------------------- lib/dijit/themes/claro/claro_rtl.css | 396 +- lib/dijit/themes/claro/compile.js | 62 + lib/dijit/themes/claro/document.css | 118 +- lib/dijit/themes/claro/document.less | 45 + lib/dijit/themes/claro/form/Button.css | 185 +- lib/dijit/themes/claro/form/Button.less | 154 + lib/dijit/themes/claro/form/Button_rtl.css | 23 +- lib/dijit/themes/claro/form/Button_rtl.less | 16 + lib/dijit/themes/claro/form/Checkbox.css | 91 +- lib/dijit/themes/claro/form/Checkbox.less | 79 + lib/dijit/themes/claro/form/Common.css | 227 +- lib/dijit/themes/claro/form/Common.less | 194 + lib/dijit/themes/claro/form/Common_rtl.css | 11 +- lib/dijit/themes/claro/form/Common_rtl.less | 13 + lib/dijit/themes/claro/form/NumberSpinner.css | 160 +- lib/dijit/themes/claro/form/NumberSpinner.less | 150 + lib/dijit/themes/claro/form/RadioButton.css | 96 +- lib/dijit/themes/claro/form/RadioButton.less | 84 + lib/dijit/themes/claro/form/Select.css | 124 +- lib/dijit/themes/claro/form/Select.less | 124 + lib/dijit/themes/claro/form/Select_rtl.css | 4 +- lib/dijit/themes/claro/form/Select_rtl.less | 6 + lib/dijit/themes/claro/form/Slider.css | 422 +- lib/dijit/themes/claro/form/Slider.less | 362 ++ lib/dijit/themes/claro/form/Slider_rtl.css | 20 +- lib/dijit/themes/claro/form/Slider_rtl.less | 33 + lib/dijit/themes/claro/images/loading.gif | Bin 751 -> 0 bytes lib/dijit/themes/claro/images/tooltip.png | Bin 1941 -> 1818 bytes lib/dijit/themes/claro/images/tooltipGradient.png | Bin 0 -> 1030 bytes .../themes/claro/layout/AccordionContainer.css | 145 +- .../themes/claro/layout/AccordionContainer.less | 116 + lib/dijit/themes/claro/layout/BorderContainer.css | 130 +- lib/dijit/themes/claro/layout/BorderContainer.less | 128 + lib/dijit/themes/claro/layout/ContentPane.css | 39 +- lib/dijit/themes/claro/layout/ContentPane.less | 43 + lib/dijit/themes/claro/layout/TabContainer.css | 536 ++- lib/dijit/themes/claro/layout/TabContainer.less | 408 ++ lib/dijit/themes/claro/layout/TabContainer_rtl.css | 72 +- .../themes/claro/layout/TabContainer_rtl.less | 81 + lib/dijit/themes/claro/layout/images/tabBottom.png | Bin 753 -> 718 bytes lib/dijit/themes/claro/layout/images/tabTop.png | Bin 748 -> 721 bytes lib/dijit/themes/claro/variables.less | 189 + 82 files changed, 6418 insertions(+), 6826 deletions(-) create mode 100644 lib/dijit/themes/claro/Calendar.less create mode 100644 lib/dijit/themes/claro/Calendar_rtl.less create mode 100644 lib/dijit/themes/claro/ColorPalette.less create mode 100644 lib/dijit/themes/claro/Common.less create mode 100644 lib/dijit/themes/claro/Dialog.less create mode 100644 lib/dijit/themes/claro/Dialog_rtl.less create mode 100644 lib/dijit/themes/claro/Editor.less create mode 100644 lib/dijit/themes/claro/Editor_rtl.less create mode 100644 lib/dijit/themes/claro/InlineEditBox.less create mode 100644 lib/dijit/themes/claro/Menu.less create mode 100644 lib/dijit/themes/claro/Menu_rtl.less create mode 100644 lib/dijit/themes/claro/ProgressBar.less create mode 100644 lib/dijit/themes/claro/README create mode 100644 lib/dijit/themes/claro/TimePicker.less create mode 100644 lib/dijit/themes/claro/TimePicker_rtl.less create mode 100644 lib/dijit/themes/claro/TitlePane.less create mode 100644 lib/dijit/themes/claro/TitlePane_rtl.less create mode 100644 lib/dijit/themes/claro/Toolbar.less create mode 100644 lib/dijit/themes/claro/Toolbar_rtl.css create mode 100644 lib/dijit/themes/claro/Toolbar_rtl.less create mode 100644 lib/dijit/themes/claro/Tree.less create mode 100644 lib/dijit/themes/claro/compile.js create mode 100644 lib/dijit/themes/claro/document.less create mode 100644 lib/dijit/themes/claro/form/Button.less create mode 100644 lib/dijit/themes/claro/form/Button_rtl.less create mode 100644 lib/dijit/themes/claro/form/Checkbox.less create mode 100644 lib/dijit/themes/claro/form/Common.less create mode 100644 lib/dijit/themes/claro/form/Common_rtl.less create mode 100644 lib/dijit/themes/claro/form/NumberSpinner.less create mode 100644 lib/dijit/themes/claro/form/RadioButton.less create mode 100644 lib/dijit/themes/claro/form/Select.less create mode 100644 lib/dijit/themes/claro/form/Select_rtl.less create mode 100644 lib/dijit/themes/claro/form/Slider.less create mode 100644 lib/dijit/themes/claro/form/Slider_rtl.less delete mode 100644 lib/dijit/themes/claro/images/loading.gif create mode 100644 lib/dijit/themes/claro/images/tooltipGradient.png create mode 100644 lib/dijit/themes/claro/layout/AccordionContainer.less create mode 100644 lib/dijit/themes/claro/layout/BorderContainer.less create mode 100644 lib/dijit/themes/claro/layout/ContentPane.less create mode 100644 lib/dijit/themes/claro/layout/TabContainer.less create mode 100644 lib/dijit/themes/claro/layout/TabContainer_rtl.less create mode 100644 lib/dijit/themes/claro/variables.less (limited to 'lib/dijit/themes/claro') 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; } 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; +} diff --git a/lib/dijit/themes/claro/Calendar_rtl.css b/lib/dijit/themes/claro/Calendar_rtl.css index 0f35d60ef..5892a64bf 100644 --- a/lib/dijit/themes/claro/Calendar_rtl.css +++ b/lib/dijit/themes/claro/Calendar_rtl.css @@ -1,18 +1,18 @@ -.claro .dijitCalendarRtl .dijitCalendarIncrease{ - background-position: 0px 0px; +.claro .dijitCalendarRtl .dijitCalendarIncrease { + background-position: 0 0; } .claro .dijitCalendarRtl .dijitCalendarDecrease { - background-position: -18px 0px; + background-position: -18px 0; } .claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarIncrease { - background-position: -36px 0px; + background-position: -36px 0; } .claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarDecrease { - background-position: -55px 0px; + background-position: -55px 0; } .claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarIncrease { - background-position: -72px 0px; + background-position: -72px 0; } .claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarDecrease { - background-position: -91px 0px; + background-position: -91px 0; } diff --git a/lib/dijit/themes/claro/Calendar_rtl.less b/lib/dijit/themes/claro/Calendar_rtl.less new file mode 100644 index 000000000..713717bd7 --- /dev/null +++ b/lib/dijit/themes/claro/Calendar_rtl.less @@ -0,0 +1,19 @@ +.claro .dijitCalendarRtl .dijitCalendarIncrease{ + background-position: 0 0; +} +.claro .dijitCalendarRtl .dijitCalendarDecrease { + background-position: -18px 0; +} +.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarIncrease { + background-position: -36px 0; +} +.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarDecrease { + background-position: -55px 0; +} +.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarIncrease { + background-position: -72px 0; +} +.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarDecrease { + background-position: -91px 0; +} + diff --git a/lib/dijit/themes/claro/ColorPalette.css b/lib/dijit/themes/claro/ColorPalette.css index 87a25ae25..34d1c72b2 100644 --- a/lib/dijit/themes/claro/ColorPalette.css +++ b/lib/dijit/themes/claro/ColorPalette.css @@ -1,18 +1,41 @@ - +/* ColorPalette + * + * Styling of the ColorPalette consists of the following: + * + * 1. the whole color palette + * .dijitColorPalette - for outline, border, and background color of the whole color palette + * Note: outline does not work for IE + * + * 2. the color swatch + * .dijitColorPalette .dijitPaletteImg + * transparent (but clickable) node inside of each , overlaying the color swatch. + * displays border around a color swatch + * + * 3. hovered swatch + * .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg + * the hovered state of the color swatch - adds border + * + * 4. active and selected swatch + * .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg + * .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg + * adds border for active or selected state + */ .claro .dijitColorPalette { - outline: 1px solid #769dc0; - border: 1px solid #c0ccdf; - background:#fff; - -moz-border-radius: 0px; + border: 1px solid #b5bcc7; + background: #ffffff; + -moz-border-radius: 0; + border-radius: 0; } .claro .dijitColorPalette .dijitPaletteImg { - - border: 1px solid #cecece; + /* transparent (but clickable) node inside of each , overlaying the color swatch. + * displays border around a color swatch + * overrides border color in dijit.css */ + + border: 1px solid #d3d3d3; } .claro .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg { - border: 1px solid #000; + border: 1px solid #000000; } -.claro .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg, -.claro .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg { - border: 2px solid #000; +.claro .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg, .claro .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg { + border: 2px solid #000000; } diff --git a/lib/dijit/themes/claro/ColorPalette.less b/lib/dijit/themes/claro/ColorPalette.less new file mode 100644 index 000000000..e0327334d --- /dev/null +++ b/lib/dijit/themes/claro/ColorPalette.less @@ -0,0 +1,44 @@ +/* ColorPalette + * + * Styling of the ColorPalette consists of the following: + * + * 1. the whole color palette + * .dijitColorPalette - for outline, border, and background color of the whole color palette + * Note: outline does not work for IE + * + * 2. the color swatch + * .dijitColorPalette .dijitPaletteImg + * transparent (but clickable) node inside of each , overlaying the color swatch. + * displays border around a color swatch + * + * 3. hovered swatch + * .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg + * the hovered state of the color swatch - adds border + * + * 4. active and selected swatch + * .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg + * .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg + * adds border for active or selected state + */ + +@import "variables"; + +.claro .dijitColorPalette { + border: 1px solid @border-color; + background: @colorpalette-background-color; + .border-radius(0); +} + +.claro .dijitColorPalette .dijitPaletteImg { + /* transparent (but clickable) node inside of each , overlaying the color swatch. + * displays border around a color swatch + * overrides border color in dijit.css */ + border: 1px solid @minor-border-color; +} +.claro .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg { + border: 1px solid @swatch-hovered-border-color; +} +.claro .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg, +.claro .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg { + border: 2px solid @swatch-selected-border-color; +} diff --git a/lib/dijit/themes/claro/Common.css b/lib/dijit/themes/claro/Common.css index dd68ce14c..110b303e2 100644 --- a/lib/dijit/themes/claro/Common.css +++ b/lib/dijit/themes/claro/Common.css @@ -1,70 +1,75 @@ - +/* ========= Styling rules to affect widgets ========= */ .claro .dijitPopup { - box-shadow: 0px 1px 5px rgba(0,0,0,0.25); - -webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.25); - -moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.25); + -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); } .claro .dijitTooltipDialogPopup { - - box-shadow: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; + /* exception popups: do not use a shadow on these because they aren't rectangular */ + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } +/* The highlight is shown in the ComboBox menu. TODO: move to form/Common.less */ .claro .dijitComboBoxHighlightMatch { - background-color:#a5beda; + background-color: #abd6ff; } .claro .dijitFocusedLabel { - - outline: 1px dotted #666666; + /* for checkboxes or radio buttons, hatch border around the corresponding label, to indicate focus */ + + outline: 1px dotted #4a4a4a; } .claro .dijitContentPaneLoading { - background:url('images/loadingAnimation.gif') no-repeat left center; - padding-left:25px; + background: url('images/loadingAnimation.gif') no-repeat left center; + padding-left: 25px; } +/* .dijitContentPaneError icon renders in a dialog box with the error messsage when there is an error in a HREF url */ .claro .dijitContentPaneError { - background:url('../../icons/images/commonIconsObjActEnabled.png') no-repeat left center; - background-position: -496px; - no-repeat left center; - padding-left:25px; + background: url('../../icons/images/commonIconsObjActEnabled.png') no-repeat left center; + background-position: -496px; + padding-left: 25px; } -.claro .dojoDndItemBefore, -.claro .dojoDndItemAfter{ - border-top: 1px solid #769DC0; +/* Drag and Drop */ +.claro .dojoDndItemBefore, .claro .dojoDndItemAfter { + border-top: 1px solid #769dc0; } .claro .dojoDndItemOver { - cursor:pointer; - } + cursor: pointer; +} .claro table.dojoDndAvatar { - border: 1px solid #b5bcc7; - border-collapse: collapse; - background-color: #fff; - -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, .25); + border: 1px solid #b5bcc7; + border-collapse: collapse; + background-color: #ffffff; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } -.claro .dojoDndAvatarHeader td { - height: 20px; - padding-left:21px; +.claro .dojoDndAvatarHeader td { + height: 20px; + padding-left: 21px; } .claro.dojoDndMove .dojoDndAvatarHeader, .claro.dojoDndCopy .dojoDndAvatarHeader { - background-image: url(images/dnd.png); - background-repeat: no-repeat; - background-position:2px -122px; + background-image: url(images/dnd.png); + background-repeat: no-repeat; + background-position: 2px -122px; } .claro .dojoDndAvatarItem td { - padding: 5px; + padding: 5px; } -.claro.dojoDndMove .dojoDndAvatarHeader { - background-color: #f58383; - background-position:2px -103px; +.claro.dojoDndMove .dojoDndAvatarHeader { + background-color: #f58383; + background-position: 2px -103px; } -.claro.dojoDndCopy .dojoDndAvatarHeader { - background-color: #f58383; - background-position:2px -68px; +.claro.dojoDndCopy .dojoDndAvatarHeader { + background-color: #f58383; + background-position: 2px -68px; } -.claro.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader { - background-color: #97e68d; - background-position:2px -33px; +.claro.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader { + background-color: #97e68d; + background-position: 2px -33px; } -.claro.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader { - background-color: #97e68d; - background-position:2px 2px; +.claro.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader { + background-color: #97e68d; + background-position: 2px 2px; } diff --git a/lib/dijit/themes/claro/Common.less b/lib/dijit/themes/claro/Common.less new file mode 100644 index 000000000..872cf8913 --- /dev/null +++ b/lib/dijit/themes/claro/Common.less @@ -0,0 +1,76 @@ +/* ========= Styling rules to affect widgets ========= */ + +@import "variables"; + +.claro .dijitPopup { + .box-shadow(0 1px 5px rgba(0,0,0,0.25)); +} +.claro .dijitTooltipDialogPopup { + /* exception popups: do not use a shadow on these because they aren't rectangular */ + .box-shadow(none); +} + +/* The highlight is shown in the ComboBox menu. TODO: move to form/Common.less */ +.claro .dijitComboBoxHighlightMatch { + background-color: @select-matchedtext-background-color; +} + +.claro .dijitFocusedLabel { + /* for checkboxes or radio buttons, hatch border around the corresponding label, to indicate focus */ + outline: 1px dotted @focus-outline-color; +} + +.claro .dijitContentPaneLoading { + background:url('images/loadingAnimation.gif') no-repeat left center; + padding-left:25px; +} + +/* .dijitContentPaneError icon renders in a dialog box with the error messsage when there is an error in a HREF url */ +.claro .dijitContentPaneError { + background:url('../../icons/images/commonIconsObjActEnabled.png') no-repeat left center; + background-position: -496px; + padding-left:25px; +} + +/* Drag and Drop */ +.claro .dojoDndItemBefore, +.claro .dojoDndItemAfter{ + border-top: 1px solid @dnd-dropseparator-color; +} +.claro .dojoDndItemOver { + cursor:pointer; + } +.claro table.dojoDndAvatar { + border: 1px solid @border-color; + border-collapse: collapse; + background-color: @dnd-avatar-background-color; + .box-shadow(0 1px 3px rgba(0, 0, 0, .25)); +} +.claro .dojoDndAvatarHeader td { + height: 20px; + padding-left:21px; +} +.claro.dojoDndMove .dojoDndAvatarHeader, .claro.dojoDndCopy .dojoDndAvatarHeader { + background-image: url(images/dnd.png); + background-repeat: no-repeat; + background-position:2px -122px; +} +.claro .dojoDndAvatarItem td { + padding: 5px; +} +.claro.dojoDndMove .dojoDndAvatarHeader { + background-color: @dnd-avatar-header-background-color; + background-position:2px -103px; +} +.claro.dojoDndCopy .dojoDndAvatarHeader { + background-color: @dnd-avatar-header-background-color; + background-position:2px -68px; +} +.claro.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader { + background-color: @dnd-avatar-candrop-header-background-color; + background-position:2px -33px; +} +.claro.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader { + background-color: @dnd-avatar-candrop-header-background-color; + background-position:2px 2px; +} diff --git a/lib/dijit/themes/claro/Dialog.css b/lib/dijit/themes/claro/Dialog.css index 10b513485..119900eca 100644 --- a/lib/dijit/themes/claro/Dialog.css +++ b/lib/dijit/themes/claro/Dialog.css @@ -1,162 +1,203 @@ - +/* Dialog + * + * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog + * + * Dialog: + * 1. Dialog (default styling): + * .dijitDialog - styles for dialog's bounding box + * + * 2. Dialog title + * .dijitDialogTitleBar - styles for the title container at the top of dialog + * .dijitDialogTitle - the text container in dialog title + * + * 3. Dialog content + * .dijitDialogPaneContent - main container for content area and action bar + * .dijitDialogPaneContentArea - styles for content container + * + * 4. Dialog action bar + * .dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content + * + * 5. Dialog underlay + * .dijitDialogUnderlay - div under the dialog which used for separate dialog and page content + * + * + * Tooltip & TooltipDialog: + * 1. tooltip content container: + * .dijitTooltipContainer - tooltip content container + * + * 2. tooltip connector: + * .dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right) + */ .claro .dijitDialog { - border: 1px solid #769dc0; - box-shadow:0px 1px 5px rgba(0,0,0,0.25); - -webkit-box-shadow:0px 1px 5px rgba(0,0,0,0.25); - -moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.25); -} + border: 1px solid #769dc0; + -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); +} .claro .dijitDialogPaneContent { - background: #fff repeat-x top left; - border-top: 1px solid #769dc0; - padding:10px 8px; - position: relative; + background: #ffffff repeat-x top left; + border-top: 1px solid #769dc0; + padding: 10px 8px; + position: relative; } .claro .dijitDialogPaneContentArea { - - margin: -10px -8px; - padding: 10px 8px; + /* trick to get action bar (gray bar at bottom with OK/cancel buttons) to span from + * left to right but still indent dialog content + */ + margin: -10px -8px; + padding: 10px 8px; } .claro .dijitDialogPaneActionBar { - - background-color: #f2f2f2; - padding: 3px 5px 2px 7px; - text-align: right; - border-top: 1px solid #cdcdcd; - margin: 10px -8px -10px; + /* gray bar at bottom of dialog with OK/Cancel buttons */ + + background-color: #efefef; + padding: 3px 5px 2px 7px; + text-align: right; + border-top: 1px solid #d3d3d3; + margin: 10px -8px -10px; } .claro .dijitDialogPaneActionBar .dijitButton { - float: none; + float: none; } .claro .dijitDialogTitleBar { - - border: 1px solid #fff; - border-top:none; - background-color: #abd6ff; - background-image: url("images/titlebar.png"); - background-repeat:repeat-x; - padding: 5px 7px 4px 7px; + /* outer container for the titlebar of the dialog */ + + border: 1px solid #ffffff; + border-top: none; + background-color: #abd6ff; + background-image: url("images/titlebar.png"); + background-repeat: repeat-x; + padding: 5px 7px 4px 7px; } .claro .dijitDialogTitle { - - padding: 0px 1px; - font-size:1.091em; + /* typography and styling of the dialog title */ + + padding: 0 1px; + font-size: 1.091em; } .claro .dijitDialogCloseIcon { - - background: url("images/dialogCloseIcon.png"); - background-repeat:no-repeat; - position: absolute; - right: 5px; - height: 15px; - width: 21px; + /* the default close icon for the dialog */ + + background: url("images/dialogCloseIcon.png"); + background-repeat: no-repeat; + position: absolute; + right: 5px; + height: 15px; + width: 21px; } .dj_ie6 .claro .dijitDialogCloseIcon { - background-image: url("images/dialogCloseIcon8bit.png"); + background-image: url("images/dialogCloseIcon8bit.png"); } .claro .dijitDialogCloseIconHover { - background-position:-21px; + background-position: -21px; } .claro .dijitDialogCloseIconActive { - background-position:-42px; + background-position: -42px; } -.claro .dijitTooltip, -.claro .dijitTooltipDialog { - - background: transparent; +/* Tooltip and TooltipDialog */ +.claro .dijitTooltip, .claro .dijitTooltipDialog { + /* the outermost dom node, holding the connector and container */ + + background: transparent; + /* make the area on the sides of the arrow transparent */ + } .dijitTooltipBelow { - - padding-top: 13px; - padding-left:3px; - padding-right:3px; + /* leave room for arrow above content */ + + padding-top: 13px; + padding-left: 3px; + padding-right: 3px; } .dijitTooltipAbove { - - padding-bottom: 13px; - padding-left:3px; - padding-right:3px; + /* leave room for arrow below content */ + + padding-bottom: 13px; + padding-left: 3px; + padding-right: 3px; } .claro .dijitTooltipContainer { - - background-color:#fff; - background-image:url("images/tooltip.png"); - background-repeat:repeat-x; - background-position:-575px 100%; - border:1px solid #769DC0; - padding:6px 8px; - border-radius: 4px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - box-shadow:0px 1px 3px rgba(0,0,0,0.25); - -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.25); - -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25); - font-size: 1em; -} + /* the part with the text */ + + background-color: #ffffff; + background-image: url("images/tooltipGradient.png"); + background-repeat: repeat-x; + background-position: bottom; + border: 1px solid #769dc0; + padding: 6px 8px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + font-size: 1em; +} .dj_ie6 .claro .dijitTooltipContainer { - background-image: none; + background-image: none; } .claro .dijitTooltipConnector { - - border: 0px; - z-index: 2; - background-image:url("images/tooltip.png"); - background-repeat:no-repeat; - width:16px; - height:14px; + /* the arrow piece */ + + border: 0; + z-index: 2; + background-image: url("images/tooltip.png"); + background-repeat: no-repeat; + width: 16px; + height: 14px; } .dj_ie6 .claro .dijitTooltipConnector { - background-image:url("images/tooltip8bit.png"); + background-image: url("images/tooltip8bit.png"); } .claro .dijitTooltipABRight .dijitTooltipConnector { - - left: auto !important; - right: 3px; + /* above or below tooltip, but the arrow appears on the right, + and the right edges of target and tooltip are aligned rather than the left */ + + left: auto !important; + right: 3px; } .claro .dijitTooltipBelow .dijitTooltipConnector { - - top: 0px; - left: 3px; - background-position:-31px 0%; - width:16px; - height:14px; + /* the arrow piece for tooltips below an element */ + + top: 0; + left: 3px; + background-position: -31px 0; + width: 16px; + height: 14px; } .claro .dijitTooltipAbove .dijitTooltipConnector { - - bottom: 0px; - left: 3px; - background-position:-15px 0%; - width:16px; - height:14px; + /* the arrow piece for tooltips above an element */ + + bottom: 0; + left: 3px; + background-position: -15px 0; + width: 16px; + height: 14px; } -.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector, -.dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector { - bottom: -1px; +.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector, .dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector { + bottom: -1px; } .claro .dijitTooltipLeft { - padding-right: 14px; -} -.dj_ie6 .claro .dijitTooltipLeft { - padding-left: 15px; + padding-right: 14px; } .claro .dijitTooltipLeft .dijitTooltipConnector { - - right: 0px; - bottom: 3px; - background-position:0px 0%; - width:16px; - height:14px; + /* the arrow piece for tooltips to the left of an element, bottom borders aligned */ + + right: 0; + background-position: 0 0; + width: 16px; + height: 14px; } .claro .dijitTooltipRight { - padding-left: 14px; + padding-left: 14px; } .claro .dijitTooltipRight .dijitTooltipConnector { - - left: 0px; - bottom: 3px; - background-position:-48px 0%; - width:16px; - height:14px; + /* the arrow piece for tooltips to the right of an element, bottom borders aligned */ + + left: 0; + background-position: -48px 0; + width: 16px; + height: 14px; } .claro .dijitDialogUnderlay { - background: #fff; + background: #ffffff; } diff --git a/lib/dijit/themes/claro/Dialog.less b/lib/dijit/themes/claro/Dialog.less new file mode 100644 index 000000000..ff5c1e656 --- /dev/null +++ b/lib/dijit/themes/claro/Dialog.less @@ -0,0 +1,203 @@ +/* Dialog + * + * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog + * + * Dialog: + * 1. Dialog (default styling): + * .dijitDialog - styles for dialog's bounding box + * + * 2. Dialog title + * .dijitDialogTitleBar - styles for the title container at the top of dialog + * .dijitDialogTitle - the text container in dialog title + * + * 3. Dialog content + * .dijitDialogPaneContent - main container for content area and action bar + * .dijitDialogPaneContentArea - styles for content container + * + * 4. Dialog action bar + * .dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content + * + * 5. Dialog underlay + * .dijitDialogUnderlay - div under the dialog which used for separate dialog and page content + * + * + * Tooltip & TooltipDialog: + * 1. tooltip content container: + * .dijitTooltipContainer - tooltip content container + * + * 2. tooltip connector: + * .dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right) + */ + +@import "variables"; + +.claro .dijitDialog { + border: 1px solid @popup-border-color; + .box-shadow(0 1px 5px rgba(0,0,0,0.25)); +} + +.claro .dijitDialogPaneContent { + background: @pane-background-color repeat-x top left; + border-top: 1px solid @popup-border-color; + padding:10px 8px; + position: relative; +} + +.claro .dijitDialogPaneContentArea { + /* trick to get action bar (gray bar at bottom with OK/cancel buttons) to span from + * left to right but still indent dialog content + */ + margin: -10px -8px; + padding: 10px 8px; +} + +.claro .dijitDialogPaneActionBar { + /* gray bar at bottom of dialog with OK/Cancel buttons */ + background-color: @bar-background-color; + padding: 3px 5px 2px 7px; + text-align: right; + border-top: 1px solid @minor-border-color; + margin: 10px -8px -10px; +} +.claro .dijitDialogPaneActionBar .dijitButton { + float: none; +} + +.claro .dijitDialogTitleBar { + /* outer container for the titlebar of the dialog */ + border: 1px solid @dialog-titlebar-border-color; + border-top:none; + background-color: @dialog-titlebar-background-color; + background-image: url("images/titlebar.png"); + background-repeat:repeat-x; + padding: 5px 7px 4px 7px; +} + +.claro .dijitDialogTitle { + /* typography and styling of the dialog title */ + padding: 0 1px; + font-size:1.091em; +} + +.claro .dijitDialogCloseIcon { + /* the default close icon for the dialog */ + background: url("images/dialogCloseIcon.png"); + background-repeat:no-repeat; + position: absolute; + right: 5px; + height: 15px; + width: 21px; +} +.dj_ie6 .claro .dijitDialogCloseIcon { + background-image: url("images/dialogCloseIcon8bit.png"); +} +.claro .dijitDialogCloseIconHover { + background-position:-21px; +} +.claro .dijitDialogCloseIconActive { + background-position:-42px; +} + +/* Tooltip and TooltipDialog */ + +.claro .dijitTooltip, +.claro .dijitTooltipDialog { + /* the outermost dom node, holding the connector and container */ + background: transparent; /* make the area on the sides of the arrow transparent */ +} +.dijitTooltipBelow { + /* leave room for arrow above content */ + padding-top: 13px; + padding-left:3px; + padding-right:3px; +} + +.dijitTooltipAbove { + /* leave room for arrow below content */ + padding-bottom: 13px; + padding-left:3px; + padding-right:3px; +} + +.claro .dijitTooltipContainer { + /* the part with the text */ + background-color:@popup-background-color; + background-image:url("images/tooltipGradient.png"); + background-repeat:repeat-x; + background-position:bottom; + border:1px solid @popup-border-color; + padding:6px 8px; + .border-radius(4px); + .box-shadow(0 1px 3px rgba(0,0,0,0.25)); + font-size: 1em; +} + +.dj_ie6 .claro .dijitTooltipContainer { + background-image: none; +} +.claro .dijitTooltipConnector { + /* the arrow piece */ + border: 0; + z-index: 2; + background-image:url("images/tooltip.png"); + background-repeat:no-repeat; + width:16px; + height:14px; +} +.dj_ie6 .claro .dijitTooltipConnector { + background-image:url("images/tooltip8bit.png"); +} +.claro .dijitTooltipABRight .dijitTooltipConnector { + /* above or below tooltip, but the arrow appears on the right, + and the right edges of target and tooltip are aligned rather than the left */ + left: auto !important; + right: 3px; +} + +.claro .dijitTooltipBelow .dijitTooltipConnector { + /* the arrow piece for tooltips below an element */ + top: 0; + left: 3px; + background-position:-31px 0; + width:16px; + height:14px; +} + +.claro .dijitTooltipAbove .dijitTooltipConnector { + /* the arrow piece for tooltips above an element */ + bottom: 0; + left: 3px; + background-position:-15px 0; + width:16px; + height:14px; +} +.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector, +.dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector { + bottom: -1px; +} + +.claro .dijitTooltipLeft { + padding-right: 14px; +} +.claro .dijitTooltipLeft .dijitTooltipConnector { + /* the arrow piece for tooltips to the left of an element, bottom borders aligned */ + right: 0; + background-position:0 0; + width:16px; + height:14px; +} + +.claro .dijitTooltipRight { + padding-left: 14px; +} +.claro .dijitTooltipRight .dijitTooltipConnector { + /* the arrow piece for tooltips to the right of an element, bottom borders aligned */ + left: 0; + background-position:-48px 0; + width:16px; + height:14px; +} + +.claro .dijitDialogUnderlay { + background: @dialog-underlay-color; +} diff --git a/lib/dijit/themes/claro/Dialog_rtl.css b/lib/dijit/themes/claro/Dialog_rtl.css index 7bb72e75a..34930eb64 100644 --- a/lib/dijit/themes/claro/Dialog_rtl.css +++ b/lib/dijit/themes/claro/Dialog_rtl.css @@ -1,9 +1,9 @@ - +/* Dialog */ .claro .dijitDialogRtl .dijitDialogCloseIcon { - right: auto; - left: 5px; + right: auto; + left: 5px; } .claro .dijitDialogRtl .dijitDialogPaneActionBar { - text-align: left; - padding: 3px 7px 2px 5px; + text-align: left; + padding: 3px 7px 2px 5px; } diff --git a/lib/dijit/themes/claro/Dialog_rtl.less b/lib/dijit/themes/claro/Dialog_rtl.less new file mode 100644 index 000000000..452fe930b --- /dev/null +++ b/lib/dijit/themes/claro/Dialog_rtl.less @@ -0,0 +1,13 @@ +/* Dialog */ + +@import "variables"; + +.claro .dijitDialogRtl .dijitDialogCloseIcon { + right: auto; + left: 5px; +} + +.claro .dijitDialogRtl .dijitDialogPaneActionBar { + text-align: left; + padding: 3px 7px 2px 5px; +} diff --git a/lib/dijit/themes/claro/Editor.css b/lib/dijit/themes/claro/Editor.css index b9af7e798..641990a09 100644 --- a/lib/dijit/themes/claro/Editor.css +++ b/lib/dijit/themes/claro/Editor.css @@ -1,36 +1,50 @@ - -.claro .dijitEditorIFrameContainer{ - padding:3px 3px 1px 10px; +/* Editor + * + * Styling Editor means styling the Editor inside iframe container (dijitEditorIFrameContainer) + * + * 1. Editor iframe container (default styling): + * .dijitEditorIFrameContainer - normal state styles: background-color, border, padding + * + * 2. hovered Editor iframe container (ie, mouse hover on editor) + * .dijitEditorHover .dijitEditorIFrameContainer/dijitEditorIFrame - styles when mouse hover on the container + * + * 3. focused Editor iframe container (ie, mouse focus on the editor pane) + * .dijitEditorFocused .dijitEditorIFrameContainer/dijitEditorIFrame - styles when container focused + * + * 3. disabled Editor iframe container + * .dijitEditorDisabled - editor's inner iframe container disable status styles: background, border + */ +.claro .dijitEditorIFrameContainer { + padding: 3px 3px 1px 10px; } .claro .dijitEditorIFrame { - background-color: #fff; + background-color: #ffffff; } .claro .dijitEditor { - border: 1px solid #b5bcc7; + border: 1px solid #b5bcc7; } -.claro .dijitEditor .dijitEditorIFrameContainer{ - background-color: #fff; - background-image: url('form/images/textBox_back.png'); - background-repeat:repeat-x; +.claro .dijitEditor .dijitEditorIFrameContainer { + background-color: #ffffff; + background-image: url('form/images/textBox_back.png'); + background-repeat: repeat-x; } -.dj_ie6 .claro .dijitEditor .dijitEditorIFrameContainer{ - background-image: none; +.dj_ie6 .claro .dijitEditor .dijitEditorIFrameContainer { + background-image: none; } -.claro .dijitEditorHover .dijitEditorIFrameContainer, -.claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame{ - background-color: #eef7ff; +.claro .dijitEditorHover .dijitEditorIFrameContainer, .claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame { + background-color: #e9f4fe; } -.claro .dijitEditorFocused .dijitEditorIFrameContainer, -.claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame{ - - background-color: #fff; +.claro .dijitEditorFocused .dijitEditorIFrameContainer, .claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame { + /* TODO: contradicts rule above, which background-color do you want? */ + + background-color: #ffffff; } +/* Disabled */ .claro .dijitEditorDisabled { - border: 1px solid #d3d3d3; - color: #818181; + border: 1px solid #d3d3d3; + color: #818181; } -.claro .dijitDisabled .dijitEditorIFrame, -.claro .dijitDisabled .dijitEditorIFrameContainer { - background-color: #efefef; - background-image: none; +.claro .dijitDisabled .dijitEditorIFrame, .claro .dijitDisabled .dijitEditorIFrameContainer, .claro .dijitDisabled .dijitEditorIFrameContainer .dijitEditorIFrame { + background-color: #efefef; + background-image: none; } diff --git a/lib/dijit/themes/claro/Editor.less b/lib/dijit/themes/claro/Editor.less new file mode 100644 index 000000000..43e6d39ae --- /dev/null +++ b/lib/dijit/themes/claro/Editor.less @@ -0,0 +1,59 @@ +/* Editor + * + * Styling Editor means styling the Editor inside iframe container (dijitEditorIFrameContainer) + * + * 1. Editor iframe container (default styling): + * .dijitEditorIFrameContainer - normal state styles: background-color, border, padding + * + * 2. hovered Editor iframe container (ie, mouse hover on editor) + * .dijitEditorHover .dijitEditorIFrameContainer/dijitEditorIFrame - styles when mouse hover on the container + * + * 3. focused Editor iframe container (ie, mouse focus on the editor pane) + * .dijitEditorFocused .dijitEditorIFrameContainer/dijitEditorIFrame - styles when container focused + * + * 3. disabled Editor iframe container + * .dijitEditorDisabled - editor's inner iframe container disable status styles: background, border + */ + +@import "variables"; + +.claro .dijitEditorIFrameContainer{ + padding:3px 3px 1px 10px; +} +.claro .dijitEditorIFrame { + background-color: @textbox-background-color; +} +.claro .dijitEditor { + border: 1px solid @border-color; +} +.claro .dijitEditor .dijitEditorIFrameContainer{ + background-color: @textbox-background-color; + background-image: url('form/images/textBox_back.png'); + background-repeat:repeat-x; +} +.dj_ie6 .claro .dijitEditor .dijitEditorIFrameContainer{ + background-image: none; +} +.claro .dijitEditorHover .dijitEditorIFrameContainer, +.claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame{ + background-color: @textbox-hovered-background-color; +} +.claro .dijitEditorFocused .dijitEditorIFrameContainer, +.claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame{ + /* TODO: contradicts rule above, which background-color do you want? */ + background-color: @textbox-focused-background-color; +} + + +/* Disabled */ +.claro .dijitEditorDisabled { + border: 1px solid @disabled-border-color; + color: @disabled-text-color; +} + +.claro .dijitDisabled .dijitEditorIFrame, +.claro .dijitDisabled .dijitEditorIFrameContainer, +.claro .dijitDisabled .dijitEditorIFrameContainer .dijitEditorIFrame { + background-color: @textbox-disabled-background-color; + background-image: none; +} \ No newline at end of file diff --git a/lib/dijit/themes/claro/Editor_rtl.css b/lib/dijit/themes/claro/Editor_rtl.css index b09efaac8..f63355867 100644 --- a/lib/dijit/themes/claro/Editor_rtl.css +++ b/lib/dijit/themes/claro/Editor_rtl.css @@ -1,4 +1,4 @@ - -.claro .dijitEditorRtl .dijitEditorIFrameContainer{ - padding:3px 10px 1px 3px; +/* Editor */ +.claro .dijitEditorRtl .dijitEditorIFrameContainer { + padding: 3px 10px 1px 3px; } diff --git a/lib/dijit/themes/claro/Editor_rtl.less b/lib/dijit/themes/claro/Editor_rtl.less new file mode 100644 index 000000000..8ebc013d9 --- /dev/null +++ b/lib/dijit/themes/claro/Editor_rtl.less @@ -0,0 +1,9 @@ +/* Editor */ + +@import "variables"; + +.claro .dijitEditorRtl .dijitEditorIFrameContainer{ + padding:3px 10px 1px 3px; +} + + diff --git a/lib/dijit/themes/claro/InlineEditBox.css b/lib/dijit/themes/claro/InlineEditBox.css index b92c24e97..e6058f780 100644 --- a/lib/dijit/themes/claro/InlineEditBox.css +++ b/lib/dijit/themes/claro/InlineEditBox.css @@ -1,11 +1,20 @@ - +/* InlineEditBox + * + * Styling InlineEditBox mainly includes: + * + * 1. Normal state + * .dijitInlineEditBoxDisplayMode - for border + * + * 2. Hover state + * .dijitInlineEditBoxDisplayModeHover - for border and background color + */ .claro .dijitInlineEditBoxDisplayMode { - border: 1px solid transparent; + border: 1px solid transparent; } .claro .dijitInlineEditBoxDisplayModeHover { - background-color: #e2f1ff; - border: solid 1px #769dc0; + background-color: #e9f4fe; + border: solid 1px #769dc0; } .dj_ie6 .claro .dijitInlineEditBoxDisplayMode { - border: none; + border: none; } diff --git a/lib/dijit/themes/claro/InlineEditBox.less b/lib/dijit/themes/claro/InlineEditBox.less new file mode 100644 index 000000000..a7162be1b --- /dev/null +++ b/lib/dijit/themes/claro/InlineEditBox.less @@ -0,0 +1,25 @@ +/* InlineEditBox + * + * Styling InlineEditBox mainly includes: + * + * 1. Normal state + * .dijitInlineEditBoxDisplayMode - for border + * + * 2. Hover state + * .dijitInlineEditBoxDisplayModeHover - for border and background color + */ + +@import "variables"; + +.claro .dijitInlineEditBoxDisplayMode { + border: 1px solid transparent; +} + +.claro .dijitInlineEditBoxDisplayModeHover { + background-color: @textbox-hovered-background-color; + border: solid 1px @hovered-border-color; +} + +.dj_ie6 .claro .dijitInlineEditBoxDisplayMode { + border: none; +} diff --git a/lib/dijit/themes/claro/Menu.css b/lib/dijit/themes/claro/Menu.css index 4bb0be6e0..c55176d54 100644 --- a/lib/dijit/themes/claro/Menu.css +++ b/lib/dijit/themes/claro/Menu.css @@ -1,143 +1,184 @@ +/* Menu +There are three areas of styling for the Menu: + + 1. The menu + There are three types of menus: + i)Context Menu + ii)Drop down Menu + iii) Navigation Menu + All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border + .dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect + .dijitMenuTable - for padding - also affects Select widget + + 2. The menu bar + .dijitMenuBar - for border, margins, padding, background-color of the menu bar + .dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) + + 3. Menu items - items in the menu. + .dijitMenuItem - for color + .dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected + .dijitMenuItemActive - for bacgkround-color of an active (mousedown) menu item + td.dijitMenuItemIconCell - for padding around a menu item's icon + td.dijitMenuItemLabel - for padding around a menu item's label + .dijitMenuSeparatorTop - for border, top border, of the separator + .dijitMenuSeparatorBottom - for bottom margin of the separator + + Styles specific to ComboBox and FilteringSelect widgets: + .dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu + .dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu + +*/ .claro .dijitMenuBar { - border: 1px solid #b5bcc7; - margin: 0px; - padding: 0px; - background-color: #e6e6e7; - background-image: url("images/commonHighlight.png"); - background-position:0px 0px; - background-repeat:repeat-x; + border: 1px solid #b5bcc7; + margin: 0; + padding: 0; + background-color: #efefef; + background-image: url("images/commonHighlight.png"); + background-position: 0 0; + background-repeat: repeat-x; } .dj_ie6 .claro .dijitMenuBar { - background-image:none; + background-image: none; } .claro .dijitMenu { - background-repeat:repeat-y; - background-color:#fff; - border: 1px solid #769dc0; - - margin: -1px 0; -} -.claro .dijitMenuBar .dijitMenuItem { - padding: 6px 10px 7px; - background-position:0px 100px; - color:#4a4a4a; - margin:-1px; -} + background-repeat: repeat-y; + background-color: #ffffff; + border: 1px solid #769dc0; + /* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */ + + margin: -1px 0; +} +.dj_ie6 .claro .dijitMenu { + margin: 0; + /* above -1px makes top/bottom borders disappear on IE6 */ + +} +.claro .dijitMenuBar .dijitMenuItem { + padding: 6px 10px 7px; + background-position: 0 100px; + color: #4a4a4a; + margin: -1px; +} .claro .dijitMenuItem { - background-image: url("images/menuHighlight.png"); - background-position:0px -40px; - background-repeat:repeat-x; + background-image: url("images/menuHighlight.png"); + background-position: 0 -40px; + background-repeat: repeat-x; } +/* this prevents jiggling upon hover of a menu item */ .claro .dijitMenuTable { - border-collapse:separate; - border-spacing:0 0; - padding:0px; -} -.claro .dijitMenuItem td{ - padding:1px; -} -.claro .dijitMenuPassive .dijitMenuItemHover, -.claro .dijitMenuPassive .dijitMenuItemSelected { - background-color: #abd6ff; - border:solid 1px #769dc0; - background-position:0px 0px; - color:#000; - padding: 5px 9px 6px; -} -.claro .dijitMenuPassive .dijitMenuItemActive{ - background-position:0px -177px; -} -.dj_ie6 .claro .dijitMenuItem, -.dj_ie6 .claro .dijitMenuPassive .dijitMenuItem { - background-image: none; -} -.claro .dijitMenuActive .dijitMenuItemHover, -.claro .dijitMenuActive .dijitMenuItemSelected { - border:solid 1px #769dc0; - padding: 5px 9px 6px; - background-color: #9dcfff; - background-position:0px 0px; - color:#000; + border-collapse: separate; + border-spacing: 0 0; + padding: 0; +} +.claro .dijitMenuItem td { + padding: 1px; +} +/* hover over a MenuBarItem */ +.claro .dijitMenuPassive .dijitMenuItemHover, .claro .dijitMenuPassive .dijitMenuItemSelected { + background-color: #abd6ff; + border: solid 1px #769dc0; + background-position: 0 0; + color: #000000; + padding: 5px 9px 6px; +} +.claro .dijitMenuPassive .dijitMenuItemActive { + background-position: 0 -177px; +} +.dj_ie6 .claro .dijitMenuItem, .dj_ie6 .claro .dijitMenuPassive .dijitMenuItem { + background-image: none; +} +/* MenuBarItem that has been selected and menu drops down from it */ +.claro .dijitMenuActive .dijitMenuItemHover, .claro .dijitMenuActive .dijitMenuItemSelected { + border: solid 1px #769dc0; + padding: 5px 9px 6px; + background-color: #abd6ff; + background-position: 0 0; + color: #000000; } .dj_ie .claro .dijitMenuActive .dijitMenuItemHover, .dj_ie .claro .dijitMenuActive .dijitMenuItemSelected, .dj_ie .claro .dijitMenuPassive .dijitMenuItemHover, .dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected { - padding-top: 6px; - padding-bottom: 5px; - margin-top: -3px; + padding-top: 6px; + padding-bottom: 5px; + margin-top: -3px; } -.claro .dijitMenuActive .dijitMenuItemActive{ - background-color: #7dbefa; - background-position:0px -177px; +.claro .dijitMenuActive .dijitMenuItemActive { + background-color: #7dbefa; + background-position: 0 -177px; } .claro .dijitMenuItemActive { - background-position:0px -177px; + background-position: 0 -177px; } .claro td.dijitMenuItemIconCell { - padding: 2px; - margin: 0px 0px 0px 4px; + padding: 2px; + margin: 0 0 0 4px; } .claro td.dijitMenuItemLabel { - padding-top: 5px; - padding-bottom: 5px; + padding-top: 5px; + padding-bottom: 5px; } .claro .dijitMenuExpand { - width: 7px; - height: 7px; - background-image: url('images/spriteArrows.png'); - background-position: -14px 0px; - margin-right:3px; + width: 7px; + height: 7px; + background-image: url('images/spriteArrows.png'); + background-position: -14px 0; + margin-right: 3px; } .claro .dijitMenuItemDisabled .dijitMenuItemIconCell { - opacity:1; + opacity: 1; } .claro .dijitMenuSeparatorTop { - height: auto; - margin-top:1px; - border-bottom: 1px solid #b5bcc7 + height: auto; + margin-top: 1px; + /* prevents spacing above/below separator */ + + border-bottom: 1px solid #b5bcc7; } -.claro .dijitMenuSeparatorBottom{ - height: auto; - margin-bottom:1px; +.claro .dijitMenuSeparatorBottom { + height: auto; + margin-bottom: 1px; } +/* the checked menu item */ .claro .dijitCheckedMenuItemIconChar { - display: none; + display: none; } .claro .dijitCheckedMenuItemIcon { - background-image: url('form/images/checkboxRadioButtonStates.png'); - background-repeat:no-repeat; - background-position: -15px 50%; - width:15px; - height:16px; + background-image: url('form/images/checkboxRadioButtonStates.png'); + background-repeat: no-repeat; + background-position: -15px 50%; + width: 15px; + height: 16px; } .dj_ie6 .claro .dijitCheckedMenuItemIcon { - background-image: url('form/images/checkboxAndRadioButtons_IE6.png'); + background-image: url('form/images/checkboxAndRadioButtons_IE6.png'); } .claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon { - background-position: 0 50%; + background-position: 0 50%; } +/*ComboBox Menu*/ .claro .dijitComboBoxMenu { - margin-left:0px; - background-image: none; + margin-left: 0; + background-image: none; } -.claro .dijitComboBoxMenu .dijitMenuItem{ - padding:2px 0px; - text-indent:6px; - border-width:1px 0px 1px 0px; - border-style:solid; - border-color:#fff; +.claro .dijitComboBoxMenu .dijitMenuItem { + padding: 2px; + border-width: 1px 0 1px 0; + border-style: solid; + border-color: #ffffff; } .claro .dijitComboBoxMenu .dijitMenuItemSelected { - color:#000; - border-color:#768dc0; - background-color:#abd6ff; + color: #000000; + border-color: #769dc0; + background-color: #abd6ff; } .claro .dijitComboBoxMenuActive .dijitMenuItemSelected { - background-position:0px -177px; - background-color:#7dbefa; + background-position: 0 -177px; + background-color: #7dbefa; + /* TODO: why is this a different color than normal .dijitMenuItemSelected? */ + } .claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton { - font-style: italic; + font-style: italic; } diff --git a/lib/dijit/themes/claro/Menu.less b/lib/dijit/themes/claro/Menu.less new file mode 100644 index 000000000..1528df40b --- /dev/null +++ b/lib/dijit/themes/claro/Menu.less @@ -0,0 +1,188 @@ +/* Menu + +There are three areas of styling for the Menu: + + 1. The menu + There are three types of menus: + i)Context Menu + ii)Drop down Menu + iii) Navigation Menu + All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border + .dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect + .dijitMenuTable - for padding - also affects Select widget + + 2. The menu bar + .dijitMenuBar - for border, margins, padding, background-color of the menu bar + .dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) + + 3. Menu items - items in the menu. + .dijitMenuItem - for color + .dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected + .dijitMenuItemActive - for bacgkround-color of an active (mousedown) menu item + td.dijitMenuItemIconCell - for padding around a menu item's icon + td.dijitMenuItemLabel - for padding around a menu item's label + .dijitMenuSeparatorTop - for border, top border, of the separator + .dijitMenuSeparatorBottom - for bottom margin of the separator + + Styles specific to ComboBox and FilteringSelect widgets: + .dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu + .dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu + +*/ + +@import "variables"; + +.claro .dijitMenuBar { + border: 1px solid @border-color; + margin: 0; + padding: 0; + background-color: @bar-background-color; + background-image: url("images/commonHighlight.png"); + background-position:0 0; + background-repeat:repeat-x; +} +.dj_ie6 .claro .dijitMenuBar { + background-image:none; +} +.claro .dijitMenu { + background-repeat:repeat-y; + background-color:@menu-background-color; + border: 1px solid @popup-border-color; + + /* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */ + margin: -1px 0; +} +.dj_ie6 .claro .dijitMenu { + margin: 0; /* above -1px makes top/bottom borders disappear on IE6 */ +} +.claro .dijitMenuBar .dijitMenuItem { + padding: 6px 10px 7px; + background-position:0 100px; + color:@unselected-text-color; + margin:-1px; +} +.claro .dijitMenuItem { + background-image: url("images/menuHighlight.png"); + background-position:0 -40px; + background-repeat:repeat-x; +} + +/* this prevents jiggling upon hover of a menu item */ +.claro .dijitMenuTable { + border-collapse:separate; + border-spacing:0 0; + padding:0; +} +.claro .dijitMenuItem td{ + padding:1px; +} +/* hover over a MenuBarItem */ +.claro .dijitMenuPassive .dijitMenuItemHover, +.claro .dijitMenuPassive .dijitMenuItemSelected { + background-color: @hovered-background-color; + border:solid 1px @hovered-border-color; + background-position:0 0; + color:@text-color; + padding: 5px 9px 6px; +} +.claro .dijitMenuPassive .dijitMenuItemActive{ + background-position:0 -177px; +} +.dj_ie6 .claro .dijitMenuItem, +.dj_ie6 .claro .dijitMenuPassive .dijitMenuItem { + background-image: none; +} + +/* MenuBarItem that has been selected and menu drops down from it */ +.claro .dijitMenuActive .dijitMenuItemHover, +.claro .dijitMenuActive .dijitMenuItemSelected { + border:solid 1px @hovered-border-color; + padding: 5px 9px 6px; + background-color: @hovered-background-color; + background-position:0 0; + color:@hovered-text-color; +} +.dj_ie .claro .dijitMenuActive .dijitMenuItemHover, +.dj_ie .claro .dijitMenuActive .dijitMenuItemSelected, +.dj_ie .claro .dijitMenuPassive .dijitMenuItemHover, +.dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected { + padding-top: 6px; + padding-bottom: 5px; + margin-top: -3px; +} +.claro .dijitMenuActive .dijitMenuItemActive{ + background-color: @pressed-background-color; + background-position:0 -177px; +} +.claro .dijitMenuItemActive { + background-position:0 -177px; +} +.claro td.dijitMenuItemIconCell { + padding: 2px; + margin: 0 0 0 4px; +} +.claro td.dijitMenuItemLabel { + padding-top: 5px; + padding-bottom: 5px; +} +.claro .dijitMenuExpand { + width: 7px; + height: 7px; + background-image: url('images/spriteArrows.png'); + background-position: -14px 0; + margin-right:3px; +} +.claro .dijitMenuItemDisabled .dijitMenuItemIconCell { + opacity:1; +} +.claro .dijitMenuSeparatorTop { + height: auto; + margin-top:1px; /* prevents spacing above/below separator */ + border-bottom: 1px solid @border-color +} +.claro .dijitMenuSeparatorBottom{ + height: auto; + margin-bottom:1px; +} +/* the checked menu item */ +.claro .dijitCheckedMenuItemIconChar { + display: none; +} +.claro .dijitCheckedMenuItemIcon { + background-image: url('form/images/checkboxRadioButtonStates.png'); + background-repeat:no-repeat; + background-position: -15px 50%; + width:15px; + height:16px; +} +.dj_ie6 .claro .dijitCheckedMenuItemIcon { + background-image: url('form/images/checkboxAndRadioButtons_IE6.png'); +} +.claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon { + background-position: 0 50%; +} + +/*ComboBox Menu*/ +.claro .dijitComboBoxMenu { + margin-left:0; + background-image: none; +} + +.claro .dijitComboBoxMenu .dijitMenuItem { + padding: @textbox-padding; // Make drop down menu text line up with text in . + border-width:1px 0 1px 0; + border-style:solid; + border-color: @select-dropdownitem-background-color; +} +.claro .dijitComboBoxMenu .dijitMenuItemSelected { + color:@selected-text-color; + border-color:@hovered-border-color; + background-color:@hovered-background-color; +} +.claro .dijitComboBoxMenuActive .dijitMenuItemSelected { + background-position:0 -177px; + background-color: @select-dropdownitem-hovered-background-color; /* TODO: why is this a different color than normal .dijitMenuItemSelected? */ +} +.claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton { + font-style: italic; +} diff --git a/lib/dijit/themes/claro/Menu_rtl.css b/lib/dijit/themes/claro/Menu_rtl.css index 6ba061bec..2b96cbae7 100644 --- a/lib/dijit/themes/claro/Menu_rtl.css +++ b/lib/dijit/themes/claro/Menu_rtl.css @@ -1,8 +1,8 @@ .claro .dijitMenuItemRtl .dijitMenuExpand { - background-position: -7px 0px; - margin-right: 0px; - margin-left: 3px; + background-position: -7px 0; + margin-right: 0; + margin-left: 3px; } .claro .dijitMenuItemRtl .dijitMenuItemIcon { - margin:0px 4px 0px 0px; + margin: 0 4px 0 0; } diff --git a/lib/dijit/themes/claro/Menu_rtl.less b/lib/dijit/themes/claro/Menu_rtl.less new file mode 100644 index 000000000..6f669f5fd --- /dev/null +++ b/lib/dijit/themes/claro/Menu_rtl.less @@ -0,0 +1,11 @@ +@import "variables"; + +.claro .dijitMenuItemRtl .dijitMenuExpand { + background-position: -7px 0; + margin-right: 0; + margin-left: 3px; +} + +.claro .dijitMenuItemRtl .dijitMenuItemIcon { + margin:0 4px 0 0; +} diff --git a/lib/dijit/themes/claro/ProgressBar.css b/lib/dijit/themes/claro/ProgressBar.css index 13e8f266f..c735e5c2f 100644 --- a/lib/dijit/themes/claro/ProgressBar.css +++ b/lib/dijit/themes/claro/ProgressBar.css @@ -1,28 +1,57 @@ - - +/* ProgressBar + * + * Styling of the ProgressBar consists of the following: + * + * 1. the base progress bar + * .dijitProgressBar - sets margins for the progress bar + * + * 2. the empty bar + * .dijitProgressBarEmpty - sets background img and color for bar or parts of bar that are not finished yet + * Also sets border color for whole bar + * + * 3. tile mode + * .dijitProgressBarTile + * inner container for finished portion when in 'tile' (image) mode + * + * 4. full bar mode + * .dijitProgressBarFull + * adds border to right side of the filled portion of bar + * + * 5. text for label of bar + * .dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts. + * + * 6. indeterminate mode + * .dijitProgressBarIndeterminate .dijitProgressBarTile + * sets animated gif for the progress bar in 'indeterminate' mode + */ .claro .dijitProgressBar { - margin:2px 0px 2px 0px; + margin: 2px 0 2px 0; } .claro .dijitProgressBarEmpty { - - background:#fff url("images/progressBarEmpty.png") repeat-none left; - border-color: #769dc0; + /* outer container and background of the bar that's not finished yet*/ + + background: #ffffff url("images/progressBarEmpty.png") repeat-none left; + border-color: #769dc0; } .claro .dijitProgressBarTile { - - background:#9dcfff url("images/progressBarFull.png") repeat-x top; + /* inner container for finished portion when in 'tile' (image) mode */ + + background: #abd6ff url("images/progressBarFull.png") repeat-x top; } .dj_ie6 .claro .dijitProgressBarTile { - background-image: none; -} + background-image: none; +} .claro .dijitProgressBarFull { - border-right:1px solid #769dc0; + border-right: 1px solid #769dc0; } .claro .dijitProgressBarLabel { - - color:#293a4b; + /* Set to a color that contrasts with both the "Empty" and "Full" parts. */ + + color: #000000; } .claro .dijitProgressBarIndeterminate .dijitProgressBarTile { - - background:#cad2de url("images/progressBarAnim.gif") repeat-x top; -} + /* use an animated gif for the progress bar in 'indeterminate' mode; + background-color won't appear unless user has turned off background images */ + + background: #efefef url("images/progressBarAnim.gif") repeat-x top; +} diff --git a/lib/dijit/themes/claro/ProgressBar.less b/lib/dijit/themes/claro/ProgressBar.less new file mode 100644 index 000000000..d361952ee --- /dev/null +++ b/lib/dijit/themes/claro/ProgressBar.less @@ -0,0 +1,56 @@ +/* ProgressBar + * + * Styling of the ProgressBar consists of the following: + * + * 1. the base progress bar + * .dijitProgressBar - sets margins for the progress bar + * + * 2. the empty bar + * .dijitProgressBarEmpty - sets background img and color for bar or parts of bar that are not finished yet + * Also sets border color for whole bar + * + * 3. tile mode + * .dijitProgressBarTile + * inner container for finished portion when in 'tile' (image) mode + * + * 4. full bar mode + * .dijitProgressBarFull + * adds border to right side of the filled portion of bar + * + * 5. text for label of bar + * .dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts. + * + * 6. indeterminate mode + * .dijitProgressBarIndeterminate .dijitProgressBarTile + * sets animated gif for the progress bar in 'indeterminate' mode + */ + + @import "variables"; + +.claro .dijitProgressBar { + margin:2px 0 2px 0; +} +.claro .dijitProgressBarEmpty { + /* outer container and background of the bar that's not finished yet*/ + background: @progressbar-empty-background-color url("images/progressBarEmpty.png") repeat-none left; + border-color: @progressbar-border-color; +} +.claro .dijitProgressBarTile { + /* inner container for finished portion when in 'tile' (image) mode */ + background: @progressbar-full-background-color url("images/progressBarFull.png") repeat-x top; +} +.dj_ie6 .claro .dijitProgressBarTile { + background-image: none; +} +.claro .dijitProgressBarFull { + border-right:1px solid @progressbar-border-color; +} +.claro .dijitProgressBarLabel { + /* Set to a color that contrasts with both the "Empty" and "Full" parts. */ + color: @progressbar-text-color; +} +.claro .dijitProgressBarIndeterminate .dijitProgressBarTile { + /* use an animated gif for the progress bar in 'indeterminate' mode; + background-color won't appear unless user has turned off background images */ + background: @bar-background-color url("images/progressBarAnim.gif") repeat-x top; +} \ No newline at end of file diff --git a/lib/dijit/themes/claro/README b/lib/dijit/themes/claro/README new file mode 100644 index 000000000..5ef4714ad --- /dev/null +++ b/lib/dijit/themes/claro/README @@ -0,0 +1,64 @@ +These are "less" files that compile into the CSS of claro. + +--------- +Installing and running on Windows: + +1. Install node: + a) Go to https://github.com/ajaxorg/node-builds, press download button, and select "download zip" + b) unzip the file into C:\ + +2. Install less: + + a) Go to https://github.com/cloudhead/less.js/archives/master, press download button, and select "download zip" + b) unzip the file into C:\ + +2. Add node and lessc environment variables: + + a) open Control Panel --> click System icon --> select Advanced tab --> click Environment variables button + b) press "edit" on path + c) depending on what directory you unzipped to and the exact filenames, you will add something like + + ;C:\ajaxorg-node-builds-0fcee7d\win32;C:\cloudhead-less.js-7fb09f\bin + + d) add new environment variable NODE_PATH with value like this (depending on exact download name): + + C:\cloudhead-less.js-7fb09f\lib + +4. To compile all the files: + + C:\> cd C:\myworkspace\dijit\themes\claro + C:\> node compile.js + +-------- +To install/run less version 2 on mac: + +1. Install Node.js + Download a built copy from https://github.com/ajaxorg/node-builds. + Alternately, o to http://nodejs.org/#download (./configure, make, make install). + +2. Download less from https://github.com/cloudhead/less.js/archives/master + +3. Edit .bash_profile etc. to add node to your path, and lessc to NODE_PATH: + + export PATH=$PATH:/opt/less/bin + export NODE_PATH=$NODE_PATH:/opt/less/lib + +To compile all the files: + + $ cd dijit/themes/claro + $ node compile.js + + +------- +Alternately, you can install less version 1, but I'd rather not use it for checked in files +since it breaks a part a lot of rules into multiple rules, causing spurious diffs. + +To install on a mac: + $ sudo gem install less + +On Windows or Linux, make sure you have ruby and ruby-gems installed first. +If you need help installing ruby please check out ruby-lang.org for more details. + +----- + +See http://lesscss.org/ and https://github.com/cloudhead/less.js/ for more information. diff --git a/lib/dijit/themes/claro/TimePicker.css b/lib/dijit/themes/claro/TimePicker.css index a5ddf9129..fb8bf5efa 100644 --- a/lib/dijit/themes/claro/TimePicker.css +++ b/lib/dijit/themes/claro/TimePicker.css @@ -1,102 +1,130 @@ - +/* Time Picker + * + * Styling the Time Picker consists of the following: + * + * 1. minor time values + * .dijitTimePickerTick - set text color, size, background color of minor values + * .dijitTimePickerTickHover - set hover style of minor time values + * dijitTimePickerTickSelected - set selected style of minor time values + * + * 2. major time values - 1:00, 2:00, times on the hour + * set text color, size, background color, left/right margins for "zoom" affect + * .dijitTimePickerMarkerHover - to set hover style of major time values + * .dijitTimePickerMarkerSelected - set selected style of major time values + * + * 3. up and down arrow buttons + * .dijitTimePicker .dijitButtonNode - background-color, border + * .dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state + * + * Other classes provide the fundamental structure of the TimePicker and should not be modified. + */ +/* override Button.css */ .claro .dijitTimePicker .dijitButtonNode { - padding: 0 0; - border-radius: 0; - -moz-border-radius: 0; - -webkit-border-radius: 0; -} -.claro .dijitTimePicker{ - border:1px #b5bcc7 solid; - border-top:none; - border-bottom:none; - background-color:#fff; -} -.claro .dijitTimePickerItem{ - - background-image: url("images/commonHighlight.png"); - background-position:0px -1px; - background-repeat:repeat-x; - border-top:solid 1px #b5bcc7; - border-bottom:solid 1px #b5bcc7; - margin-right:-1px; - margin-left:-1px; - margin-top:-1px; + padding: 0 0; + -moz-border-radius: 0; + border-radius: 0; +} +.claro .dijitTimePicker { + border: 1px #b5bcc7 solid; + border-top: none; + border-bottom: none; + background-color: #fff; + /* TODO: useless? Appears to be overridden by settings on individual elements */ + } +.claro .dijitTimePickerItem { + /* dijitTimePickerItem refers to both Tick's (minor values like 2:15, 2:30, 2:45) and Marker's (major values like 2PM, 3PM) */ + + background-image: url("images/commonHighlight.png"); + background-position: 0 -1px; + background-repeat: repeat-x; + border-top: solid 1px #b5bcc7; + border-bottom: solid 1px #b5bcc7; + margin-right: -1px; + margin-left: -1px; + margin-top: -1px; +} +/* to make up for lack of alpha transparency in IE6 */ .dj_ie6 .claro .dijitTimePickerItem { - background-image: none; + background-image: none; } .claro .dijitTimePickerTick { - - color:#7a7a7a; - background-color:#f2f2f2; - font-size:0.818em; + /* minor value */ + + color: #818181; + background-color: #efefef; + font-size: 0.818em; } .claro .dijitTimePickerMarker { - - color:#000; - background-color:#e3f2ff; - font-size: 1em; - white-space: nowrap; + /* major value - 1:00, 2:00, times on the hour */ + + background-color: #e9f4fe; + font-size: 1em; + white-space: nowrap; } .claro .dijitTimePickerTickHover, .claro .dijitTimePickerMarkerHover, .claro .dijitTimePickerMarkerSelected, .claro .dijitTimePickerTickSelected { - background-color: #83c0fa; - color:#000; - border:solid 1px #b5bcc7; - margin-left:-7px; - margin-right:-7px; + background-color: #7dbefa; + border: solid 1px #b5bcc7; + margin-left: -7px; + margin-right: -7px; + color: #000000; +} +.claro .dijitTimePickerMarkerSelected, .claro .dijitTimePickerTickSelected { + font-size: 1em; } -.claro .dijitTimePickerMarkerSelected, -.claro .dijitTimePickerTickSelected { - font-size: 1em; - } .dj_ie .claro .dijitTimePickerTickHover, .dj_ie .claro .dijitTimePickerMarkerHover, .dj_ie .claro .dijitTimePickerMarkerSelected, -.dj_ie .claro .dijitTimePickerTickSelected { - width: 114%; +.dj_ie .claro .dijitTimePickerTickSelected { + width: 114%; } .dj_ie6 .claro .dijitTimePickerTickHover, .dj_ie6 .claro .dijitTimePickerMarkerHover, .dj_ie6 .claro .dijitTimePickerMarkerSelected, -.dj_ie6 .claro .dijitTimePickerTickSelected { - position: relative; - zoom: 1; +.dj_ie6 .claro .dijitTimePickerTickSelected { + position: relative; + /* creates widening of element */ + zoom: 1; + /* creates widening of element */ + } .claro .dijitTimePickerTick .dijitTimePickerItemInner { - padding:1px; - margin:0px; + padding: 1px; + margin: 0; } .claro .dijitTimePicker .dijitButtonNode { - border-left:none; - border-right:none; - border-color:#b5bcc7; - background-color: #f6f7fa; - background-image: url("images/commonHighlight.png"); - background-position:0px -1px; - background-repeat:repeat-x; + border-left: none; + border-right: none; + border-color: #b5bcc7; + background-color: #efefef; + background-image: url("images/commonHighlight.png"); + background-position: 0 -1px; + background-repeat: repeat-x; } .dj_ie6 .claro .dijitTimePicker .dijitButtonNode { - background-image: none; + background-image: none; } -.claro .dijitTimePicker .dijitArrowButtonInner{ - height: 100%; - background-image: url("form/images/commonFormArrows.png"); - background-repeat: no-repeat; - background-position:-140px 45%; +.claro .dijitTimePicker .dijitArrowButtonInner { + height: 100%; + /* hack claro.button.css */ + + background-image: url("form/images/commonFormArrows.png"); + background-repeat: no-repeat; + background-position: -140px 45%; } -.claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner{ - background-position:-35px 45%; +.claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner { + background-position: -35px 45%; } -.claro .dijitTimePicker .dijitUpArrowHover, -.claro .dijitTimePicker .dijitDownArrowHover { - background-color: #abd6ff; +/* hover */ +.claro .dijitTimePicker .dijitUpArrowHover, .claro .dijitTimePicker .dijitDownArrowHover { + background-color: #abd6ff; } .claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner { - background-position:-175px 45%; + background-position: -175px 45%; } .claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner { - background-position:-70px 45%; + background-position: -70px 45%; } diff --git a/lib/dijit/themes/claro/TimePicker.less b/lib/dijit/themes/claro/TimePicker.less new file mode 100644 index 000000000..cd07a63d8 --- /dev/null +++ b/lib/dijit/themes/claro/TimePicker.less @@ -0,0 +1,124 @@ +/* Time Picker + * + * Styling the Time Picker consists of the following: + * + * 1. minor time values + * .dijitTimePickerTick - set text color, size, background color of minor values + * .dijitTimePickerTickHover - set hover style of minor time values + * dijitTimePickerTickSelected - set selected style of minor time values + * + * 2. major time values - 1:00, 2:00, times on the hour + * set text color, size, background color, left/right margins for "zoom" affect + * .dijitTimePickerMarkerHover - to set hover style of major time values + * .dijitTimePickerMarkerSelected - set selected style of major time values + * + * 3. up and down arrow buttons + * .dijitTimePicker .dijitButtonNode - background-color, border + * .dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state + * + * Other classes provide the fundamental structure of the TimePicker and should not be modified. + */ + +@import "variables"; + +/* override Button.css */ +.claro .dijitTimePicker .dijitButtonNode { + padding: 0 0; + .border-radius(0); +} +.claro .dijitTimePicker{ + border:1px @border-color solid; + border-top:none; + border-bottom:none; + background-color:#fff; /* TODO: useless? Appears to be overridden by settings on individual elements */ +} +.claro .dijitTimePickerItem{ + /* dijitTimePickerItem refers to both Tick's (minor values like 2:15, 2:30, 2:45) and Marker's (major values like 2PM, 3PM) */ + background-image: url("images/commonHighlight.png"); + background-position:0 -1px; + background-repeat:repeat-x; + border-top:solid 1px @border-color; + border-bottom:solid 1px @border-color; + margin-right:-1px; + margin-left:-1px; + margin-top:-1px; +} +/* to make up for lack of alpha transparency in IE6 */ +.dj_ie6 .claro .dijitTimePickerItem { + background-image: none; +} +.claro .dijitTimePickerTick { + /* minor value */ + color:@timepicker-minorvalue-text-color; + background-color:@timepicker-minorvalue-background-color; + font-size:0.818em; +} +.claro .dijitTimePickerMarker { + /* major value - 1:00, 2:00, times on the hour */ + background-color: @timepicker-majorvalue-background-color; + font-size: 1em; + white-space: nowrap; +} +.claro .dijitTimePickerTickHover, +.claro .dijitTimePickerMarkerHover, +.claro .dijitTimePickerMarkerSelected, +.claro .dijitTimePickerTickSelected { + background-color: @timepicker-value-hovered-background-color; + border:solid 1px @border-color; + margin-left:-7px; + margin-right:-7px; + color:@timepicker-value-hovered-text-color; +} +.claro .dijitTimePickerMarkerSelected, +.claro .dijitTimePickerTickSelected { + font-size: 1em; +} +.dj_ie .claro .dijitTimePickerTickHover, +.dj_ie .claro .dijitTimePickerMarkerHover, +.dj_ie .claro .dijitTimePickerMarkerSelected, +.dj_ie .claro .dijitTimePickerTickSelected { + width: 114%; +} +.dj_ie6 .claro .dijitTimePickerTickHover, +.dj_ie6 .claro .dijitTimePickerMarkerHover, +.dj_ie6 .claro .dijitTimePickerMarkerSelected, +.dj_ie6 .claro .dijitTimePickerTickSelected { + position: relative; /* creates widening of element */ + zoom: 1; /* creates widening of element */ +} +.claro .dijitTimePickerTick .dijitTimePickerItemInner { + padding:1px; + margin:0; +} +.claro .dijitTimePicker .dijitButtonNode { + border-left:none; + border-right:none; + border-color:@border-color; + background-color: @unselected-background-color; + background-image: url("images/commonHighlight.png"); + background-position:0 -1px; + background-repeat:repeat-x; +} +.dj_ie6 .claro .dijitTimePicker .dijitButtonNode { + background-image: none; +} +.claro .dijitTimePicker .dijitArrowButtonInner{ + height: 100%; /* hack claro.button.css */ + background-image: url("form/images/commonFormArrows.png"); + background-repeat: no-repeat; + background-position:-140px 45%; +} +.claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner{ + background-position:-35px 45%; +} +/* hover */ +.claro .dijitTimePicker .dijitUpArrowHover, +.claro .dijitTimePicker .dijitDownArrowHover { + background-color: @timepicker-arrow-hovered-background-color; +} +.claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner { + background-position:-175px 45%; +} +.claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner { + background-position:-70px 45%; +} diff --git a/lib/dijit/themes/claro/TimePicker_rtl.css b/lib/dijit/themes/claro/TimePicker_rtl.css index a1bf2fbf0..6dfcf839e 100644 --- a/lib/dijit/themes/claro/TimePicker_rtl.css +++ b/lib/dijit/themes/claro/TimePicker_rtl.css @@ -1,9 +1,9 @@ - +/* TimePicker */ .dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickHover, .dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerHover, .dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerSelected, .dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickSelected { - margin-left:-6px; - margin-right:-8px; - width: 114%; + margin-left: -6px; + margin-right: -8px; + width: 114%; } diff --git a/lib/dijit/themes/claro/TimePicker_rtl.less b/lib/dijit/themes/claro/TimePicker_rtl.less new file mode 100644 index 000000000..44f5da5bd --- /dev/null +++ b/lib/dijit/themes/claro/TimePicker_rtl.less @@ -0,0 +1,12 @@ +/* TimePicker */ + +@import "variables"; + +.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickHover, +.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerHover, +.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerSelected, +.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickSelected { + margin-left:-6px; + margin-right:-8px; + width: 114%; +} \ No newline at end of file diff --git a/lib/dijit/themes/claro/TitlePane.css b/lib/dijit/themes/claro/TitlePane.css index a0191fc53..7f0cdbfb7 100644 --- a/lib/dijit/themes/claro/TitlePane.css +++ b/lib/dijit/themes/claro/TitlePane.css @@ -1,54 +1,73 @@ - +/* TitlePane + * + * Styling TitlePane means styling the TitlePane title and its content container (dijitTitlePane) + * + * TitlePane title: + * 1. TitlePane title (default styling): + * .dijitTitlePaneTitle - TitlePane's title div style: background-color, border + * + * 2. hovered TitlePane title (ie, mouse hover on a title bar) + * .dijitTitlePaneTitleHover - styles when mouse hover on the title div + * + * 3. active TitlePane title (ie, mouse down on a title bar) + * .dijitTitlePaneTitleActive - styles when mouse down on the title div + * + * + * TitlePane Content Container: + * 1. outer/inner container: + * .dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div + */ .claro .dijitTitlePaneTitle { - background-color: #e6e6e7; - background-image: url("images/titlebar.png"); - background-repeat:repeat-x; - border:1px solid #b5bcc7; - padding: 0px 7px 3px 7px; - min-height:17px; - color:#131313; + background-color: #efefef; + background-image: url("images/titlebar.png"); + background-repeat: repeat-x; + border: 1px solid #b5bcc7; + padding: 0 7px 3px 7px; + min-height: 17px; } .dj_ie6 .claro .dijitTitlePaneTitle { - background-image: none; + background-image: none; } .claro .dijitTitlePaneTitleHover { - background-color: #abd6ff; - border-color: #769dc0; + background-color: #abd6ff; + border-color: #769dc0; } .claro .dijitTitlePaneTitleActive { - background-color: #7dbefa; - border-color: #769dc0; - background-position:0px -136px; + background-color: #7dbefa; + border-color: #769dc0; + background-position: 0 -136px; } .claro .dijitTitlePaneTitleFocus { - margin-top:3px; - padding-bottom:2px; + margin-top: 3px; + padding-bottom: 2px; } .claro .dijitTitlePane .dijitArrowNode { - background-image: url('images/spriteArrows.png'); - background-repeat: no-repeat; - height: 8px; - width: 7px; + background-image: url('images/spriteArrows.png'); + background-repeat: no-repeat; + height: 8px; + width: 7px; } .claro .dijitTitlePane .dijitOpen .dijitArrowNode { - background-position: 0px 0px; + background-position: 0 0; } .claro .dijitTitlePane .dijitClosed .dijitArrowNode { - background-position: -14px 0px; + background-position: -14px 0; } .claro .dijitTitlePaneFocused .dijitTitlePaneTextNode { - color:#000; + color: #000000; + /* TODO: do we need this? we usually don't change text color on focus */ + } .claro .dijitTitlePaneContentOuter { - background: #ffffff; - border:1px solid #b5bcc7; - border-top:none; + background: #ffffff; + border: 1px solid #b5bcc7; + border-top: none; } .claro .dijitTitlePaneContentInner { - padding:10px; + padding: 10px; } .claro .dijitTitlePaneTextNode { - margin-left: 4px; - margin-right: 4px; - vertical-align:text-top; + margin-left: 4px; + margin-right: 4px; + vertical-align: text-top; } diff --git a/lib/dijit/themes/claro/TitlePane.less b/lib/dijit/themes/claro/TitlePane.less new file mode 100644 index 000000000..22bacca0f --- /dev/null +++ b/lib/dijit/themes/claro/TitlePane.less @@ -0,0 +1,74 @@ +/* TitlePane + * + * Styling TitlePane means styling the TitlePane title and its content container (dijitTitlePane) + * + * TitlePane title: + * 1. TitlePane title (default styling): + * .dijitTitlePaneTitle - TitlePane's title div style: background-color, border + * + * 2. hovered TitlePane title (ie, mouse hover on a title bar) + * .dijitTitlePaneTitleHover - styles when mouse hover on the title div + * + * 3. active TitlePane title (ie, mouse down on a title bar) + * .dijitTitlePaneTitleActive - styles when mouse down on the title div + * + * + * TitlePane Content Container: + * 1. outer/inner container: + * .dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div + */ + +@import "variables"; + +.claro .dijitTitlePaneTitle { + background-color: @unselected-background-color; // TODO: Mailed Jason, shouldn't this toggle to @selected-background-color when pane opened? + background-image: url("images/titlebar.png"); + background-repeat:repeat-x; + border:1px solid @border-color; + padding: 0 7px 3px 7px; + min-height:17px; +} +.dj_ie6 .claro .dijitTitlePaneTitle { + background-image: none; +} +.claro .dijitTitlePaneTitleHover { + background-color: @hovered-background-color; + border-color: @hovered-border-color; +} +.claro .dijitTitlePaneTitleActive { + background-color: @pressed-background-color; + border-color: @pressed-border-color; + background-position:0 -136px; +} +.claro .dijitTitlePaneTitleFocus { + margin-top:3px; + padding-bottom:2px; +} +.claro .dijitTitlePane .dijitArrowNode { + background-image: url('images/spriteArrows.png'); + background-repeat: no-repeat; + height: 8px; + width: 7px; +} +.claro .dijitTitlePane .dijitOpen .dijitArrowNode { + background-position: 0 0; +} +.claro .dijitTitlePane .dijitClosed .dijitArrowNode { + background-position: -14px 0; +} +.claro .dijitTitlePaneFocused .dijitTitlePaneTextNode { + color:@text-color; /* TODO: do we need this? we usually don't change text color on focus */ +} +.claro .dijitTitlePaneContentOuter { + background: @pane-background-color; + border:1px solid @border-color; + border-top:none; +} +.claro .dijitTitlePaneContentInner { + padding:10px; +} +.claro .dijitTitlePaneTextNode { + margin-left: 4px; + margin-right: 4px; + vertical-align:text-top; +} \ No newline at end of file diff --git a/lib/dijit/themes/claro/TitlePane_rtl.css b/lib/dijit/themes/claro/TitlePane_rtl.css index 09ca395f7..3f68ab30e 100644 --- a/lib/dijit/themes/claro/TitlePane_rtl.css +++ b/lib/dijit/themes/claro/TitlePane_rtl.css @@ -1,4 +1,4 @@ - +/* TitlePane */ .claro .dijitTitlePaneRtl .dijitClosed .dijitArrowNode { - background-position: -7px 0px; + background-position: -7px 0; } diff --git a/lib/dijit/themes/claro/TitlePane_rtl.less b/lib/dijit/themes/claro/TitlePane_rtl.less new file mode 100644 index 000000000..693584f67 --- /dev/null +++ b/lib/dijit/themes/claro/TitlePane_rtl.less @@ -0,0 +1,7 @@ +/* TitlePane */ + +@import "variables"; + +.claro .dijitTitlePaneRtl .dijitClosed .dijitArrowNode { + background-position: -7px 0; +} \ No newline at end of file diff --git a/lib/dijit/themes/claro/Toolbar.css b/lib/dijit/themes/claro/Toolbar.css index 2189dcd4d..a9e6f4f5e 100644 --- a/lib/dijit/themes/claro/Toolbar.css +++ b/lib/dijit/themes/claro/Toolbar.css @@ -1,133 +1,158 @@ - +/* Toolbar + * + * Styling Toolbar means styling the toolbar container and the widget inside toolbar (dijitToolbar) + * + * 1. toolbar (default styling): + * .dijitToolbar - styles for outer container + * + * 2. widget inside toolbar + * .dijitToolbar .dijitButtonNode - Button widget + * .dijitComboButton - ComboButton widget + * .dijitDropDownButton - DropDownButton widget + * .dijitToggleButton - ToggleButton widget + * + * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside) + * .dijitToolbar .dijitButtonNodeHover - styles for hovered Button widget + * + * 4. actived widget inside toolbar (ie, mouse down on the widget inside) + * .dijitToolbar .dijitButtonNodeActive - mouse down on Button widget + */ .claro .dijitToolbar { - border-bottom: 1px solid #b5bcc7; - background-color: #f1f1f1; - background-image: url("images/commonHighlight.png"); - background-position:0px 0px; - background-repeat:repeat-x; - padding: 2px 0px 2px 4px; - zoom: 1; + border-bottom: 1px solid #b5bcc7; + background-color: #efefef; + background-image: url("images/commonHighlight.png"); + background-position: 0 0; + background-repeat: repeat-x; + padding: 2px 0 2px 4px; + zoom: 1; } .claro .dijitToolbar label { - padding: 0px 3px 0 6px; + padding: 0 3px 0 6px; } +/** override claro/form/Button.css **/ .claro .dijitToolbar .dijitButtonNode { - border:none; - padding: 2px; - background-image: url("images/commonHighlight.png"); - background-position:0 -30px; - background-repeat:repeat-x; - background-color:rgba(171,214,255,0); - border-radius: 2px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - -moz-box-shadow: none; - -webkit-box-shadow: none; - -webkit-transition-property:background-color; - -webkit-transition-duration:.3s, .35s; -} -.claro .dijitToolbar .dijitComboButton .dijitButtonNode{ - padding: 3px 2px 3px 2px; + border-width: 0; + /* on hover/active, border-->1px, padding-->1px */ + + padding: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.3s, 0.35s; + -moz-transition-duration: 0.3s, 0.35s; + transition-duration: 0.3s, 0.35s; + background-image: url("images/commonHighlight.png"); + background-position: 0 -30px; + background-repeat: repeat-x; + background-color: rgba(171, 214, 255, 0); } .dj_ie .claro .dijitToolbar .dijitButtonNode { - background-color: transparent; + background-color: transparent; + /* for IE, which doesn't understand rgba(...) */ + } .dj_ie6 .claro .dijitToolbar .dijitButtonNode { - background: none; + background: none; + /* because background-color: transparent above doesn't work */ + } -.claro .dijitToolbar .dijitComboBox .dijitButtonNode { - padding: 0px; +.claro .dijitToolbar .dijitComboButton .dijitStretch { + /* no rounded border on side adjacent to arrow */ + + -moz-border-radius: 2px 0 0 2px; + border-radius: 2px 0 0 2px; } -.claro .dijitToolbar .dijitComboButton { - padding: 1px; +.claro .dijitToolbar .dijitComboButton .dijitArrowButton { + /* no rounded border on side adjacent to button */ + + -moz-border-radius: 0 2px 2px 0; + border-radius: 0 2px 2px 0; +} +.claro .dijitToolbar .dijitComboBox .dijitButtonNode { + padding: 0; } +/* hover status */ .claro .dijitToolbar .dijitButtonHover .dijitButtonNode, .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, -.claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode { - background-position:0 0; - border:solid 1px #769dc0; - background-color: #abd6ff; - padding: 1px; -} -.claro .dijitToolbar .dijitComboButtonHover { - background-color: #abd6ff; - border: solid 1px #769dc0; - padding: 0px; -} -.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, -.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { - background-position:0 0; - padding: 2px; -} -.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { - background-color: #7dd6fa; -} -.claro .dijitToolbar .dijitButtonActive .dijitButtonNode, -.claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, -.claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { - border:solid 1px #769dc0; - background-color:#7dbefa; - background-position:0px -177px; - padding: 1px; +.claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode, +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode { + background-position: 0 0; + border-width: 1px; + background-color: #abd6ff; + padding: 1px; +} +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { + background-position: 0 0; + background-color: #f4ffff; +} +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover { + background-color: #abd6ff; +} +/* active status */ +.claro .dijitToolbar .dijitButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { + border-width: 1px; + background-color: #7dbefa; + background-position: 0 -177px; + padding: 1px; } .claro .dijitToolbar .dijitComboButtonActive { - -webkit-transition-duration:.2s; - border: solid 1px #769dc0; - padding: 0px; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; + border-width: 1px; + padding: 0; } -.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode { - background-color: #7dbefa; - background-position:0px -177px; - padding: 2px; +.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { + background-color: #f4ffff; + background-position: 0 -177px; + padding: 2px; } -.claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonActive { - background-color: #7dbefa; +.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive { + background-color: #7dbefa; } -.claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode { - border-color: #769dc0; - background-color:#fff; - padding: 1px; +.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive { + background-color: #7dbefa; } -.dj_ie6 .claro .dijitToolbar .dijitButtonContents, -.dj_ie7 .claro .dijitToolbar .dijitButtonContents { - margin: -2px 0; - padding: 0; +/* Avoid double border between button and arrow */ +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { + border-left-width: 0; } -.dj_ie6 .claro .dijitToolbar { - background-image: none; +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { + padding-left: 2px; + /* since there's no left border, don't reduce from 2px --> 1px */ + } -.dj_ie6 .claro .dijitToolbar .dijitButtonNode { - margin: 1px; - border: none; -} -.dj_ie6 .claro .dijitToolbar .dijitButtonHover .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNodeHover, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover, -.dj_ie6 .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitButtonActive .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNodeActive, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonActive, -.dj_ie6 .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode, +/* toggle button checked status */ .claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode { - margin: 0; - border-width: 1px; - border-style: solid; - background-image: none; + margin: 0; + /* remove margin and add a border */ + + border-width: 1px; + border-style: solid; + background-image: none; + border-color: #769dc0; + background-color: #ffffff; + padding: 1px; } -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNodeHover, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNodeActive, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonActive { - padding: 1px; +.dj_ie6 .claro .dijitToolbar { + background-image: none; } .claro .dijitToolbarSeparator { - - background: url('../../icons/images/editorIconsEnabled.png'); + /* separator icon in the editor sprite */ + + background: url('../../icons/images/editorIconsEnabled.png'); } +/* Toolbar inside of disabled Editor */ .claro .dijitDisabled .dijitToolbar { - background:none; - background-color:#f5f5f5; - border-bottom: 1px solid #d3d3d3; + background: none; + background-color: #efefef; + border-bottom: 1px solid #d3d3d3; +} +.claro .dijitToolbar .dijitComboBoxDisabled .dijitArrowButtonInner { + background-position: 0 50%; } diff --git a/lib/dijit/themes/claro/Toolbar.less b/lib/dijit/themes/claro/Toolbar.less new file mode 100644 index 000000000..eb99f2f23 --- /dev/null +++ b/lib/dijit/themes/claro/Toolbar.less @@ -0,0 +1,157 @@ +/* Toolbar + * + * Styling Toolbar means styling the toolbar container and the widget inside toolbar (dijitToolbar) + * + * 1. toolbar (default styling): + * .dijitToolbar - styles for outer container + * + * 2. widget inside toolbar + * .dijitToolbar .dijitButtonNode - Button widget + * .dijitComboButton - ComboButton widget + * .dijitDropDownButton - DropDownButton widget + * .dijitToggleButton - ToggleButton widget + * + * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside) + * .dijitToolbar .dijitButtonNodeHover - styles for hovered Button widget + * + * 4. actived widget inside toolbar (ie, mouse down on the widget inside) + * .dijitToolbar .dijitButtonNodeActive - mouse down on Button widget + */ + +@import "variables"; + +.claro .dijitToolbar { + border-bottom: 1px solid @border-color; + background-color: @bar-background-color; + background-image: url("images/commonHighlight.png"); + background-position:0 0; + background-repeat:repeat-x; + padding: 2px 0 2px 4px; + zoom: 1; +} + +.claro .dijitToolbar label { + padding: 0 3px 0 6px; +} + +/** override claro/form/Button.css **/ +.claro .dijitToolbar .dijitButtonNode { + border-width: 0; /* on hover/active, border-->1px, padding-->1px */ + padding: 2px; + .border-radius(@toolbar-button-border-radius); + .box-shadow(none); + .transition-property(background-color); + .transition-duration(.3s, .35s); + + background-image: url("images/commonHighlight.png"); + background-position:0 -30px; + background-repeat:repeat-x; + background-color:rgba(171,214,255,0); +} +.dj_ie .claro .dijitToolbar .dijitButtonNode { + background-color: transparent; /* for IE, which doesn't understand rgba(...) */ +} +.dj_ie6 .claro .dijitToolbar .dijitButtonNode { + background: none; /* because background-color: transparent above doesn't work */ +} + +.claro .dijitToolbar .dijitComboButton .dijitStretch { + /* no rounded border on side adjacent to arrow */ + .border-radius(@toolbar-button-border-radius 0 0 @toolbar-button-border-radius); +} +.claro .dijitToolbar .dijitComboButton .dijitArrowButton { + /* no rounded border on side adjacent to button */ + .border-radius(0 @toolbar-button-border-radius @toolbar-button-border-radius 0); +} + +.claro .dijitToolbar .dijitComboBox .dijitButtonNode { + padding: 0; +} + +/* hover status */ +.claro .dijitToolbar .dijitButtonHover .dijitButtonNode, +.claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, +.claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode, +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode { + background-position:0 0; + border-width:1px; + background-color: @hovered-background-color; + padding: 1px; +} +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { + background-position:0 0; + background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color; +} +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover, +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover { + background-color: @hovered-background-color; +} + +/* active status */ +.claro .dijitToolbar .dijitButtonActive .dijitButtonNode, +.claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, +.claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { + border-width: 1px; + background-color:@pressed-background-color; + background-position:0 -177px; + padding: 1px; +} +.claro .dijitToolbar .dijitComboButtonActive { + .transition-duration(.2s); + border-width: 1px; + padding: 0; +} +.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode, +.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { + background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color; + background-position:0 -177px; + padding: 2px; +} +.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive { + background-color: @pressed-background-color; +} +.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive { + background-color: @pressed-background-color; +} + +/* Avoid double border between button and arrow */ +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton, +.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { + border-left-width: 0; +} +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { + padding-left: 2px; /* since there's no left border, don't reduce from 2px --> 1px */ +} + +/* toggle button checked status */ +.claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode { + margin: 0; /* remove margin and add a border */ + border-width: 1px; + border-style: solid; + background-image: none; + border-color: @selected-border-color; + background-color: @toolbar-button-checked-background-color; + padding: 1px; +} + +.dj_ie6 .claro .dijitToolbar { + background-image: none; +} + +.claro .dijitToolbarSeparator { + /* separator icon in the editor sprite */ + background: url('../../icons/images/editorIconsEnabled.png'); +} + +/* Toolbar inside of disabled Editor */ +.claro .dijitDisabled .dijitToolbar { + background:none; + background-color:@disabled-background-color; + border-bottom: 1px solid @disabled-border-color; +} + +.claro .dijitToolbar .dijitComboBoxDisabled .dijitArrowButtonInner { + background-position:0 50%; +} + diff --git a/lib/dijit/themes/claro/Toolbar_rtl.css b/lib/dijit/themes/claro/Toolbar_rtl.css new file mode 100644 index 000000000..2fab1de32 --- /dev/null +++ b/lib/dijit/themes/claro/Toolbar_rtl.css @@ -0,0 +1,30 @@ +/* Toolbar RTL */ +/* Repeated rules from Toolbar.css to override rule from Button_rtl.css, which is loaded after Toolbar.css */ +.claro .dijitToolbar .dijitComboButtonRtl .dijitButtonNode { + border-width: 0; + padding: 2px; +} +.claro .dijitToolbar .dijitComboButtonRtlHover .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonRtlActive .dijitButtonNode { + border-width: 1px; + padding: 1px; +} +.claro .dijitToolbar .dijitComboButtonRtl .dijitStretch { + /* no rounded border on side adjacent to arrow */ + + -moz-border-radius: 0 2px 2px 0; + border-radius: 0 2px 2px 0; +} +.claro .dijitToolbar .dijitComboButtonRtl .dijitArrowButton { + /* no rounded border on side adjacent to button */ + + -moz-border-radius: 2px 0 0 2px; + border-radius: 2px 0 0 2px; +} +.claro .dijitToolbar .dijitComboButtonRtlHover .dijitArrowButton, .claro .dijitToolbar .dijitComboButtonRtlActive .dijitArrowButton { + /* border between button and arrow */ + + border-left-width: 1px; + border-right-width: 0; + padding-left: 1px; + padding-right: 2px; +} diff --git a/lib/dijit/themes/claro/Toolbar_rtl.less b/lib/dijit/themes/claro/Toolbar_rtl.less new file mode 100644 index 000000000..8d31c88f4 --- /dev/null +++ b/lib/dijit/themes/claro/Toolbar_rtl.less @@ -0,0 +1,32 @@ +/* Toolbar RTL */ + +@import "variables"; + +/* Repeated rules from Toolbar.css to override rule from Button_rtl.css, which is loaded after Toolbar.css */ +.claro .dijitToolbar .dijitComboButtonRtl .dijitButtonNode { + border-width: 0; + padding: 2px; +} +.claro .dijitToolbar .dijitComboButtonRtlHover .dijitButtonNode, +.claro .dijitToolbar .dijitComboButtonRtlActive .dijitButtonNode { + border-width: 1px; + padding: 1px; +} + +.claro .dijitToolbar .dijitComboButtonRtl .dijitStretch { + /* no rounded border on side adjacent to arrow */ + .border-radius(0 2px 2px 0); +} +.claro .dijitToolbar .dijitComboButtonRtl .dijitArrowButton { + /* no rounded border on side adjacent to button */ + .border-radius(2px 0 0 2px); +} + +.claro .dijitToolbar .dijitComboButtonRtlHover .dijitArrowButton, +.claro .dijitToolbar .dijitComboButtonRtlActive .dijitArrowButton { + /* border between button and arrow */ + border-left-width: 1px; + border-right-width: 0; + padding-left: 1px; + padding-right: 2px; +} diff --git a/lib/dijit/themes/claro/Tree.css b/lib/dijit/themes/claro/Tree.css index 739a4931e..069deb80a 100644 --- a/lib/dijit/themes/claro/Tree.css +++ b/lib/dijit/themes/claro/Tree.css @@ -1,88 +1,134 @@ - +/* Tree + * + * Styling Tree mostly means styling the TreeRow (dijitTreeRow) + * There are 4 basic states to style: + * + * Tree Row: + * 1. tree row (default styling): + * .dijitTreeRow - styles for each row of the tree + * + * 2. hovered tree row (mouse hover on a tree row) + * .dijitTreeRowHover - styles when mouse over on one row + * + * 3. active tree row (mouse down on a tree row) + * .dijitTreeRowActive - styles when mouse down on one row + * + * 4. selected tree row + * dijitTreeRowSelected - style when the row has been selected + * + * Tree Expando: + * dijitTreeExpando - the expando at the left of the text of each tree row + * + * Drag and Drop on TreeNodes: (insert line on dijitTreeContent node so it'll aligned w/ target element) + * .dijitTreeNode .dojoDndItemBefore/.dojoDndItemAfter - use border style simulate a separate line + */ .claro .dijitTreeNode { - zoom: 1; + zoom: 1; + /* force layout on IE (TODO: may not be needed anymore) */ + } .claro .dijitTreeIsRoot { - background-image: none; -} -.claro .dijitTreeRow { - - padding: 4px 1px 2px 0px; - margin-left: 1px; - background-image: url("images/commonHighlight.png"); - background-position:0px 0px; - background-repeat:repeat-x; - border-color: rgba(118,157,192,0); - background-color: rgba(171,214,255,0); - -webkit-transition-property:background-color, border-color; - -webkit-transition-duration:.25s ; - -webkit-transition-timing-function: ease-out; + background-image: none; +} +/* Styling for basic tree node (unhovered, unselected) + * Also use this styling when dropping between items on the tree (in other words, don't + * use hover effect) + */ +.claro .dijitTreeRow, .claro .dijitTreeNode .dojoDndItemBefore, .claro .dijitTreeNode .dojoDndItemAfter { + /* so insert line shows up on IE when dropping after a target element */ + + padding: 4px 1px 2px 0; + margin: 0 1px; + /* replaced by border for selected/hovered row */ + + background-color: none; + background-color: transparent; + background-color: rgba(171, 214, 255, 0); + background-image: url("images/commonHighlight.png"); + background-position: 0 0; + background-repeat: repeat-x; + border-color: rgba(118, 157, 192, 0); + border-width: 0; + -webkit-transition-property: background-color, border-color; + -moz-transition-property: background-color, border-color; + transition-property: background-color, border-color; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + transition-timing-function: ease-out; } .dj_ie6 .claro .dijitTreeRow { - background-image: none; + background-image: none; } .claro .dijitTreeRowSelected { - background-repeat:repeat-x; - background-color:#d8edff; - padding: 3px 0px 1px; - margin-left: 0px; - border:solid 1px #c3e2fd; - color:#000; + background-repeat: repeat-x; + background-color: #cfe5fa; + padding: 3px 0 1px; + margin: 0; + border: solid 1px #769dc0; + color: #000000; } .claro .dijitTreeRowHover { - background-color:#abd6ff; - padding: 3px 0px 1px; - margin-left: 0px; - border:solid 1px #769dc0; - color:#000; - -webkit-transition-duration:.25s ; + background-color: #abd6ff; + padding: 3px 0 1px; + margin: 0; + border: solid 1px #769dc0; + color: #000000; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; } .claro .dijitTreeRowActive { - background-color:#7dbefa; - background-position:0px -177px; - padding: 3px 0px 1px; - margin-left: 0px; - border:solid 1px #769dc0; - color:#000; + background-color: #7dbefa; + background-position: 0 -177px; + padding: 3px 0 1px; + margin-left: 0; + border: solid 1px #769dc0; + color: #000000; } .dj_ie6 .claro .dijitTreeRowActive { - background-image: none; + background-image: none; } .claro .dijitTreeRowFocused { - background-repeat: repeat; + background-repeat: repeat; } +/* expando (open/closed) icon */ .claro .dijitTreeExpando { - background-image: url('images/treeExpandImages.png'); - width: 16px; - height: 16px; - background-position: -35px 0px + background-image: url('images/treeExpandImages.png'); + width: 16px; + height: 16px; + background-position: -35px 0; + /* for dijitTreeExpandoOpened */ + } .dj_ie6 .claro .dijitTreeExpando { - background-image: url('images/treeExpandImages8bit.png'); + background-image: url('images/treeExpandImages8bit.png'); } .claro .dijitTreeRowHover .dijitTreeExpandoOpened { - background-position: -53px 0px; + background-position: -53px 0; } .claro .dijitTreeExpandoClosed { - background-position: 1px 0px; + background-position: 1px 0; } .claro .dijitTreeRowHover .dijitTreeExpandoClosed { - background-position: -17px 0px; + background-position: -17px 0; } -.claro .dijitTreeExpandoLeaf{ - background-image:none; +.claro .dijitTreeExpandoLeaf, .dj_ie6 .claro .dijitTreeExpandoLeaf { + background-image: none; } .claro .dijitTreeExpandoLoading { - background-image: url('images/loadingAnimation.gif'); -} -.claro .dijitTreeNode .dojoDndItemBefore, -.claro .dijitTreeNode .dojoDndItemAfter { - border-bottom: none; - border-top: none; + background-image: url('images/loadingAnimation.gif'); } +/* Drag and Drop on TreeNodes + * Put insert line on dijitTreeContent node so it's aligned w/ + * (ie, indented equally with) target element, even + * though dijitTreeRowNode is the actual "drag object" + */ .claro .dijitTreeNode .dojoDndItemBefore .dijitTreeContent { - border-top: 2px solid #369; + border-top: 2px solid #769dc0; } .claro .dijitTreeNode .dojoDndItemAfter .dijitTreeContent { - border-bottom: 2px solid #369; + border-bottom: 2px solid #769dc0; } diff --git a/lib/dijit/themes/claro/Tree.less b/lib/dijit/themes/claro/Tree.less new file mode 100644 index 000000000..4e639ca4f --- /dev/null +++ b/lib/dijit/themes/claro/Tree.less @@ -0,0 +1,133 @@ +/* Tree + * + * Styling Tree mostly means styling the TreeRow (dijitTreeRow) + * There are 4 basic states to style: + * + * Tree Row: + * 1. tree row (default styling): + * .dijitTreeRow - styles for each row of the tree + * + * 2. hovered tree row (mouse hover on a tree row) + * .dijitTreeRowHover - styles when mouse over on one row + * + * 3. active tree row (mouse down on a tree row) + * .dijitTreeRowActive - styles when mouse down on one row + * + * 4. selected tree row + * dijitTreeRowSelected - style when the row has been selected + * + * Tree Expando: + * dijitTreeExpando - the expando at the left of the text of each tree row + * + * Drag and Drop on TreeNodes: (insert line on dijitTreeContent node so it'll aligned w/ target element) + * .dijitTreeNode .dojoDndItemBefore/.dojoDndItemAfter - use border style simulate a separate line + */ + +@import "variables"; + +.claro .dijitTreeNode { + zoom: 1; /* force layout on IE (TODO: may not be needed anymore) */ +} +.claro .dijitTreeIsRoot { + background-image: none; +} + +/* Styling for basic tree node (unhovered, unselected) + * Also use this styling when dropping between items on the tree (in other words, don't + * use hover effect) + */ +.claro .dijitTreeRow, +.claro .dijitTreeNode .dojoDndItemBefore, +.claro .dijitTreeNode .dojoDndItemAfter { + /* so insert line shows up on IE when dropping after a target element */ + padding: 4px 1px 2px 0; + margin: 0 1px; /* replaced by border for selected/hovered row */ + + background-color: none; // IE6 doesn't understand rgba() or transparent below + background-color: transparent; // IE8 doesn't understand rgba() below + background-color: rgba(171,214,255,0); // rgba() instead of transparent to prevent flash on hover fade-in + background-image: url("images/commonHighlight.png"); + background-position:0 0; + background-repeat:repeat-x; + + border-color: rgba(118,157,192,0); // rgba() instead of none to prevent flash on hover fade-in + border-width: 0; + + .transition-property(background-color, border-color); + .transition-duration(.25s); + .transition-timing-function(ease-out); +} +.dj_ie6 .claro .dijitTreeRow { + background-image: none; +} + +.claro .dijitTreeRowSelected { + background-repeat:repeat-x; + background-color:@selected-background-color; + padding: 3px 0 1px; + margin: 0; + border:solid 1px @selected-border-color; + color:@selected-text-color; +} +.claro .dijitTreeRowHover { + background-color:@hovered-background-color; + padding: 3px 0 1px; + margin: 0; + border:solid 1px @hovered-border-color; + color:@hovered-text-color; + .transition-duration(.25s); +} +.claro .dijitTreeRowActive { + background-color:@pressed-background-color; + background-position:0 -177px; + padding: 3px 0 1px; + margin-left: 0; + border:solid 1px @pressed-border-color; + color:@selected-text-color; +} +.dj_ie6 .claro .dijitTreeRowActive { + background-image: none; +} +.claro .dijitTreeRowFocused { + background-repeat: repeat; +} + +/* expando (open/closed) icon */ + +.claro .dijitTreeExpando { + background-image: url('images/treeExpandImages.png'); + width: 16px; + height: 16px; + background-position: -35px 0; /* for dijitTreeExpandoOpened */ +} +.dj_ie6 .claro .dijitTreeExpando { + background-image: url('images/treeExpandImages8bit.png'); +} +.claro .dijitTreeRowHover .dijitTreeExpandoOpened { + background-position: -53px 0; +} +.claro .dijitTreeExpandoClosed { + background-position: 1px 0; +} +.claro .dijitTreeRowHover .dijitTreeExpandoClosed { + background-position: -17px 0; +} +.claro .dijitTreeExpandoLeaf, +.dj_ie6 .claro .dijitTreeExpandoLeaf { + background-image:none; +} +.claro .dijitTreeExpandoLoading { + background-image: url('images/loadingAnimation.gif'); +} + +/* Drag and Drop on TreeNodes + * Put insert line on dijitTreeContent node so it's aligned w/ + * (ie, indented equally with) target element, even + * though dijitTreeRowNode is the actual "drag object" + */ +.claro .dijitTreeNode .dojoDndItemBefore .dijitTreeContent { + border-top: 2px solid @dnd-dropseparator-color; // TODO: normal separator is just 1px, why is this 2px? +} +.claro .dijitTreeNode .dojoDndItemAfter .dijitTreeContent { + border-bottom: 2px solid @dnd-dropseparator-color; // TODO: normal separator is just 1px, why is this 2px? +} diff --git a/lib/dijit/themes/claro/claro.css b/lib/dijit/themes/claro/claro.css index 7ed7f1856..d3cb2688c 100644 --- a/lib/dijit/themes/claro/claro.css +++ b/lib/dijit/themes/claro/claro.css @@ -1,4689 +1,28 @@ +@import url("../dijit.css"); +@import url("../../icons/commonIcons.css");/*sprite containing common icons to be used by all themes*/ +@import url("Common.css"); +@import url("form/Common.css"); +@import url("form/Button.css"); +@import url("form/Checkbox.css"); +@import url("form/RadioButton.css"); +@import url("form/Select.css"); +@import url("layout/TabContainer.css"); +@import url("Dialog.css"); +@import url("layout/AccordionContainer.css"); +@import url("layout/ContentPane.css"); +@import url("Calendar.css"); +@import url("Menu.css"); +@import url("form/Slider.css"); +@import url("ColorPalette.css"); +@import url("InlineEditBox.css"); +@import url("ProgressBar.css"); +@import url("TimePicker.css"); +@import url("layout/BorderContainer.css"); +@import url("Tree.css"); +@import url("Toolbar.css"); +@import url("Editor.css");/*in order to test button or menu item with icon */ +@import url("../../icons/editorIcons.css"); /*sprite for editor icons to be used by all themes*/ +@import url("TitlePane.css"); +@import url("form/NumberSpinner.css"); -.dijitReset { - - margin:0; - border:0; - padding:0; - line-height:normal; - font: inherit; - color: inherit; -} -.dijit_a11y .dijitReset { - -moz-appearance: none; -} -.dijitInline { - - display:inline-block; - #zoom: 1; - #display:inline; - border:0; - padding:0; - vertical-align:middle; - #vertical-align: auto; -} -.dijitHidden { - - display: none !important; -} -.dijitVisible { - - display: block !important; - position: relative; -} -.dijitInputContainer { - - #zoom: 1; - overflow: hidden; - float: none !important; - position:relative; -} -.dj_ie INPUT.dijitTextBox, -.dj_ie .dijitTextBox INPUT { - font-size: 100%; -} -.dijitTextBox .dijitSpinnerButtonContainer, -.dijitTextBox .dijitArrowButtonContainer, -.dijitTextBox .dijitValidationContainer { - float: right; - text-align: center; -} -.dijitTextBox INPUT.dijitInputField { - - padding-left: 0 !important; - padding-right: 0 !important; -} -.dijitTextBox .dijitValidationContainer { - display: none; -} -.dijitInlineTable { - - display:inline-table; - display:inline-block; - #zoom: 1; - #display:inline; - box-sizing: content-box; -moz-box-sizing: content-box; - border:0; - padding:0; -} -.dijitTeeny { - font-size:1px; - line-height:1px; -} -.dijitOffScreen { - position: absolute; - visibility: hidden; - left: 50%; - top: -10000px; -} -.dijitPopup { - position: absolute; - background-color: transparent; - margin: 0; - border: 0; - padding: 0; -} -.dijit_a11y .dijitPopup, -.dijit_ally .dijitPopup DIV, -.dijit_a11y .dijitPopup TABLE, -.dijit_a11y .dijitTooltipContainer { - background-color: white !important; -} -.dijitPositionOnly { - - padding: 0 !important; - border: 0 !important; - background-color: transparent !important; - background-image: none !important; - height: auto !important; - width: auto !important; -} -.dijitNonPositionOnly { - - float: none !important; - position: static !important; - margin: 0 0 0 0 !important; - vertical-align: middle !important; -} -.dijitBackgroundIframe { - - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: -1; - border: 0; - padding: 0; - margin: 0; -} -.dijitDisplayNone { - - display:none !important; -} -.dijitContainer { - - overflow: hidden; -} -.dijit_a11y * { - background-image:none !important; -} -.dijit_a11y .dijitIcon, -.dijit_a11y DIV.dijitArrowButtonInner, -.dijit_a11y SPAN.dijitArrowButtonInner, -.dijit_a11y IMG.dijitArrowButtonInner, -.dijit_a11y .dijitCalendarIncrementControl { - - display: none; -} -.dijitSpinner DIV.dijitArrowButtonInner { - display: block; -} -.dijit_a11y .dijitA11ySideArrow { - display: inline !important; - cursor: pointer; -} -.dijit_a11y .dijitCalendarDateLabel { - padding: 1px; -} -.dijit_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel { - border-style: dotted !important; - border-width: 1px; - padding: 0px; -} -.dijit_a11y .dijitCalendarDateTemplate { - padding-bottom: 0.1em !important; -} -.dijit_a11y .dijit * { - background:white !important; - color:black !important; -} -.dijit_a11y .dijitButtonNode { - border-color: black!important; - border-style: outset!important; - border-width: medium!important; -} -.dijit_a11y .dijitTextBoxReadOnly .dijitInputField, -.dijit_a11y .dijitTextBoxReadOnly .dijitButtonNode { - border-style: outset!important; - border-width: medium!important; - border-color: #999 !important; - color:#999 !important; -} -.dijitButtonNode * { - vertical-align: middle; -} -.dijitButtonNode .dijitArrowButtonInner { - - background: no-repeat center; - width: 12px; - height: 12px; - direction: ltr; -} -.dijitLeft { - - background-position:left top; - background-repeat:no-repeat; -} -.dijitStretch { - - white-space:nowrap; - background-repeat:repeat-x; -} -.dijitRight { - - #display:inline; - background-position:right top; - background-repeat:no-repeat; -} -.dijitToggleButton, -.dijitButton, -.dijitDropDownButton, -.dijitComboButton { - - margin: 0.2em; -} -.dijitButtonContents { - display: block; -} -td.dijitButtonContents { - display: table-cell; -} -.dijitButtonNode IMG { - - vertical-align:middle; - -} -TABLE.dijitComboButton { - - border-collapse: collapse; - border:0; - padding:0; - margin:0; -} -.dijitToolbar .dijitComboButton { - - border-collapse: separate; -} -.dijitToolbar .dijitToggleButton, -.dijitToolbar .dijitButton, -.dijitToolbar .dijitDropDownButton, -.dijitToolbar .dijitComboButton { - margin: 0; -} -.dijitToolbar .dijitButtonContents { - - padding: 1px 2px; -} -.dj_ie .dijitComboButton { - - margin-bottom: -3px; -} -.dj_webkit .dijitToolbar .dijitDropDownButton { - padding-left: 0.3em; -} -.dj_gecko .dijitToolbar .dijitButtonNode::-moz-focus-inner { - padding:0; -} -.dijitButtonNode { - - border:1px solid gray; - margin:0; - line-height:normal; - vertical-align: middle; - #vertical-align: auto; - text-align:center; - white-space: nowrap; -} -.dj_webkit .dijitSpinner .dijitSpinnerButtonContainer { - - line-height:inherit; -} -.dijitTextBox .dijitButtonNode { - border-width: 0; -} -.dijitButtonNode, -.dijitButtonNode * { - cursor: pointer; -} -.dj_ie .dijitButtonNode { - - zoom: 1; -} -.dj_ie .dijitButtonNode button { - - overflow: visible; -} -DIV.dijitArrowButton { - float: right; -} -.dijitTextBox { - border: solid black 1px; - #overflow: hidden; - width: 15em; - vertical-align: middle; - #vertical-align: auto; -} -.dijitTextBoxReadOnly, -.dijitTextBoxDisabled { - color: gray; -} -.dj_webkit .dijitTextBoxDisabled INPUT { - color: #eee; -} -.dj_webkit TEXTAREA.dijitTextAreaDisabled { - color: #333; -} -.dj_gecko .dijitTextBoxReadOnly INPUT, -.dj_gecko .dijitTextBoxDisabled INPUT { - -moz-user-input: none; -} -.dijitPlaceHolder { - - color: #AAAAAA; - font-style: italic; - position: absolute; - top: 0; - left: 0; - #filter: ""; -} -.dijitTimeTextBox { - width: 8em; -} -.dijitTextBox INPUT:focus { - outline: none; -} -.dijitTextBoxFocused { - outline: auto 5px -webkit-focus-ring-color; -} -.dijitTextBox INPUT { - float: left; -} -.dijitInputInner { - - border:0 !important; - vertical-align:middle !important; - background-color:transparent !important; - width:100% !important; - - padding-left: 0 !important; - padding-right: 0 !important; - margin-left: 0 !important; - margin-right: 0 !important; -} -.dijit_a11y .dijitTextBox INPUT { - margin: 0 !important; -} -.dijitTextBoxError INPUT.dijitValidationInner, -.dijitTextBox INPUT.dijitArrowButtonInner { - - text-indent: -1em !important; - direction: ltr !important; - text-align: left !important; - height: auto !important; - #text-indent: 0 !important; - #letter-spacing: -5em !important; - #text-align: right !important; -} -.dj_ie .dijitTextBox INPUT, -.dj_ie INPUT.dijitTextBox { - overflow-y: visible; - line-height: normal; -} -.dj_ie7 .dijitTextBox INPUT.dijitValidationInner, -.dj_ie7 .dijitTextBox INPUT.dijitArrowButtonInner { - line-height: 86%; -} -.dj_ie6 .dijitTextBox INPUT, -.dj_ie6 INPUT.dijitTextBox, -.dj_iequirks .dijitTextBox INPUT.dijitValidationInner, -.dj_iequirks .dijitTextBox INPUT.dijitArrowButtonInner, -.dj_iequirks .dijitTextBox INPUT.dijitSpinnerButtonInner, -.dj_iequirks .dijitTextBox INPUT.dijitInputInner, -.dj_iequirks INPUT.dijitTextBox { - line-height: 100%; -} -.dijit_a11y INPUT.dijitValidationInner, -.dijit_a11y INPUT.dijitArrowButtonInner { - - text-indent: 0 !important; - width: 1em !important; - #text-align: left !important; -} -.dijitTextBoxError .dijitValidationContainer { - display: inline; - cursor: default; -} -.dijitSpinner .dijitSpinnerButtonContainer, -.dijitComboBox .dijitArrowButtonContainer { - - border-width: 0 0 0 1px !important; -} -.dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode { - - border-width: 0; -} -.dj_ie .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode { - clear: both; -} -.dijit_a11y .dijitTextBox .dijitValidationContainer, -.dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer, -.dijit_a11y .dijitComboBox .dijitArrowButtonContainer { - - border: solid black !important; - border-width: 0 0 0 1px !important; -} -.dj_ie .dijitToolbar .dijitComboBox { - - vertical-align: middle; -} -.dijitTextBox .dijitSpinnerButtonContainer { - width: 1em; - position: relative !important; - overflow: hidden; -} -.dijitSpinner .dijitSpinnerButtonInner { - width:1em; - visibility:hidden !important; - overflow-x:hidden; -} -.dijitComboBox .dijitButtonNode, -.dijitSpinnerButtonContainer .dijitButtonNode { - border-width: 0; -} -.dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode { - border: 0 none !important; -} -.dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer, -.dijit_a11y .dijitSpinner .dijitArrowButtonInner, -.dijit_a11y .dijitSpinnerButtonContainer INPUT { - width: 1em !important; -} -.dijit_a11y .dijitSpinner .dijitArrowButtonInner { - margin: 0 auto !important; -} -.dj_ie .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { - padding-left: 0.3em !important; - padding-right: 0.3em !important; - margin-left: 0.3em !important; - margin-right: 0.3em !important; - width: 1.4em !important; -} -.dj_ie7 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { - padding-left: 0.0em !important; - padding-right: 0.0em !important; - width: 1em !important; -} -.dj_ie6 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { - margin-left: 0.1em !important; - margin-right: 0.1em !important; - width: 1em !important; -} -.dj_iequirks .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { - margin-left: 0 !important; - margin-right: 0 !important; - width: 2em !important; -} -.dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { - - padding: 0; - position: absolute !important; - right: 0; - float: none; - height: 50%; - width: 100%; - bottom: auto; - left: 0; - right: auto; -} -.dj_iequirks .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { - width: auto; -} -.dijit_a11y .dijitSpinnerButtonContainer .dijitArrowButton { - overflow: visible !important; -} -.dijitSpinner .dijitSpinnerButtonContainer .dijitDownArrowButton { - top: 50%; - border-top-width: 1px !important; -} -.dijitSpinner .dijitSpinnerButtonContainer .dijitUpArrowButton { - #bottom: 50%; - top: 0; -} -.dijitSpinner .dijitArrowButtonInner { - margin: auto; - overflow-x: hidden; - height: 100% !important; -} -.dj_iequirks .dijitSpinner .dijitArrowButtonInner { - height: auto !important; -} -.dijitSpinner .dijitArrowButtonInner .dijitInputField { - -moz-transform: scale(0.5); - -moz-transform-origin: center top; - -webkit-transform: scale(0.5); - -webkit-transform-origin: center top; - -o-transform: scale(0.5); - -o-transform-origin: center top; - transform: scale(0.5); - transform-origin: left top; - padding-top: 0; - padding-bottom: 0; - padding-left: 0 !important; - padding-right: 0 !important; - width: 100%; -} -.dj_ie .dijitSpinner .dijitArrowButtonInner .dijitInputField { - zoom: 50%; -} -.dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButtonInner { - overflow: hidden; -} -.dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { - width: 100%; -} -.dj_iequirks .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { - width: 1em; -} -.dijitSpinner .dijitArrowButtonInner .dijitInputField { - visibility: hidden; -} -.dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { - vertical-align:top; - visibility: visible; -} -.dijit_a11y .dijitSpinnerButtonContainer { - width: 1em; -} -.dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode { - border-width: 1px 0px 0px 0px; - border-style: solid !important; -} -.dijitCheckBox, -.dijitRadio, -.dijitCheckBoxInput { - padding: 0; - border: 0; - width: 16px; - height: 16px; - background-position:center center; - background-repeat:no-repeat; - overflow: hidden; -} -.dijitCheckBox INPUT, -.dijitRadio INPUT { - margin: 0; - padding: 0; - display: block; -} -.dijitCheckBoxInput { - - opacity: 0.01; -} -.dj_ie .dijitCheckBoxInput { - filter: alpha(opacity=0); -} -.dijit_a11y .dijitCheckBox, -.dijit_a11y .dijitRadio { - - width: auto !important; - height: auto !important; -} -.dijit_a11y .dijitCheckBoxInput { - opacity: 1; - filter: none; - width: auto; - height: auto; -} -.dijitProgressBarEmpty { - - position:relative;overflow:hidden; - border:1px solid black; - z-index:0; -} -.dijitProgressBarFull { - - position:absolute; - overflow:hidden; - z-index:-1; - top:0; - width:100%; -} -.dj_ie6 .dijitProgressBarFull { - height:1.6em; -} -.dijitProgressBarTile { - - position:absolute; - overflow:hidden; - top:0; - left:0; - bottom:0; - right:0; - margin:0; - padding:0; - width:auto; - height:auto; - background-color:#aaa; - background-attachment: fixed; -} -.dijit_a11y .dijitProgressBarTile { - - border-width:2px; - border-style:solid; - background-color:transparent !important; -} -.dj_ie6 .dijitProgressBarTile { - - position:static; - - height:1.6em; -} -.dijitProgressBarIndeterminate .dijitProgressBarLabel { - visibility:hidden; -} -.dijitProgressBarIndeterminate .dijitProgressBarTile { - -} -.dijitProgressBarIndeterminateHighContrastImage { - display:none; -} -.dijit_a11y .dijitProgressBarIndeterminate .dijitProgressBarIndeterminateHighContrastImage { - display:block; - position:absolute; - top:0; - bottom:0; - margin:0; - padding:0; - width:100%; - height:auto; -} -.dijitProgressBarLabel { - display:block; - position:static; - width:100%; - text-align:center; - background-color:transparent !important; -} -.dijitTooltip { - position: absolute; - z-index: 2000; - display: block; - - left: 50%; - top: -10000px; - overflow: visible; -} -.dijitTooltipContainer { - border: solid black 2px; - background: #b8b5b5; - color: black; - font-size: small; -} -.dijitTooltipFocusNode { - padding: 2px 2px 2px 2px; -} -.dijitTooltipConnector { - position: absolute; -} -.dijit_a11y .dijitTooltipConnector { - display: none; -} -.dijitTooltipData { - display:none; -} -.dijitLayoutContainer { - position: relative; - display: block; - overflow: hidden; -} -body .dijitAlignTop, -body .dijitAlignBottom, -body .dijitAlignLeft, -body .dijitAlignRight { - position: absolute; - overflow: hidden; -} -body .dijitAlignClient { position: absolute; } -.dijitBorderContainer, .dijitBorderContainerNoGutter { - position:relative; - overflow: hidden; -} -.dijitBorderContainerPane, -.dijitBorderContainerNoGutterPane { - position: absolute !important; - z-index: 2; -} -.dijitBorderContainer > .dijitTextArea { - - resize: none; -} -.dijitGutter { - - position: absolute; - font-size: 1px; -} -.dijitSplitter { - position: absolute; - overflow: hidden; - z-index: 10; - background-color: #fff; - border-color: gray; - border-style: solid; - border-width: 0; -} -.dj_ie .dijitSplitter { - z-index: 1; -} -.dijitSplitterActive { - z-index: 11 !important; -} -.dijitSplitterCover { - position:absolute; - z-index:-1; - top:0; - left:0; - width:100%; - height:100%; -} -.dijitSplitterCoverActive { - z-index:3 !important; -} -.dj_ie .dijitSplitterCover { - background: white; - filter: alpha(opacity=0); -} -.dijitSplitterH { - height: 7px; - border-top:1px; - border-bottom:1px; - cursor: ns-resize; -} -.dijitSplitterV { - width: 7px; - border-left:1px; - border-right:1px; - cursor: ew-resize; -} -.dijitSplitContainer { - position: relative; - overflow: hidden; - display: block; -} -.dj_ff3 .dijit_a11y div.dijitSplitter:focus { - outline-style:dotted; - outline-width: 2px; -} -.dijitSplitPane { - position: absolute; -} -.dijitSplitContainerSizerH, -.dijitSplitContainerSizerV { - position:absolute; - font-size: 1px; - cursor: move; - cursor: w-resize; - background-color: ThreeDFace; - border: 1px solid; - border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight; - margin: 0; -} -.dijitSplitContainerSizerH .thumb, .dijitSplitterV .dijitSplitterThumb { - overflow:hidden; - position:absolute; - top:49%; -} -.dijitSplitContainerSizerV .thumb, .dijitSplitterH .dijitSplitterThumb { - position:absolute; - left:49%; -} -.dijitSplitterShadow, -.dijitSplitContainerVirtualSizerH, -.dijitSplitContainerVirtualSizerV { - font-size: 1px; - background-color: ThreeDShadow; - -moz-opacity: 0.5; - opacity: 0.5; - filter: Alpha(Opacity=50); - margin: 0; -} -.dj_ie .dijitSplitterV, .dijitSplitContainerVirtualSizerH { - cursor: w-resize; -} -.dj_ie .dijitSplitterH, .dijitSplitContainerSizerV, .dijitSplitContainerVirtualSizerV { - cursor: n-resize; -} -.dijit_a11y .dijitSplitterH { - border-top:1px solid #d3d3d3 !important; - border-bottom:1px solid #d3d3d3 !important; -} -.dijit_a11y .dijitSplitterV { - border-left:1px solid #d3d3d3 !important; - border-right:1px solid #d3d3d3 !important; -} -.dijitContentPane { - display: block; - overflow: auto; -} -.dijitContentPaneSingleChild { - - overflow: hidden; -} -.dijitTitlePane { - display: block; - overflow: hidden; -} -.dijitTitlePaneTitle { - cursor: pointer; -} -.dijitFixedOpen { - - cursor: default; -} -.dijitTitlePaneTitle * { - vertical-align: middle; -} -.dijitTitlePane .dijitArrowNodeInner { - - display: none; -} -.dijit_a11y .dijitTitlePane .dijitArrowNodeInner { - - display:inline !important; - font-family: monospace; -} -.dijit_a11y .dijitTitlePane .dijitArrowNode { - - display:none; -} -.dj_ie6 .dijitTitlePaneContentOuter, -.dj_ie6 .dijitTitlePane .dijitTitlePaneTitle { - - zoom: 1; -} -.dijitColorPalette { - border: 1px solid #999; - background: #fff; - position: relative; -} -img.dijitColorPaletteUnder { - - border-style: none; - position: absolute; - left: 0; - top: 0; -} -.dijitColorPalette .dijitPaletteTable { - - padding: 2px 3px 3px 3px; - position: relative; - overflow: hidden; - outline: 0; - border-collapse: separate; -} -.dj_ie6 .dijitColorPalette .dijitPaletteTable, -.dj_ie7 .dijitColorPalette .dijitPaletteTable, -.dj_iequirks .dijitColorPalette .dijitPaletteTable { - - padding: 0; - margin: 2px 3px 3px 3px; -} -.dijitColorPalette .dijitPaletteCell { - - height: 20px; - width: 20px; - font-size: 1px; - vertical-align: middle; - text-align: center; -} -.dijitColorPalette .dijitPaletteImg { - - width: 16px; - height: 14px; - border: 1px solid #999; - cursor: default; - vertical-align: middle; -} -.dj_iequirks .dijitColorPalette .dijitPaletteImg { - margin: 1px; -} -.dijitPaletteTable td { - padding: 0px; -} -.dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg { - - border: 1px solid #000; -} -.dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg, -.dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg { - border: 2px solid #000; -} -.dijit_a11y .dijitColorPalette .dijitPaletteTable, -.dijit_a11y .dijitColorPalette .dijitPaletteTable * { - - background-color: transparent !important; -} -.dj_gecko .dijit_a11y .dijitColorPalette .dijitPaletteCellFocused .dijitPaletteImg { - border: 3px dotted #000; - margin: -1px; -} -.dijit_a11y .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg { - border: 2px solid #000 !important; -} -.dijitAccordionContainer { - border:1px solid #b7b7b7; - border-top:0 !important; -} -.dijitAccordionTitle { - cursor: pointer; -} -.dijitAccordionTitleSelected { - cursor: default; -} -.dijitAccordionTitle .arrowTextUp, -.dijitAccordionTitle .arrowTextDown { - display: none; - font-size: 0.65em; - font-weight: normal !important; -} -.dijit_a11y .dijitAccordionTitle .arrowTextUp, -.dijit_a11y .dijitAccordionTitleSelected .arrowTextDown { - display: inline; -} -.dijit_a11y .dijitAccordionTitleSelected .arrowTextUp { - display: none; -} -.dj_ie6 .dijitAccordionTitle, -.dj_iequirks .dijitAccordionTitle { - - zoom: 1; -} -.dijitCalendarContainer { - width: auto; -} -.dijitCalendarContainer th, .dijitCalendarContainer td { - padding: 0; -} -.dijitCalendarNextYear { - margin:0 0 0 0.55em; -} -.dijitCalendarPreviousYear { - margin:0 0.55em 0 0; -} -.dijitCalendarIncrementControl { - vertical-align: middle; -} -.dijitCalendarIncrementControl, -.dijitCalendarDateTemplate, -.dijitCalendarMonthLabel, -.dijitCalendarPreviousYear, -.dijitCalendarNextYear { - cursor: pointer; -} -.dijitCalendarDisabledDate { - color: gray; - text-decoration: line-through; - cursor: default; -} -.dijitSpacer { - - position: relative; - height: 1px; - overflow: hidden; - visibility: hidden; -} -.dijitMenu { - border:1px solid black; - background-color:white; -} -.dijitMenuTable { - border-collapse:collapse; - border-width:0; - background-color:white; -} -.dj_webkit .dijitMenuTable td[colspan="2"]{ - border-right:hidden; -} -.dijitMenuItem { - text-align: left; - white-space: nowrap; - padding:.1em .2em; - cursor:pointer; -} -.dijitMenuPassive .dijitMenuItemHover, -.dijitMenuItemSelected { - - background-color:black; - color:white; -} -.dijitMenuItemIcon, .dijitMenuExpand { - background-repeat: no-repeat; -} -.dijitMenuItemDisabled * { - - opacity:0.5; - cursor:default; -} -.dj_ie .dijit_a11y .dijitMenuItemDisabled, -.dj_ie .dijit_a11y .dijitMenuItemDisabled td, -.dj_ie .dijitMenuItemDisabled *, -.dj_ie .dijitMenuItemDisabled td { - color:gray !important; - filter: alpha(opacity=35); -} -.dijitMenuItemLabel { - position: relative; - vertical-align: middle; -} -.dijit_a11y .dijitMenuItemSelected { - border: 1px dotted black !important; -} -.dj_ff3 .dijit_a11y .dijitMenuItem td { - padding: none !important; - background:none !important; -} -.dijit_a11y .dijitMenuItemSelected .dijitMenuItemLabel { - border-width: 1px; - border-style: solid; -} -.dj_ie8 .dijit_a11y .dijitMenuItemLabel { - position:static; -} -.dijitMenuExpandA11y { - display: none; -} -.dijit_a11y .dijitMenuExpandA11y { - display: inline; -} -.dijitMenuSeparator td { - border: 0; - padding: 0; -} -.dijitMenuSeparatorTop { - height: 50%; - margin: 0; - margin-top:3px; - font-size: 1px; -} -.dijitMenuSeparatorBottom { - height: 50%; - margin: 0; - margin-bottom:3px; - font-size: 1px; -} -.dijitCheckedMenuItemIconChar { - vertical-align: middle; - visibility:hidden; -} -.dijitCheckedMenuItemChecked .dijitCheckedMenuItemIconChar { - visibility: visible; -} -.dijit_a11y .dijitCheckedMenuItemIconChar { - display:inline !important; -} -.dijit_a11y .dijitCheckedMenuItemIcon { - display: none; -} -.dj_ie .dijit_a11y .dijitMenuBar .dijitMenuItem { - - margin: 0px; -} -.dijitStackController .dijitToggleButtonChecked * { - cursor: default; -} -.dijitTabContainerNoLayout { - width: 100%; -} -.dijitTabContainerBottom-tabs, -.dijitTabContainerTop-tabs, -.dijitTabContainerLeft-tabs, -.dijitTabContainerRight-tabs { - overflow: visible !important; -} -.dijitTabContainerBottom-container, -.dijitTabContainerTop-container, -.dijitTabContainerLeft-container, -.dijitTabContainerRight-container { - z-index:0; - overflow: hidden; - border: 1px solid black; -} -.nowrapTabStrip { - width: 50000px; - display: block; - position: relative; -} -.dijitTabListWrapper { - overflow: hidden; -} -.dijit_a11y .tabStripButton img { - - display: none; -} -.dijitTabContainerTop-tabs { - border-bottom: 1px solid black; -} -.dijitTabContainerTop-container { - border-top: 0px; -} -.dijitTabContainerLeft-tabs { - border-right: 1px solid black; - float: left; -} -.dijitTabContainerLeft-container { - border-left: 0px; -} -.dijitTabContainerBottom-tabs { - border-top: 1px solid black; -} -.dijitTabContainerBottom-container { - border-bottom: 0px; -} -.dijitTabContainerRight-tabs { - border-left: 1px solid black; - float: left; -} -.dijitTabContainerRight-container { - border-right: 0px; -} -DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled { - cursor: auto; -} -.dijitTab { - position:relative; - cursor:pointer; - white-space:nowrap; - z-index:3; -} -.dijitTab * { - - vertical-align: middle; -} -.dijitTabChecked { - cursor: default; -} -.dijitTabContainerTop-tabs .dijitTab { - top: 1px; -} -.dijitTabContainerBottom-tabs .dijitTab { - top: -1px; -} -.dijitTabContainerLeft-tabs .dijitTab { - left: 1px; -} -.dijitTabContainerRight-tabs .dijitTab { - left: -1px; -} -.dijitTabContainerTop-tabs .dijitTab, -.dijitTabContainerBottom-tabs .dijitTab { - - display:inline-block; - #zoom: 1; - #display:inline; -} -.dijitTabInnerDiv { - position:relative; -} -.tabStripButton { - z-index: 12; -} -.dijitTabButtonDisabled .tabStripButton { - display: none; -} -.dijitTabCloseButton { - margin-left: 1em; -} -.dijitTabCloseText { - display:none; -} -.dijit_a11y .dijitTabCloseButton { - background-image: none !important; - width: auto !important; - height: auto !important; - border: thin dotted; -} -.dijit_a11y .dijitTabCloseButtonHover { - border:thin solid; -} -.dijit_a11y .dijitTabCloseText { - display: inline; -} -.dijit_a11y .dijitTabChecked { - - border-style:dashed !important; -} -.dijit_a11y .dijitTabInnerDiv { - border-left:none !important; - } -.dijitTabPane, -.dijitStackContainer-child, -.dijitAccordionContainer-child { - - border: none !important; -} -.dijitInlineEditBoxDisplayMode { - border: 1px solid transparent; - cursor: text; -} -.dijit_a11y .dijitInlineEditBoxDisplayMode, -.dj_ie6 .dijitInlineEditBoxDisplayMode { - - border: none; -} -.dijitInlineEditBoxDisplayModeHover, -.dijit_a11y .dijitInlineEditBoxDisplayModeHover, -.dj_ie6 .dijitInlineEditBoxDisplayModeHover { - - background-color: #e2ebf2; - border: solid 1px black; -} -.dijitInlineEditBoxDisplayModeDisabled { - cursor: default; -} -.dijitTreeIndent { - - width: 19px; -} -.dijitTreeRow, .dijitTreeContent { - white-space: nowrap; -} -.dijitTreeRow img { - - vertical-align: middle; -} -.dijitTreeContent { - cursor: default; -} -.dijitExpandoText { - display: none; -} -.dijit_a11y .dijitExpandoText { - display: inline; - padding-left: 10px; - padding-right: 10px; - font-family: monospace; - border-style: solid; - border-width: thin; - cursor: pointer; -} -.dijitTreeLabel { - margin: 0px 4px; -} -.dijitDialog { - position: absolute; - z-index: 999; - overflow: hidden; -} -.dijitDialogTitleBar { - cursor: move; -} -.dijitDialogFixed .dijitDialogTitleBar { - cursor:default; -} -.dijitDialogCloseIcon { - cursor: pointer; -} -.dijitDialogUnderlayWrapper { - position: absolute; - left: 0; - top: 0; - z-index: 998; - display: none; - background: transparent !important; -} -.dijitDialogUnderlay { - background: #eee; - opacity: 0.5; -} -.dj_ie .dijitDialogUnderlay { - filter: alpha(opacity=50); -} -.dijit_a11y .dijitSpinnerButtonContainer, -.dijit_a11y .dijitDialog { - opacity: 1 !important; - background-color: white !important; -} -.dijitDialog .closeText { - display:none; - - position:absolute; -} -.dijit_a11y .dijitDialog .closeText { - display:inline; -} -.dijitSliderMoveable { - z-index:99; - position:absolute !important; - display:block; - vertical-align:middle; -} -.dijitSliderMoveableH { - right:0; -} -.dijitSliderMoveableV { - right:50%; -} -.dijit_a11y DIV.dijitSliderImageHandle, -.dijitSliderImageHandle { - margin:0; - padding:0; - position:relative !important; - border:8px solid gray; - width:0; - height:0; - cursor: pointer; -} -.dj_iequirks .dijit_a11y .dijitSliderImageHandle { - font-size: 0; -} -.dj_ie7 .dijitSliderImageHandle { - overflow: hidden; -} -.dj_ie7 .dijit_a11y .dijitSliderImageHandle { - overflow: visible; -} -.dijit_a11y .dijitSliderFocused .dijitSliderImageHandle { - border:4px solid #000; - height:8px; - width:8px; -} -.dijitSliderImageHandleV { - top:-8px; - right: -50%; -} -.dijitSliderImageHandleH { - left:50%; - top:-5px; - vertical-align:top; -} -.dijitSliderBar { - border-style:solid; - border-color:black; - cursor: pointer; -} -.dijitSliderBarContainerV { - position:relative; - height:100%; - z-index:1; -} -.dijitSliderBarContainerH { - position:relative; - z-index:1; -} -.dijitSliderBarH { - height:4px; - border-width:1px 0; -} -.dijitSliderBarV { - width:4px; - border-width:0 1px; -} -.dijitSliderProgressBar { - background-color:red; - z-index:1; -} -.dijitSliderProgressBarV { - position:static !important; - height:0%; - vertical-align:top; - text-align:left; -} -.dijitSliderProgressBarH { - position:absolute !important; - width:0%; - vertical-align:middle; - overflow:visible; -} -.dijitSliderRemainingBar { - overflow:hidden; - background-color:transparent; - z-index:1; -} -.dijitSliderRemainingBarV { - height:100%; - text-align:left; -} -.dijitSliderRemainingBarH { - width:100% !important; -} -.dijitSliderBumper { - overflow:hidden; - z-index:1; -} -.dijitSliderBumperV { - width:4px; - height:8px; - border-width:0 1px; -} -.dijitSliderBumperH { - width:8px; - height:4px; - border-width:1px 0; -} -.dijitSliderBottomBumper, -.dijitSliderLeftBumper { - background-color:red; -} -.dijitSliderTopBumper, -.dijitSliderRightBumper { - background-color:transparent; -} -.dijitSliderDecoration { - text-align:center; -} -.dijitSliderV TD { - position: relative; -} -.dijitSliderDecorationH { - width: 100%; -} -.dijitSliderDecorationV { - height: 100%; -} -.dijitSliderButton { - font-family:monospace; - margin:0; - padding:0; - display:block; -} -.dijit_a11y .dijitSliderButtonInner { - visibility:visible !important; -} -.dijitSliderButtonContainer { - text-align:center; - height:0; -} -.dijitSliderButtonContainer * { - cursor: pointer; -} -.dijitSlider .dijitButtonNode { - padding:0; - display:block; -} -.dijitRuleContainer { - position:relative; - overflow:visible; -} -.dijitRuleContainerV { - height:100%; - line-height:0; - float:left; - text-align:left; -} -.dj_opera .dijitRuleContainerV { - line-height:2%; -} -.dj_ie .dijitRuleContainerV { - line-height:normal; -} -.dj_gecko .dijitRuleContainerV { - margin:0 0 1px 0; -} -.dijitRuleMark { - position:absolute; - border:1px solid black; - line-height:0; - height:100%; -} -.dijitRuleMarkH { - width:0; - border-top-width:0 !important; - border-bottom-width:0 !important; - border-left-width:0 !important; -} -.dijitRuleLabelContainer { - position:absolute; -} -.dijitRuleLabelContainerH { - text-align:center; - display:inline-block; -} -.dijitRuleLabelH { - position:relative; - left:-50%; -} -.dijitRuleLabelV { - - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} -.dijitRuleMarkV { - height:0; - border-right-width:0 !important; - border-bottom-width:0 !important; - border-left-width:0 !important; - width:100%; - left:0; -} -.dj_ie .dijitRuleLabelContainerV { - margin-top:-.55em; -} -.dijit_a11y .dijitSliderReadOnly, -.dijit_a11y .dijitSliderDisabled { - opacity:0.6; -} -.dj_ie .dijit_a11y .dijitSliderReadOnly .dijitSliderBar, -.dj_ie .dijit_a11y .dijitSliderDisabled .dijitSliderBar { - filter: alpha(opacity=40); -} -.dijit_a11y .dijitSlider .dijitSliderButtonContainer DIV { - font-family: monospace; - font-size: 1em; - line-height: 1em; - height: auto; - width: auto; - margin: 0px 4px; -} -.dijit_a11y .dijitButtonContents .dijitButtonText, -.dijit_a11y .dijitTab .tabLabel { - display: inline !important; -} -.dijitTextArea { - width:100%; - overflow-y: auto; -} -.dijitTextArea[cols] { - width:auto; -} -.dj_ie .dijitTextAreaCols { - width:auto; -} -.dijitToolbarSeparator { - height: 18px; - width: 5px; - padding: 0 1px; - margin: 0; -} -.dijitIEFixedToolbar { - position:absolute; - - top: expression(eval((document.documentElement||document.body).scrollTop)); -} -.dijitEditor { - display: block; -} -.dijitEditorDisabled, -.dijitEditorReadOnly { - color: gray; -} -.dijitTimePickerItemInner { - text-align:center; - border:0; - padding:2px 8px 2px 8px; -} -.dijitTimePickerTick, -.dijitTimePickerMarker { - border-bottom:1px solid gray; -} -.dijitTimePicker .dijitDownArrowButton { - border-top: none !important; -} -.dijitTimePickerTick { - color:#CCC; -} -.dijitTimePickerMarker { - color:black; - background-color:#CCC; -} -.dijitTimePickerItemSelected { - font-weight:bold; - color:#333; - background-color:#b7cdee; -} -.dijitTimePickerItemHover { - background-color:gray; - color:white; - cursor:pointer; -} -.dijit_a11y .dijitTimePickerItemSelected .dijitTimePickerItemInner { - border: solid 4px black; -} -.dijit_a11y .dijitTimePickerItemHover .dijitTimePickerItemInner { - border: dashed 4px black; -} -.dijitToggleButtonIconChar { - - display:none !important; -} -.dijit_a11y .dijitToggleButton .dijitToggleButtonIconChar { - display:inline !important; - visibility:hidden; -} -.dj_ie6 .dijitToggleButtonIconChar, .dj_ie6 .tabStripButton .dijitButtonText { - font-family: "Arial Unicode MS"; -} -.dijit_a11y .dijitToggleButtonChecked .dijitToggleButtonIconChar { - display: inline !important; - visibility:visible !important; -} -.dijitArrowButtonChar { - display:none !important; -} -.dijit_a11y .dijitArrowButtonChar { - display:inline !important; -} -.dijit_a11y .dijitDropDownButton .dijitArrowButtonInner, -.dijit_a11y .dijitComboButton .dijitArrowButtonInner { - display:none !important; -} -.dijitSelect { - margin: 0.2em; - border-collapse: collapse; -} -.dj_ie .dijitSelect, -.dj_ie7 .dijitSelect, -.dj_iequirks .dijitSelect { - vertical-align: middle; -} -.dj_ie8 .dijitSelect .dijitButtonText { - vertical-align: top; -} -.dijitToolbar .dijitSelect { - margin: 0; -} -.dj_webkit .dijitToolbar .dijitSelect { - padding-left: 0.3em; -} -.dijit_a11y .dijitSelectDisabled .dijitButtonNode { - border-style: outset!important; - border-width: medium!important; - border-color: #999 !important; - color:#999 !important; -} -.dijitSelect .dijitButtonContents { - padding: 0px; - background: transparent none; - white-space: nowrap; - text-align: left; -} -.dijitSelectFixedWidth .dijitButtonContents { - width: 100%; -} -.dijitSelectMenu .dijitMenuItemIcon { - - display:none; -} -.dj_ie6 .dijitSelectMenu .dijitMenuItemLabel, -.dj_ie7 .dijitSelectMenu .dijitMenuItemLabel { - - position: static; -} -.dijitSelectLabel * -{ - vertical-align: baseline; -} -.dijitSelectSelectedOption * { - font-weight: bold; -} -.dijitSelectMenu { - border-width: 1px; -} -.dijitSelectMenu .dijitMenuTable { - margin: 0px; - background-color: transparent; -} -.dijitForceStatic { - position: static !important; -} -.dijitReadOnly *, -.dijitDisabled *, -.dijitReadOnly, -.dijitDisabled { - - cursor: default; -} -.claro { - font-family:Verdana,Arial,Helvetica,sans-serif; - font-size: .688em; - color: #131313; -} -h1 { - font-size: 1.545em; - font-weight: normal; - line-height: 1em; - margin-top: 1em; - margin-bottom:0.727em; -} -.claro .dijitDialog h1 { - margin-top:0em; -} -h2 { - font-size: 1.364em; - line-height: 1.455em; - margin-top:1em; - margin-bottom:0.60em; - font-weight: normal; -} -h3, h4, h5, h6 { - font-size:1.091em; - font-weight: normal; - line-height: 1.5em; - margin-top: 1.5em; - margin-bottom: 0; -} -p { - font-size: 1em; - line-height: 1.3em; -} -blockquote { - font-size: 0.916em; - margin-top: 3.272em; - margin-bottom: 3.272em; - line-height: 1.636em; - padding: 1.636em; - border-top: 1px solid #ccc; - border-bottom: 1px solid #ccc; -} -ol li, ul li { - font-size: 1em; - line-height: 1.5em; - margin: 0; -} -pre, code { - font-size:115%; - *font-size:100%; - font-family:inherit; - background-color: #efefef; - border: 1px solid #ccc; -} -pre { - border-width: 1px 0; - padding: 1.5em; -} -table { font-size:100%; } -table.dojoTabular { - border-collapse: collapse; - border-spacing: 0; - border: 1px solid #ccc; - margin: 0 1.5em; -} -.dojoTabular th { - text-align: center; - font-weight: bold; -} -table.dojoTabular thead, table.dojoTabular tfoot { - background-color: #efefef; - border: 1px solid #ccc; - border-width: 1px 0; -} -table.dojoTabular thead tr th, -table.dojoTabular thead tr td, -table.dojoTabular tbody tr td, -table.dojoTabular tfoot tr td { - padding: 0.25em 0.5em; -} - -.dijitIconSave, -.dijitIconPrint, -.dijitIconCut, -.dijitIconCopy, -.dijitIconClear, -.dijitIconDelete, -.dijitIconUndo, -.dijitIconEdit, -.dijitIconNewTask, -.dijitIconEditTask, -.dijitIconEditProperty, -.dijitIconTask, -.dijitIconFilter, -.dijitIconConfigure, -.dijitIconSearch, -.dijitIconApplication, -.dijitIconBookmark, -.dijitIconChart, -.dijitIconConnector, -.dijitIconDatabase, -.dijitIconDocuments, -.dijitIconMail, -.dijitLeaf, -.dijitIconFile, -.dijitIconFunction, -.dijitIconKey, -.dijitIconPackage, -.dijitIconSample, -.dijitIconTable, -.dijitIconUsers, -.dijitFolderClosed, -.dijitIconFolderClosed, -.dijitFolderOpened, -.dijitIconFolderOpen, -.dijitIconError { - background-image: url(../../icons/images/commonIconsObjActEnabled.png); - width: 16px; - height: 16px; -} -.dj_ie6 .dijitIconSave, -.dj_ie6 .dijitIconPrint, -.dj_ie6 .dijitIconCut, -.dj_ie6 .dijitIconCopy, -.dj_ie6 .dijitIconClear, -.dj_ie6 .dijitIconDelete, -.dj_ie6 .dijitIconUndo, -.dj_ie6 .dijitIconEdit, -.dj_ie6 .dijitIconNewTask, -.dj_ie6 .dijitIconEditTask, -.dj_ie6 .dijitIconEditProperty, -.dj_ie6 .dijitIconTask, -.dj_ie6 .dijitIconFilter, -.dj_ie6 .dijitIconConfigure, -.dj_ie6 .dijitIconSearch, -.dj_ie6 .dijitIconApplication, -.dj_ie6 .dijitIconBookmark, -.dj_ie6 .dijitIconChart, -.dj_ie6 .dijitIconConnector, -.dj_ie6 .dijitIconDatabase, -.dj_ie6 .dijitIconDocuments, -.dj_ie6 .dijitIconMail, -.dj_ie6 .dijitLeaf, -.dj_ie6 .dijitIconFile, -.dj_ie6 .dijitIconFunction, -.dj_ie6 .dijitIconKey, -.dj_ie6 .dijitIconPackage, -.dj_ie6 .dijitIconSample, -.dj_ie6 .dijitIconTable, -.dj_ie6 .dijitIconUsers, -.dj_ie6 .dijitFolderClosed, -.dj_ie6 .dijitIconFolderClosed, -.dj_ie6 .dijitFolderOpened, -.dj_ie6 .dijitIconFolderOpen, -.dj_ie6 .dijitIconError { - background-image: url(../../icons/images/commonIconsObjActEnabled8bit.png); -} -.dijitDisabled .dijitIconSave, -.dijitDisabled .dijitIconPrint, -.dijitDisabled .dijitIconCut, -.dijitDisabled .dijitIconCopy, -.dijitDisabled .dijitIconClear, -.dijitDisabled .dijitIconDelete, -.dijitDisabled .dijitIconUndo, -.dijitDisabled .dijitIconEdit, -.dijitDisabled .dijitIconNewTask, -.dijitDisabled .dijitIconEditTask, -.dijitDisabled .dijitIconEditProperty, -.dijitDisabled .dijitIconTask, -.dijitDisabled .dijitIconFilter, -.dijitDisabled .dijitIconConfigure, -.dijitDisabled .dijitIconSearch, -.dijitDisabled .dijitIconApplication, -.dijitDisabled .dijitIconBookmark, -.dijitDisabled .dijitIconChart, -.dijitDisabled .dijitIconConnector, -.dijitDisabled .dijitIconDatabase, -.dijitDisabled .dijitIconDocuments, -.dijitDisabled .dijitIconMail, -.dijitDisabled .dijitLeaf, -.dijitDisabled .dijitIconFile, -.dijitDisabled .dijitIconFunction, -.dijitDisabled .dijitIconKey, -.dijitDisabled .dijitIconPackage, -.dijitDisabled .dijitIconSample, -.dijitDisabled .dijitIconTable, -.dijitDisabled .dijitIconUsers, -.dijitDisabled .dijitFolderClosed, -.dijitDisabled .dijitIconFolderClosed, -.dijitDisabled .dijitFolderOpened, -.dijitDisabled .dijitIconFolderOpen, -.dijitDisabled .dijitIconError { - background-image: url(../../icons/images/commonIconsObjActDisabled.png); -} -.dijitIconSave { background-position: 0px; } -.dijitIconPrint { background-position: -16px; } -.dijitIconCut { background-position: -32px; } -.dijitIconCopy { background-position: -48px; } -.dijitIconClear { background-position: -64px; } -.dijitIconDelete { background-position: -80px; } -.dijitIconUndo { background-position: -96px; } -.dijitIconEdit { background-position: -112px; } -.dijitIconNewTask { background-position: -128px; } -.dijitIconEditTask { background-position: -144px; } -.dijitIconEditProperty { background-position: -166px; } -.dijitIconTask { background-position: -176px; } -.dijitIconFilter { background-position: -192px; } -.dijitIconConfigure { background-position: -208px; } -.dijitIconSearch { background-position: -224px; } -.dijitIconError { background-position: -496px; } -.dijitIconApplication { background-position: -240px; } -.dijitIconBookmark { background-position: -256px; } -.dijitIconChart { background-position: -272px; } -.dijitIconConnector { background-position: -288px; } -.dijitIconDatabase { background-position: -304px; } -.dijitIconDocuments { background-position: -320px; } -.dijitIconMail { background-position: -336px; } -.dijitIconFile, .dijitLeaf { background-position: -352px; } -.dijitIconFunction { background-position: -368px; } -.dijitIconKey { background-position: -384px; } -.dijitIconPackage{ background-position: -400px; } -.dijitIconSample { background-position: -416px; } -.dijitIconTable { background-position: -432px; } -.dijitIconUsers { background-position: -448px; } -.dijitIconFolderClosed, .dijitFolderClosed { background-position: -464px; } -.dijitIconFolderOpen, .dijitFolderOpened { background-position: -480px; } -.claro .dijitPopup { - box-shadow: 0px 1px 5px rgba(0,0,0,0.25); - -webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.25); - -moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.25); -} -.claro .dijitTooltipDialogPopup { - - box-shadow: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; -} -.claro .dijitComboBoxHighlightMatch { - background-color:#a5beda; -} -.claro .dijitFocusedLabel { - - outline: 1px dotted #666666; -} -.claro .dijitContentPaneLoading { - background:url(images/loadingAnimation.gif) no-repeat left center; - padding-left:25px; -} -.claro .dijitContentPaneError { - background:url(../../icons/images/commonIconsObjActEnabled.png) no-repeat left center; - background-position: -496px; - no-repeat left center; - padding-left:25px; -} -.claro .dojoDndItemBefore, -.claro .dojoDndItemAfter{ - border-top: 1px solid #769DC0; -} -.claro .dojoDndItemOver { - cursor:pointer; - } -.claro table.dojoDndAvatar { - border: 1px solid #b5bcc7; - border-collapse: collapse; - background-color: #fff; - -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, .25); -} -.claro .dojoDndAvatarHeader td { - height: 20px; - padding-left:21px; -} -.claro.dojoDndMove .dojoDndAvatarHeader, .claro.dojoDndCopy .dojoDndAvatarHeader { - background-image: url(images/dnd.png); - background-repeat: no-repeat; - background-position:2px -122px; -} -.claro .dojoDndAvatarItem td { - padding: 5px; -} -.claro.dojoDndMove .dojoDndAvatarHeader { - background-color: #f58383; - background-position:2px -103px; -} -.claro.dojoDndCopy .dojoDndAvatarHeader { - background-color: #f58383; - background-position:2px -68px; -} -.claro.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader { - background-color: #97e68d; - background-position:2px -33px; -} -.claro.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader { - background-color: #97e68d; - background-position:2px 2px; -} -.claro .dijitTextBoxError .dijitValidationContainer { - background-color: #d46363; - background-image: url(form/images/error.png); - background-position: top center; - border: solid #d46464 0px; - border-left-width: 1px; - width: 9px; -} -.claro .dijitTextBoxError .dijitValidationIcon { - width: 0px; - background-color: transparent !important; -} -.claro .dijitTextBox .dijitInputContainer, -.claro .dijitTextArea, -.claro .dijitInputField .dijitPlaceHolder { - padding: 2px; -} -.claro .dijitTextBox, -.claro .dijitTextBox .dijitButtonNode { - - border-color: #b5bcc7; - -webkit-transition-property:background-color, border; - -webkit-transition-duration:.35s; -} -.claro .dijitTextBox { - background-color: #f7fcff; -} -.claro .dijitTextBoxHover, -.claro .dijitTextBoxHover .dijitButtonNode { - border-color: #769dc0; - -webkit-transition-duration:.25s; -} -.claro .dijitTextBoxHover { - background-color: #e9f4fe; - background-image: url(form/images/textBox_back.png); - background-repeat: repeat-x; -} -.claro .dijitTextBoxError, -.claro .dijitTextBoxError .dijitButtonNode { - border-color: #d46464; -} -.claro .dijitTextBoxError, -.claro .dijitTextBoxError .dijitInputContainer { - background-color: #fdf7f7; -} -.claro .dijitTextBoxFocused, -.claro .dijitTextBoxFocused .dijitButtonNode { - border-color:#769dc0; - -webkit-transition-duration:.1s; -} -.claro .dijitTextBoxFocused { - background-color: #fff; - background-image: url(form/images/textBox_back.png); - background-repeat: repeat-x; -} -.claro .dijitTextBoxFocused .dijitInputContainer { - background: #fff; -} -.claro .dijitTextBoxErrorFocused, -.claro .dijitTextBoxErrorFocused .dijitButtonNode { - border-color: #ce4f4f; -} -.claro .dijitTextBoxDisabled, -.claro .dijitTextBoxDisabled .dijitButtonNode { - border-color: #d3d3d3; -} -.claro .dijitTextBoxDisabled { - background-color: #efefef; - background-image: none; - color: #818181; -} -.claro .dijitComboBox .dijitArrowButtonInner { - background-image: url(form/images/commonFormArrows.png); - background-position:-35px 53%; - background-repeat: no-repeat; - margin: 0px; - width:16px; - height:100%; - border: 1px solid #fff; -} -.claro .dijitTextBox .dijitInputField { - padding-top: 1px; - padding-bottom: 1px; -} -.claro .dijitTextBox .dijitInputInner { - - padding: 1px 2px 1px 0; -} -.claro .dijitTextBox .dijitValidationContainer { - padding: 0 0 2px 0; -} -.claro .dijitComboBox .dijitButtonNode { - background-color: #ebeef4; - background-image: url(form/images/formHighlight.png); - background-repeat:repeat-x; -} -.claro .dijitComboBoxHover .dijitButtonNode { - background-color:#abd6ff; -} -.claro .dijitComboBoxHover .dijitArrowButtonInner { - background-position:-70px 53%; -} -.claro .dijitComboBoxFocused .dijitButtonNode { - background-color:#7dbefa; - background-position:0px -177px; - padding: 1px; -} -.claro .dijitComboBoxFocused .dijitArrowButtonInner { - background-position:-70px 53%; - border: 0px none; -} -.claro div.dijitComboBoxDisabled .dijitArrowButtonInner { - - background-position:0px 50%; - background-color:#f1f1f1; -} -.dj_ff3 .claro .dijitInputField input[type="hidden"] { - display: none; - height: 0; - width: 0; -} -.dj_ie6 .claro .dijitTextBox, -.dj_ie6 .claro .dijitComboBox .dijitButtonNode { - background-image: none; -} -.dj_quirks .claro .dijitComboBox .dijitArrowButtonInner { - border: 0px; -} -.dj_quirks .claro .dijitComboBox .dijitArrowButtonContainer { - padding: 1px; -} -.claro .dijitButtonNode { - - -webkit-transition-property:background-color; - -webkit-transition-duration:.3s; -} -.claro .dijitButton .dijitButtonNode, -.claro .dijitDropDownButton .dijitButtonNode, -.claro .dijitComboButton .dijitButtonNode, -.claro .dijitToggleButton .dijitButtonNode { - - border: 1px solid #769dc0; - padding:2px 4px 4px 4px; - background-image: url(form/images/button.png); - background-position: center top; - background-repeat: repeat-x; - background-color: #e4f2ff; - border-radius: 4px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - box-shadow:0px 1px 1px rgba(0,0,0,0.15); - -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.15); - -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.15); -} -.claro .dijitComboButton .dijitArrowButton { - border-left-width: 0px; - padding: 4px 2px 4px 2px; -} -.claro .dijitArrowButtonInner { - width: 15px; - height: 15px; - margin: 0 auto; - background-image:url(form/images/buttonArrows.png); - background-repeat:no-repeat; - background-position:-51px 53%; -} -.claro .dijitLeftArrowButton .dijitArrowButtonInner { - background-position: -77px 53%; -} -.claro .dijitRightArrowButton .dijitArrowButtonInner { - background-position: -26px 53%; -} -.claro .dijitUpArrowButton .dijitArrowButtonInner { - background-position: 0px 53%; -} -.claro .dijitDisabled .dijitArrowButtonInner { - background-position: -151px 53%; -} -.claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner { - background-position: -177px 53%; -} -.claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner { - background-position: -126px 53%; -} -.claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner { - background-position: -100px 53%; -} -.claro .dijitButtonText { - padding: 0 0.3em; - text-align: center; -} -.claro .dijitDisabled .dijitButtonText { - color: #7F7F7F; -} -.claro .dijitButtonHover .dijitButtonNode, -.claro .dijitDropDownButtonHover .dijitButtonNode, -.claro .dijitComboButton .dijitButtonNodeHover, -.claro .dijitComboButton .dijitDownArrowButtonHover, -.claro .dijitToggleButtonHover .dijitButtonNode { - background-color: #afd9ff; - color:#000; - -webkit-transition-duration:.2s; -} -.claro .dijitButtonActive .dijitButtonNode, -.claro .dijitDropDownButtonActive .dijitButtonNode, -.claro .dijitComboButtonActive .dijitButtonNode, -.claro .dijitToggleButtonActive .dijitButtonNode { - background-color: #99cfff; - box-shadow:0px 0px 0px rgba(0,0,0,0); - -webkit-box-shadow:0px 0px 0px rgba(0,0,0,0); - -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0); - -webkit-transition-duration:.1s; -} -.claro .dijitButtonDisabled, -.claro .dijitDropDownButtonDisabled, -.claro .dijitComboButtonDisabled, -.claro .dijitToggleButtonDisabled { - background-image: none; - outline: none; -} -.claro .dijitButtonDisabled .dijitButtonNode, -.claro .dijitDropDownButtonDisabled .dijitButtonNode, -.claro .dijitComboButtonDisabled .dijitButtonNode, -.claro .dijitToggleButtonDisabled .dijitButtonNode { - background-position:0px -149px; - background-color: #e3e3e3; - border: solid 1px #c9c9c9; - color: #696969; - box-shadow:0px 0px 0px rgba(0,0,0,0); - -webkit-box-shadow:0px 0px 0px rgba(0,0,0,0); - -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0); -} -.claro .dijitComboButtonDisabled .dijitArrowButton{ - border-left-width: 0px; -} -.claro table.dijitComboButton { - border-collapse: separate; -} -.dj_ie6 .claro .dijitButtonNode { - background-image: none; -} -.claro .dijitComboButton .dijitStretch { - -moz-border-radius: 4px 0px 0px 4px; - -webkit-border-top-left-radius: 4px; - -webkit-border-top-right-radius: 0px; - -webkit-border-bottom-right-radius: 0px; - -webkit-border-bottom-left-radius: 4px; -} -.claro .dijitComboButton .dijitArrowButton { - -moz-border-radius: 0px 4px 4px 0px; - -webkit-border-top-left-radius: 0px; - -webkit-border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -webkit-border-bottom-left-radius: 0px; -} -.claro .dijitToggleButton .dijitCheckBoxIcon { - background-image: url(images/checkmarkNoBorder.png); -} -.dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon { - background-image: url(images/checkmarkNoBorder.gif); -} -.claro .dijitCheckBox, -.claro .dijitCheckBoxIcon { - background-image: url(form/images/checkboxRadioButtonStates.png); - background-repeat: no-repeat; - width: 15px; - height: 16px; - margin: 0 2px 0 0; - padding: 0; -} -.dj_ie6 .claro .dijitCheckBox, -.dj_ie6 .claro .dijitCheckBoxIcon { - background-image: url(form/images/checkboxAndRadioButtons_IE6.png); -} -.claro .dijitCheckBox, -.claro .dijitToggleButton .dijitCheckBoxIcon { - - background-position: -15px; -} -.claro .dijitCheckBoxChecked, -.claro .dijitToggleButtonChecked .dijitCheckBoxIcon { - - background-position: -0px; -} -.claro .dijitCheckBoxDisabled { - - background-position: -75px; -} -.claro .dijitCheckBoxCheckedDisabled { - - background-position: -60px; -} -.claro .dijitCheckBoxHover { - - background-position: -45px; -} -.claro .dijitCheckBoxCheckedHover { - - background-position: -30px; -} -.claro .dijitToggleButton .dijitRadio, -.claro .dijitToggleButton .dijitRadioIcon { - background-image: url(form/images/checkboxRadioButtonStates.png); -} -.dj_ie6 .claro .dijitToggleButton .dijitRadio, -.dj_ie6 .claro .dijitToggleButton .dijitRadioIcon { - background-image: url(form/images/checkboxAndRadioButtons_IE6.png); -} -.claro .dijitRadio, -.claro .dijitRadioIcon { - background-image: url(form/images/checkboxRadioButtonStates.png); - background-repeat: no-repeat; - width: 15px; - height: 15px; - margin: 0px 2px 0px 0px; - padding: 0px; -} -.dj_ie6 .claro .dijitRadio, -.dj_ie6 .claro .dijitRadioIcon { - background-image: url(form/images/checkboxAndRadioButtons_IE6.png); -} -.claro .dijitRadio{ - - background-position: -105px; -} -.claro .dijitToggleButton .dijitRadioIcon { - - background-position: -107px; -} -.claro .dijitRadioDisabled { - - background-position: -165px; -} -.claro .dijitRadioHover { - - background-position: -135px; -} -.claro .dijitRadioChecked{ - background-position: -90px; -} -.claro .dijitToggleButtonChecked .dijitRadioIcon { - background-position: -92px; -} -.claro .dijitRadioCheckedHover{ - background-position: -120px; -} -.claro .dijitRadioCheckedDisabled { - - background-position: -150px; -} -.claro .dijitSelect .dijitButtonText { - padding: 0px 5px 2px 5px; -} -.claro .dijitSelect { - border: 1px solid #b5bcc7; - background-color: #f7fcff; - border-collapse: separate; -} -.dj_ie6 .claro .dijitSelect, -.dj_ie6 .claro .dijitSelect .dijitButtonNode { - background-image:none; -} -.claro .dijitSelect .dijitButtonContents { - border: 0px solid #b5bcc7; - border-right-width: 1px; -} -.claro .dijitSelect .dijitArrowButton { - padding: 0; - border: 1px solid #fff; - border-top:none; - background-color:#ebeef4; - background-image: url(form/images/formHighlight.png); - background-repeat:repeat-x; -} -.claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner { - background-image: url(form/images/commonFormArrows.png); - background-position:-35px 70%; - background-repeat: no-repeat; - width:16px; - height:16px; - display:block; -} -.claro .dijitSelectHover { - border: 1px solid #769dc0; - background-color: #e9f4fe; - background-image: url(form/images/textBox_back.png); - background-repeat: repeat-x; -} -.claro .dijitSelectHover .dijitButtonContents { - border-color:#81a5c6; -} -.claro .dijitSelectHover .dijitArrowButton { - background-color:#abd6ff; -} -.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner { - background-position:-70px 70%; -} -.claro .dijitSelectFocused { - border: 1px solid #769dc0; -} -.claro .dijitSelectFocused .dijitButtonContents { - border-color:#81a5c6; -} -.claro .dijitSelectFocused .dijitArrowButton { - background-color:#7dbefa; - background-position:0px -177px; - border: none; - padding: 0px 1px; -} -.claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner { - background-position:-70px 70%; - margin-bottom: 1px; -} -.claro .dijitSelectDisabled { - border: 1px solid #d3d3d3; - background-color: #efefef; - background-image: none; - color: #818181; -} -.claro .dijitSelectDisabled .dijitArrowButton { - background-color: #efefef; -} -.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner { - background-position:0px 70% -} -.claro .dijitSelectMenu td.dijitMenuItemIconCell, -.claro .dijitSelectMenu td.dijitMenuArrowCell { - - display: none; -} -.claro .dijitSelectMenu td.dijitMenuItemLabel { - - padding-left: 5px; - padding-right: 5px; -} -.claro .dijitSelectMenu .dijitMenuSeparatorTop { - border-bottom:1px solid #769dc0; -} -.claro .dijitTabPaneWrapper { - background:#fff; -} -.claro .dijitTabPaneWrapper, -.claro .dijitTabContainerTop-tabs, -.claro .dijitTabContainerBottom-tabs, -.claro .dijitTabContainerLeft-tabs, -.claro .dijitTabContainerRight-tabs { - - border-color: #b5bcc7; -} -.claro .dijitTabCloseButton { - background: url(layout/images/tabClose.png) no-repeat; - width: 14px; - height: 14px; - margin-left: 5px; - margin-right:-3px; -} -.claro .dijitTabCloseButtonHover { - background-position:-14px; -} -.claro .dijitTabCloseButtonActive { - background-position:-28px; -} -.claro .dijitTabSpacer { - - display: none; -} -.claro .dijitTabInnerDiv { - background-color:#e6e6e7; - -webkit-transition-property:background-color, border; - -webkit-transition-duration:.35s; - color:#4a4a4a; -} -.claro .dijitTabHover .dijitTabInnerDiv { - background-color:#a9d6ff; - -webkit-transition-duration:.25s; - color:#000; -} -.claro .dijitTabActive .dijitTabInnerDiv { - background-color:#8bc4f9; - color:#000; - -webkit-transition-duration:.1s; -} -.claro .dijitTabChecked .dijitTabInnerDiv { - background-color:#b2d4f3; - color:#000; -} -.claro .dijitTabContent { - border: 1px solid #b5bcc7; -} -.claro .dijitTabHover .dijitTabContent, -.claro .dijitTabActive .dijitTabContent { - border-color: #769dc0; -} -.claro .dijitTabChecked .dijitTabContent { - color:#000; - border-color: #b5bcc7; -} -.claro .tabStripButton .dijitTabInnerDiv { - background-color: transparent; -} -.claro .tabStripButton .dijitTabContent { - border: none; -} -.claro .dijitTabContainerTop-tabs .dijitTab { - top: 1px; - margin-right: 1px; - padding-top: 3px; -} -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab { - top: 3px; -} -.claro .dijitTabContainerTop-tabs .dijitTabContent { - padding:3px 8px 3px 4px; - border-bottom: 1px; - background-image:url(layout/images/tabTop.png); - background-position:0px 0px; - background-repeat:repeat-x; - min-width: 60px; - text-align: center; -} -.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { - padding-bottom: 4px; - padding-top: 6px; -} -.dj_ie .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { - border-bottom: none; -} -.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv { - background-image:url(layout/images/tabTop.png); - background-position:0px -248px; - background-position:bottom; - background-repeat:repeat-x; - box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); - -webkit-box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); - -moz-box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); -} -.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { - background-image:none; - box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); - -webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); -} -.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { - background-position:0px -102px; - background-repeat:repeat-x; -} -.claro .dijitTabContainerBottom-tabs .dijitTab { - top: -1px; - margin-right: 1px; -} -.claro .dijitTabContainerBottom-tabs .dijitTabContent { - padding:3px 8px 4px 4px; - border-top: none; - background-image: url(layout/images/tabBottom.png); - background-position:0px -249px; - background-repeat: repeat-x; - background-position:bottom; - min-width: 60px; - text-align: center; -} -.claro .dijitTabContainerBottom-tabs .dijitTab { - padding-bottom: 3px; -} -.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv { - background-image: url(layout/images/tabBottom.png); - background-position: top; - background-repeat: repeat-x; - box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); - -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); - -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); - -} -.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent { - padding-bottom: 7px; - padding-top: 4px; - background-position:0px -119px; -} -.claro .dijitTabContainerBottom-tabs .dijitTabChecked { - padding-bottom: 0; -} -.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv { - background-image:none; - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); - -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); -} -.claro .dijitTabContainerLeft-tabs .dijitTab { - left: 1px; - margin-bottom: 1px; -} -.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv { - background-image: url(layout/images/tabLeft.png); - background-position: -347px -340px; - background-repeat: repeat-y; -} -.claro .dijitTabContainerLeft-tabs .dijitTabContent { - padding:3px 8px 4px 4px; - background-image: url(layout/images/tabLeft.png); - background-repeat: repeat-y; - background-position:0px 0px; -} -.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent { - padding-right: 9px; - border-right: none; - background-image: none; -} -.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position:0px -179px; - background-repeat:repeat-y; - box-shadow: -1px 0px 2px rgba(0, 0, 0, .05); - -webkit-box-shadow: -1px 0px 2px rgba(0, 0, 0, .05); - -moz-box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.05); -} -.claro .dijitTabContainerRight-tabs .dijitTab { - left: -1px; - margin-bottom: 1px; -} -.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv { - background-image: url(layout/images/tabRight.png); - background-repeat: repeat-y; - background-position: -1px -347px; -} -.claro .dijitTabContainerRight-tabs .dijitTabContent { - padding:3px 8px 4px 4px; - background-image: url(layout/images/tabRight.png); - background-position:right top; - background-repeat: repeat-y; -} -.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent { - padding-left: 5px; - border-left: none; - background-image: none; -} -.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position:-348px -179px; - box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); - -webkit-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); - -moz-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); -} -.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerTop-tabs .dijitTabContent { - border-radius: 2px 2px 0px 0px; - -moz-border-radius: 2px 2px 0px 0px; - -webkit-border-top-left-radius:2px; - -webkit-border-top-right-radius:2px; -} -.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerBottom-tabs .dijitTabContent{ - border-radius: 0px 0px 2px 2px; - -moz-border-radius: 0px 0px 2px 2px; - -webkit-border-bottom-right-radius:2px; - -webkit-border-bottom-left-radius:2px; -} -.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerLeft-tabs .dijitTabContent{ - border-radius: 2px 0px 0px 2px; - -moz-border-radius: 2px 0px 0px 2px; - -webkit-border-top-left-radius:2px; - -webkit-border-bottom-left-radius:2px; -} -.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerRight-tabs .dijitTabContent{ - border-radius: 0px 2px 2px 0px; - -moz-border-radius: 0px 2px 2px 0px; - -webkit-border-top-right-radius:2px; - -webkit-border-bottom-right-radius:2px; -} -.claro .tabStripButton { - background-color:#deecf9; - border: 1px solid #b5bcc7; -} -.claro .dijitTabListContainer-top .tabStripButton { - padding: 4px 3px; - margin-top:7px; - background-image: url(layout/images/tabTop.png); - background-position:0px 0px; -} -.claro .dijitTabListContainer-bottom .tabStripButton { - padding:5px 3px; - margin-bottom:4px; - background-image: url(layout/images/tabTop.png); - background-position:0px -248px; - background-position:bottom; -} -.claro .tabStripButtonHover { - background-color:#a6d2fb; -} -.claro .tabStripButtonActive { - background-color:#7dbefa; -} -.claro .dijitTabStripIcon { - height:15px; - width:15px; - margin: 0 auto; - background:url(form/images/buttonArrows.png) no-repeat -75px 50%; - background-color: transparent; -} -.claro .dijitTabStripSlideRightIcon{ - background-position: -24px 50%; -} -.claro .dijitTabStripMenuIcon { - background-position: -51px 50%; -} -.claro .dijitTabListContainer-top .tabStripButtonDisabled, -.claro .dijitTabListContainer-bottom .tabStripButtonDisabled { - background-color:#dddddd; - border:1px solid #c9c9c9; -} -.claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon { - background-position:-175px 50%; -} -.claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon { - background-position: -124px 50%; -} -.claro .tabStripButtonDisabled .dijitTabStripMenuIcon { - background-position: -151px 50%; -} -.claro .dijitTabContainerNested .dijitTabListWrapper { - height: auto; -} -.claro .dijitTabContainerNested .dijitTabContainerTop-tabs { - border-bottom:solid 1px #b5bcc7; - padding:1px 2px 4px; - margin-top:-2px; -} -.claro .dijitTabContainerTabListNested .dijitTabContent { - background:rgba(255, 255, 255, 0) none repeat scroll 0 0; - border: none; - padding: 4px; - border-color: rgba(118,157,192,0); - -webkit-transition-property:background-color, border-color; - -webkit-transition-duration:.3s; -} -.claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv { - - background: none; - border: none; - top: 0px; - box-shadow: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; -} -.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent { - background-color:#eaf4fc; - border-radius: 2px 2px 2px 2px; - -moz-border-radius: 2px 2px 2px 2px; - -webkit-border-radius:2px; - border:solid 1px #c8dff3; - padding: 3px; - webkit-transition-duration:.2s; -} -.claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel { - text-decoration: none; -} -.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent { - border-radius: 2px 2px 2px 2px; - -moz-border-radius: 2px 2px 2px 2px; - -webkit-border-radius:2px; - border:solid 1px #a8c7e2; - padding: 3px; - background:#b9d9f5 url(layout/images/tabNested.png) repeat-x; - -webkit-transition-duration:.1s; -} -.claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent { - border-radius: 2px 2px 2px 2px; - -moz-border-radius: 2px 2px 2px 2px; - -webkit-border-radius:2px; - padding: 3px; - border:solid 1px #a8c7e2; - background-position: 0px 105px; - background-color:#d4e8f9; -} -.claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel { - text-decoration: none; - background-image:none; -} -.claro .dijitTabPaneWrapperNested { - border: none; -} -.dj_ie6 .claro .dijitTabContent, -.dj_ie6 .claro .dijitTabInnerDiv, -.dj_ie6 .dijitTabListContainer-top .tabStripButton, -.dj_ie6 .dijitTabListContainer-bottom .tabStripButton{ - background-image: none; -} -.claro .dijitDialog { - border: 1px solid #769dc0; - box-shadow:0px 1px 5px rgba(0,0,0,0.25); - -webkit-box-shadow:0px 1px 5px rgba(0,0,0,0.25); - -moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.25); -} -.claro .dijitDialogPaneContent { - background: #fff repeat-x top left; - border-top: 1px solid #769dc0; - padding:10px 8px; - position: relative; -} -.claro .dijitDialogPaneContentArea { - - margin: -10px -8px; - padding: 10px 8px; -} -.claro .dijitDialogPaneActionBar { - - background-color: #f2f2f2; - padding: 3px 5px 2px 7px; - text-align: right; - border-top: 1px solid #cdcdcd; - margin: 10px -8px -10px; -} -.claro .dijitDialogPaneActionBar .dijitButton { - float: none; -} -.claro .dijitDialogTitleBar { - - border: 1px solid #fff; - border-top:none; - background-color: #abd6ff; - background-image: url(images/titlebar.png); - background-repeat:repeat-x; - padding: 5px 7px 4px 7px; -} -.claro .dijitDialogTitle { - - padding: 0px 1px; - font-size:1.091em; -} -.claro .dijitDialogCloseIcon { - - background: url(images/dialogCloseIcon.png); - background-repeat:no-repeat; - position: absolute; - right: 5px; - height: 15px; - width: 21px; -} -.dj_ie6 .claro .dijitDialogCloseIcon { - background-image: url(images/dialogCloseIcon8bit.png); -} -.claro .dijitDialogCloseIconHover { - background-position:-21px; -} -.claro .dijitDialogCloseIconActive { - background-position:-42px; -} -.claro .dijitTooltip, -.claro .dijitTooltipDialog { - - background: transparent; -} -.dijitTooltipBelow { - - padding-top: 13px; - padding-left:3px; - padding-right:3px; -} -.dijitTooltipAbove { - - padding-bottom: 13px; - padding-left:3px; - padding-right:3px; -} -.claro .dijitTooltipContainer { - - background-color:#fff; - background-image:url(images/tooltip.png); - background-repeat:repeat-x; - background-position:-575px 100%; - border:1px solid #769DC0; - padding:6px 8px; - border-radius: 4px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - box-shadow:0px 1px 3px rgba(0,0,0,0.25); - -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.25); - -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25); - font-size: 1em; -} -.dj_ie6 .claro .dijitTooltipContainer { - background-image: none; -} -.claro .dijitTooltipConnector { - - border: 0px; - z-index: 2; - background-image:url(images/tooltip.png); - background-repeat:no-repeat; - width:16px; - height:14px; -} -.dj_ie6 .claro .dijitTooltipConnector { - background-image:url(images/tooltip8bit.png); -} -.claro .dijitTooltipABRight .dijitTooltipConnector { - - left: auto !important; - right: 3px; -} -.claro .dijitTooltipBelow .dijitTooltipConnector { - - top: 0px; - left: 3px; - background-position:-31px 0%; - width:16px; - height:14px; -} -.claro .dijitTooltipAbove .dijitTooltipConnector { - - bottom: 0px; - left: 3px; - background-position:-15px 0%; - width:16px; - height:14px; -} -.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector, -.dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector { - bottom: -1px; -} -.claro .dijitTooltipLeft { - padding-right: 14px; -} -.dj_ie6 .claro .dijitTooltipLeft { - padding-left: 15px; -} -.claro .dijitTooltipLeft .dijitTooltipConnector { - - right: 0px; - bottom: 3px; - background-position:0px 0%; - width:16px; - height:14px; -} -.claro .dijitTooltipRight { - padding-left: 14px; -} -.claro .dijitTooltipRight .dijitTooltipConnector { - - left: 0px; - bottom: 3px; - background-position:-48px 0%; - width:16px; - height:14px; -} -.claro .dijitDialogUnderlay { - background: #fff; -} -.claro .dijitAccordionContainer { - border:none; -} -.claro .dijitAccordionInnerContainer { - background-color: #e6e6e7; - border:solid 1px #b5bcc7; - margin-bottom:1px; - -webkit-transition-property:background-color,border; - -webkit-transition-duration:.3s; - -webkit-transition-timing-function:linear; -} -.claro .dijitAccordionTitle { - background-color: transparent; - background-image: url(layout/images/accordion.png); - background-position:0px 0px; - background-repeat:repeat-x; - padding: 5px 7px 2px 7px; - min-height:17px; - color:#4a4a4a; -} -.dj_ie6 .claro .dijitAccordionTitle { - background-image: none; -} -.claro .dijitAccordionContainer .dijitAccordionContainer-child { - background-color:#fff; - - border:1px solid #92bce1 !important; - margin: 0px 2px 2px; - padding: 9px; -} -.claro .dijitAccordionInnerContainerActive { - border:1px solid #769DC0; - background-color:#7dbefa; - -webkit-transition-duration:.1s; -} -.claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { - background-position:0px -136px; - color:#000; -} -.claro .dijitAccordionInnerContainerSelected { - border-color:#92bce1; - background-color: #cde8ff; -} -.claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { - color:#000; - background-position: 0 0; -} -.claro .dijitAccordionInnerContainerHover dijitAccordionTitle { - - color:#000; -} -.claro .dijitAccordionInnerContainerHover, -.claro .dijitAccordionInnerContainerSelectedActive { - border:1px solid #769DC0; - background-color:#9dcfff; - -webkit-transition-duration:.2s; -} -.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionContainer-child, -.claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionContainer-child { - background-color:#ffffff; - border:1px solid #769DC0 !important; - -webkit-box-shadow:inset 0px 0px 3px rgba(0, 0, 0, .25); - -moz-box-shadow:inset 0px 0px 3px rgba(0, 0, 0, .25); -} -.claro .dijitContentPane { - padding: 8px; -} -.claro .dijitTabContainerTop-dijitContentPane, -.claro .dijitTabContainerLeft-dijitContentPane, -.claro .dijitTabContainerBottom-dijitContentPane, -.claro .dijitTabContainerRight-dijitContentPane, -.claro .dijitAccordionContainer-dijitContentPane { - background-color: #fff; - padding: 8px; -} -.claro .dijitSplitContainer-dijitContentPane, -.claro .dijitBorderContainer-dijitContentPane { - background-color: #fff; - padding: 8px; -} -.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; -} -.dj_ie6 .claro .dijitCalendar { - background-image:none; -} -.claro .dijitCalendar img { - border:none; -} -.claro .dijitCalendarHover, -.claro .dijitCalendarActive { - background-color: #b7dcff; - border:solid 1px #769dc0; -} -.claro .dijitCalendarMonthContainer th { - text-align:center; - padding-bottom:4px; - vertical-align:middle; -} -.claro .dijitCalendarMonthLabelSpacer { - display:none; -} -.claro .dijitCalendarMonthLabel { - color:#000000; - font-size: 1.091em; - display: block; -} -.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 0px; -} -.claro .dijitCalendarArrowHover .dijitCalendarDecrease { - background-position:-36px 0px; -} -.claro .dijitCalendarArrowHover .dijitCalendarIncrease { - background-position:-55px 0px; -} -.claro .dijitCalendarArrowActive .dijitCalendarDecrease { - background-position:-72px 0px; -} -.claro .dijitCalendarArrowActive .dijitCalendarIncrease { - background-position:-91px 0px; -} -.claro .dijitA11ySideArrow { - - display: none; -} -.claro .dijitDayLabels th { - padding:0px 4px 0px 4px; - border-bottom:solid 1px #99b5cd; - 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; -} -.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; -} -.dj_ie6 .claro .dijitCalendarDateTemplate { - background-image: none; -} -.claro .dijitCalendarPreviousMonth, -.claro .dijitCalendarNextMonth { - background-color:#ebf3f9; - background-image:none; - border-bottom:solid 1px #d2dae8; - color:#547da1; -} -.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; -} -.claro .dijitCalendarYearContainer { - vertical-align:middle; -} -.claro .dijitCalendarYearControl { - padding: 1px 2px 2px 2px; -} -.claro .dijitCalendarYearLabel { - padding:2px 0px 0px 0px; - margin:0; -} -.claro .dijitCalendarYearLabel span { - - vertical-align:middle; -} -.claro .dijitCalendarSelectedYear { - padding:0px 3px; -} -.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; -} -.claro .dijitCalendarActiveDate .dijitCalendarDateLabel { - background-image:url(images/calendarContainerImages.png); - background-position:0px -300px; - background-color:#75b5f0; - border:solid 1px #fff; - -webkit-transition-duration:.1s; -} -.dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel { - background-image:none; -} -.claro .dijitCalendarSelectedDate .dijitCalendarDateLabel { - color:#000; - background-color:#e7f4ff; - border-color:#accfed; -} -.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; -} -.claro .dijitMenuBar { - border: 1px solid #b5bcc7; - margin: 0px; - padding: 0px; - background-color: #e6e6e7; - background-image: url(images/commonHighlight.png); - background-position:0px 0px; - background-repeat:repeat-x; -} -.dj_ie6 .claro .dijitMenuBar { - background-image:none; -} -.claro .dijitMenu { - background-repeat:repeat-y; - background-color:#fff; - border: 1px solid #769dc0; - - margin: -1px 0; -} -.claro .dijitMenuBar .dijitMenuItem { - padding: 6px 10px 7px; - background-position:0px 100px; - color:#4a4a4a; - margin:-1px; -} -.claro .dijitMenuItem { - background-image: url(images/menuHighlight.png); - background-position:0px -40px; - background-repeat:repeat-x; -} -.claro .dijitMenuTable { - border-collapse:separate; - border-spacing:0 0; - padding:0px; -} -.claro .dijitMenuItem td{ - padding:1px; -} -.claro .dijitMenuPassive .dijitMenuItemHover, -.claro .dijitMenuPassive .dijitMenuItemSelected { - background-color: #abd6ff; - border:solid 1px #769dc0; - background-position:0px 0px; - color:#000; - padding: 5px 9px 6px; -} -.claro .dijitMenuPassive .dijitMenuItemActive{ - background-position:0px -177px; -} -.dj_ie6 .claro .dijitMenuItem, -.dj_ie6 .claro .dijitMenuPassive .dijitMenuItem { - background-image: none; -} -.claro .dijitMenuActive .dijitMenuItemHover, -.claro .dijitMenuActive .dijitMenuItemSelected { - border:solid 1px #769dc0; - padding: 5px 9px 6px; - background-color: #9dcfff; - background-position:0px 0px; - color:#000; -} -.dj_ie .claro .dijitMenuActive .dijitMenuItemHover, -.dj_ie .claro .dijitMenuActive .dijitMenuItemSelected, -.dj_ie .claro .dijitMenuPassive .dijitMenuItemHover, -.dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected { - padding-top: 6px; - padding-bottom: 5px; - margin-top: -3px; -} -.claro .dijitMenuActive .dijitMenuItemActive{ - background-color: #7dbefa; - background-position:0px -177px; -} -.claro .dijitMenuItemActive { - background-position:0px -177px; -} -.claro td.dijitMenuItemIconCell { - padding: 2px; - margin: 0px 0px 0px 4px; -} -.claro td.dijitMenuItemLabel { - padding-top: 5px; - padding-bottom: 5px; -} -.claro .dijitMenuExpand { - width: 7px; - height: 7px; - background-image: url(images/spriteArrows.png); - background-position: -14px 0px; - margin-right:3px; -} -.claro .dijitMenuItemDisabled .dijitMenuItemIconCell { - opacity:1; -} -.claro .dijitMenuSeparatorTop { - height: auto; - margin-top:1px; - border-bottom: 1px solid #b5bcc7 -} -.claro .dijitMenuSeparatorBottom{ - height: auto; - margin-bottom:1px; -} -.claro .dijitCheckedMenuItemIconChar { - display: none; -} -.claro .dijitCheckedMenuItemIcon { - background-image: url(form/images/checkboxRadioButtonStates.png); - background-repeat:no-repeat; - background-position: -15px 50%; - width:15px; - height:16px; -} -.dj_ie6 .claro .dijitCheckedMenuItemIcon { - background-image: url(form/images/checkboxAndRadioButtons_IE6.png); -} -.claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon { - background-position: 0 50%; -} -.claro .dijitComboBoxMenu { - margin-left:0px; - background-image: none; -} -.claro .dijitComboBoxMenu .dijitMenuItem{ - padding:2px 0px; - text-indent:6px; - border-width:1px 0px 1px 0px; - border-style:solid; - border-color:#fff; -} -.claro .dijitComboBoxMenu .dijitMenuItemSelected { - color:#000; - border-color:#768dc0; - background-color:#abd6ff; -} -.claro .dijitComboBoxMenuActive .dijitMenuItemSelected { - background-position:0px -177px; - background-color:#7dbefa; -} -.claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton { - font-style: italic; -} -.claro .dijitSliderBar { - border-style: solid; - outline: 1px; -} -.claro .dijitSliderFocused .dijitSliderBar { - border-color: #769dc0; -} -.claro .dijitSliderHover .dijitSliderBar { - border-color: #769dc0; -} -.claro .dijitSliderDisabled .dijitSliderBar { - background-image: none; - border-color: #d3d3d3; -} -.claro .dijitRuleLabelsContainerH { - padding: 2px 0px; -} -.claro .dijitSlider .dijitSliderProgressBarH, -.claro .dijitSlider .dijitSliderLeftBumper{ - background-image: url(form/images/sliderHorizontal.png); - background-repeat:repeat-x; - background-position:0 -20px; - border-color: #b5bcc7; - background-color: #cfe5fa; -} -.claro .dijitSlider .dijitSliderRemainingBarH, -.claro .dijitSlider .dijitSliderRightBumper{ - background-image: url(form/images/sliderHorizontal.png); - background-repeat:repeat-x; - background-position:0 -11px; - border-color: #b5bcc7; - background-color: #fff; -} -.claro .dijitSliderRightBumper { - border-right: solid 1px #b5bcc7; -} -.claro .dijitSliderLeftBumper { - border-left: solid 1px #b5bcc7; -} -.claro .dijitSliderHover .dijitSliderProgressBarH, -.claro .dijitSliderHover .dijitSliderLeftBumper{ - background-position:0 -20px; - background-color: #abd6ff; - border-color: #769dc0; -} -.claro .dijitSliderHover .dijitSliderRemainingBarH, -.claro .dijitSliderHover .dijitSliderRightBumper{ - background-position:0 0px; - background-color: #fff; - border-color: #769dc0; -} -.claro .dijitSliderFocused .dijitSliderProgressBarH, -.claro .dijitSliderFocused .dijitSliderLeftBumper{ - background-position:0 -30px; - background-color: #abd6ff; - border-color: #769dc0; -} -.claro .dijitSliderFocused .dijitSliderRemainingBarH, -.claro .dijitSliderFocused .dijitSliderRightBumper{ - background-position:0 -9px; - background-color: #fff; - border-color: #769dc0; -} -.claro .dijitSliderDisabled .dijitSliderProgressBarH, -.claro .dijitSliderDisabled .dijitSliderLeftBumper{ - background-color: #cdcdcd; - background-image:none; -} -.claro .dijitSliderDisabled .dijitSliderRemainingBarH, -.claro .dijitSliderDisabled .dijitSliderRightBumper{ - background-color: #efefef; -} -.claro .dijitRuleLabelsContainerV { - padding: 0px 2px; -} -.claro .dijitSlider .dijitSliderProgressBarV, -.claro .dijitSlider .dijitSliderBottomBumper{ - background-image: url(form/images/sliderVertical.png); - background-repeat:repeat-y; - background-position:-36px 0; - border-color: #b5bcc7; - background-color: #cfe5fa; -} -.claro .dijitSlider .dijitSliderRemainingBarV, -.claro .dijitSlider .dijitSliderTopBumper{ - background-image: url(form/images/sliderVertical.png); - background-repeat:repeat-y; - background-position:-3px 0; - border-color: #b5bcc7; - background-color: #fff; -} -.claro .dijitSliderBottomBumper { - border-bottom: solid 1px #b5bcc7; -} -.claro .dijitSliderTopBumper { - border-top: solid 1px #b5bcc7; -} -.claro .dijitSliderHover .dijitSliderProgressBarV, -.claro .dijitSliderHover .dijitSliderBottomBumper{ - background-position:-36px 0; - background-color: #abd6ff; -} -.claro .dijitSliderHover .dijitSliderRemainingBarV, -.claro .dijitSliderHover .dijitSliderTopBumper{ - background-position:0 0; - background-color: #fff; -} -.claro .dijitSliderFocused .dijitSliderProgressBarV, -.claro .dijitSliderFocused .dijitSliderBottomBumper{ - background-position:-56px 0; - background-color: #abd6ff; -} -.claro .dijitSliderFocused .dijitSliderRemainingBarV, -.claro .dijitSliderFocused .dijitSliderTopBumper{ - background-position:-18px 0; - background-color: #fff; -} -.claro .dijitSliderDisabled .dijitSliderProgressBarV, -.claro .dijitSliderDisabled .dijitSliderBottomBumper{ - background-color: #cdcdcd; -} -.claro .dijitSliderDisabled .dijitSliderRemainingBarV, -.claro .dijitSliderDisabled .dijitSliderTopBumper{ - background-color: #efefef; -} -.claro .dijitSliderImageHandleH { - border: 0px; - width: 18px; - height: 16px; - background-image: url(form/images/sliderThumbs.png); - background-repeat:no-repeat; - background-position:0 0; -} -.claro .dijitSliderHover .dijitSliderImageHandleH { - background-position:-18px 0; -} -.claro .dijitSliderFocused .dijitSliderImageHandleH { - background-position:-36px 0; -} -.claro .dijitSliderProgressBarH .dijitSliderThumbHover{ - background-position:-36px 0; -} -.claro .dijitSliderProgressBarH .dijitSliderThumbActive{ - background-position:-36px 0; -} -.claro .dijitSliderReadOnly .dijitSliderImageHandleH, -.claro .dijitSliderDisabled .dijitSliderImageHandleH { - background-position:-54px 0; -} -.claro .dijitSliderImageHandleV { - border: 0px; - width: 18px; - height: 16px; - background-image: url(form/images/sliderThumbs.png); - background-repeat:no-repeat; - background-position:-289px 0; -} -.claro .dijitSliderHover .dijitSliderImageHandleV { - background-position:-307px 0; -} -.claro .dijitSliderFocused .dijitSliderImageHandleV { - background-position:-325px 0; -} -.claro .dijitSliderProgressBarV .dijitSliderThumbHover{ - background-position:-325px 0; -} -.claro .dijitSliderProgressBarV .dijitSliderThumbActive{ - background-position:-325px 0; -} -.claro .dijitSliderReadOnly .dijitSliderImageHandleV, -.claro .dijitSliderDisabled .dijitSliderImageHandleV { - background-position:-343px 0; -} -.claro .dijitSliderButtonContainerH{ - padding: 1px 3px 1px 2px; -} -.claro .dijitSliderButtonContainerV{ - padding: 3px 1px 2px 1px; -} -.claro .dijitSliderDecrementIconH, -.claro .dijitSliderIncrementIconH, -.claro .dijitSliderDecrementIconV, -.claro .dijitSliderIncrementIconV { - background-image: url(form/images/commonFormArrows.png); - background-repeat:no-repeat; - background-color: #e9ecf2; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border: solid 1px #b5bcc7; - font-size: 1px; -} -.claro .dijitSliderDecrementIconH, -.claro .dijitSliderIncrementIconH { - height: 12px; - width: 9px; -} -.claro .dijitSliderDecrementIconV, -.claro .dijitSliderIncrementIconV { - height: 9px; - width: 12px; -} -.claro .dijitSliderActive .dijitSliderDecrementIconH, -.claro .dijitSliderActive .dijitSliderIncrementIconH, -.claro .dijitSliderActive .dijitSliderDecrementIconV, -.claro .dijitSliderActive .dijitSliderIncrementIconV, -.claro .dijitSliderHover .dijitSliderDecrementIconH, -.claro .dijitSliderHover .dijitSliderIncrementIconH, -.claro .dijitSliderHover .dijitSliderDecrementIconV, -.claro .dijitSliderHover .dijitSliderIncrementIconV { - border: solid 1px #769dc0; - background-color:#fff; -} -.claro .dijitSliderDecrementIconH { - background-position:-357px 50%; -} -.claro .dijitSliderActive .dijitSliderDecrementIconH -.claro .dijitSliderHover .dijitSliderDecrementIconH { - background-position:-393px 50%; -} -.claro .dijitSliderIncrementIconH { - background-position:-251px 50%; -} -.claro .dijitSliderActive .dijitSliderIncrementIconH -.claro .dijitSliderHover .dijitSliderIncrementIconH { - background-position:-283px 50%; -} -.claro .dijitSliderDecrementIconV { - background-position:-38px 50%; -} -.claro .dijitSliderActive .dijitSliderDecrementIconV -.claro .dijitSliderHover .dijitSliderDecrementIconV { - background-position:-73px 50%; -} -.claro .dijitSliderIncrementIconV { - background-position:-143px 49%; -} -.claro .dijitSliderActive .dijitSliderIncrementIconV -.claro .dijitSliderHover .dijitSliderIncrementIconV { - background-position:-178px 49%; -} -.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover, -.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover, -.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover, -.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover { - background-color: #cce3fc; -} -.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive, -.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive, -.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, -.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { - background-color: #a5d0fc; - border-color:#6591b9; -} -.claro .dijitSliderButtonInner { - visibility: hidden; -} -.claro .dijitSliderDisabled .dijitSliderBar{ - border-color: #d3d3d3; -} -.claro .dijitSliderReadOnly *,.claro .dijitSliderDisabled * { - border-color: #d3d3d3; - color: #bdbdbd; -} -.claro .dijitSliderReadOnly .dijitSliderDecrementIconH, -.claro .dijitSliderDisabled .dijitSliderDecrementIconH { - background-position:-321px 50%; - background-color:#e9e9e9; -} -.claro .dijitSliderReadOnly .dijitSliderIncrementIconH, -.claro .dijitSliderDisabled .dijitSliderIncrementIconH { - background-position:-215px 50%; - background-color:#e9e9e9; -} -.claro .dijitSliderReadOnly .dijitSliderDecrementIconV, -.claro .dijitSliderDisabled .dijitSliderDecrementIconV { - background-position:-3px 49%; - background-color:#e9e9e9; -} -.claro .dijitSliderReadOnly .dijitSliderIncrementIconV, -.claro .dijitSliderDisabled .dijitSliderIncrementIconV { - background-position:-107px 49%; - background-color:#e9e9e9; -} -.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH, -.dj_ie6 .claro .dijitSlider .dijitSliderLeftBumper, -.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarH, -.dj_ie6 .claro .dijitSlider .dijitSliderRightBumper, -.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarV, -.dj_ie6 .claro .dijitSlider .dijitSliderTopBumper, -.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarV, -.dj_ie6 .claro .dijitSlider .dijitSliderBottomBumper { - background-image:none; -} -.claro .dijitColorPalette { - outline: 1px solid #769dc0; - border: 1px solid #c0ccdf; - background:#fff; - -moz-border-radius: 0px; -} -.claro .dijitColorPalette .dijitPaletteImg { - - border: 1px solid #cecece; -} -.claro .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg { - border: 1px solid #000; -} -.claro .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg, -.claro .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg { - border: 2px solid #000; -} -.claro .dijitInlineEditBoxDisplayMode { - border: 1px solid transparent; -} -.claro .dijitInlineEditBoxDisplayModeHover { - background-color: #e2f1ff; - border: solid 1px #769dc0; -} -.dj_ie6 .claro .dijitInlineEditBoxDisplayMode { - border: none; -} - -.claro .dijitProgressBar { - margin:2px 0px 2px 0px; -} -.claro .dijitProgressBarEmpty { - - background:#fff url(images/progressBarEmpty.png) repeat-none left; - border-color: #769dc0; -} -.claro .dijitProgressBarTile { - - background:#9dcfff url(images/progressBarFull.png) repeat-x top; -} -.dj_ie6 .claro .dijitProgressBarTile { - background-image: none; -} -.claro .dijitProgressBarFull { - border-right:1px solid #769dc0; -} -.claro .dijitProgressBarLabel { - - color:#293a4b; -} -.claro .dijitProgressBarIndeterminate .dijitProgressBarTile { - - background:#cad2de url(images/progressBarAnim.gif) repeat-x top; -} -.claro .dijitTimePicker .dijitButtonNode { - padding: 0 0; - border-radius: 0; - -moz-border-radius: 0; - -webkit-border-radius: 0; -} -.claro .dijitTimePicker{ - border:1px #b5bcc7 solid; - border-top:none; - border-bottom:none; - background-color:#fff; -} -.claro .dijitTimePickerItem{ - - background-image: url(images/commonHighlight.png); - background-position:0px -1px; - background-repeat:repeat-x; - border-top:solid 1px #b5bcc7; - border-bottom:solid 1px #b5bcc7; - margin-right:-1px; - margin-left:-1px; - margin-top:-1px; -} -.dj_ie6 .claro .dijitTimePickerItem { - background-image: none; -} -.claro .dijitTimePickerTick { - - color:#7a7a7a; - background-color:#f2f2f2; - font-size:0.818em; -} -.claro .dijitTimePickerMarker { - - color:#000; - background-color:#e3f2ff; - font-size: 1em; - white-space: nowrap; -} -.claro .dijitTimePickerTickHover, -.claro .dijitTimePickerMarkerHover, -.claro .dijitTimePickerMarkerSelected, -.claro .dijitTimePickerTickSelected { - background-color: #83c0fa; - color:#000; - border:solid 1px #b5bcc7; - margin-left:-7px; - margin-right:-7px; -} -.claro .dijitTimePickerMarkerSelected, -.claro .dijitTimePickerTickSelected { - font-size: 1em; - } -.dj_ie .claro .dijitTimePickerTickHover, -.dj_ie .claro .dijitTimePickerMarkerHover, -.dj_ie .claro .dijitTimePickerMarkerSelected, -.dj_ie .claro .dijitTimePickerTickSelected { - width: 114%; -} -.dj_ie6 .claro .dijitTimePickerTickHover, -.dj_ie6 .claro .dijitTimePickerMarkerHover, -.dj_ie6 .claro .dijitTimePickerMarkerSelected, -.dj_ie6 .claro .dijitTimePickerTickSelected { - position: relative; - zoom: 1; -} -.claro .dijitTimePickerTick .dijitTimePickerItemInner { - padding:1px; - margin:0px; -} -.claro .dijitTimePicker .dijitButtonNode { - border-left:none; - border-right:none; - border-color:#b5bcc7; - background-color: #f6f7fa; - background-image: url(images/commonHighlight.png); - background-position:0px -1px; - background-repeat:repeat-x; -} -.dj_ie6 .claro .dijitTimePicker .dijitButtonNode { - background-image: none; -} -.claro .dijitTimePicker .dijitArrowButtonInner{ - height: 100%; - background-image: url(form/images/commonFormArrows.png); - background-repeat: no-repeat; - background-position:-140px 45%; -} -.claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner{ - background-position:-35px 45%; -} -.claro .dijitTimePicker .dijitUpArrowHover, -.claro .dijitTimePicker .dijitDownArrowHover { - background-color: #abd6ff; -} -.claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner { - background-position:-175px 45%; -} -.claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner { - background-position:-70px 45%; -} -.claro .dijitBorderContainer { - border: 1px #b5bcc7 solid; - padding: 5px; -} -.claro .dijitSplitContainer-child, -.claro .dijitBorderContainer-child { - - border: 1px #b5bcc7 solid; -} -.claro .dijitBorderContainer-dijitTabContainerTop, -.claro .dijitBorderContainer-dijitTabContainerBottom, -.claro .dijitBorderContainer-dijitTabContainerLeft, -.claro .dijitBorderContainer-dijitTabContainerRight, -.claro .dijitBorderContainer-dijitAccordionContainer { - - border: none; -} -.claro .dijitBorderContainer-dijitBorderContainer { - - border: 1px #c0ccdf solid; - padding: 5px; -} -.claro .dijitSplitterH, -.claro .dijitGutterH { - background:none; - border:0; - height:5px; -} -.claro .dijitSplitterH .dijitSplitterThumb { - background:#dde2e9 none; - height:1px; - top:2px; - width:19px; -} -.claro .dijitSplitterV, -.claro .dijitGutterV { - background:none; - border:0; - width:5px; - margin: 0; -} -.claro .dijitSplitterV .dijitSplitterThumb { - background:#dde2e9 none; - height:19px; - left:2px; - width:1px; - margin: 0; -} -.claro .dijitSplitterHHover { - font-size: 1px; - background: url(layout/images/splitterHorizontalHover.png) no-repeat center top; -} -.claro .dijitSplitterHHover .dijitSplitterThumb { - background:#769dc0 none; -} -.claro .dijitSplitterVHover { - font-size: 1px; - background: url(layout/images/splitterVerticalHover.png) no-repeat center left; -} -.claro .dijitSplitterVHover .dijitSplitterThumb { - background:#769dc0 none; -} -.dj_ie6 .dijitSplitterHHover, -.dj_ie6 .claro .dijitSplitterVHover { - background-color:#cfe9ff; - background-image:none; -} -.claro .dijitSplitterHActive { - font-size: 1px; - background-color:#abd4fb; - border-top:blue; -} -.claro .dijitSplitterVActive { - font-size: 1px; - background-color:#abd4fb; -} -.claro .dijitTreeNode { - zoom: 1; -} -.claro .dijitTreeIsRoot { - background-image: none; -} -.claro .dijitTreeRow { - - padding: 4px 1px 2px 0px; - margin-left: 1px; - background-image: url(images/commonHighlight.png); - background-position:0px 0px; - background-repeat:repeat-x; - border-color: rgba(118,157,192,0); - background-color: rgba(171,214,255,0); - -webkit-transition-property:background-color, border-color; - -webkit-transition-duration:.25s ; - -webkit-transition-timing-function: ease-out; -} -.dj_ie6 .claro .dijitTreeRow { - background-image: none; -} -.claro .dijitTreeRowSelected { - background-repeat:repeat-x; - background-color:#d8edff; - padding: 3px 0px 1px; - margin-left: 0px; - border:solid 1px #c3e2fd; - color:#000; -} -.claro .dijitTreeRowHover { - background-color:#abd6ff; - padding: 3px 0px 1px; - margin-left: 0px; - border:solid 1px #769dc0; - color:#000; - -webkit-transition-duration:.25s ; -} -.claro .dijitTreeRowActive { - background-color:#7dbefa; - background-position:0px -177px; - padding: 3px 0px 1px; - margin-left: 0px; - border:solid 1px #769dc0; - color:#000; -} -.dj_ie6 .claro .dijitTreeRowActive { - background-image: none; -} -.claro .dijitTreeRowFocused { - background-repeat: repeat; -} -.claro .dijitTreeExpando { - background-image: url(images/treeExpandImages.png); - width: 16px; - height: 16px; - background-position: -35px 0px -} -.dj_ie6 .claro .dijitTreeExpando { - background-image: url(images/treeExpandImages8bit.png); -} -.claro .dijitTreeRowHover .dijitTreeExpandoOpened { - background-position: -53px 0px; -} -.claro .dijitTreeExpandoClosed { - background-position: 1px 0px; -} -.claro .dijitTreeRowHover .dijitTreeExpandoClosed { - background-position: -17px 0px; -} -.claro .dijitTreeExpandoLeaf{ - background-image:none; -} -.claro .dijitTreeExpandoLoading { - background-image: url(images/loadingAnimation.gif); -} -.claro .dijitTreeNode .dojoDndItemBefore, -.claro .dijitTreeNode .dojoDndItemAfter { - border-bottom: none; - border-top: none; -} -.claro .dijitTreeNode .dojoDndItemBefore .dijitTreeContent { - border-top: 2px solid #369; -} -.claro .dijitTreeNode .dojoDndItemAfter .dijitTreeContent { - border-bottom: 2px solid #369; -} - -.claro .dijitToolbar { - border-bottom: 1px solid #b5bcc7; - background-color: #f1f1f1; - background-image: url(images/commonHighlight.png); - background-position:0px 0px; - background-repeat:repeat-x; - padding: 2px 0px 2px 4px; - zoom: 1; -} -.claro .dijitToolbar label { - padding: 0px 3px 0 6px; -} -.claro .dijitToolbar .dijitButtonNode { - border:none; - padding: 2px; - background-image: url(images/commonHighlight.png); - background-position:0 -30px; - background-repeat:repeat-x; - background-color:rgba(171,214,255,0); - border-radius: 2px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - -moz-box-shadow: none; - -webkit-box-shadow: none; - -webkit-transition-property:background-color; - -webkit-transition-duration:.3s, .35s; -} -.claro .dijitToolbar .dijitComboButton .dijitButtonNode{ - padding: 3px 2px 3px 2px; -} -.dj_ie .claro .dijitToolbar .dijitButtonNode { - background-color: transparent; -} -.dj_ie6 .claro .dijitToolbar .dijitButtonNode { - background: none; -} -.claro .dijitToolbar .dijitComboBox .dijitButtonNode { - padding: 0px; -} -.claro .dijitToolbar .dijitComboButton { - padding: 1px; -} -.claro .dijitToolbar .dijitButtonHover .dijitButtonNode, -.claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, -.claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode { - background-position:0 0; - border:solid 1px #769dc0; - background-color: #abd6ff; - padding: 1px; -} -.claro .dijitToolbar .dijitComboButtonHover { - background-color: #abd6ff; - border: solid 1px #769dc0; - padding: 0px; -} -.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, -.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { - background-position:0 0; - padding: 2px; -} -.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { - background-color: #7dd6fa; -} -.claro .dijitToolbar .dijitButtonActive .dijitButtonNode, -.claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, -.claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { - border:solid 1px #769dc0; - background-color:#7dbefa; - background-position:0px -177px; - padding: 1px; -} -.claro .dijitToolbar .dijitComboButtonActive { - -webkit-transition-duration:.2s; - border: solid 1px #769dc0; - padding: 0px; -} -.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode { - background-color: #7dbefa; - background-position:0px -177px; - padding: 2px; -} -.claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonActive { - background-color: #7dbefa; -} -.claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode { - border-color: #769dc0; - background-color:#fff; - padding: 1px; -} -.dj_ie6 .claro .dijitToolbar .dijitButtonContents, -.dj_ie7 .claro .dijitToolbar .dijitButtonContents { - margin: -2px 0; - padding: 0; -} -.dj_ie6 .claro .dijitToolbar { - background-image: none; -} -.dj_ie6 .claro .dijitToolbar .dijitButtonNode { - margin: 1px; - border: none; -} -.dj_ie6 .claro .dijitToolbar .dijitButtonHover .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNodeHover, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover, -.dj_ie6 .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitButtonActive .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNodeActive, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonActive, -.dj_ie6 .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode, -.claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode { - margin: 0; - border-width: 1px; - border-style: solid; - background-image: none; -} -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNodeHover, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNodeActive, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonActive { - padding: 1px; -} -.claro .dijitToolbarSeparator { - - background: url(../../icons/images/editorIconsEnabled.png); -} -.claro .dijitDisabled .dijitToolbar { - background:none; - background-color:#f5f5f5; - border-bottom: 1px solid #d3d3d3; -} -.claro .dijitEditorIFrameContainer{ - padding:3px 3px 1px 10px; -} -.claro .dijitEditorIFrame { - background-color: #fff; -} -.claro .dijitEditor { - border: 1px solid #b5bcc7; -} -.claro .dijitEditor .dijitEditorIFrameContainer{ - background-color: #fff; - background-image: url(form/images/textBox_back.png); - background-repeat:repeat-x; -} -.dj_ie6 .claro .dijitEditor .dijitEditorIFrameContainer{ - background-image: none; -} -.claro .dijitEditorHover .dijitEditorIFrameContainer, -.claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame{ - background-color: #eef7ff; -} -.claro .dijitEditorFocused .dijitEditorIFrameContainer, -.claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame{ - - background-color: #fff; -} -.claro .dijitEditorDisabled { - border: 1px solid #d3d3d3; - color: #818181; -} -.claro .dijitDisabled .dijitEditorIFrame, -.claro .dijitDisabled .dijitEditorIFrameContainer { - background-color: #efefef; - background-image: none; -} -.dijitEditorIcon { - background-image: url(../../icons/images/editorIconsEnabled.png); - background-repeat: no-repeat; - width: 18px; - height: 18px; - text-align: center; -} -.dijitDisabled .dijitEditorIcon { - background-image: url(../../icons/images/editorIconsDisabled.png); -} -.dijitEditorIconSep { background-position: 0px; } -.dijitEditorIconSave { background-position: -18px; } -.dijitEditorIconPrint { background-position: -36px; } -.dijitEditorIconCut { background-position: -54px; } -.dijitEditorIconCopy { background-position: -72px; } -.dijitEditorIconPaste { background-position: -90px; } -.dijitEditorIconDelete { background-position: -108px; } -.dijitEditorIconCancel { background-position: -126px; } -.dijitEditorIconUndo { background-position: -144px; } -.dijitEditorIconRedo { background-position: -162px; } -.dijitEditorIconSelectAll { background-position: -180px; } -.dijitEditorIconBold { background-position: -198px; } -.dijitEditorIconItalic { background-position: -216px; } -.dijitEditorIconUnderline { background-position: -234px; } -.dijitEditorIconStrikethrough { background-position: -252px; } -.dijitEditorIconSuperscript { background-position: -270px; } -.dijitEditorIconSubscript { background-position: -288px; } -.dijitEditorIconJustifyCenter { background-position: -306px; } -.dijitEditorIconJustifyFull { background-position: -324px; } -.dijitEditorIconJustifyLeft { background-position: -342px; } -.dijitEditorIconJustifyRight { background-position: -360px; } -.dijitEditorIconIndent { background-position: -378px; } -.dijitEditorIconOutdent { background-position: -396px; } -.dijitEditorIconListBulletIndent { background-position: -414px; } -.dijitEditorIconListBulletOutdent { background-position: -432px; } -.dijitEditorIconListNumIndent { background-position: -450px; } -.dijitEditorIconListNumOutdent { background-position: -468px; } -.dijitEditorIconTabIndent { background-position: -486px; } -.dijitEditorIconLeftToRight { background-position: -504px; } -.dijitEditorIconRightToLeft, .dijitEditorIconToggleDir { background-position: -522px; } -.dijitEditorIconBackColor { background-position: -540px; } -.dijitEditorIconForeColor { background-position: -558px; } -.dijitEditorIconHiliteColor { background-position: -576px; } -.dijitEditorIconNewPage { background-position: -594px; } -.dijitEditorIconInsertImage { background-position: -612px; } -.dijitEditorIconInsertTable { background-position: -630px; } -.dijitEditorIconSpace { background-position: -648px; } -.dijitEditorIconInsertHorizontalRule { background-position: -666px; } -.dijitEditorIconInsertOrderedList { background-position: -684px; } -.dijitEditorIconInsertUnorderedList { background-position: -702px; } -.dijitEditorIconCreateLink { background-position: -720px; } -.dijitEditorIconUnlink { background-position: -738px; } -.dijitEditorIconViewSource { background-position: -756px; } -.dijitEditorIconRemoveFormat { background-position: -774px; } -.dijitEditorIconFullScreen { background-position: -792px; } -.dijitEditorIconWikiword { background-position: -810px; } - -.claro .dijitTitlePaneTitle { - background-color: #e6e6e7; - background-image: url(images/titlebar.png); - background-repeat:repeat-x; - border:1px solid #b5bcc7; - padding: 0px 7px 3px 7px; - min-height:17px; - color:#131313; -} -.dj_ie6 .claro .dijitTitlePaneTitle { - background-image: none; -} -.claro .dijitTitlePaneTitleHover { - background-color: #abd6ff; - border-color: #769dc0; -} -.claro .dijitTitlePaneTitleActive { - background-color: #7dbefa; - border-color: #769dc0; - background-position:0px -136px; -} -.claro .dijitTitlePaneTitleFocus { - margin-top:3px; - padding-bottom:2px; -} -.claro .dijitTitlePane .dijitArrowNode { - background-image: url(images/spriteArrows.png); - background-repeat: no-repeat; - height: 8px; - width: 7px; -} -.claro .dijitTitlePane .dijitOpen .dijitArrowNode { - background-position: 0px 0px; -} -.claro .dijitTitlePane .dijitClosed .dijitArrowNode { - background-position: -14px 0px; -} -.claro .dijitTitlePaneFocused .dijitTitlePaneTextNode { - color:#000; -} -.claro .dijitTitlePaneContentOuter { - background: #ffffff; - border:1px solid #b5bcc7; - border-top:none; -} -.claro .dijitTitlePaneContentInner { - padding:10px; -} -.claro .dijitTitlePaneTextNode { - margin-left: 4px; - margin-right: 4px; - vertical-align:text-top; -} -.claro .dijitSpinnerButtonContainer { - overflow: hidden; - position: relative; - width: auto; - padding: 0 2px; -} -.claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner { - border-width: 1px 0; - border-style: solid none; -} -.claro .dijitSpinner .dijitArrowButton { - width:auto; - background-color: #ebeef4; - background-image: url(form/images/formHighlight.png); - background-position:0px 0px; - background-repeat:repeat-x; - overflow: hidden; -} -.dj_iequirks .claro .dijitSpinner .dijitArrowButton { - overflow: visible; -} -.claro .dijitSpinner .dijitSpinnerButtonInner { - width: 15px; -} -.claro .dijitSpinner .dijitArrowButtonInner { - border:solid 1px #fff; - border-bottom-width: 0; - background-image: url(form/images/commonFormArrows.png); - background-repeat: no-repeat; - height: 100%; - width:15px; - padding-left: 1px; - padding-right: 1px; - - background-position:-139px center; - - display: block; - margin: -1px 0px -1px 0px; - #margin-top: 0; -} -.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner { - width: 19px; -} -.claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner { - background-position:-34px; -} -.claro .dijitSpinner .dijitArrowButtonInner .dijitInputField { - padding: 0; -} -.claro .dijitUpArrowButtonActive, -.claro .dijitDownArrowButtonActive { - background-color:#abd6ff; -} -.claro .dijitSpinner .dijitUpArrowButtonHover, -.claro .dijitSpinner .dijitDownArrowButtonHover, -.claro .dijitSpinnerFocused .dijitArrowButton { - background-color: #a0d1ff; -} -.claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner { - background-position:-174px; -} -.claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner { - background-position:-69px; -} -.claro .dijitSpinnerFocused { - background-color: #fff; - background-image: none; -} -.claro .dijitSpinner .dijitDownArrowButtonActive, -.claro .dijitSpinner .dijitUpArrowButtonActive { - background-color: #3299f9; - background-position:0px -177px; -} -.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, -.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { - - border: 0px; - padding: 1px; - margin-right:2px; - margin-bottom:1px; -} -.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner { - background-position:-173px; -} -.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { - background-position:-68px; -} -.claro .dijitSpinnerDisabled .dijitArrowButtonInner { - background-color: #f1f1f1; -} -.claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner { - background-position:-104px; -} -.claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner { - background-position:1px; -} -.dj_ie7 .claro .dijitSpinner { - overflow:visible; -} -.dijitRtl .dijitPlaceHolder { - left: auto; - right: 0; -} -.dijitMenuItemRtl { - text-align: right; -} -.dj_iequirks .dijitComboButtonRtl BUTTON { - - float:left; -} -.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer, -.dijitTextBoxRtl .dijitSpinnerButtonContainer, -.dijitComboBoxRtl .dijitArrowButtonContainer { - - border-right-width: 1px !important; - border-right-style: solid !important; - border-left-width: 0px !important; - border-left-style: none !important; -} -.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer, -.dijit_a11y .dijitTextBoxRtl .dijitSpinnerButtonContainer, -.dijit_a11y .dijitComboBoxRtl .dijitArrowButtonContainer { - border-right: 1px solid black !important; - border-left: 0px none black !important; -} -.dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton { - right: 0; - left: auto; -} -.dijitTextBoxRtl .dijitSpinnerButtonContainer, -.dijitTextBoxRtl .dijitValidationContainer, -.dijitTextBoxRtl .dijitArrowButtonContainer { - float: left; -} -.dijitCalendarRtl .dijitCalendarNextYear { - margin:0 0.55em 0 0; -} -.dijitCalendarRtl .dijitCalendarPreviousYear { - margin:0 0 0 0.55em; -} -.dijitSliderRtl .dijitSliderImageHandleV { - left:auto; -} -.dijitSliderRtl .dijitSliderImageHandleH { - left:-50%; -} -.dijitSliderRtl .dijitSliderMoveableH { - right:auto; - left:0; -} -.dijitSliderRtl .dijitRuleContainerV { - float:right; -} -.dj_ie .dijitSliderRtl .dijitRuleContainerV { - text-align:right; -} -.dj_ie .dijitSliderRtl .dijitRuleLabelV { - text-align:left; -} -.dj_ie .dijitSliderRtl .dijitRuleLabelH { - zoom:1; -} -.dijitSliderRtl .dijitSliderProgressBarH { - - float:right; - right:0; - left:auto; -} -.dijitRtl .dijitContentPaneLoading, .dijitRtl .dijitContentPaneError { - background-position:right; - padding-right:25px; -} -.dijitTabRtl .dijitTabCloseButton { - margin-left: 0px; - margin-right: 1em; -} -.dj_ie .dijitTimePickerRtl .dijitTimePickerItem { - width:100%; -} -.dijitColorPaletteRtl .dijitColorPaletteUnder { - - left: auto; - right: 0; -} -.dijitSelectRtl .dijitButtonContents { - text-align: right; -} -.claro .dijitTextBoxRtlError .dijitValidationContainer { - border-left-width: 0px; - border-right-width: 1px; -} -.claro .dijitComboButtonRtl .dijitStretch { - -moz-border-radius: 0px 4px 4px 0px; - -webkit-border-top-left-radius: 0px; - -webkit-border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -webkit-border-bottom-left-radius: 0px; -} -.claro .dijitComboButtonRtl .dijitArrowButton { - -moz-border-radius: 4px 0px 0px 4px; - -webkit-border-top-left-radius:4px; - -webkit-border-top-right-radius:0px; - -webkit-border-bottom-right-radius:0px; - -webkit-border-bottom-left-radius:4px; - padding:3px 0px 4px; - border-left-width: 1px; - border-right-width: 0px; -} -.claro .dijitTabContainerTop-tabs .dijitTabRtl, -.claro .dijitTabContainerBottom-tabs .dijitTabRtl { - margin-right: 0; - margin-left: 1px; -} -.claro .dijitTabRtl { - -moz-box-orient:horizontal; - text-align: right; -} -.dj_ie7 .claro .dijitTabRtl .dijitTabContent { - display: block; - left: 0; -} -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl, -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl { - top: 1px; -} -.dj_ie7 .claro .tabStripButtonRtl .dijitButtonContents, -.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents, -.dj_ie6 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_ie6 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_ie7 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_iequirks .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_iequirks .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv { - float:left; -} -.dj_ie6 .claro .dijitTabRtl .tabLabel, -.dj_ie6 .claro .dijitTabContainerRight-tabs .dijitTabRtl, -.dj_ie6 .claro .dijitTabContainerLeft-tabs .dijitTabRtl, -.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_ie7 .claro .dijitTabContainerLeft-tabs .dijitTabRtl .dijitTabInnerDiv { - - zoom:1; -} -.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton, -.dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton, -.dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton { - margin-right:5px; -} -.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, -.dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs { - width:1%; -} -.dj_ie6 .dijitTabContainerTopStrip, -.dj_ie6 .dijitTabContainerBottomStrip { - position:absolute; -} -.dj_iequirks .claro .dijitTabContainerTopRtl .dijitTabContainerTopStrip { - padding-top: 10px; -} -.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtlChecked .dijitTabInnerDiv { - background-position:-341px -179px; -} -.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, -.dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon { - position: relative; -} -.dj_ie6-rtl .claro .dijitTabContainerTop-tabs { - - padding-left: 3px; -} -.dj_iequirks-rtl .claro .dijitTabListWrapper { - - border-left: 1px solid #fff; - border-right: 1px solid #fff; -} -.claro .dijitSliderRtl .dijitSliderProgressBarH, -.claro .dijitSliderRtl .dijitSliderRemainingBarH, -.claro .dijitSliderRtl .dijitSliderLeftBumper, -.claro .dijitSliderRtl .dijitSliderRightBumper, -.claro .dijitSliderRtl .dijitSliderTopBumper { - background-position: top right; -} -.claro .dijitSliderRtl .dijitSliderProgressBarV, -.claro .dijitSliderRtl .dijitSliderRemainingBarV, -.claro .dijitSliderRtl .dijitSliderBottomBumper { - background-position: bottom right; -} -.claro .dijitSliderRtl .dijitSliderLeftBumper { - border-left-width: 0px; - border-right-width: 1px; -} -.claro .dijitSliderRtl .dijitSliderRightBumper { - border-left-width: 1px; - border-right-width: 0px; -} -.claro .dijitSliderRtl .dijitSliderIncrementIconH { - background-position:-357px 50%; -} -.claro .dijitSliderRtl .dijitSliderDecrementIconH { - background-position:-251px 50%; -} -.claro .dijitSelectRtl .dijitButtonContents { - border-right-width: 0px; - border-left-width: 1px; -} -.claro .dijitDialogRtl .dijitDialogCloseIcon { - right: auto; - left: 5px; -} -.claro .dijitDialogRtl .dijitDialogPaneActionBar { - text-align: left; - padding: 3px 7px 2px 5px; -} -.claro .dijitEditorRtl .dijitEditorIFrameContainer{ - padding:3px 10px 1px 3px; -} -.dijitEditorRtl .dijitEditorIcon { - background-image: url(../../icons/images/editorIconsEnabled_rtl.png); -} -.dijitEditorRtlDisabled .dijitEditorIcon { - background-image: url(../../icons/images/editorIconsDisabled_rtl.png); -} -.dijitToolbarRtl .dijitToolbarSeparator { - background-image: url(../../icons/images/editorIconsEnabled_rtl.png); -} -.dijitRtl .dijitIconSave, -.dijitRtl .dijitIconPrint, -.dijitRtl .dijitIconCut, -.dijitRtl .dijitIconCopy, -.dijitRtl .dijitIconClear, -.dijitRtl .dijitIconDelete, -.dijitRtl .dijitIconUndo, -.dijitRtl .dijitIconEdit, -.dijitRtl .dijitIconNewTask, -.dijitRtl .dijitIconEditTask, -.dijitRtl .dijitIconEditProperty, -.dijitRtl .dijitIconTask, -.dijitRtl .dijitIconFilter, -.dijitRtl .dijitIconConfigure, -.dijitRtl .dijitIconSearch, -.dijitRtl .dijitIconApplication, -.dijitRtl .dijitIconBookmark, -.dijitRtl .dijitIconChart, -.dijitRtl .dijitIconConnector, -.dijitRtl .dijitIconDatabase, -.dijitRtl .dijitIconDocuments, -.dijitRtl .dijitIconMail, -.dijitRtl .dijitLeaf, -.dijitRtl .dijitIconFile, -.dijitRtl .dijitIconFunction, -.dijitRtl .dijitIconKey, -.dijitRtl .dijitIconPackage, -.dijitRtl .dijitIconSample, -.dijitRtl .dijitIconTable, -.dijitRtl .dijitIconUsers, -.dijitRtl .dijitFolderClosed, -.dijitRtl .dijitIconFolderClosed, -.dijitRtl .dijitFolderOpened, -.dijitRtl .dijitIconFolderOpen, -.dijitRtl .dijitIconError, .dijitRtl .dijitContentPaneError { - background-image: url(../../icons/images/commonIconsObjActEnabled_rtl.png); - width: 16px; - height: 16px; -} -.dj_ie6 .dijitRtl .dijitIconSave, -.dj_ie6 .dijitRtl .dijitIconPrint, -.dj_ie6 .dijitRtl .dijitIconCut, -.dj_ie6 .dijitRtl .dijitIconCopy, -.dj_ie6 .dijitRtl .dijitIconClear, -.dj_ie6 .dijitRtl .dijitIconDelete, -.dj_ie6 .dijitRtl .dijitIconUndo, -.dj_ie6 .dijitRtl .dijitIconEdit, -.dj_ie6 .dijitRtl .dijitIconNewTask, -.dj_ie6 .dijitRtl .dijitIconEditTask, -.dj_ie6 .dijitRtl .dijitIconEditProperty, -.dj_ie6 .dijitRtl .dijitIconTask, -.dj_ie6 .dijitRtl .dijitIconFilter, -.dj_ie6 .dijitRtl .dijitIconConfigure, -.dj_ie6 .dijitRtl .dijitIconSearch, -.dj_ie6 .dijitRtl .dijitIconApplication, -.dj_ie6 .dijitRtl .dijitIconBookmark, -.dj_ie6 .dijitRtl .dijitIconChart, -.dj_ie6 .dijitRtl .dijitIconConnector, -.dj_ie6 .dijitRtl .dijitIconDatabase, -.dj_ie6 .dijitRtl .dijitIconDocuments, -.dj_ie6 .dijitRtl .dijitIconMail, -.dj_ie6 .dijitRtl .dijitLeaf, -.dj_ie6 .dijitRtl .dijitIconFile, -.dj_ie6 .dijitRtl .dijitIconFunction, -.dj_ie6 .dijitRtl .dijitIconKey, -.dj_ie6 .dijitRtl .dijitIconPackage, -.dj_ie6 .dijitRtl .dijitIconSample, -.dj_ie6 .dijitRtl .dijitIconTable, -.dj_ie6 .dijitRtl .dijitIconUsers, -.dj_ie6 .dijitRtl .dijitFolderClosed, -.dj_ie6 .dijitRtl .dijitIconFolderClosed, -.dj_ie6 .dijitRtl .dijitFolderOpened, -.dj_ie6 .dijitRtl .dijitIconFolderOpen, -.dj_ie6 .dijitRtl .dijitIconError, .dj_ie6 .dijitRtl .dijitContentPaneError { - background-image: url(../../icons/images/commonIconsObjActEnabled8bit_rtl.png); -} -.dijitRtl .dijitDisabled .dijitIconSave, -.dijitRtl .dijitDisabled .dijitIconPrint, -.dijitRtl .dijitDisabled .dijitIconCut, -.dijitRtl .dijitDisabled .dijitIconCopy, -.dijitRtl .dijitDisabled .dijitIconClear, -.dijitRtl .dijitDisabled .dijitIconDelete, -.dijitRtl .dijitDisabled .dijitIconUndo, -.dijitRtl .dijitDisabled .dijitIconEdit, -.dijitRtl .dijitDisabled .dijitIconNewTask, -.dijitRtl .dijitDisabled .dijitIconEditTask, -.dijitRtl .dijitDisabled .dijitIconEditProperty, -.dijitRtl .dijitDisabled .dijitIconTask, -.dijitRtl .dijitDisabled .dijitIconFilter, -.dijitRtl .dijitDisabled .dijitIconConfigure, -.dijitRtl .dijitDisabled .dijitIconSearch, -.dijitRtl .dijitDisabled .dijitIconApplication, -.dijitRtl .dijitDisabled .dijitIconBookmark, -.dijitRtl .dijitDisabled .dijitIconChart, -.dijitRtl .dijitDisabled .dijitIconConnector, -.dijitRtl .dijitDisabled .dijitIconDatabase, -.dijitRtl .dijitDisabled .dijitIconDocuments, -.dijitRtl .dijitDisabled .dijitIconMail, -.dijitRtl .dijitDisabled .dijitLeaf, -.dijitRtl .dijitDisabled .dijitIconFile, -.dijitRtl .dijitDisabled .dijitIconFunction, -.dijitRtl .dijitDisabled .dijitIconKey, -.dijitRtl .dijitDisabled .dijitIconPackage, -.dijitRtl .dijitDisabled .dijitIconSample, -.dijitRtl .dijitDisabled .dijitIconTable, -.dijitRtl .dijitDisabled .dijitIconUsers, -.dijitRtl .dijitDisabled .dijitFolderClosed, -.dijitRtl .dijitDisabled .dijitIconFolderClosed, -.dijitRtl .dijitDisabled .dijitFolderOpened, -.dijitRtl .dijitDisabled .dijitIconFolderOpen, -.dijitRtl .dijitDisabled .dijitIconError, .dijitRtl .dijitDisabled .dijitContentPaneError { - background-image: url(../../icons/images/commonIconsObjActDisabled_rtl.png); -} -.dijitRtl .dijitContentPaneLoading { - background:url(../../icons/images/loadingAnimation_rtl.gif) no-repeat; -} -.claro .dijitTitlePaneRtl .dijitClosed .dijitArrowNode { - background-position: -7px 0px; -} -.claro .dijitMenuItemRtl .dijitMenuExpand { - background-position: -7px 0px; - margin-right: 0px; - margin-left: 3px; -} -.claro .dijitMenuItemRtl .dijitMenuItemIcon { - margin:0px 4px 0px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarIncrease{ - background-position: 0px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarDecrease { - background-position: -18px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarIncrease { - background-position: -36px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarDecrease { - background-position: -55px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarIncrease { - background-position: -72px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarDecrease { - background-position: -91px 0px; -} -.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickHover, -.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerHover, -.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerSelected, -.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickSelected { - margin-left:-6px; - margin-right:-8px; - width: 114%; -} +@import url("claro_rtl.css"); diff --git a/lib/dijit/themes/claro/claro_rtl.css b/lib/dijit/themes/claro/claro_rtl.css index 01a0342cd..6f85707f5 100644 --- a/lib/dijit/themes/claro/claro_rtl.css +++ b/lib/dijit/themes/claro/claro_rtl.css @@ -1,380 +1,16 @@ - -.dijitRtl .dijitPlaceHolder { - left: auto; - right: 0; -} -.dijitMenuItemRtl { - text-align: right; -} -.dj_iequirks .dijitComboButtonRtl BUTTON { - - float:left; -} -.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer, -.dijitTextBoxRtl .dijitSpinnerButtonContainer, -.dijitComboBoxRtl .dijitArrowButtonContainer { - - border-right-width: 1px !important; - border-right-style: solid !important; - border-left-width: 0px !important; - border-left-style: none !important; -} -.dijit_a11y .dijitTextBoxRtl .dijitValidationContainer, -.dijit_a11y .dijitTextBoxRtl .dijitSpinnerButtonContainer, -.dijit_a11y .dijitComboBoxRtl .dijitArrowButtonContainer { - border-right: 1px solid black !important; - border-left: 0px none black !important; -} -.dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton { - right: 0; - left: auto; -} -.dijitTextBoxRtl .dijitSpinnerButtonContainer, -.dijitTextBoxRtl .dijitValidationContainer, -.dijitTextBoxRtl .dijitArrowButtonContainer { - float: left; -} -.dijitCalendarRtl .dijitCalendarNextYear { - margin:0 0.55em 0 0; -} -.dijitCalendarRtl .dijitCalendarPreviousYear { - margin:0 0 0 0.55em; -} -.dijitSliderRtl .dijitSliderImageHandleV { - left:auto; -} -.dijitSliderRtl .dijitSliderImageHandleH { - left:-50%; -} -.dijitSliderRtl .dijitSliderMoveableH { - right:auto; - left:0; -} -.dijitSliderRtl .dijitRuleContainerV { - float:right; -} -.dj_ie .dijitSliderRtl .dijitRuleContainerV { - text-align:right; -} -.dj_ie .dijitSliderRtl .dijitRuleLabelV { - text-align:left; -} -.dj_ie .dijitSliderRtl .dijitRuleLabelH { - zoom:1; -} -.dijitSliderRtl .dijitSliderProgressBarH { - - float:right; - right:0; - left:auto; -} -.dijitRtl .dijitContentPaneLoading, .dijitRtl .dijitContentPaneError { - background-position:right; - padding-right:25px; -} -.dijitTabRtl .dijitTabCloseButton { - margin-left: 0px; - margin-right: 1em; -} -.dj_ie .dijitTimePickerRtl .dijitTimePickerItem { - width:100%; -} -.dijitColorPaletteRtl .dijitColorPaletteUnder { - - left: auto; - right: 0; -} -.dijitSelectRtl .dijitButtonContents { - text-align: right; -} -.claro .dijitTextBoxRtlError .dijitValidationContainer { - border-left-width: 0px; - border-right-width: 1px; -} -.claro .dijitComboButtonRtl .dijitStretch { - -moz-border-radius: 0px 4px 4px 0px; - -webkit-border-top-left-radius: 0px; - -webkit-border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -webkit-border-bottom-left-radius: 0px; -} -.claro .dijitComboButtonRtl .dijitArrowButton { - -moz-border-radius: 4px 0px 0px 4px; - -webkit-border-top-left-radius:4px; - -webkit-border-top-right-radius:0px; - -webkit-border-bottom-right-radius:0px; - -webkit-border-bottom-left-radius:4px; - padding:3px 0px 4px; - border-left-width: 1px; - border-right-width: 0px; -} -.claro .dijitTabContainerTop-tabs .dijitTabRtl, -.claro .dijitTabContainerBottom-tabs .dijitTabRtl { - margin-right: 0; - margin-left: 1px; -} -.claro .dijitTabRtl { - -moz-box-orient:horizontal; - text-align: right; -} -.dj_ie7 .claro .dijitTabRtl .dijitTabContent { - display: block; - left: 0; -} -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl, -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl { - top: 1px; -} -.dj_ie7 .claro .tabStripButtonRtl .dijitButtonContents, -.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents, -.dj_ie6 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_ie6 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_ie7 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_iequirks .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_iequirks .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv { - float:left; -} -.dj_ie6 .claro .dijitTabRtl .tabLabel, -.dj_ie6 .claro .dijitTabContainerRight-tabs .dijitTabRtl, -.dj_ie6 .claro .dijitTabContainerLeft-tabs .dijitTabRtl, -.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtl .dijitTabInnerDiv, -.dj_ie7 .claro .dijitTabContainerLeft-tabs .dijitTabRtl .dijitTabInnerDiv { - - zoom:1; -} -.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton, -.dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton, -.dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton { - margin-right:5px; -} -.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, -.dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs { - width:1%; -} -.dj_ie6 .dijitTabContainerTopStrip, -.dj_ie6 .dijitTabContainerBottomStrip { - position:absolute; -} -.dj_iequirks .claro .dijitTabContainerTopRtl .dijitTabContainerTopStrip { - padding-top: 10px; -} -.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtlChecked .dijitTabInnerDiv { - background-position:-341px -179px; -} -.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, -.dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon { - position: relative; -} -.dj_ie6-rtl .claro .dijitTabContainerTop-tabs { - - padding-left: 3px; -} -.dj_iequirks-rtl .claro .dijitTabListWrapper { - - border-left: 1px solid #fff; - border-right: 1px solid #fff; -} -.claro .dijitSliderRtl .dijitSliderProgressBarH, -.claro .dijitSliderRtl .dijitSliderRemainingBarH, -.claro .dijitSliderRtl .dijitSliderLeftBumper, -.claro .dijitSliderRtl .dijitSliderRightBumper, -.claro .dijitSliderRtl .dijitSliderTopBumper { - background-position: top right; -} -.claro .dijitSliderRtl .dijitSliderProgressBarV, -.claro .dijitSliderRtl .dijitSliderRemainingBarV, -.claro .dijitSliderRtl .dijitSliderBottomBumper { - background-position: bottom right; -} -.claro .dijitSliderRtl .dijitSliderLeftBumper { - border-left-width: 0px; - border-right-width: 1px; -} -.claro .dijitSliderRtl .dijitSliderRightBumper { - border-left-width: 1px; - border-right-width: 0px; -} -.claro .dijitSliderRtl .dijitSliderIncrementIconH { - background-position:-357px 50%; -} -.claro .dijitSliderRtl .dijitSliderDecrementIconH { - background-position:-251px 50%; -} -.claro .dijitSelectRtl .dijitButtonContents { - border-right-width: 0px; - border-left-width: 1px; -} -.claro .dijitDialogRtl .dijitDialogCloseIcon { - right: auto; - left: 5px; -} -.claro .dijitDialogRtl .dijitDialogPaneActionBar { - text-align: left; - padding: 3px 7px 2px 5px; -} -.claro .dijitEditorRtl .dijitEditorIFrameContainer{ - padding:3px 10px 1px 3px; -} -.dijitEditorRtl .dijitEditorIcon { - background-image: url(../../icons/images/editorIconsEnabled_rtl.png); -} -.dijitEditorRtlDisabled .dijitEditorIcon { - background-image: url(../../icons/images/editorIconsDisabled_rtl.png); -} -.dijitToolbarRtl .dijitToolbarSeparator { - background-image: url(../../icons/images/editorIconsEnabled_rtl.png); -} -.dijitRtl .dijitIconSave, -.dijitRtl .dijitIconPrint, -.dijitRtl .dijitIconCut, -.dijitRtl .dijitIconCopy, -.dijitRtl .dijitIconClear, -.dijitRtl .dijitIconDelete, -.dijitRtl .dijitIconUndo, -.dijitRtl .dijitIconEdit, -.dijitRtl .dijitIconNewTask, -.dijitRtl .dijitIconEditTask, -.dijitRtl .dijitIconEditProperty, -.dijitRtl .dijitIconTask, -.dijitRtl .dijitIconFilter, -.dijitRtl .dijitIconConfigure, -.dijitRtl .dijitIconSearch, -.dijitRtl .dijitIconApplication, -.dijitRtl .dijitIconBookmark, -.dijitRtl .dijitIconChart, -.dijitRtl .dijitIconConnector, -.dijitRtl .dijitIconDatabase, -.dijitRtl .dijitIconDocuments, -.dijitRtl .dijitIconMail, -.dijitRtl .dijitLeaf, -.dijitRtl .dijitIconFile, -.dijitRtl .dijitIconFunction, -.dijitRtl .dijitIconKey, -.dijitRtl .dijitIconPackage, -.dijitRtl .dijitIconSample, -.dijitRtl .dijitIconTable, -.dijitRtl .dijitIconUsers, -.dijitRtl .dijitFolderClosed, -.dijitRtl .dijitIconFolderClosed, -.dijitRtl .dijitFolderOpened, -.dijitRtl .dijitIconFolderOpen, -.dijitRtl .dijitIconError, .dijitRtl .dijitContentPaneError { - background-image: url(../../icons/images/commonIconsObjActEnabled_rtl.png); - width: 16px; - height: 16px; -} -.dj_ie6 .dijitRtl .dijitIconSave, -.dj_ie6 .dijitRtl .dijitIconPrint, -.dj_ie6 .dijitRtl .dijitIconCut, -.dj_ie6 .dijitRtl .dijitIconCopy, -.dj_ie6 .dijitRtl .dijitIconClear, -.dj_ie6 .dijitRtl .dijitIconDelete, -.dj_ie6 .dijitRtl .dijitIconUndo, -.dj_ie6 .dijitRtl .dijitIconEdit, -.dj_ie6 .dijitRtl .dijitIconNewTask, -.dj_ie6 .dijitRtl .dijitIconEditTask, -.dj_ie6 .dijitRtl .dijitIconEditProperty, -.dj_ie6 .dijitRtl .dijitIconTask, -.dj_ie6 .dijitRtl .dijitIconFilter, -.dj_ie6 .dijitRtl .dijitIconConfigure, -.dj_ie6 .dijitRtl .dijitIconSearch, -.dj_ie6 .dijitRtl .dijitIconApplication, -.dj_ie6 .dijitRtl .dijitIconBookmark, -.dj_ie6 .dijitRtl .dijitIconChart, -.dj_ie6 .dijitRtl .dijitIconConnector, -.dj_ie6 .dijitRtl .dijitIconDatabase, -.dj_ie6 .dijitRtl .dijitIconDocuments, -.dj_ie6 .dijitRtl .dijitIconMail, -.dj_ie6 .dijitRtl .dijitLeaf, -.dj_ie6 .dijitRtl .dijitIconFile, -.dj_ie6 .dijitRtl .dijitIconFunction, -.dj_ie6 .dijitRtl .dijitIconKey, -.dj_ie6 .dijitRtl .dijitIconPackage, -.dj_ie6 .dijitRtl .dijitIconSample, -.dj_ie6 .dijitRtl .dijitIconTable, -.dj_ie6 .dijitRtl .dijitIconUsers, -.dj_ie6 .dijitRtl .dijitFolderClosed, -.dj_ie6 .dijitRtl .dijitIconFolderClosed, -.dj_ie6 .dijitRtl .dijitFolderOpened, -.dj_ie6 .dijitRtl .dijitIconFolderOpen, -.dj_ie6 .dijitRtl .dijitIconError, .dj_ie6 .dijitRtl .dijitContentPaneError { - background-image: url(../../icons/images/commonIconsObjActEnabled8bit_rtl.png); -} -.dijitRtl .dijitDisabled .dijitIconSave, -.dijitRtl .dijitDisabled .dijitIconPrint, -.dijitRtl .dijitDisabled .dijitIconCut, -.dijitRtl .dijitDisabled .dijitIconCopy, -.dijitRtl .dijitDisabled .dijitIconClear, -.dijitRtl .dijitDisabled .dijitIconDelete, -.dijitRtl .dijitDisabled .dijitIconUndo, -.dijitRtl .dijitDisabled .dijitIconEdit, -.dijitRtl .dijitDisabled .dijitIconNewTask, -.dijitRtl .dijitDisabled .dijitIconEditTask, -.dijitRtl .dijitDisabled .dijitIconEditProperty, -.dijitRtl .dijitDisabled .dijitIconTask, -.dijitRtl .dijitDisabled .dijitIconFilter, -.dijitRtl .dijitDisabled .dijitIconConfigure, -.dijitRtl .dijitDisabled .dijitIconSearch, -.dijitRtl .dijitDisabled .dijitIconApplication, -.dijitRtl .dijitDisabled .dijitIconBookmark, -.dijitRtl .dijitDisabled .dijitIconChart, -.dijitRtl .dijitDisabled .dijitIconConnector, -.dijitRtl .dijitDisabled .dijitIconDatabase, -.dijitRtl .dijitDisabled .dijitIconDocuments, -.dijitRtl .dijitDisabled .dijitIconMail, -.dijitRtl .dijitDisabled .dijitLeaf, -.dijitRtl .dijitDisabled .dijitIconFile, -.dijitRtl .dijitDisabled .dijitIconFunction, -.dijitRtl .dijitDisabled .dijitIconKey, -.dijitRtl .dijitDisabled .dijitIconPackage, -.dijitRtl .dijitDisabled .dijitIconSample, -.dijitRtl .dijitDisabled .dijitIconTable, -.dijitRtl .dijitDisabled .dijitIconUsers, -.dijitRtl .dijitDisabled .dijitFolderClosed, -.dijitRtl .dijitDisabled .dijitIconFolderClosed, -.dijitRtl .dijitDisabled .dijitFolderOpened, -.dijitRtl .dijitDisabled .dijitIconFolderOpen, -.dijitRtl .dijitDisabled .dijitIconError, .dijitRtl .dijitDisabled .dijitContentPaneError { - background-image: url(../../icons/images/commonIconsObjActDisabled_rtl.png); -} -.dijitRtl .dijitContentPaneLoading { - background:url(../../icons/images/loadingAnimation_rtl.gif) no-repeat; -} -.claro .dijitTitlePaneRtl .dijitClosed .dijitArrowNode { - background-position: -7px 0px; -} -.claro .dijitMenuItemRtl .dijitMenuExpand { - background-position: -7px 0px; - margin-right: 0px; - margin-left: 3px; -} -.claro .dijitMenuItemRtl .dijitMenuItemIcon { - margin:0px 4px 0px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarIncrease{ - background-position: 0px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarDecrease { - background-position: -18px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarIncrease { - background-position: -36px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarDecrease { - background-position: -55px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarIncrease { - background-position: -72px 0px; -} -.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarDecrease { - background-position: -91px 0px; -} -.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickHover, -.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerHover, -.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerSelected, -.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickSelected { - margin-left:-6px; - margin-right:-8px; - width: 114%; -} +/* RTL files */ +@import url("../dijit_rtl.css"); +@import url("form/Common_rtl.css"); +@import url("form/Button_rtl.css"); +@import url("layout/TabContainer_rtl.css"); +@import url("form/Slider_rtl.css"); +@import url("form/Select_rtl.css"); +@import url("Dialog_rtl.css"); +@import url("Editor_rtl.css"); +@import url("../../icons/editorIcons_rtl.css");/* RTL sprite for editor icons to be used by all themes*/ +@import url("../../icons/commonIcons_rtl.css");/* RTL sprite for common icons to be used by all themes*/ +@import url("TitlePane_rtl.css"); +@import url("Menu_rtl.css"); +@import url("Calendar_rtl.css"); +@import url("TimePicker_rtl.css"); +@import url("Toolbar_rtl.css"); diff --git a/lib/dijit/themes/claro/compile.js b/lib/dijit/themes/claro/compile.js new file mode 100644 index 000000000..14762b592 --- /dev/null +++ b/lib/dijit/themes/claro/compile.js @@ -0,0 +1,62 @@ +/* + Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved. + Available via Academic Free License >= 2.1 OR the modified BSD license. + see: http://dojotoolkit.org/license for details +*/ + + +// Script to process all the less files and convert them to CSS files +// Run from themes/dijit/claro like: +// +// $ node compile.js + +// Some guesses for where to find less +require.paths.unshift('/opt/less/lib', 'C:/less/lib'); + +var fs = require('fs'), // file system access + path = require('path'), // get directory from file name + less = require('less'); // less processor + +var options = { + compress: false, + optimization: 1, + silent: false +}; + +var allFiles = [].concat( + fs.readdirSync("."), + fs.readdirSync("form").map(function(fname){ return "form/"+fname; }), + fs.readdirSync("layout").map(function(fname){ return "layout/"+fname; }) + ), + lessFiles = allFiles.filter(function(name){ return name && name != "variables.less" && /\.less$/.test(name); }); + +lessFiles.forEach(function(fname){ + console.log("=== " + fname); + fs.readFile(fname, 'utf-8', function (e, data){ + if(e){ + console.error("lessc: " + e.message); + process.exit(1); + } + + new(less.Parser)({ + paths: [path.dirname(fname)], + optimization: options.optimization, + filename: fname + }).parse(data, function(err, tree){ + if(err){ + less.writeError(err, options); + process.exit(1); + }else{ + try{ + var css = tree.toCSS({ compress: options.compress }), + outputFname = fname.replace('.less', '.css'); + fd = fs.openSync(outputFname, "w"); + fs.writeSync(fd, css, 0, "utf8"); + }catch(e){ + less.writeError(e, options); + process.exit(2); + } + } + }); + }); +}); diff --git a/lib/dijit/themes/claro/document.css b/lib/dijit/themes/claro/document.css index 72f9b1b40..64e470cf3 100644 --- a/lib/dijit/themes/claro/document.css +++ b/lib/dijit/themes/claro/document.css @@ -1,81 +1,41 @@ - +@import url("../../../dojo/resources/dojo.css"); +/* ======= Styling for the document itself (overriding dojo.css) ======== */ .claro { - font-family:Verdana,Arial,Helvetica,sans-serif; - font-size: .688em; - color: #131313; -} -h1 { - font-size: 1.545em; - font-weight: normal; - line-height: 1em; - margin-top: 1em; - margin-bottom:0.727em; -} -.claro .dijitDialog h1 { - margin-top:0em; -} -h2 { - font-size: 1.364em; - line-height: 1.455em; - margin-top:1em; - margin-bottom:0.60em; - font-weight: normal; -} -h3, h4, h5, h6 { - font-size:1.091em; - font-weight: normal; - line-height: 1.5em; - margin-top: 1.5em; - margin-bottom: 0; -} -p { - font-size: 1em; - line-height: 1.3em; -} -blockquote { - font-size: 0.916em; - margin-top: 3.272em; - margin-bottom: 3.272em; - line-height: 1.636em; - padding: 1.636em; - border-top: 1px solid #ccc; - border-bottom: 1px solid #ccc; -} -ol li, ul li { - font-size: 1em; - line-height: 1.5em; - margin: 0; -} -pre, code { - font-size:115%; - *font-size:100%; - font-family:inherit; - background-color: #efefef; - border: 1px solid #ccc; -} -pre { - border-width: 1px 0; - padding: 1.5em; -} -table { font-size:100%; } -table.dojoTabular { - border-collapse: collapse; - border-spacing: 0; - border: 1px solid #ccc; - margin: 0 1.5em; -} -.dojoTabular th { - text-align: center; - font-weight: bold; -} -table.dojoTabular thead, table.dojoTabular tfoot { - background-color: #efefef; - border: 1px solid #ccc; - border-width: 1px 0; -} -table.dojoTabular thead tr th, -table.dojoTabular thead tr td, -table.dojoTabular tbody tr td, -table.dojoTabular tfoot tr td { - padding: 0.25em 0.5em; + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: .688em; + color: #131313; +} +/* Headings */ +.claro h1 { + font-size: 1.545em; + margin-bottom: 0.727em; +} +.claro h2 { + font-size: 1.364em; + line-height: 1.455em; + margin-top: 1em; + margin-bottom: 0.60em; + font-weight: normal; +} +.claro h3, +.claro h4, +.claro h5, +.claro h6 { + font-size: 1.091em; + font-weight: normal; +} +/* paragraphs, quotes and lists */ +.claro p { + line-height: 1.3em; +} +/* pre and code */ +.claro pre, .claro code { + font-family: inherit; + background-color: #efefef; + border: 1px solid #d3d3d3; +} +/* tables */ +.claro table.dojoTabular thead, .claro table.dojoTabular tfoot { + background-color: #efefef; + border: 1px solid #d3d3d3; } diff --git a/lib/dijit/themes/claro/document.less b/lib/dijit/themes/claro/document.less new file mode 100644 index 000000000..7f8635672 --- /dev/null +++ b/lib/dijit/themes/claro/document.less @@ -0,0 +1,45 @@ +/* ======= Styling for the document itself (overriding dojo.css) ======== */ + +@import "variables"; +@import url("../../../dojo/resources/dojo.css"); + +.claro { + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: .688em; + color: @document-text-color; +} + +/* Headings */ +.claro h1 { + font-size: 1.545em; + margin-bottom:0.727em; +} +.claro h2 { + font-size: 1.364em; + line-height: 1.455em; + margin-top:1em; + margin-bottom:0.60em; + font-weight: normal; +} +.claro h3, .claro h4, .claro h5, .claro h6 { + font-size:1.091em; + font-weight: normal; +} + +/* paragraphs, quotes and lists */ +.claro p { + line-height: 1.3em; +} + +/* pre and code */ +.claro pre, .claro code { + font-family:inherit; + background-color: @document-shadedsection-background-color; + border: 1px solid @document-border-color; +} + +/* tables */ +.claro table.dojoTabular thead, .claro table.dojoTabular tfoot { + background-color: @document-shadedsection-background-color; + border: 1px solid @document-border-color; +} diff --git a/lib/dijit/themes/claro/form/Button.css b/lib/dijit/themes/claro/form/Button.css index a2a15c0cc..e01a1d313 100644 --- a/lib/dijit/themes/claro/form/Button.css +++ b/lib/dijit/themes/claro/form/Button.css @@ -1,125 +1,160 @@ - +/* Button | DropDownButton | ComboButton | ToggleButton + * + * Styling Buttons mainly includes: + * + * 1. Containers + * .dijitButton + * .dijitDropDownButton + * .dijitComboButton + * .dijitButtonNode - common button/arrow wrapper shared across all three button types + * + * 2. Button text + * .dijitButtonText + * + * 3. Arrows - only for DropDownButton and ComboButton + * There are total four directions arrows - down, left, right, up: + * .dijitArrowButtonInner - down arrow by default + * .dijitLeftArrowButton .dijitArrowButtonInner - left arrow + * .dijitRightArrowButton .dijitArrowButtonInner - right arrow + * .dijitUpArrowButton .dijitArrowButtonInner - up arrow + * + * 4. States - Hover, Active, Disabled, e.g. + * .dijitButtonHover .dijitButtonNode + * .dijitButtonActive .dijitButtonNode + * .dijitButtonDisabled .dijitButtonNode + * + * .dijitDisabled .dijitArrowButtonInner - disabled arrow states + */ .claro .dijitButtonNode { - - -webkit-transition-property:background-color; - -webkit-transition-duration:.3s; + /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */ + + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + transition-duration: 0.3s; } .claro .dijitButton .dijitButtonNode, .claro .dijitDropDownButton .dijitButtonNode, .claro .dijitComboButton .dijitButtonNode, .claro .dijitToggleButton .dijitButtonNode { - - border: 1px solid #769dc0; - padding:2px 4px 4px 4px; - background-image: url("images/button.png"); - background-position: center top; - background-repeat: repeat-x; - background-color: #e4f2ff; - border-radius: 4px; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - box-shadow:0px 1px 1px rgba(0,0,0,0.15); - -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.15); - -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.15); + /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */ + + border: 1px solid #769dc0; + padding: 2px 4px 4px 4px; + background-image: url("images/button.png"); + background-position: center top; + background-repeat: repeat-x; + background-color: #e9f4fe; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); } .claro .dijitComboButton .dijitArrowButton { - border-left-width: 0px; - padding: 4px 2px 4px 2px; + border-left-width: 0; + padding: 4px 2px 4px 2px; + /* TODO: still needed? */ + } +/*arrow styles for down/up/left/right directions*/ .claro .dijitArrowButtonInner { - width: 15px; - height: 15px; - margin: 0 auto; - background-image:url("images/buttonArrows.png"); - background-repeat:no-repeat; - background-position:-51px 53%; + width: 15px; + height: 15px; + margin: 0 auto; + background-image: url("images/buttonArrows.png"); + background-repeat: no-repeat; + background-position: -51px 53%; } .claro .dijitLeftArrowButton .dijitArrowButtonInner { - background-position: -77px 53%; + background-position: -77px 53%; } .claro .dijitRightArrowButton .dijitArrowButtonInner { - background-position: -26px 53%; + background-position: -26px 53%; } .claro .dijitUpArrowButton .dijitArrowButtonInner { - background-position: 0px 53%; + background-position: 0 53%; } .claro .dijitDisabled .dijitArrowButtonInner { - background-position: -151px 53%; + background-position: -151px 53%; } .claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner { - background-position: -177px 53%; + background-position: -177px 53%; } .claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner { - background-position: -126px 53%; + background-position: -126px 53%; } .claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner { - background-position: -100px 53%; + background-position: -100px 53%; } .claro .dijitButtonText { - padding: 0 0.3em; - text-align: center; -} -.claro .dijitDisabled .dijitButtonText { - color: #7F7F7F; + padding: 0 0.3em; + text-align: center; } +/* hover status */ .claro .dijitButtonHover .dijitButtonNode, .claro .dijitDropDownButtonHover .dijitButtonNode, -.claro .dijitComboButton .dijitButtonNodeHover, +.claro .dijitComboButton .dijitButtonNodeHover, .claro .dijitComboButton .dijitDownArrowButtonHover, .claro .dijitToggleButtonHover .dijitButtonNode { - background-color: #afd9ff; - color:#000; - -webkit-transition-duration:.2s; -} -.claro .dijitButtonActive .dijitButtonNode, + background-color: #abd6ff; + color: #000000; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; +} +/* checked status */ +.claro .dijitButtonActive .dijitButtonNode, .claro .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitComboButtonActive .dijitButtonNode, .claro .dijitToggleButtonActive .dijitButtonNode { - background-color: #99cfff; - box-shadow:0px 0px 0px rgba(0,0,0,0); - -webkit-box-shadow:0px 0px 0px rgba(0,0,0,0); - -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0); - -webkit-transition-duration:.1s; -} + background-color: #abd6ff; + -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); + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; +} +/* disabled status */ .claro .dijitButtonDisabled, .claro .dijitDropDownButtonDisabled, .claro .dijitComboButtonDisabled, .claro .dijitToggleButtonDisabled { - background-image: none; - outline: none; + background-image: none; + outline: none; } .claro .dijitButtonDisabled .dijitButtonNode, .claro .dijitDropDownButtonDisabled .dijitButtonNode, .claro .dijitComboButtonDisabled .dijitButtonNode, -.claro .dijitToggleButtonDisabled .dijitButtonNode { - background-position:0px -149px; - background-color: #e3e3e3; - border: solid 1px #c9c9c9; - color: #696969; - box-shadow:0px 0px 0px rgba(0,0,0,0); - -webkit-box-shadow:0px 0px 0px rgba(0,0,0,0); - -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0); -} -.claro .dijitComboButtonDisabled .dijitArrowButton{ - border-left-width: 0px; -} +.claro .dijitToggleButtonDisabled .dijitButtonNode { + background-position: 0 -149px; + background-color: #efefef; + border: solid 1px #d3d3d3; + color: #818181; + -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 .dijitComboButtonDisabled .dijitArrowButton { + border-left-width: 0; +} +/* for ComboButton */ .claro table.dijitComboButton { - border-collapse: separate; + border-collapse: separate; + /* override dijit.css so that ComboBox rounded corners work */ + } .dj_ie6 .claro .dijitButtonNode { - background-image: none; + background-image: none; } .claro .dijitComboButton .dijitStretch { - -moz-border-radius: 4px 0px 0px 4px; - -webkit-border-top-left-radius: 4px; - -webkit-border-top-right-radius: 0px; - -webkit-border-bottom-right-radius: 0px; - -webkit-border-bottom-left-radius: 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; } .claro .dijitComboButton .dijitArrowButton { - -moz-border-radius: 0px 4px 4px 0px; - -webkit-border-top-left-radius: 0px; - -webkit-border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -webkit-border-bottom-left-radius: 0px; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; } diff --git a/lib/dijit/themes/claro/form/Button.less b/lib/dijit/themes/claro/form/Button.less new file mode 100644 index 000000000..b076d2a16 --- /dev/null +++ b/lib/dijit/themes/claro/form/Button.less @@ -0,0 +1,154 @@ +/* Button | DropDownButton | ComboButton | ToggleButton + * + * Styling Buttons mainly includes: + * + * 1. Containers + * .dijitButton + * .dijitDropDownButton + * .dijitComboButton + * .dijitButtonNode - common button/arrow wrapper shared across all three button types + * + * 2. Button text + * .dijitButtonText + * + * 3. Arrows - only for DropDownButton and ComboButton + * There are total four directions arrows - down, left, right, up: + * .dijitArrowButtonInner - down arrow by default + * .dijitLeftArrowButton .dijitArrowButtonInner - left arrow + * .dijitRightArrowButton .dijitArrowButtonInner - right arrow + * .dijitUpArrowButton .dijitArrowButtonInner - up arrow + * + * 4. States - Hover, Active, Disabled, e.g. + * .dijitButtonHover .dijitButtonNode + * .dijitButtonActive .dijitButtonNode + * .dijitButtonDisabled .dijitButtonNode + * + * .dijitDisabled .dijitArrowButtonInner - disabled arrow states + */ + +@import "../variables"; + +.claro .dijitButtonNode { + /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */ + .transition-property(background-color); + .transition-duration(.3s); +} + +.claro .dijitButton .dijitButtonNode, +.claro .dijitDropDownButton .dijitButtonNode, +.claro .dijitComboButton .dijitButtonNode, +.claro .dijitToggleButton .dijitButtonNode { + /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */ + border: 1px solid @button-border-color; + padding:2px 4px 4px 4px; + background-image: url("images/button.png"); + background-position: center top; + background-repeat: repeat-x; + background-color: @button-background-color; + .border-radius(@button-border-radius); + .box-shadow(0 1px 1px rgba(0,0,0,0.15)); +} + +.claro .dijitComboButton .dijitArrowButton { + border-left-width: 0; + padding: 4px 2px 4px 2px; /* TODO: still needed? */ +} + +/*arrow styles for down/up/left/right directions*/ +.claro .dijitArrowButtonInner { + width: 15px; + height: 15px; + margin: 0 auto; + background-image:url("images/buttonArrows.png"); + background-repeat:no-repeat; + background-position:-51px 53%; +} +.claro .dijitLeftArrowButton .dijitArrowButtonInner { + background-position: -77px 53%; +} +.claro .dijitRightArrowButton .dijitArrowButtonInner { + background-position: -26px 53%; +} +.claro .dijitUpArrowButton .dijitArrowButtonInner { + background-position: 0 53%; +} +.claro .dijitDisabled .dijitArrowButtonInner { + background-position: -151px 53%; +} +.claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner { + background-position: -177px 53%; +} +.claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner { + background-position: -126px 53%; +} +.claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner { + background-position: -100px 53%; +} + +.claro .dijitButtonText { + padding: 0 0.3em; + text-align: center; +} + + + + + +/* hover status */ +.claro .dijitButtonHover .dijitButtonNode, +.claro .dijitDropDownButtonHover .dijitButtonNode, +.claro .dijitComboButton .dijitButtonNodeHover, +.claro .dijitComboButton .dijitDownArrowButtonHover, +.claro .dijitToggleButtonHover .dijitButtonNode { + background-color: @button-hovered-background-color; + color:@text-color; + .transition-duration(.2s); +} + +/* checked status */ +.claro .dijitButtonActive .dijitButtonNode, +.claro .dijitDropDownButtonActive .dijitButtonNode, +.claro .dijitComboButtonActive .dijitButtonNode, +.claro .dijitToggleButtonActive .dijitButtonNode { + background-color: @button-pressed-background-color; + .box-shadow(0 0 0 rgba(0,0,0,0)); + .transition-duration(.1s); +} + +/* disabled status */ +.claro .dijitButtonDisabled, +.claro .dijitDropDownButtonDisabled, +.claro .dijitComboButtonDisabled, +.claro .dijitToggleButtonDisabled { + background-image: none; + outline: none; +} + +.claro .dijitButtonDisabled .dijitButtonNode, +.claro .dijitDropDownButtonDisabled .dijitButtonNode, +.claro .dijitComboButtonDisabled .dijitButtonNode, +.claro .dijitToggleButtonDisabled .dijitButtonNode { + background-position:0 -149px; + background-color: @disabled-background-color; + border: solid 1px @disabled-border-color; + color: @disabled-text-color; + .box-shadow(0 0 0 rgba(0,0,0,0)); +} +.claro .dijitComboButtonDisabled .dijitArrowButton{ + border-left-width: 0; +} +/* for ComboButton */ +.claro table.dijitComboButton { + border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */ +} + +.dj_ie6 .claro .dijitButtonNode { + background-image: none; +} + +.claro .dijitComboButton .dijitStretch { + .border-radius(@button-border-radius 0 0 @button-border-radius); +} +.claro .dijitComboButton .dijitArrowButton { + .border-radius(0 @button-border-radius @button-border-radius 0); +} diff --git a/lib/dijit/themes/claro/form/Button_rtl.css b/lib/dijit/themes/claro/form/Button_rtl.css index f1484b127..2d5b08bff 100644 --- a/lib/dijit/themes/claro/form/Button_rtl.css +++ b/lib/dijit/themes/claro/form/Button_rtl.css @@ -1,18 +1,13 @@ - +/* Combo Button */ .claro .dijitComboButtonRtl .dijitStretch { - -moz-border-radius: 0px 4px 4px 0px; - -webkit-border-top-left-radius: 0px; - -webkit-border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -webkit-border-bottom-left-radius: 0px; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; } .claro .dijitComboButtonRtl .dijitArrowButton { - -moz-border-radius: 4px 0px 0px 4px; - -webkit-border-top-left-radius:4px; - -webkit-border-top-right-radius:0px; - -webkit-border-bottom-right-radius:0px; - -webkit-border-bottom-left-radius:4px; - padding:3px 0px 4px; - border-left-width: 1px; - border-right-width: 0px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; + padding: 3px 0 4px; + border-left-width: 1px; + border-right-width: 0; } +/* End Combo Button */ \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/Button_rtl.less b/lib/dijit/themes/claro/form/Button_rtl.less new file mode 100644 index 000000000..6225d6847 --- /dev/null +++ b/lib/dijit/themes/claro/form/Button_rtl.less @@ -0,0 +1,16 @@ +@import "../variables"; + +/* Combo Button */ + +.claro .dijitComboButtonRtl .dijitStretch { + .border-radius(0 @button-border-radius @button-border-radius 0); +} + +.claro .dijitComboButtonRtl .dijitArrowButton { + .border-radius(@button-border-radius 0 0 @button-border-radius); + padding:3px 0 4px; + border-left-width: 1px; + border-right-width: 0; +} + +/* End Combo Button */ \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/Checkbox.css b/lib/dijit/themes/claro/form/Checkbox.css index be3604ddd..5765bb370 100644 --- a/lib/dijit/themes/claro/form/Checkbox.css +++ b/lib/dijit/themes/claro/form/Checkbox.css @@ -1,46 +1,71 @@ - +/* CheckBox + * + * Styling CheckBox mainly includes: + * + * 1. Containers + * .dijitCheckBox|.dijitCheckBoxIcon - for border, padding, width|height and background image + * + * 2. CheckBox within ToggleButton + * .dijitToggleButton|.dijitToggleButtonChecked .* - for background image + * + * 3. Checked state + * .dijitCheckBoxChecked - for checked background-color|image + * .dijitToggleButtonChecked - for border, background-color|image, display and width|height + * + * 4. Hover state + * .dijitCheckBoxHover|.dijitCheckBoxCheckedHover - for background image + * + * 5. Disabled state + * .dijitCheckBoxDisabled|.dijitCheckBoxCheckedDisabled - for background image + */ .claro .dijitToggleButton .dijitCheckBoxIcon { - background-image: url('../images/checkmarkNoBorder.png'); + background-image: url('../images/checkmarkNoBorder.png'); } .dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon { - background-image: url('../images/checkmarkNoBorder.gif'); -} -.claro .dijitCheckBox, -.claro .dijitCheckBoxIcon { - background-image: url('images/checkboxRadioButtonStates.png'); - background-repeat: no-repeat; - width: 15px; - height: 16px; - margin: 0 2px 0 0; - padding: 0; -} -.dj_ie6 .claro .dijitCheckBox, -.dj_ie6 .claro .dijitCheckBoxIcon { - background-image: url('images/checkboxAndRadioButtons_IE6.png'); -} -.claro .dijitCheckBox, -.claro .dijitToggleButton .dijitCheckBoxIcon { - - background-position: -15px; + background-image: url('../images/checkmarkNoBorder.gif'); +} +.claro .dijitCheckBox, .claro .dijitCheckBoxIcon { + background-image: url('images/checkboxRadioButtonStates.png'); + /* checkbox sprite image */ + + background-repeat: no-repeat; + width: 15px; + height: 16px; + margin: 0 2px 0 0; + padding: 0; } -.claro .dijitCheckBoxChecked, -.claro .dijitToggleButtonChecked .dijitCheckBoxIcon { - - background-position: -0px; +.dj_ie6 .claro .dijitCheckBox, .dj_ie6 .claro .dijitCheckBoxIcon { + background-image: url('images/checkboxAndRadioButtons_IE6.png'); + /* checkbox sprite image */ + +} +.claro .dijitCheckBox, .claro .dijitToggleButton .dijitCheckBoxIcon { + /* unchecked */ + + background-position: -15px; +} +.claro .dijitCheckBoxChecked, .claro .dijitToggleButtonChecked .dijitCheckBoxIcon { + /* checked */ + + background-position: 0; } .claro .dijitCheckBoxDisabled { - - background-position: -75px; + /* disabled */ + + background-position: -75px; } .claro .dijitCheckBoxCheckedDisabled { - - background-position: -60px; + /* disabled but checked */ + + background-position: -60px; } .claro .dijitCheckBoxHover { - - background-position: -45px; + /* hovering over an unchecked enabled checkbox */ + + background-position: -45px; } .claro .dijitCheckBoxCheckedHover { - - background-position: -30px; + /* hovering over an checked enabled checkbox */ + + background-position: -30px; } diff --git a/lib/dijit/themes/claro/form/Checkbox.less b/lib/dijit/themes/claro/form/Checkbox.less new file mode 100644 index 000000000..21769dca1 --- /dev/null +++ b/lib/dijit/themes/claro/form/Checkbox.less @@ -0,0 +1,79 @@ +/* CheckBox + * + * Styling CheckBox mainly includes: + * + * 1. Containers + * .dijitCheckBox|.dijitCheckBoxIcon - for border, padding, width|height and background image + * + * 2. CheckBox within ToggleButton + * .dijitToggleButton|.dijitToggleButtonChecked .* - for background image + * + * 3. Checked state + * .dijitCheckBoxChecked - for checked background-color|image + * .dijitToggleButtonChecked - for border, background-color|image, display and width|height + * + * 4. Hover state + * .dijitCheckBoxHover|.dijitCheckBoxCheckedHover - for background image + * + * 5. Disabled state + * .dijitCheckBoxDisabled|.dijitCheckBoxCheckedDisabled - for background image + */ + +@import "../variables"; + +.claro .dijitToggleButton .dijitCheckBoxIcon { + background-image: url('../images/checkmarkNoBorder.png'); +} + +.dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon { + background-image: url('../images/checkmarkNoBorder.gif'); +} + +.claro .dijitCheckBox, +.claro .dijitCheckBoxIcon /* inside a toggle button */ { + background-image: url('images/checkboxRadioButtonStates.png'); /* checkbox sprite image */ + background-repeat: no-repeat; + width: 15px; + height: 16px; + margin: 0 2px 0 0; + padding: 0; +} + +.dj_ie6 .claro .dijitCheckBox, +.dj_ie6 .claro .dijitCheckBoxIcon /* inside a toggle button */ { + background-image: url('images/checkboxAndRadioButtons_IE6.png'); /* checkbox sprite image */ +} + +.claro .dijitCheckBox, +.claro .dijitToggleButton .dijitCheckBoxIcon { + /* unchecked */ + background-position: -15px; +} + +.claro .dijitCheckBoxChecked, +.claro .dijitToggleButtonChecked .dijitCheckBoxIcon { + /* checked */ + background-position: -0; +} + +.claro .dijitCheckBoxDisabled { + /* disabled */ + background-position: -75px; +} + +.claro .dijitCheckBoxCheckedDisabled { + /* disabled but checked */ + background-position: -60px; +} + +.claro .dijitCheckBoxHover { + /* hovering over an unchecked enabled checkbox */ + background-position: -45px; +} + +.claro .dijitCheckBoxCheckedHover { + /* hovering over an checked enabled checkbox */ + background-position: -30px; +} + + diff --git a/lib/dijit/themes/claro/form/Common.css b/lib/dijit/themes/claro/form/Common.css index b04061b65..ab8bb5c3b 100644 --- a/lib/dijit/themes/claro/form/Common.css +++ b/lib/dijit/themes/claro/form/Common.css @@ -1,132 +1,163 @@ - +/* claro/form/Common.css */ +/*========================= common css =========================*/ +/* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */ .claro .dijitTextBoxError .dijitValidationContainer { - background-color: #d46363; - background-image: url('images/error.png'); - background-position: top center; - border: solid #d46464 0px; - border-left-width: 1px; - width: 9px; + background-color: #d46464; + background-image: url('images/error.png'); + background-position: top center; + border: solid #d46464 0; + border-left-width: 1px; + width: 9px; } .claro .dijitTextBoxError .dijitValidationIcon { - width: 0px; - background-color: transparent !important; + width: 0; + background-color: transparent !important; + /* so the INPUT doesn't obscure the border in rtl+a11y */ + +} +/* Padding for the input area of TextBox based widgets, and corresponding padding for the + * down arrow button and the placeholder. placeholder is explicitly listed because + * dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField + * won't affect it + */ +.claro .dijitTextArea, .claro .dijitInputField .dijitPlaceHolder { + padding: 2px; } -.claro .dijitTextBox .dijitInputContainer, -.claro .dijitTextArea, -.claro .dijitInputField .dijitPlaceHolder { - padding: 2px; +.claro .dijitTextBox .dijitInputField { + padding: 1px 2px; +} +.dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner { + padding: 1px; } -.claro .dijitTextBox, -.claro .dijitTextBox .dijitButtonNode { - - border-color: #b5bcc7; - -webkit-transition-property:background-color, border; - -webkit-transition-duration:.35s; +.claro .dijitTextBox, .claro .dijitTextBox .dijitButtonNode { + /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */ + + border-color: #b5bcc7; + -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 .dijitTextBox { - background-color: #f7fcff; + background-color: #ffffff; } -.claro .dijitTextBoxHover, -.claro .dijitTextBoxHover .dijitButtonNode { - border-color: #769dc0; - -webkit-transition-duration:.25s; +/* hover */ +.claro .dijitTextBoxHover, .claro .dijitTextBoxHover .dijitButtonNode { + border-color: #769dc0; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; } .claro .dijitTextBoxHover { - background-color: #e9f4fe; - background-image: url('images/textBox_back.png'); - background-repeat: repeat-x; + background-color: #e9f4fe; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; } -.claro .dijitTextBoxError, -.claro .dijitTextBoxError .dijitButtonNode { - border-color: #d46464; +/* error state */ +.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitButtonNode { + border-color: #d46464; } -.claro .dijitTextBoxError, -.claro .dijitTextBoxError .dijitInputContainer { - background-color: #fdf7f7; +.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitInputContainer { + background-color: #ffffff; } -.claro .dijitTextBoxFocused, -.claro .dijitTextBoxFocused .dijitButtonNode { - border-color:#769dc0; - -webkit-transition-duration:.1s; +/* focused state */ +.claro .dijitTextBoxFocused, .claro .dijitTextBoxFocused .dijitButtonNode { + border-color: #769dc0; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; } .claro .dijitTextBoxFocused { - background-color: #fff; - background-image: url('images/textBox_back.png'); - background-repeat: repeat-x; + background-color: #ffffff; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; } .claro .dijitTextBoxFocused .dijitInputContainer { - background: #fff; + background: #ffffff; } -.claro .dijitTextBoxErrorFocused, -.claro .dijitTextBoxErrorFocused .dijitButtonNode { - border-color: #ce4f4f; +.claro .dijitTextBoxErrorFocused, .claro .dijitTextBoxErrorFocused .dijitButtonNode { + border-color: #ce4f4f; } -.claro .dijitTextBoxDisabled, -.claro .dijitTextBoxDisabled .dijitButtonNode { - border-color: #d3d3d3; +/* disabled state */ +.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitButtonNode { + border-color: #d3d3d3; } -.claro .dijitTextBoxDisabled { - background-color: #efefef; - background-image: none; - color: #818181; +.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer { + background-color: #efefef; + background-image: none; + color: #818181; } +/*========================= for special widgets =========================*/ +/* Input boxes with an arrow (for a drop down) */ .claro .dijitComboBox .dijitArrowButtonInner { - background-image: url("images/commonFormArrows.png"); - background-position:-35px 53%; - background-repeat: no-repeat; - margin: 0px; - width:16px; - height:100%; - border: 1px solid #fff; + background-image: url("images/commonFormArrows.png"); + background-position: -35px 53%; + background-repeat: no-repeat; + margin: 0; + width: 16px; + border: 1px solid #ffffff; } -.claro .dijitTextBox .dijitInputField { - padding-top: 1px; - padding-bottom: 1px; +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; } -.claro .dijitTextBox .dijitInputInner { - - padding: 1px 2px 1px 0; +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; } -.claro .dijitTextBox .dijitValidationContainer { - padding: 0 0 2px 0; +/* Add 1px vertical padding to the where user types and the validation icon, + to match the 1px border on arrow button */ +.claro .dijitTextBox .dijitInputInner, .claro .dijitTextBox .dijitValidationContainer { + padding: 1px 0; } .claro .dijitComboBox .dijitButtonNode { - background-color: #ebeef4; - background-image: url("images/formHighlight.png"); - background-repeat:repeat-x; -} -.claro .dijitComboBoxHover .dijitButtonNode { - background-color:#abd6ff; -} -.claro .dijitComboBoxHover .dijitArrowButtonInner { - background-position:-70px 53%; -} -.claro .dijitComboBoxFocused .dijitButtonNode { - background-color:#7dbefa; - background-position:0px -177px; - padding: 1px; -} -.claro .dijitComboBoxFocused .dijitArrowButtonInner { - background-position:-70px 53%; - border: 0px none; -} + background-color: #efefef; + background-image: url("images/formHighlight.png"); + background-repeat: repeat-x; +} +/* Arrow "hover" effect: + * The arrow button should change color whenever the mouse is in a position such that clicking it + * will toggle the drop down. That's either (1) anywhere over the ComboBox or (2) over the arrow + * button, depending on the openOnClick setting for the widget. + */ +.claro .dijitComboBoxOpenOnClickHover .dijitButtonNode, .claro .dijitComboBox .dijitDownArrowButtonHover { + background-color: #abd6ff; +} +.claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner, .claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner { + background-position: -70px 53%; +} +/* Arrow Button change when drop down is open */ +.claro .dijitComboBox .dijitHasDropDownOpen { + background-color: #7dbefa; + background-position: 0 -177px; + padding: 1px; +} +.claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { + background-position: -70px 53%; + border: 0 none; +} +/* disabled state */ .claro div.dijitComboBoxDisabled .dijitArrowButtonInner { - - background-position:0px 50%; - background-color:#f1f1f1; + /* specific selector set to override background-position setting from Button.js + * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */ + + background-position: 0 50%; + background-color: #efefef; } +/*========================= hacks for browsers =========================*/ +/* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */ .dj_ff3 .claro .dijitInputField input[type="hidden"] { - display: none; - height: 0; - width: 0; + display: none; + height: 0; + width: 0; } -.dj_ie6 .claro .dijitTextBox, -.dj_ie6 .claro .dijitComboBox .dijitButtonNode { - background-image: none; +/* ie6 doesn't support transparent background img */ +.dj_ie6 .claro .dijitTextBox, .dj_ie6 .claro .dijitComboBox .dijitButtonNode { + background-image: none; } -.dj_quirks .claro .dijitComboBox .dijitArrowButtonInner { - border: 0px; +.dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { + width: 18px; } -.dj_quirks .claro .dijitComboBox .dijitArrowButtonContainer { - padding: 1px; +.dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner { + width: 16px; } diff --git a/lib/dijit/themes/claro/form/Common.less b/lib/dijit/themes/claro/form/Common.less new file mode 100644 index 000000000..729867a67 --- /dev/null +++ b/lib/dijit/themes/claro/form/Common.less @@ -0,0 +1,194 @@ +/* claro/form/Common.css */ + +/*========================= common css =========================*/ + +@import "../variables"; + +/* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */ + +.claro .dijitTextBoxError .dijitValidationContainer { + background-color: @erroricon-background-color; + background-image: url('images/error.png'); + background-position: top center; + border: solid @erroricon-background-color 0; + border-left-width: 1px; + width: 9px; +} +.claro .dijitTextBoxError .dijitValidationIcon { + width: 0; + background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */ +} + +/* Padding for the input area of TextBox based widgets, and corresponding padding for the + * down arrow button and the placeholder. placeholder is explicitly listed because + * dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField + * won't affect it + */ +.claro .dijitTextArea, +.claro .dijitInputField .dijitPlaceHolder { + padding: @textbox-padding; +} +.claro .dijitTextBox .dijitInputField { + // Subtract 1px from top/bottom because we add 1px to other nodes, see rules below. + // Although we are theoretically only adding 1px to top/bottom browsers seem to pad inputs by 1px on left/right, + // although that varies by so compensate for that too. + padding: @textbox-padding - 1px @textbox-padding; +} +.dj_gecko .claro .dijitTextBox .dijitInputInner, +.dj_webkit .claro .dijitTextBox .dijitInputInner { + // Although we are theoretically only adding 1px to top/bottom, some browsers seem to pad inputs by 1px on left/right, + // so compensate for that too. + padding: @textbox-padding - 1px; +} + +.claro .dijitTextBox, +.claro .dijitTextBox .dijitButtonNode { + /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */ + border-color: @border-color; + .transition-property(background-color, border); + .transition-duration(.35s); +} +.claro .dijitTextBox { + background-color: @textbox-background-color; +} + +/* hover */ +.claro .dijitTextBoxHover, +.claro .dijitTextBoxHover .dijitButtonNode { + border-color: @hovered-border-color; + .transition-duration(.25s); +} +.claro .dijitTextBoxHover { + background-color: @textbox-hovered-background-color; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; +} + +/* error state */ +.claro .dijitTextBoxError, +.claro .dijitTextBoxError .dijitButtonNode { + border-color: @error-border-color; +} +.claro .dijitTextBoxError, +.claro .dijitTextBoxError .dijitInputContainer { + background-color: @textbox-error-background-color; +} + +/* focused state */ +.claro .dijitTextBoxFocused, +.claro .dijitTextBoxFocused .dijitButtonNode { + border-color:@focused-border-color; + .transition-duration(.1s); +} +.claro .dijitTextBoxFocused { + background-color: @textbox-focused-background-color; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; +} +.claro .dijitTextBoxFocused .dijitInputContainer { + background: @textbox-focused-background-color; +} + +.claro .dijitTextBoxErrorFocused, +.claro .dijitTextBoxErrorFocused .dijitButtonNode { + border-color: @error-focused-border-color; +} + +/* disabled state */ +.claro .dijitTextBoxDisabled, +.claro .dijitTextBoxDisabled .dijitButtonNode { + border-color: @disabled-border-color; +} +.claro .dijitTextBoxDisabled, +.claro .dijitTextBoxDisabled .dijitInputContainer { + background-color: @textbox-disabled-background-color; + background-image: none; + color: @disabled-text-color; +} + +/*========================= for special widgets =========================*/ + +/* Input boxes with an arrow (for a drop down) */ + +.claro .dijitComboBox .dijitArrowButtonInner { + background-image: url("images/commonFormArrows.png"); + background-position:-35px 53%; + background-repeat: no-repeat; + margin: 0; + width:16px; + border: 1px solid @arrowbutton-inner-border-color; // white gutter around the arrow button +} + +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; +} + +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; +} + +/* Add 1px vertical padding to the where user types and the validation icon, + to match the 1px border on arrow button */ +.claro .dijitTextBox .dijitInputInner, +.claro .dijitTextBox .dijitValidationContainer { + padding: 1px 0; +} + +.claro .dijitComboBox .dijitButtonNode { + background-color: @arrowbutton-background-color; + background-image: url("images/formHighlight.png"); + background-repeat:repeat-x; +} + +/* Arrow "hover" effect: + * The arrow button should change color whenever the mouse is in a position such that clicking it + * will toggle the drop down. That's either (1) anywhere over the ComboBox or (2) over the arrow + * button, depending on the openOnClick setting for the widget. + */ +.claro .dijitComboBoxOpenOnClickHover .dijitButtonNode, +.claro .dijitComboBox .dijitDownArrowButtonHover { + background-color:@arrowbutton-hovered-background-color; +} +.claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner, +.claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner { + background-position:-70px 53%; +} + +/* Arrow Button change when drop down is open */ +.claro .dijitComboBox .dijitHasDropDownOpen { // .dijitHasDropDown is on dijitArrowButton node + background-color: @pressed-background-color; + background-position:0 -177px; + padding: 1px; // Since no border on arrow button (see rule below) +} +.claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { + background-position:-70px 53%; + border: 0 none; +} + +/* disabled state */ +.claro div.dijitComboBoxDisabled .dijitArrowButtonInner { + /* specific selector set to override background-position setting from Button.js + * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */ + background-position:0 50%; + background-color:@disabled-background-color; +} + +/*========================= hacks for browsers =========================*/ +/* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */ +.dj_ff3 .claro .dijitInputField input[type="hidden"] { + display: none; + height: 0; + width: 0; +} + +/* ie6 doesn't support transparent background img */ +.dj_ie6 .claro .dijitTextBox, +.dj_ie6 .claro .dijitComboBox .dijitButtonNode { + background-image: none; +} +.dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { + width:18px; // quirks mode means border-box sizing, so 18px with the border (same as 16px without border) +} +.dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner { + width:16px; // when no border, then back to 16px just like content-box sizing +} \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/Common_rtl.css b/lib/dijit/themes/claro/form/Common_rtl.css index 065f0c70d..74827c16f 100644 --- a/lib/dijit/themes/claro/form/Common_rtl.css +++ b/lib/dijit/themes/claro/form/Common_rtl.css @@ -1,5 +1,10 @@ - -.claro .dijitTextBoxRtlError .dijitValidationContainer { - border-left-width: 0px; +/* claro/form/Common_rtl.css */ +/*claro should not have the icon on the container +.claro .dijitTextBoxRtlError .dijitValidationIcon { + border-left-width: 0; border-right-width: 1px; +}*/ +.claro .dijitTextBoxRtlError .dijitValidationContainer { + border-left-width: 0; + border-right-width: 1px; } diff --git a/lib/dijit/themes/claro/form/Common_rtl.less b/lib/dijit/themes/claro/form/Common_rtl.less new file mode 100644 index 000000000..fd4975a51 --- /dev/null +++ b/lib/dijit/themes/claro/form/Common_rtl.less @@ -0,0 +1,13 @@ +/* claro/form/Common_rtl.css */ + +@import "../variables"; + +/*claro should not have the icon on the container +.claro .dijitTextBoxRtlError .dijitValidationIcon { + border-left-width: 0; + border-right-width: 1px; +}*/ +.claro .dijitTextBoxRtlError .dijitValidationContainer { + border-left-width: 0; + border-right-width: 1px; +} diff --git a/lib/dijit/themes/claro/form/NumberSpinner.css b/lib/dijit/themes/claro/form/NumberSpinner.css index 66b97da62..bc6e1aeb6 100644 --- a/lib/dijit/themes/claro/form/NumberSpinner.css +++ b/lib/dijit/themes/claro/form/NumberSpinner.css @@ -1,100 +1,138 @@ - +/* NumberSpinner - namespace "dijitSpinner" + * + * Styling NumberSpinner mainly includes: + * + * 1. Arrows + * Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner - for border, padding and position + * Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton + * Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image + * + * 2. Hover state + * .dijitUpArrowButtonHover|.dijitDownArrowButtonHover .* - for background color|image + * + * 3. Active state + * .dijitUpArrowButtonActive|.dijitDownArrowButtonActive .* - for border, padding, margin and background color|image + * + * 4. Focused state + * .dijitSpinnerFocused .* - for background color|image + * + * 5. Disabled state + * .dijitSpinnerDisabled .* - for background color|image + */ .claro .dijitSpinnerButtonContainer { - overflow: hidden; - position: relative; - width: auto; - padding: 0 2px; + overflow: hidden; + position: relative; + width: auto; + padding: 0 2px; } .claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner { - border-width: 1px 0; - border-style: solid none; + border-width: 1px 0; + /* reserve space to match the claro combobox button border with border and not padding to make IE happier */ + + border-style: solid none; } +/* button */ .claro .dijitSpinner .dijitArrowButton { - width:auto; - background-color: #ebeef4; - background-image: url("images/formHighlight.png"); - background-position:0px 0px; - background-repeat:repeat-x; - overflow: hidden; + width: auto; + background-color: #efefef; + background-image: url("images/formHighlight.png"); + background-position: 0 0; + background-repeat: repeat-x; + overflow: hidden; } .dj_iequirks .claro .dijitSpinner .dijitArrowButton { - overflow: visible; + overflow: visible; + /* 0 height w/o this */ + } .claro .dijitSpinner .dijitSpinnerButtonInner { - width: 15px; + width: 15px; } +/* up & down button icons */ .claro .dijitSpinner .dijitArrowButtonInner { - border:solid 1px #fff; - border-bottom-width: 0; - background-image: url("images/commonFormArrows.png"); - background-repeat: no-repeat; - height: 100%; - width:15px; - padding-left: 1px; - padding-right: 1px; - - background-position:-139px center; - - display: block; - margin: -1px 0px -1px 0px; - #margin-top: 0; + border: solid 1px #ffffff; + border-bottom-width: 0; + /* 2 top borders = 1 top+bottom border in ComboBox */ + + background-image: url("images/commonFormArrows.png"); + background-repeat: no-repeat; + height: 100%; + width: 15px; + padding-left: 1px; + padding-right: 1px; + /* for up arrow */ + + background-position: -139px center; + /* override button.css (TODO: move to Common.css since ComboBox needs this too) */ + + display: block; + margin: -1px 0 -1px 0; + /* compensate for inner border */ + +} +.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, .dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner { + margin-top: 0; + /* since its bottom aligned */ + } .dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner { - width: 19px; + width: 19px; } .claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner { - background-position:-34px; + background-position: -34px; } .claro .dijitSpinner .dijitArrowButtonInner .dijitInputField { - padding: 0; + padding: 0; } -.claro .dijitUpArrowButtonActive, -.claro .dijitDownArrowButtonActive { - background-color:#abd6ff; +/** hover & focused status **/ +.claro .dijitUpArrowButtonActive, .claro .dijitDownArrowButtonActive { + background-color: #abd6ff; } -.claro .dijitSpinner .dijitUpArrowButtonHover, -.claro .dijitSpinner .dijitDownArrowButtonHover, -.claro .dijitSpinnerFocused .dijitArrowButton { - background-color: #a0d1ff; +.claro .dijitSpinner .dijitUpArrowButtonHover, .claro .dijitSpinner .dijitDownArrowButtonHover, .claro .dijitSpinnerFocused .dijitArrowButton { + background-color: #abd6ff; } .claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner { - background-position:-174px; + background-position: -174px; } .claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner { - background-position:-69px; + background-position: -69px; } .claro .dijitSpinnerFocused { - background-color: #fff; - background-image: none; + background-color: #ffffff; + background-image: none; } -.claro .dijitSpinner .dijitDownArrowButtonActive, -.claro .dijitSpinner .dijitUpArrowButtonActive { - background-color: #3299f9; - background-position:0px -177px; +/* mouse down status */ +.claro .dijitSpinner .dijitDownArrowButtonActive, .claro .dijitSpinner .dijitUpArrowButtonActive { + background-color: #7dbefa; + background-position: 0 -177px; } -.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, -.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { - - border: 0px; - padding: 1px; - margin-right:2px; - margin-bottom:1px; +.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { + /* hide inner border while button is depressed */ + + border: 0; + padding: 1px; + margin-right: 2px; + margin-bottom: 1px; } .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner { - background-position:-173px; + background-position: -173px; } .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { - background-position:-68px; + background-position: -68px; } +/* disabled */ .claro .dijitSpinnerDisabled .dijitArrowButtonInner { - background-color: #f1f1f1; + background-color: #efefef; } .claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner { - background-position:-104px; + background-position: -104px; } .claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner { - background-position:1px; + background-position: 1px; } +/** hacks for browsers **/ +/* for IE 7, when div is enlarged, + * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/ .dj_ie7 .claro .dijitSpinner { - overflow:visible; -} + overflow: visible; +} diff --git a/lib/dijit/themes/claro/form/NumberSpinner.less b/lib/dijit/themes/claro/form/NumberSpinner.less new file mode 100644 index 000000000..ca78afb35 --- /dev/null +++ b/lib/dijit/themes/claro/form/NumberSpinner.less @@ -0,0 +1,150 @@ +/* NumberSpinner - namespace "dijitSpinner" + * + * Styling NumberSpinner mainly includes: + * + * 1. Arrows + * Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner - for border, padding and position + * Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton + * Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image + * + * 2. Hover state + * .dijitUpArrowButtonHover|.dijitDownArrowButtonHover .* - for background color|image + * + * 3. Active state + * .dijitUpArrowButtonActive|.dijitDownArrowButtonActive .* - for border, padding, margin and background color|image + * + * 4. Focused state + * .dijitSpinnerFocused .* - for background color|image + * + * 5. Disabled state + * .dijitSpinnerDisabled .* - for background color|image + */ + +@import "../variables"; + +.claro .dijitSpinnerButtonContainer { + overflow: hidden; + position: relative; + width: auto; + padding: 0 2px; +} +.claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner { + border-width: 1px 0; /* reserve space to match the claro combobox button border with border and not padding to make IE happier */ + border-style: solid none; +} + +/* button */ +.claro .dijitSpinner .dijitArrowButton { + width:auto; + background-color: @arrowbutton-background-color; + background-image: url("images/formHighlight.png"); + background-position:0 0; + background-repeat:repeat-x; + overflow: hidden; +} +.dj_iequirks .claro .dijitSpinner .dijitArrowButton { + overflow: visible; /* 0 height w/o this */ +} + +.claro .dijitSpinner .dijitSpinnerButtonInner { + width: 15px; +} +/* up & down button icons */ +.claro .dijitSpinner .dijitArrowButtonInner { + border:solid 1px @arrowbutton-inner-border-color; + border-bottom-width: 0; /* 2 top borders = 1 top+bottom border in ComboBox */ + background-image: url("images/commonFormArrows.png"); + background-repeat: no-repeat; + height: 100%; + width:15px; + padding-left: 1px; + padding-right: 1px; + + /* for up arrow */ + background-position:-139px center; + + /* override button.css (TODO: move to Common.css since ComboBox needs this too) */ + display: block; + margin: -1px 0 -1px 0; /* compensate for inner border */ +} + +.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, +.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner { + margin-top: 0; /* since its bottom aligned */ +} + +.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner { + width: 19px; +} +.claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner { + background-position:-34px; +} +.claro .dijitSpinner .dijitArrowButtonInner .dijitInputField { + padding: 0; +} + +/** hover & focused status **/ + +.claro .dijitUpArrowButtonActive, +.claro .dijitDownArrowButtonActive { + background-color:@arrowbutton-pressed-background-color; +} + +.claro .dijitSpinner .dijitUpArrowButtonHover, +.claro .dijitSpinner .dijitDownArrowButtonHover, +.claro .dijitSpinnerFocused .dijitArrowButton { + background-color: @arrowbutton-hovered-background-color; +} + +.claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner { + background-position:-174px; +} +.claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner { + background-position:-69px; +} + +.claro .dijitSpinnerFocused { + background-color: @textbox-focused-background-color; + background-image: none; +} + +/* mouse down status */ +.claro .dijitSpinner .dijitDownArrowButtonActive, +.claro .dijitSpinner .dijitUpArrowButtonActive { + background-color: #7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior. + background-position:0 -177px; +} +.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, +.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { + /* hide inner border while button is depressed */ + border: 0; + padding: 1px; + margin-right:2px; + margin-bottom:1px; +} +.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner { + background-position:-173px; +} +.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { + background-position:-68px; +} + +/* disabled */ + +.claro .dijitSpinnerDisabled .dijitArrowButtonInner { + background-color: @disabled-background-color; +} +.claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner { + background-position:-104px; +} +.claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner { + background-position:1px; +} + +/** hacks for browsers **/ + +/* for IE 7, when div is enlarged, + * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/ +.dj_ie7 .claro .dijitSpinner { + overflow:visible; +} \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/RadioButton.css b/lib/dijit/themes/claro/form/RadioButton.css index b9058d1b9..4dc3ad47d 100644 --- a/lib/dijit/themes/claro/form/RadioButton.css +++ b/lib/dijit/themes/claro/form/RadioButton.css @@ -1,51 +1,79 @@ - -.claro .dijitToggleButton .dijitRadio, -.claro .dijitToggleButton .dijitRadioIcon { - background-image: url('images/checkboxRadioButtonStates.png'); +/* RadioButton + * + * Styling RadioButton mainly includes: + * + * 1. Containers + * .dijitRadio|.dijitRadioIcon - for border, padding, width|height and background image + * + * 2. RadioButton within ToggleButton + * .dijitToggleButton|.dijitToggleButtonChecked .* - for background image + * + * 3. Checked state + * .dijitRadioChecked - for checked background-color|image + * .dijitToggleButtonChecked - for border, background-color|image, display and width|height + * + * 4. Hover state + * .dijitRadioHover|.dijitRadioCheckedHover - for background image + * + * 5. Disabled state + * .dijitRadioDisabled|.dijitRadioCheckedDisabled - for background image + */ +.claro .dijitToggleButton .dijitRadio, .claro .dijitToggleButton .dijitRadioIcon { + background-image: url('images/checkboxRadioButtonStates.png'); } -.dj_ie6 .claro .dijitToggleButton .dijitRadio, -.dj_ie6 .claro .dijitToggleButton .dijitRadioIcon { - background-image: url('images/checkboxAndRadioButtons_IE6.png'); +.dj_ie6 .claro .dijitToggleButton .dijitRadio, .dj_ie6 .claro .dijitToggleButton .dijitRadioIcon { + background-image: url('images/checkboxAndRadioButtons_IE6.png'); } -.claro .dijitRadio, -.claro .dijitRadioIcon { - background-image: url('images/checkboxRadioButtonStates.png'); - background-repeat: no-repeat; - width: 15px; - height: 15px; - margin: 0px 2px 0px 0px; - padding: 0px; +.claro .dijitRadio, .claro .dijitRadioIcon { + /* inside a toggle button */ + + background-image: url('images/checkboxRadioButtonStates.png'); + /* checkbox sprite image */ + + background-repeat: no-repeat; + width: 15px; + height: 15px; + margin: 0 2px 0 0; + padding: 0; } -.dj_ie6 .claro .dijitRadio, -.dj_ie6 .claro .dijitRadioIcon { - background-image: url('images/checkboxAndRadioButtons_IE6.png'); +.dj_ie6 .claro .dijitRadio, .dj_ie6 .claro .dijitRadioIcon { + /* inside a toggle button */ + + background-image: url('images/checkboxAndRadioButtons_IE6.png'); + /* checkbox sprite image */ + } -.claro .dijitRadio{ - - background-position: -105px; +.claro .dijitRadio { + /* unselected */ + + background-position: -105px; } .claro .dijitToggleButton .dijitRadioIcon { - - background-position: -107px; + /* unselected */ + + background-position: -107px; } .claro .dijitRadioDisabled { - - background-position: -165px; + /* unselected and disabled */ + + background-position: -165px; } .claro .dijitRadioHover { - - background-position: -135px; + /* hovering over an unselected enabled radio button */ + + background-position: -135px; } -.claro .dijitRadioChecked{ - background-position: -90px; +.claro .dijitRadioChecked { + background-position: -90px; } .claro .dijitToggleButtonChecked .dijitRadioIcon { - background-position: -92px; + background-position: -92px; } -.claro .dijitRadioCheckedHover{ - background-position: -120px; +.claro .dijitRadioCheckedHover { + background-position: -120px; } .claro .dijitRadioCheckedDisabled { - - background-position: -150px; + /* selected but disabled */ + + background-position: -150px; } diff --git a/lib/dijit/themes/claro/form/RadioButton.less b/lib/dijit/themes/claro/form/RadioButton.less new file mode 100644 index 000000000..18f1cc163 --- /dev/null +++ b/lib/dijit/themes/claro/form/RadioButton.less @@ -0,0 +1,84 @@ +/* RadioButton + * + * Styling RadioButton mainly includes: + * + * 1. Containers + * .dijitRadio|.dijitRadioIcon - for border, padding, width|height and background image + * + * 2. RadioButton within ToggleButton + * .dijitToggleButton|.dijitToggleButtonChecked .* - for background image + * + * 3. Checked state + * .dijitRadioChecked - for checked background-color|image + * .dijitToggleButtonChecked - for border, background-color|image, display and width|height + * + * 4. Hover state + * .dijitRadioHover|.dijitRadioCheckedHover - for background image + * + * 5. Disabled state + * .dijitRadioDisabled|.dijitRadioCheckedDisabled - for background image + */ + +@import "../variables"; + +.claro .dijitToggleButton .dijitRadio, +.claro .dijitToggleButton .dijitRadioIcon { + background-image: url('images/checkboxRadioButtonStates.png'); +} + +.dj_ie6 .claro .dijitToggleButton .dijitRadio, +.dj_ie6 .claro .dijitToggleButton .dijitRadioIcon { + background-image: url('images/checkboxAndRadioButtons_IE6.png'); +} + +.claro .dijitRadio, +.claro .dijitRadioIcon { /* inside a toggle button */ + background-image: url('images/checkboxRadioButtonStates.png'); /* checkbox sprite image */ + background-repeat: no-repeat; + width: 15px; + height: 15px; + margin: 0 2px 0 0; + padding: 0; +} + +.dj_ie6 .claro .dijitRadio, +.dj_ie6 .claro .dijitRadioIcon { /* inside a toggle button */ + background-image: url('images/checkboxAndRadioButtons_IE6.png'); /* checkbox sprite image */ +} + +.claro .dijitRadio{ + /* unselected */ + background-position: -105px; +} + +.claro .dijitToggleButton .dijitRadioIcon { + /* unselected */ + background-position: -107px; +} + +.claro .dijitRadioDisabled { + /* unselected and disabled */ + background-position: -165px; +} + +.claro .dijitRadioHover { + /* hovering over an unselected enabled radio button */ + background-position: -135px; +} + +.claro .dijitRadioChecked{ + background-position: -90px; +} + +.claro .dijitToggleButtonChecked .dijitRadioIcon { + background-position: -92px; +} + +.claro .dijitRadioCheckedHover{ + background-position: -120px; +} + +.claro .dijitRadioCheckedDisabled { + /* selected but disabled */ + background-position: -150px; +} diff --git a/lib/dijit/themes/claro/form/Select.css b/lib/dijit/themes/claro/form/Select.css index c8f1d43fa..a30ede640 100644 --- a/lib/dijit/themes/claro/form/Select.css +++ b/lib/dijit/themes/claro/form/Select.css @@ -1,89 +1,109 @@ - +/* Select + * + * Styling Select mainly includes: + * + * 1. Containers + * .dijitSelect - for border, background-color + * .dijitButtonContents - for border + * + * 2. Arrow + * .dijitArrowButton - for border, padding and background-color|image + * .dijitArrowButtonInner - for border, background-color|image, display and width|height + * + * 3. Menu + * .dijitSelectMenu .* - for border, padding + * + * 4. Various states + * .dijitSelectHover|.dijitSelectFocused|.dijitSelectDisabled .* - for border, padding and background-color|image + */ .claro .dijitSelect .dijitButtonText { - padding: 0px 5px 2px 5px; + padding: 2px; } +/* normal status */ .claro .dijitSelect { - border: 1px solid #b5bcc7; - background-color: #f7fcff; - border-collapse: separate; + border: 1px solid #b5bcc7; + background-color: #ffffff; + border-collapse: separate; } -.dj_ie6 .claro .dijitSelect, -.dj_ie6 .claro .dijitSelect .dijitButtonNode { - background-image:none; +.dj_ie6 .claro .dijitSelect, .dj_ie6 .claro .dijitSelect .dijitButtonNode { + background-image: none; } .claro .dijitSelect .dijitButtonContents { - border: 0px solid #b5bcc7; - border-right-width: 1px; + border: 0 solid #b5bcc7; + border-right-width: 1px; } .claro .dijitSelect .dijitArrowButton { - padding: 0; - border: 1px solid #fff; - border-top:none; - background-color:#ebeef4; - background-image: url("images/formHighlight.png"); - background-repeat:repeat-x; + padding: 0; + border: 1px solid #ffffff; + border-top: none; + background-color: #efefef; + background-image: url("images/formHighlight.png"); + background-repeat: repeat-x; } .claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner { - background-image: url("images/commonFormArrows.png"); - background-position:-35px 70%; - background-repeat: no-repeat; - width:16px; - height:16px; - display:block; + background-image: url("images/commonFormArrows.png"); + background-position: -35px 70%; + background-repeat: no-repeat; + width: 16px; + height: 16px; } +/* hover status */ .claro .dijitSelectHover { - border: 1px solid #769dc0; - background-color: #e9f4fe; - background-image: url('images/textBox_back.png'); - background-repeat: repeat-x; + border: 1px solid #769dc0; + background-color: #e9f4fe; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; } .claro .dijitSelectHover .dijitButtonContents { - border-color:#81a5c6; + border-color: #769dc0; } .claro .dijitSelectHover .dijitArrowButton { - background-color:#abd6ff; + background-color: #abd6ff; } .claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner { - background-position:-70px 70%; + background-position: -70px 70%; } +/* focused status */ .claro .dijitSelectFocused { - border: 1px solid #769dc0; + border: 1px solid #769dc0; } .claro .dijitSelectFocused .dijitButtonContents { - border-color:#81a5c6; + border-color: #769dc0; } .claro .dijitSelectFocused .dijitArrowButton { - background-color:#7dbefa; - background-position:0px -177px; - border: none; - padding: 0px 1px; + background-color: #7dbefa; + background-position: 0 -177px; + border: none; + padding: 0 1px; } .claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner { - background-position:-70px 70%; - margin-bottom: 1px; + background-position: -70px 70%; + margin-bottom: 1px; } +/* disable status */ .claro .dijitSelectDisabled { - border: 1px solid #d3d3d3; - background-color: #efefef; - background-image: none; - color: #818181; + border: 1px solid #d3d3d3; + background-color: #efefef; + background-image: none; + color: #818181; } -.claro .dijitSelectDisabled .dijitArrowButton { - background-color: #efefef; +.claro .dijitSelectDisabled .dijitArrowButton { + background-color: #efefef; } .claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner { - background-position:0px 70% + background-position: 0 70%; } -.claro .dijitSelectMenu td.dijitMenuItemIconCell, -.claro .dijitSelectMenu td.dijitMenuArrowCell { - - display: none; +/* Dropdown menu style for select */ +.claro .dijitSelectMenu td.dijitMenuItemIconCell, .claro .dijitSelectMenu td.dijitMenuArrowCell { + /* so that arrow and icon cells from MenuItem are not displayed */ + + display: none; } .claro .dijitSelectMenu td.dijitMenuItemLabel { - - padding-left: 5px; - padding-right: 5px; + /* line up menu text with text in select box (in LTR and RTL modes) */ + + padding: 2px; } .claro .dijitSelectMenu .dijitMenuSeparatorTop { - border-bottom:1px solid #769dc0; + border-bottom: 1px solid #769dc0; } diff --git a/lib/dijit/themes/claro/form/Select.less b/lib/dijit/themes/claro/form/Select.less new file mode 100644 index 000000000..c429b2e48 --- /dev/null +++ b/lib/dijit/themes/claro/form/Select.less @@ -0,0 +1,124 @@ +/* Select + * + * Styling Select mainly includes: + * + * 1. Containers + * .dijitSelect - for border, background-color + * .dijitButtonContents - for border + * + * 2. Arrow + * .dijitArrowButton - for border, padding and background-color|image + * .dijitArrowButtonInner - for border, background-color|image, display and width|height + * + * 3. Menu + * .dijitSelectMenu .* - for border, padding + * + * 4. Various states + * .dijitSelectHover|.dijitSelectFocused|.dijitSelectDisabled .* - for border, padding and background-color|image + */ + +@import "../variables"; + +.claro .dijitSelect .dijitButtonText { + padding: @textbox-padding; +} + +/* normal status */ +.claro .dijitSelect { + border: 1px solid @border-color; + background-color: @textbox-background-color; + border-collapse: separate; +} +.dj_ie6 .claro .dijitSelect, +.dj_ie6 .claro .dijitSelect .dijitButtonNode { + background-image:none; +} + +.claro .dijitSelect .dijitButtonContents { + border: 0 solid @border-color; + border-right-width: 1px; +} + +.claro .dijitSelect .dijitArrowButton { + padding: 0; + border: 1px solid @arrowbutton-inner-border-color; + border-top:none; + background-color: @arrowbutton-background-color; + background-image: url("images/formHighlight.png"); + background-repeat:repeat-x; +} + +.claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner { + background-image: url("images/commonFormArrows.png"); + background-position:-35px 70%; + background-repeat: no-repeat; + width:16px; + height:16px; +} + +/* hover status */ +.claro .dijitSelectHover { + border: 1px solid @hovered-border-color; + background-color: @textbox-hovered-background-color; + background-image: url('images/textBox_back.png'); + background-repeat: repeat-x; +} + +.claro .dijitSelectHover .dijitButtonContents { + border-color:@hovered-border-color; +} + +.claro .dijitSelectHover .dijitArrowButton { + background-color:@arrowbutton-hovered-background-color; +} +.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner { + background-position:-70px 70%; +} + +/* focused status */ +.claro .dijitSelectFocused { + border: 1px solid @focused-border-color; +} +.claro .dijitSelectFocused .dijitButtonContents { + border-color:@focused-border-color; +} +.claro .dijitSelectFocused .dijitArrowButton { + background-color:#7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior. + background-position:0 -177px; + border: none; + padding: 0 1px; +} +.claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner { + background-position:-70px 70%; + margin-bottom: 1px; +} + +/* disable status */ +.claro .dijitSelectDisabled { + border: 1px solid @disabled-border-color; + background-color: @disabled-background-color; + background-image: none; + color: @disabled-text-color; +} +.claro .dijitSelectDisabled .dijitArrowButton { + background-color: @disabled-background-color; +} +.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner { + background-position:0 70% +} + +/* Dropdown menu style for select */ + +.claro .dijitSelectMenu td.dijitMenuItemIconCell, +.claro .dijitSelectMenu td.dijitMenuArrowCell { + /* so that arrow and icon cells from MenuItem are not displayed */ + display: none; +} +.claro .dijitSelectMenu td.dijitMenuItemLabel { + /* line up menu text with text in select box (in LTR and RTL modes) */ + padding: @textbox-padding; +} + +.claro .dijitSelectMenu .dijitMenuSeparatorTop { + border-bottom:1px solid @focused-border-color; +} diff --git a/lib/dijit/themes/claro/form/Select_rtl.css b/lib/dijit/themes/claro/form/Select_rtl.css index 43797508f..a14d4ec42 100644 --- a/lib/dijit/themes/claro/form/Select_rtl.css +++ b/lib/dijit/themes/claro/form/Select_rtl.css @@ -1,4 +1,4 @@ .claro .dijitSelectRtl .dijitButtonContents { - border-right-width: 0px; - border-left-width: 1px; + border-right-width: 0; + border-left-width: 1px; } diff --git a/lib/dijit/themes/claro/form/Select_rtl.less b/lib/dijit/themes/claro/form/Select_rtl.less new file mode 100644 index 000000000..ffa40dc44 --- /dev/null +++ b/lib/dijit/themes/claro/form/Select_rtl.less @@ -0,0 +1,6 @@ +@import "../variables"; + +.claro .dijitSelectRtl .dijitButtonContents { + border-right-width: 0; + border-left-width: 1px; +} diff --git a/lib/dijit/themes/claro/form/Slider.css b/lib/dijit/themes/claro/form/Slider.css index 51c2c2313..5694e8c76 100644 --- a/lib/dijit/themes/claro/form/Slider.css +++ b/lib/dijit/themes/claro/form/Slider.css @@ -1,204 +1,242 @@ - +/* Slider + * + * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar) + * + * Slider progress bar: + * 1. Slider progress bar (default styling): + * .dijitSliderProgressBarH - progress bar at the middle of horizontal slider + * .dijitSliderLeftBumper - bar at the left of horizontal slider + * .dijitSliderRightBumper - bar at the right of horizontal slider + * .dijitSliderProgressBarV - progress bar at the middle of vertical slider + * .dijitSliderTopBumper - bar at the top of vertical slider + * .dijitSliderBottomtBumper - bar at the bottom of vertical slider + * + * 2. hovered Slider progress bar (ie, mouse hover on progress bar) + * .dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border + * + * 3. focused Slider progress bar (ie, mouse focused on progress bar) + * .dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border + * + * 4. disabled/read-only Slider progress bar + * .dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled + * + * + * Slider Thumbs: + * 1. Slider Thumbs (default styling): + * .dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar + * + * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs) + * .dijitSliderHover .dijitSliderImageHandleH - hovered controller style + * + * 3. focused Slider progress bar (ie, mouse focused on slider thumbs) + * .dijitSliderFocused .dijitSliderImageHandleV - focused controller style + * + * + * Slider Increment/Decrement Buttons: + * 1. Slider Increment/Decrement Buttons (default styling): + * .dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider + * .dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider + * .dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider + * .dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider + * + * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons) + * .dijitSliderHover .dijitSliderDecrementIconH - for background, border + * + * 3. active Slider Increment/Decrement Buttons (mouse down on the icons) + * .dijitSliderActive .dijitSliderIncrementIconV - for background, border + * + * 4. disabled/read-only Slider Increment/Decrement Buttons + * .dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider + * .dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider + */ .claro .dijitSliderBar { - border-style: solid; - outline: 1px; + border-style: solid; + outline: 1px; } .claro .dijitSliderFocused .dijitSliderBar { - border-color: #769dc0; + border-color: #769dc0; } .claro .dijitSliderHover .dijitSliderBar { - border-color: #769dc0; + border-color: #769dc0; } .claro .dijitSliderDisabled .dijitSliderBar { - background-image: none; - border-color: #d3d3d3; + background-image: none; + border-color: #d3d3d3; } +/* Horizontal Slider */ .claro .dijitRuleLabelsContainerH { - padding: 2px 0px; -} -.claro .dijitSlider .dijitSliderProgressBarH, -.claro .dijitSlider .dijitSliderLeftBumper{ - background-image: url("images/sliderHorizontal.png"); - background-repeat:repeat-x; - background-position:0 -20px; - border-color: #b5bcc7; - background-color: #cfe5fa; -} -.claro .dijitSlider .dijitSliderRemainingBarH, -.claro .dijitSlider .dijitSliderRightBumper{ - background-image: url("images/sliderHorizontal.png"); - background-repeat:repeat-x; - background-position:0 -11px; - border-color: #b5bcc7; - background-color: #fff; + padding: 2px 0; +} +.claro .dijitSlider .dijitSliderProgressBarH, .claro .dijitSlider .dijitSliderLeftBumper { + background-image: url("images/sliderHorizontal.png"); + background-repeat: repeat-x; + background-position: 0 -20px; + border-color: #b5bcc7; + background-color: #cfe5fa; +} +.claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper { + background-image: url("images/sliderHorizontal.png"); + background-repeat: repeat-x; + background-position: 0 -11px; + border-color: #b5bcc7; + background-color: #ffffff; } .claro .dijitSliderRightBumper { - border-right: solid 1px #b5bcc7; + border-right: solid 1px #b5bcc7; } .claro .dijitSliderLeftBumper { - border-left: solid 1px #b5bcc7; -} -.claro .dijitSliderHover .dijitSliderProgressBarH, -.claro .dijitSliderHover .dijitSliderLeftBumper{ - background-position:0 -20px; - background-color: #abd6ff; - border-color: #769dc0; -} -.claro .dijitSliderHover .dijitSliderRemainingBarH, -.claro .dijitSliderHover .dijitSliderRightBumper{ - background-position:0 0px; - background-color: #fff; - border-color: #769dc0; -} -.claro .dijitSliderFocused .dijitSliderProgressBarH, -.claro .dijitSliderFocused .dijitSliderLeftBumper{ - background-position:0 -30px; - background-color: #abd6ff; - border-color: #769dc0; -} -.claro .dijitSliderFocused .dijitSliderRemainingBarH, -.claro .dijitSliderFocused .dijitSliderRightBumper{ - background-position:0 -9px; - background-color: #fff; - border-color: #769dc0; -} -.claro .dijitSliderDisabled .dijitSliderProgressBarH, -.claro .dijitSliderDisabled .dijitSliderLeftBumper{ - background-color: #cdcdcd; - background-image:none; -} -.claro .dijitSliderDisabled .dijitSliderRemainingBarH, -.claro .dijitSliderDisabled .dijitSliderRightBumper{ - background-color: #efefef; + border-left: solid 1px #b5bcc7; +} +.claro .dijitSliderHover .dijitSliderProgressBarH, .claro .dijitSliderHover .dijitSliderLeftBumper { + background-position: 0 -20px; + background-color: #abd6ff; + border-color: #769dc0; +} +.claro .dijitSliderHover .dijitSliderRemainingBarH, .claro .dijitSliderHover .dijitSliderRightBumper { + background-position: 0 0; + background-color: #ffffff; + border-color: #769dc0; +} +.claro .dijitSliderFocused .dijitSliderProgressBarH, .claro .dijitSliderFocused .dijitSliderLeftBumper { + background-position: 0 -30px; + background-color: #abd6ff; + border-color: #769dc0; +} +.claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper { + background-position: 0 -9px; + background-color: #ffffff; + border-color: #769dc0; +} +.claro .dijitSliderDisabled .dijitSliderProgressBarH, .claro .dijitSliderDisabled .dijitSliderLeftBumper { + background-color: #d3d3d3; + /* left side of slider, fill matches border */ + + background-image: none; } +.claro .dijitSliderDisabled .dijitSliderRemainingBarH, .claro .dijitSliderDisabled .dijitSliderRightBumper { + background-color: #efefef; +} +/* Vertical Slider */ .claro .dijitRuleLabelsContainerV { - padding: 0px 2px; -} -.claro .dijitSlider .dijitSliderProgressBarV, -.claro .dijitSlider .dijitSliderBottomBumper{ - background-image: url("images/sliderVertical.png"); - background-repeat:repeat-y; - background-position:-36px 0; - border-color: #b5bcc7; - background-color: #cfe5fa; -} -.claro .dijitSlider .dijitSliderRemainingBarV, -.claro .dijitSlider .dijitSliderTopBumper{ - background-image: url("images/sliderVertical.png"); - background-repeat:repeat-y; - background-position:-3px 0; - border-color: #b5bcc7; - background-color: #fff; + padding: 0 2px; +} +.claro .dijitSlider .dijitSliderProgressBarV, .claro .dijitSlider .dijitSliderBottomBumper { + background-image: url("images/sliderVertical.png"); + background-repeat: repeat-y; + background-position: -36px 0; + border-color: #b5bcc7; + background-color: #cfe5fa; +} +.claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper { + background-image: url("images/sliderVertical.png"); + background-repeat: repeat-y; + background-position: -3px 0; + border-color: #b5bcc7; + background-color: #ffffff; } .claro .dijitSliderBottomBumper { - border-bottom: solid 1px #b5bcc7; + border-bottom: solid 1px #b5bcc7; } .claro .dijitSliderTopBumper { - border-top: solid 1px #b5bcc7; + border-top: solid 1px #b5bcc7; } -.claro .dijitSliderHover .dijitSliderProgressBarV, -.claro .dijitSliderHover .dijitSliderBottomBumper{ - background-position:-36px 0; - background-color: #abd6ff; +.claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper { + background-position: -36px 0; + background-color: #abd6ff; } -.claro .dijitSliderHover .dijitSliderRemainingBarV, -.claro .dijitSliderHover .dijitSliderTopBumper{ - background-position:0 0; - background-color: #fff; +.claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper { + background-position: 0 0; + background-color: #ffffff; } -.claro .dijitSliderFocused .dijitSliderProgressBarV, -.claro .dijitSliderFocused .dijitSliderBottomBumper{ - background-position:-56px 0; - background-color: #abd6ff; +.claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper { + background-position: -56px 0; + background-color: #abd6ff; } -.claro .dijitSliderFocused .dijitSliderRemainingBarV, -.claro .dijitSliderFocused .dijitSliderTopBumper{ - background-position:-18px 0; - background-color: #fff; +.claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper { + background-position: -18px 0; + background-color: #ffffff; } -.claro .dijitSliderDisabled .dijitSliderProgressBarV, -.claro .dijitSliderDisabled .dijitSliderBottomBumper{ - background-color: #cdcdcd; +.claro .dijitSliderDisabled .dijitSliderProgressBarV, .claro .dijitSliderDisabled .dijitSliderBottomBumper { + background-color: #d3d3d3; + /* bottom side of slider, fill matches border */ + } -.claro .dijitSliderDisabled .dijitSliderRemainingBarV, -.claro .dijitSliderDisabled .dijitSliderTopBumper{ - background-color: #efefef; +.claro .dijitSliderDisabled .dijitSliderRemainingBarV, .claro .dijitSliderDisabled .dijitSliderTopBumper { + background-color: #efefef; } +/* ------- Thumbs ------- */ .claro .dijitSliderImageHandleH { - border: 0px; - width: 18px; - height: 16px; - background-image: url("images/sliderThumbs.png"); - background-repeat:no-repeat; - background-position:0 0; + border: 0; + width: 18px; + height: 16px; + background-image: url("images/sliderThumbs.png"); + background-repeat: no-repeat; + background-position: 0 0; } .claro .dijitSliderHover .dijitSliderImageHandleH { - background-position:-18px 0; + background-position: -18px 0; } .claro .dijitSliderFocused .dijitSliderImageHandleH { - background-position:-36px 0; + background-position: -36px 0; } -.claro .dijitSliderProgressBarH .dijitSliderThumbHover{ - background-position:-36px 0; +.claro .dijitSliderProgressBarH .dijitSliderThumbHover { + background-position: -36px 0; } -.claro .dijitSliderProgressBarH .dijitSliderThumbActive{ - background-position:-36px 0; +.claro .dijitSliderProgressBarH .dijitSliderThumbActive { + background-position: -36px 0; } -.claro .dijitSliderReadOnly .dijitSliderImageHandleH, -.claro .dijitSliderDisabled .dijitSliderImageHandleH { - background-position:-54px 0; +.claro .dijitSliderReadOnly .dijitSliderImageHandleH, .claro .dijitSliderDisabled .dijitSliderImageHandleH { + background-position: -54px 0; } .claro .dijitSliderImageHandleV { - border: 0px; - width: 18px; - height: 16px; - background-image: url("images/sliderThumbs.png"); - background-repeat:no-repeat; - background-position:-289px 0; + border: 0; + width: 18px; + height: 16px; + background-image: url("images/sliderThumbs.png"); + background-repeat: no-repeat; + background-position: -289px 0; } .claro .dijitSliderHover .dijitSliderImageHandleV { - background-position:-307px 0; + background-position: -307px 0; } .claro .dijitSliderFocused .dijitSliderImageHandleV { - background-position:-325px 0; + background-position: -325px 0; } -.claro .dijitSliderProgressBarV .dijitSliderThumbHover{ - background-position:-325px 0; +.claro .dijitSliderProgressBarV .dijitSliderThumbHover { + background-position: -325px 0; } -.claro .dijitSliderProgressBarV .dijitSliderThumbActive{ - background-position:-325px 0; +.claro .dijitSliderProgressBarV .dijitSliderThumbActive { + background-position: -325px 0; } -.claro .dijitSliderReadOnly .dijitSliderImageHandleV, -.claro .dijitSliderDisabled .dijitSliderImageHandleV { - background-position:-343px 0; +.claro .dijitSliderReadOnly .dijitSliderImageHandleV, .claro .dijitSliderDisabled .dijitSliderImageHandleV { + background-position: -343px 0; } -.claro .dijitSliderButtonContainerH{ - padding: 1px 3px 1px 2px; +/* ---- Increment/Decrement Buttons ---- */ +.claro .dijitSliderButtonContainerH { + padding: 1px 3px 1px 2px; } -.claro .dijitSliderButtonContainerV{ - padding: 3px 1px 2px 1px; +.claro .dijitSliderButtonContainerV { + padding: 3px 1px 2px 1px; } .claro .dijitSliderDecrementIconH, .claro .dijitSliderIncrementIconH, .claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV { - background-image: url('images/commonFormArrows.png'); - background-repeat:no-repeat; - background-color: #e9ecf2; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border: solid 1px #b5bcc7; - font-size: 1px; -} -.claro .dijitSliderDecrementIconH, -.claro .dijitSliderIncrementIconH { - height: 12px; - width: 9px; -} -.claro .dijitSliderDecrementIconV, -.claro .dijitSliderIncrementIconV { - height: 9px; - width: 12px; + background-image: url('images/commonFormArrows.png'); + background-repeat: no-repeat; + background-color: #efefef; + -moz-border-radius: 2px; + border-radius: 2px; + border: solid 1px #b5bcc7; + font-size: 1px; +} +.claro .dijitSliderDecrementIconH, .claro .dijitSliderIncrementIconH { + height: 12px; + width: 9px; +} +.claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV { + height: 9px; + width: 12px; } .claro .dijitSliderActive .dijitSliderDecrementIconH, .claro .dijitSliderActive .dijitSliderIncrementIconH, @@ -208,79 +246,73 @@ .claro .dijitSliderHover .dijitSliderIncrementIconH, .claro .dijitSliderHover .dijitSliderDecrementIconV, .claro .dijitSliderHover .dijitSliderIncrementIconV { - border: solid 1px #769dc0; - background-color:#fff; + /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */ + + border: solid 1px #769dc0; + background-color: #ffffff; } .claro .dijitSliderDecrementIconH { - background-position:-357px 50%; + background-position: -357px 50%; } -.claro .dijitSliderActive .dijitSliderDecrementIconH -.claro .dijitSliderHover .dijitSliderDecrementIconH { - background-position:-393px 50%; +.claro .dijitSliderActive .dijitSliderDecrementIconH.claro .dijitSliderHover .dijitSliderDecrementIconH { + background-position: -393px 50%; } .claro .dijitSliderIncrementIconH { - background-position:-251px 50%; + background-position: -251px 50%; } -.claro .dijitSliderActive .dijitSliderIncrementIconH -.claro .dijitSliderHover .dijitSliderIncrementIconH { - background-position:-283px 50%; +.claro .dijitSliderActive .dijitSliderIncrementIconH.claro .dijitSliderHover .dijitSliderIncrementIconH { + background-position: -283px 50%; } .claro .dijitSliderDecrementIconV { - background-position:-38px 50%; + background-position: -38px 50%; } -.claro .dijitSliderActive .dijitSliderDecrementIconV -.claro .dijitSliderHover .dijitSliderDecrementIconV { - background-position:-73px 50%; +.claro .dijitSliderActive .dijitSliderDecrementIconV.claro .dijitSliderHover .dijitSliderDecrementIconV { + background-position: -73px 50%; } .claro .dijitSliderIncrementIconV { - background-position:-143px 49%; + background-position: -143px 49%; } -.claro .dijitSliderActive .dijitSliderIncrementIconV -.claro .dijitSliderHover .dijitSliderIncrementIconV { - background-position:-178px 49%; +.claro .dijitSliderActive .dijitSliderIncrementIconV.claro .dijitSliderHover .dijitSliderIncrementIconV { + background-position: -178px 49%; } .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover, .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover, .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover, .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover { - background-color: #cce3fc; + background-color: #cfe5fa; } .claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive, .claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive, .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { - background-color: #a5d0fc; - border-color:#6591b9; + background-color: #abd6ff; + border-color: #769dc0; } .claro .dijitSliderButtonInner { - visibility: hidden; + visibility: hidden; } -.claro .dijitSliderDisabled .dijitSliderBar{ - border-color: #d3d3d3; +.claro .dijitSliderDisabled .dijitSliderBar { + border-color: #d3d3d3; } -.claro .dijitSliderReadOnly *,.claro .dijitSliderDisabled * { - border-color: #d3d3d3; - color: #bdbdbd; +.claro .dijitSliderReadOnly *, .claro .dijitSliderDisabled * { + border-color: #d3d3d3; + color: #818181; } -.claro .dijitSliderReadOnly .dijitSliderDecrementIconH, -.claro .dijitSliderDisabled .dijitSliderDecrementIconH { - background-position:-321px 50%; - background-color:#e9e9e9; +.claro .dijitSliderReadOnly .dijitSliderDecrementIconH, .claro .dijitSliderDisabled .dijitSliderDecrementIconH { + background-position: -321px 50%; + background-color: #efefef; } -.claro .dijitSliderReadOnly .dijitSliderIncrementIconH, -.claro .dijitSliderDisabled .dijitSliderIncrementIconH { - background-position:-215px 50%; - background-color:#e9e9e9; +.claro .dijitSliderReadOnly .dijitSliderIncrementIconH, .claro .dijitSliderDisabled .dijitSliderIncrementIconH { + background-position: -215px 50%; + background-color: #efefef; } -.claro .dijitSliderReadOnly .dijitSliderDecrementIconV, -.claro .dijitSliderDisabled .dijitSliderDecrementIconV { - background-position:-3px 49%; - background-color:#e9e9e9; +.claro .dijitSliderReadOnly .dijitSliderDecrementIconV, .claro .dijitSliderDisabled .dijitSliderDecrementIconV { + background-position: -3px 49%; + background-color: #efefef; } -.claro .dijitSliderReadOnly .dijitSliderIncrementIconV, -.claro .dijitSliderDisabled .dijitSliderIncrementIconV { - background-position:-107px 49%; - background-color:#e9e9e9; +.claro .dijitSliderReadOnly .dijitSliderIncrementIconV, .claro .dijitSliderDisabled .dijitSliderIncrementIconV { + background-position: -107px 49%; + background-color: #efefef; } .dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH, .dj_ie6 .claro .dijitSlider .dijitSliderLeftBumper, @@ -290,5 +322,5 @@ .dj_ie6 .claro .dijitSlider .dijitSliderTopBumper, .dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarV, .dj_ie6 .claro .dijitSlider .dijitSliderBottomBumper { - background-image:none; + background-image: none; } diff --git a/lib/dijit/themes/claro/form/Slider.less b/lib/dijit/themes/claro/form/Slider.less new file mode 100644 index 000000000..82451b506 --- /dev/null +++ b/lib/dijit/themes/claro/form/Slider.less @@ -0,0 +1,362 @@ +/* Slider + * + * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar) + * + * Slider progress bar: + * 1. Slider progress bar (default styling): + * .dijitSliderProgressBarH - progress bar at the middle of horizontal slider + * .dijitSliderLeftBumper - bar at the left of horizontal slider + * .dijitSliderRightBumper - bar at the right of horizontal slider + * .dijitSliderProgressBarV - progress bar at the middle of vertical slider + * .dijitSliderTopBumper - bar at the top of vertical slider + * .dijitSliderBottomtBumper - bar at the bottom of vertical slider + * + * 2. hovered Slider progress bar (ie, mouse hover on progress bar) + * .dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border + * + * 3. focused Slider progress bar (ie, mouse focused on progress bar) + * .dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border + * + * 4. disabled/read-only Slider progress bar + * .dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled + * + * + * Slider Thumbs: + * 1. Slider Thumbs (default styling): + * .dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar + * + * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs) + * .dijitSliderHover .dijitSliderImageHandleH - hovered controller style + * + * 3. focused Slider progress bar (ie, mouse focused on slider thumbs) + * .dijitSliderFocused .dijitSliderImageHandleV - focused controller style + * + * + * Slider Increment/Decrement Buttons: + * 1. Slider Increment/Decrement Buttons (default styling): + * .dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider + * .dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider + * .dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider + * .dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider + * + * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons) + * .dijitSliderHover .dijitSliderDecrementIconH - for background, border + * + * 3. active Slider Increment/Decrement Buttons (mouse down on the icons) + * .dijitSliderActive .dijitSliderIncrementIconV - for background, border + * + * 4. disabled/read-only Slider Increment/Decrement Buttons + * .dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider + * .dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider + */ + +@import "../variables"; + +.claro .dijitSliderBar { + border-style: solid; + outline: 1px; +} +.claro .dijitSliderFocused .dijitSliderBar { + border-color: @focused-border-color; +} +.claro .dijitSliderHover .dijitSliderBar { + border-color: @hovered-border-color; +} +.claro .dijitSliderDisabled .dijitSliderBar { + background-image: none; + border-color: @disabled-border-color; +} + +/* Horizontal Slider */ + +.claro .dijitRuleLabelsContainerH { + padding: 2px 0; +} +.claro .dijitSlider .dijitSliderProgressBarH, +.claro .dijitSlider .dijitSliderLeftBumper{ + background-image: url("images/sliderHorizontal.png"); + background-repeat:repeat-x; + background-position:0 -20px; + border-color: @border-color; + background-color: @slider-fullbar-background-color; +} +.claro .dijitSlider .dijitSliderRemainingBarH, +.claro .dijitSlider .dijitSliderRightBumper{ + background-image: url("images/sliderHorizontal.png"); + background-repeat:repeat-x; + background-position:0 -11px; + border-color: @border-color; + background-color: @slider-remainingbar-background-color; +} +.claro .dijitSliderRightBumper { + border-right: solid 1px @border-color; +} +.claro .dijitSliderLeftBumper { + border-left: solid 1px @border-color; +} +.claro .dijitSliderHover .dijitSliderProgressBarH, +.claro .dijitSliderHover .dijitSliderLeftBumper{ + background-position:0 -20px; + background-color: @slider-hovered-fullbar-background-color; + border-color: @hovered-border-color; +} +.claro .dijitSliderHover .dijitSliderRemainingBarH, +.claro .dijitSliderHover .dijitSliderRightBumper{ + background-position:0 0; + background-color: @slider-hovered-remainingbar-background-color; + border-color: @hovered-border-color; +} +.claro .dijitSliderFocused .dijitSliderProgressBarH, +.claro .dijitSliderFocused .dijitSliderLeftBumper{ + background-position:0 -30px; + background-color: @slider-focused-fullbar-background-color; + border-color: @focused-border-color; +} +.claro .dijitSliderFocused .dijitSliderRemainingBarH, +.claro .dijitSliderFocused .dijitSliderRightBumper{ + background-position:0 -9px; + background-color: @slider-focused-remainingbar-background-color; + border-color: @focused-border-color; +} +.claro .dijitSliderDisabled .dijitSliderProgressBarH, +.claro .dijitSliderDisabled .dijitSliderLeftBumper{ + background-color: @disabled-border-color; /* left side of slider, fill matches border */ + background-image:none; +} +.claro .dijitSliderDisabled .dijitSliderRemainingBarH, +.claro .dijitSliderDisabled .dijitSliderRightBumper{ + background-color: @disabled-background-color; +} + +/* Vertical Slider */ + +.claro .dijitRuleLabelsContainerV { + padding: 0 2px; +} +.claro .dijitSlider .dijitSliderProgressBarV, +.claro .dijitSlider .dijitSliderBottomBumper{ + background-image: url("images/sliderVertical.png"); + background-repeat:repeat-y; + background-position:-36px 0; + border-color: @border-color; + background-color: @slider-fullbar-background-color; +} +.claro .dijitSlider .dijitSliderRemainingBarV, +.claro .dijitSlider .dijitSliderTopBumper{ + background-image: url("images/sliderVertical.png"); + background-repeat:repeat-y; + background-position:-3px 0; + border-color: @border-color; + background-color: @slider-remainingbar-background-color; +} +.claro .dijitSliderBottomBumper { + border-bottom: solid 1px @border-color; +} +.claro .dijitSliderTopBumper { + border-top: solid 1px @border-color; +} +.claro .dijitSliderHover .dijitSliderProgressBarV, +.claro .dijitSliderHover .dijitSliderBottomBumper{ + background-position:-36px 0; + background-color: @slider-hovered-fullbar-background-color; +} +.claro .dijitSliderHover .dijitSliderRemainingBarV, +.claro .dijitSliderHover .dijitSliderTopBumper{ + background-position:0 0; + background-color: @slider-hovered-remainingbar-background-color; +} +.claro .dijitSliderFocused .dijitSliderProgressBarV, +.claro .dijitSliderFocused .dijitSliderBottomBumper{ + background-position:-56px 0; + background-color: @slider-focused-fullbar-background-color; +} +.claro .dijitSliderFocused .dijitSliderRemainingBarV, +.claro .dijitSliderFocused .dijitSliderTopBumper{ + background-position:-18px 0; + background-color: @slider-focused-remainingbar-background-color; +} +.claro .dijitSliderDisabled .dijitSliderProgressBarV, +.claro .dijitSliderDisabled .dijitSliderBottomBumper{ + background-color: @disabled-border-color; /* bottom side of slider, fill matches border */ +} +.claro .dijitSliderDisabled .dijitSliderRemainingBarV, +.claro .dijitSliderDisabled .dijitSliderTopBumper{ + background-color: @disabled-background-color; +} + + +/* ------- Thumbs ------- */ + +.claro .dijitSliderImageHandleH { + border: 0; + width: 18px; + height: 16px; + background-image: url("images/sliderThumbs.png"); + background-repeat:no-repeat; + background-position:0 0; +} +.claro .dijitSliderHover .dijitSliderImageHandleH { + background-position:-18px 0; +} +.claro .dijitSliderFocused .dijitSliderImageHandleH { + background-position:-36px 0; +} +.claro .dijitSliderProgressBarH .dijitSliderThumbHover{ + background-position:-36px 0; +} +.claro .dijitSliderProgressBarH .dijitSliderThumbActive{ + background-position:-36px 0; +} +.claro .dijitSliderReadOnly .dijitSliderImageHandleH, +.claro .dijitSliderDisabled .dijitSliderImageHandleH { + background-position:-54px 0; +} +.claro .dijitSliderImageHandleV { + border: 0; + width: 18px; + height: 16px; + background-image: url("images/sliderThumbs.png"); + background-repeat:no-repeat; + background-position:-289px 0; +} +.claro .dijitSliderHover .dijitSliderImageHandleV { + background-position:-307px 0; +} +.claro .dijitSliderFocused .dijitSliderImageHandleV { + background-position:-325px 0; +} +.claro .dijitSliderProgressBarV .dijitSliderThumbHover{ + background-position:-325px 0; +} +.claro .dijitSliderProgressBarV .dijitSliderThumbActive{ + background-position:-325px 0; +} +.claro .dijitSliderReadOnly .dijitSliderImageHandleV, +.claro .dijitSliderDisabled .dijitSliderImageHandleV { + background-position:-343px 0; +} + +/* ---- Increment/Decrement Buttons ---- */ + +.claro .dijitSliderButtonContainerH{ + padding: 1px 3px 1px 2px; +} +.claro .dijitSliderButtonContainerV{ + padding: 3px 1px 2px 1px; +} +.claro .dijitSliderDecrementIconH, +.claro .dijitSliderIncrementIconH, +.claro .dijitSliderDecrementIconV, +.claro .dijitSliderIncrementIconV { + background-image: url('images/commonFormArrows.png'); + background-repeat:no-repeat; + background-color: @arrowbutton-background-color; + .border-radius(2px); + border: solid 1px @border-color; + font-size: 1px; +} +.claro .dijitSliderDecrementIconH, +.claro .dijitSliderIncrementIconH { + height: 12px; + width: 9px; +} +.claro .dijitSliderDecrementIconV, +.claro .dijitSliderIncrementIconV { + height: 9px; + width: 12px; +} +.claro .dijitSliderActive .dijitSliderDecrementIconH, +.claro .dijitSliderActive .dijitSliderIncrementIconH, +.claro .dijitSliderActive .dijitSliderDecrementIconV, +.claro .dijitSliderActive .dijitSliderIncrementIconV, +.claro .dijitSliderHover .dijitSliderDecrementIconH, +.claro .dijitSliderHover .dijitSliderIncrementIconH, +.claro .dijitSliderHover .dijitSliderDecrementIconV, +.claro .dijitSliderHover .dijitSliderIncrementIconV { + /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */ + border: solid 1px @hovered-border-color; + background-color: @slider-hoveredButton-background-color; +} + +.claro .dijitSliderDecrementIconH { + background-position:-357px 50%; +} +.claro .dijitSliderActive .dijitSliderDecrementIconH +.claro .dijitSliderHover .dijitSliderDecrementIconH { + background-position:-393px 50%; +} +.claro .dijitSliderIncrementIconH { + background-position:-251px 50%; +} +.claro .dijitSliderActive .dijitSliderIncrementIconH +.claro .dijitSliderHover .dijitSliderIncrementIconH { + background-position:-283px 50%; +} +.claro .dijitSliderDecrementIconV { + background-position:-38px 50%; +} +.claro .dijitSliderActive .dijitSliderDecrementIconV +.claro .dijitSliderHover .dijitSliderDecrementIconV { + background-position:-73px 50%; +} +.claro .dijitSliderIncrementIconV { + background-position:-143px 49%; +} +.claro .dijitSliderActive .dijitSliderIncrementIconV +.claro .dijitSliderHover .dijitSliderIncrementIconV { + background-position:-178px 49%; +} +.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover, +.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover, +.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover, +.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover { + background-color: @slider-button-hovered-background-color; +} +.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive, +.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive, +.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, +.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { + background-color: @slider-button-pressed-background-color; + border-color:@pressed-border-color; +} +.claro .dijitSliderButtonInner { + visibility: hidden; +} +.claro .dijitSliderDisabled .dijitSliderBar{ + border-color: @disabled-border-color; +} +.claro .dijitSliderReadOnly *,.claro .dijitSliderDisabled * { + border-color: @disabled-border-color; + color: @disabled-text-color; +} +.claro .dijitSliderReadOnly .dijitSliderDecrementIconH, +.claro .dijitSliderDisabled .dijitSliderDecrementIconH { + background-position:-321px 50%; + background-color:@disabled-background-color; +} +.claro .dijitSliderReadOnly .dijitSliderIncrementIconH, +.claro .dijitSliderDisabled .dijitSliderIncrementIconH { + background-position:-215px 50%; + background-color:@disabled-background-color; +} +.claro .dijitSliderReadOnly .dijitSliderDecrementIconV, +.claro .dijitSliderDisabled .dijitSliderDecrementIconV { + background-position:-3px 49%; + background-color:@disabled-background-color; +} +.claro .dijitSliderReadOnly .dijitSliderIncrementIconV, +.claro .dijitSliderDisabled .dijitSliderIncrementIconV { + background-position:-107px 49%; + background-color:@disabled-background-color; +} + +.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH, +.dj_ie6 .claro .dijitSlider .dijitSliderLeftBumper, +.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarH, +.dj_ie6 .claro .dijitSlider .dijitSliderRightBumper, +.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarV, +.dj_ie6 .claro .dijitSlider .dijitSliderTopBumper, +.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarV, +.dj_ie6 .claro .dijitSlider .dijitSliderBottomBumper { + background-image:none; +} diff --git a/lib/dijit/themes/claro/form/Slider_rtl.css b/lib/dijit/themes/claro/form/Slider_rtl.css index ebff4268d..97e078b9f 100644 --- a/lib/dijit/themes/claro/form/Slider_rtl.css +++ b/lib/dijit/themes/claro/form/Slider_rtl.css @@ -3,24 +3,22 @@ .claro .dijitSliderRtl .dijitSliderLeftBumper, .claro .dijitSliderRtl .dijitSliderRightBumper, .claro .dijitSliderRtl .dijitSliderTopBumper { - background-position: top right; + background-position: top right; } -.claro .dijitSliderRtl .dijitSliderProgressBarV, -.claro .dijitSliderRtl .dijitSliderRemainingBarV, -.claro .dijitSliderRtl .dijitSliderBottomBumper { - background-position: bottom right; +.claro .dijitSliderRtl .dijitSliderProgressBarV, .claro .dijitSliderRtl .dijitSliderRemainingBarV, .claro .dijitSliderRtl .dijitSliderBottomBumper { + background-position: bottom right; } .claro .dijitSliderRtl .dijitSliderLeftBumper { - border-left-width: 0px; - border-right-width: 1px; + border-left-width: 0; + border-right-width: 1px; } .claro .dijitSliderRtl .dijitSliderRightBumper { - border-left-width: 1px; - border-right-width: 0px; + border-left-width: 1px; + border-right-width: 0; } .claro .dijitSliderRtl .dijitSliderIncrementIconH { - background-position:-357px 50%; + background-position: -357px 50%; } .claro .dijitSliderRtl .dijitSliderDecrementIconH { - background-position:-251px 50%; + background-position: -251px 50%; } diff --git a/lib/dijit/themes/claro/form/Slider_rtl.less b/lib/dijit/themes/claro/form/Slider_rtl.less new file mode 100644 index 000000000..66a711668 --- /dev/null +++ b/lib/dijit/themes/claro/form/Slider_rtl.less @@ -0,0 +1,33 @@ +@import "../variables"; + +.claro .dijitSliderRtl .dijitSliderProgressBarH, +.claro .dijitSliderRtl .dijitSliderRemainingBarH, +.claro .dijitSliderRtl .dijitSliderLeftBumper, +.claro .dijitSliderRtl .dijitSliderRightBumper, +.claro .dijitSliderRtl .dijitSliderTopBumper { + background-position: top right; +} + +.claro .dijitSliderRtl .dijitSliderProgressBarV, +.claro .dijitSliderRtl .dijitSliderRemainingBarV, +.claro .dijitSliderRtl .dijitSliderBottomBumper { + background-position: bottom right; +} + +.claro .dijitSliderRtl .dijitSliderLeftBumper { + border-left-width: 0; + border-right-width: 1px; +} + +.claro .dijitSliderRtl .dijitSliderRightBumper { + border-left-width: 1px; + border-right-width: 0; +} + +.claro .dijitSliderRtl .dijitSliderIncrementIconH { + background-position:-357px 50%; +} + +.claro .dijitSliderRtl .dijitSliderDecrementIconH { + background-position:-251px 50%; +} diff --git a/lib/dijit/themes/claro/images/loading.gif b/lib/dijit/themes/claro/images/loading.gif deleted file mode 100644 index 6e7c8e5ec..000000000 Binary files a/lib/dijit/themes/claro/images/loading.gif and /dev/null differ diff --git a/lib/dijit/themes/claro/images/tooltip.png b/lib/dijit/themes/claro/images/tooltip.png index aca14988a..2b222739c 100644 Binary files a/lib/dijit/themes/claro/images/tooltip.png and b/lib/dijit/themes/claro/images/tooltip.png differ diff --git a/lib/dijit/themes/claro/images/tooltipGradient.png b/lib/dijit/themes/claro/images/tooltipGradient.png new file mode 100644 index 000000000..ce4860e79 Binary files /dev/null and b/lib/dijit/themes/claro/images/tooltipGradient.png differ diff --git a/lib/dijit/themes/claro/layout/AccordionContainer.css b/lib/dijit/themes/claro/layout/AccordionContainer.css index 77b8bd967..f76947959 100644 --- a/lib/dijit/themes/claro/layout/AccordionContainer.css +++ b/lib/dijit/themes/claro/layout/AccordionContainer.css @@ -1,65 +1,124 @@ - +/* Accordion + * + * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer) + * and the title inside of it (dijitAccordionTitle). There are 4 basic states to style: + * + * 1. closed pane (and default styling): + * .dijitAccordionInnerContainer - container for each accordion child + * .dijitAccordionTitle - title for each accordion child + * + * 2. active closed pane (ie, mouse down on a title bar) + * .dijitAccordionInnerContainerActive - for background-color, border + * .dijitAccordionInnerContainerActive dijitAccordionTitle - for text color + * + * 3. open pane (expanded child) + * .dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane) + * setting a margin so that there's blue trim all the way around the child + * + * These rules need to override the closed pane active: + * + * .dijitAccordionInnerContainerSelected - for background-color, border + * .dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color + * + * 4. hovered pane, open or closed + * The selectors below affect hovering over both a closed pane (ie, hovering a title bar), + * and hovering over an open pane. Also, treat mouse down on an open pane as a hover: + * + * .dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border + * .dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color + */ .claro .dijitAccordionContainer { - border:none; + border: none; } .claro .dijitAccordionInnerContainer { - background-color: #e6e6e7; - border:solid 1px #b5bcc7; - margin-bottom:1px; - -webkit-transition-property:background-color,border; - -webkit-transition-duration:.3s; - -webkit-transition-timing-function:linear; + background-color: #efefef; + /* gray, for closed pane */ + + border: solid 1px #b5bcc7; + margin-bottom: 1px; + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + transition-property: background-color, border; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + transition-timing-function: linear; } .claro .dijitAccordionTitle { - background-color: transparent; - background-image: url("images/accordion.png"); - background-position:0px 0px; - background-repeat:repeat-x; - padding: 5px 7px 2px 7px; - min-height:17px; - color:#4a4a4a; + background-color: transparent; + /* pick up color from dijitAccordionInnerContainer */ + + background-image: url("images/accordion.png"); + background-position: 0 0; + background-repeat: repeat-x; + padding: 5px 7px 2px 7px; + min-height: 17px; + color: #4a4a4a; +} +.claro .dijitAccordionTitleHover { + color: #000000; } .dj_ie6 .claro .dijitAccordionTitle { - background-image: none; + background-image: none; +} +.claro .dijitAccordionContainer .dijitAccordionChildWrapper { + /* this extends the blue trim styling of the title bar to wrapping around the node. + * done by setting margin + */ + + background-color: #ffffff; + border: 1px solid #769dc0; + margin: 0 2px 2px; } .claro .dijitAccordionContainer .dijitAccordionContainer-child { - background-color:#fff; - - border:1px solid #92bce1 !important; - margin: 0px 2px 2px; - padding: 9px; + /* this is affecting the child widget itself */ + + padding: 9px; } +/* Active state for closed pane */ .claro .dijitAccordionInnerContainerActive { - border:1px solid #769DC0; - background-color:#7dbefa; - -webkit-transition-duration:.1s; + border: 1px solid #769dc0; + background-color: #7dbefa; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; } .claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { - background-position:0px -136px; - color:#000; + background-position: 0 -136px; + color: #000000; } +/* Open (a.k.a. selected) pane */ .claro .dijitAccordionInnerContainerSelected { - border-color:#92bce1; - background-color: #cde8ff; + border-color: #769dc0; + background-color: #cfe5fa; } .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { - color:#000; - background-position: 0 0; + color: #000000; + background-position: 0 0; + /* avoid effect when clicking the title of the open pane */ + } +/* Hovering open or closed pane */ .claro .dijitAccordionInnerContainerHover dijitAccordionTitle { - - color:#000; + /* both open and closed */ + + color: #000000; } -.claro .dijitAccordionInnerContainerHover, -.claro .dijitAccordionInnerContainerSelectedActive { - border:1px solid #769DC0; - background-color:#9dcfff; - -webkit-transition-duration:.2s; +.claro .dijitAccordionInnerContainerHover, .claro .dijitAccordionInnerContainerSelectedActive { + /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */ + + border: 1px solid #769dc0; + background-color: #abd6ff; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; } -.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionContainer-child, -.claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionContainer-child { - background-color:#ffffff; - border:1px solid #769DC0 !important; - -webkit-box-shadow:inset 0px 0px 3px rgba(0, 0, 0, .25); - -moz-box-shadow:inset 0px 0px 3px rgba(0, 0, 0, .25); +.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper { + background-color: #ffffff; + border: 1px solid #769dc0 !important; + -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); + -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); + box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); } diff --git a/lib/dijit/themes/claro/layout/AccordionContainer.less b/lib/dijit/themes/claro/layout/AccordionContainer.less new file mode 100644 index 000000000..01f4427f4 --- /dev/null +++ b/lib/dijit/themes/claro/layout/AccordionContainer.less @@ -0,0 +1,116 @@ +/* Accordion + * + * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer) + * and the title inside of it (dijitAccordionTitle). There are 4 basic states to style: + * + * 1. closed pane (and default styling): + * .dijitAccordionInnerContainer - container for each accordion child + * .dijitAccordionTitle - title for each accordion child + * + * 2. active closed pane (ie, mouse down on a title bar) + * .dijitAccordionInnerContainerActive - for background-color, border + * .dijitAccordionInnerContainerActive dijitAccordionTitle - for text color + * + * 3. open pane (expanded child) + * .dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane) + * setting a margin so that there's blue trim all the way around the child + * + * These rules need to override the closed pane active: + * + * .dijitAccordionInnerContainerSelected - for background-color, border + * .dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color + * + * 4. hovered pane, open or closed + * The selectors below affect hovering over both a closed pane (ie, hovering a title bar), + * and hovering over an open pane. Also, treat mouse down on an open pane as a hover: + * + * .dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border + * .dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color + */ + +@import "../variables"; + +.claro .dijitAccordionContainer { + border:none; +} +.claro .dijitAccordionInnerContainer { + background-color: @unselected-background-color; /* gray, for closed pane */ + border:solid 1px @border-color; + margin-bottom:1px; + .transition-property(background-color,border); + .transition-duration(.3s); + .transition-timing-function(linear); +} +.claro .dijitAccordionTitle { + background-color: transparent; /* pick up color from dijitAccordionInnerContainer */ + background-image: url("images/accordion.png"); + background-position:0 0; + background-repeat:repeat-x; + padding: 5px 7px 2px 7px; + min-height:17px; + color:@unselected-text-color; +} +.claro .dijitAccordionTitleHover { + color:@hovered-text-color; +} +.dj_ie6 .claro .dijitAccordionTitle { + background-image: none; +} +.claro .dijitAccordionContainer .dijitAccordionChildWrapper { + /* this extends the blue trim styling of the title bar to wrapping around the node. + * done by setting margin + */ + background-color:@pane-background-color; + border:1px solid @selected-border-color; + margin: 0 2px 2px; +} + +.claro .dijitAccordionContainer .dijitAccordionContainer-child { + /* this is affecting the child widget itself */ + padding: 9px; +} + +/* Active state for closed pane */ + +.claro .dijitAccordionInnerContainerActive { + border:1px solid @selected-border-color; + background-color:@pressed-background-color; + .transition-duration(.1s); +} +.claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { + background-position:0 -136px; + color:@selected-text-color; +} + +/* Open (a.k.a. selected) pane */ + +.claro .dijitAccordionInnerContainerSelected { + border-color:@selected-border-color; + background-color: @selected-background-color; +} +.claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { + color:@selected-text-color; + background-position: 0 0; /* avoid effect when clicking the title of the open pane */ +} + +/* Hovering open or closed pane */ + +.claro .dijitAccordionInnerContainerHover dijitAccordionTitle { + /* both open and closed */ + color:@hovered-text-color; +} + +.claro .dijitAccordionInnerContainerHover, +.claro .dijitAccordionInnerContainerSelectedActive { + /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */ + border:1px solid @hovered-border-color; + background-color:@hovered-background-color; + .transition-duration(.2s); +} + +.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, +.claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper { + background-color:@pane-background-color; + border:1px solid @hovered-border-color !important; + .box-shadow(inset 0 0 3px rgba(0, 0, 0, .25)); +} diff --git a/lib/dijit/themes/claro/layout/BorderContainer.css b/lib/dijit/themes/claro/layout/BorderContainer.css index 333a45890..ede2a56c5 100644 --- a/lib/dijit/themes/claro/layout/BorderContainer.css +++ b/lib/dijit/themes/claro/layout/BorderContainer.css @@ -1,77 +1,109 @@ +/* BorderContainer +Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable. + +Styling the BorderContainer widget consists of the following: + +.dijitBorderContainer - for border and padding of the entire border container + +.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer. + +.dijitBorderContainer-dijitTabContainerTop, +.dijitBorderContainer-dijitTabContainerBottom, +.dijitBorderContainer-dijitTabContainerLeft, +.dijitBorderContainer-dijitTabContainerRight, +.dijitBorderContainer-dijitAccordionContainer -for border of the border containers within TabContainer or AccordionContainer widget + +.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers + +Splitters and gutters: + +.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter +.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter +.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter +.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter +.dijitSplitterHHover - for background-color of a hovered horizontal splitter +.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter +.dijitSplitterVHover - for background-color of a hovered vertical splitter +.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter +.dijitSplitterHActive - for background-color of an active horizontal splitter +.dijitSplitterVActive - for background-color of an active horizontal splitter +*/ .claro .dijitBorderContainer { - border: 1px #b5bcc7 solid; - padding: 5px; + /* matches the width of the splitters between panes */ + + padding: 5px; } -.claro .dijitSplitContainer-child, -.claro .dijitBorderContainer-child { - - border: 1px #b5bcc7 solid; +.claro .dijitSplitContainer-child, .claro .dijitBorderContainer-child { + /* By default put borders on all children of BorderContainer, + * to give illusion of borders on the splitters themselves. + */ + + border: 1px #b5bcc7 solid; } .claro .dijitBorderContainer-dijitTabContainerTop, .claro .dijitBorderContainer-dijitTabContainerBottom, .claro .dijitBorderContainer-dijitTabContainerLeft, .claro .dijitBorderContainer-dijitTabContainerRight, .claro .dijitBorderContainer-dijitAccordionContainer { - - border: none; + /* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper), + * so override rule setting border on domNode + */ + + border: none; } .claro .dijitBorderContainer-dijitBorderContainer { - - border: 1px #c0ccdf solid; - padding: 5px; + /* make nested BorderContainers look like a single big widget with lots of splitters */ + + border: 0; + padding: 0; } -.claro .dijitSplitterH, -.claro .dijitGutterH { - background:none; - border:0; - height:5px; +/* Splitters and gutters */ +.claro .dijitSplitterH, .claro .dijitGutterH { + background: none; + border: 0; + height: 5px; } .claro .dijitSplitterH .dijitSplitterThumb { - background:#dde2e9 none; - height:1px; - top:2px; - width:19px; + background: #b5bcc7 none; + height: 1px; + top: 2px; + width: 19px; } -.claro .dijitSplitterV, -.claro .dijitGutterV { - background:none; - border:0; - width:5px; - margin: 0; +.claro .dijitSplitterV, .claro .dijitGutterV { + background: none; + border: 0; + width: 5px; + margin: 0; } .claro .dijitSplitterV .dijitSplitterThumb { - background:#dde2e9 none; - height:19px; - left:2px; - width:1px; - margin: 0; + background: #b5bcc7 none; + height: 19px; + left: 2px; + width: 1px; + margin: 0; } +/* hovered splitter */ .claro .dijitSplitterHHover { - font-size: 1px; - background: url("images/splitterHorizontalHover.png") no-repeat center top; + font-size: 1px; + background: url("images/splitterHorizontalHover.png") no-repeat center top; } .claro .dijitSplitterHHover .dijitSplitterThumb { - background:#769dc0 none; + background: #769dc0 none; } .claro .dijitSplitterVHover { - font-size: 1px; - background: url("images/splitterVerticalHover.png") no-repeat center left; + font-size: 1px; + background: url("images/splitterVerticalHover.png") no-repeat center left; } .claro .dijitSplitterVHover .dijitSplitterThumb { - background:#769dc0 none; -} -.dj_ie6 .dijitSplitterHHover, -.dj_ie6 .claro .dijitSplitterVHover { - background-color:#cfe9ff; - background-image:none; + background: #769dc0 none; } -.claro .dijitSplitterHActive { - font-size: 1px; - background-color:#abd4fb; - border-top:blue; +.dj_ie6 .dijitSplitterHHover, .dj_ie6 .claro .dijitSplitterVHover { + background-color: #cfe5fa; + background-image: none; } -.claro .dijitSplitterVActive { - font-size: 1px; - background-color:#abd4fb; +/* active splitter */ +.claro .dijitSplitterHActive, .claro .dijitSplitterVActive { + font-size: 1px; + background-color: #abd6ff; } diff --git a/lib/dijit/themes/claro/layout/BorderContainer.less b/lib/dijit/themes/claro/layout/BorderContainer.less new file mode 100644 index 000000000..17c4b63cb --- /dev/null +++ b/lib/dijit/themes/claro/layout/BorderContainer.less @@ -0,0 +1,128 @@ +/* BorderContainer + +Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable. + +Styling the BorderContainer widget consists of the following: + +.dijitBorderContainer - for border and padding of the entire border container + +.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer. + +.dijitBorderContainer-dijitTabContainerTop, +.dijitBorderContainer-dijitTabContainerBottom, +.dijitBorderContainer-dijitTabContainerLeft, +.dijitBorderContainer-dijitTabContainerRight, +.dijitBorderContainer-dijitAccordionContainer -for border of the border containers within TabContainer or AccordionContainer widget + +.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers + +Splitters and gutters: + +.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter +.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter +.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter +.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter +.dijitSplitterHHover - for background-color of a hovered horizontal splitter +.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter +.dijitSplitterVHover - for background-color of a hovered vertical splitter +.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter +.dijitSplitterHActive - for background-color of an active horizontal splitter +.dijitSplitterVActive - for background-color of an active horizontal splitter +*/ + +@import "../variables"; + +.claro .dijitBorderContainer { + /* matches the width of the splitters between panes */ + padding: 5px; +} + +.claro .dijitSplitContainer-child, +.claro .dijitBorderContainer-child { + /* By default put borders on all children of BorderContainer, + * to give illusion of borders on the splitters themselves. + */ + border: 1px @border-color solid; +} + +.claro .dijitBorderContainer-dijitTabContainerTop, +.claro .dijitBorderContainer-dijitTabContainerBottom, +.claro .dijitBorderContainer-dijitTabContainerLeft, +.claro .dijitBorderContainer-dijitTabContainerRight, +.claro .dijitBorderContainer-dijitAccordionContainer { + /* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper), + * so override rule setting border on domNode + */ + border: none; + +} +.claro .dijitBorderContainer-dijitBorderContainer { + /* make nested BorderContainers look like a single big widget with lots of splitters */ + border: 0; + padding: 0; +} + +/* Splitters and gutters */ + +.claro .dijitSplitterH, +.claro .dijitGutterH { + background:none; + border:0; + height:5px; +} + +.claro .dijitSplitterH .dijitSplitterThumb { + background:@border-color none; + height:1px; + top:2px; + width:19px; +} + +.claro .dijitSplitterV, +.claro .dijitGutterV { + background:none; + border:0; + width:5px; + margin: 0; +} + +.claro .dijitSplitterV .dijitSplitterThumb { + background:@border-color none; + height:19px; + left:2px; + width:1px; + margin: 0; +} + +/* hovered splitter */ +.claro .dijitSplitterHHover { + font-size: 1px; + background: url("images/splitterHorizontalHover.png") no-repeat center top; +} + + +.claro .dijitSplitterHHover .dijitSplitterThumb { + background:@hovered-border-color none; +} + +.claro .dijitSplitterVHover { + font-size: 1px; + background: url("images/splitterVerticalHover.png") no-repeat center left; +} + +.claro .dijitSplitterVHover .dijitSplitterThumb { + background:@hovered-border-color none; +} + +.dj_ie6 .dijitSplitterHHover, +.dj_ie6 .claro .dijitSplitterVHover { + background-color: @splitter-hovered-background-color; + background-image:none; +} + +/* active splitter */ +.claro .dijitSplitterHActive, +.claro .dijitSplitterVActive { + font-size: 1px; + background-color:@splitter-dragged-background-color; +} diff --git a/lib/dijit/themes/claro/layout/ContentPane.css b/lib/dijit/themes/claro/layout/ContentPane.css index f9f543cd1..a7753de1d 100644 --- a/lib/dijit/themes/claro/layout/ContentPane.css +++ b/lib/dijit/themes/claro/layout/ContentPane.css @@ -1,17 +1,38 @@ - +/* ContentPane + * + * .dijitContentPane + * set padding for basic content pane + * + * Nested layouts: + * + * .dijitTabContainerTop-dijitContentPane, + * .dijitTabContainerLeft-dijitContentPane, + * .dijitTabContainerBottom-dijitContentPane, + * .dijitTabContainerRight-dijitContentPane + * set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container + * + * .dijitAccordionContainer-dijitContentPane + * set background-color and padding of ContentPane nested within Accordion + * + * .dijitSplitContainer-dijitContentPane, + * set background-color and padding of ContentPane nested within a SplitContainer + * + * .dijitBorderContainer-dijitContentPane + * set background-color and padding of ContentPane nested within a BorderContainer + */ .claro .dijitContentPane { - padding: 8px; -} + padding: 8px; +} +/* nested layouts */ .claro .dijitTabContainerTop-dijitContentPane, .claro .dijitTabContainerLeft-dijitContentPane, .claro .dijitTabContainerBottom-dijitContentPane, .claro .dijitTabContainerRight-dijitContentPane, .claro .dijitAccordionContainer-dijitContentPane { - background-color: #fff; - padding: 8px; + background-color: #ffffff; + padding: 8px; } -.claro .dijitSplitContainer-dijitContentPane, -.claro .dijitBorderContainer-dijitContentPane { - background-color: #fff; - padding: 8px; +.claro .dijitSplitContainer-dijitContentPane, .claro .dijitBorderContainer-dijitContentPane { + background-color: #ffffff; + padding: 8px; } diff --git a/lib/dijit/themes/claro/layout/ContentPane.less b/lib/dijit/themes/claro/layout/ContentPane.less new file mode 100644 index 000000000..83329bdb7 --- /dev/null +++ b/lib/dijit/themes/claro/layout/ContentPane.less @@ -0,0 +1,43 @@ +/* ContentPane + * + * .dijitContentPane + * set padding for basic content pane + * + * Nested layouts: + * + * .dijitTabContainerTop-dijitContentPane, + * .dijitTabContainerLeft-dijitContentPane, + * .dijitTabContainerBottom-dijitContentPane, + * .dijitTabContainerRight-dijitContentPane + * set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container + * + * .dijitAccordionContainer-dijitContentPane + * set background-color and padding of ContentPane nested within Accordion + * + * .dijitSplitContainer-dijitContentPane, + * set background-color and padding of ContentPane nested within a SplitContainer + * + * .dijitBorderContainer-dijitContentPane + * set background-color and padding of ContentPane nested within a BorderContainer + */ + +@import "../variables"; + +.claro .dijitContentPane { + padding: 8px; +} + +/* nested layouts */ +.claro .dijitTabContainerTop-dijitContentPane, +.claro .dijitTabContainerLeft-dijitContentPane, +.claro .dijitTabContainerBottom-dijitContentPane, +.claro .dijitTabContainerRight-dijitContentPane, +.claro .dijitAccordionContainer-dijitContentPane { + background-color: @pane-background-color; + padding: 8px; +} +.claro .dijitSplitContainer-dijitContentPane, +.claro .dijitBorderContainer-dijitContentPane { + background-color: @pane-background-color; + padding: 8px; +} \ No newline at end of file diff --git a/lib/dijit/themes/claro/layout/TabContainer.css b/lib/dijit/themes/claro/layout/TabContainer.css index 95fe2c262..030e4b761 100644 --- a/lib/dijit/themes/claro/layout/TabContainer.css +++ b/lib/dijit/themes/claro/layout/TabContainer.css @@ -1,348 +1,434 @@ - +/* TabContainer + * + * Styling TabContainer means styling the TabList and Its content container (dijitTitlePane) + * + * Tab List: (including 4 kinds of tab location) + * .dijitTabContainerTop-tabs - tablist container at top + * .dijitTabContainerBottom-tabs - tablist container at bottom + * .dijitTabContainerLeft-tabs - tablist container at left + * .dijitTabContainerRight-tabs - tablist container at right + * + * Tab Strip Button: + * .dijitTabStripIcon - tab strip button icon + * .dijitTabStripMenuIcon - down arrow icon position + * .dijitTabStripSlideLeftIcon - left arrow icon position + * .dijitTabStripSlideRightIcon - right arrow icon position + * + * .tabStripButtonDisabled - styles for disabled tab strip buttons + * + * Tab Button: + * .dijitTabContainerTop-tabs .dijitTabInnerDiv/.dijitTabContent - styles for top tab button container + * .dijitTabContainerBottom-tabs .dijitTabInnerDiv/.dijitTabContent - styles for bottom tab button container + * .dijitTabContainerLeft-tabs .dijitTabInnerDiv/.dijitTabContent - styles for left tab button container + * .dijitTabContainerRight-tabs .dijitTabInnerDiv/.dijitTabContent - styles for right tab button container + * + * .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent + * - styles for selected status of top tab button + * same to Bottom, Left, Right Tabs + * + * .dijitTabHover .dijitTabInnerDiv - styles when mouse hover on tab buttons + * .dijitTabActive .dijitTabInnerDiv - styles when mouse down on tab buttons + * .dijitTabChecked .dijitTabInnerDiv - styles when on buttons of selected tab + * + * .dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs + * .dijitTabCloseButtonHover - styles when mouse hover on close action button + * .dijitTabCloseButtonActive - styles when mouse down on close action button + * + * Tab Button: (checked status) + * + * Tab Content Container: + * .dijitTabContainerTop-dijitContentPane + * .dijitTabContainerBottom-dijitContentPane + * .dijitTabContainerLeft-dijitContentPane + * .dijitTabContainerRight-dijitContentPane - for background and padding + * + * Nested Tabs: + * .dijitTabContainerNested - Container for nested tabs + * .dijitTabContainerTabListNested - tab list container for nested tabs + */ +/*** some common features ***/ .claro .dijitTabPaneWrapper { - background:#fff; + background: #ffffff; } .claro .dijitTabPaneWrapper, .claro .dijitTabContainerTop-tabs, .claro .dijitTabContainerBottom-tabs, .claro .dijitTabContainerLeft-tabs, .claro .dijitTabContainerRight-tabs { - - border-color: #b5bcc7; + /* todo: add common class name for this div */ + + border-color: #b5bcc7; } .claro .dijitTabCloseButton { - background: url("images/tabClose.png") no-repeat; - width: 14px; - height: 14px; - margin-left: 5px; - margin-right:-3px; + background: url("images/tabClose.png") no-repeat; + width: 14px; + height: 14px; + margin-left: 5px; + margin-right: -5px; } .claro .dijitTabCloseButtonHover { - background-position:-14px; + background-position: -14px; } .claro .dijitTabCloseButtonActive { - background-position:-28px; + background-position: -28px; } .claro .dijitTabSpacer { - - display: none; + /* set the spacer invisible. note that height:0 doesn't work on IE/quirks, it's still 10px. */ + + display: none; } .claro .dijitTabInnerDiv { - background-color:#e6e6e7; - -webkit-transition-property:background-color, border; - -webkit-transition-duration:.35s; - color:#4a4a4a; + background-color: #efefef; + -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; + color: #4a4a4a; } .claro .dijitTabHover .dijitTabInnerDiv { - background-color:#a9d6ff; - -webkit-transition-duration:.25s; - color:#000; + background-color: #abd6ff; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; + color: #000000; } .claro .dijitTabActive .dijitTabInnerDiv { - background-color:#8bc4f9; - color:#000; - -webkit-transition-duration:.1s; + background-color: #7dbefa; + color: #000000; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; } .claro .dijitTabChecked .dijitTabInnerDiv { - background-color:#b2d4f3; - color:#000; + background-color: #cfe5fa; + color: #000000; } .claro .dijitTabContent { - border: 1px solid #b5bcc7; + border: 1px solid #b5bcc7; +} +.claro .dijitTabHover .dijitTabContent { + border-color: #769dc0; } -.claro .dijitTabHover .dijitTabContent, .claro .dijitTabActive .dijitTabContent { - border-color: #769dc0; + border-color: #769dc0; } .claro .dijitTabChecked .dijitTabContent { - color:#000; - border-color: #b5bcc7; + color: #000000; + border-color: #b5bcc7; } .claro .tabStripButton .dijitTabInnerDiv { - background-color: transparent; + background-color: transparent; } .claro .tabStripButton .dijitTabContent { - border: none; + border: none; } +/*** end common ***/ +/*************** top tab ***************/ .claro .dijitTabContainerTop-tabs .dijitTab { - top: 1px; - margin-right: 1px; - padding-top: 3px; + top: 1px; + /* used for overlap */ + + margin-right: 1px; + padding-top: 3px; } .dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab { - top: 3px; + top: 3px; } +/* for top tab padding. change height when status changes */ .claro .dijitTabContainerTop-tabs .dijitTabContent { - padding:3px 8px 3px 4px; - border-bottom: 1px; - background-image:url("images/tabTop.png"); - background-position:0px 0px; - background-repeat:repeat-x; - min-width: 60px; - text-align: center; + padding: 3px 6px; + border-bottom-width: 0; + background-image: url("images/tabTop.png"); + background-position: 0 0; + background-repeat: repeat-x; + min-width: 60px; + text-align: center; } .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { - padding-bottom: 4px; - padding-top: 6px; -} -.dj_ie .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { - border-bottom: none; + padding-bottom: 4px; + padding-top: 6px; } +/* normal status */ .claro .dijitTabContainerTop-tabs .dijitTabInnerDiv { - background-image:url("images/tabTop.png"); - background-position:0px -248px; - background-position:bottom; - background-repeat:repeat-x; - box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); - -webkit-box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); - -moz-box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); -} + background-image: url("images/tabTop.png"); + background-position: 0 -248px; + background-position: bottom; + background-repeat: repeat-x; + -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04); + -moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04); +} +/* checked status */ .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { - background-image:none; - box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); - -webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); + background-image: none; + -webkit-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); } .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { - background-position:0px -102px; - background-repeat:repeat-x; + background-position: 0 -102px; + background-repeat: repeat-x; } +/** end top tab **/ +/*************** bottom tab ***************/ .claro .dijitTabContainerBottom-tabs .dijitTab { - top: -1px; - margin-right: 1px; + top: -1px; + /* used for overlap */ + + margin-right: 1px; } +/* calculate the position and size */ .claro .dijitTabContainerBottom-tabs .dijitTabContent { - padding:3px 8px 4px 4px; - border-top: none; - background-image: url("images/tabBottom.png"); - background-position:0px -249px; - background-repeat: repeat-x; - background-position:bottom; - min-width: 60px; - text-align: center; + padding: 3px 6px; + border-top-width: 0; + background-image: url("images/tabBottom.png"); + background-position: 0 -249px; + background-repeat: repeat-x; + background-position: bottom; + min-width: 60px; + text-align: center; } .claro .dijitTabContainerBottom-tabs .dijitTab { - padding-bottom: 3px; + padding-bottom: 3px; } +/* normal status */ .claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv { - background-image: url("images/tabBottom.png"); - background-position: top; - background-repeat: repeat-x; - box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); - -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); - -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); - -} + background-image: url("images/tabBottom.png"); + background-position: top; + background-repeat: repeat-x; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); +} +/* checked status */ .claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent { - padding-bottom: 7px; - padding-top: 4px; - background-position:0px -119px; + padding-bottom: 7px; + padding-top: 4px; + background-position: 0 -119px; } .claro .dijitTabContainerBottom-tabs .dijitTabChecked { - padding-bottom: 0; + padding-bottom: 0; } .claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv { - background-image:none; - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); - -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); + background-image: none; + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } +/** end bottom tab **/ +/*************** left tab ***************/ .claro .dijitTabContainerLeft-tabs .dijitTab { - left: 1px; - margin-bottom: 1px; + border-right-width: 0; + left: 1px; + /* used for overlap */ + + margin-bottom: 1px; } +/* normal status */ .claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv { - background-image: url("images/tabLeft.png"); - background-position: -347px -340px; - background-repeat: repeat-y; + background-image: url("images/tabLeft.png"); + background-position: -347px -340px; + background-repeat: repeat-y; } .claro .dijitTabContainerLeft-tabs .dijitTabContent { - padding:3px 8px 4px 4px; - background-image: url("images/tabLeft.png"); - background-repeat: repeat-y; - background-position:0px 0px; + padding: 3px 8px 4px 4px; + background-image: url("images/tabLeft.png"); + background-repeat: repeat-y; + background-position: 0 0; } +/* checked status */ .claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent { - padding-right: 9px; - border-right: none; - background-image: none; + padding-right: 9px; + border-right: none; + background-image: none; } .claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position:0px -179px; - background-repeat:repeat-y; - box-shadow: -1px 0px 2px rgba(0, 0, 0, .05); - -webkit-box-shadow: -1px 0px 2px rgba(0, 0, 0, .05); - -moz-box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.05); -} + background-position: 0 -179px; + background-repeat: repeat-y; + -webkit-box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05); + box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05); +} +/** end left tab **/ +/*************** right tab ***************/ .claro .dijitTabContainerRight-tabs .dijitTab { - left: -1px; - margin-bottom: 1px; + border-left-width: 0; + left: -1px; + /* used for overlap */ + + margin-bottom: 1px; } +/* normal status */ .claro .dijitTabContainerRight-tabs .dijitTabInnerDiv { - background-image: url("images/tabRight.png"); - background-repeat: repeat-y; - background-position: -1px -347px; + background-image: url("images/tabRight.png"); + background-repeat: repeat-y; + background-position: -1px -347px; } .claro .dijitTabContainerRight-tabs .dijitTabContent { - padding:3px 8px 4px 4px; - background-image: url("images/tabRight.png"); - background-position:right top; - background-repeat: repeat-y; + padding: 3px 8px 4px 4px; + background-image: url("images/tabRight.png"); + background-position: right top; + background-repeat: repeat-y; } +/* checked status */ .claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent { - padding-left: 5px; - border-left: none; - background-image: none; + padding-left: 5px; + border-left: none; + background-image: none; } .claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position:-348px -179px; - box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); - -webkit-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); - -moz-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); -} -.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerTop-tabs .dijitTabContent { - border-radius: 2px 2px 0px 0px; - -moz-border-radius: 2px 2px 0px 0px; - -webkit-border-top-left-radius:2px; - -webkit-border-top-right-radius:2px; -} -.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerBottom-tabs .dijitTabContent{ - border-radius: 0px 0px 2px 2px; - -moz-border-radius: 0px 0px 2px 2px; - -webkit-border-bottom-right-radius:2px; - -webkit-border-bottom-left-radius:2px; -} -.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerLeft-tabs .dijitTabContent{ - border-radius: 2px 0px 0px 2px; - -moz-border-radius: 2px 0px 0px 2px; - -webkit-border-top-left-radius:2px; - -webkit-border-bottom-left-radius:2px; -} -.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerRight-tabs .dijitTabContent{ - border-radius: 0px 2px 2px 0px; - -moz-border-radius: 0px 2px 2px 0px; - -webkit-border-top-right-radius:2px; - -webkit-border-bottom-right-radius:2px; -} + background-position: -348px -179px; + -webkit-box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07); + -moz-box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07); + box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07); +} +/** end right tab **/ +/** round corner **/ +.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, .claro .dijitTabContainerTop-tabs .dijitTabContent { + -moz-border-radius: 2px 2px 0 0; + border-radius: 2px 2px 0 0; +} +.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, .claro .dijitTabContainerBottom-tabs .dijitTabContent { + -moz-border-radius: 0 0 2px 2px; + border-radius: 0 0 2px 2px; +} +.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, .claro .dijitTabContainerLeft-tabs .dijitTabContent { + -moz-border-radius: 2px 0 0 2px; + border-radius: 2px 0 0 2px; +} +.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, .claro .dijitTabContainerRight-tabs .dijitTabContent { + -moz-border-radius: 0 2px 2px 0; + border-radius: 0 2px 2px 0; +} +/************ left/right scroll buttons + menu button ************/ .claro .tabStripButton { - background-color:#deecf9; - border: 1px solid #b5bcc7; + background-color: #e9f4fe; + border: 1px solid #b5bcc7; } .claro .dijitTabListContainer-top .tabStripButton { - padding: 4px 3px; - margin-top:7px; - background-image: url("images/tabTop.png"); - background-position:0px 0px; + padding: 4px 3px; + margin-top: 7px; + background-image: url("images/tabTop.png"); + background-position: 0 0; } .claro .dijitTabListContainer-bottom .tabStripButton { - padding:5px 3px; - margin-bottom:4px; - background-image: url("images/tabTop.png"); - background-position:0px -248px; - background-position:bottom; + padding: 5px 3px; + margin-bottom: 4px; + background-image: url("images/tabTop.png"); + background-position: 0 -248px; + background-position: bottom; } .claro .tabStripButtonHover { - background-color:#a6d2fb; + background-color: #abd6ff; } .claro .tabStripButtonActive { - background-color:#7dbefa; + background-color: #7dbefa; } .claro .dijitTabStripIcon { - height:15px; - width:15px; - margin: 0 auto; - background:url("../form/images/buttonArrows.png") no-repeat -75px 50%; - background-color: transparent; + height: 15px; + width: 15px; + margin: 0 auto; + background: url("../form/images/buttonArrows.png") no-repeat -75px 50%; + background-color: transparent; } -.claro .dijitTabStripSlideRightIcon{ - background-position: -24px 50%; +.claro .dijitTabStripSlideRightIcon { + background-position: -24px 50%; } .claro .dijitTabStripMenuIcon { - background-position: -51px 50%; + background-position: -51px 50%; } -.claro .dijitTabListContainer-top .tabStripButtonDisabled, -.claro .dijitTabListContainer-bottom .tabStripButtonDisabled { - background-color:#dddddd; - border:1px solid #c9c9c9; +/*disabled styles for tab strip buttons*/ +.claro .dijitTabListContainer-top .tabStripButtonDisabled, .claro .dijitTabListContainer-bottom .tabStripButtonDisabled { + background-color: #d3d3d3; + border: 1px solid #b5bcc7; + /* to match border of TabContainer itself */ + } .claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon { - background-position:-175px 50%; + background-position: -175px 50%; } .claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon { - background-position: -124px 50%; + background-position: -124px 50%; } .claro .tabStripButtonDisabled .dijitTabStripMenuIcon { - background-position: -151px 50%; -} + background-position: -151px 50%; +} +/* Nested Tabs */ .claro .dijitTabContainerNested .dijitTabListWrapper { - height: auto; + height: auto; } .claro .dijitTabContainerNested .dijitTabContainerTop-tabs { - border-bottom:solid 1px #b5bcc7; - padding:1px 2px 4px; - margin-top:-2px; + border-bottom: solid 1px #b5bcc7; + padding: 1px 2px 4px; + margin-top: -2px; } .claro .dijitTabContainerTabListNested .dijitTabContent { - background:rgba(255, 255, 255, 0) none repeat scroll 0 0; - border: none; - padding: 4px; - border-color: rgba(118,157,192,0); - -webkit-transition-property:background-color, border-color; - -webkit-transition-duration:.3s; + background: rgba(255, 255, 255, 0) none repeat scroll 0 0; + border: none; + padding: 4px; + border-color: rgba(118, 157, 192, 0); + -webkit-transition-property: background-color, border-color; + -moz-transition-property: background-color, border-color; + transition-property: background-color, border-color; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + transition-duration: 0.3s; + -moz-border-radius: 2px; + border-radius: 2px; } .claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv { - - background: none; - border: none; - top: 0px; - box-shadow: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; + /* 4 element selector to override box-shadow setting from above rule: + * .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { ... } + */ + + background: none; + border: none; + top: 0; + /* to override top: 1px/-1px for normal tabs */ + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } .claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent { - background-color:#eaf4fc; - border-radius: 2px 2px 2px 2px; - -moz-border-radius: 2px 2px 2px 2px; - -webkit-border-radius:2px; - border:solid 1px #c8dff3; - padding: 3px; - webkit-transition-duration:.2s; + background-color: #e9f4fe; + border: solid 1px #cfe5fa; + padding: 3px; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; } .claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel { - text-decoration: none; + text-decoration: none; } .claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent { - border-radius: 2px 2px 2px 2px; - -moz-border-radius: 2px 2px 2px 2px; - -webkit-border-radius:2px; - border:solid 1px #a8c7e2; - padding: 3px; - background:#b9d9f5 url("images/tabNested.png") repeat-x; - -webkit-transition-duration:.1s; + border: solid 1px #769dc0; + padding: 3px; + background: #abd6ff url("images/tabNested.png") repeat-x; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; } .claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent { - border-radius: 2px 2px 2px 2px; - -moz-border-radius: 2px 2px 2px 2px; - -webkit-border-radius:2px; - padding: 3px; - border:solid 1px #a8c7e2; - background-position: 0px 105px; - background-color:#d4e8f9; + padding: 3px; + border: solid 1px #769dc0; + background-position: 0 105px; + background-color: #cfe5fa; } .claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel { - text-decoration: none; - background-image:none; + text-decoration: none; + background-image: none; } .claro .dijitTabPaneWrapperNested { - border: none; + border: none; + /* prevent double border */ + } .dj_ie6 .claro .dijitTabContent, .dj_ie6 .claro .dijitTabInnerDiv, .dj_ie6 .dijitTabListContainer-top .tabStripButton, -.dj_ie6 .dijitTabListContainer-bottom .tabStripButton{ - background-image: none; +.dj_ie6 .dijitTabListContainer-bottom .tabStripButton { + background-image: none; } diff --git a/lib/dijit/themes/claro/layout/TabContainer.less b/lib/dijit/themes/claro/layout/TabContainer.less new file mode 100644 index 000000000..691900eba --- /dev/null +++ b/lib/dijit/themes/claro/layout/TabContainer.less @@ -0,0 +1,408 @@ +/* TabContainer + * + * Styling TabContainer means styling the TabList and Its content container (dijitTitlePane) + * + * Tab List: (including 4 kinds of tab location) + * .dijitTabContainerTop-tabs - tablist container at top + * .dijitTabContainerBottom-tabs - tablist container at bottom + * .dijitTabContainerLeft-tabs - tablist container at left + * .dijitTabContainerRight-tabs - tablist container at right + * + * Tab Strip Button: + * .dijitTabStripIcon - tab strip button icon + * .dijitTabStripMenuIcon - down arrow icon position + * .dijitTabStripSlideLeftIcon - left arrow icon position + * .dijitTabStripSlideRightIcon - right arrow icon position + * + * .tabStripButtonDisabled - styles for disabled tab strip buttons + * + * Tab Button: + * .dijitTabContainerTop-tabs .dijitTabInnerDiv/.dijitTabContent - styles for top tab button container + * .dijitTabContainerBottom-tabs .dijitTabInnerDiv/.dijitTabContent - styles for bottom tab button container + * .dijitTabContainerLeft-tabs .dijitTabInnerDiv/.dijitTabContent - styles for left tab button container + * .dijitTabContainerRight-tabs .dijitTabInnerDiv/.dijitTabContent - styles for right tab button container + * + * .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent + * - styles for selected status of top tab button + * same to Bottom, Left, Right Tabs + * + * .dijitTabHover .dijitTabInnerDiv - styles when mouse hover on tab buttons + * .dijitTabActive .dijitTabInnerDiv - styles when mouse down on tab buttons + * .dijitTabChecked .dijitTabInnerDiv - styles when on buttons of selected tab + * + * .dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs + * .dijitTabCloseButtonHover - styles when mouse hover on close action button + * .dijitTabCloseButtonActive - styles when mouse down on close action button + * + * Tab Button: (checked status) + * + * Tab Content Container: + * .dijitTabContainerTop-dijitContentPane + * .dijitTabContainerBottom-dijitContentPane + * .dijitTabContainerLeft-dijitContentPane + * .dijitTabContainerRight-dijitContentPane - for background and padding + * + * Nested Tabs: + * .dijitTabContainerNested - Container for nested tabs + * .dijitTabContainerTabListNested - tab list container for nested tabs + */ + +@import "../variables"; + +/*** some common features ***/ +.claro .dijitTabPaneWrapper { + background:@pane-background-color; +} +.claro .dijitTabPaneWrapper, +.claro .dijitTabContainerTop-tabs, +.claro .dijitTabContainerBottom-tabs, +.claro .dijitTabContainerLeft-tabs, +.claro .dijitTabContainerRight-tabs { + /* todo: add common class name for this div */ + border-color: @border-color; +} +.claro .dijitTabCloseButton { + background: url("images/tabClose.png") no-repeat; + width: 14px; + height: 14px; + margin-left: 5px; + margin-right:-5px; +} +.claro .dijitTabCloseButtonHover { + background-position:-14px; +} +.claro .dijitTabCloseButtonActive { + background-position:-28px; +} +.claro .dijitTabSpacer { + /* set the spacer invisible. note that height:0 doesn't work on IE/quirks, it's still 10px. */ + display: none; +} +.claro .dijitTabInnerDiv { + background-color:@unselected-background-color; + .transition-property(background-color, border); + .transition-duration(.35s); + color:@unselected-text-color; +} +.claro .dijitTabHover .dijitTabInnerDiv { + background-color:@hovered-background-color; + .transition-duration(.25s); + color:@hovered-text-color; +} +.claro .dijitTabActive .dijitTabInnerDiv { + background-color:@pressed-background-color; + color:@selected-text-color; + .transition-duration(.1s); +} +.claro .dijitTabChecked .dijitTabInnerDiv { + background-color:@selected-background-color; + color:@selected-text-color; +} + +.claro .dijitTabContent { + border: 1px solid @border-color; +} +.claro .dijitTabHover .dijitTabContent { + border-color: @hovered-border-color; +} +.claro .dijitTabActive .dijitTabContent { + border-color: @pressed-border-color; +} +.claro .dijitTabChecked .dijitTabContent { + color:@selected-text-color; // todo: redundant with .claro .dijitTabChecked .dijitTabInnerDiv above? + border-color: @border-color; // don't use @selected-border-color because need to match border of TabContainer +} + +.claro .tabStripButton .dijitTabInnerDiv { + background-color: transparent; +} +.claro .tabStripButton .dijitTabContent { + border: none; +} +/*** end common ***/ + + +/*************** top tab ***************/ +.claro .dijitTabContainerTop-tabs .dijitTab { + top: 1px; /* used for overlap */ + margin-right: 1px; + padding-top: 3px; +} +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab { + top: 3px; +} +/* for top tab padding. change height when status changes */ +.claro .dijitTabContainerTop-tabs .dijitTabContent { + padding:3px 6px; + border-bottom-width: 0; + background-image:url("images/tabTop.png"); + background-position:0 0; + background-repeat:repeat-x; + min-width: 60px; + text-align: center; +} +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { + padding-bottom: 4px; + padding-top: 6px; +} + +/* normal status */ +.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv { + background-image:url("images/tabTop.png"); + background-position:0 -248px; + background-position:bottom; + background-repeat:repeat-x; + .box-shadow(0 -1px 1px rgba(0, 0, 0, 0.04)); +} + +/* checked status */ +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { + background-image:none; + .box-shadow(0 -1px 2px rgba(0, 0, 0, 0.05)); +} +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { + background-position:0 -102px; + background-repeat:repeat-x; +} +/** end top tab **/ + + +/*************** bottom tab ***************/ +.claro .dijitTabContainerBottom-tabs .dijitTab { + top: -1px; /* used for overlap */ + margin-right: 1px; +} +/* calculate the position and size */ +.claro .dijitTabContainerBottom-tabs .dijitTabContent { + padding:3px 6px; + border-top-width: 0; + background-image: url("images/tabBottom.png"); + background-position:0 -249px; + background-repeat: repeat-x; + background-position:bottom; + min-width: 60px; + text-align: center; +} +.claro .dijitTabContainerBottom-tabs .dijitTab { + padding-bottom: 3px; +} +/* normal status */ +.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv { + background-image: url("images/tabBottom.png"); + background-position: top; + background-repeat: repeat-x; + .box-shadow(0 1px 1px rgba(0, 0, 0, 0.04)); + +} + +/* checked status */ +.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent { + padding-bottom: 7px; + padding-top: 4px; + background-position:0 -119px; +} +.claro .dijitTabContainerBottom-tabs .dijitTabChecked { + padding-bottom: 0; +} +.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv { + background-image:none; + .box-shadow(0 1px 2px rgba(0, 0, 0, 0.05)); +} +/** end bottom tab **/ + +/*************** left tab ***************/ +.claro .dijitTabContainerLeft-tabs .dijitTab { + border-right-width: 0; + left: 1px; /* used for overlap */ + margin-bottom: 1px; +} +/* normal status */ +.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv { + background-image: url("images/tabLeft.png"); + background-position: -347px -340px; + background-repeat: repeat-y; +} +.claro .dijitTabContainerLeft-tabs .dijitTabContent { + padding:3px 8px 4px 4px; + background-image: url("images/tabLeft.png"); + background-repeat: repeat-y; + background-position:0 0; +} +/* checked status */ +.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent { + padding-right: 9px; + border-right: none; + background-image: none; +} +.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv { + background-position:0 -179px; + background-repeat:repeat-y; + .box-shadow(-1px 0 2px rgba(0, 0, 0, .05)); +} +/** end left tab **/ + +/*************** right tab ***************/ +.claro .dijitTabContainerRight-tabs .dijitTab { + border-left-width: 0; + left: -1px; /* used for overlap */ + margin-bottom: 1px; +} +/* normal status */ +.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv { + background-image: url("images/tabRight.png"); + background-repeat: repeat-y; + background-position: -1px -347px; +} +.claro .dijitTabContainerRight-tabs .dijitTabContent { + padding:3px 8px 4px 4px; + background-image: url("images/tabRight.png"); + background-position:right top; + background-repeat: repeat-y; +} +/* checked status */ +.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent { + padding-left: 5px; + border-left: none; + background-image: none; +} +.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv { + background-position:-348px -179px; + .box-shadow(1px 0 2px rgba(0, 0, 0, 0.07)); +} +/** end right tab **/ + +/** round corner **/ +.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerTop-tabs .dijitTabContent { + .border-radius(2px 2px 0 0); +} +.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerBottom-tabs .dijitTabContent{ + .border-radius(0 0 2px 2px); +} +.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerLeft-tabs .dijitTabContent{ + .border-radius(2px 0 0 2px); +} + +.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerRight-tabs .dijitTabContent{ + .border-radius(0 2px 2px 0); +} + +/************ left/right scroll buttons + menu button ************/ +.claro .tabStripButton { + background-color:@button-background-color; + border: 1px solid @border-color; +} +.claro .dijitTabListContainer-top .tabStripButton { + padding: 4px 3px; + margin-top:7px; + background-image: url("images/tabTop.png"); + background-position:0 0; +} +.claro .dijitTabListContainer-bottom .tabStripButton { + padding:5px 3px; + margin-bottom:4px; + background-image: url("images/tabTop.png"); + background-position:0 -248px; + background-position:bottom; +} +.claro .tabStripButtonHover { + background-color:@hovered-background-color; +} +.claro .tabStripButtonActive { + background-color:@pressed-background-color; +} +.claro .dijitTabStripIcon { + height:15px; + width:15px; + margin: 0 auto; + background:url("../form/images/buttonArrows.png") no-repeat -75px 50%; + background-color: transparent; +} +.claro .dijitTabStripSlideRightIcon{ + background-position: -24px 50%; +} +.claro .dijitTabStripMenuIcon { + background-position: -51px 50%; +} + +/*disabled styles for tab strip buttons*/ +.claro .dijitTabListContainer-top .tabStripButtonDisabled, +.claro .dijitTabListContainer-bottom .tabStripButtonDisabled { + background-color:@tab-disabled-background-color; + border:1px solid @border-color; /* to match border of TabContainer itself */ +} +.claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon { + background-position:-175px 50%; +} +.claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon { + background-position: -124px 50%; +} +.claro .tabStripButtonDisabled .dijitTabStripMenuIcon { + background-position: -151px 50%; +} +/* Nested Tabs */ +.claro .dijitTabContainerNested .dijitTabListWrapper { + height: auto; +} +.claro .dijitTabContainerNested .dijitTabContainerTop-tabs { + border-bottom:solid 1px @border-color; + padding:1px 2px 4px; + margin-top:-2px; +} +.claro .dijitTabContainerTabListNested .dijitTabContent { + background:rgba(255, 255, 255, 0) none repeat scroll 0 0; + border: none; + padding: 4px; + border-color: rgba(118,157,192,0); + .transition-property(background-color, border-color); + .transition-duration(.3s); + .border-radius(2px); +} +.claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv { + /* 4 element selector to override box-shadow setting from above rule: + * .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { ... } + */ + background: none; + border: none; + top: 0;/* to override top: 1px/-1px for normal tabs */ + .box-shadow(none); +} +.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent { + background-color: @nestedtab-hovered-background-color; + border:solid 1px @nestedtab-hovered-border-color; + padding: 3px; + .transition-duration(.2s); +} +.claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel { + text-decoration: none; +} +.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent { + border:solid 1px @nestedtab-selected-border-color; + padding: 3px; + background: @nestedtab-selected-background-color url("images/tabNested.png") repeat-x; + .transition-duration(.1s); +} +.claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent { + padding: 3px; + border:solid 1px @selected-border-color; + background-position: 0 105px; + background-color:@selected-background-color; +} +.claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel { + text-decoration: none; + background-image:none; +} +.claro .dijitTabPaneWrapperNested { + border: none;/* prevent double border */ +} + + +.dj_ie6 .claro .dijitTabContent, +.dj_ie6 .claro .dijitTabInnerDiv, +.dj_ie6 .dijitTabListContainer-top .tabStripButton, +.dj_ie6 .dijitTabListContainer-bottom .tabStripButton{ + background-image: none; +} diff --git a/lib/dijit/themes/claro/layout/TabContainer_rtl.css b/lib/dijit/themes/claro/layout/TabContainer_rtl.css index 156cea977..89fdff097 100644 --- a/lib/dijit/themes/claro/layout/TabContainer_rtl.css +++ b/lib/dijit/themes/claro/layout/TabContainer_rtl.css @@ -1,67 +1,67 @@ -.claro .dijitTabContainerTop-tabs .dijitTabRtl, -.claro .dijitTabContainerBottom-tabs .dijitTabRtl { - margin-right: 0; - margin-left: 1px; +.claro .dijitTabContainerTop-tabs .dijitTabRtl, .claro .dijitTabContainerBottom-tabs .dijitTabRtl { + margin-right: 0; + margin-left: 1px; } .claro .dijitTabRtl { - -moz-box-orient:horizontal; - text-align: right; + -moz-box-orient: horizontal; + text-align: right; } .dj_ie7 .claro .dijitTabRtl .dijitTabContent { - display: block; - left: 0; + display: block; + left: 0; } -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl, -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl { - top: 1px; +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl, .dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl { + top: 1px; } .dj_ie7 .claro .tabStripButtonRtl .dijitButtonContents, -.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents, +.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents, .dj_ie6 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_ie6 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_ie7 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_iequirks .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_iequirks .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv { - float:left; + float: left; } .dj_ie6 .claro .dijitTabRtl .tabLabel, .dj_ie6 .claro .dijitTabContainerRight-tabs .dijitTabRtl, .dj_ie6 .claro .dijitTabContainerLeft-tabs .dijitTabRtl, .dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_ie7 .claro .dijitTabContainerLeft-tabs .dijitTabRtl .dijitTabInnerDiv { - - zoom:1; + /*Make the .tablabel have width in ie6 with haslayout property, fix Close icon position bug*/ + + zoom: 1; } -.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton, -.dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton, -.dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton { - margin-right:5px; +.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton, .dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton, .dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton { + margin-right: 5px; } -.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, -.dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs { - width:1%; +.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, .dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs { + width: 1%; } -.dj_ie6 .dijitTabContainerTopStrip, -.dj_ie6 .dijitTabContainerBottomStrip { - position:absolute; +.dj_ie6 .dijitTabContainerTopStrip, .dj_ie6 .dijitTabContainerBottomStrip { + position: absolute; } .dj_iequirks .claro .dijitTabContainerTopRtl .dijitTabContainerTopStrip { - padding-top: 10px; + padding-top: 10px; } .dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtlChecked .dijitTabInnerDiv { - background-position:-341px -179px; + background-position: -341px -179px; } -.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, -.dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon { - position: relative; +.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, .dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon { + position: relative; } -.dj_ie6-rtl .claro .dijitTabContainerTop-tabs { - - padding-left: 3px; +.dj_ie6-rtl .claro .dijitTabContainerTop-tabs { + /* this strange rule prevents IE6 bug in themeTester.html?dir=rtl upon closing + * "Closable" tab, where the other tabs disappear + */ + + padding-left: 3px; } .dj_iequirks-rtl .claro .dijitTabListWrapper { - - border-left: 1px solid #fff; - border-right: 1px solid #fff; + /* this strange rule prevents IE6 bug in themeTesterQuirk.html?dir=rtl upon closing + * "Closable" tab, where the other tabs disappear + */ + + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; } diff --git a/lib/dijit/themes/claro/layout/TabContainer_rtl.less b/lib/dijit/themes/claro/layout/TabContainer_rtl.less new file mode 100644 index 000000000..eaada0d0a --- /dev/null +++ b/lib/dijit/themes/claro/layout/TabContainer_rtl.less @@ -0,0 +1,81 @@ +@import "../variables"; + +.claro .dijitTabContainerTop-tabs .dijitTabRtl, +.claro .dijitTabContainerBottom-tabs .dijitTabRtl { + margin-right: 0; + margin-left: 1px; +} +.claro .dijitTabRtl { + -moz-box-orient:horizontal; + text-align: right; +} +.dj_ie7 .claro .dijitTabRtl .dijitTabContent { + display: block; + left: 0; +} +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl, +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl { + top: 1px; +} + +// Note that .tabStripButtonRtl .dijitButtonContents needed for IE8 quirks but breaks IE6 quirks +.dj_ie7 .claro .tabStripButtonRtl .dijitButtonContents, +.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents, +.dj_ie6 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie6 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie7 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_iequirks .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_iequirks .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv { + float:left; +} +.dj_ie6 .claro .dijitTabRtl .tabLabel, +.dj_ie6 .claro .dijitTabContainerRight-tabs .dijitTabRtl, +.dj_ie6 .claro .dijitTabContainerLeft-tabs .dijitTabRtl, +.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie7 .claro .dijitTabContainerLeft-tabs .dijitTabRtl .dijitTabInnerDiv { + /*Make the .tablabel have width in ie6 with haslayout property, fix Close icon position bug*/ + zoom:1; +} +.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton, +.dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton, +.dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton { + margin-right:5px; +} + +.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, +.dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs { + width:1%; +} + +.dj_ie6 .dijitTabContainerTopStrip, +.dj_ie6 .dijitTabContainerBottomStrip { + position:absolute; +} +.dj_iequirks .claro .dijitTabContainerTopRtl .dijitTabContainerTopStrip { + padding-top: 10px; +} +.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtlChecked .dijitTabInnerDiv { + background-position:-341px -179px; +} + +.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, +.dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon { + position: relative; +} + + +.dj_ie6-rtl .claro .dijitTabContainerTop-tabs { + /* this strange rule prevents IE6 bug in themeTester.html?dir=rtl upon closing + * "Closable" tab, where the other tabs disappear + */ + padding-left: 3px; +} + +.dj_iequirks-rtl .claro .dijitTabListWrapper { + /* this strange rule prevents IE6 bug in themeTesterQuirk.html?dir=rtl upon closing + * "Closable" tab, where the other tabs disappear + */ + border-left: 1px solid @pane-background-color; + border-right: 1px solid @pane-background-color; +} diff --git a/lib/dijit/themes/claro/layout/images/tabBottom.png b/lib/dijit/themes/claro/layout/images/tabBottom.png index bf232406f..dbcfc851b 100644 Binary files a/lib/dijit/themes/claro/layout/images/tabBottom.png and b/lib/dijit/themes/claro/layout/images/tabBottom.png differ diff --git a/lib/dijit/themes/claro/layout/images/tabTop.png b/lib/dijit/themes/claro/layout/images/tabTop.png index db7626ea8..2822487ed 100644 Binary files a/lib/dijit/themes/claro/layout/images/tabTop.png and b/lib/dijit/themes/claro/layout/images/tabTop.png differ diff --git a/lib/dijit/themes/claro/variables.less b/lib/dijit/themes/claro/variables.less new file mode 100644 index 000000000..8d09c2519 --- /dev/null +++ b/lib/dijit/themes/claro/variables.less @@ -0,0 +1,189 @@ +// General +@text-color: #000000; // Text color for enabled widgets + +@border-color: #b5bcc7; // Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer +@popup-border-color: #769dc0; // Border for Dialog, Menu, Tooltip. Must also update tooltip.png (the arrow image file) to match +@minor-border-color: #d3d3d3; // Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar + +@disabled-border-color: #d3d3d3; // Border color for disabled/readonly Button, TextBox etc. widgets +@disabled-background-color: #efefef;// Disabled button, textbox, etc. +@disabled-text-color: #818181; // Text color for disabled/readonly widgets + +@unselected-background-color: #efefef;// Background color for unselected/unopened tab button, accordion pane, TitlePane, Menu items +@unselected-text-color: #4a4a4a; // Text color for unselected/unopened tab button, accordion pane, TitlePane, Menu items + +@hovered-border-color: #769dc0; // Hover of textbox, tab label, BorderContainer splitter, Calendar, etc. +@hovered-background-color: #abd6ff; // Background color for hover of Button, MenuBar, Accordion pane, Calendar... anything that has a (non-white) color to start with and gets darker on hover +@hovered-text-color: @text-color; // Used for title of select Accordion pane, label of select tab, hovered Menu item, etc. + +@pressed-border-color: #769dc0; // During click on Calendar day, Slider up/down buttons, tab button, etc. +@pressed-background-color: #7dbefa; // Background color while clicking on Accordion/TitlePane title bar, tab button, Calendar day, Toolbar button, Tree row. + +@selected-border-color: #769dc0; // Selected AccordionPane, tab of nested TabContainer (but plain TabContainer is special) +@selected-background-color: #cfe5fa;// Selected Accordion pane, nested tab label, Tree row +@selected-text-color: @text-color; // title of selected Accordion pane, label of selected tab, hovered Menu item, etc. + +@bar-background-color: #efefef; // MenuBar, Toolbar, action bar at bottom of dialog +@pane-background-color: #fff; // Background color of Accordion panes, Dialogs, etc. +@popup-background-color: #fff; // Background for Dialog. TODO: currently use for ColorPalette, maybe should change. + + + +// Buttons +@button-border-color: #769dc0; // Border for (stand-alone) buttons in normal, hovered, or active state +@button-background-color: #e9f4fe; // Background color for (unhovered) buttons +@button-hovered-background-color: #abd6ff; // Background color for hovered buttons +@button-pressed-background-color: #abd6ff; // Background color for active buttons +@button-border-radius: 4px; // Rounded corner radius for buttons (except in toolbar) + +// Input widgets +@focused-border-color: #769dc0; // Focused textbox, editor, select, etc. +@error-border-color: #d46464; // Border for textbox in error state +@error-focused-border-color: #ce4f4f; // Border of textbox in error state, and focused +@erroricon-background-color: #d46464; // Background color for exclamation point validation icon (for TextBox in error state) +@textbox-background-color: #fff; // Default background color of TextBox based widgets +@textbox-hovered-background-color: #e9f4fe; // Background color when hovering a unfocused TextBox, Select, Editor, or other input widget +@textbox-focused-background-color: @textbox-background-color; +@textbox-error-background-color: @textbox-background-color; +@textbox-disabled-background-color: @disabled-background-color; + +@textbox-padding: 2px; // Padding for Textbox, Textarea, etc. + +// CheckBox, RadioButton +@focus-outline-color: #4a4a4a; // Color for artificial focus outline around labels of checkboxes + +// TabContainer +@nestedtab-hovered-background-color: @textbox-hovered-background-color; +@nestedtab-hovered-border-color: #cfe5fa; +@nestedtab-selected-border-color: @selected-border-color; +@nestedtab-selected-background-color: #abd6ff; +@tab-disabled-background-color: #d3d3d3; // For disabled tabs of a TabContainer (not officially supported) + +// Arrow buttons (stand alone, or inside ComboBox / ComboButton / Spinner / etc. +@arrowbutton-background-color: #efefef; +@arrowbutton-hovered-background-color: #abd6ff; // Color of arrow when hovering ComboBox. But hovering Spinner doesn't change arrow color (TODO) +@arrowbutton-pressed-background-color: #abd6ff; +@arrowbutton-inner-border-color: #fff; // Typically the arrows have an inner white border (a.k.a. padding) and then an outer black-ish border + +// Slider +// Note: any changes here require corresponding changes in form/images/sliderThumbs.png +@slider-fullbar-background-color: #cfe5fa; // Background color for part of slider bar before (to the left or below) the handle +@slider-remainingbar-background-color: #fff; // Background color for part of slider bar after (to the right or above) the handle +@slider-hovered-fullbar-background-color: #abd6ff; // Background color for part of bar of hovered slider before (to the left or below) the handle +@slider-hovered-remainingbar-background-color: #fff;// Background color for part of bar of hovered slider after (to the right or above) the handle +@slider-hoveredButton-background-color: #fff; // Background color of slider increment/decrement buttons when mouse is over slider but not over the buttons +@slider-focused-fullbar-background-color: #abd6ff; // Background color for part of bar of focused slider before (to the left or below) the handle +@slider-focused-remainingbar-background-color: #fff;// Background color for part of bar of focused slider after (to the right or above) the handle +@slider-button-hovered-background-color: #cfe5fa; // Background color of slider increment/decrement buttons when mouse is over the buttons +@slider-button-pressed-background-color: #abd6ff; // Background color of slider increment/decrement buttons while button is depressed + +// Select, ComboBox +@select-dropdownitem-background-color: #fff; // Background color for items in the drop down list of a ComboBox/Select +@select-dropdownitem-hovered-background-color: #7dbefa; // Background color for the hovered item in the drop down list of a ComboBox/Select +@select-matchedtext-background-color: #abd6ff; // Background color of text in ComboBox drop down that matches typed in phrase + +// Menus +@menu-background-color: @popup-background-color; + +// Calendar +@calendar-background-color: #cfe5fa; +@calendar-currentmonth-background-color: #fff; // Background color for days of the current month +@calendar-adjacentmonth-background-color: #e9f4fe; // Background color used for days from previous or next month +@calendar-adjacentmonth-text-color: #769dc0; // Text color used for days from previous or next month +@calendar-date-pressed-border-color: #fff; // For some reason pressing a day of the month (as opposed to hovering it) makes the border go away, is this intentional? +@calendar-date-pressed-background-color: @pressed-background-color; +@calendar-date-selected-border-color: @selected-border-color; +@calendar-date-selected-background-color: #abd6ff; +@calendar-button-hovered-background-color: #e9f4fe; // for hover or next/previous year, and month drop down (TODO: border and background are built in to calendarArrows.png, can't control from here) +@calendar-button-hovered-border-color: #fff; // for hover or next/previous year, and month drop down +@calendar-button-pressed-background-color: #cfe5fa; +@calendar-button-pressed-border-color: @pressed-border-color; + + +// ProgressBar +@progressbar-border-color: @popup-border-color; // Border color of progress bar +@progressbar-full-background-color:#abd6ff; // Background color for part of progress bar indicating amount completed +@progressbar-empty-background-color: #fff; // Background color for part of progress bar indicating amount remaining +@progressbar-text-color: @text-color; // Color of progress bar text (ex: "35%"). Must contrast with both empty and full background colors. + +// TimePicker +@timepicker-minorvalue-background-color: #efefef; // For 3:15, 3:30, 3:45 but not 3:00 or 4:00 +@timepicker-minorvalue-text-color: #818181; +@timepicker-majorvalue-background-color: #e9f4fe; // For 3:00, 4:00, 5:00, etc. +@timepicker-value-hovered-background-color: #7dbefa; +@timepicker-value-hovered-text-color: @hovered-text-color; +@timepicker-arrow-hovered-background-color: #abd6ff; + +// ColorPalette +@colorpalette-background-color: #fff; +@swatch-border-color: @minor-border-color; +@swatch-hovered-border-color: #000; +@swatch-selected-border-color: #000; + +// Dialog +@dialog-underlay-color: #fff; // the thing that grays out the screen when a dialog is shown +@dialog-titlebar-border-color: #fff; // Inner border around the title sectionof a Dialog, inside the main border of the Dialog and the border between title and content +@dialog-titlebar-background-color: #abd6ff; + +// BorderContainer +@splitter-hovered-background-color: #cfe5fa; // Color of splitter when user hovers it, before mouse down +@splitter-dragged-background-color: #abd6ff; // Color of splitter while it's being dragged + +// Toolbar +@toolbar-button-checked-background-color: #fff; // a toggled-on button in the toolbar +@toolbar-combobutton-hovered-unhoveredsection-background-color: #f4ffff; // when user hovers a ComboButton in a Toolbar, the other half of the button turns this color +@toolbar-button-border-radius: 2px; // Rounded corner radius for buttons for buttons in toolbar + +// DnD +@dnd-avatar-background-color: #fff; // Background color of little Dialog-type box indicating dragged items +@dnd-avatar-header-background-color: #f58383; // Title bar for dragged items +@dnd-avatar-candrop-header-background-color: #97e68d;// Title bar for dragged items when they can be dropped +@dnd-dropseparator-color: #769dc0; // Color of line indicating that user is about to drop between items A & B + +// Document level +@document-text-color: #131313; // Text color for document itself (text outside of widgets) +@document-shadedsection-background-color: @bar-background-color;// background color used for 
, , and table header rows
+@document-border-color: #d3d3d3;								// Border for 
, , tables, etc.
+
+// Mixins
+
+.border-radius (@radius) {
+	-moz-border-radius: @radius;
+	border-radius: @radius;
+}
+
+.box-shadow (@value) {
+	-webkit-box-shadow: @value;
+	-moz-box-shadow: @value;
+	box-shadow: @value;
+}
+
+.transition-property (@value) {
+	-webkit-transition-property: @value;
+	-moz-transition-property: @value;
+	transition-property: @value;
+}
+
+.transition-property (@value1, @value2) {
+	-webkit-transition-property: @value1, @value2;
+	-moz-transition-property: @value1, @value2;
+	transition-property: @value1, @value2;
+}
+
+.transition-duration (@value) {
+	-webkit-transition-duration: @value;
+	-moz-transition-duration: @value;
+	transition-duration: @value;
+}
+
+.transition-duration (@value1, @value2) {
+	-webkit-transition-duration: @value1, @value2;
+	-moz-transition-duration: @value1, @value2;
+	transition-duration: @value1, @value2;
+}
+
+.transition-timing-function (@value) {
+	-webkit-transition-timing-function: @value;
+	-moz-transition-timing-function: @value;
+	transition-timing-function: @value;
+}
-- 
cgit v1.2.3