From f0cfe83e3725f9a3928da97a6e3085e79cb25309 Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Mon, 18 Mar 2013 10:26:24 +0400 Subject: upgrade dojo to 1.8.3 (refs #570) --- lib/dijit/themes/claro/Calendar.css | 33 +- lib/dijit/themes/claro/Calendar.less | 34 +- lib/dijit/themes/claro/ColorPalette.css | 2 +- lib/dijit/themes/claro/Common.css | 40 +- lib/dijit/themes/claro/Common.less | 34 +- lib/dijit/themes/claro/Dialog.css | 25 +- lib/dijit/themes/claro/Dialog.less | 18 +- lib/dijit/themes/claro/Editor.css | 12 +- lib/dijit/themes/claro/Editor.less | 10 +- lib/dijit/themes/claro/Menu.css | 84 ++-- lib/dijit/themes/claro/Menu.less | 87 ++--- lib/dijit/themes/claro/ProgressBar.css | 11 +- lib/dijit/themes/claro/ProgressBar.less | 10 +- lib/dijit/themes/claro/README | 34 +- lib/dijit/themes/claro/TimePicker.css | 23 +- lib/dijit/themes/claro/TimePicker.less | 17 +- lib/dijit/themes/claro/TitlePane.css | 18 +- lib/dijit/themes/claro/TitlePane.less | 8 +- lib/dijit/themes/claro/Toolbar.css | 64 +-- lib/dijit/themes/claro/Toolbar.less | 30 +- lib/dijit/themes/claro/Tree.css | 49 ++- lib/dijit/themes/claro/Tree.less | 39 +- lib/dijit/themes/claro/claro_rtl.css | 1 - lib/dijit/themes/claro/form/Button.css | 34 +- lib/dijit/themes/claro/form/Button.less | 38 +- lib/dijit/themes/claro/form/Common.css | 91 +++-- lib/dijit/themes/claro/form/Common.less | 71 +++- lib/dijit/themes/claro/form/Common_rtl.css | 9 +- lib/dijit/themes/claro/form/Common_rtl.less | 9 +- lib/dijit/themes/claro/form/NumberSpinner.css | 21 +- lib/dijit/themes/claro/form/NumberSpinner.less | 10 +- lib/dijit/themes/claro/form/Select.css | 67 ++-- lib/dijit/themes/claro/form/Select.less | 64 +-- 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 | 56 ++- lib/dijit/themes/claro/form/Slider.less | 43 +- lib/dijit/themes/claro/form/images/button.png | Bin 680 -> 0 bytes .../themes/claro/form/images/buttonDisabled.png | Bin 0 -> 105 bytes .../themes/claro/form/images/buttonDisabled.svg | 23 ++ .../themes/claro/form/images/buttonEnabled.png | Bin 0 -> 122 bytes .../themes/claro/form/images/buttonEnabled.svg | 24 ++ .../themes/claro/form/images/button_grad_d.png | Bin 3897 -> 0 bytes .../themes/claro/form/images/formHighlight.png | Bin 339 -> 0 bytes lib/dijit/themes/claro/form/images/shadow.png | Bin 4624 -> 0 bytes .../themes/claro/form/images/sliderHorizontal.png | Bin 180 -> 0 bytes .../themes/claro/form/images/sliderVertical.png | Bin 177 -> 0 bytes .../themes/claro/form/images/textBox_back.png | Bin 2837 -> 0 bytes lib/dijit/themes/claro/images/activeGradient.png | Bin 0 -> 146 bytes lib/dijit/themes/claro/images/activeGradient.svg | 19 + lib/dijit/themes/claro/images/calendar.png | Bin 0 -> 194 bytes .../claro/images/calendarContainerImages.png | Bin 3347 -> 0 bytes lib/dijit/themes/claro/images/commonHighlight.png | Bin 339 -> 0 bytes lib/dijit/themes/claro/images/dnd.png | Bin 2996 -> 2127 bytes lib/dijit/themes/claro/images/menuHighlight.png | Bin 339 -> 0 bytes lib/dijit/themes/claro/images/progressBarEmpty.png | Bin 2849 -> 0 bytes lib/dijit/themes/claro/images/standardGradient.png | Bin 0 -> 153 bytes lib/dijit/themes/claro/images/standardGradient.svg | 18 + lib/dijit/themes/claro/images/titlebar.png | Bin 640 -> 0 bytes lib/dijit/themes/claro/images/tooltipGradient.png | Bin 1030 -> 0 bytes .../themes/claro/images/treeExpand_loading.gif | Bin 1944 -> 0 bytes .../themes/claro/layout/AccordionContainer.css | 29 +- .../themes/claro/layout/AccordionContainer.less | 16 +- lib/dijit/themes/claro/layout/BorderContainer.css | 24 +- lib/dijit/themes/claro/layout/BorderContainer.less | 20 +- lib/dijit/themes/claro/layout/TabContainer.css | 258 ++++++------ lib/dijit/themes/claro/layout/TabContainer.less | 268 ++++++------- lib/dijit/themes/claro/layout/TabContainer_rtl.css | 63 --- .../themes/claro/layout/TabContainer_rtl.less | 74 ---- lib/dijit/themes/claro/layout/images/accordion.png | Bin 640 -> 0 bytes .../layout/images/splitterHorizontalHover.png | Bin 3711 -> 0 bytes .../claro/layout/images/splitterVerticalHover.png | Bin 3869 -> 0 bytes lib/dijit/themes/claro/layout/images/tabBottom.png | Bin 718 -> 0 bytes .../claro/layout/images/tabBottomSelected.png | Bin 0 -> 118 bytes .../claro/layout/images/tabBottomSelected.svg | 18 + .../claro/layout/images/tabBottomUnselected.png | Bin 0 -> 110 bytes .../claro/layout/images/tabBottomUnselected.svg | 19 + lib/dijit/themes/claro/layout/images/tabLeft.png | Bin 1692 -> 0 bytes .../themes/claro/layout/images/tabLeftSelected.png | Bin 0 -> 213 bytes .../themes/claro/layout/images/tabLeftSelected.svg | 17 + .../claro/layout/images/tabLeftUnselected.png | Bin 0 -> 106 bytes .../claro/layout/images/tabLeftUnselected.svg | 16 + lib/dijit/themes/claro/layout/images/tabRight.png | Bin 1759 -> 0 bytes .../claro/layout/images/tabRightSelected.png | Bin 0 -> 210 bytes .../claro/layout/images/tabRightSelected.svg | 17 + .../claro/layout/images/tabRightUnselected.png | Bin 0 -> 105 bytes .../claro/layout/images/tabRightUnselected.svg | 16 + lib/dijit/themes/claro/layout/images/tabTop.png | Bin 721 -> 0 bytes .../themes/claro/layout/images/tabTopSelected.png | Bin 0 -> 120 bytes .../themes/claro/layout/images/tabTopSelected.svg | 18 + .../claro/layout/images/tabTopUnselected.png | Bin 0 -> 121 bytes .../claro/layout/images/tabTopUnselected.svg | 19 + lib/dijit/themes/claro/variables.less | 186 +++++++-- lib/dijit/themes/dijit.css | 435 ++++++++++++++------- lib/dijit/themes/dijit_rtl.css | 45 ++- lib/dijit/themes/nihilo/Common.css | 14 +- lib/dijit/themes/nihilo/Dialog.css | 10 +- lib/dijit/themes/nihilo/form/Button.css | 7 +- lib/dijit/themes/nihilo/form/Button_rtl.css | 6 +- lib/dijit/themes/nihilo/form/Common.css | 19 +- lib/dijit/themes/nihilo/form/Select.css | 46 +-- lib/dijit/themes/nihilo/form/TimeTextBox.css | 2 +- lib/dijit/themes/nihilo/images/dndNoCopy.png | Bin 699 -> 1332 bytes lib/dijit/themes/nihilo/images/dndNoMove.png | Bin 677 -> 991 bytes .../nihilo/images/tabBottomActiveSpriteLR.gif | Bin 291 -> 0 bytes .../nihilo/images/tabBottomEnabledSpriteLR.gif | Bin 266 -> 0 bytes .../nihilo/images/tabBottomHoverSpriteLR.gif | Bin 388 -> 0 bytes lib/dijit/themes/nihilo/images/tabLeftChecked.gif | Bin 303 -> 0 bytes lib/dijit/themes/nihilo/images/tabRightChecked.gif | Bin 300 -> 0 bytes lib/dijit/themes/nihilo/images/tabStripe.gif | Bin 54 -> 0 bytes lib/dijit/themes/nihilo/images/tabStripeBottom.gif | Bin 432 -> 0 bytes lib/dijit/themes/nihilo/images/tabStripeLeft.gif | Bin 432 -> 0 bytes lib/dijit/themes/nihilo/images/tabStripeRight.gif | Bin 432 -> 0 bytes lib/dijit/themes/nihilo/layout/TabContainer.css | 226 ++++------- lib/dijit/themes/soria/Common.css | 19 +- lib/dijit/themes/soria/Dialog.css | 10 +- lib/dijit/themes/soria/form/Button.css | 6 +- lib/dijit/themes/soria/form/Button_rtl.css | 6 +- lib/dijit/themes/soria/form/Common.css | 18 +- lib/dijit/themes/soria/form/Select.css | 55 ++- lib/dijit/themes/soria/form/TimeTextBox.css | 2 +- lib/dijit/themes/soria/images/dndNoCopy.png | Bin 699 -> 1332 bytes lib/dijit/themes/soria/images/dndNoMove.png | Bin 677 -> 991 bytes .../soria/images/tabBottomActiveSpriteLR.gif | Bin 741 -> 0 bytes .../themes/soria/images/tabBottomHoverSpriteLR.gif | Bin 569 -> 0 bytes lib/dijit/themes/soria/images/tabLeftChecked.gif | Bin 795 -> 2005 bytes lib/dijit/themes/soria/images/tabRightChecked.gif | Bin 793 -> 2003 bytes lib/dijit/themes/soria/images/tabStripe.gif | Bin 54 -> 0 bytes lib/dijit/themes/soria/images/tabStripeBottom.gif | Bin 54 -> 0 bytes lib/dijit/themes/soria/images/tabStripeLeft.gif | Bin 54 -> 0 bytes lib/dijit/themes/soria/images/tabStripeRight.gif | Bin 54 -> 0 bytes lib/dijit/themes/soria/layout/TabContainer.css | 233 ++++------- lib/dijit/themes/tundra/Common.css | 18 +- lib/dijit/themes/tundra/form/Button.css | 8 +- lib/dijit/themes/tundra/form/Common.css | 15 +- lib/dijit/themes/tundra/form/Select.css | 52 +-- lib/dijit/themes/tundra/images/dndNoCopy.png | Bin 699 -> 1332 bytes lib/dijit/themes/tundra/images/dndNoMove.png | Bin 677 -> 991 bytes lib/dijit/themes/tundra/layout/TabContainer.css | 42 +- .../themes/tundra/layout/TabContainer_rtl.css | 48 --- 140 files changed, 1898 insertions(+), 1812 deletions(-) delete mode 100644 lib/dijit/themes/claro/form/Select_rtl.css delete mode 100644 lib/dijit/themes/claro/form/Select_rtl.less delete mode 100644 lib/dijit/themes/claro/form/images/button.png create mode 100644 lib/dijit/themes/claro/form/images/buttonDisabled.png create mode 100644 lib/dijit/themes/claro/form/images/buttonDisabled.svg create mode 100644 lib/dijit/themes/claro/form/images/buttonEnabled.png create mode 100644 lib/dijit/themes/claro/form/images/buttonEnabled.svg delete mode 100644 lib/dijit/themes/claro/form/images/button_grad_d.png delete mode 100644 lib/dijit/themes/claro/form/images/formHighlight.png delete mode 100644 lib/dijit/themes/claro/form/images/shadow.png delete mode 100644 lib/dijit/themes/claro/form/images/sliderHorizontal.png delete mode 100644 lib/dijit/themes/claro/form/images/sliderVertical.png delete mode 100644 lib/dijit/themes/claro/form/images/textBox_back.png create mode 100644 lib/dijit/themes/claro/images/activeGradient.png create mode 100644 lib/dijit/themes/claro/images/activeGradient.svg create mode 100644 lib/dijit/themes/claro/images/calendar.png delete mode 100644 lib/dijit/themes/claro/images/calendarContainerImages.png delete mode 100644 lib/dijit/themes/claro/images/commonHighlight.png delete mode 100644 lib/dijit/themes/claro/images/menuHighlight.png delete mode 100644 lib/dijit/themes/claro/images/progressBarEmpty.png create mode 100644 lib/dijit/themes/claro/images/standardGradient.png create mode 100644 lib/dijit/themes/claro/images/standardGradient.svg delete mode 100644 lib/dijit/themes/claro/images/titlebar.png delete mode 100644 lib/dijit/themes/claro/images/tooltipGradient.png delete mode 100644 lib/dijit/themes/claro/images/treeExpand_loading.gif delete mode 100644 lib/dijit/themes/claro/layout/images/accordion.png delete mode 100644 lib/dijit/themes/claro/layout/images/splitterHorizontalHover.png delete mode 100644 lib/dijit/themes/claro/layout/images/splitterVerticalHover.png delete mode 100644 lib/dijit/themes/claro/layout/images/tabBottom.png create mode 100644 lib/dijit/themes/claro/layout/images/tabBottomSelected.png create mode 100644 lib/dijit/themes/claro/layout/images/tabBottomSelected.svg create mode 100644 lib/dijit/themes/claro/layout/images/tabBottomUnselected.png create mode 100644 lib/dijit/themes/claro/layout/images/tabBottomUnselected.svg delete mode 100644 lib/dijit/themes/claro/layout/images/tabLeft.png create mode 100644 lib/dijit/themes/claro/layout/images/tabLeftSelected.png create mode 100644 lib/dijit/themes/claro/layout/images/tabLeftSelected.svg create mode 100644 lib/dijit/themes/claro/layout/images/tabLeftUnselected.png create mode 100644 lib/dijit/themes/claro/layout/images/tabLeftUnselected.svg delete mode 100644 lib/dijit/themes/claro/layout/images/tabRight.png create mode 100644 lib/dijit/themes/claro/layout/images/tabRightSelected.png create mode 100644 lib/dijit/themes/claro/layout/images/tabRightSelected.svg create mode 100644 lib/dijit/themes/claro/layout/images/tabRightUnselected.png create mode 100644 lib/dijit/themes/claro/layout/images/tabRightUnselected.svg delete mode 100644 lib/dijit/themes/claro/layout/images/tabTop.png create mode 100644 lib/dijit/themes/claro/layout/images/tabTopSelected.png create mode 100644 lib/dijit/themes/claro/layout/images/tabTopSelected.svg create mode 100644 lib/dijit/themes/claro/layout/images/tabTopUnselected.png create mode 100644 lib/dijit/themes/claro/layout/images/tabTopUnselected.svg delete mode 100644 lib/dijit/themes/nihilo/images/tabBottomActiveSpriteLR.gif delete mode 100644 lib/dijit/themes/nihilo/images/tabBottomEnabledSpriteLR.gif delete mode 100644 lib/dijit/themes/nihilo/images/tabBottomHoverSpriteLR.gif delete mode 100644 lib/dijit/themes/nihilo/images/tabLeftChecked.gif delete mode 100644 lib/dijit/themes/nihilo/images/tabRightChecked.gif delete mode 100644 lib/dijit/themes/nihilo/images/tabStripe.gif delete mode 100644 lib/dijit/themes/nihilo/images/tabStripeBottom.gif delete mode 100644 lib/dijit/themes/nihilo/images/tabStripeLeft.gif delete mode 100644 lib/dijit/themes/nihilo/images/tabStripeRight.gif delete mode 100644 lib/dijit/themes/soria/images/tabBottomActiveSpriteLR.gif delete mode 100644 lib/dijit/themes/soria/images/tabBottomHoverSpriteLR.gif delete mode 100644 lib/dijit/themes/soria/images/tabStripe.gif delete mode 100644 lib/dijit/themes/soria/images/tabStripeBottom.gif delete mode 100644 lib/dijit/themes/soria/images/tabStripeLeft.gif delete mode 100644 lib/dijit/themes/soria/images/tabStripeRight.gif (limited to 'lib/dijit/themes') diff --git a/lib/dijit/themes/claro/Calendar.css b/lib/dijit/themes/claro/Calendar.css index a0f959759..1b0ddaed0 100644 --- a/lib/dijit/themes/claro/Calendar.css +++ b/lib/dijit/themes/claro/Calendar.css @@ -33,15 +33,18 @@ */ .claro .dijitCalendar { border: solid 1px #b5bcc7; + border-collapse: separate; + -moz-border-radius: 4px; + border-radius: 4px; background-color: #cfe5fa; - background-image: url("images/calendarContainerImages.png"); - background-position: 0 -448px; + background-image: url("images/calendar.png"); background-repeat: repeat-x; + background-image: -moz-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%); text-align: center; padding: 6px 5px 3px 5px; - -moz-border-radius: 4px; - border-radius: 4px; - border-collapse: separate; } .dj_ie6 .claro .dijitCalendar { background-image: none; @@ -50,7 +53,7 @@ border: none; } .claro .dijitCalendarHover, .claro .dijitCalendar:hover, .claro .dijitCalendarActive { - /* treat dijitCalenderActive like hover since there's + /* treat dijitCalendarActive like hover since there's * no concept of clicking a Calendar as a whole (although you can click things inside the calendar) */ @@ -113,9 +116,6 @@ .claro .dijitCalendarDateTemplate { 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; @@ -215,8 +215,6 @@ background-color: #7dbdfa; } .claro .dijitCalendarActiveDate .dijitCalendarDateLabel, .claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel { - background-image: url("images/calendarContainerImages.png"); - background-position: 0 -300px; background-color: #7dbdfa; border: solid 1px #ffffff; -webkit-transition-duration: 0.1s; @@ -249,13 +247,13 @@ 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); + background-color: transparent; + background-image: none; } .claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode, .claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode { background-color: #e5f2fe; @@ -276,9 +274,12 @@ padding: 2px 0; } .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover, .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover { - background-color: #abd6ff; border-color: #759dc0; border-width: 1px 0; - background-image: url("images/commonHighlight.png"); - background-repeat: repeat-x; + background-color: #abd6ff; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); + background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= #ffffff , endColorstr= #abd6ff ); } diff --git a/lib/dijit/themes/claro/Calendar.less b/lib/dijit/themes/claro/Calendar.less index 55decd3b4..8b8f5794f 100644 --- a/lib/dijit/themes/claro/Calendar.less +++ b/lib/dijit/themes/claro/Calendar.less @@ -35,25 +35,28 @@ @import "variables"; .claro .dijitCalendar { - border:solid 1px @border-color; + border: solid 1px @border-color; + border-collapse: separate; // in case user CSS has set border-collapse: collapse for tables + .border-radius(4px); + + // Background color and alpha-gradient background-color: @calendar-background-color; - background-image:url(@image-calendar-container); - background-position:0 -448px; - background-repeat:repeat-x; + background-image: url("images/calendar.png"); // fallback for browsers that don't support CSS gradients + background-repeat: repeat-x; // so bottom of calendar isn't affected by gradient image repeating + .alpha-white-gradient(1, 0px, 0.4, 2px, 0, 100%); + text-align:center; padding:6px 5px 3px 5px; - .border-radius(4px); - border-collapse: separate; // in case user CSS has set border-collapse: collapse for tables } .dj_ie6 .claro .dijitCalendar { - background-image:none; + background-image:none; // because on IE6 background-image overrides background-color } .claro .dijitCalendar img { border:none; } .claro .dijitCalendarHover, .claro .dijitCalendar:hover, .claro .dijitCalendarActive { - /* treat dijitCalenderActive like hover since there's + /* treat dijitCalendarActive like hover since there's * no concept of clicking a Calendar as a whole (although you can click things inside the calendar) */ background-color: @hovered-background-color; @@ -120,9 +123,6 @@ .claro .dijitCalendarDateTemplate { text-align:center; background-color:@calendar-currentmonth-background-color; - background-image:url(@image-calendar-container); - background-position:0 0; - background-repeat:repeat-x; border-bottom: 1px solid @minor-border-color; padding-top:0; font-size:0.909em; @@ -209,8 +209,6 @@ } .claro .dijitCalendarActiveDate .dijitCalendarDateLabel, .claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel { - background-image:url(@image-calendar-container); - background-position:0 -300px; background-color: @calendar-date-pressed-background-color; border:solid 1px @calendar-date-pressed-border-color; .transition-duration(.1s); @@ -244,11 +242,13 @@ 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)); + + // Override background settings from vanilla .dijitButtonNode. We want to inherit background of Calendar. + background-color: transparent; + background-image: none; } .claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode, .claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode { @@ -271,9 +271,7 @@ } .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover, .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover { - background-color: @hovered-background-color; border-color: @hovered-border-color; border-width:1px 0; - background-image: url(@image-common-highlight); - background-repeat:repeat-x; + .gradient-and-filter(@hovered-background-color, 70, 0); } diff --git a/lib/dijit/themes/claro/ColorPalette.css b/lib/dijit/themes/claro/ColorPalette.css index a23b2dfd0..cc768ac60 100644 --- a/lib/dijit/themes/claro/ColorPalette.css +++ b/lib/dijit/themes/claro/ColorPalette.css @@ -20,7 +20,7 @@ * .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg * adds border for active or selected state */ -.claro .dijitColorPalette { +.claro .dijitColorPalette { border: 1px solid #b5bcc7; background: #ffffff; -moz-border-radius: 0; diff --git a/lib/dijit/themes/claro/Common.css b/lib/dijit/themes/claro/Common.css index 83f6128c1..8984e1654 100644 --- a/lib/dijit/themes/claro/Common.css +++ b/lib/dijit/themes/claro/Common.css @@ -20,12 +20,44 @@ outline: 1px dotted #494949; } -/* Drag and Drop */ -.claro .dojoDndItemBefore, .claro .dojoDndItemAfter { - border-top: 1px solid #759dc0; +/* Drag and Drop*/ +.claro .dojoDndItem { + border-color: rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; + -webkit-transition-property: background-color, border-color; + -moz-transition-property: background-color, border-color; + transition-property: background-color, border-color; } .claro .dojoDndItemOver { - cursor: pointer; + background-color: #abd6ff; + background-image: url("images/standardGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; + padding: 1px; + border: solid 1px #759dc0; + color: #000000; +} +.claro .dojoDndItemAnchor, .claro .dojoDndItemSelected { + background-color: #cfe5fa; + background-image: url("images/standardGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; + padding: 1px; + border: solid 1px #759dc0; + color: #000000; +} +.claro .dojoDndItemBefore, .claro .dojoDndItemAfter { + border-color: #759dc0; } .claro table.dojoDndAvatar { border: 1px solid #b5bcc7; diff --git a/lib/dijit/themes/claro/Common.less b/lib/dijit/themes/claro/Common.less index 248fc1ab8..078d6fdca 100644 --- a/lib/dijit/themes/claro/Common.less +++ b/lib/dijit/themes/claro/Common.less @@ -20,14 +20,36 @@ outline: 1px dotted @focus-outline-color; } -/* Drag and Drop */ -.claro .dojoDndItemBefore, -.claro .dojoDndItemAfter{ - border-top: 1px solid @dnd-dropseparator-color; +/* Drag and Drop*/ +.claro .dojoDndItem { + border-color: rgba(0,0,0,0); // rgba() instead of none to prevent flash on hover fade-in + .transition-duration(.25s); + .transition-property(background-color, border-color) } .claro .dojoDndItemOver { - cursor:pointer; - } + // Hovered item. Matches dijitTreeRowHover. + background-color:@hovered-background-color; + .standard-gradient; + padding: 1px; // reduce from 2px in dijit.css + border:solid 1px @hovered-border-color; + color:@hovered-text-color; +} +.claro .dojoDndItemAnchor, +.claro .dojoDndItemSelected { + // Selected items(s). Matches dijitTreeRowSelected. + background-color:@selected-background-color; + .standard-gradient; + padding: 1px; // reduce from 2px in dijit.css + border:solid 1px @selected-border-color; + color:@selected-text-color; +} + +.claro .dojoDndItemBefore, +.claro .dojoDndItemAfter { + // line to indicate that user is dropping before/after this dojoDndItem + border-color: @dnd-dropseparator-color; +} + .claro table.dojoDndAvatar { border: 1px solid @border-color; border-collapse: collapse; diff --git a/lib/dijit/themes/claro/Dialog.css b/lib/dijit/themes/claro/Dialog.css index ae0b18df6..744b649dd 100644 --- a/lib/dijit/themes/claro/Dialog.css +++ b/lib/dijit/themes/claro/Dialog.css @@ -56,6 +56,15 @@ border-top: 1px solid #d3d3d3; margin: 10px -8px -10px; } +.claro .dijitTooltipDialog .dijitDialogPaneActionBar { + -webkit-border-bottom-right-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomright: 4px; + -moz-border-radius-bottomleft: 4px; + margin: 10px -10px -8px; +} .claro .dijitDialogPaneActionBar .dijitButton { float: none; } @@ -65,8 +74,13 @@ border: 1px solid #ffffff; border-top: none; background-color: #abd6ff; - background-image: url("images/titlebar.png"); + background-image: url("images/standardGradient.png"); background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; padding: 5px 7px 4px 7px; } .claro .dijitDialogTitle { @@ -121,8 +135,10 @@ /* the part with the text */ background-color: #ffffff; - background-image: url("images/tooltipGradient.png"); - background-repeat: repeat-x; + background-image: -moz-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px); + background-image: -webkit-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px); + background-image: -o-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px); + background-image: linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px); background-position: bottom; border: 1px solid #759dc0; padding: 6px 8px; @@ -134,9 +150,6 @@ font-size: 1em; color: #000000; } -.dj_ie6 .claro .dijitTooltipContainer { - background-image: none; -} .claro .dijitTooltipConnector { /* the arrow piece */ diff --git a/lib/dijit/themes/claro/Dialog.less b/lib/dijit/themes/claro/Dialog.less index 5e74be747..8b5b38673 100644 --- a/lib/dijit/themes/claro/Dialog.less +++ b/lib/dijit/themes/claro/Dialog.less @@ -59,6 +59,15 @@ border-top: 1px solid @minor-border-color; margin: 10px -8px -10px; } +.claro .dijitTooltipDialog .dijitDialogPaneActionBar { + -webkit-border-bottom-right-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomright: 4px; + -moz-border-radius-bottomleft: 4px; + margin: 10px -10px -8px; +} .claro .dijitDialogPaneActionBar .dijitButton { float: none; } @@ -68,8 +77,7 @@ border: 1px solid @dialog-titlebar-border-color; border-top:none; background-color: @dialog-titlebar-background-color; - background-image: url(@image-titlebar); - background-repeat:repeat-x; + .standard-gradient; padding: 5px 7px 4px 7px; } @@ -123,8 +131,7 @@ .claro .dijitTooltipContainer { /* the part with the text */ background-color:@popup-background-color; - background-image:url(@image-tooltip-gradient); - background-repeat:repeat-x; + .linear-gradient(bottom, @tooltip-gradient-color 0px, @popup-background-color 10px); background-position:bottom; border:1px solid @popup-border-color; padding:6px 8px; @@ -134,9 +141,6 @@ color: @text-color; } -.dj_ie6 .claro .dijitTooltipContainer { - background-image: none; -} .claro .dijitTooltipConnector { /* the arrow piece */ border: 0; diff --git a/lib/dijit/themes/claro/Editor.css b/lib/dijit/themes/claro/Editor.css index 9f167f921..8d691f8b4 100644 --- a/lib/dijit/themes/claro/Editor.css +++ b/lib/dijit/themes/claro/Editor.css @@ -25,20 +25,20 @@ } .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; -} .claro .dijitEditorHover .dijitEditorIFrameContainer, .claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame { background-color: #e5f2fe; } .claro .dijitEditorFocused .dijitEditorIFrameContainer, .claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame { - /* TODO: contradicts rule above, which background-color do you want? */ - background-color: #ffffff; } +.claro .dijitEditorHover .dijitEditorIFrameContainer, .claro .dijitEditorFocused .dijitEditorIFrameContainer { + background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); +} /* Disabled */ .claro .dijitEditorDisabled { border: 1px solid #d3d3d3; diff --git a/lib/dijit/themes/claro/Editor.less b/lib/dijit/themes/claro/Editor.less index f74a5d462..ddc59ccb4 100644 --- a/lib/dijit/themes/claro/Editor.less +++ b/lib/dijit/themes/claro/Editor.less @@ -28,22 +28,20 @@ } .claro .dijitEditor .dijitEditorIFrameContainer{ background-color: @textbox-background-color; - background-image: url(@image-form-textbox-background); 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; } - +.claro .dijitEditorHover .dijitEditorIFrameContainer, +.claro .dijitEditorFocused .dijitEditorIFrameContainer { + .textbox-background-image; +} /* Disabled */ .claro .dijitEditorDisabled { diff --git a/lib/dijit/themes/claro/Menu.css b/lib/dijit/themes/claro/Menu.css index e1c1562e8..d54f04ddc 100644 --- a/lib/dijit/themes/claro/Menu.css +++ b/lib/dijit/themes/claro/Menu.css @@ -4,8 +4,8 @@ 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 + 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 @@ -18,7 +18,7 @@ There are three areas of styling for the Menu: 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 + .dijitMenuItemActive - for background-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 @@ -34,15 +34,15 @@ There are three areas of styling for the Menu: margin: 0; padding: 0; background-color: #efefef; - background-image: url("images/commonHighlight.png"); - background-position: 0 0; + background-image: url("images/standardGradient.png"); background-repeat: repeat-x; -} -.dj_ie6 .claro .dijitMenuBar { - background-image: none; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; } .claro .dijitMenu { - background-repeat: repeat-y; background-color: #ffffff; border: 1px solid #759dc0; /* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */ @@ -54,16 +54,16 @@ There are three areas of styling for the Menu: /* above -1px makes top/bottom borders disappear on IE6 */ } +.claro .dijitMenuItem { + color: #000000; +} .claro .dijitMenuBar .dijitMenuItem { padding: 6px 10px 7px; - background-position: 0 100px; margin: -1px; } -.claro .dijitMenuItem { - background-image: url("images/menuHighlight.png"); - background-position: 0 -40px; - background-repeat: repeat-x; - color: #000000; +.claro .dijitMenuBar .dijitMenuItemHover, .claro .dijitMenuBar .dijitMenuItemSelected { + border: solid 1px #759dc0; + padding: 5px 9px 6px; } /* this prevents jiggling upon hover of a menu item */ .claro .dijitMenuTable { @@ -74,27 +74,28 @@ There are three areas of styling for the Menu: .claro .dijitMenuItem td { padding: 1px; } -/* hover over a MenuBarItem */ -.claro .dijitMenuPassive .dijitMenuItemHover, .claro .dijitMenuPassive .dijitMenuItemSelected { +/* hover over a MenuItem or MenuBarItem */ +.claro .dijitSelectMenu .dijitMenuItemHover td, +.claro .dijitSelectMenu .dijitMenuItemSelected td, +.claro .dijitMenuItemHover, +.claro .dijitMenuItemSelected { background-color: #abd6ff; - border: solid 1px #759dc0; - 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; + background-image: url("images/standardGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; } -/* MenuBarItem that has been selected and menu drops down from it */ -.claro .dijitMenuActive .dijitMenuItemHover, .claro .dijitMenuActive .dijitMenuItemSelected { - border: solid 1px #759dc0; - padding: 5px 9px 6px; - background-color: #abd6ff; - background-position: 0 0; - color: #000000; +.claro .dijitMenuItemActive { + background-image: url("images/activeGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + _background-image: none; } .dj_ie .claro .dijitMenuActive .dijitMenuItemHover, .dj_ie .claro .dijitMenuActive .dijitMenuItemSelected, @@ -104,13 +105,6 @@ There are three areas of styling for the Menu: padding-bottom: 5px; margin-top: -3px; } -.claro .dijitMenuActive .dijitMenuItemActive { - background-color: #7dbdfa; - background-position: 0 -177px; -} -.claro .dijitMenuItemActive { - background-position: 0 -177px; -} .claro td.dijitMenuItemIconCell { padding: 2px; margin: 0 0 0 4px; @@ -162,25 +156,23 @@ There are three areas of styling for the Menu: margin-left: 0; background-image: none; } -.claro .dijitComboBoxMenu .dijitMenuItem { +.claro .dijitSelectMenu .dijitMenuItem td, .claro .dijitComboBoxMenu .dijitMenuItem { padding: 2px; border-width: 1px 0 1px 0; border-style: solid; border-color: #ffffff; } -.claro .dijitComboBoxMenu .dijitMenuItemSelected { +.claro .dijitSelectMenu .dijitMenuItemSelected td, .claro .dijitComboBoxMenu .dijitMenuItemSelected { color: #000000; border-color: #759dc0; background-color: #abd6ff; } -.claro .dijitComboBoxMenu .dijitMenuItemHover { +.claro .dijitSelectMenu .dijitMenuItemHover td, .claro .dijitComboBoxMenu .dijitMenuItemHover { color: #000000; border-color: #769dc0; background-color: #abd6ff; - background-position: 0 0; } .claro .dijitComboBoxMenuActive .dijitMenuItemSelected { - background-position: 0 -177px; background-color: #7dbdfa; /* TODO: why is this a different color than normal .dijitMenuItemSelected? */ diff --git a/lib/dijit/themes/claro/Menu.less b/lib/dijit/themes/claro/Menu.less index 80467a5b6..9f4f86071 100644 --- a/lib/dijit/themes/claro/Menu.less +++ b/lib/dijit/themes/claro/Menu.less @@ -4,8 +4,8 @@ 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 + 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 @@ -18,7 +18,7 @@ There are three areas of styling for the Menu: 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 + .dijitMenuItemActive - for background-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 @@ -37,15 +37,10 @@ There are three areas of styling for the Menu: margin: 0; padding: 0; background-color: @bar-background-color; - background-image: url(@image-common-highlight); - background-position:0 0; - background-repeat:repeat-x; -} -.dj_ie6 .claro .dijitMenuBar { - background-image:none; + .standard-gradient; } + .claro .dijitMenu { - background-repeat:repeat-y; background-color:@menu-background-color; border: 1px solid @popup-border-color; @@ -55,16 +50,19 @@ There are three areas of styling for the Menu: .dj_ie6 .claro .dijitMenu { margin: 0; /* above -1px makes top/bottom borders disappear on IE6 */ } + +.claro .dijitMenuItem { + color: @text-color; +} .claro .dijitMenuBar .dijitMenuItem { padding: 6px 10px 7px; - background-position:0 100px; margin:-1px; -} -.claro .dijitMenuItem { - background-image: url(@image-menu-highlight); - background-position:0 -40px; - background-repeat:repeat-x; - color: @text-color; +} +.claro .dijitMenuBar .dijitMenuItemHover, +.claro .dijitMenuBar .dijitMenuItemSelected { + // on hover or selection of MenuBar item, add border and reduce padding to compensate + border:solid 1px @hovered-border-color; + padding: 5px 9px 6px; } /* this prevents jiggling upon hover of a menu item */ @@ -76,50 +74,36 @@ There are three areas of styling for the Menu: .claro .dijitMenuItem td{ padding:1px; } -/* hover over a MenuBarItem */ -.claro .dijitMenuPassive .dijitMenuItemHover, -.claro .dijitMenuPassive .dijitMenuItemSelected { +/* hover over a MenuItem or MenuBarItem */ +.claro .dijitSelectMenu .dijitMenuItemHover td, +.claro .dijitSelectMenu .dijitMenuItemSelected td, +.claro .dijitMenuItemHover, +.claro .dijitMenuItemSelected { + // note: seems like the selected MenuItem should use @pressed-background-color + // and .active-gradient, but claro didn't to that background-color: @hovered-background-color; - border:solid 1px @hovered-border-color; - background-position:0 0; - color:@text-color; - padding: 5px 9px 6px; + .standard-gradient; } -.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; +.claro .dijitMenuItemActive { + // todo: seems like the selected MenuItem should come here + // todo: seems like should use @pressed-background-color + .active-gradient; } .dj_ie .claro .dijitMenuActive .dijitMenuItemHover, .dj_ie .claro .dijitMenuActive .dijitMenuItemSelected, .dj_ie .claro .dijitMenuPassive .dijitMenuItemHover, .dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected { + // Selectivity set to override ComboBox rules below. + // If this rule isn't present, on IE6 hovering an item in the ComboBox drop down causes two + // items to be highlighted (except when hovering the first item in the list) 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; + padding: 2px; + margin: 0 0 0 4px; } .claro td.dijitMenuItemLabel { padding-top: 5px; @@ -168,25 +152,26 @@ There are three areas of styling for the Menu: background-image: none; } +.claro .dijitSelectMenu .dijitMenuItem td, .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 .dijitSelectMenu .dijitMenuItemSelected td, .claro .dijitComboBoxMenu .dijitMenuItemSelected { color:@selected-text-color; border-color:@hovered-border-color; background-color:@hovered-background-color; } +.claro .dijitSelectMenu .dijitMenuItemHover td, .claro .dijitComboBoxMenu .dijitMenuItemHover { color: #000000; border-color: #769dc0; background-color: #abd6ff; - background-position: 0 0; } .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 { diff --git a/lib/dijit/themes/claro/ProgressBar.css b/lib/dijit/themes/claro/ProgressBar.css index 925021f7a..5716c4ae7 100644 --- a/lib/dijit/themes/claro/ProgressBar.css +++ b/lib/dijit/themes/claro/ProgressBar.css @@ -30,13 +30,20 @@ .claro .dijitProgressBarEmpty { /* outer container and background of the bar that's not finished yet*/ - background: #ffffff url("images/progressBarEmpty.png") no-repeat left; + background-color: #ffffff; border-color: #759dc0; } .claro .dijitProgressBarTile { /* inner container for finished portion when in 'tile' (image) mode */ - background: #abd6ff url("images/progressBarFull.png") repeat-x top; + background-color: #abd6ff; + background-image: url("images/progressBarFull.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%); + background-attachment: scroll; } .dj_ie6 .claro .dijitProgressBarTile { background-image: none; diff --git a/lib/dijit/themes/claro/ProgressBar.less b/lib/dijit/themes/claro/ProgressBar.less index 8edf426a0..096618f08 100644 --- a/lib/dijit/themes/claro/ProgressBar.less +++ b/lib/dijit/themes/claro/ProgressBar.less @@ -32,12 +32,18 @@ } .claro .dijitProgressBarEmpty { /* outer container and background of the bar that's not finished yet*/ - background: @progressbar-empty-background-color url(@image-progressbar-empty) no-repeat left; + background-color: @progressbar-empty-background-color; border-color: @progressbar-border-color; } .claro .dijitProgressBarTile { /* inner container for finished portion when in 'tile' (image) mode */ - background: @progressbar-full-background-color url(@image-progressbar-full) repeat-x top; + background-color: @progressbar-full-background-color; + + // gradient background using CSS gradient, with fallback to image for IE + background-image: url("images/progressBarFull.png"); + background-repeat: repeat-x; + .alpha-white-gradient(0.93,0px, 0.41,1px, 0.7,2px, 0,100%); + background-attachment: scroll; // override strange "fixed" setting from dijit.css } .dj_ie6 .claro .dijitProgressBarTile { background-image: none; diff --git a/lib/dijit/themes/claro/README b/lib/dijit/themes/claro/README index 3b4b4aa4e..0a254623f 100644 --- a/lib/dijit/themes/claro/README +++ b/lib/dijit/themes/claro/README @@ -1,41 +1,11 @@ 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. Add node 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 - -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, go to http://nodejs.org/#download (./configure, make, make install). +1. Install node from http://nodejs.org/#download -2. Edit .bash_profile etc. to add node to your path - - export PATH=$PATH:/opt/less/bin - -To compile all the files: +2. To compile all the files: $ cd dijit/themes/claro $ node compile.js ------ 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 c8d6bb29d..847bcc192 100644 --- a/lib/dijit/themes/claro/TimePicker.css +++ b/lib/dijit/themes/claro/TimePicker.css @@ -35,19 +35,19 @@ .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-image: url("images/standardGradient.png"); background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; 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; -} .claro .dijitTimePickerTick { /* minor value */ @@ -100,12 +100,13 @@ border-right: none; border-color: #b5bcc7; background-color: #efefef; - background-image: url("images/commonHighlight.png"); - background-position: 0 -1px; + background-image: url("images/standardGradient.png"); background-repeat: repeat-x; -} -.dj_ie6 .claro .dijitTimePicker .dijitButtonNode { - background-image: none; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; } .claro .dijitTimePicker .dijitArrowButtonInner { height: 100%; diff --git a/lib/dijit/themes/claro/TimePicker.less b/lib/dijit/themes/claro/TimePicker.less index a6253f7dd..0f3bf9c1a 100644 --- a/lib/dijit/themes/claro/TimePicker.less +++ b/lib/dijit/themes/claro/TimePicker.less @@ -34,19 +34,13 @@ } .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(@image-common-highlight); - background-position:0 -1px; - background-repeat:repeat-x; + .standard-gradient; 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; @@ -95,12 +89,7 @@ border-right:none; border-color:@border-color; background-color: @unselected-background-color; - background-image: url(@image-common-highlight); - background-position:0 -1px; - background-repeat:repeat-x; -} -.dj_ie6 .claro .dijitTimePicker .dijitButtonNode { - background-image: none; + .standard-gradient; } .claro .dijitTimePicker .dijitArrowButtonInner{ height: 100%; /* hack claro.button.css */ @@ -122,3 +111,5 @@ .claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner { background-position:-70px 45%; } + +// TODO: should have active rule, for clicking a .dijitTimePickerItem \ No newline at end of file diff --git a/lib/dijit/themes/claro/TitlePane.css b/lib/dijit/themes/claro/TitlePane.css index 141561506..356aef1cc 100644 --- a/lib/dijit/themes/claro/TitlePane.css +++ b/lib/dijit/themes/claro/TitlePane.css @@ -19,15 +19,17 @@ */ .claro .dijitTitlePaneTitle { background-color: #efefef; - background-image: url("images/titlebar.png"); + background-image: url("images/standardGradient.png"); background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; border: 1px solid #b5bcc7; padding: 0 7px 3px 7px; min-height: 17px; } -.dj_ie6 .claro .dijitTitlePaneTitle { - background-image: none; -} .claro .dijitTitlePaneTitleHover { background-color: #abd6ff; border-color: #759dc0; @@ -35,7 +37,13 @@ .claro .dijitTitlePaneTitleActive { background-color: #7dbdfa; border-color: #759dc0; - background-position: 0 -136px; + background-image: url("images/activeGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + _background-image: none; } .claro .dijitTitlePaneTitleFocus { margin-top: 3px; diff --git a/lib/dijit/themes/claro/TitlePane.less b/lib/dijit/themes/claro/TitlePane.less index 89da9f3d9..d899453d6 100644 --- a/lib/dijit/themes/claro/TitlePane.less +++ b/lib/dijit/themes/claro/TitlePane.less @@ -22,15 +22,11 @@ .claro .dijitTitlePaneTitle { background-color: @unselected-background-color; // TODO: Mailed Jason, shouldn't this toggle to @selected-background-color when pane opened? - background-image: url(@image-titlebar); - background-repeat:repeat-x; + .standard-gradient; 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; @@ -38,7 +34,7 @@ .claro .dijitTitlePaneTitleActive { background-color: @pressed-background-color; border-color: @pressed-border-color; - background-position:0 -136px; + .active-gradient; } .claro .dijitTitlePaneTitleFocus { margin-top:3px; diff --git a/lib/dijit/themes/claro/Toolbar.css b/lib/dijit/themes/claro/Toolbar.css index 18c605c66..da9cc015e 100644 --- a/lib/dijit/themes/claro/Toolbar.css +++ b/lib/dijit/themes/claro/Toolbar.css @@ -20,9 +20,13 @@ .claro .dijitToolbar { border-bottom: 1px solid #b5bcc7; background-color: #efefef; - background-image: url("images/commonHighlight.png"); - background-position: 0 0; + background-image: url("images/standardGradient.png"); background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; padding: 2px 0 2px 4px; zoom: 1; } @@ -47,13 +51,13 @@ -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; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + transition-duration: 0.3s; background-color: rgba(171, 214, 255, 0); + background-image: none; + /* cancel gradient for normal buttons, we don't want any gradient besides toolbar's on non-hovered buttons */ + } .dj_ie .claro .dijitToolbar .dijitButton .dijitButtonNode, .dj_ie .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode, @@ -63,15 +67,6 @@ background-color: transparent; /* for IE, which doesn't understand rgba(...) */ -} -.dj_ie6 .claro .dijitToolbar .dijitButton .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitToggleButton .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitComboBox .dijitButtonNode { - background: none; - /* because background-color: transparent above doesn't work on IE*/ - } /* hover status */ .dj_ie .claro .dijitToolbar .dijitButtonHover .dijitButtonNode, @@ -112,13 +107,18 @@ .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode { - background-position: 0 0; border-width: 1px; background-color: #abd6ff; + background-image: url("images/standardGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; padding: 1px; } .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { - background-position: 0 0; background-color: #f3ffff; } .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover { @@ -128,7 +128,13 @@ .claro .dijitToolbar .dijitButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { border-width: 1px; background-color: #7dbdfa; - background-position: 0 -177px; + background-image: url("images/activeGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + _background-image: none; padding: 1px; } .claro .dijitToolbar .dijitComboButtonActive { @@ -140,14 +146,27 @@ } .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { background-color: #f3ffff; - background-position: 0 -177px; padding: 2px; } .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive { background-color: #7dbdfa; + background-image: url("images/activeGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + _background-image: none; } .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive { background-color: #7dbdfa; + background-image: url("images/activeGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + _background-image: none; } /* Avoid double border between button and arrow */ .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { @@ -170,9 +189,6 @@ background-color: #ffffff; padding: 1px; } -.dj_ie6 .claro .dijitToolbar { - background-image: none; -} .claro .dijitToolbarSeparator { /* separator icon in the editor sprite */ diff --git a/lib/dijit/themes/claro/Toolbar.less b/lib/dijit/themes/claro/Toolbar.less index b61e8191a..90b9009e2 100644 --- a/lib/dijit/themes/claro/Toolbar.less +++ b/lib/dijit/themes/claro/Toolbar.less @@ -23,9 +23,7 @@ .claro .dijitToolbar { border-bottom: 1px solid @border-color; background-color: @bar-background-color; - background-image: url(@image-common-highlight); - background-position:0 0; - background-repeat:repeat-x; + .standard-gradient; padding: 2px 0 2px 4px; zoom: 1; } @@ -45,12 +43,10 @@ .border-radius(@toolbar-button-border-radius); .box-shadow(none); .transition-property(background-color); - .transition-duration(.3s, .35s); + .transition-duration(.3s); - background-image: url(@image-common-highlight); - background-position:0 -30px; - background-repeat:repeat-x; background-color:rgba(171,214,255,0); + background-image: none; /* cancel gradient for normal buttons, we don't want any gradient besides toolbar's on non-hovered buttons */ } .dj_ie .claro .dijitToolbar .dijitButton .dijitButtonNode, .dj_ie .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode, @@ -59,13 +55,7 @@ .dj_ie .claro .dijitToolbar .dijitComboBox .dijitButtonNode { background-color: transparent; /* for IE, which doesn't understand rgba(...) */ } -.dj_ie6 .claro .dijitToolbar .dijitButton .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitToggleButton .dijitButtonNode, -.dj_ie6 .claro .dijitToolbar .dijitComboBox .dijitButtonNode { - background: none; /* because background-color: transparent above doesn't work on IE*/ -} + /* hover status */ .dj_ie .claro .dijitToolbar .dijitButtonHover .dijitButtonNode, .dj_ie .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, @@ -103,14 +93,13 @@ .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode { - background-position:0 0; border-width:1px; background-color: @hovered-background-color; + .standard-gradient; 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, @@ -124,7 +113,7 @@ .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { border-width: 1px; background-color:@pressed-background-color; - background-position:0 -177px; + .active-gradient; padding: 1px; } .claro .dijitToolbar .dijitComboButtonActive { @@ -135,14 +124,15 @@ .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; + .active-gradient; } .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive { background-color: @pressed-background-color; + .active-gradient; } /* Avoid double border between button and arrow */ @@ -165,10 +155,6 @@ padding: 1px; } -.dj_ie6 .claro .dijitToolbar { - background-image: none; -} - .claro .dijitToolbarSeparator { /* separator icon in the editor sprite */ background: url(@image-editor-icons-enabled); diff --git a/lib/dijit/themes/claro/Tree.css b/lib/dijit/themes/claro/Tree.css index 738bb3313..f41b1da37 100644 --- a/lib/dijit/themes/claro/Tree.css +++ b/lib/dijit/themes/claro/Tree.css @@ -37,17 +37,13 @@ .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 */ - + padding: 4px 0 2px 0; background-color: none; background-color: transparent; background-color: rgba(171, 214, 255, 0); background-position: 0 0; background-repeat: repeat-x; - border-color: rgba(118, 157, 192, 0); - border-width: 0; + border: solid 0 transparent; color: #000000; -webkit-transition-property: background-color, border-color; -moz-transition-property: background-color, border-color; @@ -60,20 +56,31 @@ transition-timing-function: ease-out; } .claro .dijitTreeRowSelected { - background-repeat: repeat-x; background-color: #cfe5fa; - background-image: url("images/commonHighlight.png"); + background-image: url("images/standardGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; padding: 3px 0 1px; - margin: 0; - border: solid 1px #759dc0; + border-color: #759dc0; + border-width: 1px 0; color: #000000; } .claro .dijitTreeRowHover { background-color: #abd6ff; - background-image: url("images/commonHighlight.png"); + background-image: url("images/standardGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; padding: 3px 0 1px; - margin: 0; - border: solid 1px #759dc0; + border-color: #759dc0; + border-width: 1px 0; color: #000000; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; @@ -81,16 +88,18 @@ } .claro .dijitTreeRowActive { background-color: #7dbdfa; - background-image: url("images/commonHighlight.png"); - background-position: 0 -177px; + background-image: url("images/activeGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + _background-image: none; padding: 3px 0 1px; - margin-left: 0; - border: solid 1px #759dc0; + border-color: #759dc0; + border-width: 1px 0; color: #000000; } -.dj_ie6 .claro .dijitTreeRow { - background-image: none; -} .claro .dijitTreeRowFocused { background-repeat: repeat; } diff --git a/lib/dijit/themes/claro/Tree.less b/lib/dijit/themes/claro/Tree.less index ff6cd5a14..1b027769b 100644 --- a/lib/dijit/themes/claro/Tree.less +++ b/lib/dijit/themes/claro/Tree.less @@ -40,8 +40,7 @@ .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 */ + padding: 4px 0 2px 0; background-color: none; // IE6 doesn't understand rgba() or transparent below background-color: transparent; // IE8 doesn't understand rgba() below @@ -49,8 +48,7 @@ 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; + border: solid 0 transparent; color: @text-color; @@ -60,34 +58,29 @@ } .claro .dijitTreeRowSelected { - background-repeat:repeat-x; - background-color:@selected-background-color; - background-image: url(@image-common-highlight); + background-color: @selected-background-color; + .standard-gradient; padding: 3px 0 1px; - margin: 0; - border:solid 1px @selected-border-color; - color:@selected-text-color; + border-color: @selected-border-color; + border-width: 1px 0; + color: @selected-text-color; } .claro .dijitTreeRowHover { - background-color:@hovered-background-color; - background-image: url(@image-common-highlight); + background-color: @hovered-background-color; + .standard-gradient; padding: 3px 0 1px; - margin: 0; - border:solid 1px @hovered-border-color; - color:@hovered-text-color; + border-color: @hovered-border-color; + border-width: 1px 0; + color: @hovered-text-color; .transition-duration(.25s); } .claro .dijitTreeRowActive { background-color:@pressed-background-color; - background-image: url(@image-common-highlight); - background-position:0 -177px; + .active-gradient; padding: 3px 0 1px; - margin-left: 0; - border:solid 1px @pressed-border-color; - color:@selected-text-color; -} -.dj_ie6 .claro .dijitTreeRow { - background-image: none; + border-color: @pressed-border-color; + border-width: 1px 0; + color: @selected-text-color; } .claro .dijitTreeRowFocused { background-repeat: repeat; diff --git a/lib/dijit/themes/claro/claro_rtl.css b/lib/dijit/themes/claro/claro_rtl.css index 6f85707f5..aab8f0873 100644 --- a/lib/dijit/themes/claro/claro_rtl.css +++ b/lib/dijit/themes/claro/claro_rtl.css @@ -4,7 +4,6 @@ @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*/ diff --git a/lib/dijit/themes/claro/form/Button.css b/lib/dijit/themes/claro/form/Button.css index bc7c3dc18..f7718c105 100644 --- a/lib/dijit/themes/claro/form/Button.css +++ b/lib/dijit/themes/claro/form/Button.css @@ -43,16 +43,20 @@ border: 1px solid #759dc0; padding: 2px 4px 4px 4px; - background-image: url("../form/images/button.png"); - background-position: center top; - background-repeat: repeat-x; - background-color: #e5f2fe; color: #000000; -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); + background-color: #bcd8f4; + background-image: url("images/buttonEnabled.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); + background-image: -webkit-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); + background-image: -o-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); + background-image: linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); + _background-image: none; } .claro .dijitComboButton .dijitArrowButton { border-left-width: 0; @@ -100,7 +104,7 @@ .claro .dijitComboButton .dijitButtonNodeHover, .claro .dijitComboButton .dijitDownArrowButtonHover, .claro .dijitToggleButtonHover .dijitButtonNode { - background-color: #abd6ff; + background-color: #86bdf2; color: #000000; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; @@ -111,11 +115,11 @@ .claro .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitComboButtonActive .dijitButtonNode, .claro .dijitToggleButtonActive .dijitButtonNode, -.claro .dijitStackController .dijitToggleButtonChecked .dijitButtonNode { - 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); +.claro .dijitToggleButtonChecked .dijitButtonNode { + background-color: #86bdf2; + -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s; @@ -132,13 +136,18 @@ .claro .dijitDropDownButtonDisabled .dijitButtonNode, .claro .dijitComboButtonDisabled .dijitButtonNode, .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); + background-image: url("images/buttonDisabled.png"); + background-image: -moz-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); + background-image: -webkit-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); + background-image: -o-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); + background-image: linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); + _background-image: none; } .claro .dijitComboButtonDisabled .dijitArrowButton { border-left-width: 0; @@ -149,9 +158,6 @@ /* override dijit.css so that ComboBox rounded corners work */ } -.dj_ie6 .claro .dijitButtonNode { - background-image: none; -} .claro .dijitComboButton .dijitStretch { -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; diff --git a/lib/dijit/themes/claro/form/Button.less b/lib/dijit/themes/claro/form/Button.less index 208e4de52..5d5953237 100644 --- a/lib/dijit/themes/claro/form/Button.less +++ b/lib/dijit/themes/claro/form/Button.less @@ -40,16 +40,22 @@ .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("../@{image-form-button}"); - background-position: center top; - background-repeat: repeat-x; - background-color: @button-background-color; + padding: 2px 4px 4px 4px; color: @text-color; .border-radius(@button-border-radius); .box-shadow(0 1px 1px rgba(0,0,0,0.15)); + + background-color: desaturate(darken(@button-background-color, 10), 20); + + // Alpha transparency layer to add gradient to above background color. + // Use CSS gradient with fallback to image for IE. + background-image: url("images/buttonEnabled.png"); + background-repeat: repeat-x; + .alpha-white-gradient(1, 0px, 0, 3px, 0.75, 100%); + _background-image: none; // IE6 can't handle background-color and background-image at once. } + .claro .dijitComboButton .dijitArrowButton { border-left-width: 0; padding: 4px 2px 4px 2px; /* TODO: still needed? */ @@ -101,7 +107,7 @@ .claro .dijitComboButton .dijitButtonNodeHover, .claro .dijitComboButton .dijitDownArrowButtonHover, .claro .dijitToggleButtonHover .dijitButtonNode { - background-color: @button-hovered-background-color; + background-color: desaturate(darken(@button-hovered-background-color, 10), 20); color:@text-color; .transition-duration(.2s); } @@ -111,9 +117,9 @@ .claro .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitComboButtonActive .dijitButtonNode, .claro .dijitToggleButtonActive .dijitButtonNode, -.claro .dijitStackController .dijitToggleButtonChecked .dijitButtonNode { - background-color: @button-pressed-background-color; - .box-shadow(0 0 0 rgba(0,0,0,0)); +.claro .dijitToggleButtonChecked .dijitButtonNode { + background-color: desaturate(darken(@button-pressed-background-color, 10), 20); + .box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2)); .transition-duration(.1s); } @@ -129,13 +135,19 @@ .claro .dijitButtonDisabled .dijitButtonNode, .claro .dijitDropDownButtonDisabled .dijitButtonNode, .claro .dijitComboButtonDisabled .dijitButtonNode, -.claro .dijitToggleButtonDisabled .dijitButtonNode { - background-position:0 -149px; +.claro .dijitToggleButtonDisabled .dijitButtonNode { 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)); + + // Change the gradient from light to dark. + // Again using CSS gradient with fallback to image for IE. + background-image: url("images/buttonDisabled.png"); + .alpha-white-gradient(1, 0%, 0, 40%); + _background-image: none; // IE6 can't handle background-color and background-image at once. } + .claro .dijitComboButtonDisabled .dijitArrowButton{ border-left-width: 0; } @@ -144,10 +156,6 @@ 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); } diff --git a/lib/dijit/themes/claro/form/Common.css b/lib/dijit/themes/claro/form/Common.css index ce108c1ae..b7b91c134 100644 --- a/lib/dijit/themes/claro/form/Common.css +++ b/lib/dijit/themes/claro/form/Common.css @@ -4,15 +4,17 @@ .claro .dijitTextBox, .claro .dijitInputInner { color: #000000; } -.claro .dijitTextBoxError .dijitValidationContainer { +.claro .dijitValidationTextBoxError .dijitValidationContainer { background-color: #d46464; background-image: url("../form/images/error.png"); background-position: top center; border: solid #d46464 0; - border-left-width: 1px; width: 9px; } -.claro .dijitTextBoxError .dijitValidationIcon { +.claro .dijitTextBoxError .dijitValidationContainer { + border-left-width: 1px; +} +.claro .dijitValidationTextBoxError .dijitValidationIcon { width: 0; background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */ @@ -26,13 +28,16 @@ .claro .dijitTextArea, .claro .dijitInputField .dijitPlaceHolder { padding: 2px; } -.claro .dijitTextBox .dijitInputField { +.claro .dijitSelect .dijitInputField, .claro .dijitTextBox .dijitInputField { padding: 1px 2px; } .dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner { padding: 1px; } -.claro .dijitTextBox, .claro .dijitTextBox .dijitButtonNode { +.claro .dijitSelect, +.claro .dijitSelect .dijitButtonContents, +.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; @@ -43,11 +48,14 @@ -moz-transition-duration: 0.35s; transition-duration: 0.35s; } -.claro .dijitTextBox { +.claro .dijitSelect, .claro .dijitTextBox { background-color: #ffffff; } /* hover */ -.claro .dijitTextBoxHover, .claro .dijitTextBoxHover .dijitButtonNode { +.claro .dijitSelectHover, +.claro .dijitSelectHover .dijitButtonContents, +.claro .dijitTextBoxHover, +.claro .dijitTextBoxHover .dijitButtonNode { border-color: #759dc0; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; @@ -55,18 +63,23 @@ } .claro .dijitTextBoxHover { background-color: #e5f2fe; - background-image: url("../form/images/textBox_back.png"); - background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); } /* error state */ -.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitButtonNode { +.claro .dijitSelectError, +.claro .dijitSelectError .dijitButtonContents, +.claro .dijitTextBoxError, +.claro .dijitTextBoxError .dijitButtonNode { border-color: #d46464; } -.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitInputContainer { - background-color: #ffffff; -} /* focused state */ -.claro .dijitTextBoxFocused, .claro .dijitTextBoxFocused .dijitButtonNode { +.claro .dijitSelectFocused, +.claro .dijitSelectFocused .dijitButtonContents, +.claro .dijitTextBoxFocused, +.claro .dijitTextBoxFocused .dijitButtonNode { border-color: #759dc0; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; @@ -74,27 +87,35 @@ } .claro .dijitTextBoxFocused { background-color: #ffffff; - background-image: url("../form/images/textBox_back.png"); - background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); } .claro .dijitTextBoxFocused .dijitInputContainer { background: #ffffff; } -.claro .dijitTextBoxErrorFocused, .claro .dijitTextBoxErrorFocused .dijitButtonNode { +.claro .dijitSelectErrorFocused, +.claro .dijitSelectErrorFocused .dijitButtonContents, +.claro .dijitTextBoxErrorFocused, +.claro .dijitTextBoxErrorFocused .dijitButtonNode { border-color: #ce5050; } /* disabled state */ -.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitButtonNode { +.claro .dijitSelectDisabled, +.claro .dijitSelectDisabled .dijitButtonContents, +.claro .dijitTextBoxDisabled, +.claro .dijitTextBoxDisabled .dijitButtonNode { border-color: #d3d3d3; } -.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer { +.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer { background-color: #efefef; background-image: none; } -.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner { +.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner { color: #818181; } -.dj_webkit .claro .dijitTextBoxDisabled input { +.dj_webkit .claro .dijitDisabled input { /* because WebKit lightens disabled input/textarea no matter what color you specify */ color: #757575; @@ -106,12 +127,14 @@ } /*========================= for special widgets =========================*/ /* Input boxes with an arrow (for a drop down) */ -.claro .dijitComboBox .dijitArrowButtonInner { +.claro .dijitSelect .dijitArrowButtonInner, .claro .dijitComboBox .dijitArrowButtonInner { background-image: url("../form/images/commonFormArrows.png"); background-position: -35px 53%; background-repeat: no-repeat; margin: 0; width: 16px; +} +.claro .dijitComboBox .dijitArrowButtonInner { border: 1px solid #ffffff; } .claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { @@ -122,13 +145,18 @@ } /* 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 { +.claro .dijitSelectLabel, .claro .dijitTextBox .dijitInputInner, .claro .dijitValidationTextBox .dijitValidationContainer { padding: 1px 0; } .claro .dijitComboBox .dijitButtonNode { background-color: #efefef; - background-image: url("../form/images/formHighlight.png"); + background-image: url("../images/standardGradient.png"); background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; } /* Arrow "hover" effect: * The arrow button should change color whenever the mouse is in a position such that clicking it @@ -144,9 +172,18 @@ /* Arrow Button change when drop down is open */ .claro .dijitComboBox .dijitHasDropDownOpen { background-color: #7dbdfa; - background-position: 0 -177px; + background-image: url("../images/activeGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + _background-image: none; padding: 1px; } +.dj_iequirks .claro .dijitComboBox .dijitHasDropDownOpen { + padding: 1px 0; +} .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { background-position: -70px 53%; border: 0 none; @@ -166,10 +203,6 @@ 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; } diff --git a/lib/dijit/themes/claro/form/Common.less b/lib/dijit/themes/claro/form/Common.less index 742a43ff7..3c625f46f 100644 --- a/lib/dijit/themes/claro/form/Common.less +++ b/lib/dijit/themes/claro/form/Common.less @@ -13,15 +13,19 @@ color: @text-color; } -.claro .dijitTextBoxError .dijitValidationContainer { +.claro .dijitValidationTextBoxError .dijitValidationContainer { background-color: @erroricon-background-color; background-image: url("../@{image-form-error}"); background-position: top center; border: solid @erroricon-background-color 0; - border-left-width: 1px; width: 9px; } -.claro .dijitTextBoxError .dijitValidationIcon { + +.claro .dijitTextBoxError .dijitValidationContainer { + border-left-width: 1px; +} + +.claro .dijitValidationTextBoxError .dijitValidationIcon { width: 0; background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */ } @@ -35,12 +39,15 @@ .claro .dijitInputField .dijitPlaceHolder { padding: @textbox-padding; } + +.claro .dijitSelect .dijitInputField, .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, @@ -48,6 +55,8 @@ padding: @textbox-padding - 1px; } +.claro .dijitSelect, +.claro .dijitSelect .dijitButtonContents, .claro .dijitTextBox, .claro .dijitTextBox .dijitButtonNode { /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */ @@ -55,70 +64,84 @@ .transition-property(background-color, border); .transition-duration(.35s); } + +.claro .dijitSelect, .claro .dijitTextBox { background-color: @textbox-background-color; } /* hover */ +.claro .dijitSelectHover, +.claro .dijitSelectHover .dijitButtonContents, .claro .dijitTextBoxHover, .claro .dijitTextBoxHover .dijitButtonNode { border-color: @hovered-border-color; .transition-duration(.25s); } + .claro .dijitTextBoxHover { background-color: @textbox-hovered-background-color; - background-image: url("../@{image-form-textbox-background}"); - background-repeat: repeat-x; + .textbox-background-image; } /* error state */ +.claro .dijitSelectError, +.claro .dijitSelectError .dijitButtonContents, .claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitButtonNode { border-color: @error-border-color; } -.claro .dijitTextBoxError, -.claro .dijitTextBoxError .dijitInputContainer { - background-color: @textbox-error-background-color; -} /* focused state */ +.claro .dijitSelectFocused, +.claro .dijitSelectFocused .dijitButtonContents, .claro .dijitTextBoxFocused, .claro .dijitTextBoxFocused .dijitButtonNode { border-color:@focused-border-color; .transition-duration(.1s); } + .claro .dijitTextBoxFocused { background-color: @textbox-focused-background-color; - background-image: url("../@{image-form-textbox-background}"); - background-repeat: repeat-x; + .textbox-background-image; } .claro .dijitTextBoxFocused .dijitInputContainer { background: @textbox-focused-background-color; } +.claro .dijitSelectErrorFocused, +.claro .dijitSelectErrorFocused .dijitButtonContents, .claro .dijitTextBoxErrorFocused, .claro .dijitTextBoxErrorFocused .dijitButtonNode { border-color: @error-focused-border-color; } /* disabled state */ +.claro .dijitSelectDisabled, +.claro .dijitSelectDisabled .dijitButtonContents, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitButtonNode { border-color: @disabled-border-color; } + +.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer { background-color: @textbox-disabled-background-color; background-image: none; } + +.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner { color: @disabled-text-color; } -.dj_webkit .claro .dijitTextBoxDisabled input { + +.dj_webkit .claro .dijitDisabled input { /* because WebKit lightens disabled input/textarea no matter what color you specify */ color: darken(@disabled-text-color, 5%) } + .dj_webkit .claro textarea.dijitTextAreaDisabled { /* because WebKit lightens disabled input/textarea no matter what color you specify */ color: darken(@disabled-text-color, 40%) @@ -128,12 +151,16 @@ /* Input boxes with an arrow (for a drop down) */ +.claro .dijitSelect .dijitArrowButtonInner, .claro .dijitComboBox .dijitArrowButtonInner { background-image: url("../@{image-form-common-arrows}"); background-position:-35px 53%; background-repeat: no-repeat; margin: 0; width:16px; +} + +.claro .dijitComboBox .dijitArrowButtonInner { border: 1px solid @arrowbutton-inner-border-color; // white gutter around the arrow button } @@ -147,15 +174,15 @@ /* Add 1px vertical padding to the where user types and the validation icon, to match the 1px border on arrow button */ +.claro .dijitSelectLabel, .claro .dijitTextBox .dijitInputInner, -.claro .dijitTextBox .dijitValidationContainer { +.claro .dijitValidationTextBox .dijitValidationContainer { padding: 1px 0; } .claro .dijitComboBox .dijitButtonNode { background-color: @arrowbutton-background-color; - background-image: url("../@{image-form-highlight}"); - background-repeat:repeat-x; + .standard-gradient("../"); } /* Arrow "hover" effect: @@ -167,6 +194,7 @@ .claro .dijitComboBox .dijitDownArrowButtonHover { background-color:@arrowbutton-hovered-background-color; } + .claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner, .claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner { background-position:-70px 53%; @@ -175,9 +203,14 @@ /* 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; + .active-gradient("../"); padding: 1px; // Since no border on arrow button (see rule below) } + +.dj_iequirks .claro .dijitComboBox .dijitHasDropDownOpen { + padding: 1px 0; +} + .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { background-position:-70px 53%; border: 0 none; @@ -199,14 +232,10 @@ 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 } diff --git a/lib/dijit/themes/claro/form/Common_rtl.css b/lib/dijit/themes/claro/form/Common_rtl.css index 74827c16f..f5206c196 100644 --- a/lib/dijit/themes/claro/form/Common_rtl.css +++ b/lib/dijit/themes/claro/form/Common_rtl.css @@ -1,10 +1,5 @@ /* 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; + border-left-width: 0 !important; + border-right-width: 1px !important; } diff --git a/lib/dijit/themes/claro/form/Common_rtl.less b/lib/dijit/themes/claro/form/Common_rtl.less index fd4975a51..7c9952993 100644 --- a/lib/dijit/themes/claro/form/Common_rtl.less +++ b/lib/dijit/themes/claro/form/Common_rtl.less @@ -2,12 +2,7 @@ @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; + border-left-width: 0 !important; + border-right-width: 1px !important; } diff --git a/lib/dijit/themes/claro/form/NumberSpinner.css b/lib/dijit/themes/claro/form/NumberSpinner.css index fcc804969..70603b7e7 100644 --- a/lib/dijit/themes/claro/form/NumberSpinner.css +++ b/lib/dijit/themes/claro/form/NumberSpinner.css @@ -35,9 +35,13 @@ .claro .dijitSpinner .dijitArrowButton { width: auto; background-color: #efefef; - background-image: url("../form/images/formHighlight.png"); - background-position: 0 0; + background-image: url("../images/standardGradient.png"); background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; overflow: hidden; } .dj_iequirks .claro .dijitSpinner .dijitArrowButton { @@ -70,7 +74,10 @@ /* compensate for inner border */ } -.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, .dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner { +.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner, +.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, +.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner, +.dj_ie8 .claro .dijitSpinner .dijitArrowButtonInner { margin-top: 0; /* since its bottom aligned */ @@ -104,7 +111,13 @@ /* mouse down status */ .claro .dijitSpinner .dijitDownArrowButtonActive, .claro .dijitSpinner .dijitUpArrowButtonActive { background-color: #7dbefa; - background-position: 0 -177px; + background-image: url("../images/activeGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + _background-image: none; } .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { /* hide inner border while button is depressed */ diff --git a/lib/dijit/themes/claro/form/NumberSpinner.less b/lib/dijit/themes/claro/form/NumberSpinner.less index 1c79d3a37..e15c7821d 100644 --- a/lib/dijit/themes/claro/form/NumberSpinner.less +++ b/lib/dijit/themes/claro/form/NumberSpinner.less @@ -37,9 +37,7 @@ .claro .dijitSpinner .dijitArrowButton { width:auto; background-color: @arrowbutton-background-color; - background-image: url("../@{image-form-highlight}"); - background-position:0 0; - background-repeat:repeat-x; + .standard-gradient("../"); overflow: hidden; } .dj_iequirks .claro .dijitSpinner .dijitArrowButton { @@ -68,8 +66,10 @@ margin: -1px 0 -1px 0; /* compensate for inner border */ } +.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner, .dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, -.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner { +.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner, +.dj_ie8 .claro .dijitSpinner .dijitArrowButtonInner { margin-top: 0; /* since its bottom aligned */ } @@ -112,7 +112,7 @@ .claro .dijitSpinner .dijitDownArrowButtonActive, .claro .dijitSpinner .dijitUpArrowButtonActive { background-color: #7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior. - background-position:0 -177px; + .active-gradient("../"); } .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { diff --git a/lib/dijit/themes/claro/form/Select.css b/lib/dijit/themes/claro/form/Select.css index bfbca4ec8..5158dbd17 100644 --- a/lib/dijit/themes/claro/form/Select.css +++ b/lib/dijit/themes/claro/form/Select.css @@ -16,82 +16,69 @@ * 4. Various states * .dijitSelectHover|.dijitSelectFocused|.dijitSelectDisabled .* - for border, padding and background-color|image */ -.claro .dijitSelect .dijitButtonText { - padding: 2px; -} /* normal status */ -.claro .dijitSelect { - border: 1px solid #b5bcc7; - background-color: #ffffff; - border-collapse: separate; -} -.dj_ie6 .claro .dijitSelect, .dj_ie6 .claro .dijitSelect .dijitButtonNode { - background-image: none; -} -.claro .dijitSelect .dijitButtonContents { - border: 0 solid #b5bcc7; - border-right-width: 1px; +.claro .dijitSelect .dijitArrowButtonContainer { + border: 1px solid #ffffff; } .claro .dijitSelect .dijitArrowButton { padding: 0; - border: 1px solid #ffffff; - border-top: none; background-color: #efefef; - background-image: url("../form/images/formHighlight.png"); + background-image: url("../images/standardGradient.png"); background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; } .claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner { - background-image: url("../form/images/commonFormArrows.png"); - background-position: -35px 70%; - background-repeat: no-repeat; - width: 16px; height: 16px; } /* hover status */ .claro .dijitSelectHover { - border: 1px solid #759dc0; background-color: #e5f2fe; - background-image: url("../form/images/textBox_back.png"); + background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); + background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); background-repeat: repeat-x; } -.claro .dijitSelectHover .dijitButtonContents { +.claro .dijitSelectFocused, .claro .dijitSelectHover { border-color: #759dc0; } .claro .dijitSelectHover .dijitArrowButton { background-color: #abd6ff; } .claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner { - background-position: -70px 70%; + background-position: -70px 53%; } /* focused status */ -.claro .dijitSelectFocused { - border: 1px solid #759dc0; -} -.claro .dijitSelectFocused .dijitButtonContents { - border-color: #759dc0; -} .claro .dijitSelectFocused .dijitArrowButton { background-color: #7dbefa; - background-position: 0 -177px; + background-image: url("../images/activeGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + _background-image: none; +} +.claro .dijitSelectFocused .dijitArrowButton { border: none; - padding: 0 1px; + padding: 1px; } .claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner { - background-position: -70px 70%; - margin-bottom: 1px; + background-position: -70px 53%; } /* disable status */ .claro .dijitSelectDisabled { - border: 1px solid #d3d3d3; + border-color: #d3d3d3; background-color: #efefef; background-image: none; color: #818181; } -.claro .dijitSelectDisabled .dijitArrowButton { - background-color: #efefef; -} .claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner { - background-position: 0 70%; + background-position: 0 53%; } /* Dropdown menu style for select */ .claro .dijitSelectMenu td.dijitMenuItemIconCell, .claro .dijitSelectMenu td.dijitMenuArrowCell { diff --git a/lib/dijit/themes/claro/form/Select.less b/lib/dijit/themes/claro/form/Select.less index 0e7426112..3c2cac682 100644 --- a/lib/dijit/themes/claro/form/Select.less +++ b/lib/dijit/themes/claro/form/Select.less @@ -19,101 +19,75 @@ @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 .dijitArrowButtonContainer { + border: 1px solid @arrowbutton-inner-border-color; } .claro .dijitSelect .dijitArrowButton { padding: 0; - border: 1px solid @arrowbutton-inner-border-color; - border-top:none; background-color: @arrowbutton-background-color; - background-image: url("../@{image-form-highlight}"); - background-repeat:repeat-x; + .standard-gradient("../"); } .claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner { - background-image: url("../@{image-form-common-arrows}"); - 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("../@{image-form-textbox-background}"); + .textbox-background-image; background-repeat: repeat-x; } -.claro .dijitSelectHover .dijitButtonContents { +.claro .dijitSelectFocused, +.claro .dijitSelectHover { border-color:@hovered-border-color; } .claro .dijitSelectHover .dijitArrowButton { background-color:@arrowbutton-hovered-background-color; } + .claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner { - background-position:-70px 70%; + background-position:-70px 53%; } /* 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; + .active-gradient("../"); +} + +.claro .dijitSelectFocused .dijitArrowButton { border: none; - padding: 0 1px; + padding: 1px; } + .claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner { - background-position:-70px 70%; - margin-bottom: 1px; + background-position:-70px 53%; } /* disable status */ .claro .dijitSelectDisabled { - border: 1px solid @disabled-border-color; + border-color: @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% + background-position:0 53% } /* 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; diff --git a/lib/dijit/themes/claro/form/Select_rtl.css b/lib/dijit/themes/claro/form/Select_rtl.css deleted file mode 100644 index a14d4ec42..000000000 --- a/lib/dijit/themes/claro/form/Select_rtl.css +++ /dev/null @@ -1,4 +0,0 @@ -.claro .dijitSelectRtl .dijitButtonContents { - 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 deleted file mode 100644 index ffa40dc44..000000000 --- a/lib/dijit/themes/claro/form/Select_rtl.less +++ /dev/null @@ -1,6 +0,0 @@ -@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 eb82e17ad..b704a1b56 100644 --- a/lib/dijit/themes/claro/form/Slider.css +++ b/lib/dijit/themes/claro/form/Slider.css @@ -63,7 +63,7 @@ background-image: none; border-color: #d3d3d3; } -.claro .dijitRuleLabel { +.claro .dijitRuleLabelsContainer { color: #000000; } /* Horizontal Slider */ @@ -71,16 +71,14 @@ padding: 2px 0; } .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; + background-image: -moz-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); + background-image: -webkit-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); + background-image: -o-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); + background-image: linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px); } .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: #ffffff; } @@ -91,24 +89,26 @@ border-left: solid 1px #b5bcc7; } .claro .dijitSliderHover .dijitSliderProgressBarH, .claro .dijitSliderHover .dijitSliderLeftBumper { - background-position: 0 -20px; background-color: #abd6ff; border-color: #759dc0; } .claro .dijitSliderHover .dijitSliderRemainingBarH, .claro .dijitSliderHover .dijitSliderRightBumper { - background-position: 0 0; background-color: #ffffff; border-color: #759dc0; } .claro .dijitSliderFocused .dijitSliderProgressBarH, .claro .dijitSliderFocused .dijitSliderLeftBumper { - background-position: 0 -30px; background-color: #abd6ff; border-color: #759dc0; + -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); } .claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper { - background-position: 0 -9px; background-color: #ffffff; border-color: #759dc0; + -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); } .claro .dijitSliderDisabled .dijitSliderProgressBarH, .claro .dijitSliderDisabled .dijitSliderLeftBumper { background-color: #d3d3d3; @@ -124,16 +124,14 @@ padding: 0 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; + background-image: -moz-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); + background-image: -webkit-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); + background-image: -o-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); + background-image: linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px); } .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: #ffffff; } @@ -144,20 +142,26 @@ border-top: solid 1px #b5bcc7; } .claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper { - background-position: -36px 0; background-color: #abd6ff; + border-color: #759dc0; } .claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper { - background-position: 0 0; background-color: #ffffff; + border-color: #759dc0; } .claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper { - background-position: -56px 0; background-color: #abd6ff; + border-color: #759dc0; + -webkit-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); } .claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper { - background-position: -18px 0; background-color: #ffffff; + border-color: #759dc0; + -webkit-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); + -moz-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); + box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2); } .claro .dijitSliderDisabled .dijitSliderProgressBarV, .claro .dijitSliderDisabled .dijitSliderBottomBumper { background-color: #d3d3d3; @@ -317,13 +321,3 @@ background-position: -107px 49%; background-color: #efefef; } -.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.less b/lib/dijit/themes/claro/form/Slider.less index db0f8cb24..2c5bfe914 100644 --- a/lib/dijit/themes/claro/form/Slider.less +++ b/lib/dijit/themes/claro/form/Slider.less @@ -66,7 +66,7 @@ background-image: none; border-color: @disabled-border-color; } -.claro .dijitRuleLabel { +.claro .dijitRuleLabelsContainer { color: @text-color; } @@ -77,17 +77,12 @@ } .claro .dijitSlider .dijitSliderProgressBarH, .claro .dijitSlider .dijitSliderLeftBumper{ - background-image: url("../@{image-form-slider-horizontal}"); - background-repeat:repeat-x; - background-position:0 -20px; border-color: @border-color; background-color: @slider-fullbar-background-color; + .alpha-white-gradient (top, 1,0px, 1,1px, 0,2px); } .claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper{ - background-image: url("../@{image-form-slider-horizontal}"); - background-repeat:repeat-x; - background-position:0 -11px; border-color: @border-color; background-color: @slider-remainingbar-background-color; } @@ -99,27 +94,25 @@ } .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; + .box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2)); } .claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper{ - background-position:0 -9px; background-color: @slider-focused-remainingbar-background-color; border-color: @focused-border-color; + .box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2)); } .claro .dijitSliderDisabled .dijitSliderProgressBarH, .claro .dijitSliderDisabled .dijitSliderLeftBumper{ @@ -138,17 +131,12 @@ } .claro .dijitSlider .dijitSliderProgressBarV, .claro .dijitSlider .dijitSliderBottomBumper{ - background-image: url("../@{image-form-slider-vertical}"); - background-repeat:repeat-y; - background-position:-36px 0; border-color: @border-color; background-color: @slider-fullbar-background-color; + .alpha-white-gradient (left, 1,0px, 0,1px); } .claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper{ - background-image: url("../@{image-form-slider-vertical}"); - background-repeat:repeat-y; - background-position:-3px 0; border-color: @border-color; background-color: @slider-remainingbar-background-color; } @@ -160,23 +148,25 @@ } .claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper{ - background-position:-36px 0; background-color: @slider-hovered-fullbar-background-color; + border-color: @hovered-border-color; } .claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper{ - background-position:0 0; background-color: @slider-hovered-remainingbar-background-color; + border-color: @hovered-border-color; } .claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper{ - background-position:-56px 0; background-color: @slider-focused-fullbar-background-color; + border-color: @focused-border-color; + .box-shadow(inset 1px 0px 1px rgba(0, 0, 0, 0.2)); } .claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper{ - background-position:-18px 0; background-color: @slider-focused-remainingbar-background-color; + border-color: @focused-border-color; + .box-shadow(inset 1px 0px 1px rgba(0, 0, 0, 0.2)); } .claro .dijitSliderDisabled .dijitSliderProgressBarV, .claro .dijitSliderDisabled .dijitSliderBottomBumper{ @@ -352,14 +342,3 @@ 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/images/button.png b/lib/dijit/themes/claro/form/images/button.png deleted file mode 100644 index cb787cb2c..000000000 Binary files a/lib/dijit/themes/claro/form/images/button.png and /dev/null differ diff --git a/lib/dijit/themes/claro/form/images/buttonDisabled.png b/lib/dijit/themes/claro/form/images/buttonDisabled.png new file mode 100644 index 000000000..faf57ba1d Binary files /dev/null and b/lib/dijit/themes/claro/form/images/buttonDisabled.png differ diff --git a/lib/dijit/themes/claro/form/images/buttonDisabled.svg b/lib/dijit/themes/claro/form/images/buttonDisabled.svg new file mode 100644 index 000000000..72a51a017 --- /dev/null +++ b/lib/dijit/themes/claro/form/images/buttonDisabled.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/images/buttonEnabled.png b/lib/dijit/themes/claro/form/images/buttonEnabled.png new file mode 100644 index 000000000..0932a9947 Binary files /dev/null and b/lib/dijit/themes/claro/form/images/buttonEnabled.png differ diff --git a/lib/dijit/themes/claro/form/images/buttonEnabled.svg b/lib/dijit/themes/claro/form/images/buttonEnabled.svg new file mode 100644 index 000000000..d9e564ab8 --- /dev/null +++ b/lib/dijit/themes/claro/form/images/buttonEnabled.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/lib/dijit/themes/claro/form/images/button_grad_d.png b/lib/dijit/themes/claro/form/images/button_grad_d.png deleted file mode 100644 index 3a71a4653..000000000 Binary files a/lib/dijit/themes/claro/form/images/button_grad_d.png and /dev/null differ diff --git a/lib/dijit/themes/claro/form/images/formHighlight.png b/lib/dijit/themes/claro/form/images/formHighlight.png deleted file mode 100644 index f90eb25ba..000000000 Binary files a/lib/dijit/themes/claro/form/images/formHighlight.png and /dev/null differ diff --git a/lib/dijit/themes/claro/form/images/shadow.png b/lib/dijit/themes/claro/form/images/shadow.png deleted file mode 100644 index 72d60e628..000000000 Binary files a/lib/dijit/themes/claro/form/images/shadow.png and /dev/null differ diff --git a/lib/dijit/themes/claro/form/images/sliderHorizontal.png b/lib/dijit/themes/claro/form/images/sliderHorizontal.png deleted file mode 100644 index d769a6489..000000000 Binary files a/lib/dijit/themes/claro/form/images/sliderHorizontal.png and /dev/null differ diff --git a/lib/dijit/themes/claro/form/images/sliderVertical.png b/lib/dijit/themes/claro/form/images/sliderVertical.png deleted file mode 100644 index 9d69d04c2..000000000 Binary files a/lib/dijit/themes/claro/form/images/sliderVertical.png and /dev/null differ diff --git a/lib/dijit/themes/claro/form/images/textBox_back.png b/lib/dijit/themes/claro/form/images/textBox_back.png deleted file mode 100644 index dfc752afe..000000000 Binary files a/lib/dijit/themes/claro/form/images/textBox_back.png and /dev/null differ diff --git a/lib/dijit/themes/claro/images/activeGradient.png b/lib/dijit/themes/claro/images/activeGradient.png new file mode 100644 index 000000000..7e5716c0b Binary files /dev/null and b/lib/dijit/themes/claro/images/activeGradient.png differ diff --git a/lib/dijit/themes/claro/images/activeGradient.svg b/lib/dijit/themes/claro/images/activeGradient.svg new file mode 100644 index 000000000..8ab6ce9c1 --- /dev/null +++ b/lib/dijit/themes/claro/images/activeGradient.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/lib/dijit/themes/claro/images/calendar.png b/lib/dijit/themes/claro/images/calendar.png new file mode 100644 index 000000000..de66cbdb4 Binary files /dev/null and b/lib/dijit/themes/claro/images/calendar.png differ diff --git a/lib/dijit/themes/claro/images/calendarContainerImages.png b/lib/dijit/themes/claro/images/calendarContainerImages.png deleted file mode 100644 index 44fa088b7..000000000 Binary files a/lib/dijit/themes/claro/images/calendarContainerImages.png and /dev/null differ diff --git a/lib/dijit/themes/claro/images/commonHighlight.png b/lib/dijit/themes/claro/images/commonHighlight.png deleted file mode 100644 index f90eb25ba..000000000 Binary files a/lib/dijit/themes/claro/images/commonHighlight.png and /dev/null differ diff --git a/lib/dijit/themes/claro/images/dnd.png b/lib/dijit/themes/claro/images/dnd.png index 8cb04aa43..29bef4d38 100644 Binary files a/lib/dijit/themes/claro/images/dnd.png and b/lib/dijit/themes/claro/images/dnd.png differ diff --git a/lib/dijit/themes/claro/images/menuHighlight.png b/lib/dijit/themes/claro/images/menuHighlight.png deleted file mode 100644 index 22328a7d8..000000000 Binary files a/lib/dijit/themes/claro/images/menuHighlight.png and /dev/null differ diff --git a/lib/dijit/themes/claro/images/progressBarEmpty.png b/lib/dijit/themes/claro/images/progressBarEmpty.png deleted file mode 100644 index e0a68561f..000000000 Binary files a/lib/dijit/themes/claro/images/progressBarEmpty.png and /dev/null differ diff --git a/lib/dijit/themes/claro/images/standardGradient.png b/lib/dijit/themes/claro/images/standardGradient.png new file mode 100644 index 000000000..345402f62 Binary files /dev/null and b/lib/dijit/themes/claro/images/standardGradient.png differ diff --git a/lib/dijit/themes/claro/images/standardGradient.svg b/lib/dijit/themes/claro/images/standardGradient.svg new file mode 100644 index 000000000..807c3c70b --- /dev/null +++ b/lib/dijit/themes/claro/images/standardGradient.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/lib/dijit/themes/claro/images/titlebar.png b/lib/dijit/themes/claro/images/titlebar.png deleted file mode 100644 index 48181035a..000000000 Binary files a/lib/dijit/themes/claro/images/titlebar.png and /dev/null differ diff --git a/lib/dijit/themes/claro/images/tooltipGradient.png b/lib/dijit/themes/claro/images/tooltipGradient.png deleted file mode 100644 index ce4860e79..000000000 Binary files a/lib/dijit/themes/claro/images/tooltipGradient.png and /dev/null differ diff --git a/lib/dijit/themes/claro/images/treeExpand_loading.gif b/lib/dijit/themes/claro/images/treeExpand_loading.gif deleted file mode 100644 index 424d376ac..000000000 Binary files a/lib/dijit/themes/claro/images/treeExpand_loading.gif and /dev/null differ diff --git a/lib/dijit/themes/claro/layout/AccordionContainer.css b/lib/dijit/themes/claro/layout/AccordionContainer.css index 34831764c..b59aeca8b 100644 --- a/lib/dijit/themes/claro/layout/AccordionContainer.css +++ b/lib/dijit/themes/claro/layout/AccordionContainer.css @@ -50,16 +50,17 @@ background-color: transparent; /* pick up color from dijitAccordionInnerContainer */ - background-image: url("../layout/images/accordion.png"); - background-position: 0 0; + background-image: url("../images/standardGradient.png"); background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; padding: 5px 7px 2px 7px; min-height: 17px; color: #494949; } -.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 @@ -83,7 +84,13 @@ transition-duration: 0.1s; } .claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { - background-position: 0 -136px; + background-image: url("../images/activeGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + _background-image: none; color: #000000; } /* Open (a.k.a. selected) pane */ @@ -93,7 +100,13 @@ } .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { color: #000000; - background-position: 0 0; + background-image: url("../images/standardGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; /* avoid effect when clicking the title of the open pane */ } @@ -114,7 +127,7 @@ } .claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper { background-color: #ffffff; - border: 1px solid #759dc0 !important; + border: 1px solid #759dc0; -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 index b3aa62248..fd4308c30 100644 --- a/lib/dijit/themes/claro/layout/AccordionContainer.less +++ b/lib/dijit/themes/claro/layout/AccordionContainer.less @@ -43,16 +43,12 @@ } .claro .dijitAccordionTitle { background-color: transparent; /* pick up color from dijitAccordionInnerContainer */ - background-image: url("../@{image-layout-accordion}"); - background-position:0 0; - background-repeat:repeat-x; + .standard-gradient("../"); padding: 5px 7px 2px 7px; min-height:17px; color:@unselected-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 @@ -75,7 +71,7 @@ .transition-duration(.1s); } .claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { - background-position:0 -136px; + .active-gradient("../"); color:@selected-text-color; } @@ -87,7 +83,7 @@ } .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { color:@selected-text-color; - background-position: 0 0; /* avoid effect when clicking the title of the open pane */ + .standard-gradient("../"); /* avoid effect when clicking the title of the open pane */ } /* Hovering open or closed pane */ @@ -97,6 +93,8 @@ color:@hovered-text-color; } +// TODO: why do we have any hover effect on the selected pane? +// Since you can't click it, there shouldn't be a hover effect. .claro .dijitAccordionInnerContainerHover, .claro .dijitAccordionInnerContainerSelectedActive { /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */ @@ -108,6 +106,6 @@ .claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper { background-color:@pane-background-color; - border:1px solid @hovered-border-color !important; + border:1px solid @hovered-border-color; .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 8c0a5fa96..f00c5d1d7 100644 --- a/lib/dijit/themes/claro/layout/BorderContainer.css +++ b/lib/dijit/themes/claro/layout/BorderContainer.css @@ -84,26 +84,28 @@ Splitters and gutters: margin: 0; } /* hovered splitter */ -.claro .dijitSplitterHHover { +.claro .dijitSplitterHHover, .claro .dijitSplitterVHover { font-size: 1px; - background: url("../layout/images/splitterHorizontalHover.png") no-repeat center top; + background-color: #cfe5fa; } -.claro .dijitSplitterHHover .dijitSplitterThumb { - background: #759dc0 none; +.claro .dijitSplitterHHover { + background-image: -moz-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); + background-image: -webkit-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); + background-image: -o-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); + background-image: linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); } .claro .dijitSplitterVHover { - font-size: 1px; - background: url("../layout/images/splitterVerticalHover.png") no-repeat center left; + background-image: -moz-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); + background-image: -webkit-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); + background-image: -o-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); + background-image: linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); } -.claro .dijitSplitterVHover .dijitSplitterThumb { +.claro .dijitSplitterHHover .dijitSplitterThumb, .claro .dijitSplitterVHover .dijitSplitterThumb { background: #759dc0 none; } -.dj_ie6 .dijitSplitterHHover, .dj_ie6 .claro .dijitSplitterVHover { - background-color: #cfe5fa; - background-image: none; -} /* active splitter */ .claro .dijitSplitterHActive, .claro .dijitSplitterVActive { font-size: 1px; background-color: #abd6ff; + background-image: none; } diff --git a/lib/dijit/themes/claro/layout/BorderContainer.less b/lib/dijit/themes/claro/layout/BorderContainer.less index b7c672e63..f3edcd3c5 100644 --- a/lib/dijit/themes/claro/layout/BorderContainer.less +++ b/lib/dijit/themes/claro/layout/BorderContainer.less @@ -95,34 +95,30 @@ Splitters and gutters: } /* hovered splitter */ -.claro .dijitSplitterHHover { +.claro .dijitSplitterHHover, +.claro .dijitSplitterVHover { font-size: 1px; - background: url("../@{image-layout-splitter-horizontal-hover}") no-repeat center top; + background-color: @splitter-hovered-background-color; } - -.claro .dijitSplitterHHover .dijitSplitterThumb { - background:@hovered-border-color none; +.claro .dijitSplitterHHover { + .alpha-white-gradient (left, 1,0px, 0,50%, 1,100%); } .claro .dijitSplitterVHover { - font-size: 1px; - background: url("../@{image-layout-splitter-vertical-hover}") no-repeat center left; + .alpha-white-gradient (top, 1,0px, 0,50%, 1,100%); } +.claro .dijitSplitterHHover .dijitSplitterThumb, .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; + background-image: none; // color all the way across, not gradient like in hover mode } diff --git a/lib/dijit/themes/claro/layout/TabContainer.css b/lib/dijit/themes/claro/layout/TabContainer.css index 641b921ec..6db8550ec 100644 --- a/lib/dijit/themes/claro/layout/TabContainer.css +++ b/lib/dijit/themes/claro/layout/TabContainer.css @@ -17,18 +17,18 @@ * .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 .dijitTab - styles for top tab button container + * .dijitTabContainerBottom-tabs .dijitTab - styles for bottom tab button container + * .dijitTabContainerLeft-tabs .dijitTab - styles for left tab button container + * .dijitTabContainerRight-tabs .dijitTab - styles for right tab button container * - * .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent + * .dijitTabContainerTop-tabs .dijitTabChecked .dijitTab * - 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 + * .dijitTabHover .dijitTab - styles when mouse hover on tab buttons + * .dijitTabActive .dijitTab - styles when mouse down on tab buttons + * .dijitTabChecked .dijitTab - 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 @@ -77,7 +77,8 @@ display: none; } -.claro .dijitTabInnerDiv { +.claro .dijitTab { + border: 1px solid #b5bcc7; background-color: #efefef; -webkit-transition-property: background-color, border; -moz-transition-property: background-color, border; @@ -87,132 +88,104 @@ transition-duration: 0.35s; color: #494949; } -.claro .dijitTabHover .dijitTabInnerDiv { +.claro .dijitTabHover { + border-color: #759dc0; background-color: #abd6ff; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; transition-duration: 0.25s; color: #000000; } -.claro .dijitTabActive .dijitTabInnerDiv { +.claro .dijitTabActive { + border-color: #759dc0; background-color: #7dbdfa; color: #000000; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s; } -.claro .dijitTabChecked .dijitTabInnerDiv { +.claro .dijitTabChecked { + border-color: #b5bcc7; background-color: #cfe5fa; color: #000000; } -.claro .dijitTabContent { - border: 1px solid #b5bcc7; -} -.claro .dijitTabHover .dijitTabContent { - border-color: #759dc0; -} -.claro .dijitTabActive .dijitTabContent { - border-color: #759dc0; -} -.claro .dijitTabChecked .dijitTabContent { - color: #000000; - border-color: #b5bcc7; +.claro .dijitTabDisabled { + background-color: #d3d3d3; } -.claro .tabStripButton .dijitTabInnerDiv { +.claro .tabStripButton { background-color: transparent; -} -.claro .tabStripButton .dijitTabContent { border: none; } /*** end common ***/ /*************** top tab ***************/ .claro .dijitTabContainerTop-tabs .dijitTab { + /* unselected (and not hovered/pressed) tab */ + 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("../layout/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("../layout/images/tabTop.png"); - background-position: 0 -248px; - background-position: bottom; + background-image: url("images/tabTopUnselected.png"); background-repeat: repeat-x; + background-image: -moz-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); -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; +.claro .dijitTabContainerTop-tabs .dijitTabChecked { + /* selected tab */ + + padding-bottom: 4px; + padding-top: 9px; + background-image: url("images/tabTopSelected.png"); + background-image: -moz-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px); + background-image: -webkit-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px); + background-image: -o-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px); + background-image: linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px); -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: 0 -102px; - background-repeat: repeat-x; -} /** end top tab **/ /*************** bottom tab ***************/ .claro .dijitTabContainerBottom-tabs .dijitTab { + /* unselected (and not hovered/pressed) tab */ + 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("../layout/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("../layout/images/tabBottom.png"); - background-position: top; + background-image: url("images/tabBottomUnselected.png"); background-repeat: repeat-x; + background-position: bottom; + background-image: -moz-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); -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: 0 -119px; -} +/* selected tab */ .claro .dijitTabContainerBottom-tabs .dijitTabChecked { - padding-bottom: 0; -} -.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv { - background-image: none; + padding-bottom: 9px; + padding-top: 4px; + background-image: url("images/tabBottomSelected.png"); + background-image: -moz-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px); + background-image: -webkit-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px); + background-image: -o-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px); + background-image: linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px); -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); @@ -220,33 +193,29 @@ /** end bottom tab **/ /*************** left tab ***************/ .claro .dijitTabContainerLeft-tabs .dijitTab { - border-right-width: 0; + /* unselected (and not hovered/pressed) tab */ + left: 1px; /* used for overlap */ margin-bottom: 1px; -} -/* normal status */ -.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-image: url("images/tabLeftUnselected.png"); background-repeat: repeat-y; - background-position: 0 0; + background-image: -moz-linear-gradient(left, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(left, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(left, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(left, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); } -/* checked status */ -.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent { +/* selected tab */ +.claro .dijitTabContainerLeft-tabs .dijitTabChecked { + border-right-width: 0; padding-right: 9px; - border-right: none; - background-image: none; -} -.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position: 0 -179px; - background-repeat: repeat-y; + background-image: url("images/tabLeftSelected.png"); + background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px); + background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px); + background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px); + background-image: linear-gradient(left, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px); -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); @@ -254,51 +223,50 @@ /** end left tab **/ /*************** right tab ***************/ .claro .dijitTabContainerRight-tabs .dijitTab { - border-left-width: 0; + /* unselected (and not hovered/pressed) tab */ + left: -1px; /* used for overlap */ margin-bottom: 1px; -} -/* normal status */ -.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-image: url("images/tabRightUnselected.png"); background-repeat: repeat-y; -} -/* checked status */ -.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent { + background-position: right; + background-image: -moz-linear-gradient(right, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(right, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(right, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(right, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); +} +.claro .dijitTabContainerRight-tabs .dijitTabChecked { + /* selected tab */ + padding-left: 5px; - border-left: none; - background-image: none; -} -.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position: -348px -179px; + border-left-width: 0; + background-image: url("images/tabRightSelected.png"); + background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px); + background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px); + background-image: -o-linear-gradient(right, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px); + background-image: linear-gradient(right, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px); -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 { +.claro .dijitTabContainerTop-tabs .dijitTab { -moz-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; } -.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, .claro .dijitTabContainerBottom-tabs .dijitTabContent { +.claro .dijitTabContainerBottom-tabs .dijitTab { -moz-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; } -.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, .claro .dijitTabContainerLeft-tabs .dijitTabContent { +.claro .dijitTabContainerLeft-tabs .dijitTab { -moz-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; } -.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, .claro .dijitTabContainerRight-tabs .dijitTabContent { +.claro .dijitTabContainerRight-tabs .dijitTab { -moz-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; } @@ -310,15 +278,18 @@ .claro .dijitTabListContainer-top .tabStripButton { padding: 4px 3px; margin-top: 7px; - background-image: url("../layout/images/tabTop.png"); - background-position: 0 0; + background-image: -moz-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%); } .claro .dijitTabListContainer-bottom .tabStripButton { - padding: 5px 3px; - margin-bottom: 4px; - background-image: url("../layout/images/tabTop.png"); - background-position: 0 -248px; - background-position: bottom; + padding: 4px 3px; + margin-bottom: 7px; + background-image: -moz-linear-gradient(bottom, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(bottom, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(bottom, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(bottom, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%); } .claro .tabStripButtonHover { background-color: #abd6ff; @@ -361,10 +332,9 @@ } .claro .dijitTabContainerNested .dijitTabContainerTop-tabs { border-bottom: solid 1px #b5bcc7; - padding: 1px 2px 4px; - margin-top: -2px; + padding: 2px 2px 4px; } -.claro .dijitTabContainerTabListNested .dijitTabContent { +.claro .dijitTabContainerTabListNested .dijitTab { background: rgba(255, 255, 255, 0) none repeat scroll 0 0; border: none; padding: 4px; @@ -378,11 +348,7 @@ -moz-border-radius: 2px; border-radius: 2px; } -.claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv { - /* 4 element selector to override box-shadow setting from above rule: - * .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { ... } - */ - +.claro .dijitTabContainerTabListNested .dijitTab { background: none; border: none; top: 0; @@ -392,7 +358,7 @@ -moz-box-shadow: none; box-shadow: none; } -.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent { +.claro .dijitTabContainerTabListNested .dijitTabHover { background-color: #e5f2fe; border: solid 1px #cfe5fa; padding: 3px; @@ -403,18 +369,21 @@ .claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel { text-decoration: none; } -.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent { +.claro .dijitTabContainerTabListNested .dijitTabActive { border: solid 1px #759dc0; padding: 3px; - background: #abd6ff url("../layout/images/tabNested.png") repeat-x; + background: #abd6ff url("images/tabNested.png") repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.61) 0%, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.61) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.61) 0%, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.61) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.61) 0%, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.61) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.61) 0%, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.61) 100%); -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s; } -.claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent { +.claro .dijitTabContainerTabListNested .dijitTabChecked { padding: 3px; border: solid 1px #759dc0; - background-position: 0 105px; background-color: #cfe5fa; } .claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel { @@ -426,9 +395,6 @@ /* prevent double border */ } -.dj_ie6 .claro .dijitTabContent, -.dj_ie6 .claro .dijitTabInnerDiv, -.dj_ie6 .dijitTabListContainer-top .tabStripButton, -.dj_ie6 .dijitTabListContainer-bottom .tabStripButton { - background-image: none; +.claro .dijitTab, .claro .tabStripButton { + _background-image: none !important; } diff --git a/lib/dijit/themes/claro/layout/TabContainer.less b/lib/dijit/themes/claro/layout/TabContainer.less index 16947ff9c..74495b209 100644 --- a/lib/dijit/themes/claro/layout/TabContainer.less +++ b/lib/dijit/themes/claro/layout/TabContainer.less @@ -17,18 +17,18 @@ * .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 .dijitTab - styles for top tab button container + * .dijitTabContainerBottom-tabs .dijitTab - styles for bottom tab button container + * .dijitTabContainerLeft-tabs .dijitTab - styles for left tab button container + * .dijitTabContainerRight-tabs .dijitTab - styles for right tab button container * - * .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent + * .dijitTabContainerTop-tabs .dijitTabChecked .dijitTab * - 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 + * .dijitTabHover .dijitTab - styles when mouse hover on tab buttons + * .dijitTabActive .dijitTab - styles when mouse down on tab buttons + * .dijitTabChecked .dijitTab - 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 @@ -49,6 +49,13 @@ @import "../variables"; +.unselected-tab-gradient (@direction) { + // white line, dark line, then fade from light to dark + .alpha-white-gradient (@direction, 1,0px, 1,1px, 0.1,2px, 0.6,7px, 0,100%); +} +.topBottom-selected-tab-gradient (@direction) { + .alpha-white-gradient (@direction, 1,0px, 1,1px, 0,2px, 1,7px); // white line, blue line, remainder white +} /*** some common features ***/ .claro .dijitTabPaneWrapper { background:@pane-background-color; @@ -78,45 +85,37 @@ /* set the spacer invisible. note that height:0 doesn't work on IE/quirks, it's still 10px. */ display: none; } -.claro .dijitTabInnerDiv { +.claro .dijitTab { + border: 1px solid @border-color; background-color:@unselected-background-color; .transition-property(background-color, border); .transition-duration(.35s); color:@unselected-text-color; } -.claro .dijitTabHover .dijitTabInnerDiv { +.claro .dijitTabHover { + border-color: @hovered-border-color; background-color:@hovered-background-color; .transition-duration(.25s); color:@hovered-text-color; } -.claro .dijitTabActive .dijitTabInnerDiv { +.claro .dijitTabActive { + border-color: @pressed-border-color; 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? +.claro .dijitTabChecked { + // selected tab border-color: @border-color; // don't use @selected-border-color because need to match border of TabContainer + background-color: @selected-background-color; + color: @selected-text-color; +} +.claro .dijitTabDisabled { + background-color: @tab-disabled-background-color; } -.claro .tabStripButton .dijitTabInnerDiv { +.claro .tabStripButton { background-color: transparent; -} -.claro .tabStripButton .dijitTabContent { border: none; } /*** end common ***/ @@ -124,169 +123,133 @@ /*************** top tab ***************/ .claro .dijitTabContainerTop-tabs .dijitTab { + /* unselected (and not hovered/pressed) tab */ 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("../@{image-layout-tab-top}"); - background-position:0 0; - background-repeat:repeat-x; min-width: 60px; text-align: center; + + // gradient (CSS gradient, with backup image for IE6-9) + background-image: url("images/tabTopUnselected.png"); + background-repeat: repeat-x; + .unselected-tab-gradient(top); + + .box-shadow(0 -1px 1px rgba(0, 0, 0, 0.04)); } -.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { + +.claro .dijitTabContainerTop-tabs .dijitTabChecked { + /* selected tab */ padding-bottom: 4px; - padding-top: 6px; -} + padding-top: 9px; -/* normal status */ -.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv { - background-image:url("../@{image-layout-tab-top}"); - background-position:0 -248px; - background-position:bottom; - background-repeat:repeat-x; - .box-shadow(0 -1px 1px rgba(0, 0, 0, 0.04)); -} + // gradient (CSS gradient, with backup image for IE6-9) + background-image: url("images/tabTopSelected.png"); + .topBottom-selected-tab-gradient (top); -/* 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 { + /* unselected (and not hovered/pressed) tab */ 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("../@{image-layout-tab-bottom}"); - 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("../@{image-layout-tab-bottom}"); - background-position: top; + + // gradient (CSS gradient, with backup image for IE6-9) + background-image: url("images/tabBottomUnselected.png"); background-repeat: repeat-x; + background-position: bottom; + .unselected-tab-gradient(bottom); + .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; -} +/* selected tab */ .claro .dijitTabContainerBottom-tabs .dijitTabChecked { - padding-bottom: 0; -} -.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv { - background-image:none; + padding-bottom: 9px; + padding-top: 4px; + + // gradient (CSS gradient, with backup image for IE6-9) + background-image: url("images/tabBottomSelected.png"); + .topBottom-selected-tab-gradient (bottom); + .box-shadow(0 1px 2px rgba(0, 0, 0, 0.05)); } /** end bottom tab **/ /*************** left tab ***************/ .claro .dijitTabContainerLeft-tabs .dijitTab { - border-right-width: 0; + /* unselected (and not hovered/pressed) tab */ left: 1px; /* used for overlap */ margin-bottom: 1px; -} -/* normal status */ -.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv { - background-image: url("../@{image-layout-tab-left}"); - background-position: -347px -340px; - background-repeat: repeat-y; -} -.claro .dijitTabContainerLeft-tabs .dijitTabContent { padding:3px 8px 4px 4px; - background-image: url("../@{image-layout-tab-left}"); + + // gradient (CSS gradient, with backup image for IE6-9) + background-image: url("images/tabLeftUnselected.png"); background-repeat: repeat-y; - background-position:0 0; + .unselected-tab-gradient(left); } -/* checked status */ -.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent { + +/* selected tab */ +.claro .dijitTabContainerLeft-tabs .dijitTabChecked { + border-right-width: 0; padding-right: 9px; - border-right: none; - background-image: none; -} -.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position:0 -179px; - background-repeat:repeat-y; + + // gradient (CSS gradient, with backup image for IE6-9) + background-image: url("images/tabLeftSelected.png"); + .alpha-white-gradient (left, 0.5,0px, 1,30px); // 1/2 inch blue gradient, remainder white + .box-shadow(-1px 0 2px rgba(0, 0, 0, .05)); } /** end left tab **/ /*************** right tab ***************/ .claro .dijitTabContainerRight-tabs .dijitTab { - border-left-width: 0; + /* unselected (and not hovered/pressed) tab */ left: -1px; /* used for overlap */ margin-bottom: 1px; -} -/* normal status */ -.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv { - background-image: url("../@{image-layout-tab-right}"); - background-repeat: repeat-y; - background-position: -1px -347px; -} -.claro .dijitTabContainerRight-tabs .dijitTabContent { padding:3px 8px 4px 4px; - background-image: url("../@{image-layout-tab-right}"); - background-position:right top; + + // gradient (CSS gradient, with backup image for IE6-9) + background-image: url("images/tabRightUnselected.png"); background-repeat: repeat-y; + background-position: right; + .unselected-tab-gradient(right); } -/* checked status */ -.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent { +.claro .dijitTabContainerRight-tabs .dijitTabChecked { + /* selected tab */ padding-left: 5px; - border-left: none; - background-image: none; -} -.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position:-348px -179px; + border-left-width: 0; + + // gradient (CSS gradient, with backup image for IE6-9) + background-image: url("images/tabRightSelected.png"); + .alpha-white-gradient (right, 0.5,0px, 1,30px); // 1/2 inch blue gradient, remainder white + .box-shadow(1px 0 2px rgba(0, 0, 0, 0.07)); } /** end right tab **/ /** round corner **/ -.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerTop-tabs .dijitTabContent { +.claro .dijitTabContainerTop-tabs .dijitTab { .border-radius(2px 2px 0 0); } -.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerBottom-tabs .dijitTabContent{ +.claro .dijitTabContainerBottom-tabs .dijitTab { .border-radius(0 0 2px 2px); } -.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerLeft-tabs .dijitTabContent{ +.claro .dijitTabContainerLeft-tabs .dijitTab { .border-radius(2px 0 0 2px); } -.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerRight-tabs .dijitTabContent{ +.claro .dijitTabContainerRight-tabs .dijitTab { .border-radius(0 2px 2px 0); } @@ -298,15 +261,12 @@ .claro .dijitTabListContainer-top .tabStripButton { padding: 4px 3px; margin-top:7px; - background-image: url("../@{image-layout-tab-top}"); - background-position:0 0; + .alpha-white-gradient (top, 1,0px, 0.1,1px, 0.6,6px, 0,100%); // to match unselected tab, but had to tweak numbers } .claro .dijitTabListContainer-bottom .tabStripButton { - padding:5px 3px; - margin-bottom:4px; - background-image: url("../@{image-layout-tab-top}"); - background-position:0 -248px; - background-position:bottom; + padding:4px 3px; + margin-bottom:7px; + .alpha-white-gradient (bottom, 1,0px, 0.1,1px, 0.6,6px, 0,100%); // to match unselected tab, but had to tweak numbers } .claro .tabStripButtonHover { background-color:@hovered-background-color; @@ -349,10 +309,9 @@ } .claro .dijitTabContainerNested .dijitTabContainerTop-tabs { border-bottom:solid 1px @border-color; - padding:1px 2px 4px; - margin-top:-2px; + padding:2px 2px 4px; } -.claro .dijitTabContainerTabListNested .dijitTabContent { +.claro .dijitTabContainerTabListNested .dijitTab { background:rgba(255, 255, 255, 0) none repeat scroll 0 0; border: none; padding: 4px; @@ -361,34 +320,35 @@ .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 { ... } - */ +.claro .dijitTabContainerTabListNested .dijitTab { background: none; border: none; top: 0;/* to override top: 1px/-1px for normal tabs */ .box-shadow(none); } -.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent { +.claro .dijitTabContainerTabListNested .dijitTabHover { background-color: @nestedtab-hovered-background-color; border:solid 1px @nestedtab-hovered-border-color; - padding: 3px; + padding: 3px; // 4px above padding - 1px compensation for border .transition-duration(.2s); } .claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel { text-decoration: none; } -.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent { +.claro .dijitTabContainerTabListNested .dijitTabActive { border:solid 1px @nestedtab-selected-border-color; padding: 3px; - background: @nestedtab-selected-background-color url("../@{image-layout-tab-nested}") repeat-x; + + // CSS gradient with fallback to image for IE + // this is in a weird place, only for active state; mailed Jason about it + background: @nestedtab-selected-background-color url("images/tabNested.png") repeat-x; + .alpha-white-gradient (0.61,0%, 0,17%, 0,83%, 0.61,100%); + .transition-duration(.1s); } -.claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent { +.claro .dijitTabContainerTabListNested .dijitTabChecked { padding: 3px; border:solid 1px @selected-border-color; - background-position: 0 105px; background-color:@selected-background-color; } .claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel { @@ -399,10 +359,8 @@ 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; +.claro .dijitTab, +.claro .tabStripButton { + // IE6 can't handle background-image and background-color on same node + _background-image: none !important; } diff --git a/lib/dijit/themes/claro/layout/TabContainer_rtl.css b/lib/dijit/themes/claro/layout/TabContainer_rtl.css index 89fdff097..3b4d87ad3 100644 --- a/lib/dijit/themes/claro/layout/TabContainer_rtl.css +++ b/lib/dijit/themes/claro/layout/TabContainer_rtl.css @@ -2,66 +2,3 @@ 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 { - /*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 #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 index eaada0d0a..c6cec49fd 100644 --- a/lib/dijit/themes/claro/layout/TabContainer_rtl.less +++ b/lib/dijit/themes/claro/layout/TabContainer_rtl.less @@ -5,77 +5,3 @@ 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/accordion.png b/lib/dijit/themes/claro/layout/images/accordion.png deleted file mode 100644 index 48181035a..000000000 Binary files a/lib/dijit/themes/claro/layout/images/accordion.png and /dev/null differ diff --git a/lib/dijit/themes/claro/layout/images/splitterHorizontalHover.png b/lib/dijit/themes/claro/layout/images/splitterHorizontalHover.png deleted file mode 100644 index 0f5b691f6..000000000 Binary files a/lib/dijit/themes/claro/layout/images/splitterHorizontalHover.png and /dev/null differ diff --git a/lib/dijit/themes/claro/layout/images/splitterVerticalHover.png b/lib/dijit/themes/claro/layout/images/splitterVerticalHover.png deleted file mode 100644 index 2c3c6960e..000000000 Binary files a/lib/dijit/themes/claro/layout/images/splitterVerticalHover.png and /dev/null differ diff --git a/lib/dijit/themes/claro/layout/images/tabBottom.png b/lib/dijit/themes/claro/layout/images/tabBottom.png deleted file mode 100644 index dbcfc851b..000000000 Binary files a/lib/dijit/themes/claro/layout/images/tabBottom.png and /dev/null differ diff --git a/lib/dijit/themes/claro/layout/images/tabBottomSelected.png b/lib/dijit/themes/claro/layout/images/tabBottomSelected.png new file mode 100644 index 000000000..f92b05f45 Binary files /dev/null and b/lib/dijit/themes/claro/layout/images/tabBottomSelected.png differ diff --git a/lib/dijit/themes/claro/layout/images/tabBottomSelected.svg b/lib/dijit/themes/claro/layout/images/tabBottomSelected.svg new file mode 100644 index 000000000..4e6ff6d43 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabBottomSelected.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/lib/dijit/themes/claro/layout/images/tabBottomUnselected.png b/lib/dijit/themes/claro/layout/images/tabBottomUnselected.png new file mode 100644 index 000000000..7815d9cfb Binary files /dev/null and b/lib/dijit/themes/claro/layout/images/tabBottomUnselected.png differ diff --git a/lib/dijit/themes/claro/layout/images/tabBottomUnselected.svg b/lib/dijit/themes/claro/layout/images/tabBottomUnselected.svg new file mode 100644 index 000000000..4193238e8 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabBottomUnselected.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/lib/dijit/themes/claro/layout/images/tabLeft.png b/lib/dijit/themes/claro/layout/images/tabLeft.png deleted file mode 100644 index 8e9fcba27..000000000 Binary files a/lib/dijit/themes/claro/layout/images/tabLeft.png and /dev/null differ diff --git a/lib/dijit/themes/claro/layout/images/tabLeftSelected.png b/lib/dijit/themes/claro/layout/images/tabLeftSelected.png new file mode 100644 index 000000000..9700afb37 Binary files /dev/null and b/lib/dijit/themes/claro/layout/images/tabLeftSelected.png differ diff --git a/lib/dijit/themes/claro/layout/images/tabLeftSelected.svg b/lib/dijit/themes/claro/layout/images/tabLeftSelected.svg new file mode 100644 index 000000000..12e7d8a64 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabLeftSelected.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/lib/dijit/themes/claro/layout/images/tabLeftUnselected.png b/lib/dijit/themes/claro/layout/images/tabLeftUnselected.png new file mode 100644 index 000000000..412390e08 Binary files /dev/null and b/lib/dijit/themes/claro/layout/images/tabLeftUnselected.png differ diff --git a/lib/dijit/themes/claro/layout/images/tabLeftUnselected.svg b/lib/dijit/themes/claro/layout/images/tabLeftUnselected.svg new file mode 100644 index 000000000..e31c211b7 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabLeftUnselected.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/lib/dijit/themes/claro/layout/images/tabRight.png b/lib/dijit/themes/claro/layout/images/tabRight.png deleted file mode 100644 index 0aaae53a1..000000000 Binary files a/lib/dijit/themes/claro/layout/images/tabRight.png and /dev/null differ diff --git a/lib/dijit/themes/claro/layout/images/tabRightSelected.png b/lib/dijit/themes/claro/layout/images/tabRightSelected.png new file mode 100644 index 000000000..1a2843499 Binary files /dev/null and b/lib/dijit/themes/claro/layout/images/tabRightSelected.png differ diff --git a/lib/dijit/themes/claro/layout/images/tabRightSelected.svg b/lib/dijit/themes/claro/layout/images/tabRightSelected.svg new file mode 100644 index 000000000..d8d3d674a --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabRightSelected.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/lib/dijit/themes/claro/layout/images/tabRightUnselected.png b/lib/dijit/themes/claro/layout/images/tabRightUnselected.png new file mode 100644 index 000000000..2bdd00e4d Binary files /dev/null and b/lib/dijit/themes/claro/layout/images/tabRightUnselected.png differ diff --git a/lib/dijit/themes/claro/layout/images/tabRightUnselected.svg b/lib/dijit/themes/claro/layout/images/tabRightUnselected.svg new file mode 100644 index 000000000..d1379a717 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabRightUnselected.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/lib/dijit/themes/claro/layout/images/tabTop.png b/lib/dijit/themes/claro/layout/images/tabTop.png deleted file mode 100644 index 2822487ed..000000000 Binary files a/lib/dijit/themes/claro/layout/images/tabTop.png and /dev/null differ diff --git a/lib/dijit/themes/claro/layout/images/tabTopSelected.png b/lib/dijit/themes/claro/layout/images/tabTopSelected.png new file mode 100644 index 000000000..f4d577258 Binary files /dev/null and b/lib/dijit/themes/claro/layout/images/tabTopSelected.png differ diff --git a/lib/dijit/themes/claro/layout/images/tabTopSelected.svg b/lib/dijit/themes/claro/layout/images/tabTopSelected.svg new file mode 100644 index 000000000..d06e646ea --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabTopSelected.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/lib/dijit/themes/claro/layout/images/tabTopUnselected.png b/lib/dijit/themes/claro/layout/images/tabTopUnselected.png new file mode 100644 index 000000000..8c34545f5 Binary files /dev/null and b/lib/dijit/themes/claro/layout/images/tabTopUnselected.png differ diff --git a/lib/dijit/themes/claro/layout/images/tabTopUnselected.svg b/lib/dijit/themes/claro/layout/images/tabTopUnselected.svg new file mode 100644 index 000000000..c55e92532 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabTopUnselected.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/lib/dijit/themes/claro/variables.less b/lib/dijit/themes/claro/variables.less index ca7d6773c..ac21a5ff7 100644 --- a/lib/dijit/themes/claro/variables.less +++ b/lib/dijit/themes/claro/variables.less @@ -6,7 +6,7 @@ @disabled-color: #d3d3d3; // Base for disabled backgrounds and borders @error-color: #d46464; -@container-background-color:#fff; // Backgrounds for various content areas such as TitlePane, ContentPane and Inputs +@container-background-color:#fff; // Backgrounds for various content areas such as TitlePane, ContentPane and Inputs (if changed, adjust selected tab to match) @minor-selected-color: spin(saturate(darken(@primary-color, 6), 19), 0); // Color for various arrows and buttons @base-border-color: spin(desaturate(darken(@primary-color, 29), 44), -1); // Augmented and used directly by variables to create border colors for various widgets @@ -136,6 +136,9 @@ @dialog-titlebar-border-color: @container-background-color; // 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: @minor-selected-color; +// Tooltip +@tooltip-gradient-color: fade(@primary-color,10%); // a little swath of color at the bottom of tooltips + // BorderContainer @splitter-hovered-background-color: @primary-color; // Color of splitter when user hovers it, before mouse down @splitter-dragged-background-color: @minor-selected-color; // Color of splitter while it's being dragged @@ -156,49 +159,29 @@ @document-shadedsection-background-color: @bar-background-color;// background color used for 
, , and table header rows
 @document-border-color: @disabled-color;								// Border for 
, , tables, etc.
 
-// Images
+// Icons, arrows, etc.
 @image-arrow-sprite: "images/spriteArrows.png";
-@image-calendar-container: "images/calendarContainerImages.png";
 @image-calendar-arrows: "images/calendarArrows.png";
 @image-calendar-arrows-ie6: "images/calendarArrows8bit.png";
 @image-checkmark: "images/checkmarkNoBorder.png";
 @image-checkmark-ie6: "images/checkmarkNoBorder.gif";
-@image-common-highlight: "images/commonHighlight.png";
 @image-dialog-close: "images/dialogCloseIcon.png";
 @image-dialog-close-ie6: "images/dialogCloseIcon8bit.png";
 @image-dnd: "images/dnd.png";
 @image-editor-icons-enabled: "../../icons/images/editorIconsEnabled.png";
-@image-form-button: "form/images/button.png";
 @image-form-button-arrows: "form/images/buttonArrows.png";
 @image-form-checkbox-and-radios: "form/images/checkboxRadioButtonStates.png";
 @image-form-checkbox-and-radios-ie6: "form/images/checkboxAndRadioButtons_IE6.png";
 @image-form-common-arrows: "form/images/commonFormArrows.png";
 @image-form-error: "form/images/error.png";
-@image-form-highlight: "form/images/formHighlight.png";
-@image-form-slider-horizontal: "form/images/sliderHorizontal.png";
 @image-form-slider-thumbs: "form/images/sliderThumbs.png";
-@image-form-slider-vertical: "form/images/sliderVertical.png";
-@image-form-textbox-background: "form/images/textBox_back.png";
-@image-layout-accordion: "layout/images/accordion.png";
-@image-layout-splitter-horizontal-hover: "layout/images/splitterHorizontalHover.png";
-@image-layout-splitter-vertical-hover: "layout/images/splitterVerticalHover.png";
-@image-layout-tab-bottom: "layout/images/tabBottom.png";
-@image-layout-tab-close: "layout/images/tabClose.png";
-@image-layout-tab-left: "layout/images/tabLeft.png";
-@image-layout-tab-nested: "layout/images/tabNested.png";
-@image-layout-tab-right: "layout/images/tabRight.png";
-@image-layout-tab-top: "layout/images/tabTop.png";
+@image-layout-tab-close: "layout/images/tabClose.png";	// [x] icon to close a tab
 @image-loading-animation: "images/loadingAnimation.gif";
-@image-menu-highlight: "images/menuHighlight.png";
-@image-progressbar-empty: "images/progressBarEmpty.png";
-@image-progressbar-full: "images/progressBarFull.png";
-@image-progressbar-anim: "images/progressBarAnim.gif";
-@image-titlebar: "images/titlebar.png";
-@image-tooltip: "images/tooltip.png";
-@image-tooltip-ie6: "images/tooltip8bit.png";
-@image-tooltip-gradient: "images/tooltipGradient.png";
+@image-tooltip: "images/tooltip.png";	// arrow connectors
+@image-tooltip-ie6: "images/tooltip8bit.png";	// arrow connectors (8 bit)
 @image-tree-expand: "images/treeExpandImages.png";
 @image-tree-expand-ie6: "images/treeExpandImages8bit.png";
+@image-progressbar-anim: "images/progressBarAnim.gif";
 
 // Mixins
 
@@ -242,3 +225,154 @@
 	-moz-transition-timing-function: @value;
 	transition-timing-function: @value;
 }
