diff options
Diffstat (limited to 'lib/dijit/themes/claro')
93 files changed, 1276 insertions, 1092 deletions
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 <input>. 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, @@ -64,15 +68,6 @@ /* 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, @@ -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 <input> 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 <input> 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 Binary files differdeleted file mode 100644 index cb787cb2c..000000000 --- a/lib/dijit/themes/claro/form/images/button.png +++ /dev/null diff --git a/lib/dijit/themes/claro/form/images/buttonDisabled.png b/lib/dijit/themes/claro/form/images/buttonDisabled.png Binary files differnew file mode 100644 index 000000000..faf57ba1d --- /dev/null +++ b/lib/dijit/themes/claro/form/images/buttonDisabled.png 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 @@ +<?xml version="1.0" ?> +<!-- + Source file for buttonDisabled.png, which is used by IE7-9 for Button gradients. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match gradients defined in Button.css. It is however an approximation, since generated + output has a constant height, rather than matching the height of each button. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="18px" viewBox="0 0 1 18" preserveAspectRatio="none"> + + <defs> + <linearGradient id="disabled" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="50%" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + </defs> + + <!-- + Swatch for disabled buttons. It will only fill the top part of the disabled buttons. + The bottom of disabled buttons are pure background-color + --> + <rect x="0" y="0" width="1" height="18" fill="url(#disabled)"/> +</svg>
\ 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 Binary files differnew file mode 100644 index 000000000..0932a9947 --- /dev/null +++ b/lib/dijit/themes/claro/form/images/buttonEnabled.png 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 @@ +<?xml version="1.0" ?> +<!-- + Source file for buttonEnabled.png, which is used by IE7-9 for Button gradients. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match gradients defined in Button.css. It is however an approximation, since generated + output has a constant height, rather than matching the height of each button. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="149px" viewBox="0 0 1 149" preserveAspectRatio="none"> + + <defs> + <linearGradient id="enabled" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="2%" stop-color="#ffffff" stop-opacity="0"/> + <stop offset="15%" stop-color="#ffffff" stop-opacity="0.7"/> <!-- near bottom of average height buttons --> + </linearGradient> + </defs> + + <!-- + Swatch for enabled buttons. It's 149px tall to account for tall buttons, but usually + only the top will be visible. + --> + <rect x="0" y="0" width="1" height="149" fill="url(#enabled)"/> +</svg>
\ 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 Binary files differdeleted file mode 100644 index 3a71a4653..000000000 --- a/lib/dijit/themes/claro/form/images/button_grad_d.png +++ /dev/null diff --git a/lib/dijit/themes/claro/form/images/formHighlight.png b/lib/dijit/themes/claro/form/images/formHighlight.png Binary files differdeleted file mode 100644 index f90eb25ba..000000000 --- a/lib/dijit/themes/claro/form/images/formHighlight.png +++ /dev/null diff --git a/lib/dijit/themes/claro/form/images/shadow.png b/lib/dijit/themes/claro/form/images/shadow.png Binary files differdeleted file mode 100644 index 72d60e628..000000000 --- a/lib/dijit/themes/claro/form/images/shadow.png +++ /dev/null diff --git a/lib/dijit/themes/claro/form/images/sliderHorizontal.png b/lib/dijit/themes/claro/form/images/sliderHorizontal.png Binary files differdeleted file mode 100644 index d769a6489..000000000 --- a/lib/dijit/themes/claro/form/images/sliderHorizontal.png +++ /dev/null diff --git a/lib/dijit/themes/claro/form/images/sliderVertical.png b/lib/dijit/themes/claro/form/images/sliderVertical.png Binary files differdeleted file mode 100644 index 9d69d04c2..000000000 --- a/lib/dijit/themes/claro/form/images/sliderVertical.png +++ /dev/null diff --git a/lib/dijit/themes/claro/form/images/textBox_back.png b/lib/dijit/themes/claro/form/images/textBox_back.png Binary files differdeleted file mode 100644 index dfc752afe..000000000 --- a/lib/dijit/themes/claro/form/images/textBox_back.png +++ /dev/null diff --git a/lib/dijit/themes/claro/images/activeGradient.png b/lib/dijit/themes/claro/images/activeGradient.png Binary files differnew file mode 100644 index 000000000..7e5716c0b --- /dev/null +++ b/lib/dijit/themes/claro/images/activeGradient.png 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 @@ +<?xml version="1.0" ?> +<!-- + Source file for standardGradient.png, which is used by IE7-9 for light-to-dark gradient of many widgets. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from .standard-gradient() mixin in variables.css. + It is however an approximation, since generated + output has a constant height, rather than matching the height of each node. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="16px" viewBox="0 0 1 1" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="rgb(190,190,190)" stop-opacity="0.98"/> + <stop offset="20%" stop-color="#ffffff" stop-opacity="0.65"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="1" height="1" fill="url(#gradient)"/> +</svg>
\ No newline at end of file diff --git a/lib/dijit/themes/claro/images/calendar.png b/lib/dijit/themes/claro/images/calendar.png Binary files differnew file mode 100644 index 000000000..de66cbdb4 --- /dev/null +++ b/lib/dijit/themes/claro/images/calendar.png diff --git a/lib/dijit/themes/claro/images/calendarContainerImages.png b/lib/dijit/themes/claro/images/calendarContainerImages.png Binary files differdeleted file mode 100644 index 44fa088b7..000000000 --- a/lib/dijit/themes/claro/images/calendarContainerImages.png +++ /dev/null diff --git a/lib/dijit/themes/claro/images/commonHighlight.png b/lib/dijit/themes/claro/images/commonHighlight.png Binary files differdeleted file mode 100644 index f90eb25ba..000000000 --- a/lib/dijit/themes/claro/images/commonHighlight.png +++ /dev/null diff --git a/lib/dijit/themes/claro/images/dnd.png b/lib/dijit/themes/claro/images/dnd.png Binary files differindex 8cb04aa43..29bef4d38 100644 --- a/lib/dijit/themes/claro/images/dnd.png +++ b/lib/dijit/themes/claro/images/dnd.png diff --git a/lib/dijit/themes/claro/images/menuHighlight.png b/lib/dijit/themes/claro/images/menuHighlight.png Binary files differdeleted file mode 100644 index 22328a7d8..000000000 --- a/lib/dijit/themes/claro/images/menuHighlight.png +++ /dev/null diff --git a/lib/dijit/themes/claro/images/progressBarEmpty.png b/lib/dijit/themes/claro/images/progressBarEmpty.png Binary files differdeleted file mode 100644 index e0a68561f..000000000 --- a/lib/dijit/themes/claro/images/progressBarEmpty.png +++ /dev/null diff --git a/lib/dijit/themes/claro/images/standardGradient.png b/lib/dijit/themes/claro/images/standardGradient.png Binary files differnew file mode 100644 index 000000000..345402f62 --- /dev/null +++ b/lib/dijit/themes/claro/images/standardGradient.png 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 @@ +<?xml version="1.0" ?> +<!-- + Source file for standardGradient.png, which is used by IE7-9 for light-to-dark gradient of many widgets. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from .standard-gradient() mixin in variables.css. + It is however an approximation, since generated + output has a constant height, rather than matching the height of each node. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 1 1" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="0.7"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="1" height="1" fill="url(#gradient)"/> +</svg>
\ No newline at end of file diff --git a/lib/dijit/themes/claro/images/titlebar.png b/lib/dijit/themes/claro/images/titlebar.png Binary files differdeleted file mode 100644 index 48181035a..000000000 --- a/lib/dijit/themes/claro/images/titlebar.png +++ /dev/null diff --git a/lib/dijit/themes/claro/images/tooltipGradient.png b/lib/dijit/themes/claro/images/tooltipGradient.png Binary files differdeleted file mode 100644 index ce4860e79..000000000 --- a/lib/dijit/themes/claro/images/tooltipGradient.png +++ /dev/null diff --git a/lib/dijit/themes/claro/images/treeExpand_loading.gif b/lib/dijit/themes/claro/images/treeExpand_loading.gif Binary files differdeleted file mode 100644 index 424d376ac..000000000 --- a/lib/dijit/themes/claro/images/treeExpand_loading.gif +++ /dev/null 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 Binary files differdeleted file mode 100644 index 48181035a..000000000 --- a/lib/dijit/themes/claro/layout/images/accordion.png +++ /dev/null diff --git a/lib/dijit/themes/claro/layout/images/splitterHorizontalHover.png b/lib/dijit/themes/claro/layout/images/splitterHorizontalHover.png Binary files differdeleted file mode 100644 index 0f5b691f6..000000000 --- a/lib/dijit/themes/claro/layout/images/splitterHorizontalHover.png +++ /dev/null diff --git a/lib/dijit/themes/claro/layout/images/splitterVerticalHover.png b/lib/dijit/themes/claro/layout/images/splitterVerticalHover.png Binary files differdeleted file mode 100644 index 2c3c6960e..000000000 --- a/lib/dijit/themes/claro/layout/images/splitterVerticalHover.png +++ /dev/null diff --git a/lib/dijit/themes/claro/layout/images/tabBottom.png b/lib/dijit/themes/claro/layout/images/tabBottom.png Binary files differdeleted file mode 100644 index dbcfc851b..000000000 --- a/lib/dijit/themes/claro/layout/images/tabBottom.png +++ /dev/null diff --git a/lib/dijit/themes/claro/layout/images/tabBottomSelected.png b/lib/dijit/themes/claro/layout/images/tabBottomSelected.png Binary files differnew file mode 100644 index 000000000..f92b05f45 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabBottomSelected.png 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 @@ +<?xml version="1.0" ?> +<!-- + Source file for tabBottomSelected.png, which is used by IE7-9 for selected tabs. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from .topBottom-selected-tab-gradient() from TabContainer.less. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="250px" viewBox="0 0 1 250" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="1" height="242" fill="white"/> + <rect x="0" y="242" width="1" height="6" fill="url(#gradient)"/> + <rect x="0" y="248" width="1" height="2" fill="white"/> +</svg>
\ 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 Binary files differnew file mode 100644 index 000000000..7815d9cfb --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabBottomUnselected.png 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 @@ +<?xml version="1.0" ?> +<!-- + Source file for tabBottomUnselected.png, which is used by IE7-9 for the selected tabs. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from TabContainer.less. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="16px" viewBox="0 0 1 16" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="100%" x2="0%" y2="0%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="6%" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="13%" stop-color="#ffffff" stop-opacity="0.2"/> + <stop offset="43%" stop-color="#ffffff" stop-opacity="0.6"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="1" height="16" fill="url(#gradient)"/> +</svg>
\ 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 Binary files differdeleted file mode 100644 index 8e9fcba27..000000000 --- a/lib/dijit/themes/claro/layout/images/tabLeft.png +++ /dev/null diff --git a/lib/dijit/themes/claro/layout/images/tabLeftSelected.png b/lib/dijit/themes/claro/layout/images/tabLeftSelected.png Binary files differnew file mode 100644 index 000000000..9700afb37 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabLeftSelected.png 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 @@ +<?xml version="1.0" ?> +<!-- + Source file for tabLeftSelected.png, which is used by IE7-9 for selected tabs. + Compile to png with batik, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from TabContainer.less. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="1000px" height="1px" viewBox="0 0 1000 1" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="1"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="30" height="1" fill="url(#gradient)"/> + <rect x="30" y="0" width="970" height="1" fill="white"/> +</svg>
\ 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 Binary files differnew file mode 100644 index 000000000..412390e08 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabLeftUnselected.png 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 @@ +<?xml version="1.0" ?> +<!-- + Source file for tabLeftUnselected.png, which is used by IE7-9 for the selected tabs. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from TabContainer.less. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="150px" height="1px" viewBox="0 0 100 1" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="150" height="1" fill="url(#gradient)"/> +</svg>
\ 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 Binary files differdeleted file mode 100644 index 0aaae53a1..000000000 --- a/lib/dijit/themes/claro/layout/images/tabRight.png +++ /dev/null diff --git a/lib/dijit/themes/claro/layout/images/tabRightSelected.png b/lib/dijit/themes/claro/layout/images/tabRightSelected.png Binary files differnew file mode 100644 index 000000000..1a2843499 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabRightSelected.png 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 @@ +<?xml version="1.0" ?> +<!-- + Source file for tabRightSelected.png, which is used by IE7-9 for selected tabs. + Compile to png with batik, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from TabContainer.less. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="1000px" height="1px" viewBox="0 0 1000 1" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="100%" y1="0%" x2="0%" y2="0%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="1"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="970" height="1" fill="white"/> + <rect x="970" y="0" width="30" height="1" fill="url(#gradient)"/> +</svg>
\ 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 Binary files differnew file mode 100644 index 000000000..2bdd00e4d --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabRightUnselected.png 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 @@ +<?xml version="1.0" ?> +<!-- + Source file for tabRightUnselected.png, which is used by IE7-9 for the selected tabs. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from TabContainer.less. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="150px" height="1px" viewBox="0 0 100 1" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="100%" y1="0%" x2="0%" y2="0%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="150" height="1" fill="url(#gradient)"/> +</svg>
\ 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 Binary files differdeleted file mode 100644 index 2822487ed..000000000 --- a/lib/dijit/themes/claro/layout/images/tabTop.png +++ /dev/null diff --git a/lib/dijit/themes/claro/layout/images/tabTopSelected.png b/lib/dijit/themes/claro/layout/images/tabTopSelected.png Binary files differnew file mode 100644 index 000000000..f4d577258 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabTopSelected.png 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 @@ +<?xml version="1.0" ?> +<!-- + Source file for tabTopSelected.png, which is used by IE7-9 for the selected tabs. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from .topBottom-selected-tab-gradient() from TabContainer.less. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="250px" viewBox="0 0 1 250" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="1"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="1" height="2" fill="white"/> + <rect x="0" y="2" width="1" height="6" fill="url(#gradient)"/> + <rect x="0" y="8" width="1" height="242" fill="white"/> +</svg>
\ 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 Binary files differnew file mode 100644 index 000000000..8c34545f5 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabTopUnselected.png 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 @@ +<?xml version="1.0" ?> +<!-- + Source file for tabTopUnSelected.png, which is used by IE7-9 for the selected tabs. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from TabContainer.less. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="16px" viewBox="0 0 1 16" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="6%" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="13%" stop-color="#ffffff" stop-opacity="0.2"/> + <stop offset="43%" stop-color="#ffffff" stop-opacity="0.6"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="1" height="16" fill="url(#gradient)"/> +</svg>
\ 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 <pre>, <code>, and table header rows @document-border-color: @disabled-color; // Border for <pre>, <code>, 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; +} |