+
+.linear-gradient (@value1, @value2) {
+	// summary:
+	//		Expands to browser specific background-image specifications for a linear-gradient (2 stops)
+ 	background-image: -moz-linear-gradient(@value1, @value2); // FF3.6 - FF15 (FF16+ supports linear-gradient)
+ 	background-image: -webkit-linear-gradient(@value1, @value2); // Chrome10+, Safari5.1+
+ 	background-image: -o-linear-gradient(@value1, @value2); // Opera 11.10+
+ 	background-image: linear-gradient(@value1, @value2);
+}
+.linear-gradient (@value1, @value2, @value3) {
+ 	background-image: -moz-linear-gradient(@value1, @value2, @value3); // FF3.6 - FF15 (FF16+ supports linear-gradient)
+ 	background-image: -webkit-linear-gradient(@value1, @value2, @value3); // Chrome10+, Safari5.1+
+ 	background-image: -o-linear-gradient(@value1, @value2, @value3); // Opera 11.10+
+ 	background-image: linear-gradient(@value1, @value2, @value3);
+}
+.linear-gradient (@value1, @value2, @value3, @value4) {
+ 	background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4); // FF3.6 - FF15 (FF16+ supports linear-gradient)
+ 	background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4); // Chrome10+, Safari5.1+
+ 	background-image: -o-linear-gradient(@value1, @value2, @value3, @value4); // Opera 11.10+
+ 	background-image: linear-gradient(@value1, @value2, @value3, @value4);
+}
+.linear-gradient (@value1, @value2, @value3, @value4, @value5) {
+ 	background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4, @value5); // FF3.6 - FF15 (FF16+ supports linear-gradient)
+ 	background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4, @value5); // Chrome10+, Safari5.1+
+ 	background-image: -o-linear-gradient(@value1, @value2, @value3, @value4, @value5); // Opera 11.10+
+ 	background-image: linear-gradient(@value1, @value2, @value3, @value4, @value5);
+}
+.linear-gradient (@value1, @value2, @value3, @value4, @value5, @value6) {
+ 	background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6); // FF3.6 - FF15 (FF16+ supports linear-gradient)
+ 	background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6); // Chrome10+, Safari5.1+
+ 	background-image: -o-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6); // Opera 11.10+
+ 	background-image: linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6);
+}
+.linear-gradient (@value1, @value2, @value3, @value4, @value5, @value6, @value7) {
+ 	background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7); // FF3.6 - FF15 (FF16+ supports linear-gradient)
+ 	background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7); // Chrome10+, Safari5.1+
+ 	background-image: -o-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7); // Opera 11.10+
+ 	background-image: linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7);
+}
+
+.alpha-white-gradient (@opacity1, @stop1, @opacity2, @stop2) {
+	// summary:
+	//		For setting up white background-image with variable transparency.
+	// example:
+	//		Gradient starts at top (0%) with 30% opacity, and then ends at bottom (100%) with full transparency
+	//		|	.alpha-white-gradient(0.3, 0%, 0, 100%)
+	//
+	.linear-gradient(rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2);
+}
+.alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2) {
+	.linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2);
+}
+.alpha-white-gradient (@opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3) {
+	.linear-gradient(rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3);
+}
+.alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3) {
+	.linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3);
+}
+.alpha-white-gradient (@opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4) {
+	.linear-gradient(rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3, rgba(255,255,255, @opacity4) @stop4);
+}
+.alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4) {
+	.linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3, rgba(255,255,255, @opacity4) @stop4);
+}
+.alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4, @opacity5, @stop5) {
+	.linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3, rgba(255,255,255, @opacity4) @stop4, rgba(255,255,255, @opacity5) @stop5);
+}
+.alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4, @opacity5, @stop5, @opacity6, @stop6) {
+	.linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3, rgba(255,255,255, @opacity4) @stop4, rgba(255,255,255, @opacity5) @stop5, rgba(255,255,255, @opacity6) @stop6);
+}
+
+.gradient-and-filter (@color, @fade1, @fade2) {
+	// summary:
+	//		Sets up a background color with a vertical gradient.
+	//		In order to make transitions work properly on mozilla and webkit, this is done by combining
+	//		a background-color which will be changed based on state (ex: hover) with a constant
+	//		white alpha-transparency background-image.  On IE it creates a DXImageTransform filter.
+	// @color:
+	//		The color
+	// @fade1:
+	//		The percent to fade at the top
+	// @fade2:
+	//		The percent to fade at the bottom
+	background-color: @color; // the base color
+	.linear-gradient(fadeout(#fff, 100-@fade1), fadeout(#fff, 100-@fade2));
+	filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="lighten(@color, @fade1)~", endColorstr="lighten(@color, @fade2)~")"; // IE
+}
+.horizontal-gradient-and-filter (@color, @fade1, @fade2) {
+	// summary:
+	//		Sets up a background color with a horizontal gradient.
+	//		In order to make transitions work properly on mozilla and webkit, this is done by combining
+	//		a background-color which will be changed based on state (ex: hover) with a constant
+	//		white alpha-transparency background-image.  On IE it creates a DXImageTransform filter.
+	// @color:
+	//		The color
+	// @fade1:
+	//		The percent to fade at the top
+	// @fade2:
+	//		The percent to fade at the bottom
+	background-color: @color; // the base color
+	.linear-gradient(left, fadeout(#fff, 100-@fade1), fadeout(#fff, 100-@fade2));
+	filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="lighten(@color, @fade1)~", endColorstr="lighten(@color, @fade2)~"gradientType=1)"; // IE
+}
+
+
+// Mixins defining gradients
+
+.textbox-background-image () {
+	// summary:
+	//		Background image used for hovered TextBoxes and similar controls.
+	//		It's just a small inset shadow below the top border (inside of the TextBox).
+	.linear-gradient(rgba(127,127,127,0.2) 0%, rgba(127,127,127,0) 2px);
+}
+
+.standard-gradient (@pathToRoot: "") {
+	// summary:
+	//		Light to dark background-image used by widgets with short height (~16px) including:
+	//			- MenuBar, and hovered MenuItem/MenuBarItem
+	//			- arrow icon wrapper for Select, ComboBox, Spinner
+	//			- Toolbar and hovered Toolbar buttons
+	//			- TitlePane title bar, AccordionContainer title bar, Dialog title bar
+
+	// Fallback for IE
+	background-image: url("@{pathToRoot}images/standardGradient.png");
+	background-repeat: repeat-x;
+
+	// CSS gradient for other browsers
+	.alpha-white-gradient(0.7, 0%, 0, 100%);
+
+	// IE6 can't handle a background-image with transparency and a background-color; the color is blocked out
+	_background-image: none;
+}
+.active-gradient (@pathToRoot: "") {
+	// summary:
+	//		Light to dark background-image with an inset gray shadow at the top,
+	//		used by widgets when they are active (ie: mousedown) or selected, including:
+	//			- active MenuItem/MenuBarItem
+	//			- arrow icon wrapper for Select, ComboBox, Spinner when active or drop down is open
+	//			- active Toolbar buttons
+	//			- active TitlePane title bar, AccordionContainer title bar
+
+	// Fallback for IE
+	background-image: url("@{pathToRoot}images/activeGradient.png");
+	background-repeat: repeat-x;
+
+	// CSS gradient for other browsers
+	.linear-gradient(rgba(190,190,190,0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
+
+	// IE6 can't handle a background-image with transparency and a background-color; the color is blocked out
+	_background-image: none;
+}
diff --git a/lib/dijit/themes/dijit.css b/lib/dijit/themes/dijit.css
index 4c60bf371..dbf900663 100644
--- a/lib/dijit/themes/dijit.css
+++ b/lib/dijit/themes/dijit.css
@@ -17,11 +17,11 @@
 	margin:0;
 	border:0;
 	padding:0;
-	line-height:normal;
 	font: inherit;
+	line-height:normal;
 	color: inherit;
 }
-.dijit_a11y .dijitReset {
+.dj_a11y .dijitReset {
 	-moz-appearance: none; /* remove predefined high-contrast styling in Firefox */
 }
 
@@ -56,32 +56,45 @@ table.dijitInline {
 	position: relative;			/* to support setting width/height, see #2033 */
 }
 
+.dj_ie6 .dijitComboBox .dijitInputContainer,
 .dijitInputContainer {
 	/* for positioning of placeHolder */
 	#zoom: 1;
 	overflow: hidden;
-	float: none !important; /* needed by FF to squeeze the INPUT in */
+	float: none !important; /* needed to squeeze the INPUT in */
 	position: relative;
-	vertical-align: middle;
-	#display: inline;
+}
+.dj_ie7 .dijitInputContainer {
+	float: left !important; /* needed by IE to squeeze the INPUT in */
+	clear: left;
+	display: inline-block !important; /* to fix wrong text alignment in rtl text box */
 }
 
+.dj_ie .dijitSelect input,
 .dj_ie input.dijitTextBox,
 .dj_ie .dijitTextBox input {
 	font-size: 100%;
 }
+.dijitSelect .dijitButtonText {
+	float: left;
+	vertical-align: top;
+}
+TABLE.dijitSelect {
+	padding: 0 !important; /* messes up border alignment */
+}
 .dijitTextBox .dijitSpinnerButtonContainer,
 .dijitTextBox .dijitArrowButtonContainer,
-.dijitTextBox .dijitValidationContainer {
+.dijitValidationTextBox .dijitValidationContainer {
 	float: right;
 	text-align: center;
 }
+.dijitSelect input.dijitInputField,
 .dijitTextBox input.dijitInputField {
 	/* override unreasonable user styling of buttons and icons */
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 }
-.dijitTextBox .dijitValidationContainer {
+.dijitValidationTextBox .dijitValidationContainer {
 	display: none;
 }
 
@@ -90,10 +103,10 @@ table.dijitInline {
 	line-height:1px;
 }
 
-.dijitOffScreen {
-	position: absolute;
-	left: 50%;
-	top: -10000px;
+.dijitOffScreen { /* these class attributes should supercede any inline positioning style */
+	position: absolute !important;
+	left: 50% !important;
+	top: -10000px !important;
 }
 
 /*
@@ -152,12 +165,12 @@ table.dijitInline {
 /****
 		A11Y
  ****/
-.dijit_a11y .dijitIcon,
-.dijit_a11y div.dijitArrowButtonInner, /* is this only for Spinner?  if so, it should be deleted */
-.dijit_a11y span.dijitArrowButtonInner,
-.dijit_a11y img.dijitArrowButtonInner,
-.dijit_a11y .dijitCalendarIncrementControl,
-.dijit_a11y .dijitTreeExpando {
+.dj_a11y .dijitIcon,
+.dj_a11y div.dijitArrowButtonInner, /* is this only for Spinner?  if so, it should be deleted */
+.dj_a11y span.dijitArrowButtonInner,
+.dj_a11y img.dijitArrowButtonInner,
+.dj_a11y .dijitCalendarIncrementControl,
+.dj_a11y .dijitTreeExpando {
 	/* hide icon nodes in high contrast mode; when necessary they will be replaced by character equivalents
 	 * exception for input.dijitArrowButtonInner, because the icon and character are controlled by the same node */
 	display: none;
@@ -166,7 +179,7 @@ table.dijitInline {
 	display: block; /* override previous rule */
 }
 
-.dijit_a11y .dijitA11ySideArrow {
+.dj_a11y .dijitA11ySideArrow {
 	display: inline !important; /* display text instead */
 	cursor: pointer;
 }
@@ -177,20 +190,20 @@ table.dijitInline {
  * Avoid screen jitter when switching selected date by compensating for the selected node's
  * border w/padding on other nodes.
  */
-.dijit_a11y .dijitCalendarDateLabel {
+.dj_a11y .dijitCalendarDateLabel {
 	padding: 1px;
 	border: 0px !important;
 }
-.dijit_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel {
+.dj_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel {
 	border-style: solid !important;
 	border-width: 1px !important;
 	padding: 0;
 }
-.dijit_a11y .dijitCalendarDateTemplate {
+.dj_a11y .dijitCalendarDateTemplate {
 	padding-bottom: 0.1em !important;	/* otherwise bottom border doesn't appear on IE */
 	border: 0px !important;
 }
-.dijit_a11y .dijitButtonNode {
+.dj_a11y .dijitButtonNode {
 	border: black outset medium !important;
 
 	/* In claro, hovering a toolbar button reduces padding and adds a border.
@@ -198,13 +211,16 @@ table.dijitInline {
 	 */
 	padding: 0 !important;
 }
+.dj_a11y .dijitArrowButton {
+	padding: 0 !important;
+}
 
-.dijit_a11y .dijitButtonContents{
+.dj_a11y .dijitButtonContents {
 	margin: 0.15em; /* Margin needed to make focus outline visible */
 }
 
-.dijit_a11y .dijitTextBoxReadOnly .dijitInputField,
-.dijit_a11y .dijitTextBoxReadOnly .dijitButtonNode {
+.dj_a11y .dijitTextBoxReadOnly .dijitInputField,
+.dj_a11y .dijitTextBoxReadOnly .dijitButtonNode {
 	border-style: outset!important;
 	border-width: medium!important;
 	border-color: #999 !important;
@@ -215,6 +231,7 @@ table.dijitInline {
 .dijitButtonNode * {
 	vertical-align: middle;
 }
+.dijitSelect .dijitArrowButtonInner,
 .dijitButtonNode .dijitArrowButtonInner {
 	/* the arrow icon node */
 	background: no-repeat center;
@@ -248,7 +265,7 @@ table.dijitInline {
 }
 
 /* Buttons */
-.dj_gecko .dijit_a11y .dijitButtonDisabled .dijitButtonNode {
+.dj_gecko .dj_a11y .dijitButtonDisabled .dijitButtonNode {
 	opacity: 0.5;
 }
 
@@ -299,6 +316,9 @@ td.dijitButtonContents {
 	padding:0;
 }
 
+.dijitSelect {
+	border:1px solid gray;
+}
 .dijitButtonNode {
 	/* Node that is acting as a button -- may or may not be a BUTTON element */
 	border:1px solid gray;
@@ -318,6 +338,8 @@ td.dijitButtonContents {
 	border-width: 0;
 }
 
+.dijitSelect,
+.dijitSelect *,
 .dijitButtonNode,
 .dijitButtonNode * {
 	cursor: pointer;
@@ -356,11 +378,11 @@ div.dijitArrowButton {
 .dijitTextBoxDisabled {
 	color: gray;
 }
-.dj_webkit .dijitTextBoxDisabled input {
-	color: #eee; /* because WebKit lightens disabled input/textarea no matter what color you specify */
+.dj_safari .dijitTextBoxDisabled input {
+	color: #B0B0B0; /* because Safari lightens disabled input/textarea no matter what color you specify */
 }
-.dj_webkit textarea.dijitTextAreaDisabled {
-	color: #333; /* because WebKit lightens disabled input/textarea no matter what color you specify */
+.dj_safari textarea.dijitTextAreaDisabled {
+	color: #333; /* because Safari lightens disabled input/textarea no matter what color you specify */
 }
 .dj_gecko .dijitTextBoxReadOnly input.dijitInputField, /* disable arrow and validation presentation inputs but allow real input for text selection */
 .dj_gecko .dijitTextBoxDisabled input {
@@ -389,13 +411,17 @@ div.dijitArrowButton {
 	outline: 5px -webkit-focus-ring-color;
 }
 
+.dijitSelect input,
 .dijitTextBox input {
 	float: left; /* needed by IE to remove secret margin */
 }
+.dj_ie6 input.dijitTextBox,
+.dj_ie6 .dijitTextBox input {
+	float: none;
+}
 .dijitInputInner {
 	/* for when an  is embedded inside an inline-block 
 with a size and border */
 	border:0 !important;
-	vertical-align:middle !important;
 	background-color:transparent !important;
 	width:100% !important;
 	/* IE dislikes horizontal tweaking combined with width:100% so punish everyone for consistency */
@@ -404,15 +430,16 @@ div.dijitArrowButton {
 	margin-left: 0 !important;
 	margin-right: 0 !important;
 }
-.dijit_a11y .dijitTextBox input {
+.dj_a11y .dijitTextBox input {
 	margin: 0 !important;
 }
-.dijitTextBoxError input.dijitValidationInner,
+.dijitValidationTextBoxError input.dijitValidationInner,
+.dijitSelect input,
 .dijitTextBox input.dijitArrowButtonInner {
 	/*  used to display arrow icon/validation icon, or in arrow character in high contrast mode.
 	 * The css below is a trick to hide the character in non-high-contrast mode
 	 */
-	text-indent: -1em !important;
+	text-indent: -2em !important;
 	direction: ltr !important;
 	text-align: left !important;
 	height: auto !important;
@@ -420,15 +447,26 @@ div.dijitArrowButton {
 	#letter-spacing: -5em !important;
 	#text-align: right !important;
 }
+.dj_ie .dijitSelect input,
 .dj_ie .dijitTextBox input,
 .dj_ie input.dijitTextBox {
 	overflow-y: visible; /* inputs need help expanding when padding is added or line-height is adjusted */
 	line-height: normal; /* strict mode */
 }
-.dj_ie7 .dijitTextBox input.dijitValidationInner,
-.dj_ie7 .dijitTextBox input.dijitArrowButtonInner {
-	line-height: 86%; /* IE7 problem where the icon is vertically too low w/o this - real input stays at normal */
+.dijitSelect .dijitSelectLabel span {
+	line-height: 100%;
+}
+.dj_ie .dijitSelect .dijitSelectLabel {
+	line-height: normal;
 }
+.dj_ie6 .dijitSelect .dijitSelectLabel,
+.dj_ie7 .dijitSelect .dijitSelectLabel,
+.dj_ie8 .dijitSelect .dijitSelectLabel,
+.dj_iequirks .dijitSelect .dijitSelectLabel,
+.dijitSelect td,
+.dj_ie6 .dijitSelect input,
+.dj_iequirks .dijitSelect input,
+.dj_ie6 .dijitSelect .dijitValidationContainer,
 .dj_ie6 .dijitTextBox input,
 .dj_ie6 input.dijitTextBox,
 .dj_iequirks .dijitTextBox input.dijitValidationInner,
@@ -438,14 +476,15 @@ div.dijitArrowButton {
 .dj_iequirks input.dijitTextBox {
 	line-height: 100%; /* IE7 problem where the icon is vertically way too low w/o this */
 }
-.dijit_a11y input.dijitValidationInner,
-.dijit_a11y input.dijitArrowButtonInner {
+.dj_a11y input.dijitValidationInner,
+.dj_a11y input.dijitArrowButtonInner {
 	/* (in high contrast mode) revert rules from above so character displays */
 	text-indent: 0 !important;
 	width: 1em !important;
 	#text-align: left !important;
+	color: black !important;
 }
-.dijitTextBoxError .dijitValidationContainer {
+.dijitValidationTextBoxError .dijitValidationContainer {
 	display: inline;
 	cursor: default;
 }
@@ -457,6 +496,7 @@ div.dijitArrowButton {
 	/* dividing line between input area and up/down button(s) for ComboBox and Spinner */
 	border-width: 0 0 0 1px !important; /* !important needed due to wayward ".theme .dijitButtonNode" rules */
 }
+.dj_a11y .dijitSelect .dijitArrowButtonContainer,
 .dijitToolbar .dijitComboBox .dijitArrowButtonContainer {
 	/* overrides above rule plus mirror-image rule in dijit_rtl.css to have no divider when ComboBox in Toolbar */
 	border-width: 0 !important;
@@ -470,7 +510,7 @@ div.dijitArrowButton {
 	/* dividing line between input area and up/down button(s) for ComboBox and Spinner */
 	border-width: 0;
 }
-.dj_ie .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
+.dj_ie .dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
 	clear: both; /* IE workaround */
 }
 
@@ -495,35 +535,36 @@ div.dijitArrowButton {
 .dijitSpinnerButtonContainer .dijitButtonNode {
 	border-width: 0;
 }
-.dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
-	border: 0 none !important;
+.dj_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
+	border-width: 0px !important;
+	border-style: solid !important;
 }
-.dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitSpinner .dijitArrowButtonInner,
-.dijit_a11y .dijitSpinnerButtonContainer input {
+.dj_a11y .dijitTextBox .dijitSpinnerButtonContainer,
+.dj_a11y .dijitSpinner .dijitArrowButtonInner,
+.dj_a11y .dijitSpinnerButtonContainer input {
 	width: 1em !important;
 }
-.dijit_a11y .dijitSpinner .dijitArrowButtonInner {
+.dj_a11y .dijitSpinner .dijitArrowButtonInner {
 	margin: 0 auto !important; /* should auto-center */
 }
-.dj_ie .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+.dj_ie .dj_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 {
+.dj_ie7 .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 	padding-left: 0 !important; /* manually center INPUT: character is .5em and total width = 1em */
 	padding-right: 0 !important;
 	width: 1em !important;
 }
-.dj_ie6 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+.dj_ie6 .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 	margin-left: 0.1em !important;
 	margin-right: 0.1em !important;
 	width: 1em !important;
 }
-.dj_iequirks .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+.dj_iequirks .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 	margin-left: 0 !important;
 	margin-right: 0 !important;
 	width: 2em !important;
@@ -545,7 +586,7 @@ div.dijitArrowButton {
 .dj_iequirks .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
 	width: auto;
 }
-.dijit_a11y .dijitSpinnerButtonContainer .dijitArrowButton {
+.dj_a11y .dijitSpinnerButtonContainer .dijitArrowButton {
 	overflow: visible !important;
 }
 .dijitSpinner .dijitSpinnerButtonContainer .dijitDownArrowButton {
@@ -578,6 +619,7 @@ div.dijitArrowButton {
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	width: 100%;
+	visibility: hidden;
 }
 .dj_ie .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 	zoom: 50%; /* emulate transform: scale(0.5) */
@@ -586,26 +628,19 @@ div.dijitArrowButton {
 	overflow: hidden;
 }
 
-.dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
+.dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
 	width: 100%;
 }
-.dj_iequirks .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
-	width: 1em; /* matches .dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer rule - 100% is the whole screen width in quirks */
+.dj_iequirks .dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
+	width: 1em; /* matches .dj_a11y .dijitTextBox .dijitSpinnerButtonContainer rule - 100% is the whole screen width in quirks */
 }
-.dijitSpinner .dijitArrowButtonInner .dijitInputField {
-	visibility: hidden;
-}
-.dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+.dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
 	vertical-align:top;
 	visibility: visible;
 }
-.dijit_a11y .dijitSpinnerButtonContainer {
+.dj_a11y .dijitSpinnerButtonContainer {
 	width: 1em;
 }
-.dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
-	border-width: 1px 0 0 0;
-	border-style: solid !important;
-}
 
 /****
 		dijit.form.CheckBox
@@ -641,20 +676,20 @@ div.dijitArrowButton {
 	filter: alpha(opacity=0);
 }
 
-.dijit_a11y .dijitCheckBox,
-.dijit_a11y .dijitRadio {
+.dj_a11y .dijitCheckBox,
+.dj_a11y .dijitRadio {
 	/* in a11y mode we display the native checkbox (not the icon), so don't restrict the size */
 	width: auto !important;
 	height: auto !important;
 }
-.dijit_a11y .dijitCheckBoxInput {
+.dj_a11y .dijitCheckBoxInput {
 	opacity: 1;
 	filter: none;
 	width: auto;
 	height: auto;
 }
 
-.dijit_a11y .dijitFocusedLabel {
+.dj_a11y .dijitFocusedLabel {
 	/* for checkboxes or radio buttons in high contrast mode, use border rather than outline to indicate focus (outline does not work in FF)*/
 	border: 1px dotted;
 	outline: 0px !important;
@@ -664,6 +699,9 @@ div.dijitArrowButton {
 		dijit.ProgressBar
  ****/
 
+.dijitProgressBar {
+    z-index: 0; /* so z-index settings below have no effect outside of the ProgressBar */
+}
 .dijitProgressBarEmpty {
 	/* outer container and background of the bar that's not finished yet*/
 	position:relative;overflow:hidden;
@@ -699,7 +737,7 @@ div.dijitArrowButton {
 	background-attachment: fixed;
 }
 
-.dijit_a11y .dijitProgressBarTile {
+.dj_a11y .dijitProgressBarTile {
 	/* a11y:  The border provides visibility in high-contrast mode */
 	border-width:2px;
 	border-style:solid;
@@ -721,7 +759,7 @@ div.dijitArrowButton {
 	display:none;
 }
 
-.dijit_a11y .dijitProgressBarIndeterminate .dijitProgressBarIndeterminateHighContrastImage {
+.dj_a11y .dijitProgressBarIndeterminate .dijitProgressBarIndeterminateHighContrastImage {
 	display:block;
 	position:absolute;
 	top:0;
@@ -768,7 +806,7 @@ div.dijitArrowButton {
 .dijitTooltipConnector {
 	position: absolute;
 }
-.dijit_a11y .dijitTooltipConnector {
+.dj_a11y .dijitTooltipConnector {
 	display: none;	/* won't show b/c it's background-image; hide to avoid border gap */
 }
 
@@ -804,6 +842,7 @@ body .dijitAlignClient { position: absolute; }
 .dijitBorderContainer, .dijitBorderContainerNoGutter {
 	position:relative;
 	overflow: hidden;
+    z-index: 0; /* so z-index settings below have no effect outside of the BorderContainer */
 }
 
 .dijitBorderContainerPane,
@@ -883,7 +922,7 @@ body .dijitAlignClient { position: absolute; }
 	overflow: hidden;
 	display: block;
 }
-.dj_ff3 .dijit_a11y div.dijitSplitter:focus {
+.dj_ff3 .dj_a11y div.dijitSplitter:focus {
 	outline-style:dotted;
 	outline-width: 2px;
 }
@@ -932,11 +971,11 @@ body .dijitAlignClient { position: absolute; }
 	cursor: row-resize;
 }
 
-.dijit_a11y .dijitSplitterH {
+.dj_a11y .dijitSplitterH {
 	border-top:1px solid #d3d3d3 !important;
 	border-bottom:1px solid #d3d3d3 !important;
 }
-.dijit_a11y .dijitSplitterV {
+.dj_a11y .dijitSplitterV {
 	border-left:1px solid #d3d3d3 !important;
 	border-right:1px solid #d3d3d3 !important;
 }
@@ -974,6 +1013,12 @@ body .dijitAlignClient { position: absolute; }
 	/* TitlePane that cannot be toggled */
 	cursor: default;
 }
+.dijitFixedOpen .dijitArrowNode, .dijitFixedOpen .dijitArrowNodeInner,
+.dijitFixedClosed .dijitArrowNode, .dijitFixedClosed .dijitArrowNodeInner{
+	/* don't show the open close icon, it makes the user think the pane is closable*/
+	display: none;
+}
+
 .dijitTitlePaneTitle * {
 	vertical-align: middle;
 }
@@ -981,12 +1026,12 @@ body .dijitAlignClient { position: absolute; }
 	/* normally, hide arrow text in favor of icon */
 	display: none;
 }
-.dijit_a11y .dijitTitlePane .dijitArrowNodeInner {
+.dj_a11y .dijitTitlePane .dijitArrowNodeInner {
 	/* ... except in a11y mode, then show text arrow */
 	display:inline !important;
 	font-family: monospace;		/* because - and + are different widths */
 }
-.dijit_a11y .dijitTitlePane .dijitArrowNode {
+.dj_a11y .dijitTitlePane .dijitArrowNode {
 	/* ... and hide icon */
 	display:none;
 }
@@ -1066,8 +1111,8 @@ body .dijitAlignClient { position: absolute; }
 }
 
 
-.dijit_a11y .dijitColorPalette .dijitPaletteTable,
-.dijit_a11y .dijitColorPalette .dijitPaletteTable * {
+.dj_a11y .dijitColorPalette .dijitPaletteTable,
+.dj_a11y .dijitColorPalette .dijitPaletteTable * {
 	/* table cells are to catch events, but the swatches are in the PaletteImg behind the table */
 	background-color: transparent !important;
 }
@@ -1093,12 +1138,12 @@ body .dijitAlignClient { position: absolute; }
 	font-weight: normal !important;
 }
 
-.dijit_a11y .dijitAccordionTitle .arrowTextUp,
-.dijit_a11y .dijitAccordionTitleSelected .arrowTextDown {
+.dj_a11y .dijitAccordionTitle .arrowTextUp,
+.dj_a11y .dijitAccordionTitleSelected .arrowTextDown {
 	display: inline;
 }
 
-.dijit_a11y .dijitAccordionTitleSelected .arrowTextUp {
+.dj_a11y .dijitAccordionTitleSelected .arrowTextUp {
 	display: none;
 }
 
@@ -1185,6 +1230,15 @@ body .dijitAlignClient { position: absolute; }
 	cursor:pointer;
 }
 
+/*
+No need to show a focus border since it's obvious from the shading, and there's a .dj_a11y .dijitMenuItemSelected
+rule below that handles the high contrast case when there's no shading.
+Hiding the focus border also works around webkit bug https://code.google.com/p/chromium/issues/detail?id=125779.
+*/
+.dijitMenuItem:focus {
+	outline: none
+}
+
 .dijitMenuPassive .dijitMenuItemHover,
 .dijitMenuItemSelected {
 	/*
@@ -1207,11 +1261,10 @@ body .dijitAlignClient { position: absolute; }
 	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;
+.dj_ie .dj_a11y .dijitMenuItemDisabled,
+.dj_ie .dj_a11y .dijitMenuItemDisabled *,
+.dj_ie .dijitMenuItemDisabled * {
+	color: gray;
 	filter: alpha(opacity=35);
 }
 
@@ -1220,25 +1273,25 @@ body .dijitAlignClient { position: absolute; }
 	vertical-align: middle;
 }
 
-.dijit_a11y .dijitMenuItemSelected {
-	border: 1px dotted black !important;
+.dj_a11y .dijitMenuItemSelected {
+	border: 1px dotted black !important;	/* for 2.0 use outline instead, to prevent jitter */
 }
-.dj_ff3 .dijit_a11y .dijitMenuItem td {
+.dj_ff3 .dj_a11y .dijitMenuItem td {
 	padding: 0 !important;
 	background:none !important;
 }
-.dijit_a11y .dijitMenuItemSelected .dijitMenuItemLabel {
+.dj_a11y .dijitMenuItemSelected .dijitMenuItemLabel {
 	border-width: 1px;
 	border-style: solid;
 }
-.dj_ie8 .dijit_a11y .dijitMenuItemLabel {
+.dj_ie8 .dj_a11y .dijitMenuItemLabel {
 	position:static;
 }
 
 .dijitMenuExpandA11y {
 	display: none;
 }
-.dijit_a11y .dijitMenuExpandA11y {
+.dj_a11y .dijitMenuExpandA11y {
 	display: inline;
 }
 
@@ -1270,13 +1323,13 @@ body .dijitAlignClient { position: absolute; }
 .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIconChar {
 	visibility: visible;
 }
-.dijit_a11y .dijitCheckedMenuItemIconChar {
+.dj_a11y .dijitCheckedMenuItemIconChar {
 	display:inline !important;
 }
-.dijit_a11y .dijitCheckedMenuItemIcon {
+.dj_a11y .dijitCheckedMenuItemIcon {
 	display: none;
 }
-.dj_ie .dijit_a11y .dijitMenuBar .dijitMenuItem {
+.dj_ie .dj_a11y .dijitMenuBar .dijitMenuItem {
 	/* so bottom border of MenuBar appears on IE7 in high-contrast mode */
 	margin: 0;
 }
@@ -1287,8 +1340,27 @@ body .dijitAlignClient { position: absolute; }
 	cursor: default;	/* because pressing it has no effect */
 }
 
-/* TabContainer */
+/***
+TabContainer
+
+Main class hierarchy:
+
+.dijitTabContainer - the whole TabContainer
+   .dijitTabController / .dijitTabListContainer-top - wrapper for tab buttons, scroll buttons
+	 .dijitTabListWrapper / .dijitTabContainerTopStrip - outer wrapper for tab buttons (normal width)
+		.nowrapTabStrip / .dijitTabContainerTop-tabs - inner wrapper for tab buttons (50K width)
+   .dijitTabPaneWrapper - wrapper for content panes, has all borders except the one between content and tabs
+***/
+
+.dijitTabContainer {
+    z-index: 0; /* so z-index settings below have no effect outside of the TabContainer */
+    overflow-y: visible; /* prevent off-by-one-pixel errors from hiding bottom border (opposite tab labels) */
+}
+.dj_ie6 .dijitTabContainer {
+    /* workaround IE6 problem when tall content overflows TabContainer, see editor/test_FullScreen.html */
+   overflow: hidden;
 
+}
 .dijitTabContainerNoLayout {
 	width: 100%;	/* otherwise ScrollingTabController goes to 50K pixels wide */
 }
@@ -1297,9 +1369,13 @@ body .dijitAlignClient { position: absolute; }
 .dijitTabContainerTop-tabs,
 .dijitTabContainerLeft-tabs,
 .dijitTabContainerRight-tabs {
+    z-index: 1;
 	overflow: visible !important;  /* so tabs can cover up border adjacent to container */
 }
 
+.dijitTabController {
+    z-index: 1;
+}
 .dijitTabContainerBottom-container,
 .dijitTabContainerTop-container,
 .dijitTabContainerLeft-container,
@@ -1313,12 +1389,14 @@ body .dijitAlignClient { position: absolute; }
 	display: block;
 	position: relative;
     text-align: left;  /* just in case ancestor has non-standard setting */
+    z-index: 1;
 }
 .dijitTabListWrapper {
 	overflow: hidden;
+    z-index: 1;
 }
 
-.dijit_a11y .tabStripButton img {
+.dj_a11y .tabStripButton img {
 	/* hide the icons (or rather the empty space where they normally appear) because text will appear instead */
 	display: none;
 }
@@ -1332,7 +1410,7 @@ body .dijitAlignClient { position: absolute; }
 
 .dijitTabContainerLeft-tabs {
 	border-right: 1px solid black;
-	float: left;
+	float: left;    /* needed for IE7 RTL mode */
 }
 .dijitTabContainerLeft-container {
 	border-left: 0;
@@ -1347,7 +1425,7 @@ body .dijitAlignClient { position: absolute; }
 
 .dijitTabContainerRight-tabs {
 	border-left: 1px solid black;
-	float: left;
+	float: left;    /* needed for IE7 RTL mode */
 }
 .dijitTabContainerRight-container {
 	border-right: 0;
@@ -1393,11 +1471,6 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	#display:inline; /* don't use .dj_ie since that increases the priority */
 }
 
-.dijitTabInnerDiv {
-	position:relative;
-}
-
-
 .tabStripButton {
 	z-index: 12;
 }
@@ -1435,13 +1508,13 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 
 /* images off, high-contrast mode styles */
 
-.dijit_a11y .dijitTabCloseButton {
+.dj_a11y .dijitTabCloseButton {
 	background-image: none !important;
 	width: auto !important;
 	height: auto !important;
 }
 
-.dijit_a11y .dijitTabCloseText {
+.dj_a11y .dijitTabCloseText {
 	display: inline;
 }
 
@@ -1460,14 +1533,14 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	cursor: text;
 }
 
-.dijit_a11y .dijitInlineEditBoxDisplayMode,
+.dj_a11y .dijitInlineEditBoxDisplayMode,
 .dj_ie6 .dijitInlineEditBoxDisplayMode {
 	/* except that IE6 doesn't support transparent borders, nor does high contrast mode */
 	border: none;
 }
 
 .dijitInlineEditBoxDisplayModeHover,
-.dijit_a11y .dijitInlineEditBoxDisplayModeHover,
+.dj_a11y .dijitInlineEditBoxDisplayModeHover,
 .dj_ie6 .dijitInlineEditBoxDisplayModeHover {
 	/* An InlineEditBox in view mode (click this to edit the text) */
 	background-color: #e2ebf2;
@@ -1505,7 +1578,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	display: none;
 }
 
-.dijit_a11y .dijitExpandoText {
+.dj_a11y .dijitExpandoText {
 	display: inline;
 	padding-left: 10px;
 	padding-right: 10px;
@@ -1524,7 +1597,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 .dijitDialog {
 	position: absolute;
 	z-index: 999;
-	overflow: hidden;       /* override overflow: auto; from ContentPane to make dragging smoother */
+	overflow: hidden;	/* override overflow: auto; from ContentPane to make dragging smoother */
 }
 
 .dijitDialogTitleBar {
@@ -1555,8 +1628,8 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 }
 
 /* images off, high-contrast mode styles */
-.dijit_a11y .dijitSpinnerButtonContainer,
-.dijit_a11y .dijitDialog {
+.dj_a11y .dijitSpinnerButtonContainer,
+.dj_a11y .dijitDialog {
 	opacity: 1 !important;
 	background-color: white !important;
 }
@@ -1567,7 +1640,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	position:absolute;
 }
 
-.dijit_a11y .dijitDialog .closeText {
+.dj_a11y .dijitDialog .closeText {
 	display:inline;
 }
 
@@ -1587,7 +1660,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	right:50%;
 }
 
-.dijit_a11y div.dijitSliderImageHandle,
+.dj_a11y div.dijitSliderImageHandle,
 .dijitSliderImageHandle {
 	margin:0;
 	padding:0;
@@ -1597,16 +1670,16 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	height:0;
 	cursor: pointer;
 }
-.dj_iequirks .dijit_a11y .dijitSliderImageHandle {
+.dj_iequirks .dj_a11y .dijitSliderImageHandle {
 	font-size: 0;
 }
 .dj_ie7 .dijitSliderImageHandle {
 	overflow: hidden; /* IE7 workaround to make slider handle VISIBLE in non-a11y mode */
 }
-.dj_ie7 .dijit_a11y .dijitSliderImageHandle {
+.dj_ie7 .dj_a11y .dijitSliderImageHandle {
 	overflow: visible; /* IE7 workaround to make slider handle VISIBLE in a11y mode */
 }
-.dijit_a11y .dijitSliderFocused .dijitSliderImageHandle {
+.dj_a11y .dijitSliderFocused .dijitSliderImageHandle {
 	border:4px solid #000;
 	height:8px;
 	width:8px;
@@ -1727,6 +1800,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 
 .dijitSliderDecorationV {
 	height: 100%;
+	white-space: nowrap;
 }
 
 .dijitSliderButton {
@@ -1736,7 +1810,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	display:block;
 }
 
-.dijit_a11y .dijitSliderButtonInner {
+.dj_a11y .dijitSliderButtonInner {
 	visibility:visible !important;
 }
 
@@ -1825,17 +1899,17 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	margin-top:-.55em;
 }
 
-.dijit_a11y .dijitSliderReadOnly,
-.dijit_a11y .dijitSliderDisabled {
+.dj_a11y .dijitSliderReadOnly,
+.dj_a11y .dijitSliderDisabled {
 	opacity:0.6;
 }
-.dj_ie .dijit_a11y .dijitSliderReadOnly .dijitSliderBar,
-.dj_ie .dijit_a11y .dijitSliderDisabled .dijitSliderBar {
+.dj_ie .dj_a11y .dijitSliderReadOnly .dijitSliderBar,
+.dj_ie .dj_a11y .dijitSliderDisabled .dijitSliderBar {
 	filter: alpha(opacity=40);
 }
 
 /* + and - Slider buttons: override theme settings to display icons */
-.dijit_a11y .dijitSlider .dijitSliderButtonContainer div {
+.dj_a11y .dijitSlider .dijitSliderButtonContainer div {
 	font-family: monospace; /* otherwise hyphen is larger and more vertically centered */
 	font-size: 1em;
 	line-height: 1em;
@@ -1845,10 +1919,16 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 }
 
 /* Icon-only buttons (often in toolbars) still display the text in high-contrast mode */
-.dijit_a11y .dijitButtonContents .dijitButtonText,
-.dijit_a11y .dijitTab .tabLabel {
+.dj_a11y .dijitButtonContents .dijitButtonText,
+.dj_a11y .dijitTab .tabLabel {
 	display: inline !important;
 }
+.dj_a11y .dijitSelect .dijitButtonText {
+	display: inline-block !important;
+}
+.dijitSelectError .dijitButtonContents .dijitButtonText {
+	display: none !important;
+}
 
 /* TextArea, SimpleTextArea */
 .dijitTextArea {
@@ -1932,10 +2012,16 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	color:white;
 	cursor:pointer;
 }
-.dijit_a11y .dijitTimePickerItemSelected .dijitTimePickerItemInner {
+
+.dijitTimePickerItemDisabled {
+	color:gray;
+	text-decoration:line-through;
+}
+
+.dj_a11y .dijitTimePickerItemSelected .dijitTimePickerItemInner {
 	border: solid 4px black;
 }
-.dijit_a11y .dijitTimePickerItemHover .dijitTimePickerItemInner {
+.dj_a11y .dijitTimePickerItemHover .dijitTimePickerItemInner {
 	border: dashed 4px black;
 }
 
@@ -1944,60 +2030,72 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	/* character (instead of icon) to show that ToggleButton is checked */
 	display:none !important;
 }
-.dijit_a11y .dijitToggleButton .dijitToggleButtonIconChar {
+.dj_a11y .dijitToggleButton .dijitToggleButtonIconChar {
 	display:inline !important;
 	visibility:hidden;
 }
 .dj_ie6 .dijitToggleButtonIconChar, .dj_ie6 .tabStripButton .dijitButtonText {
 	font-family: "Arial Unicode MS";	/* otherwise the a11y character (checkmark, arrow, etc.) appears as a box */
 }
-.dijit_a11y .dijitToggleButtonChecked .dijitToggleButtonIconChar {
+.dj_a11y .dijitToggleButtonChecked .dijitToggleButtonIconChar {
 	display: inline !important; /* In high contrast mode, display the check symbol */
 	visibility:visible !important;
 }
 
 .dijitArrowButtonChar {
-        display:none !important;
+	display:none !important;
 }
-.dijit_a11y .dijitArrowButtonChar {
-        display:inline !important;
+.dj_a11y .dijitArrowButtonChar {
+	display:inline !important;
 }
 
-.dijit_a11y .dijitDropDownButton .dijitArrowButtonInner,
-.dijit_a11y .dijitComboButton .dijitArrowButtonInner {
+.dj_a11y .dijitDropDownButton .dijitArrowButtonInner,
+.dj_a11y .dijitComboButton .dijitArrowButtonInner {
 	display:none !important;
 }
 
 /* Select */
-.dijitSelect {
-	margin: 0.2em;
-	border-collapse: collapse;
+.dj_a11y .dijitSelect {
+	border-collapse: separate !important;
+	border-width: 1px;
+	border-style: solid;
 }
-.dj_ie .dijitSelect,
-.dj_ie7 .dijitSelect,
-.dj_iequirks .dijitSelect {
+.dj_ie .dijitSelect {
 	vertical-align: middle; /* Set this back for what we hack in dijit inline */
 }
+.dj_ie6 .dijitSelect .dijitValidationContainer,
 .dj_ie8 .dijitSelect .dijitButtonText {
 	vertical-align: top;
 }
+.dj_ie6 .dijitTextBox .dijitInputContainer,
+.dj_iequirks .dijitTextBox .dijitInputContainer,
+.dj_ie6 .dijitTextBox .dijitArrowButtonInner,
+.dj_ie6 .dijitSpinner .dijitSpinnerButtonInner,
+.dijitSelect .dijitSelectLabel {
+	vertical-align: baseline;
+}
+
+.dijitNumberTextBox {
+	text-align: left;
+	direction: ltr;
+}
+
+.dijitNumberTextBox .dijitInputInner {
+	text-align: inherit; /* input */
+}
+
 .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: 0;
-	background: transparent none;
 	white-space: nowrap;
 	text-align: left;
+	border-style: none solid none none;
+	border-width: 1px;
 }
 .dijitSelectFixedWidth .dijitButtonContents {
 	width: 100%;
@@ -2049,3 +2147,46 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
 	/* a region the user would be able to click on, but it's disabled */
 	cursor: default;
 }
+
+/* Drag and Drop */
+.dojoDndItem {
+    padding: 2px;  /* will be replaced by border during drag over (dojoDndItemBefore, dojoDndItemAfter) */
+
+	/* Prevent magnifying-glass text selection icon to appear on mobile webkit as it causes a touchout event */
+	-webkit-touch-callout: none;
+	-webkit-user-select: none; /* Disable selection/Copy of UIWebView */
+}
+.dojoDndHorizontal .dojoDndItem {
+    /* make contents of horizontal container be side by side, rather than vertical */
+    #display: inline;
+    display: inline-block;
+}
+
+.dojoDndItemBefore,
+.dojoDndItemAfter {
+	border: 0px solid #369;
+}
+.dojoDndItemBefore {
+    border-width: 2px 0 0 0;
+    padding: 0 2px 2px 2px;
+}
+.dojoDndItemAfter {
+    border-width: 0 0 2px 0;
+    padding: 2px 2px 0 2px;
+}
+.dojoDndHorizontal .dojoDndItemBefore {
+    border-width: 0 0 0 2px;
+    padding: 2px 2px 2px 0;
+}
+.dojoDndHorizontal .dojoDndItemAfter {
+    border-width: 0 2px 0 0;
+    padding: 2px 0 2px 2px;
+}
+
+.dojoDndItemOver {
+	cursor:pointer;
+}
+.dj_gecko .dijitArrowButtonInner INPUT,
+.dj_gecko INPUT.dijitArrowButtonInner {
+	-moz-user-focus:ignore;
+}
diff --git a/lib/dijit/themes/dijit_rtl.css b/lib/dijit/themes/dijit_rtl.css
index 9c1b69c0d..432b79ecd 100644
--- a/lib/dijit/themes/dijit_rtl.css
+++ b/lib/dijit/themes/dijit_rtl.css
@@ -15,6 +15,9 @@
 	/* workaround bug where label invisible (themeTesterQuirk.html?dir=rtl) */
 	float:left;
 }
+.dj_ie .dijitTextBoxRtl .dijitInputContainer {
+	clear: right;
+}
 
 /* TextBox, ComboBox, Spinner */
 
@@ -31,17 +34,20 @@
 	left: auto;
 }
 
-.dj_ie7 .dijitInputContainer {
-	/* to fix wrong text alignment in rtl text box in IE */
-	display: inline-block;
+.dijitSelectRtl .dijitButtonText {
+	float: right;
 }
 
 .dijitTextBoxRtl .dijitSpinnerButtonContainer,
-.dijitTextBoxRtl .dijitValidationContainer,
+.dijitValidationTextBoxRtl .dijitValidationContainer,
 .dijitTextBoxRtl .dijitArrowButtonContainer {
 	float: left;
 }
 
+div.dijitNumberTextBoxRtl {
+	text-align: right;
+}
+
 /* Calendar */
 
 .dijitCalendarRtl .dijitCalendarNextYear {
@@ -108,6 +114,23 @@
 	margin-left: 0;
 	margin-right: 1em;
 }
+.dj_ie6 .dijitTabRtl .tabLabel,
+.dj_ie6 .dijitTabContainerRight-tabs .dijitTabRtl,
+.dj_ie6 .dijitTabContainerLeft-tabs .dijitTabRtl,
+.dj_ie7 .dijitTabContainerRight-tabs .dijitTabRtl,
+.dj_ie7 .dijitTabContainerLeft-tabs .dijitTabRtl {
+	zoom: 1;
+}
+.dj_ie6 .dijitTabContainerRight-tabs .dijitTabRtl,
+.dj_ie7 .dijitTabContainerRight-tabs .dijitTabRtl {
+    left: 0;
+}
+
+.dj_ie6 .dijitTabContainerRightRtl .dijitTabContainerRight-tabs,
+.dj_ie6 .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs {
+    /* otherwise tab labels invisible */
+	width: 1%;
+}
 
 /* TimePicker */
 .dj_ie .dijitTimePickerRtl .dijitTimePickerItem {
@@ -124,5 +147,19 @@
 
 /* Select */
 .dijitSelectRtl .dijitButtonContents {
+	border-style: none none none solid;
 	text-align: right;
 }
+
+/* DnD
+ * These rules should apply for containers that are dir=rtl (either set directly, or inherited)
+ * but seems the best we can do is look for .dijitRtl on an ancestor node.
+ */
+.dijitRtl .dojoDndHorizontal .dojoDndItemBefore {
+    border-width: 0 2px 0 0;
+    padding: 2px 0 2px 2px;
+}
+.dijitRtl .dojoDndHorizontal .dojoDndItemAfter {
+    border-width: 0 0 0 2px;
+    padding: 2px 2px 2px 0;
+}
diff --git a/lib/dijit/themes/nihilo/Common.css b/lib/dijit/themes/nihilo/Common.css
index 498699083..1a1c7f930 100644
--- a/lib/dijit/themes/nihilo/Common.css
+++ b/lib/dijit/themes/nihilo/Common.css
@@ -1,17 +1,9 @@
-/* DnD avatar-specific settings */
-/* For now it uses a default set of rules. Some other DnD classes can be modified as well. */
-.nihilo .dojoDndItemBefore {
-	border-top: 2px solid #369;
-}
-
-.nihilo .dojoDndItemAfter {
-	border-bottom: 2px solid #369;
-}
-
 .nihilo .dojoDndItemOver {
-	cursor:pointer;
+	background-image: url(images/treeHover.png);
 }
 
+/* DnD avatar-specific settings */
+/* For now it uses a default set of rules. Some other DnD classes can be modified as well. */
 .nihilo table.dojoDndAvatar { -moz-border-radius: 0; border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; font-size: 75%; color: black;}
 .nihilo .dojoDndAvatar td	{ border: none; }
 .nihilo .dojoDndAvatar tr	{ border: none; }
diff --git a/lib/dijit/themes/nihilo/Dialog.css b/lib/dijit/themes/nihilo/Dialog.css
index 4affeb866..248260467 100644
--- a/lib/dijit/themes/nihilo/Dialog.css
+++ b/lib/dijit/themes/nihilo/Dialog.css
@@ -67,15 +67,7 @@
 }
 
 .nihilo .dijitTooltipContainer {
-	/*
-		The part with the text.
-
-		NOTE:
-			FF doesn't clip images used as CSS bgs if you specify a border
-			radius. If you use a solid color, it does. Webkit gets it right.
-			Sigh.
-		background: #ffffff url("images/popupMenuBg.gif") repeat-x bottom left;
-	*/
+	/* The part with the text. */
 	background-color: #fff;
 	border:1px solid #d3d3d3;
 	padding:0.45em;
diff --git a/lib/dijit/themes/nihilo/form/Button.css b/lib/dijit/themes/nihilo/form/Button.css
index 90e1ee2cc..83c719b25 100644
--- a/lib/dijit/themes/nihilo/form/Button.css
+++ b/lib/dijit/themes/nihilo/form/Button.css
@@ -16,14 +16,13 @@
 	background: #fff url("../images/buttonEnabled.png") repeat-x top left;
 }
 
-.nihilo .dijitSelect .dijitButtonContents {
-	border-right: none;
-}
-
 .nihilo .dijitButtonText {
 	text-align: center;
 	padding: 0 0.3em;
 }
+.nihilo .dijitInputField {
+	padding: 0; /* set padding:0 for .nihilo .dijitSelect .dijitButtonText but with a low priority rule that can be easily trumped by the user */
+}
 
 .nihilo .dijitComboBox .dijitButtonNode {
 	border-width: 0 0 0 1px;
diff --git a/lib/dijit/themes/nihilo/form/Button_rtl.css b/lib/dijit/themes/nihilo/form/Button_rtl.css
index 60d4c4da4..07886d058 100644
--- a/lib/dijit/themes/nihilo/form/Button_rtl.css
+++ b/lib/dijit/themes/nihilo/form/Button_rtl.css
@@ -1,8 +1,4 @@
-.dijitRtl .nihilo .dijitComboBox .dijitButtonNode {
+.nihilo .dijitComboBoxRtl .dijitButtonNode {
 	border-width: 0 0 0 1px;
 }
-.dijitRtl .nihilo .dijitSelect .dijitButtonContents {
-	border-left: none;
-	border-right-width: 1px;
-}
 
diff --git a/lib/dijit/themes/nihilo/form/Common.css b/lib/dijit/themes/nihilo/form/Common.css
index b67195f4b..31bf95ee3 100644
--- a/lib/dijit/themes/nihilo/form/Common.css
+++ b/lib/dijit/themes/nihilo/form/Common.css
@@ -10,11 +10,12 @@
 		dijit.form.ComboBox (partial)
  ****/
 
-.nihilo .dijitInputContainer input,
-.nihilo .dijitTextBox {
+.nihilo .dijitInputContainer input {
 	margin: 0 0.1em;
 }
 
+.nihilo .dijitSelect .dijitButtonContents,
+.nihilo .dijitSelect,
 .nihilo .dijitTextBox,
 .nihilo .dijitTextArea {
 	/* 	For all except dijit.form.NumberSpinner:  the actual input element.
@@ -23,26 +24,34 @@
 	*/
 	background:#fff url("../images/validationInputBg.png") repeat-x top left;
 	#background:#fff url('../images/validationInputBg.gif') repeat-x top left;
+}
+.nihilo .dijitSelect,
+.nihilo .dijitTextBox,
+.nihilo .dijitTextArea {
 	border:1px solid #d3d3d3;
 }
 
+.nihilo .dijitSelect .dijitArrowButton,
 .nihilo .dijitComboBox .dijitButtonNode {
-	padding: 0 0.2em !important;
+	padding: 0 0.2em;
 }
+.nihilo .dijitSelect .dijitButtonContents,
 .nihilo .dijitTextBox .dijitButtonNode {
 	/* line between the input area and the drop down button */
 	border-color: #d3d3d3;
 }
 
+.nihilo .dijitSelectFocused,
 .nihilo .dijitTextBoxFocused,
 .nihilo .dijitTextAreaFocused {
 	/* input field when focused (ie: typing affects it) */
 	border-color:#b3b3b3;
 }
+.nihilo .dijitSelectFocused TD,
 .nihilo .dijitTextBoxFocused .dijitButtonNode,
 .nihilo .dijitSpinner .dijitUpArrowButtonActive,
 .nihilo .dijitSpinner .dijitDownArrowButtonActive {
-	border-left-color:#d3d3d3;
+	border-color:#d3d3d3;
 }
 .nihilo .dijitSpinnerFocused .dijitDownArrowButton,
 .nihilo .dijitSpinner .dijitUpArrowButtonActive,
@@ -62,7 +71,7 @@
 }
 
 /* Validation errors  */
-.nihilo .dijitValidationIcon {
+.nihilo .dijitValidationTextBoxError .dijitValidationIcon {
 	/* prevent height change when widget goes from valid to invalid state */
 	width: 16px;
 	background: transparent url('../images/warning.png') no-repeat center center;
diff --git a/lib/dijit/themes/nihilo/form/Select.css b/lib/dijit/themes/nihilo/form/Select.css
index 61967e550..6e6a9c442 100644
--- a/lib/dijit/themes/nihilo/form/Select.css
+++ b/lib/dijit/themes/nihilo/form/Select.css
@@ -1,45 +1,38 @@
-.nihilo .dijitSelect .dijitButtonNode {
-	padding: 0;
-}
-
-/* Make unselected "look" more like a text box and less like a button */
-.nihilo .dijitSelect .dijitButtonContents {
-	padding-top: 1px;
-    background:#fff url("../images/validationInputBg.png") repeat-x top left;
-    #background:#fff url('../images/validationInputBg.gif') repeat-x top left;
-}
-.nihilo .dijitSelectHover .dijitButtonContents,
-.nihilo .dijitSelectActive .dijitButtonContents,
-.nihilo .dijitSelectOpened .dijitButtonContents,
-.nihilo .dijitSelectDisabled .dijitButtonContents,
-.nihilo .dijitSelectReadOnly .dijitButtonContents{
+.nihilo .dijitSelectError .dijitButtonContents,
+.nihilo .dijitSelectHover .dijitArrowButton,
+.nihilo .dijitSelectActive .dijitArrowButton,
+.nihilo .dijitSelectOpened .dijitArrowButton,
+.nihilo .dijitSelectDisabled .dijitArrowButton,
+.nihilo .dijitSelectReadOnly .dijitArrowButton {
 	background: transparent none;
 }
-.dj_ie .nihilo .dijitSelect .dijitButtonContents {
-	padding-top: 0;
-}
 
 .nihilo .dijitSelect .dijitArrowButton {
-	padding: 0 2px;
+	background: #bcd5f0 url("../images/buttonEnabled.png") repeat-x top left;
+	border-width: 0;
 }
 
 /* Mirror DropDownButton */
-.nihilo .dijitSelectDisabled .dijitButtonNode {
-    border-color: #dedede;
+.nihilo .dijitSelectDisabled,
+.nihilo .dijitSelectDisabled TD {
+    border-color: #dedede !important;
     background:#fafafa url("../images/buttonDisabled.png") top repeat-x;
 }
-.dj_ie .nihilo .dijitSelectDisabled  .dijitButtonNode * {
+.dj_ie .nihilo .dijitSelectDisabled  TD * {
 	filter: gray() alpha(opacity=50);
 }
 
-.nihilo .dijitSelectHover .dijitButtonNode {
+.nihilo .dijitSelectHover,
+.nihilo .dijitSelectHover TD {
     color:#000;
     background:#fcfcfc url("../images/buttonHover.png") repeat-x top left;
 }
 
-.nihilo .dijitSelectActive .dijitButtonNode,
-.nihilo .dijitSelectOpened .dijitButtonNode {
-    border-color:#dedede;
+.nihilo .dijitSelectActive,
+.nihilo .dijitSelectOpened,
+.nihilo .dijitSelectActive TD,
+.nihilo .dijitSelectOpened TD {
+    border-color:#dedede !important;
     background: #f5f5f5 url("../images/buttonActive.png") top left repeat-x;
 }
 
@@ -51,4 +44,3 @@
 .nihilo .dijitSelectMenu .dijitMenuArrowCell {
 	padding: 0.1em 0.2em;
 }
-
diff --git a/lib/dijit/themes/nihilo/form/TimeTextBox.css b/lib/dijit/themes/nihilo/form/TimeTextBox.css
index bf67b66d0..d450925b4 100644
--- a/lib/dijit/themes/nihilo/form/TimeTextBox.css
+++ b/lib/dijit/themes/nihilo/form/TimeTextBox.css
@@ -1 +1 @@
-@CHARSET "UTF-8";
\ No newline at end of file
+@CHARSET "UTF-8";
diff --git a/lib/dijit/themes/nihilo/images/dndNoCopy.png b/lib/dijit/themes/nihilo/images/dndNoCopy.png
index 9bf9c3396..998c2f269 100644
Binary files a/lib/dijit/themes/nihilo/images/dndNoCopy.png and b/lib/dijit/themes/nihilo/images/dndNoCopy.png differ
diff --git a/lib/dijit/themes/nihilo/images/dndNoMove.png b/lib/dijit/themes/nihilo/images/dndNoMove.png
index cb8bd8bdd..e909173e0 100644
Binary files a/lib/dijit/themes/nihilo/images/dndNoMove.png and b/lib/dijit/themes/nihilo/images/dndNoMove.png differ
diff --git a/lib/dijit/themes/nihilo/images/tabBottomActiveSpriteLR.gif b/lib/dijit/themes/nihilo/images/tabBottomActiveSpriteLR.gif
deleted file mode 100644
index 6803db442..000000000
Binary files a/lib/dijit/themes/nihilo/images/tabBottomActiveSpriteLR.gif and /dev/null differ
diff --git a/lib/dijit/themes/nihilo/images/tabBottomEnabledSpriteLR.gif b/lib/dijit/themes/nihilo/images/tabBottomEnabledSpriteLR.gif
deleted file mode 100644
index b6b08ce48..000000000
Binary files a/lib/dijit/themes/nihilo/images/tabBottomEnabledSpriteLR.gif and /dev/null differ
diff --git a/lib/dijit/themes/nihilo/images/tabBottomHoverSpriteLR.gif b/lib/dijit/themes/nihilo/images/tabBottomHoverSpriteLR.gif
deleted file mode 100644
index 010b08ae9..000000000
Binary files a/lib/dijit/themes/nihilo/images/tabBottomHoverSpriteLR.gif and /dev/null differ
diff --git a/lib/dijit/themes/nihilo/images/tabLeftChecked.gif b/lib/dijit/themes/nihilo/images/tabLeftChecked.gif
deleted file mode 100644
index d59fd4a5b..000000000
Binary files a/lib/dijit/themes/nihilo/images/tabLeftChecked.gif and /dev/null differ
diff --git a/lib/dijit/themes/nihilo/images/tabRightChecked.gif b/lib/dijit/themes/nihilo/images/tabRightChecked.gif
deleted file mode 100644
index d32f44e3c..000000000
Binary files a/lib/dijit/themes/nihilo/images/tabRightChecked.gif and /dev/null differ
diff --git a/lib/dijit/themes/nihilo/images/tabStripe.gif b/lib/dijit/themes/nihilo/images/tabStripe.gif
deleted file mode 100644
index a93467520..000000000
Binary files a/lib/dijit/themes/nihilo/images/tabStripe.gif and /dev/null differ
diff --git a/lib/dijit/themes/nihilo/images/tabStripeBottom.gif b/lib/dijit/themes/nihilo/images/tabStripeBottom.gif
deleted file mode 100644
index 64c3376bd..000000000
Binary files a/lib/dijit/themes/nihilo/images/tabStripeBottom.gif and /dev/null differ
diff --git a/lib/dijit/themes/nihilo/images/tabStripeLeft.gif b/lib/dijit/themes/nihilo/images/tabStripeLeft.gif
deleted file mode 100644
index d607a45f7..000000000
Binary files a/lib/dijit/themes/nihilo/images/tabStripeLeft.gif and /dev/null differ
diff --git a/lib/dijit/themes/nihilo/images/tabStripeRight.gif b/lib/dijit/themes/nihilo/images/tabStripeRight.gif
deleted file mode 100644
index 9778cedf7..000000000
Binary files a/lib/dijit/themes/nihilo/images/tabStripeRight.gif and /dev/null differ
diff --git a/lib/dijit/themes/nihilo/layout/TabContainer.css b/lib/dijit/themes/nihilo/layout/TabContainer.css
index 21266577e..dba38c3fa 100644
--- a/lib/dijit/themes/nihilo/layout/TabContainer.css
+++ b/lib/dijit/themes/nihilo/layout/TabContainer.css
@@ -1,9 +1,5 @@
 /**
  * dijit.layout.TabContainer
- *
- * To style TabContainer with rounded corners
- * you can use these classes: .dijitTab (left), .dijitTabContent (center), dijitTabInnerDiv (right)
- * For tabs aligned to top you can style a stripe div right underneath the tabs using .dijitTabStripe
  */
 @import url("../Menu.css");
 
@@ -28,54 +24,25 @@
 	padding: 0;
 }
 
-.nihilo .dijitTabInnerDiv {
-	padding:0 3px 0 0;
-	margin: 0 0 0 4px;
-	background: url("../images/tabContainerSprite.gif") no-repeat;
-	background-position: right -400px;
-}
-
 .nihilo .dijitTab {
+    padding:3px 6px 3px 4px;
+    background: url("../images/tabContainerSprite.gif") repeat-x 0 -350px;
+    position: relative;
 	line-height:normal;
-	margin:0 2px 0 0;	/* space between one tab and the next in top/bottom mode */
-	padding:0;
-	background: url("../images/tabContainerSprite.gif") no-repeat 0 -300px;
+	margin: 0 1px;	/* space between one tab and the next in top/bottom mode */
 	color: #6d6d6d;
+    border: 1px #dedede solid;
 	border-bottom: 1px #ccc solid;
 }
 
-.nihilo .dijitTabInnerDiv .dijitTabContent {
-	padding:3px 3px 3px 4px;
-	background: url("../images/tabContainerSprite.gif") repeat-x 0 -350px;
-	position: relative;
-}
-
 /* hovered tab */
 .nihilo .dijitTabHover {
 	color: #243C5F;
-	background: url("../images/tabContainerSprite.gif") no-repeat 0 -150px;
-}
-
-.nihilo .dijitTabHover .dijitTabInnerDiv {
-	background: url("../images/tabContainerSprite.gif") no-repeat right -250px;
-}
-
-.nihilo .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
 	background: url("../images/tabContainerSprite.gif") repeat-x 0 -200px;
 }
 
-/* checked tab*/
-.nihilo .dijitTabChecked
-{
-	/* the selected tab (with or without hover) */
-	background: url("../images/tabContainerSprite.gif") no-repeat 0 -0;
-}
-
-.nihilo .dijitTabChecked .dijitTabInnerDiv {
-	background: url("../images/tabContainerSprite.gif") no-repeat right -100px;
-}
-
-.nihilo .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
+/* selected tab */
+.nihilo .dijitTabChecked {
 	background: url("../images/tabContainerSprite.gif") repeat-x 0 -50px;
 	color: #243C5F !important;
 }
@@ -95,11 +62,7 @@
 	border: none;
 	top: 0;	/* override top:1px setting of top-level tabs */
 }
-.nihilo .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv,
-.nihilo .dijitTabContainerTabListNested .dijitTab .dijitTabContent {
-	background: none;
-}
-.nihilo .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent .tabLabel {
+.nihilo .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
 	text-decoration: underline;
 }
 .nihilo .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
@@ -142,6 +105,10 @@
 	background-position: bottom;
 	padding-left: 3px;
 }
+.nihilo .dijitTabContainerTop-tabs .dijitTab {
+    border-radius: 4px 4px 0 0;
+    -moz-border-radius: 4px 4px 0 0;
+}
 
 .dj_ie6 .nihilo .dijitTabListContainer-top,
 .dj_ie7 .nihilo .dijitTabListContainer-top {
@@ -163,7 +130,7 @@
 	border-top: none;
 }
 
-/* checked tabs */
+/* selected tab */
 .nihilo .dijitTabContainerTop-tabs .dijitTabChecked {
 	border-bottom-color: #f8f8f8;
 }
@@ -187,68 +154,43 @@
 	background-position: top;
 	padding-left: 3px;
 }
-
-.dj_ie6 .nihilo .dijitTabListContainer-bottom,
-.dj_ie7 .nihilo .dijitTabListContainer-bottom {
-	z-index: 3;
-}
-
-.dj_ie6 .nihilo .dijitTabContainerBottom-tabs,
-.dj_ie7 .nihilo .dijitTabContainerBottom-tabs {
-	border-top: 1px solid #ccc;
-	margin-top: -1px;
-}
-
-/* bottom container */
-.nihilo .dijitTabContainerBottom-container {
-	border-bottom: none;
-}
-
 .nihilo .dijitTabContainerBottom-tabs .dijitTab {
-	border-bottom: none;
-	border-top: 1px solid #ccc;
-	background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom left;
-}
-
-/* checked tabs */
-.nihilo .dijitTabContainerBottom-tabs .dijitTabChecked {
-	border-top-color: #f8f8f8;
-}
-
-.nihilo .dijitTabContainerBottom-tabs .dijitTabInnerDiv .dijitTabContent {
-	padding-top: 3px;
-	padding-bottom: 3px;
-	background: url("../images/tabBottomEnabledC.gif") repeat-x bottom left;
+    border-radius: 0 0 4px 4px;
+    -moz-border-radius: 0 0 4px 4px;
+    border-bottom: none;
+    border-top: 1px solid #ccc;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    background: url("../images/tabBottomEnabledC.gif") repeat-x bottom left;
 }
 
-.nihilo .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
-	background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom right;
-}
 
 .nihilo .dijitTabContainerBottom-tabs .dijitTabHover {
 	color: #243C5F;
-	background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom left;
-}
-
-.nihilo .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv {
-	background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom right;
-}
-
-.nihilo .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
 	background: url("../images/tabBottomHoverC.gif") repeat-x bottom left;
 }
 
 .nihilo .dijitTabContainerBottom-tabs .dijitTabChecked {
 	/* the selected tab (with or without hover) */
-	background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom left;
+    border-top-color: #f8f8f8;
+	background: url("../images/tabBottomActiveC.gif") repeat-x bottom left;
 }
 
-.nihilo .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
-	background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom right;
+
+.dj_ie6 .nihilo .dijitTabListContainer-bottom,
+.dj_ie7 .nihilo .dijitTabListContainer-bottom {
+	z-index: 3;
 }
 
-.nihilo .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
-	background: url("../images/tabBottomActiveC.gif") repeat-x bottom left;
+.dj_ie6 .nihilo .dijitTabContainerBottom-tabs,
+.dj_ie7 .nihilo .dijitTabContainerBottom-tabs {
+	border-top: 1px solid #ccc;
+	margin-top: -1px;
+}
+
+/* bottom container */
+.nihilo .dijitTabContainerBottom-container {
+	border-bottom: none;
 }
 
 /* strip */
@@ -264,14 +206,15 @@
 .nihilo .dijitTabContainerTop-spacer {
 	height: 2px;
 	border: 1px solid #ccc;
-	background: #f8f8f8;
 }
 
 .nihilo  .dijitTabContainerTop-spacer {
 	margin-top: -1px;
+    background: #f3f3f3;
 }
 .nihilo .dijitTabContainerBottom-spacer {
 	margin-bottom: -1px;
+    background: #f8f8f8;
 }
 
 
@@ -281,49 +224,42 @@
 	border-color: #ccc;
 	padding-top: 3px;
 }
+.nihilo .dijitTabContainerRight-tabs .dijitTab {
+    border-radius: 0 4px 4px 0;
+    -moz-border-radius: 0 4px 4px 0;
+    border-left: 1px solid #ccc;
+    border-bottom: 1px solid #dedede !important;
+}
+
 .nihilo .dijitTabContainerRight .dijitTabListWrapper {
 	padding-right: 3px;
 }
+.nihilo .dijitTabContainerRight-tabs .dijitTabChecked {
+	border-left: 1px solid #f8f8f8;
+}
+
 
 /* right container */
 .nihilo .dijitTabContainerRight-container {
 	border-right: none;
 }
 
-.nihilo .dijitTabContainerRight-tabs .dijitTab {
-	border-bottom: none;
-	border-left: 1px solid #ccc;
-	border-bottom: 1px solid #dedede !important;
-}
-
-
-/* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
-.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabInnerDiv {
+/* some odd ie bug when borders disappear when setting a bottom margin, this sort of helps */
+.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTab {
 	border-bottom: solid #fff 1px;
 }
 
-/* checked tabs */
+/* selected tab */
 .nihilo .dijitTabContainerRight-tabs .dijitTabChecked {
 	border-left-color: #f8f8f8;
 }
 
-.nihilo .dijitTabContainerRight-tabs .dijitTabChecked {
-	background: url("../images/tabRightChecked.gif") no-repeat left top !important;
-}
-
-/* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
-.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
+/* some odd ie bug when borders disappear when setting a bottom margin, this sort of helps */
+.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabChecked,
+.dj_ie .nihilo .dijitTabContainerRight-tabs .dijitTabCheckedHover {
 	border-bottom: solid #efefef 1px;
 }
 
-.nihilo .dijitTabContainerRight-tabs .dijitTab {
-	background: url("../images/tabContainerSprite.gif") no-repeat left -350px;
-}
-.nihilo .dijitTabContainerRight-tabs .dijitTabHover .dijitTab {
-	background: url("../images/tabContainerSprite.gif") no-repeat left -200px;
-}
-
 /* strip */
 .nihilo .dijitTabContainerRightStrip {
 	padding-right: 2px;
@@ -338,35 +274,26 @@
 	border-color: #ccc;
 	padding-top: 3px;
 }
-
-/* left conatiner */
-.nihilo .dijitTabContainerLeft-container {
-	border-left: none;
-}
-
 .nihilo .dijitTabContainerLeft-tabs .dijitTab {
-	border-right: 1px solid #ccc;
-	border-bottom: 1px solid #dedede;
+    border-radius: 4px 0 0 4px;
+    -moz-border-radius: 4px 0 0 4px;
+    border-right: 1px solid #ccc;
+    border-bottom: 1px solid #dedede;
 }
 
-/* checked tabs */
+/* selected tab */
 .nihilo .dijitTabContainerLeft-tabs .dijitTabChecked {
 	border-right: 1px solid #f8f8f8;
 }
 
-.nihilo .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
-	background: url("../images/tabContainerSprite.gif") no-repeat right -350px;
-}
-.nihilo .dijitTabContainerLeft-tabs .dijitTabHover .dijitTabInnerDiv {
-	background: url("../images/tabContainerSprite.gif") no-repeat right -200px;
-}
-.nihilo .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
-.nihilo .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
-	background: url("../images/tabLeftChecked.gif") no-repeat right top;
+/* left container */
+.nihilo .dijitTabContainerLeft-container {
+	border-left: none;
 }
 
-.dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
+
+.dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabChecked,
+.dj_ie .nihilo .dijitTabContainerLeft-tabs .dijitTabCheckedHover {
 	border-bottom: solid #efefef 1px;
 }
 
@@ -389,8 +316,7 @@
 /* left/right tabs */
 .nihilo .dijitTabContainerLeft-tabs .dijitTab,
 .nihilo .dijitTabContainerRight-tabs .dijitTab {
-	margin-right:auto;
-	margin-bottom:2px;	/* space between one tab and the next in left/right mode */
+	margin: 1px 0;	/* space between one tab and the next in left/right mode */
 }
 
 /* left/right tabstrip */
@@ -419,7 +345,7 @@
 
 /* ================================ */
 
-/* this resets the tabcontainer stripe when within a contentpane */
+/* this resets the tabcontainer strip when within a contentpane */
 .nihilo .dijitTabContainerTop-dijitContentPane .dijitTabContainerTop-tabs {
 	border-left: 0 solid #ccc;
 	border-top: 0 solid #ccc;
@@ -433,10 +359,7 @@
 /* Menu and slider control styles */
 .nihilo .dijitTabContainer .tabStripButton {
 	margin-right: 0;
-}
-
-.nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent {
-	padding: 5px 0 6px;
+	padding: 5px 3px 6px 0px;
 }
 
 .dj_ie6 .nihilo .tabStripButton .dijitTabInnerDiv .dijitTabContent,
@@ -445,10 +368,6 @@
 	padding-bottom: 7px;
 }
 
-.nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent {
-	padding: 3px 0 5px;
-}
-
 .dj_ie6 .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent,
 .dj_ie7 .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent,
 .dj_opera .nihilo .tabStrip-disabled .tabStripButton .dijitTabInnerDiv .dijitTabContent {
@@ -482,15 +401,6 @@
 }
 
 .nihilo .dijitTabContainer .tabStripButton-bottom {
-	background: transparent url(../images/tabBottomEnabledSpriteLR.gif) no-repeat scroll left bottom;
 	border-bottom: medium none;
 	border-top: 1px solid #CCCCCC;
 }
-
-.nihilo .dijitTabContainer .tabStripButton-bottom .dijitTabInnerDiv {
-	background: transparent url(../images/tabBottomEnabledSpriteLR.gif) no-repeat scroll right bottom;
-}
-
-.nihilo .dijitTabContainer .tabStripButton-bottom .dijitTabContent {
-	background: transparent;
-}
\ No newline at end of file
diff --git a/lib/dijit/themes/soria/Common.css b/lib/dijit/themes/soria/Common.css
index d5a7c9df6..93efae7ba 100644
--- a/lib/dijit/themes/soria/Common.css
+++ b/lib/dijit/themes/soria/Common.css
@@ -1,16 +1,15 @@
-/* DnD avatar-specific settings */
-/* For now it uses a default set of rules. Some other DnD classes can be modified as well. */
-.soria .dojoDndItemBefore {
-	border-top: 2px solid #369;
+/* DnD hovered and selected node(s) */
+.soria .dojoDndItemOver {
+	background-image: url(images/treeHover.png);
 }
-
-.soria .dojoDndItemAfter {
-	border-bottom: 2px solid #369;
+.soria .dojoDndItemAnchor,
+.soria .dojoDndItemSelected {
+	background-color: #B8CBEC;
 }
 
-.soria .dojoDndItemOver {
-	cursor:pointer;
-}
+
+/* DnD avatar-specific settings */
+/* For now it uses a default set of rules. Some other DnD classes can be modified as well. */
 
 .soria table.dojoDndAvatar { -moz-border-radius: 0; border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; font-size: 75%; color: black;}
 .soria .dojoDndAvatar td	{ border: none; }
diff --git a/lib/dijit/themes/soria/Dialog.css b/lib/dijit/themes/soria/Dialog.css
index 1e0503a0b..956df8d5e 100644
--- a/lib/dijit/themes/soria/Dialog.css
+++ b/lib/dijit/themes/soria/Dialog.css
@@ -67,15 +67,7 @@
 }
 
 .soria .dijitTooltipContainer {
-	/*
-		The part with the text.
-
-		NOTE:
-			FF doesn't clip images used as CSS bgs if you specify a border
-			radius. If you use a solid color, it does. Webkit gets it right.
-			Sigh.
-		background: #ffffff url("images/popupMenuBg.gif") repeat-x bottom left;
-	*/
+	/* The part with the text. */
 	background-color: #fff;
 	border:1px solid #cbcbcb;
 	padding:0.45em;
diff --git a/lib/dijit/themes/soria/form/Button.css b/lib/dijit/themes/soria/form/Button.css
index 9efe7ead8..e00c48f58 100644
--- a/lib/dijit/themes/soria/form/Button.css
+++ b/lib/dijit/themes/soria/form/Button.css
@@ -14,14 +14,14 @@
 	padding: 0.1em 0.2em 0.2em 0.2em;
 	background: #bcd5f0 url("../images/buttonEnabled.png") repeat-x top left;
 }
-.soria .dijitSelect .dijitButtonContents {
-	border-right: none;
-}
 
 .soria .dijitButtonText {
 	text-align: center;
 	padding: 0 0.3em;
 }
+.soria .dijitInputField {
+	padding: 0; /* set padding:0 for .soria .dijitSelect .dijitButtonText but with a low priority rule that can be easily trumped by the user */
+}
 
 .soria .dijitArrowButton {
 	color: #111;
diff --git a/lib/dijit/themes/soria/form/Button_rtl.css b/lib/dijit/themes/soria/form/Button_rtl.css
index e2f3728f3..cf47470a9 100644
--- a/lib/dijit/themes/soria/form/Button_rtl.css
+++ b/lib/dijit/themes/soria/form/Button_rtl.css
@@ -1,7 +1,3 @@
-.dijitRtl .soria .dijitComboBox .dijitButtonNode {
+.soria .dijitComboBoxRtl .dijitButtonNode {
 	border-width: 0 0 0 1px;
 }
-.dijitRtl .soria .dijitSelect .dijitButtonContents {
-	border-left: none;
-	border-right-width: 1px;
-}
diff --git a/lib/dijit/themes/soria/form/Common.css b/lib/dijit/themes/soria/form/Common.css
index 42dfefa2e..d6ea6e275 100644
--- a/lib/dijit/themes/soria/form/Common.css
+++ b/lib/dijit/themes/soria/form/Common.css
@@ -10,11 +10,12 @@
 		dijit.form.ComboBox (partial)
  ****/
 
-.soria .dijitInputContainer input,
-.soria .dijitTextBox {
+.soria .dijitInputContainer input {
 	margin: 0 0.1em;
 }
 
+.soria .dijitSelect .dijitButtonContents,
+.soria .dijitSelect,
 .soria .dijitTextBox,
 .soria .dijitTextArea {
 	/* 	For all except dijit.form.NumberSpinner:  the actual input element.
@@ -23,26 +24,35 @@
 	*/
 	background:#fff url("../images/validationInputBg.png") repeat-x top left;
 	#background:#fff url('../images/validationInputBg.gif') repeat-x top left;
+}
+.soria .dijitSelect,
+.soria .dijitTextBox,
+.soria .dijitTextArea {
 	border:1px solid #8ba0bd;
 }
 
+.soria .dijitSelect .dijitArrowButton,
 .soria .dijitComboBox .dijitButtonNode {
 	padding: 0 0.2em;
 }
+
+.soria .dijitSelect .dijitButtonContents,
 .soria .dijitTextBox .dijitButtonNode {
 	/* line between the input area and the drop down button */
 	border-color: #8ba0bd;
 }
 
+.soria .dijitSelectFocused,
 .soria .dijitTextBoxFocused,
 .soria .dijitTextAreaFocused {
 	/* input field when focused (ie: typing affects it) */
 	border-color:#406b9b;
 }
+.soria .dijitSelectFocused TD,
 .soria .dijitTextBoxFocused .dijitButtonNode,
 .soria .dijitSpinner .dijitUpArrowButtonActive,
 .soria .dijitSpinner .dijitDownArrowButtonActive {
-	border-left-color:#8ba0bd;
+	border-color:#8ba0bd;
 }
 .soria .dijitSpinnerFocused .dijitDownArrowButton,
 .soria .dijitSpinner .dijitUpArrowButtonActive,
@@ -62,7 +72,7 @@
 }
 
 /* Validation errors  */
-.soria .dijitValidationIcon {
+.soria .dijitValidationTextBoxError .dijitValidationIcon {
 	/* prevent height change when widget goes from valid to invalid state */
 	width: 16px;
 	background: transparent url('../images/warning.png') no-repeat center center;
diff --git a/lib/dijit/themes/soria/form/Select.css b/lib/dijit/themes/soria/form/Select.css
index 18567720e..895ab7eaa 100644
--- a/lib/dijit/themes/soria/form/Select.css
+++ b/lib/dijit/themes/soria/form/Select.css
@@ -1,46 +1,40 @@
-.soria .dijitSelect .dijitButtonNode {
-	padding: 0;
-}
-
 /* Make unselected "look" more like a text box and less like a button */
-.soria .dijitSelect .dijitButtonContents {
-	padding-top: 1px;
-    background:#fff url("../images/validationInputBg.png") repeat-x top left;
-    #background:#fff url('../images/validationInputBg.gif') repeat-x top left;
-}
-.soria .dijitSelectHover .dijitButtonContents,
-.soria .dijitSelectActive .dijitButtonContents,
-.soria .dijitSelectOpened .dijitButtonContents,
-.soria .dijitSelectDisabled .dijitButtonContents,
-.soria .dijitSelectReadOnly .dijitButtonContents{
+.soria .dijitSelectError .dijitButtonContents,
+.soria .dijitSelectHover .dijitArrowButton,
+.soria .dijitSelectActive .dijitArrowButton,
+.soria .dijitSelectOpened .dijitArrowButton,
+.soria .dijitSelectDisabled .dijitArrowButton,
+.soria .dijitSelectReadOnly .dijitArrowButton {
 	background: transparent none;
 }
-.dj_ie .soria .dijitSelect .dijitButtonContents {
-	padding-top: 0;
-}
-
 .soria .dijitSelect .dijitArrowButton {
-	padding: 0 2px;
+	background: #bcd5f0 url("../images/buttonEnabled.png") repeat-x top left;
+	border-width: 0;
 }
 
 /* Mirror DropDownButton */
-.soria .dijitSelectDisabled .dijitButtonNode {
-    border-color: #b9bbdd #b9bbdd #b9bbdd #b9bbdd;
-    background:#c3d3e5 url("../images/buttonDisabled.png") top repeat-x;
+.soria .dijitSelectDisabled,
+.soria .dijitSelectDisabled TD {
+	border-color: #b9bbdd !important;
+	background:#c3d3e5 url("../images/buttonDisabled.png") top repeat-x;
 }
-.dj_ie .soria .dijitSelectDisabled  .dijitButtonNode * {
+.dj_ie .soria .dijitSelectDisabled TD * {
 	filter: gray() alpha(opacity=50);
 }
 
-.soria .dijitSelectHover .dijitButtonNode {
-    color:#000;
-    background:#acc5e2 url("../images/buttonHover.png") repeat-x top left;
+.soria .dijitSelectHover,
+.soria .dijitSelectHover TD {
+	border-color:#a5beda #5c7590 #5c7590 #a5beda !important;
+	color:#000;
+	background:#acc5e2 url("../images/buttonHover.png") repeat-x top left;
 }
 
-.soria .dijitSelectActive .dijitButtonNode,
-.soria .dijitSelectOpened .dijitButtonNode {
-    border-color:#657c9c;
-    background: #91b4e5 url("../images/buttonActive.png") top left repeat-x;
+.soria .dijitSelectActive,
+.soria .dijitSelectOpened,
+.soria .dijitSelectActive TD,
+.soria .dijitSelectOpened TD {
+	border-color:#657c9c !important;
+	background: #91b4e5 url("../images/buttonActive.png") top left repeat-x;
 }
 
 /* Make the menu look more combobox-like */
@@ -51,4 +45,3 @@
 .soria .dijitSelectMenu .dijitMenuArrowCell {
 	padding: 0.1em 0.2em;
 }
-
diff --git a/lib/dijit/themes/soria/form/TimeTextBox.css b/lib/dijit/themes/soria/form/TimeTextBox.css
index bf67b66d0..d450925b4 100644
--- a/lib/dijit/themes/soria/form/TimeTextBox.css
+++ b/lib/dijit/themes/soria/form/TimeTextBox.css
@@ -1 +1 @@
-@CHARSET "UTF-8";
\ No newline at end of file
+@CHARSET "UTF-8";
diff --git a/lib/dijit/themes/soria/images/dndNoCopy.png b/lib/dijit/themes/soria/images/dndNoCopy.png
index 9bf9c3396..998c2f269 100644
Binary files a/lib/dijit/themes/soria/images/dndNoCopy.png and b/lib/dijit/themes/soria/images/dndNoCopy.png differ
diff --git a/lib/dijit/themes/soria/images/dndNoMove.png b/lib/dijit/themes/soria/images/dndNoMove.png
index cb8bd8bdd..e909173e0 100644
Binary files a/lib/dijit/themes/soria/images/dndNoMove.png and b/lib/dijit/themes/soria/images/dndNoMove.png differ
diff --git a/lib/dijit/themes/soria/images/tabBottomActiveSpriteLR.gif b/lib/dijit/themes/soria/images/tabBottomActiveSpriteLR.gif
deleted file mode 100644
index 7c2ed86d2..000000000
Binary files a/lib/dijit/themes/soria/images/tabBottomActiveSpriteLR.gif and /dev/null differ
diff --git a/lib/dijit/themes/soria/images/tabBottomHoverSpriteLR.gif b/lib/dijit/themes/soria/images/tabBottomHoverSpriteLR.gif
deleted file mode 100644
index 59f3edd60..000000000
Binary files a/lib/dijit/themes/soria/images/tabBottomHoverSpriteLR.gif and /dev/null differ
diff --git a/lib/dijit/themes/soria/images/tabLeftChecked.gif b/lib/dijit/themes/soria/images/tabLeftChecked.gif
index 3e7475aa5..439aa6b44 100644
Binary files a/lib/dijit/themes/soria/images/tabLeftChecked.gif and b/lib/dijit/themes/soria/images/tabLeftChecked.gif differ
diff --git a/lib/dijit/themes/soria/images/tabRightChecked.gif b/lib/dijit/themes/soria/images/tabRightChecked.gif
index ec4b65936..cfffd1e70 100644
Binary files a/lib/dijit/themes/soria/images/tabRightChecked.gif and b/lib/dijit/themes/soria/images/tabRightChecked.gif differ
diff --git a/lib/dijit/themes/soria/images/tabStripe.gif b/lib/dijit/themes/soria/images/tabStripe.gif
deleted file mode 100644
index 51a2d40aa..000000000
Binary files a/lib/dijit/themes/soria/images/tabStripe.gif and /dev/null differ
diff --git a/lib/dijit/themes/soria/images/tabStripeBottom.gif b/lib/dijit/themes/soria/images/tabStripeBottom.gif
deleted file mode 100644
index 41b1ac0f6..000000000
Binary files a/lib/dijit/themes/soria/images/tabStripeBottom.gif and /dev/null differ
diff --git a/lib/dijit/themes/soria/images/tabStripeLeft.gif b/lib/dijit/themes/soria/images/tabStripeLeft.gif
deleted file mode 100644
index b2214fa41..000000000
Binary files a/lib/dijit/themes/soria/images/tabStripeLeft.gif and /dev/null differ
diff --git a/lib/dijit/themes/soria/images/tabStripeRight.gif b/lib/dijit/themes/soria/images/tabStripeRight.gif
deleted file mode 100644
index bff311553..000000000
Binary files a/lib/dijit/themes/soria/images/tabStripeRight.gif and /dev/null differ
diff --git a/lib/dijit/themes/soria/layout/TabContainer.css b/lib/dijit/themes/soria/layout/TabContainer.css
index b96d16955..38a1a77e1 100644
--- a/lib/dijit/themes/soria/layout/TabContainer.css
+++ b/lib/dijit/themes/soria/layout/TabContainer.css
@@ -1,9 +1,5 @@
 /**
  * dijit.layout.TabContainer
- *
- * To style TabContainer with rounded corners
- * you can use these classes: .dijitTab (left), .dijitTabContent (center), dijitTabInnerDiv (right)
- * For tabs aligned to top you can style a stripe div right underneath the tabs using .dijitTabStripe
  */
 
 /* Classes for all types of tabs (top/bottom/left/right) */
@@ -32,68 +28,39 @@
 	padding-left: 0;
 }
 
-.soria .dijitTabInnerDiv {
-	padding:0 3px 0 0;
-	margin: 0 0 0 4px;
-	background: url("../images/tabContainerSprite.gif") no-repeat;
-	background-position: right -400px;
-}
-
 .soria .dijitTab {
+    padding:4px 6px 2px 4px;
+    background: url("../images/tabContainerSprite.gif") repeat-x 0 -351px;
+    position: relative;
 	line-height:normal;
 	margin:0 2px 0 0;	/* space between one tab and the next in top/bottom mode */
-	padding:0;
-	background: url("../images/tabContainerSprite.gif") no-repeat 0 -300px;
 	color: #243C5F;
+    border: 1px #8BA0BD solid;
 	border-bottom: 1px #B1BADF solid;
 }
 
-.soria .dijitTabInnerDiv .dijitTabContent {
-	padding:4px 3px 2px 4px;
-	background: url("../images/tabContainerSprite.gif") repeat-x 0 -350px;
-	position: relative;
-}
-
-
-
-.soria .dijitTabListWrapper {
-	z-index: 10;
-}
-
 /* hovered tab */
 .soria .dijitTabHover {
 	color: #243C5F;
-	background: url("../images/tabContainerSprite.gif") no-repeat 0 -150px;
-}
-
-.soria .dijitTabHover .dijitTabInnerDiv {
-	background: url("../images/tabContainerSprite.gif") no-repeat right -250px;
+	background: url("../images/tabContainerSprite.gif") repeat-x 0 -201px;
 }
 
-.soria .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
-	background: url("../images/tabContainerSprite.gif") repeat-x 0 -200px;
-}
-
-/* checked tab*/
+/* selected tab*/
 .soria .dijitTabChecked
 {
-	/* the selected tab (with or without hover) */
-	background: url("../images/tabContainerSprite.gif") no-repeat 0 -0;
+	background: url("../images/tabContainerSprite.gif") repeat-x 0 -51px;
+	color: #243C5F !important;
 }
 
-.soria .dijitTabChecked .dijitTabInnerDiv {
-	background: url("../images/tabContainerSprite.gif") no-repeat right -100px;
-}
 
-.soria .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
-	background: url("../images/tabContainerSprite.gif") repeat-x 0 -50px;
-	color: #243C5F !important;
+.soria .dijitTabListWrapper {
+	z-index: 10;
 }
 
+
 /* Nested Tabs */
 
 .soria .dijitTabContainerTabListNested {
-	background: #F0F4FC;
 	background: #D9E9F9;
 	border: none;
 }
@@ -102,11 +69,7 @@
 	border: none;
 	top: 0;	/* override top:1px setting of top-level tabs */
 }
-.soria .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv,
-.soria .dijitTabContainerTabListNested .dijitTab .dijitTabContent {
-	background: none;
-}
-.soria .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent .tabLabel {
+.soria .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
 	text-decoration: underline;
 }
 .soria .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
@@ -146,6 +109,10 @@
 	border-color: #B1BADF;
 	padding-left: 3px;
 }
+.soria .dijitTabContainerTop-tabs .dijitTab {
+    border-radius: 4px 4px 0 0;
+    -moz-border-radius: 4px 4px 0 0;
+}
 
 .soria .dijitTabContainerTopNoStrip {
 	padding-top: 3px;
@@ -160,12 +127,12 @@
 	border-bottom: none;
 }
 
-/*non-checked tabs */
+/*unselected tabs */
 .soria .dijitTabContainerTop-tabs .dijitTab {
 	top: 1px;
 }
 
-/* checked tabs */
+/* selected tabs */
 .soria .dijitTabContainerTop-tabs .dijitTabChecked {
 	border-bottom-color: #94b4e6;
 }
@@ -202,59 +169,32 @@
 	float: left;
 }
 
-/* bottom container */
-.soria .dijitTabContainerBottom-container {
-	border-bottom: none;
-}
-
 .soria .dijitTabContainerBottom-tabs .dijitTab {
-	border-bottom: none;
-	border-top: 1px solid #B1BADF;
-	background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom left;
-}
-
-/* checked tabs */
-.soria .dijitTabContainerBottom-tabs .dijitTabChecked {
-	border-top-color:#94b4e6;
-}
-
-
-.soria .dijitTabContainerBottom-tabs .dijitTabInnerDiv .dijitTabContent {
-	padding-top: 3px;
-	padding-bottom: 3px;
-	background: url("../images/tabBottomEnabledC.gif") repeat-x bottom left;
-}
-
-.soria .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
-	background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom right;
+    border-bottom: none;
+    border-top: 1px solid #B1BADF;
+    border-radius: 0 0 4px 4px;
+    -moz-border-radius: 0 0 4px 4px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    background: url("../images/tabBottomEnabledC.gif") repeat-x bottom left;
 }
 
 .soria .dijitTabContainerBottom-tabs .dijitTabHover {
-	color: #243C5F;
-	background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom left;
-}
-
-.soria .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv {
-	background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom right;
-}
-
-.soria .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv .dijitTabContent {
 	background: url("../images/tabBottomHoverC.gif") repeat-x bottom left;
 }
 
-.soria .dijitTabContainerBottom-tabs .dijitTabChecked {
-	/* the selected tab (with or without hover) */
-	background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom left;
+.soria .dijitTabContainerBottom-tabs .dijitTabChecked  {
+    border-top-color:#94b4e6;
+	background: url("../images/tabBottomActiveC.gif") repeat-x bottom left;
 }
 
-.soria .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
-	background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom right;
-}
 
-.soria .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
-	background: url("../images/tabBottomActiveC.gif") repeat-x bottom left;
+/* bottom container */
+.soria .dijitTabContainerBottom-container {
+	border-bottom: none;
 }
 
+
 /* strip */
 .soria .dijitTabContainerBottomStrip {
 	padding-bottom: 2px;
@@ -288,51 +228,44 @@
 	border-color: #ccc;
 	padding-top: 3px;
 }
+.soria .dijitTabContainerRight-tabs .dijitTab {
+    border-radius: 0 4px 4px 0;
+    -moz-border-radius: 0 4px 4px 0;
+    border-bottom: none;
+    border-left: 1px solid #B1BADF;
+    border-bottom: 1px solid #B1BADF !important;
+    padding:  4px 6px 2px 8px;
+}
+
+.soria .dijitTabContainerRight-tabs .dijitTabChecked {
+	border-left-color: #94b4e6;
+    background: url("../images/tabRightChecked.gif") no-repeat left top !important;
+}
+
 
 /* right container */
 .soria .dijitTabContainerRight-container {
 	border-right: none;
 }
 
-.soria .dijitTabContainerRight-tabs .dijitTab {
-	border-bottom: none;
-	border-left: 1px solid #B1BADF;
-	border-bottom: 1px solid #B1BADF !important;
-}
 
-
-/* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
-.dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerRight-tabs .dijitTabInnerDiv {
+/* some odd ie bug when borders disappear when setting a bottom margin, this sort of helps */
+.dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTab,
+.dj_ie7 .soria .dijitTabContainerRight-tabs .dijitTab {
 	border-bottom: solid #B1BADF 1px;
 	margin-bottom: -1px;
 }
 
-/* checked tabs */
-.soria .dijitTabContainerRight-tabs .dijitTabChecked {
-	border-left-color: #94b4e6;
-}
-
-.soria .dijitTabContainerRight-tabs .dijitTabChecked {
-	background: url("../images/tabRightChecked.gif") no-repeat left top !important;
-}
 
-/* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
-.dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTabCheckedHover .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerRight-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
+/* some odd ie bug when borders disappear when setting a bottom margin, this sort of helps */
+.dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTabChecked,
+.dj_ie7 .soria .dijitTabContainerRight-tabs .dijitTabChecked,
+.dj_ie6 .soria .dijitTabContainerRight-tabs .dijitTabCheckedHover,
+.dj_ie7 .soria .dijitTabContainerRight-tabs .dijitTabCheckedHover {
 	border-bottom: solid #94b4e6 1px;
 	margin-bottom: -1px;
 }
 
-.soria .dijitTabContainerRight-tabs .dijitTab {
-	background: url("../images/tabContainerSprite.gif") no-repeat left -350px;
-}
-.soria .dijitTabContainerRight-tabs .dijitTabHover .dijitTab {
-	background: url("../images/tabContainerSprite.gif") no-repeat left -200px;
-}
-
 /* strip */
 .soria .dijitTabContainerRightStrip {
 	padding-right: 2px;
@@ -348,43 +281,34 @@
 	padding-top: 3px;
 	height: 100%;
 }
-
-/* left conatiner */
-.soria .dijitTabContainerLeft-container {
-	border-left: none;
-}
-
 .soria .dijitTabContainerLeft-tabs .dijitTab {
-	border-right: 1px solid #B1BADF;
-	border-bottom: 1px solid #B1BADF;
+    border-radius: 4px 0 0 4px;
+    -moz-border-radius: 4px 0 0 4px;
+    border-right: 1px solid #B1BADF;
+    border-bottom: 1px solid #B1BADF;
 }
 
-/* checked tabs */
 .soria .dijitTabContainerLeft-tabs .dijitTabChecked {
 	border-right: 1px solid #94b4e6;
+    background: url("../images/tabLeftChecked.gif") no-repeat right top;
 }
 
-.soria .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
-	background: url("../images/tabContainerSprite.gif") no-repeat right -350px;
-}
-.soria .dijitTabContainerLeft-tabs .dijitTabHover .dijitTabInnerDiv {
-	background: url("../images/tabContainerSprite.gif") no-repeat right -200px;
-}
-.soria .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
-.soria .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
-	background: url("../images/tabLeftChecked.gif") no-repeat right top;
+/* left container */
+.soria .dijitTabContainerLeft-container {
+	border-left: none;
 }
 
-.dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
+
+.dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTab,
+.dj_ie7 .soria .dijitTabContainerLeft-tabs .dijitTab {
 	border-bottom: solid #B1BADF 1px;
 	margin-bottom: -1px;
 }
 
-.dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
-.dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv,
-.dj_ie7 .soria .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
+.dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTab,
+.dj_ie7 .soria .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTab,
+.dj_ie6 .soria .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTab,
+.dj_ie7 .soria .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTab {
 	border-bottom: solid #94b4e6 1px;
 	margin-bottom: -1px;
 }
@@ -401,8 +325,7 @@
 /* left/right tabs */
 .soria .dijitTabContainerLeft-tabs .dijitTab,
 .soria .dijitTabContainerRight-tabs .dijitTab {
-	margin-right:auto;
-	margin-bottom:2px;	/* space between one tab and the next in left/right mode */
+    margin: 1px 0;	/* space between one tab and the next in left/right mode */
 }
 
 /* left/right tabstrip */
@@ -421,7 +344,7 @@
 }
 /* ================================ */
 
-/* this resets the tabcontainer stripe when within a contentpane */
+/* this resets the tabcontainer strip when within a contentpane */
 .soria .dijitTabContainerTop-dijitContentPane .dijitTabContainerTop-tabs {
 	border-left: 0 solid #ccc;
 	border-top: 0 solid #ccc;
@@ -441,19 +364,11 @@
 	margin-top: 1px;
 }
 
-.soria .tabStripButton .dijitTabContent{
-	padding: 6px 0 5px 0;
-}
-
 .dj_ie6 .soria .tabStripButton .dijitTabContent,
 .dj_ie7 .soria .tabStripButton .dijitTabContent {
 	padding-top: 7px;
 }
 
-.soria .tabStrip-disabled .tabStripButton .dijitTabContent {
-	padding: 5px 0 3px 0;
-}
-
 .dj_ie6 .soria .tabStrip-disabled .tabStripButton .dijitTabContent,
 .dj_ie7 .soria .tabStrip-disabled .tabStripButton .dijitTabContent {
 	padding-top: 6px;
@@ -465,14 +380,10 @@
 	border-top: 1px solid #B1BADF;
 }
 
-.soria .dijitTabContainer .tabStripButton-bottom .dijitTabInnerDiv {
+.soria .dijitTabContainer .tabStripButton-bottom .dijitTab {
 	background: transparent url(../images/tabBottomEnabledSpriteLR.gif) no-repeat scroll right bottom;
 }
 
-.soria .dijitTabContainer .tabStripButton-bottom .dijitTabContent {
-	background: transparent;
-}
-
 .soria .dijitTabStripIcon {
 	height: 14px;
 	width: 14px;
diff --git a/lib/dijit/themes/tundra/Common.css b/lib/dijit/themes/tundra/Common.css
index eb3e341f7..82a133bec 100644
--- a/lib/dijit/themes/tundra/Common.css
+++ b/lib/dijit/themes/tundra/Common.css
@@ -1,16 +1,14 @@
-/* DnD avatar-specific settings */
-/* For now it uses a default set of rules. Some other DnD classes can be modified as well. */
-.tundra .dojoDndItemBefore {
-	border-top: 2px solid #369;
+/* DnD hovered and selected node(s) */
+.tundra .dojoDndItemOver {
+	background-image: url(images/treeHover.png);
 }
-
-.tundra .dojoDndItemAfter {
-	border-bottom: 2px solid #369;
+.tundra .dojoDndItemAnchor,
+.tundra .dojoDndItemSelected {
+	background-color: #E2EBFE;
 }
 
-.tundra .dojoDndItemOver {
-	cursor:pointer;
-}
+/* DnD avatar-specific settings */
+/* For now it uses a default set of rules. Some other DnD classes can be modified as well. */
 
 .tundra table.dojoDndAvatar { -moz-border-radius: 0; border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; font-size: 75%; color: black;}
 .tundra .dojoDndAvatar td	{ border: none; }
diff --git a/lib/dijit/themes/tundra/form/Button.css b/lib/dijit/themes/tundra/form/Button.css
index 2c68aef04..d274745e9 100644
--- a/lib/dijit/themes/tundra/form/Button.css
+++ b/lib/dijit/themes/tundra/form/Button.css
@@ -18,6 +18,9 @@
 	text-align: center;
 	padding: 0 0.3em;
 }
+.tundra .dijitInputField {
+	padding: 0; /* set padding:0 for .tundra .dijitSelect .dijitButtonText but with a low priority rule that can be easily trumped by the user */
+}
 
 .tundra .dijitDisabled .dijitButtonText {
 	color: #7F7F7F;
@@ -112,12 +115,11 @@
 .tundra .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner {
 	background-position: -49px center;
 }
-.dj_webkit .tundra .dijitSpinner .dijitUpArrowButton .dijitArrowButtonInner {
-	margin-top: -1px; /* image has too many blank pixels on top */
-}
 .dj_ie .tundra .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {
 	margin-top: -2px; /* image has too many blank pixels on top */
 }
+.dj_webkit .tundra .dijitSpinner .dijitUpArrowButton .dijitArrowButtonInner,
+.dj_iequirks .tundra .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner,
 .dj_ie8 .tundra .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {
 	margin-top: -1px; /* image has too many blank pixels on top */
 }
diff --git a/lib/dijit/themes/tundra/form/Common.css b/lib/dijit/themes/tundra/form/Common.css
index 96899e138..2122184da 100644
--- a/lib/dijit/themes/tundra/form/Common.css
+++ b/lib/dijit/themes/tundra/form/Common.css
@@ -10,8 +10,7 @@
 		dijit.form.ComboBox (partial)
  ****/
 
-.tundra .dijitInputContainer input,
-.tundra .dijitTextBox {
+.tundra .dijitInputContainer input {
 	margin: 0 0.1em;
 }
 
@@ -19,6 +18,8 @@
 	padding: 3px;
 }
 
+.tundra .dijitSelect .dijitButtonContents,
+.tundra .dijitSelect,
 .tundra .dijitTextBox {
 	/* 	For all except dijit.form.NumberSpinner:  the actual input element.
 		For TextBox, ComboBox, Spinner: the div that contains the input.
@@ -26,13 +27,17 @@
 	*/
 	background:#fff url("../images/validationInputBg.png") repeat-x top left;
 	#background:#fff url('../images/validationInputBg.gif') repeat-x top left;
+}
+.tundra .dijitSelect,
+.tundra .dijitTextBox {
 	border:1px solid #b3b3b3;
 }
 
-/* ComboBox specific rules*/
+.tundra .dijitSelect .dijitArrowButton,
 .tundra .dijitComboBox .dijitButtonNode {
 	padding: 0 0.2em;
 }
+.tundra .dijitSelect .dijitButtonContents,
 .tundra .dijitTextBox .dijitButtonNode {
 	/* line between the input area and the drop down button, and also between
 	 * the up and down buttons of a spinner
@@ -40,10 +45,12 @@
 	border-color: #9b9b9b;
 }
 
+.tundra .dijitSelectFocused,
 .tundra .dijitTextBoxFocused {
 	/* input field when focused (ie: typing affects it) */
 	border-color:#406b9b;
 }
+.tundra .dijitSelectFocused TD,
 .tundra .dijitTextBoxFocused .dijitButtonNode {
 	border-color:#366dba;
 }
@@ -59,7 +66,7 @@
 }
 
 /* Validation errors  */
-.tundra .dijitValidationIcon {
+.tundra .dijitValidationTextBoxError .dijitValidationIcon {
 	/* prevent height change when widget goes from valid to invalid state */
 	width: 16px;
 	background: transparent url('../images/warning.png') no-repeat center center;
diff --git a/lib/dijit/themes/tundra/form/Select.css b/lib/dijit/themes/tundra/form/Select.css
index b0290167a..3e0e77e0a 100644
--- a/lib/dijit/themes/tundra/form/Select.css
+++ b/lib/dijit/themes/tundra/form/Select.css
@@ -1,47 +1,39 @@
-.tundra .dijitSelect .dijitButtonNode {
-	padding: 0;
-}
-.tundra .dijitSelect .dijitButtonNode .dijitArrowButtonInner {
-	margin: 0 4px 0 5px;
-}
-
 /* Make unselected content portion "look" more like a text box and less like a button */
-.tundra .dijitSelect .dijitButtonContents {
-	padding-top: 1px;
-	background:#fff url("../images/validationInputBg.png") repeat-x top left;
-	#background:#fff url('../images/validationInputBg.gif') repeat-x top left;
-}
-.tundra .dijitSelectHover .dijitButtonContents,
-.tundra .dijitSelectActive .dijitButtonContents,
-.tundra .dijitSelectOpened .dijitButtonContents,
-.tundra .dijitSelectDisabled .dijitButtonContents,
-.tundra .dijitSelectReadOnly .dijitButtonContents{
+.tundra .dijitSelectError .dijitButtonContents,
+.tundra .dijitSelectHover .dijitArrowButton,
+.tundra .dijitSelectActive .dijitArrowButton,
+.tundra .dijitSelectOpened .dijitArrowButton,
+.tundra .dijitSelectDisabled .dijitArrowButton,
+.tundra .dijitSelectReadOnly .dijitArrowButton {
 	background: transparent none;
 }
-.dj_ie .tundra .dijitSelect .dijitButtonContents {
-	padding-top: 0;
+.tundra .dijitSelect .dijitArrowButton {
+	background: #fff url("../images/buttonEnabled.png") repeat-x bottom left;
+	border-width: 0;
 }
 
 /* Mirror DropDownButton */
-.tundra .dijitSelectDisabled .dijitButtonNode {
-	border-color: #d5d5d5 #bdbdbd #bdbdbd #d5d5d5;
+.tundra .dijitSelectDisabled,
+.tundra .dijitSelectDisabled TD {
+	border-color: #d5d5d5 #bdbdbd #bdbdbd #d5d5d5 !important;
 	background:#e4e4e4 url("../images/buttonDisabled.png") top repeat-x;
 }
-.dj_ie .tundra .dijitSelectDisabled  .dijitButtonNode * {
+.dj_ie .tundra .dijitSelectDisabled TD * {
 	filter: gray() alpha(opacity=50);
 }
 
-.tundra .dijitSelectHover .dijitButtonNode {
-	border-color:#a5beda;
-	border-bottom-color:#5c7590;
-	border-right-color:#5c7590;
+.tundra .dijitSelectHover,
+.tundra .dijitSelectHover TD {
+	border-color:#a5beda #5c7590 #5c7590 #a5beda !important;
 	color:#243C5F;
 	background:#fcfdff url("../images/buttonHover.png") repeat-x bottom;
 }
 
-.tundra .dijitSelectActive .dijitButtonNode,
-.tundra .dijitSelectOpened .dijitButtonNode {
-	border-color:#366dba;
+.tundra .dijitSelectActive,
+.tundra .dijitSelectOpened,
+.tundra .dijitSelectActive TD,
+.tundra .dijitSelectOpened TD {
+	border-color:#366dba !important;
 	background: #ededed url("../images/buttonActive.png") bottom repeat-x;
 }
 
@@ -53,5 +45,3 @@
 .tundra .dijitSelectMenu .dijitMenuArrowCell {
 	padding: 0.1em 0.2em;
 }
-
-
diff --git a/lib/dijit/themes/tundra/images/dndNoCopy.png b/lib/dijit/themes/tundra/images/dndNoCopy.png
index 9bf9c3396..998c2f269 100644
Binary files a/lib/dijit/themes/tundra/images/dndNoCopy.png and b/lib/dijit/themes/tundra/images/dndNoCopy.png differ
diff --git a/lib/dijit/themes/tundra/images/dndNoMove.png b/lib/dijit/themes/tundra/images/dndNoMove.png
index cb8bd8bdd..e909173e0 100644
Binary files a/lib/dijit/themes/tundra/images/dndNoMove.png and b/lib/dijit/themes/tundra/images/dndNoMove.png differ
diff --git a/lib/dijit/themes/tundra/layout/TabContainer.css b/lib/dijit/themes/tundra/layout/TabContainer.css
index 667da4ad9..a6676c673 100644
--- a/lib/dijit/themes/tundra/layout/TabContainer.css
+++ b/lib/dijit/themes/tundra/layout/TabContainer.css
@@ -9,15 +9,11 @@
 .tundra .dijitTab {
 	line-height:normal;
 	margin-right:4px;	/* space between one tab and the next in top/bottom mode */
-	padding:0;
+    padding:2px 8px 2px 9px;
 	border:1px solid #ccc;
 	background:#e2e2e2 url("../images/tabEnabled.png") repeat-x;
 }
 
-.tundra .dijitTabInnerDiv {
-	padding:2px 8px 2px 9px;
-}
-
 .tundra .dijitTabSpacer {
 	display: none;
 }
@@ -37,7 +33,7 @@
 	bottom: 2px;
 }
 
-/* checked tab*/
+/* selected tab */
 .tundra .dijitTabChecked {
 	/* the selected tab (with or without hover) */
 	background-color:#fff;
@@ -98,12 +94,11 @@
 	border: none;
 	top: 0;		/* to override top: 1px/-1px for normal tabs */
 }
-.tundra .dijitTabContainerTabListNested .dijitTab .dijitTabContent {
-}
-.tundra .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent .tabLabel {
+
+.tundra .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
 	text-decoration: underline;
 }
-.tundra .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent .tabLabel {
+.tundra .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
 	text-decoration: underline;
 	font-weight: bold;
 	/*background:#f3f3f3;*/
@@ -149,7 +144,7 @@
 	border-top: none;
 }
 
-/* checked tabs */
+/* selected tab */
 .tundra .dijitTabContainerTop-tabs .dijitTabChecked {
 	border-bottom-color:white;
 }
@@ -192,7 +187,7 @@
 	border-bottom: none;
 }
 
-/* checked tabs */
+/* selected tab */
 .tundra .dijitTabContainerBottom-tabs .dijitTabChecked {
 	border-top-color:white;
 }
@@ -222,7 +217,7 @@
 	border-right: none;
 }
 
-/* checked tabs */
+/* selected tab */
 .tundra .dijitTabContainerRight-tabs .dijitTabChecked {
 	border-left-color:white;
 }
@@ -245,12 +240,12 @@
 	height: 100%;
 }
 
-/* left conatiner */
+/* left container */
 .tundra .dijitTabContainerLeft-container {
 	border-left: none;
 }
 
-/* checked tabs */
+/* selected tab */
 .tundra .dijitTabContainerLeft-tabs .dijitTabChecked {
 	border-right-color:white;
 }
@@ -292,29 +287,18 @@
 }
 
 .tundra .dijitTabContainerBottom .tabStripButton {
-	padding-top: 2px;
+	padding-top: 3px;
 }
 
-.tundra .tabStrip-disabled .tabStripButton .dijitTabInnerDiv {
+.tundra .tabStrip-disabled .tabStripButton {
 	padding-bottom: 3px;
 	padding-top: 1px;
 }
 
-.tundra .tabStripButton .dijitTabInnerDiv {
+.tundra .tabStripButton {
 	padding: 3px 2px 4px 2px;
 }
 
-.dj_ie6 .tundra .tabStripButton .dijitTabInnerDiv,
-.dj_ie7 .tundra .tabStripButton .dijitTabInnerDiv,
-.dj_opera .tundra .tabStripButton .dijitTabInnerDiv {
-	padding-bottom: 5px;
-}
-.dj_ie6 .tundra .tabStrip-disabled .tabStripButton .dijitTabInnerDiv,
-.dj_ie7 .tundra .tabStrip-disabled .tabStripButton .dijitTabInnerDiv,
-.dj_opera .tundra .tabStrip-disabled .tabStripButton .dijitTabInnerDiv {
-	padding-bottom: 4px;
-}
-
 .tundra .dijitTabStripIcon {
 	height: 14px;
 	width: 14px;
diff --git a/lib/dijit/themes/tundra/layout/TabContainer_rtl.css b/lib/dijit/themes/tundra/layout/TabContainer_rtl.css
index fb8e28e9b..6e5ba7580 100644
--- a/lib/dijit/themes/tundra/layout/TabContainer_rtl.css
+++ b/lib/dijit/themes/tundra/layout/TabContainer_rtl.css
@@ -1,51 +1,3 @@
 .tundra .dijitTabRtl {
-	-moz-box-orient:horizontal;
-	text-align: right;
-}
-
-.tundra .dijitTabRtl .dijitTabInnerDiv {
 	padding:2px 9px 2px 8px;
 }
-
-.tundra .tabStrip-disabled .tabStripButtonRtl .dijitTabInnerDiv {
-	/* this is not special for RTL mode, but just here to override rule above (for enabled tabstrip) */
-	padding-bottom: 3px;
-	padding-top: 1px;
-}
-
-.tundra .tabStripButtonRtl .dijitTabInnerDiv {
-	padding: 3px 2px 4px 2px;
-}
-
-.tundra .dijitTabPaneWrapper {
-	#zoom: 1;
-}
-
-.dj_ie-rtl .tundra .dijitTabContainerLeft-tabs {
-	margin-left: 1px !important;
-}
-
-.dj_ie-rtl .tundra .dijitTabContainerRight-tabs {
-	margin-right: 1px !important;
-}
-
-.tundra .dijitTabContainerLeft-tabs .dijitTabRtl,
-.tundra .dijitTabContainerRight-tabs .dijitTabRtl {
-	margin-left:0;
-}
-
-.dj_ie .tundra .dijitTabRtl .dijitTabInnerDiv {
-	/* without this the tab label and icon become invisible, as though they were set to visibility:hidden */
-	width : 0.1% !important;
-}
-
-
-
-.dj_iequirks-rtl .tundra .dijitTabContainerTopNone,
-.dj_iequirks-rtl .tundra .dijitTabContainerBottomNone {
-	/* this strange rule prevents IE6 bug in themeTesterQuirk.html?dir=rtl upon closing
-	 * "Closable" tab, where the other tabs disappear
-	 */
-	border-left: 1px solid #fff;
-	border-right: 1px solid #fff;
-}
-- 
cgit v1.2.3