diff options
| author | Andrew Dolgov <[email protected]> | 2012-08-14 18:59:10 +0400 |
|---|---|---|
| committer | Andrew Dolgov <[email protected]> | 2012-08-14 18:59:18 +0400 |
| commit | 1354d17270961fff662d40f90521223f8fd0d73b (patch) | |
| tree | e9266be71587e47c800303446e968a6d3565e2cf /lib/dijit/themes | |
| parent | d04f8c826f5283765f52cf6b98b42a1ed8f2d6bc (diff) | |
update dojo to 1.7.3
Diffstat (limited to 'lib/dijit/themes')
81 files changed, 720 insertions, 552 deletions
diff --git a/lib/dijit/themes/claro/Calendar.css b/lib/dijit/themes/claro/Calendar.css index ff8e64fa7..a0f959759 100644 --- a/lib/dijit/themes/claro/Calendar.css +++ b/lib/dijit/themes/claro/Calendar.css @@ -41,6 +41,7 @@ padding: 6px 5px 3px 5px; -moz-border-radius: 4px; border-radius: 4px; + border-collapse: separate; } .dj_ie6 .claro .dijitCalendar { background-image: none; @@ -48,13 +49,13 @@ .claro .dijitCalendar img { border: none; } -.claro .dijitCalendarHover, .claro .dijitCalendarActive { +.claro .dijitCalendarHover, .claro .dijitCalendar:hover, .claro .dijitCalendarActive { /* treat dijitCalenderActive like hover since there's * no concept of clicking a Calendar as a whole (although you can click things inside the calendar) */ background-color: #abd6ff; - border: solid 1px #769dc0; + border: solid 1px #759dc0; } .claro .dijitCalendarMonthContainer th { text-align: center; @@ -79,16 +80,16 @@ .claro .dijitCalendarIncrease { background-position: -18px 0; } -.claro .dijitCalendarArrowHover .dijitCalendarDecrease { +.claro .dijitCalendarArrowHover .dijitCalendarDecrease, .claro .dijitCalendarArrow:hover .dijitCalendarDecrease { background-position: -36px 0; } -.claro .dijitCalendarArrowHover .dijitCalendarIncrease { +.claro .dijitCalendarArrowHover .dijitCalendarIncrease, .claro .dijitCalendarArrow:hover .dijitCalendarIncrease { background-position: -55px 0; } -.claro .dijitCalendarArrowActive .dijitCalendarDecrease { +.claro .dijitCalendarArrowActive .dijitCalendarDecrease, .claro .dijitCalendarArrow:active .dijitCalendarDecrease { background-position: -72px 0; } -.claro .dijitCalendarArrowActive .dijitCalendarIncrease { +.claro .dijitCalendarArrowActive .dijitCalendarIncrease, .claro .dijitCalendarArrow:active .dijitCalendarIncrease { background-position: -91px 0; } .claro .dijitA11ySideArrow { @@ -96,18 +97,19 @@ display: none; } -.claro .dijitDayLabels th { - padding: 0 4px 0 4px; - font-weight: bold; - text-align: center; -} .claro .dijitCalendarDayLabelTemplate { padding-bottom: 0; text-align: center; border-bottom: 1px solid #b5bcc7; - font-size: 0.909em; padding: 0 3px 2px; } +.claro .dijitCalendarDayLabel { + padding: 0 4px 0 4px; + font-weight: bold; + font-size: 0.909em; + text-align: center; + color: #000000; +} .claro .dijitCalendarDateTemplate { text-align: center; background-color: #ffffff; @@ -121,12 +123,13 @@ font-weight: bold; letter-spacing: .05em; text-align: center; + color: #000000; } .dj_ie6 .claro .dijitCalendarDateTemplate { background-image: none; } .claro .dijitCalendarPreviousMonth, .claro .dijitCalendarNextMonth { - background-color: #e9f4fe; + background-color: #e5f2fe; background-image: none; border-bottom: solid 1px #d3d3d3; /* todo: redundant with above .dijitCalendarDateTemplate rule */ @@ -149,8 +152,8 @@ transition-duration: 0.35s; } .claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel, .claro .dijitCalendarNextMonth .dijitCalendarDateLabel { - color: #769dc0; - border-color: #e9f4fe; + color: #759dc0; + border-color: #e5f2fe; /* intentionally matches background-color, no visible border until hover/selection */ } @@ -163,6 +166,7 @@ .claro .dijitCalendarYearLabel { padding: 2px 0 0 0; margin: 0; + font-size: 1.17em; } .claro .dijitCalendarYearLabel span { /* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */ @@ -182,35 +186,38 @@ } /* End Normal Calendar Style */ /* Hovered Calendar Style */ -.claro .dijitCalendarHoveredDate .dijitCalendarDateLabel { +.claro .dijitCalendarHoveredDate .dijitCalendarDateLabel, .claro .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel { background-color: #abd6ff; - border: solid 1px #769dc0; + border: solid 1px #759dc0; color: #000000; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; } -.claro .dijitCalendarNextYearHover, .claro .dijitCalendarPreviousYearHover { +.claro .dijitCalendarNextYearHover, +.claro .dijitCalendarNextYear:hover, +.claro .dijitCalendarPreviousYearHover, +.claro .dijitCalendarPreviousYear:hover { color: #000000; border: solid 1px #ffffff; padding: 0 5px 0 5px; /* reduced by 1 to make room for border */ - background-color: #e9f4fe; + background-color: #e5f2fe; } /* End Hovered Calendar Style */ /* Active Calendar Style */ -.claro .dijitCalendarNextYearActive, .claro .dijitCalendarPreviousYearActive { - border: solid 1px #769dc0; +.claro .dijitCalendarNextYearActive, .claro .dijitCalendarNextYear:active.claro .dijitCalendarPreviousYearActive, .claro .dijitCalendarPreviousYear:active { + border: solid 1px #759dc0; padding: 0 5px 0 5px; /* reduced by 1 to make room for border */ - background-color: #cfe5fa; + background-color: #7dbdfa; } -.claro .dijitCalendarActiveDate .dijitCalendarDateLabel { +.claro .dijitCalendarActiveDate .dijitCalendarDateLabel, .claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel { background-image: url("images/calendarContainerImages.png"); background-position: 0 -300px; - background-color: #7dbefa; + background-color: #7dbdfa; border: solid 1px #ffffff; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; @@ -224,18 +231,13 @@ .claro .dijitCalendarSelectedDate .dijitCalendarDateLabel { color: #000000; background-color: #abd6ff; - border-color: #769dc0; + border-color: #759dc0; } /* End Selected Calendar Style */ /* Disabled Calendar Style*/ .claro .dijitCalendarDisabledDate .dijitCalendarDateLabel { - text-decoration: line-through; - /* override hover effects above, hover and click on disabled date should have no effect */ - - background-color: transparent; - border-width: 0; - padding: 4px 6px 4px 5px; color: #818181; + text-decoration: line-through; } /* End Disabled Calendar Style */ /* Styling for month DropDownButton */ @@ -255,13 +257,13 @@ -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } -.claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode { - background-color: #e9f4fe; +.claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode, .claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode { + background-color: #e5f2fe; border: solid 1px #ffffff; } /* Styling for month drop down list */ .claro .dijitCalendarMonthMenu { - border-color: #769dc0; + border-color: #759dc0; background-color: #ffffff; text-align: center; background-image: none; @@ -273,9 +275,9 @@ border-bottom: solid 1px #ffffff; padding: 2px 0; } -.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover { +.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover, .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover { background-color: #abd6ff; - border-color: #769dc0; + border-color: #759dc0; border-width: 1px 0; background-image: url("images/commonHighlight.png"); background-repeat: repeat-x; diff --git a/lib/dijit/themes/claro/Calendar.less b/lib/dijit/themes/claro/Calendar.less index ec6aa4696..55decd3b4 100644 --- a/lib/dijit/themes/claro/Calendar.less +++ b/lib/dijit/themes/claro/Calendar.less @@ -37,12 +37,13 @@ .claro .dijitCalendar { border:solid 1px @border-color; background-color: @calendar-background-color; - background-image:url("images/calendarContainerImages.png"); + background-image:url(@image-calendar-container); background-position:0 -448px; background-repeat:repeat-x; 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; @@ -50,7 +51,7 @@ .claro .dijitCalendar img { border:none; } -.claro .dijitCalendarHover, +.claro .dijitCalendarHover, .claro .dijitCalendar:hover, .claro .dijitCalendarActive { /* treat dijitCalenderActive like hover since there's * no concept of clicking a Calendar as a whole (although you can click things inside the calendar) @@ -73,25 +74,29 @@ .claro .dijitCalendarIncrementControl { width:18px; height:16px; - background-image: url("images/calendarArrows.png"); + background-image: url(@image-calendar-arrows); background-repeat: no-repeat; } .dj_ie6 .claro .dijitCalendarIncrementControl { - background-image: url("images/calendarArrows8bit.png"); + background-image: url(@image-calendar-arrows-ie6); } .claro .dijitCalendarIncrease { background-position:-18px 0; } -.claro .dijitCalendarArrowHover .dijitCalendarDecrease { +.claro .dijitCalendarArrowHover .dijitCalendarDecrease, +.claro .dijitCalendarArrow:hover .dijitCalendarDecrease { background-position:-36px 0; } -.claro .dijitCalendarArrowHover .dijitCalendarIncrease { +.claro .dijitCalendarArrowHover .dijitCalendarIncrease, +.claro .dijitCalendarArrow:hover .dijitCalendarIncrease { background-position:-55px 0; } -.claro .dijitCalendarArrowActive .dijitCalendarDecrease { +.claro .dijitCalendarArrowActive .dijitCalendarDecrease, +.claro .dijitCalendarArrow:active .dijitCalendarDecrease { background-position:-72px 0; } -.claro .dijitCalendarArrowActive .dijitCalendarIncrease { +.claro .dijitCalendarArrowActive .dijitCalendarIncrease, +.claro .dijitCalendarArrow:active .dijitCalendarIncrease { background-position:-91px 0; } .claro .dijitA11ySideArrow { @@ -99,23 +104,23 @@ display: none; } - -.claro .dijitDayLabels th { - padding:0 4px 0 4px; - font-weight:bold; - text-align:center; -} .claro .dijitCalendarDayLabelTemplate { padding-bottom:0; text-align:center; border-bottom:1px solid @border-color; - font-size:0.909em; padding:0 3px 2px; } +.claro .dijitCalendarDayLabel { + padding:0 4px 0 4px; + font-weight:bold; + font-size:0.909em; + text-align:center; + color: @text-color; +} .claro .dijitCalendarDateTemplate { text-align:center; background-color:@calendar-currentmonth-background-color; - background-image:url("images/calendarContainerImages.png"); + background-image:url(@image-calendar-container); background-position:0 0; background-repeat:repeat-x; border-bottom: 1px solid @minor-border-color; @@ -125,6 +130,7 @@ font-weight:bold; letter-spacing:.05em; text-align:center; + color: @text-color; } .dj_ie6 .claro .dijitCalendarDateTemplate { background-image: none; @@ -157,8 +163,9 @@ padding: 1px 2px 2px 2px; } .claro .dijitCalendarYearLabel { - padding:2px 0 0 0; - margin:0; + padding: 2px 0 0 0; + margin: 0; + font-size: 1.17em; } .claro .dijitCalendarYearLabel span { /* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */ @@ -178,14 +185,15 @@ } /* End Normal Calendar Style */ /* Hovered Calendar Style */ -.claro .dijitCalendarHoveredDate .dijitCalendarDateLabel{ +.claro .dijitCalendarHoveredDate .dijitCalendarDateLabel, +.claro .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel { background-color:@hovered-background-color; border:solid 1px @hovered-border-color; color:@hovered-text-color; .transition-duration(.2s); } -.claro .dijitCalendarNextYearHover, -.claro .dijitCalendarPreviousYearHover { +.claro .dijitCalendarNextYearHover, .claro .dijitCalendarNextYear:hover, +.claro .dijitCalendarPreviousYearHover, .claro .dijitCalendarPreviousYear:hover { color:@hovered-text-color; border:solid 1px @calendar-button-hovered-border-color; padding: 0 5px 0 5px; /* reduced by 1 to make room for border */ @@ -193,14 +201,15 @@ } /* End Hovered Calendar Style */ /* Active Calendar Style */ -.claro .dijitCalendarNextYearActive, -.claro .dijitCalendarPreviousYearActive { +.claro .dijitCalendarNextYearActive, .claro .dijitCalendarNextYear:active +.claro .dijitCalendarPreviousYearActive, .claro .dijitCalendarPreviousYear:active { border: solid 1px @calendar-button-pressed-border-color; padding: 0 5px 0 5px; /* reduced by 1 to make room for border */ background-color:@calendar-button-pressed-background-color; } -.claro .dijitCalendarActiveDate .dijitCalendarDateLabel { - background-image:url("images/calendarContainerImages.png"); +.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; @@ -219,13 +228,8 @@ /* End Selected Calendar Style */ /* Disabled Calendar Style*/ .claro .dijitCalendarDisabledDate .dijitCalendarDateLabel { - text-decoration:line-through; - - /* override hover effects above, hover and click on disabled date should have no effect */ - background-color: transparent; - border-width: 0; - padding: 4px 6px 4px 5px; color: @disabled-text-color; + text-decoration:line-through; } /* End Disabled Calendar Style */ @@ -246,7 +250,8 @@ border:solid 1px @border-color; .box-shadow(0 0 0 rgba(0,0,0,0)); } -.claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode { +.claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode, +.claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode { background-color: @calendar-button-hovered-background-color; border:solid 1px @calendar-button-hovered-border-color; } @@ -264,10 +269,11 @@ border-bottom: solid 1px @menu-background-color; padding: 2px 0; } -.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover { +.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover, +.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover { background-color: @hovered-background-color; border-color: @hovered-border-color; border-width:1px 0; - background-image: url("images/commonHighlight.png"); + background-image: url(@image-common-highlight); background-repeat:repeat-x; } diff --git a/lib/dijit/themes/claro/ColorPalette.css b/lib/dijit/themes/claro/ColorPalette.css index 34d1c72b2..a23b2dfd0 100644 --- a/lib/dijit/themes/claro/ColorPalette.css +++ b/lib/dijit/themes/claro/ColorPalette.css @@ -12,11 +12,11 @@ * displays border around a color swatch * * 3. hovered swatch - * .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg + * .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg * the hovered state of the color swatch - adds border * * 4. active and selected swatch - * .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg + * .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg * .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg * adds border for active or selected state */ @@ -33,9 +33,9 @@ border: 1px solid #d3d3d3; } -.claro .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg { +.claro .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg { border: 1px solid #000000; } -.claro .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg, .claro .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg { +.claro .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg, .claro .dijitColorPalette .dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg { border: 2px solid #000000; } diff --git a/lib/dijit/themes/claro/ColorPalette.less b/lib/dijit/themes/claro/ColorPalette.less index e0327334d..ffa3ac051 100644 --- a/lib/dijit/themes/claro/ColorPalette.less +++ b/lib/dijit/themes/claro/ColorPalette.less @@ -12,11 +12,11 @@ * displays border around a color swatch * * 3. hovered swatch - * .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg + * .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg * the hovered state of the color swatch - adds border * * 4. active and selected swatch - * .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg + * .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg * .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg * adds border for active or selected state */ @@ -35,10 +35,10 @@ * overrides border color in dijit.css */ border: 1px solid @minor-border-color; } -.claro .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg { +.claro .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg { border: 1px solid @swatch-hovered-border-color; } -.claro .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg, -.claro .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg { +.claro .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg, +.claro .dijitColorPalette .dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg { border: 2px solid @swatch-selected-border-color; } diff --git a/lib/dijit/themes/claro/Common.css b/lib/dijit/themes/claro/Common.css index 110b303e2..83f6128c1 100644 --- a/lib/dijit/themes/claro/Common.css +++ b/lib/dijit/themes/claro/Common.css @@ -18,21 +18,11 @@ .claro .dijitFocusedLabel { /* for checkboxes or radio buttons, hatch border around the corresponding label, to indicate focus */ - outline: 1px dotted #4a4a4a; -} -.claro .dijitContentPaneLoading { - background: url('images/loadingAnimation.gif') no-repeat left center; - padding-left: 25px; -} -/* .dijitContentPaneError icon renders in a dialog box with the error messsage when there is an error in a HREF url */ -.claro .dijitContentPaneError { - background: url('../../icons/images/commonIconsObjActEnabled.png') no-repeat left center; - background-position: -496px; - padding-left: 25px; + outline: 1px dotted #494949; } /* Drag and Drop */ .claro .dojoDndItemBefore, .claro .dojoDndItemAfter { - border-top: 1px solid #769dc0; + border-top: 1px solid #759dc0; } .claro .dojoDndItemOver { cursor: pointer; @@ -50,7 +40,7 @@ padding-left: 21px; } .claro.dojoDndMove .dojoDndAvatarHeader, .claro.dojoDndCopy .dojoDndAvatarHeader { - background-image: url(images/dnd.png); + background-image: url("images/dnd.png"); background-repeat: no-repeat; background-position: 2px -122px; } diff --git a/lib/dijit/themes/claro/Common.less b/lib/dijit/themes/claro/Common.less index 872cf8913..248fc1ab8 100644 --- a/lib/dijit/themes/claro/Common.less +++ b/lib/dijit/themes/claro/Common.less @@ -20,18 +20,6 @@ outline: 1px dotted @focus-outline-color; } -.claro .dijitContentPaneLoading { - background:url('images/loadingAnimation.gif') no-repeat left center; - padding-left:25px; -} - -/* .dijitContentPaneError icon renders in a dialog box with the error messsage when there is an error in a HREF url */ -.claro .dijitContentPaneError { - background:url('../../icons/images/commonIconsObjActEnabled.png') no-repeat left center; - background-position: -496px; - padding-left:25px; -} - /* Drag and Drop */ .claro .dojoDndItemBefore, .claro .dojoDndItemAfter{ @@ -51,7 +39,7 @@ padding-left:21px; } .claro.dojoDndMove .dojoDndAvatarHeader, .claro.dojoDndCopy .dojoDndAvatarHeader { - background-image: url(images/dnd.png); + background-image: url(@image-dnd); background-repeat: no-repeat; background-position:2px -122px; } diff --git a/lib/dijit/themes/claro/Dialog.css b/lib/dijit/themes/claro/Dialog.css index 119900eca..ae0b18df6 100644 --- a/lib/dijit/themes/claro/Dialog.css +++ b/lib/dijit/themes/claro/Dialog.css @@ -29,14 +29,14 @@ * .dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right) */ .claro .dijitDialog { - border: 1px solid #769dc0; + border: 1px solid #759dc0; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); } .claro .dijitDialogPaneContent { background: #ffffff repeat-x top left; - border-top: 1px solid #769dc0; + border-top: 1px solid #759dc0; padding: 10px 8px; position: relative; } @@ -74,6 +74,7 @@ padding: 0 1px; font-size: 1.091em; + color: #000000; } .claro .dijitDialogCloseIcon { /* the default close icon for the dialog */ @@ -123,7 +124,7 @@ background-image: url("images/tooltipGradient.png"); background-repeat: repeat-x; background-position: bottom; - border: 1px solid #769dc0; + border: 1px solid #759dc0; padding: 6px 8px; -moz-border-radius: 4px; border-radius: 4px; @@ -131,6 +132,7 @@ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); font-size: 1em; + color: #000000; } .dj_ie6 .claro .dijitTooltipContainer { background-image: none; diff --git a/lib/dijit/themes/claro/Dialog.less b/lib/dijit/themes/claro/Dialog.less index ff5c1e656..5e74be747 100644 --- a/lib/dijit/themes/claro/Dialog.less +++ b/lib/dijit/themes/claro/Dialog.less @@ -68,7 +68,7 @@ border: 1px solid @dialog-titlebar-border-color; border-top:none; background-color: @dialog-titlebar-background-color; - background-image: url("images/titlebar.png"); + background-image: url(@image-titlebar); background-repeat:repeat-x; padding: 5px 7px 4px 7px; } @@ -77,11 +77,12 @@ /* typography and styling of the dialog title */ padding: 0 1px; font-size:1.091em; + color: @text-color; } .claro .dijitDialogCloseIcon { /* the default close icon for the dialog */ - background: url("images/dialogCloseIcon.png"); + background: url(@image-dialog-close); background-repeat:no-repeat; position: absolute; right: 5px; @@ -89,7 +90,7 @@ width: 21px; } .dj_ie6 .claro .dijitDialogCloseIcon { - background-image: url("images/dialogCloseIcon8bit.png"); + background-image: url(@image-dialog-close-ie6); } .claro .dijitDialogCloseIconHover { background-position:-21px; @@ -122,7 +123,7 @@ .claro .dijitTooltipContainer { /* the part with the text */ background-color:@popup-background-color; - background-image:url("images/tooltipGradient.png"); + background-image:url(@image-tooltip-gradient); background-repeat:repeat-x; background-position:bottom; border:1px solid @popup-border-color; @@ -130,6 +131,7 @@ .border-radius(4px); .box-shadow(0 1px 3px rgba(0,0,0,0.25)); font-size: 1em; + color: @text-color; } .dj_ie6 .claro .dijitTooltipContainer { @@ -139,13 +141,13 @@ /* the arrow piece */ border: 0; z-index: 2; - background-image:url("images/tooltip.png"); + background-image:url(@image-tooltip); background-repeat:no-repeat; width:16px; height:14px; } .dj_ie6 .claro .dijitTooltipConnector { - background-image:url("images/tooltip8bit.png"); + background-image:url(@image-tooltip-ie6); } .claro .dijitTooltipABRight .dijitTooltipConnector { /* above or below tooltip, but the arrow appears on the right, diff --git a/lib/dijit/themes/claro/Editor.css b/lib/dijit/themes/claro/Editor.css index 641990a09..9f167f921 100644 --- a/lib/dijit/themes/claro/Editor.css +++ b/lib/dijit/themes/claro/Editor.css @@ -25,14 +25,14 @@ } .claro .dijitEditor .dijitEditorIFrameContainer { background-color: #ffffff; - background-image: url('form/images/textBox_back.png'); + 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: #e9f4fe; + background-color: #e5f2fe; } .claro .dijitEditorFocused .dijitEditorIFrameContainer, .claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame { /* TODO: contradicts rule above, which background-color do you want? */ diff --git a/lib/dijit/themes/claro/Editor.less b/lib/dijit/themes/claro/Editor.less index 43e6d39ae..f74a5d462 100644 --- a/lib/dijit/themes/claro/Editor.less +++ b/lib/dijit/themes/claro/Editor.less @@ -28,7 +28,7 @@ } .claro .dijitEditor .dijitEditorIFrameContainer{ background-color: @textbox-background-color; - background-image: url('form/images/textBox_back.png'); + background-image: url(@image-form-textbox-background); background-repeat:repeat-x; } .dj_ie6 .claro .dijitEditor .dijitEditorIFrameContainer{ @@ -56,4 +56,4 @@ .claro .dijitDisabled .dijitEditorIFrameContainer .dijitEditorIFrame { background-color: @textbox-disabled-background-color; background-image: none; -}
\ No newline at end of file +} diff --git a/lib/dijit/themes/claro/InlineEditBox.css b/lib/dijit/themes/claro/InlineEditBox.css index e6058f780..0cd14579d 100644 --- a/lib/dijit/themes/claro/InlineEditBox.css +++ b/lib/dijit/themes/claro/InlineEditBox.css @@ -12,8 +12,8 @@ border: 1px solid transparent; } .claro .dijitInlineEditBoxDisplayModeHover { - background-color: #e9f4fe; - border: solid 1px #769dc0; + background-color: #e5f2fe; + border: solid 1px #759dc0; } .dj_ie6 .claro .dijitInlineEditBoxDisplayMode { border: none; diff --git a/lib/dijit/themes/claro/Menu.css b/lib/dijit/themes/claro/Menu.css index c55176d54..e1c1562e8 100644 --- a/lib/dijit/themes/claro/Menu.css +++ b/lib/dijit/themes/claro/Menu.css @@ -44,7 +44,7 @@ There are three areas of styling for the Menu: .claro .dijitMenu { background-repeat: repeat-y; background-color: #ffffff; - border: 1px solid #769dc0; + border: 1px solid #759dc0; /* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */ margin: -1px 0; @@ -57,13 +57,13 @@ There are three areas of styling for the Menu: .claro .dijitMenuBar .dijitMenuItem { padding: 6px 10px 7px; background-position: 0 100px; - color: #4a4a4a; margin: -1px; } .claro .dijitMenuItem { background-image: url("images/menuHighlight.png"); background-position: 0 -40px; background-repeat: repeat-x; + color: #000000; } /* this prevents jiggling upon hover of a menu item */ .claro .dijitMenuTable { @@ -77,7 +77,7 @@ There are three areas of styling for the Menu: /* hover over a MenuBarItem */ .claro .dijitMenuPassive .dijitMenuItemHover, .claro .dijitMenuPassive .dijitMenuItemSelected { background-color: #abd6ff; - border: solid 1px #769dc0; + border: solid 1px #759dc0; background-position: 0 0; color: #000000; padding: 5px 9px 6px; @@ -90,7 +90,7 @@ There are three areas of styling for the Menu: } /* MenuBarItem that has been selected and menu drops down from it */ .claro .dijitMenuActive .dijitMenuItemHover, .claro .dijitMenuActive .dijitMenuItemSelected { - border: solid 1px #769dc0; + border: solid 1px #759dc0; padding: 5px 9px 6px; background-color: #abd6ff; background-position: 0 0; @@ -105,7 +105,7 @@ There are three areas of styling for the Menu: margin-top: -3px; } .claro .dijitMenuActive .dijitMenuItemActive { - background-color: #7dbefa; + background-color: #7dbdfa; background-position: 0 -177px; } .claro .dijitMenuItemActive { @@ -122,7 +122,7 @@ There are three areas of styling for the Menu: .claro .dijitMenuExpand { width: 7px; height: 7px; - background-image: url('images/spriteArrows.png'); + background-image: url("images/spriteArrows.png"); background-position: -14px 0; margin-right: 3px; } @@ -145,14 +145,14 @@ There are three areas of styling for the Menu: display: none; } .claro .dijitCheckedMenuItemIcon { - background-image: url('form/images/checkboxRadioButtonStates.png'); + background-image: url("form/images/checkboxRadioButtonStates.png"); background-repeat: no-repeat; background-position: -15px 50%; width: 15px; height: 16px; } .dj_ie6 .claro .dijitCheckedMenuItemIcon { - background-image: url('form/images/checkboxAndRadioButtons_IE6.png'); + background-image: url("form/images/checkboxAndRadioButtons_IE6.png"); } .claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon { background-position: 0 50%; @@ -170,12 +170,18 @@ There are three areas of styling for the Menu: } .claro .dijitComboBoxMenu .dijitMenuItemSelected { color: #000000; + border-color: #759dc0; + background-color: #abd6ff; +} +.claro .dijitComboBoxMenu .dijitMenuItemHover { + color: #000000; border-color: #769dc0; background-color: #abd6ff; + background-position: 0 0; } .claro .dijitComboBoxMenuActive .dijitMenuItemSelected { background-position: 0 -177px; - background-color: #7dbefa; + 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 1528df40b..80467a5b6 100644 --- a/lib/dijit/themes/claro/Menu.less +++ b/lib/dijit/themes/claro/Menu.less @@ -37,7 +37,7 @@ There are three areas of styling for the Menu: margin: 0; padding: 0; background-color: @bar-background-color; - background-image: url("images/commonHighlight.png"); + background-image: url(@image-common-highlight); background-position:0 0; background-repeat:repeat-x; } @@ -58,13 +58,13 @@ There are three areas of styling for the Menu: .claro .dijitMenuBar .dijitMenuItem { padding: 6px 10px 7px; background-position:0 100px; - color:@unselected-text-color; margin:-1px; } .claro .dijitMenuItem { - background-image: url("images/menuHighlight.png"); + background-image: url(@image-menu-highlight); background-position:0 -40px; background-repeat:repeat-x; + color: @text-color; } /* this prevents jiggling upon hover of a menu item */ @@ -128,7 +128,7 @@ There are three areas of styling for the Menu: .claro .dijitMenuExpand { width: 7px; height: 7px; - background-image: url('images/spriteArrows.png'); + background-image: url(@image-arrow-sprite); background-position: -14px 0; margin-right:3px; } @@ -149,14 +149,14 @@ There are three areas of styling for the Menu: display: none; } .claro .dijitCheckedMenuItemIcon { - background-image: url('form/images/checkboxRadioButtonStates.png'); + background-image: url(@image-form-checkbox-and-radios); background-repeat:no-repeat; background-position: -15px 50%; width:15px; height:16px; } .dj_ie6 .claro .dijitCheckedMenuItemIcon { - background-image: url('form/images/checkboxAndRadioButtons_IE6.png'); + background-image: url(@image-form-checkbox-and-radios-ie6); } .claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon { background-position: 0 50%; @@ -179,6 +179,12 @@ There are three areas of styling for the Menu: border-color:@hovered-border-color; background-color:@hovered-background-color; } +.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? */ diff --git a/lib/dijit/themes/claro/ProgressBar.css b/lib/dijit/themes/claro/ProgressBar.css index c735e5c2f..925021f7a 100644 --- a/lib/dijit/themes/claro/ProgressBar.css +++ b/lib/dijit/themes/claro/ProgressBar.css @@ -30,8 +30,8 @@ .claro .dijitProgressBarEmpty { /* outer container and background of the bar that's not finished yet*/ - background: #ffffff url("images/progressBarEmpty.png") repeat-none left; - border-color: #769dc0; + background: #ffffff url("images/progressBarEmpty.png") no-repeat left; + border-color: #759dc0; } .claro .dijitProgressBarTile { /* inner container for finished portion when in 'tile' (image) mode */ @@ -42,7 +42,13 @@ background-image: none; } .claro .dijitProgressBarFull { - border-right: 1px solid #769dc0; + border-right: 1px solid #759dc0; + -webkit-transition-property: width; + -moz-transition-property: width; + transition-property: width; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; } .claro .dijitProgressBarLabel { /* Set to a color that contrasts with both the "Empty" and "Full" parts. */ diff --git a/lib/dijit/themes/claro/ProgressBar.less b/lib/dijit/themes/claro/ProgressBar.less index d361952ee..8edf426a0 100644 --- a/lib/dijit/themes/claro/ProgressBar.less +++ b/lib/dijit/themes/claro/ProgressBar.less @@ -32,18 +32,20 @@ } .claro .dijitProgressBarEmpty { /* outer container and background of the bar that's not finished yet*/ - background: @progressbar-empty-background-color url("images/progressBarEmpty.png") repeat-none left; + background: @progressbar-empty-background-color url(@image-progressbar-empty) no-repeat left; border-color: @progressbar-border-color; } .claro .dijitProgressBarTile { /* inner container for finished portion when in 'tile' (image) mode */ - background: @progressbar-full-background-color url("images/progressBarFull.png") repeat-x top; + background: @progressbar-full-background-color url(@image-progressbar-full) repeat-x top; } .dj_ie6 .claro .dijitProgressBarTile { background-image: none; } .claro .dijitProgressBarFull { border-right:1px solid @progressbar-border-color; + .transition-property(width); + .transition-duration(.25s); } .claro .dijitProgressBarLabel { /* Set to a color that contrasts with both the "Empty" and "Full" parts. */ @@ -52,5 +54,5 @@ .claro .dijitProgressBarIndeterminate .dijitProgressBarTile { /* use an animated gif for the progress bar in 'indeterminate' mode; background-color won't appear unless user has turned off background images */ - background: @bar-background-color url("images/progressBarAnim.gif") repeat-x top; -}
\ No newline at end of file + background: @bar-background-color url(@image-progressbar-anim) repeat-x top; +} diff --git a/lib/dijit/themes/claro/README b/lib/dijit/themes/claro/README index 5ef4714ad..3b4b4aa4e 100644 --- a/lib/dijit/themes/claro/README +++ b/lib/dijit/themes/claro/README @@ -7,22 +7,13 @@ Installing and running on Windows: a) Go to https://github.com/ajaxorg/node-builds, press download button, and select "download zip" b) unzip the file into C:\ -2. Install less: - - a) Go to https://github.com/cloudhead/less.js/archives/master, press download button, and select "download zip" - b) unzip the file into C:\ - -2. Add node and lessc environment variables: +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;C:\cloudhead-less.js-7fb09f\bin - - d) add new environment variable NODE_PATH with value like this (depending on exact download name): - - C:\cloudhead-less.js-7fb09f\lib + ;C:\ajaxorg-node-builds-0fcee7d\win32 4. To compile all the files: @@ -34,31 +25,17 @@ To install/run less version 2 on mac: 1. Install Node.js Download a built copy from https://github.com/ajaxorg/node-builds. - Alternately, o to http://nodejs.org/#download (./configure, make, make install). + Alternately, go to http://nodejs.org/#download (./configure, make, make install). -2. Download less from https://github.com/cloudhead/less.js/archives/master - -3. Edit .bash_profile etc. to add node to your path, and lessc to NODE_PATH: +2. Edit .bash_profile etc. to add node to your path export PATH=$PATH:/opt/less/bin - export NODE_PATH=$NODE_PATH:/opt/less/lib To compile all the files: $ cd dijit/themes/claro $ node compile.js - -------- -Alternately, you can install less version 1, but I'd rather not use it for checked in files -since it breaks a part a lot of rules into multiple rules, causing spurious diffs. - -To install on a mac: - $ sudo gem install less - -On Windows or Linux, make sure you have ruby and ruby-gems installed first. -If you need help installing ruby please check out ruby-lang.org for more details. - ----- See http://lesscss.org/ and https://github.com/cloudhead/less.js/ for more information. diff --git a/lib/dijit/themes/claro/TimePicker.css b/lib/dijit/themes/claro/TimePicker.css index fb8bf5efa..c8d6bb29d 100644 --- a/lib/dijit/themes/claro/TimePicker.css +++ b/lib/dijit/themes/claro/TimePicker.css @@ -58,7 +58,7 @@ .claro .dijitTimePickerMarker { /* major value - 1:00, 2:00, times on the hour */ - background-color: #e9f4fe; + background-color: #e5f2fe; font-size: 1em; white-space: nowrap; } @@ -66,7 +66,7 @@ .claro .dijitTimePickerMarkerHover, .claro .dijitTimePickerMarkerSelected, .claro .dijitTimePickerTickSelected { - background-color: #7dbefa; + background-color: #7dbdfa; border: solid 1px #b5bcc7; margin-left: -7px; margin-right: -7px; diff --git a/lib/dijit/themes/claro/TimePicker.less b/lib/dijit/themes/claro/TimePicker.less index cd07a63d8..a6253f7dd 100644 --- a/lib/dijit/themes/claro/TimePicker.less +++ b/lib/dijit/themes/claro/TimePicker.less @@ -34,7 +34,7 @@ } .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-image: url(@image-common-highlight); background-position:0 -1px; background-repeat:repeat-x; border-top:solid 1px @border-color; @@ -95,7 +95,7 @@ border-right:none; border-color:@border-color; background-color: @unselected-background-color; - background-image: url("images/commonHighlight.png"); + background-image: url(@image-common-highlight); background-position:0 -1px; background-repeat:repeat-x; } @@ -104,7 +104,7 @@ } .claro .dijitTimePicker .dijitArrowButtonInner{ height: 100%; /* hack claro.button.css */ - background-image: url("form/images/commonFormArrows.png"); + background-image: url(@image-form-common-arrows); background-repeat: no-repeat; background-position:-140px 45%; } diff --git a/lib/dijit/themes/claro/TitlePane.css b/lib/dijit/themes/claro/TitlePane.css index 7f0cdbfb7..141561506 100644 --- a/lib/dijit/themes/claro/TitlePane.css +++ b/lib/dijit/themes/claro/TitlePane.css @@ -30,11 +30,11 @@ } .claro .dijitTitlePaneTitleHover { background-color: #abd6ff; - border-color: #769dc0; + border-color: #759dc0; } .claro .dijitTitlePaneTitleActive { - background-color: #7dbefa; - border-color: #769dc0; + background-color: #7dbdfa; + border-color: #759dc0; background-position: 0 -136px; } .claro .dijitTitlePaneTitleFocus { @@ -42,7 +42,7 @@ padding-bottom: 2px; } .claro .dijitTitlePane .dijitArrowNode { - background-image: url('images/spriteArrows.png'); + background-image: url("images/spriteArrows.png"); background-repeat: no-repeat; height: 8px; width: 7px; @@ -53,10 +53,8 @@ .claro .dijitTitlePane .dijitClosed .dijitArrowNode { background-position: -14px 0; } -.claro .dijitTitlePaneFocused .dijitTitlePaneTextNode { +.claro .dijitTitlePane .dijitTitlePaneTextNode { color: #000000; - /* TODO: do we need this? we usually don't change text color on focus */ - } .claro .dijitTitlePaneContentOuter { background: #ffffff; diff --git a/lib/dijit/themes/claro/TitlePane.less b/lib/dijit/themes/claro/TitlePane.less index 22bacca0f..89da9f3d9 100644 --- a/lib/dijit/themes/claro/TitlePane.less +++ b/lib/dijit/themes/claro/TitlePane.less @@ -22,7 +22,7 @@ .claro .dijitTitlePaneTitle { background-color: @unselected-background-color; // TODO: Mailed Jason, shouldn't this toggle to @selected-background-color when pane opened? - background-image: url("images/titlebar.png"); + background-image: url(@image-titlebar); background-repeat:repeat-x; border:1px solid @border-color; padding: 0 7px 3px 7px; @@ -45,7 +45,7 @@ padding-bottom:2px; } .claro .dijitTitlePane .dijitArrowNode { - background-image: url('images/spriteArrows.png'); + background-image: url(@image-arrow-sprite); background-repeat: no-repeat; height: 8px; width: 7px; @@ -56,8 +56,8 @@ .claro .dijitTitlePane .dijitClosed .dijitArrowNode { background-position: -14px 0; } -.claro .dijitTitlePaneFocused .dijitTitlePaneTextNode { - color:@text-color; /* TODO: do we need this? we usually don't change text color on focus */ +.claro .dijitTitlePane .dijitTitlePaneTextNode { + color:@text-color; } .claro .dijitTitlePaneContentOuter { background: @pane-background-color; @@ -71,4 +71,4 @@ margin-left: 4px; margin-right: 4px; vertical-align:text-top; -}
\ No newline at end of file +} diff --git a/lib/dijit/themes/claro/Toolbar.css b/lib/dijit/themes/claro/Toolbar.css index a9e6f4f5e..18c605c66 100644 --- a/lib/dijit/themes/claro/Toolbar.css +++ b/lib/dijit/themes/claro/Toolbar.css @@ -29,8 +29,12 @@ .claro .dijitToolbar label { padding: 0 3px 0 6px; } -/** override claro/form/Button.css **/ -.claro .dijitToolbar .dijitButtonNode { +/** override claro/form/Button.css, and also ComboBox down arrow **/ +.claro .dijitToolbar .dijitButton .dijitButtonNode, +.claro .dijitToolbar .dijitDropDownButton .dijitButtonNode, +.claro .dijitToolbar .dijitComboButton .dijitButtonNode, +.claro .dijitToolbar .dijitToggleButton .dijitButtonNode, +.claro .dijitToolbar .dijitComboBox .dijitButtonNode { border-width: 0; /* on hover/active, border-->1px, padding-->1px */ @@ -51,16 +55,43 @@ background-repeat: repeat-x; background-color: rgba(171, 214, 255, 0); } -.dj_ie .claro .dijitToolbar .dijitButtonNode { +.dj_ie .claro .dijitToolbar .dijitButton .dijitButtonNode, +.dj_ie .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode, +.dj_ie .claro .dijitToolbar .dijitComboButton .dijitButtonNode, +.dj_ie .claro .dijitToolbar .dijitToggleButton .dijitButtonNode, +.dj_ie .claro .dijitToolbar .dijitComboBox .dijitButtonNode { background-color: transparent; /* for IE, which doesn't understand rgba(...) */ } -.dj_ie6 .claro .dijitToolbar .dijitButtonNode { +.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 */ + /* because background-color: transparent above doesn't work on IE*/ } +/* hover status */ +.dj_ie .claro .dijitToolbar .dijitButtonHover .dijitButtonNode, +.dj_ie .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, +.dj_ie .claro .dijitToolbar .dijitComboButton .dijitButtonNodeHover, +.dj_ie .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover, +.dj_ie .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode { + /* button should still turn blue on hover, so need to override .dj_ie rules above */ + + background-color: #abd6ff; +} +/* active status */ +.dj_ie .claro .dijitToolbar .dijitButtonActive .dijitButtonNode, +.dj_ie .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, +.dj_ie .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode, +.dj_ie .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { + /* button should still turn blue on press, so need to override .dj_ie rules above */ + + background-color: #abd6ff; +} .claro .dijitToolbar .dijitComboButton .dijitStretch { /* no rounded border on side adjacent to arrow */ @@ -88,7 +119,7 @@ } .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { background-position: 0 0; - background-color: #f4ffff; + background-color: #f3ffff; } .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover { background-color: #abd6ff; @@ -96,7 +127,7 @@ /* active status */ .claro .dijitToolbar .dijitButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { border-width: 1px; - background-color: #7dbefa; + background-color: #7dbdfa; background-position: 0 -177px; padding: 1px; } @@ -108,15 +139,15 @@ padding: 0; } .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { - background-color: #f4ffff; + background-color: #f3ffff; background-position: 0 -177px; padding: 2px; } .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive { - background-color: #7dbefa; + background-color: #7dbdfa; } .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive { - background-color: #7dbefa; + background-color: #7dbdfa; } /* Avoid double border between button and arrow */ .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { @@ -135,7 +166,7 @@ border-width: 1px; border-style: solid; background-image: none; - border-color: #769dc0; + border-color: #759dc0; background-color: #ffffff; padding: 1px; } @@ -145,7 +176,7 @@ .claro .dijitToolbarSeparator { /* separator icon in the editor sprite */ - background: url('../../icons/images/editorIconsEnabled.png'); + background: url("../../icons/images/editorIconsEnabled.png"); } /* Toolbar inside of disabled Editor */ .claro .dijitDisabled .dijitToolbar { diff --git a/lib/dijit/themes/claro/Toolbar.less b/lib/dijit/themes/claro/Toolbar.less index eb99f2f23..b61e8191a 100644 --- a/lib/dijit/themes/claro/Toolbar.less +++ b/lib/dijit/themes/claro/Toolbar.less @@ -23,7 +23,7 @@ .claro .dijitToolbar { border-bottom: 1px solid @border-color; background-color: @bar-background-color; - background-image: url("images/commonHighlight.png"); + background-image: url(@image-common-highlight); background-position:0 0; background-repeat:repeat-x; padding: 2px 0 2px 4px; @@ -34,8 +34,12 @@ padding: 0 3px 0 6px; } -/** override claro/form/Button.css **/ -.claro .dijitToolbar .dijitButtonNode { +/** override claro/form/Button.css, and also ComboBox down arrow **/ +.claro .dijitToolbar .dijitButton .dijitButtonNode, +.claro .dijitToolbar .dijitDropDownButton .dijitButtonNode, +.claro .dijitToolbar .dijitComboButton .dijitButtonNode, +.claro .dijitToolbar .dijitToggleButton .dijitButtonNode, +.claro .dijitToolbar .dijitComboBox .dijitButtonNode { border-width: 0; /* on hover/active, border-->1px, padding-->1px */ padding: 2px; .border-radius(@toolbar-button-border-radius); @@ -43,16 +47,42 @@ .transition-property(background-color); .transition-duration(.3s, .35s); - background-image: url("images/commonHighlight.png"); + background-image: url(@image-common-highlight); background-position:0 -30px; background-repeat:repeat-x; background-color:rgba(171,214,255,0); } -.dj_ie .claro .dijitToolbar .dijitButtonNode { +.dj_ie .claro .dijitToolbar .dijitButton .dijitButtonNode, +.dj_ie .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode, +.dj_ie .claro .dijitToolbar .dijitComboButton .dijitButtonNode, +.dj_ie .claro .dijitToolbar .dijitToggleButton .dijitButtonNode, +.dj_ie .claro .dijitToolbar .dijitComboBox .dijitButtonNode { background-color: transparent; /* for IE, which doesn't understand rgba(...) */ } -.dj_ie6 .claro .dijitToolbar .dijitButtonNode { - background: none; /* because background-color: transparent above doesn't work */ +.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, +.dj_ie .claro .dijitToolbar .dijitComboButton .dijitButtonNodeHover, +.dj_ie .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover, +.dj_ie .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode { + /* button should still turn blue on hover, so need to override .dj_ie rules above */ + background-color: @button-hovered-background-color; +} + +/* active status */ +.dj_ie .claro .dijitToolbar .dijitButtonActive .dijitButtonNode, +.dj_ie .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, +.dj_ie .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode, +.dj_ie .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { + /* button should still turn blue on press, so need to override .dj_ie rules above */ + background-color: @button-pressed-background-color; } .claro .dijitToolbar .dijitComboButton .dijitStretch { @@ -141,7 +171,7 @@ .claro .dijitToolbarSeparator { /* separator icon in the editor sprite */ - background: url('../../icons/images/editorIconsEnabled.png'); + background: url(@image-editor-icons-enabled); } /* Toolbar inside of disabled Editor */ diff --git a/lib/dijit/themes/claro/Tree.css b/lib/dijit/themes/claro/Tree.css index 069deb80a..738bb3313 100644 --- a/lib/dijit/themes/claro/Tree.css +++ b/lib/dijit/themes/claro/Tree.css @@ -44,11 +44,11 @@ background-color: none; background-color: transparent; background-color: rgba(171, 214, 255, 0); - background-image: url("images/commonHighlight.png"); background-position: 0 0; background-repeat: repeat-x; border-color: rgba(118, 157, 192, 0); border-width: 0; + color: #000000; -webkit-transition-property: background-color, border-color; -moz-transition-property: background-color, border-color; transition-property: background-color, border-color; @@ -59,36 +59,36 @@ -moz-transition-timing-function: ease-out; transition-timing-function: ease-out; } -.dj_ie6 .claro .dijitTreeRow { - background-image: none; -} .claro .dijitTreeRowSelected { background-repeat: repeat-x; background-color: #cfe5fa; + background-image: url("images/commonHighlight.png"); padding: 3px 0 1px; margin: 0; - border: solid 1px #769dc0; + border: solid 1px #759dc0; color: #000000; } .claro .dijitTreeRowHover { background-color: #abd6ff; + background-image: url("images/commonHighlight.png"); padding: 3px 0 1px; margin: 0; - border: solid 1px #769dc0; + border: solid 1px #759dc0; color: #000000; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; transition-duration: 0.25s; } .claro .dijitTreeRowActive { - background-color: #7dbefa; + background-color: #7dbdfa; + background-image: url("images/commonHighlight.png"); background-position: 0 -177px; padding: 3px 0 1px; margin-left: 0; - border: solid 1px #769dc0; + border: solid 1px #759dc0; color: #000000; } -.dj_ie6 .claro .dijitTreeRowActive { +.dj_ie6 .claro .dijitTreeRow { background-image: none; } .claro .dijitTreeRowFocused { @@ -96,7 +96,7 @@ } /* expando (open/closed) icon */ .claro .dijitTreeExpando { - background-image: url('images/treeExpandImages.png'); + background-image: url("images/treeExpandImages.png"); width: 16px; height: 16px; background-position: -35px 0; @@ -104,7 +104,7 @@ } .dj_ie6 .claro .dijitTreeExpando { - background-image: url('images/treeExpandImages8bit.png'); + background-image: url("images/treeExpandImages8bit.png"); } .claro .dijitTreeRowHover .dijitTreeExpandoOpened { background-position: -53px 0; @@ -119,7 +119,7 @@ background-image: none; } .claro .dijitTreeExpandoLoading { - background-image: url('images/loadingAnimation.gif'); + background-image: url("images/loadingAnimation.gif"); } /* Drag and Drop on TreeNodes * Put insert line on dijitTreeContent node so it's aligned w/ @@ -127,8 +127,8 @@ * though dijitTreeRowNode is the actual "drag object" */ .claro .dijitTreeNode .dojoDndItemBefore .dijitTreeContent { - border-top: 2px solid #769dc0; + border-top: 2px solid #759dc0; } .claro .dijitTreeNode .dojoDndItemAfter .dijitTreeContent { - border-bottom: 2px solid #769dc0; + border-bottom: 2px solid #759dc0; } diff --git a/lib/dijit/themes/claro/Tree.less b/lib/dijit/themes/claro/Tree.less index 4e639ca4f..ff6cd5a14 100644 --- a/lib/dijit/themes/claro/Tree.less +++ b/lib/dijit/themes/claro/Tree.less @@ -46,24 +46,23 @@ background-color: none; // IE6 doesn't understand rgba() or transparent below background-color: transparent; // IE8 doesn't understand rgba() below background-color: rgba(171,214,255,0); // rgba() instead of transparent to prevent flash on hover fade-in - background-image: url("images/commonHighlight.png"); background-position:0 0; background-repeat:repeat-x; border-color: rgba(118,157,192,0); // rgba() instead of none to prevent flash on hover fade-in border-width: 0; + color: @text-color; + .transition-property(background-color, border-color); .transition-duration(.25s); .transition-timing-function(ease-out); } -.dj_ie6 .claro .dijitTreeRow { - background-image: none; -} .claro .dijitTreeRowSelected { background-repeat:repeat-x; background-color:@selected-background-color; + background-image: url(@image-common-highlight); padding: 3px 0 1px; margin: 0; border:solid 1px @selected-border-color; @@ -71,6 +70,7 @@ } .claro .dijitTreeRowHover { background-color:@hovered-background-color; + background-image: url(@image-common-highlight); padding: 3px 0 1px; margin: 0; border:solid 1px @hovered-border-color; @@ -79,13 +79,14 @@ } .claro .dijitTreeRowActive { background-color:@pressed-background-color; + background-image: url(@image-common-highlight); background-position:0 -177px; padding: 3px 0 1px; margin-left: 0; border:solid 1px @pressed-border-color; color:@selected-text-color; } -.dj_ie6 .claro .dijitTreeRowActive { +.dj_ie6 .claro .dijitTreeRow { background-image: none; } .claro .dijitTreeRowFocused { @@ -95,13 +96,13 @@ /* expando (open/closed) icon */ .claro .dijitTreeExpando { - background-image: url('images/treeExpandImages.png'); + background-image: url(@image-tree-expand); width: 16px; height: 16px; background-position: -35px 0; /* for dijitTreeExpandoOpened */ } .dj_ie6 .claro .dijitTreeExpando { - background-image: url('images/treeExpandImages8bit.png'); + background-image: url(@image-tree-expand-ie6); } .claro .dijitTreeRowHover .dijitTreeExpandoOpened { background-position: -53px 0; @@ -117,7 +118,7 @@ background-image:none; } .claro .dijitTreeExpandoLoading { - background-image: url('images/loadingAnimation.gif'); + background-image: url(@image-loading-animation); } /* Drag and Drop on TreeNodes diff --git a/lib/dijit/themes/claro/compile.js b/lib/dijit/themes/claro/compile.js index 14762b592..08e637561 100644 --- a/lib/dijit/themes/claro/compile.js +++ b/lib/dijit/themes/claro/compile.js @@ -1,21 +1,11 @@ -/* - Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved. - Available via Academic Free License >= 2.1 OR the modified BSD license. - see: http://dojotoolkit.org/license for details -*/ - - // Script to process all the less files and convert them to CSS files // Run from themes/dijit/claro like: // // $ node compile.js -// Some guesses for where to find less -require.paths.unshift('/opt/less/lib', 'C:/less/lib'); - var fs = require('fs'), // file system access path = require('path'), // get directory from file name - less = require('less'); // less processor + less = require('../../../util/less'); // less processor var options = { compress: false, @@ -32,7 +22,7 @@ var allFiles = [].concat( lessFiles.forEach(function(fname){ console.log("=== " + fname); - fs.readFile(fname, 'utf-8', function (e, data){ + fs.readFile(fname, 'utf-8', function(e, data){ if(e){ console.error("lessc: " + e.message); process.exit(1); @@ -50,7 +40,7 @@ lessFiles.forEach(function(fname){ try{ var css = tree.toCSS({ compress: options.compress }), outputFname = fname.replace('.less', '.css'); - fd = fs.openSync(outputFname, "w"); + var fd = fs.openSync(outputFname, "w"); fs.writeSync(fd, css, 0, "utf8"); }catch(e){ less.writeError(e, options); diff --git a/lib/dijit/themes/claro/form/Button.css b/lib/dijit/themes/claro/form/Button.css index e01a1d313..bc7c3dc18 100644 --- a/lib/dijit/themes/claro/form/Button.css +++ b/lib/dijit/themes/claro/form/Button.css @@ -41,12 +41,13 @@ .claro .dijitToggleButton .dijitButtonNode { /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */ - border: 1px solid #769dc0; + border: 1px solid #759dc0; padding: 2px 4px 4px 4px; - background-image: url("images/button.png"); + background-image: url("../form/images/button.png"); background-position: center top; background-repeat: repeat-x; - background-color: #e9f4fe; + background-color: #e5f2fe; + color: #000000; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); @@ -64,7 +65,7 @@ width: 15px; height: 15px; margin: 0 auto; - background-image: url("images/buttonArrows.png"); + background-image: url("../form/images/buttonArrows.png"); background-repeat: no-repeat; background-position: -51px 53%; } @@ -105,11 +106,12 @@ -moz-transition-duration: 0.2s; transition-duration: 0.2s; } -/* checked status */ +/* active, checked status */ .claro .dijitButtonActive .dijitButtonNode, .claro .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitComboButtonActive .dijitButtonNode, -.claro .dijitToggleButtonActive .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); diff --git a/lib/dijit/themes/claro/form/Button.less b/lib/dijit/themes/claro/form/Button.less index b076d2a16..208e4de52 100644 --- a/lib/dijit/themes/claro/form/Button.less +++ b/lib/dijit/themes/claro/form/Button.less @@ -41,10 +41,11 @@ /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */ border: 1px solid @button-border-color; padding:2px 4px 4px 4px; - background-image: url("images/button.png"); + background-image: url("../@{image-form-button}"); background-position: center top; background-repeat: repeat-x; background-color: @button-background-color; + color: @text-color; .border-radius(@button-border-radius); .box-shadow(0 1px 1px rgba(0,0,0,0.15)); } @@ -59,7 +60,7 @@ width: 15px; height: 15px; margin: 0 auto; - background-image:url("images/buttonArrows.png"); + background-image:url("../@{image-form-button-arrows}"); background-repeat:no-repeat; background-position:-51px 53%; } @@ -105,11 +106,12 @@ .transition-duration(.2s); } -/* checked status */ +/* active, checked status */ .claro .dijitButtonActive .dijitButtonNode, .claro .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitComboButtonActive .dijitButtonNode, -.claro .dijitToggleButtonActive .dijitButtonNode { +.claro .dijitToggleButtonActive .dijitButtonNode, +.claro .dijitStackController .dijitToggleButtonChecked .dijitButtonNode { background-color: @button-pressed-background-color; .box-shadow(0 0 0 rgba(0,0,0,0)); .transition-duration(.1s); diff --git a/lib/dijit/themes/claro/form/Checkbox.css b/lib/dijit/themes/claro/form/Checkbox.css index 5765bb370..1c1a3c438 100644 --- a/lib/dijit/themes/claro/form/Checkbox.css +++ b/lib/dijit/themes/claro/form/Checkbox.css @@ -19,13 +19,13 @@ * .dijitCheckBoxDisabled|.dijitCheckBoxCheckedDisabled - for background image */ .claro .dijitToggleButton .dijitCheckBoxIcon { - background-image: url('../images/checkmarkNoBorder.png'); + background-image: url("../images/checkmarkNoBorder.png"); } .dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon { - background-image: url('../images/checkmarkNoBorder.gif'); + background-image: url("../images/checkmarkNoBorder.gif"); } .claro .dijitCheckBox, .claro .dijitCheckBoxIcon { - background-image: url('images/checkboxRadioButtonStates.png'); + background-image: url("../form/images/checkboxRadioButtonStates.png"); /* checkbox sprite image */ background-repeat: no-repeat; @@ -35,7 +35,7 @@ padding: 0; } .dj_ie6 .claro .dijitCheckBox, .dj_ie6 .claro .dijitCheckBoxIcon { - background-image: url('images/checkboxAndRadioButtons_IE6.png'); + background-image: url("../form/images/checkboxAndRadioButtons_IE6.png"); /* checkbox sprite image */ } diff --git a/lib/dijit/themes/claro/form/Checkbox.less b/lib/dijit/themes/claro/form/Checkbox.less index 21769dca1..6ce444800 100644 --- a/lib/dijit/themes/claro/form/Checkbox.less +++ b/lib/dijit/themes/claro/form/Checkbox.less @@ -22,16 +22,16 @@ @import "../variables"; .claro .dijitToggleButton .dijitCheckBoxIcon { - background-image: url('../images/checkmarkNoBorder.png'); + background-image: url("../@{image-checkmark}"); } .dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon { - background-image: url('../images/checkmarkNoBorder.gif'); + background-image: url("../@{image-checkmark-ie6}"); } .claro .dijitCheckBox, .claro .dijitCheckBoxIcon /* inside a toggle button */ { - background-image: url('images/checkboxRadioButtonStates.png'); /* checkbox sprite image */ + background-image: url("../@{image-form-checkbox-and-radios}"); /* checkbox sprite image */ background-repeat: no-repeat; width: 15px; height: 16px; @@ -41,7 +41,7 @@ .dj_ie6 .claro .dijitCheckBox, .dj_ie6 .claro .dijitCheckBoxIcon /* inside a toggle button */ { - background-image: url('images/checkboxAndRadioButtons_IE6.png'); /* checkbox sprite image */ + background-image: url("../@{image-form-checkbox-and-radios-ie6}"); /* checkbox sprite image */ } .claro .dijitCheckBox, diff --git a/lib/dijit/themes/claro/form/Common.css b/lib/dijit/themes/claro/form/Common.css index ab8bb5c3b..ce108c1ae 100644 --- a/lib/dijit/themes/claro/form/Common.css +++ b/lib/dijit/themes/claro/form/Common.css @@ -1,9 +1,12 @@ /* claro/form/Common.css */ /*========================= common css =========================*/ /* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */ +.claro .dijitTextBox, .claro .dijitInputInner { + color: #000000; +} .claro .dijitTextBoxError .dijitValidationContainer { background-color: #d46464; - background-image: url('images/error.png'); + background-image: url("../form/images/error.png"); background-position: top center; border: solid #d46464 0; border-left-width: 1px; @@ -45,14 +48,14 @@ } /* hover */ .claro .dijitTextBoxHover, .claro .dijitTextBoxHover .dijitButtonNode { - border-color: #769dc0; + border-color: #759dc0; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; transition-duration: 0.25s; } .claro .dijitTextBoxHover { - background-color: #e9f4fe; - background-image: url('images/textBox_back.png'); + background-color: #e5f2fe; + background-image: url("../form/images/textBox_back.png"); background-repeat: repeat-x; } /* error state */ @@ -64,21 +67,21 @@ } /* focused state */ .claro .dijitTextBoxFocused, .claro .dijitTextBoxFocused .dijitButtonNode { - border-color: #769dc0; + border-color: #759dc0; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s; } .claro .dijitTextBoxFocused { background-color: #ffffff; - background-image: url('images/textBox_back.png'); + background-image: url("../form/images/textBox_back.png"); background-repeat: repeat-x; } .claro .dijitTextBoxFocused .dijitInputContainer { background: #ffffff; } .claro .dijitTextBoxErrorFocused, .claro .dijitTextBoxErrorFocused .dijitButtonNode { - border-color: #ce4f4f; + border-color: #ce5050; } /* disabled state */ .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitButtonNode { @@ -87,12 +90,24 @@ .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer { background-color: #efefef; background-image: none; +} +.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner { color: #818181; } +.dj_webkit .claro .dijitTextBoxDisabled input { + /* because WebKit lightens disabled input/textarea no matter what color you specify */ + + color: #757575; +} +.dj_webkit .claro textarea.dijitTextAreaDisabled { + /* because WebKit lightens disabled input/textarea no matter what color you specify */ + + color: #1b1b1b; +} /*========================= for special widgets =========================*/ /* Input boxes with an arrow (for a drop down) */ .claro .dijitComboBox .dijitArrowButtonInner { - background-image: url("images/commonFormArrows.png"); + background-image: url("../form/images/commonFormArrows.png"); background-position: -35px 53%; background-repeat: no-repeat; margin: 0; @@ -112,7 +127,7 @@ } .claro .dijitComboBox .dijitButtonNode { background-color: #efefef; - background-image: url("images/formHighlight.png"); + background-image: url("../form/images/formHighlight.png"); background-repeat: repeat-x; } /* Arrow "hover" effect: @@ -128,7 +143,7 @@ } /* Arrow Button change when drop down is open */ .claro .dijitComboBox .dijitHasDropDownOpen { - background-color: #7dbefa; + background-color: #7dbdfa; background-position: 0 -177px; padding: 1px; } diff --git a/lib/dijit/themes/claro/form/Common.less b/lib/dijit/themes/claro/form/Common.less index 729867a67..742a43ff7 100644 --- a/lib/dijit/themes/claro/form/Common.less +++ b/lib/dijit/themes/claro/form/Common.less @@ -6,9 +6,16 @@ /* 'dijitTextBox' refers to 'dijit(TextBox|DateTextBox|CurrencyTextBox|...)' */ +.claro .dijitTextBox, +.claro .dijitInputInner { + // .dijitInputInner selector needed for ValidationTextBox on IE6 because <input> doesn't inherit + // the color setting from the ancestor div.dijitTextBox + color: @text-color; +} + .claro .dijitTextBoxError .dijitValidationContainer { background-color: @erroricon-background-color; - background-image: url('images/error.png'); + background-image: url("../@{image-form-error}"); background-position: top center; border: solid @erroricon-background-color 0; border-left-width: 1px; @@ -60,7 +67,7 @@ } .claro .dijitTextBoxHover { background-color: @textbox-hovered-background-color; - background-image: url('images/textBox_back.png'); + background-image: url("../@{image-form-textbox-background}"); background-repeat: repeat-x; } @@ -82,7 +89,7 @@ } .claro .dijitTextBoxFocused { background-color: @textbox-focused-background-color; - background-image: url('images/textBox_back.png'); + background-image: url("../@{image-form-textbox-background}"); background-repeat: repeat-x; } .claro .dijitTextBoxFocused .dijitInputContainer { @@ -103,15 +110,26 @@ .claro .dijitTextBoxDisabled .dijitInputContainer { background-color: @textbox-disabled-background-color; background-image: none; +} +.claro .dijitTextBoxDisabled, +.claro .dijitTextBoxDisabled .dijitInputInner { color: @disabled-text-color; } +.dj_webkit .claro .dijitTextBoxDisabled 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%) +} /*========================= for special widgets =========================*/ /* Input boxes with an arrow (for a drop down) */ .claro .dijitComboBox .dijitArrowButtonInner { - background-image: url("images/commonFormArrows.png"); + background-image: url("../@{image-form-common-arrows}"); background-position:-35px 53%; background-repeat: no-repeat; margin: 0; @@ -136,7 +154,7 @@ .claro .dijitComboBox .dijitButtonNode { background-color: @arrowbutton-background-color; - background-image: url("images/formHighlight.png"); + background-image: url("../@{image-form-highlight}"); background-repeat:repeat-x; } @@ -191,4 +209,4 @@ } .dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner { width:16px; // when no border, then back to 16px just like content-box sizing -}
\ No newline at end of file +} diff --git a/lib/dijit/themes/claro/form/NumberSpinner.css b/lib/dijit/themes/claro/form/NumberSpinner.css index bc6e1aeb6..fcc804969 100644 --- a/lib/dijit/themes/claro/form/NumberSpinner.css +++ b/lib/dijit/themes/claro/form/NumberSpinner.css @@ -35,7 +35,7 @@ .claro .dijitSpinner .dijitArrowButton { width: auto; background-color: #efefef; - background-image: url("images/formHighlight.png"); + background-image: url("../form/images/formHighlight.png"); background-position: 0 0; background-repeat: repeat-x; overflow: hidden; @@ -54,7 +54,7 @@ border-bottom-width: 0; /* 2 top borders = 1 top+bottom border in ComboBox */ - background-image: url("images/commonFormArrows.png"); + background-image: url("../form/images/commonFormArrows.png"); background-repeat: no-repeat; height: 100%; width: 15px; diff --git a/lib/dijit/themes/claro/form/NumberSpinner.less b/lib/dijit/themes/claro/form/NumberSpinner.less index ca78afb35..1c79d3a37 100644 --- a/lib/dijit/themes/claro/form/NumberSpinner.less +++ b/lib/dijit/themes/claro/form/NumberSpinner.less @@ -37,7 +37,7 @@ .claro .dijitSpinner .dijitArrowButton { width:auto; background-color: @arrowbutton-background-color; - background-image: url("images/formHighlight.png"); + background-image: url("../@{image-form-highlight}"); background-position:0 0; background-repeat:repeat-x; overflow: hidden; @@ -53,7 +53,7 @@ .claro .dijitSpinner .dijitArrowButtonInner { border:solid 1px @arrowbutton-inner-border-color; border-bottom-width: 0; /* 2 top borders = 1 top+bottom border in ComboBox */ - background-image: url("images/commonFormArrows.png"); + background-image: url("../@{image-form-common-arrows}"); background-repeat: no-repeat; height: 100%; width:15px; @@ -147,4 +147,4 @@ * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/ .dj_ie7 .claro .dijitSpinner { overflow:visible; -}
\ No newline at end of file +} diff --git a/lib/dijit/themes/claro/form/RadioButton.css b/lib/dijit/themes/claro/form/RadioButton.css index 4dc3ad47d..bad1854b4 100644 --- a/lib/dijit/themes/claro/form/RadioButton.css +++ b/lib/dijit/themes/claro/form/RadioButton.css @@ -19,15 +19,15 @@ * .dijitRadioDisabled|.dijitRadioCheckedDisabled - for background image */ .claro .dijitToggleButton .dijitRadio, .claro .dijitToggleButton .dijitRadioIcon { - background-image: url('images/checkboxRadioButtonStates.png'); + background-image: url("../form/images/checkboxRadioButtonStates.png"); } .dj_ie6 .claro .dijitToggleButton .dijitRadio, .dj_ie6 .claro .dijitToggleButton .dijitRadioIcon { - background-image: url('images/checkboxAndRadioButtons_IE6.png'); + background-image: url("../form/images/checkboxAndRadioButtons_IE6.png"); } .claro .dijitRadio, .claro .dijitRadioIcon { /* inside a toggle button */ - background-image: url('images/checkboxRadioButtonStates.png'); + background-image: url("../form/images/checkboxRadioButtonStates.png"); /* checkbox sprite image */ background-repeat: no-repeat; @@ -39,7 +39,7 @@ .dj_ie6 .claro .dijitRadio, .dj_ie6 .claro .dijitRadioIcon { /* inside a toggle button */ - background-image: url('images/checkboxAndRadioButtons_IE6.png'); + background-image: url("../form/images/checkboxAndRadioButtons_IE6.png"); /* checkbox sprite image */ } diff --git a/lib/dijit/themes/claro/form/RadioButton.less b/lib/dijit/themes/claro/form/RadioButton.less index 18f1cc163..f48cb67ec 100644 --- a/lib/dijit/themes/claro/form/RadioButton.less +++ b/lib/dijit/themes/claro/form/RadioButton.less @@ -23,17 +23,17 @@ .claro .dijitToggleButton .dijitRadio, .claro .dijitToggleButton .dijitRadioIcon { - background-image: url('images/checkboxRadioButtonStates.png'); + background-image: url("../@{image-form-checkbox-and-radios}"); } .dj_ie6 .claro .dijitToggleButton .dijitRadio, .dj_ie6 .claro .dijitToggleButton .dijitRadioIcon { - background-image: url('images/checkboxAndRadioButtons_IE6.png'); + background-image: url("../@{image-form-checkbox-and-radios-ie6}"); } .claro .dijitRadio, .claro .dijitRadioIcon { /* inside a toggle button */ - background-image: url('images/checkboxRadioButtonStates.png'); /* checkbox sprite image */ + background-image: url("../@{image-form-checkbox-and-radios}"); /* checkbox sprite image */ background-repeat: no-repeat; width: 15px; height: 15px; @@ -43,7 +43,7 @@ .dj_ie6 .claro .dijitRadio, .dj_ie6 .claro .dijitRadioIcon { /* inside a toggle button */ - background-image: url('images/checkboxAndRadioButtons_IE6.png'); /* checkbox sprite image */ + background-image: url("../@{image-form-checkbox-and-radios-ie6}"); /* checkbox sprite image */ } .claro .dijitRadio{ diff --git a/lib/dijit/themes/claro/form/Select.css b/lib/dijit/themes/claro/form/Select.css index a30ede640..bfbca4ec8 100644 --- a/lib/dijit/themes/claro/form/Select.css +++ b/lib/dijit/themes/claro/form/Select.css @@ -37,11 +37,11 @@ border: 1px solid #ffffff; border-top: none; background-color: #efefef; - background-image: url("images/formHighlight.png"); + background-image: url("../form/images/formHighlight.png"); background-repeat: repeat-x; } .claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner { - background-image: url("images/commonFormArrows.png"); + background-image: url("../form/images/commonFormArrows.png"); background-position: -35px 70%; background-repeat: no-repeat; width: 16px; @@ -49,13 +49,13 @@ } /* hover status */ .claro .dijitSelectHover { - border: 1px solid #769dc0; - background-color: #e9f4fe; - background-image: url('images/textBox_back.png'); + border: 1px solid #759dc0; + background-color: #e5f2fe; + background-image: url("../form/images/textBox_back.png"); background-repeat: repeat-x; } .claro .dijitSelectHover .dijitButtonContents { - border-color: #769dc0; + border-color: #759dc0; } .claro .dijitSelectHover .dijitArrowButton { background-color: #abd6ff; @@ -65,10 +65,10 @@ } /* focused status */ .claro .dijitSelectFocused { - border: 1px solid #769dc0; + border: 1px solid #759dc0; } .claro .dijitSelectFocused .dijitButtonContents { - border-color: #769dc0; + border-color: #759dc0; } .claro .dijitSelectFocused .dijitArrowButton { background-color: #7dbefa; @@ -105,5 +105,5 @@ padding: 2px; } .claro .dijitSelectMenu .dijitMenuSeparatorTop { - border-bottom: 1px solid #769dc0; + border-bottom: 1px solid #759dc0; } diff --git a/lib/dijit/themes/claro/form/Select.less b/lib/dijit/themes/claro/form/Select.less index c429b2e48..0e7426112 100644 --- a/lib/dijit/themes/claro/form/Select.less +++ b/lib/dijit/themes/claro/form/Select.less @@ -44,12 +44,12 @@ border: 1px solid @arrowbutton-inner-border-color; border-top:none; background-color: @arrowbutton-background-color; - background-image: url("images/formHighlight.png"); + background-image: url("../@{image-form-highlight}"); background-repeat:repeat-x; } .claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner { - background-image: url("images/commonFormArrows.png"); + background-image: url("../@{image-form-common-arrows}"); background-position:-35px 70%; background-repeat: no-repeat; width:16px; @@ -60,7 +60,7 @@ .claro .dijitSelectHover { border: 1px solid @hovered-border-color; background-color: @textbox-hovered-background-color; - background-image: url('images/textBox_back.png'); + background-image: url("../@{image-form-textbox-background}"); background-repeat: repeat-x; } diff --git a/lib/dijit/themes/claro/form/Slider.css b/lib/dijit/themes/claro/form/Slider.css index 5694e8c76..eb82e17ad 100644 --- a/lib/dijit/themes/claro/form/Slider.css +++ b/lib/dijit/themes/claro/form/Slider.css @@ -54,28 +54,31 @@ outline: 1px; } .claro .dijitSliderFocused .dijitSliderBar { - border-color: #769dc0; + border-color: #759dc0; } .claro .dijitSliderHover .dijitSliderBar { - border-color: #769dc0; + border-color: #759dc0; } .claro .dijitSliderDisabled .dijitSliderBar { background-image: none; border-color: #d3d3d3; } +.claro .dijitRuleLabel { + color: #000000; +} /* Horizontal Slider */ .claro .dijitRuleLabelsContainerH { padding: 2px 0; } .claro .dijitSlider .dijitSliderProgressBarH, .claro .dijitSlider .dijitSliderLeftBumper { - background-image: url("images/sliderHorizontal.png"); + background-image: url("../form/images/sliderHorizontal.png"); background-repeat: repeat-x; background-position: 0 -20px; border-color: #b5bcc7; background-color: #cfe5fa; } .claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper { - background-image: url("images/sliderHorizontal.png"); + background-image: url("../form/images/sliderHorizontal.png"); background-repeat: repeat-x; background-position: 0 -11px; border-color: #b5bcc7; @@ -90,22 +93,22 @@ .claro .dijitSliderHover .dijitSliderProgressBarH, .claro .dijitSliderHover .dijitSliderLeftBumper { background-position: 0 -20px; background-color: #abd6ff; - border-color: #769dc0; + border-color: #759dc0; } .claro .dijitSliderHover .dijitSliderRemainingBarH, .claro .dijitSliderHover .dijitSliderRightBumper { background-position: 0 0; background-color: #ffffff; - border-color: #769dc0; + border-color: #759dc0; } .claro .dijitSliderFocused .dijitSliderProgressBarH, .claro .dijitSliderFocused .dijitSliderLeftBumper { background-position: 0 -30px; background-color: #abd6ff; - border-color: #769dc0; + border-color: #759dc0; } .claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper { background-position: 0 -9px; background-color: #ffffff; - border-color: #769dc0; + border-color: #759dc0; } .claro .dijitSliderDisabled .dijitSliderProgressBarH, .claro .dijitSliderDisabled .dijitSliderLeftBumper { background-color: #d3d3d3; @@ -121,14 +124,14 @@ padding: 0 2px; } .claro .dijitSlider .dijitSliderProgressBarV, .claro .dijitSlider .dijitSliderBottomBumper { - background-image: url("images/sliderVertical.png"); + background-image: url("../form/images/sliderVertical.png"); background-repeat: repeat-y; background-position: -36px 0; border-color: #b5bcc7; background-color: #cfe5fa; } .claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper { - background-image: url("images/sliderVertical.png"); + background-image: url("../form/images/sliderVertical.png"); background-repeat: repeat-y; background-position: -3px 0; border-color: #b5bcc7; @@ -169,7 +172,7 @@ border: 0; width: 18px; height: 16px; - background-image: url("images/sliderThumbs.png"); + background-image: url("../form/images/sliderThumbs.png"); background-repeat: no-repeat; background-position: 0 0; } @@ -192,7 +195,7 @@ border: 0; width: 18px; height: 16px; - background-image: url("images/sliderThumbs.png"); + background-image: url("../form/images/sliderThumbs.png"); background-repeat: no-repeat; background-position: -289px 0; } @@ -222,7 +225,7 @@ .claro .dijitSliderIncrementIconH, .claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV { - background-image: url('images/commonFormArrows.png'); + background-image: url("../form/images/commonFormArrows.png"); background-repeat: no-repeat; background-color: #efefef; -moz-border-radius: 2px; @@ -248,7 +251,7 @@ .claro .dijitSliderHover .dijitSliderIncrementIconV { /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */ - border: solid 1px #769dc0; + border: solid 1px #759dc0; background-color: #ffffff; } .claro .dijitSliderDecrementIconH { @@ -286,7 +289,7 @@ .claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, .claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { background-color: #abd6ff; - border-color: #769dc0; + border-color: #759dc0; } .claro .dijitSliderButtonInner { visibility: hidden; diff --git a/lib/dijit/themes/claro/form/Slider.less b/lib/dijit/themes/claro/form/Slider.less index 82451b506..db0f8cb24 100644 --- a/lib/dijit/themes/claro/form/Slider.less +++ b/lib/dijit/themes/claro/form/Slider.less @@ -66,6 +66,9 @@ background-image: none; border-color: @disabled-border-color; } +.claro .dijitRuleLabel { + color: @text-color; +} /* Horizontal Slider */ @@ -74,7 +77,7 @@ } .claro .dijitSlider .dijitSliderProgressBarH, .claro .dijitSlider .dijitSliderLeftBumper{ - background-image: url("images/sliderHorizontal.png"); + background-image: url("../@{image-form-slider-horizontal}"); background-repeat:repeat-x; background-position:0 -20px; border-color: @border-color; @@ -82,7 +85,7 @@ } .claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper{ - background-image: url("images/sliderHorizontal.png"); + background-image: url("../@{image-form-slider-horizontal}"); background-repeat:repeat-x; background-position:0 -11px; border-color: @border-color; @@ -135,7 +138,7 @@ } .claro .dijitSlider .dijitSliderProgressBarV, .claro .dijitSlider .dijitSliderBottomBumper{ - background-image: url("images/sliderVertical.png"); + background-image: url("../@{image-form-slider-vertical}"); background-repeat:repeat-y; background-position:-36px 0; border-color: @border-color; @@ -143,7 +146,7 @@ } .claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper{ - background-image: url("images/sliderVertical.png"); + background-image: url("../@{image-form-slider-vertical}"); background-repeat:repeat-y; background-position:-3px 0; border-color: @border-color; @@ -191,7 +194,7 @@ border: 0; width: 18px; height: 16px; - background-image: url("images/sliderThumbs.png"); + background-image: url("../@{image-form-slider-thumbs}"); background-repeat:no-repeat; background-position:0 0; } @@ -215,7 +218,7 @@ border: 0; width: 18px; height: 16px; - background-image: url("images/sliderThumbs.png"); + background-image: url("../@{image-form-slider-thumbs}"); background-repeat:no-repeat; background-position:-289px 0; } @@ -248,7 +251,7 @@ .claro .dijitSliderIncrementIconH, .claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV { - background-image: url('images/commonFormArrows.png'); + background-image: url("../@{image-form-common-arrows}"); background-repeat:no-repeat; background-color: @arrowbutton-background-color; .border-radius(2px); diff --git a/lib/dijit/themes/claro/layout/AccordionContainer.css b/lib/dijit/themes/claro/layout/AccordionContainer.css index f76947959..34831764c 100644 --- a/lib/dijit/themes/claro/layout/AccordionContainer.css +++ b/lib/dijit/themes/claro/layout/AccordionContainer.css @@ -50,15 +50,12 @@ background-color: transparent; /* pick up color from dijitAccordionInnerContainer */ - background-image: url("images/accordion.png"); + background-image: url("../layout/images/accordion.png"); background-position: 0 0; background-repeat: repeat-x; padding: 5px 7px 2px 7px; min-height: 17px; - color: #4a4a4a; -} -.claro .dijitAccordionTitleHover { - color: #000000; + color: #494949; } .dj_ie6 .claro .dijitAccordionTitle { background-image: none; @@ -69,7 +66,7 @@ */ background-color: #ffffff; - border: 1px solid #769dc0; + border: 1px solid #759dc0; margin: 0 2px 2px; } .claro .dijitAccordionContainer .dijitAccordionContainer-child { @@ -79,8 +76,8 @@ } /* Active state for closed pane */ .claro .dijitAccordionInnerContainerActive { - border: 1px solid #769dc0; - background-color: #7dbefa; + border: 1px solid #759dc0; + background-color: #7dbdfa; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s; @@ -91,7 +88,7 @@ } /* Open (a.k.a. selected) pane */ .claro .dijitAccordionInnerContainerSelected { - border-color: #769dc0; + border-color: #759dc0; background-color: #cfe5fa; } .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { @@ -101,7 +98,7 @@ } /* Hovering open or closed pane */ -.claro .dijitAccordionInnerContainerHover dijitAccordionTitle { +.claro .dijitAccordionInnerContainerHover .dijitAccordionTitle { /* both open and closed */ color: #000000; @@ -109,7 +106,7 @@ .claro .dijitAccordionInnerContainerHover, .claro .dijitAccordionInnerContainerSelectedActive { /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */ - border: 1px solid #769dc0; + border: 1px solid #759dc0; background-color: #abd6ff; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; @@ -117,7 +114,7 @@ } .claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper { background-color: #ffffff; - border: 1px solid #769dc0 !important; + border: 1px solid #759dc0 !important; -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); diff --git a/lib/dijit/themes/claro/layout/AccordionContainer.less b/lib/dijit/themes/claro/layout/AccordionContainer.less index 01f4427f4..b3aa62248 100644 --- a/lib/dijit/themes/claro/layout/AccordionContainer.less +++ b/lib/dijit/themes/claro/layout/AccordionContainer.less @@ -43,16 +43,13 @@ } .claro .dijitAccordionTitle { background-color: transparent; /* pick up color from dijitAccordionInnerContainer */ - background-image: url("images/accordion.png"); + background-image: url("../@{image-layout-accordion}"); background-position:0 0; background-repeat:repeat-x; padding: 5px 7px 2px 7px; min-height:17px; color:@unselected-text-color; } -.claro .dijitAccordionTitleHover { - color:@hovered-text-color; -} .dj_ie6 .claro .dijitAccordionTitle { background-image: none; } @@ -95,7 +92,7 @@ /* Hovering open or closed pane */ -.claro .dijitAccordionInnerContainerHover dijitAccordionTitle { +.claro .dijitAccordionInnerContainerHover .dijitAccordionTitle { /* both open and closed */ color:@hovered-text-color; } diff --git a/lib/dijit/themes/claro/layout/BorderContainer.css b/lib/dijit/themes/claro/layout/BorderContainer.css index ede2a56c5..8c0a5fa96 100644 --- a/lib/dijit/themes/claro/layout/BorderContainer.css +++ b/lib/dijit/themes/claro/layout/BorderContainer.css @@ -86,17 +86,17 @@ Splitters and gutters: /* hovered splitter */ .claro .dijitSplitterHHover { font-size: 1px; - background: url("images/splitterHorizontalHover.png") no-repeat center top; + background: url("../layout/images/splitterHorizontalHover.png") no-repeat center top; } .claro .dijitSplitterHHover .dijitSplitterThumb { - background: #769dc0 none; + background: #759dc0 none; } .claro .dijitSplitterVHover { font-size: 1px; - background: url("images/splitterVerticalHover.png") no-repeat center left; + background: url("../layout/images/splitterVerticalHover.png") no-repeat center left; } .claro .dijitSplitterVHover .dijitSplitterThumb { - background: #769dc0 none; + background: #759dc0 none; } .dj_ie6 .dijitSplitterHHover, .dj_ie6 .claro .dijitSplitterVHover { background-color: #cfe5fa; diff --git a/lib/dijit/themes/claro/layout/BorderContainer.less b/lib/dijit/themes/claro/layout/BorderContainer.less index 17c4b63cb..b7c672e63 100644 --- a/lib/dijit/themes/claro/layout/BorderContainer.less +++ b/lib/dijit/themes/claro/layout/BorderContainer.less @@ -97,7 +97,7 @@ Splitters and gutters: /* hovered splitter */ .claro .dijitSplitterHHover { font-size: 1px; - background: url("images/splitterHorizontalHover.png") no-repeat center top; + background: url("../@{image-layout-splitter-horizontal-hover}") no-repeat center top; } @@ -107,7 +107,7 @@ Splitters and gutters: .claro .dijitSplitterVHover { font-size: 1px; - background: url("images/splitterVerticalHover.png") no-repeat center left; + background: url("../@{image-layout-splitter-vertical-hover}") no-repeat center left; } .claro .dijitSplitterVHover .dijitSplitterThumb { diff --git a/lib/dijit/themes/claro/layout/TabContainer.css b/lib/dijit/themes/claro/layout/TabContainer.css index 030e4b761..641b921ec 100644 --- a/lib/dijit/themes/claro/layout/TabContainer.css +++ b/lib/dijit/themes/claro/layout/TabContainer.css @@ -60,7 +60,7 @@ border-color: #b5bcc7; } .claro .dijitTabCloseButton { - background: url("images/tabClose.png") no-repeat; + background: url("../layout/images/tabClose.png") no-repeat; width: 14px; height: 14px; margin-left: 5px; @@ -85,7 +85,7 @@ -webkit-transition-duration: 0.35s; -moz-transition-duration: 0.35s; transition-duration: 0.35s; - color: #4a4a4a; + color: #494949; } .claro .dijitTabHover .dijitTabInnerDiv { background-color: #abd6ff; @@ -95,7 +95,7 @@ color: #000000; } .claro .dijitTabActive .dijitTabInnerDiv { - background-color: #7dbefa; + background-color: #7dbdfa; color: #000000; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; @@ -109,10 +109,10 @@ border: 1px solid #b5bcc7; } .claro .dijitTabHover .dijitTabContent { - border-color: #769dc0; + border-color: #759dc0; } .claro .dijitTabActive .dijitTabContent { - border-color: #769dc0; + border-color: #759dc0; } .claro .dijitTabChecked .dijitTabContent { color: #000000; @@ -140,7 +140,7 @@ .claro .dijitTabContainerTop-tabs .dijitTabContent { padding: 3px 6px; border-bottom-width: 0; - background-image: url("images/tabTop.png"); + background-image: url("../layout/images/tabTop.png"); background-position: 0 0; background-repeat: repeat-x; min-width: 60px; @@ -152,7 +152,7 @@ } /* normal status */ .claro .dijitTabContainerTop-tabs .dijitTabInnerDiv { - background-image: url("images/tabTop.png"); + background-image: url("../layout/images/tabTop.png"); background-position: 0 -248px; background-position: bottom; background-repeat: repeat-x; @@ -183,7 +183,7 @@ .claro .dijitTabContainerBottom-tabs .dijitTabContent { padding: 3px 6px; border-top-width: 0; - background-image: url("images/tabBottom.png"); + background-image: url("../layout/images/tabBottom.png"); background-position: 0 -249px; background-repeat: repeat-x; background-position: bottom; @@ -195,7 +195,7 @@ } /* normal status */ .claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv { - background-image: url("images/tabBottom.png"); + background-image: url("../layout/images/tabBottom.png"); background-position: top; background-repeat: repeat-x; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); @@ -228,13 +228,13 @@ } /* normal status */ .claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv { - background-image: url("images/tabLeft.png"); + 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("images/tabLeft.png"); + background-image: url("../layout/images/tabLeft.png"); background-repeat: repeat-y; background-position: 0 0; } @@ -262,13 +262,13 @@ } /* normal status */ .claro .dijitTabContainerRight-tabs .dijitTabInnerDiv { - background-image: url("images/tabRight.png"); + 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("images/tabRight.png"); + background-image: url("../layout/images/tabRight.png"); background-position: right top; background-repeat: repeat-y; } @@ -304,19 +304,19 @@ } /************ left/right scroll buttons + menu button ************/ .claro .tabStripButton { - background-color: #e9f4fe; + background-color: #e5f2fe; border: 1px solid #b5bcc7; } .claro .dijitTabListContainer-top .tabStripButton { padding: 4px 3px; margin-top: 7px; - background-image: url("images/tabTop.png"); + background-image: url("../layout/images/tabTop.png"); background-position: 0 0; } .claro .dijitTabListContainer-bottom .tabStripButton { padding: 5px 3px; margin-bottom: 4px; - background-image: url("images/tabTop.png"); + background-image: url("../layout/images/tabTop.png"); background-position: 0 -248px; background-position: bottom; } @@ -324,7 +324,7 @@ background-color: #abd6ff; } .claro .tabStripButtonActive { - background-color: #7dbefa; + background-color: #7dbdfa; } .claro .dijitTabStripIcon { height: 15px; @@ -393,7 +393,7 @@ box-shadow: none; } .claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent { - background-color: #e9f4fe; + background-color: #e5f2fe; border: solid 1px #cfe5fa; padding: 3px; -webkit-transition-duration: 0.2s; @@ -404,16 +404,16 @@ text-decoration: none; } .claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent { - border: solid 1px #769dc0; + border: solid 1px #759dc0; padding: 3px; - background: #abd6ff url("images/tabNested.png") repeat-x; + background: #abd6ff url("../layout/images/tabNested.png") repeat-x; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s; } .claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent { padding: 3px; - border: solid 1px #769dc0; + border: solid 1px #759dc0; background-position: 0 105px; background-color: #cfe5fa; } diff --git a/lib/dijit/themes/claro/layout/TabContainer.less b/lib/dijit/themes/claro/layout/TabContainer.less index 691900eba..16947ff9c 100644 --- a/lib/dijit/themes/claro/layout/TabContainer.less +++ b/lib/dijit/themes/claro/layout/TabContainer.less @@ -62,7 +62,7 @@ border-color: @border-color; } .claro .dijitTabCloseButton { - background: url("images/tabClose.png") no-repeat; + background: url("../@{image-layout-tab-close}") no-repeat; width: 14px; height: 14px; margin-left: 5px; @@ -135,7 +135,7 @@ .claro .dijitTabContainerTop-tabs .dijitTabContent { padding:3px 6px; border-bottom-width: 0; - background-image:url("images/tabTop.png"); + background-image:url("../@{image-layout-tab-top}"); background-position:0 0; background-repeat:repeat-x; min-width: 60px; @@ -148,7 +148,7 @@ /* normal status */ .claro .dijitTabContainerTop-tabs .dijitTabInnerDiv { - background-image:url("images/tabTop.png"); + background-image:url("../@{image-layout-tab-top}"); background-position:0 -248px; background-position:bottom; background-repeat:repeat-x; @@ -176,7 +176,7 @@ .claro .dijitTabContainerBottom-tabs .dijitTabContent { padding:3px 6px; border-top-width: 0; - background-image: url("images/tabBottom.png"); + background-image: url("../@{image-layout-tab-bottom}"); background-position:0 -249px; background-repeat: repeat-x; background-position:bottom; @@ -188,7 +188,7 @@ } /* normal status */ .claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv { - background-image: url("images/tabBottom.png"); + background-image: url("../@{image-layout-tab-bottom}"); background-position: top; background-repeat: repeat-x; .box-shadow(0 1px 1px rgba(0, 0, 0, 0.04)); @@ -218,13 +218,13 @@ } /* normal status */ .claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv { - background-image: url("images/tabLeft.png"); + 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("images/tabLeft.png"); + background-image: url("../@{image-layout-tab-left}"); background-repeat: repeat-y; background-position:0 0; } @@ -249,13 +249,13 @@ } /* normal status */ .claro .dijitTabContainerRight-tabs .dijitTabInnerDiv { - background-image: url("images/tabRight.png"); + 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("images/tabRight.png"); + background-image: url("../@{image-layout-tab-right}"); background-position:right top; background-repeat: repeat-y; } @@ -298,13 +298,13 @@ .claro .dijitTabListContainer-top .tabStripButton { padding: 4px 3px; margin-top:7px; - background-image: url("images/tabTop.png"); + background-image: url("../@{image-layout-tab-top}"); background-position:0 0; } .claro .dijitTabListContainer-bottom .tabStripButton { padding:5px 3px; margin-bottom:4px; - background-image: url("images/tabTop.png"); + background-image: url("../@{image-layout-tab-top}"); background-position:0 -248px; background-position:bottom; } @@ -318,7 +318,7 @@ height:15px; width:15px; margin: 0 auto; - background:url("../form/images/buttonArrows.png") no-repeat -75px 50%; + background:url("../@{image-form-button-arrows}") no-repeat -75px 50%; background-color: transparent; } .claro .dijitTabStripSlideRightIcon{ @@ -382,7 +382,7 @@ .claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent { border:solid 1px @nestedtab-selected-border-color; padding: 3px; - background: @nestedtab-selected-background-color url("images/tabNested.png") repeat-x; + background: @nestedtab-selected-background-color url("../@{image-layout-tab-nested}") repeat-x; .transition-duration(.1s); } .claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent { diff --git a/lib/dijit/themes/claro/variables.less b/lib/dijit/themes/claro/variables.less index 8d09c2519..ca7d6773c 100644 --- a/lib/dijit/themes/claro/variables.less +++ b/lib/dijit/themes/claro/variables.less @@ -1,149 +1,204 @@ // General -@text-color: #000000; // Text color for enabled widgets -@border-color: #b5bcc7; // Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer -@popup-border-color: #769dc0; // Border for Dialog, Menu, Tooltip. Must also update tooltip.png (the arrow image file) to match -@minor-border-color: #d3d3d3; // Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar +@primary-color: #cfe5fa; // Base color for entire theme +@secondary-color: #efefef; // Base color for bar-backgrounds +@text-color: #000; // Text color for enabled widgets +@disabled-color: #d3d3d3; // Base for disabled backgrounds and borders +@error-color: #d46464; -@disabled-border-color: #d3d3d3; // Border color for disabled/readonly Button, TextBox etc. widgets -@disabled-background-color: #efefef;// Disabled button, textbox, etc. -@disabled-text-color: #818181; // Text color for disabled/readonly widgets +@container-background-color:#fff; // Backgrounds for various content areas such as TitlePane, ContentPane and Inputs -@unselected-background-color: #efefef;// Background color for unselected/unopened tab button, accordion pane, TitlePane, Menu items -@unselected-text-color: #4a4a4a; // Text color for unselected/unopened tab button, accordion pane, TitlePane, Menu items +@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 +@unfocused-clickable-color: spin(saturate(lighten(@primary-color, 5), 10), 0); // Background color for enabled buttons, text inputs +@border-color: spin(desaturate(darken(@primary-color, 15), 67), 8); // Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer +@minor-border-color: @disabled-color; // Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar +@popup-border-color: @base-border-color; // Border for Dialog, Menu, Tooltip. Must also update tooltip.png (the arrow image file) to match -@hovered-border-color: #769dc0; // Hover of textbox, tab label, BorderContainer splitter, Calendar, etc. -@hovered-background-color: #abd6ff; // Background color for hover of Button, MenuBar, Accordion pane, Calendar... anything that has a (non-white) color to start with and gets darker on hover -@hovered-text-color: @text-color; // Used for title of select Accordion pane, label of select tab, hovered Menu item, etc. -@pressed-border-color: #769dc0; // During click on Calendar day, Slider up/down buttons, tab button, etc. -@pressed-background-color: #7dbefa; // Background color while clicking on Accordion/TitlePane title bar, tab button, Calendar day, Toolbar button, Tree row. +@disabled-border-color: @disabled-color; // Border color for disabled/readonly Button, TextBox etc. widgets +@disabled-background-color: @secondary-color; // Disabled button, textbox, etc. +@disabled-text-color: darken(@secondary-color, 43); // Text color for disabled/readonly widgets -@selected-border-color: #769dc0; // Selected AccordionPane, tab of nested TabContainer (but plain TabContainer is special) -@selected-background-color: #cfe5fa;// Selected Accordion pane, nested tab label, Tree row -@selected-text-color: @text-color; // title of selected Accordion pane, label of selected tab, hovered Menu item, etc. +@unselected-background-color: @secondary-color; // Background color for unselected/unopened tab button, accordion pane, TitlePane, Menu items +@unselected-text-color: darken(@secondary-color, 65); // Text color for unselected/unopened tab button, accordion pane, TitlePane, Menu items -@bar-background-color: #efefef; // MenuBar, Toolbar, action bar at bottom of dialog -@pane-background-color: #fff; // Background color of Accordion panes, Dialogs, etc. -@popup-background-color: #fff; // Background for Dialog. TODO: currently use for ColorPalette, maybe should change. +@hovered-border-color: @base-border-color; // Hover of textbox, tab label, BorderContainer splitter, Calendar, etc. +@hovered-background-color: @minor-selected-color; // Background color for hover of Button, MenuBar, Accordion pane, Calendar... anything that has a (non-white) color to start with and gets darker on hover +@hovered-text-color: @text-color; // Used for title of select Accordion pane, label of select tab, hovered Menu item, etc. + +@pressed-border-color: @base-border-color; // During click on Calendar day, Slider up/down buttons, tab button, etc. +@pressed-background-color: spin(saturate(darken(@primary-color, 16), 12), 0); // Background color while clicking on Accordion/TitlePane title bar, tab button, Calendar day, Toolbar button, Tree row. + +@selected-border-color: @base-border-color; // Selected AccordionPane, tab of nested TabContainer (but plain TabContainer is special) +@selected-background-color: @primary-color; // Selected Accordion pane, nested tab label, Tree row +@selected-text-color: @text-color; // title of selected Accordion pane, label of selected tab, hovered Menu item, etc. + +@bar-background-color: @secondary-color; // MenuBar, Toolbar, action bar at bottom of dialog +@pane-background-color: @container-background-color; // Background color of Accordion panes, Dialogs, etc. +@popup-background-color: @container-background-color; // Background for Dialog. TODO: currently use for ColorPalette, maybe should change. // Buttons -@button-border-color: #769dc0; // Border for (stand-alone) buttons in normal, hovered, or active state -@button-background-color: #e9f4fe; // Background color for (unhovered) buttons -@button-hovered-background-color: #abd6ff; // Background color for hovered buttons -@button-pressed-background-color: #abd6ff; // Background color for active buttons -@button-border-radius: 4px; // Rounded corner radius for buttons (except in toolbar) +@button-border-color: @base-border-color; // Border for (stand-alone) buttons in normal, hovered, or active state +@button-background-color: @unfocused-clickable-color; // Background color for (unhovered) buttons +@button-hovered-background-color: @minor-selected-color; // Background color for hovered buttons +@button-pressed-background-color: @minor-selected-color; // Background color for active buttons +@button-border-radius: 4px; // Rounded corner radius for buttons (except in toolbar) // Input widgets -@focused-border-color: #769dc0; // Focused textbox, editor, select, etc. -@error-border-color: #d46464; // Border for textbox in error state -@error-focused-border-color: #ce4f4f; // Border of textbox in error state, and focused -@erroricon-background-color: #d46464; // Background color for exclamation point validation icon (for TextBox in error state) -@textbox-background-color: #fff; // Default background color of TextBox based widgets -@textbox-hovered-background-color: #e9f4fe; // Background color when hovering a unfocused TextBox, Select, Editor, or other input widget +@focused-border-color: @base-border-color; // Focused textbox, editor, select, etc. +@error-border-color: @error-color; // Border for textbox in error state +@error-focused-border-color: darken(@error-color, 5); // Border of textbox in error state, and focused +@erroricon-background-color: @error-color; // Background color for exclamation point validation icon (for TextBox in error state) +@textbox-background-color: @container-background-color; // Default background color of TextBox based widgets +@textbox-hovered-background-color: @unfocused-clickable-color; // Background color when hovering a unfocused TextBox, Select, Editor, or other input widget @textbox-focused-background-color: @textbox-background-color; @textbox-error-background-color: @textbox-background-color; @textbox-disabled-background-color: @disabled-background-color; -@textbox-padding: 2px; // Padding for Textbox, Textarea, etc. +@textbox-padding: 2px; // Padding for Textbox, Textarea, etc. // CheckBox, RadioButton -@focus-outline-color: #4a4a4a; // Color for artificial focus outline around labels of checkboxes +@focus-outline-color: darken(@secondary-color, 65); // Color for artificial focus outline around labels of checkboxes // TabContainer -@nestedtab-hovered-background-color: @textbox-hovered-background-color; -@nestedtab-hovered-border-color: #cfe5fa; +@nestedtab-hovered-background-color: @unfocused-clickable-color; +@nestedtab-hovered-border-color: @primary-color; @nestedtab-selected-border-color: @selected-border-color; -@nestedtab-selected-background-color: #abd6ff; -@tab-disabled-background-color: #d3d3d3; // For disabled tabs of a TabContainer (not officially supported) +@nestedtab-selected-background-color: @minor-selected-color; +@tab-disabled-background-color: @disabled-color; // For disabled tabs of a TabContainer (not officially supported) // Arrow buttons (stand alone, or inside ComboBox / ComboButton / Spinner / etc. -@arrowbutton-background-color: #efefef; -@arrowbutton-hovered-background-color: #abd6ff; // Color of arrow when hovering ComboBox. But hovering Spinner doesn't change arrow color (TODO) -@arrowbutton-pressed-background-color: #abd6ff; -@arrowbutton-inner-border-color: #fff; // Typically the arrows have an inner white border (a.k.a. padding) and then an outer black-ish border +@arrowbutton-background-color: @secondary-color; +@arrowbutton-hovered-background-color: @minor-selected-color; // Color of arrow when hovering ComboBox. But hovering Spinner doesn't change arrow color (TODO) +@arrowbutton-pressed-background-color: @minor-selected-color; +@arrowbutton-inner-border-color: @container-background-color; // Typically the arrows have an inner white border (a.k.a. padding) and then an outer black-ish border // Slider // Note: any changes here require corresponding changes in form/images/sliderThumbs.png -@slider-fullbar-background-color: #cfe5fa; // Background color for part of slider bar before (to the left or below) the handle -@slider-remainingbar-background-color: #fff; // Background color for part of slider bar after (to the right or above) the handle -@slider-hovered-fullbar-background-color: #abd6ff; // Background color for part of bar of hovered slider before (to the left or below) the handle -@slider-hovered-remainingbar-background-color: #fff;// Background color for part of bar of hovered slider after (to the right or above) the handle -@slider-hoveredButton-background-color: #fff; // Background color of slider increment/decrement buttons when mouse is over slider but not over the buttons -@slider-focused-fullbar-background-color: #abd6ff; // Background color for part of bar of focused slider before (to the left or below) the handle -@slider-focused-remainingbar-background-color: #fff;// Background color for part of bar of focused slider after (to the right or above) the handle -@slider-button-hovered-background-color: #cfe5fa; // Background color of slider increment/decrement buttons when mouse is over the buttons -@slider-button-pressed-background-color: #abd6ff; // Background color of slider increment/decrement buttons while button is depressed +@slider-fullbar-background-color: @primary-color; // Background color for part of slider bar before (to the left or below) the handle +@slider-remainingbar-background-color: @container-background-color; // Background color for part of slider bar after (to the right or above) the handle +@slider-hovered-fullbar-background-color: @minor-selected-color; // Background color for part of bar of hovered slider before (to the left or below) the handle +@slider-hovered-remainingbar-background-color: @container-background-color; // Background color for part of bar of hovered slider after (to the right or above) the handle +@slider-hoveredButton-background-color: @container-background-color; // Background color of slider increment/decrement buttons when mouse is over slider but not over the buttons +@slider-focused-fullbar-background-color: @minor-selected-color; // Background color for part of bar of focused slider before (to the left or below) the handle +@slider-focused-remainingbar-background-color: @container-background-color; // Background color for part of bar of focused slider after (to the right or above) the handle +@slider-button-hovered-background-color: @primary-color; // Background color of slider increment/decrement buttons when mouse is over the buttons +@slider-button-pressed-background-color: @minor-selected-color; // Background color of slider increment/decrement buttons while button is depressed // Select, ComboBox -@select-dropdownitem-background-color: #fff; // Background color for items in the drop down list of a ComboBox/Select -@select-dropdownitem-hovered-background-color: #7dbefa; // Background color for the hovered item in the drop down list of a ComboBox/Select -@select-matchedtext-background-color: #abd6ff; // Background color of text in ComboBox drop down that matches typed in phrase +@select-dropdownitem-background-color: @container-background-color; // Background color for items in the drop down list of a ComboBox/Select +@select-dropdownitem-hovered-background-color: @pressed-background-color; // Background color for the hovered item in the drop down list of a ComboBox/Select +@select-matchedtext-background-color: @minor-selected-color; // Background color of text in ComboBox drop down that matches typed in phrase // Menus @menu-background-color: @popup-background-color; // Calendar -@calendar-background-color: #cfe5fa; -@calendar-currentmonth-background-color: #fff; // Background color for days of the current month -@calendar-adjacentmonth-background-color: #e9f4fe; // Background color used for days from previous or next month -@calendar-adjacentmonth-text-color: #769dc0; // Text color used for days from previous or next month -@calendar-date-pressed-border-color: #fff; // For some reason pressing a day of the month (as opposed to hovering it) makes the border go away, is this intentional? +@calendar-background-color: @primary-color; +@calendar-currentmonth-background-color: @container-background-color; // Background color for days of the current month +@calendar-adjacentmonth-background-color: @unfocused-clickable-color; // Background color used for days from previous or next month +@calendar-adjacentmonth-text-color: @base-border-color; // Text color used for days from previous or next month +@calendar-date-pressed-border-color: @container-background-color; // For some reason pressing a day of the month (as opposed to hovering it) makes the border go away, is this intentional? @calendar-date-pressed-background-color: @pressed-background-color; @calendar-date-selected-border-color: @selected-border-color; -@calendar-date-selected-background-color: #abd6ff; -@calendar-button-hovered-background-color: #e9f4fe; // for hover or next/previous year, and month drop down (TODO: border and background are built in to calendarArrows.png, can't control from here) -@calendar-button-hovered-border-color: #fff; // for hover or next/previous year, and month drop down -@calendar-button-pressed-background-color: #cfe5fa; +@calendar-date-selected-background-color: @minor-selected-color; +@calendar-button-hovered-background-color: @unfocused-clickable-color; // for hover or next/previous year, and month drop down (TODO: border and background are built in to calendarArrows.png, can't control from here) +@calendar-button-hovered-border-color: @container-background-color; // for hover or next/previous year, and month drop down +@calendar-button-pressed-background-color: @pressed-background-color; @calendar-button-pressed-border-color: @pressed-border-color; // ProgressBar -@progressbar-border-color: @popup-border-color; // Border color of progress bar -@progressbar-full-background-color:#abd6ff; // Background color for part of progress bar indicating amount completed -@progressbar-empty-background-color: #fff; // Background color for part of progress bar indicating amount remaining -@progressbar-text-color: @text-color; // Color of progress bar text (ex: "35%"). Must contrast with both empty and full background colors. +@progressbar-border-color: @popup-border-color; // Border color of progress bar +@progressbar-full-background-color:@minor-selected-color; // Background color for part of progress bar indicating amount completed +@progressbar-empty-background-color: @container-background-color; // Background color for part of progress bar indicating amount remaining +@progressbar-text-color: @text-color; // Color of progress bar text (ex: "35%"). Must contrast with both empty and full background colors. // TimePicker -@timepicker-minorvalue-background-color: #efefef; // For 3:15, 3:30, 3:45 but not 3:00 or 4:00 -@timepicker-minorvalue-text-color: #818181; -@timepicker-majorvalue-background-color: #e9f4fe; // For 3:00, 4:00, 5:00, etc. -@timepicker-value-hovered-background-color: #7dbefa; +@timepicker-minorvalue-background-color: @secondary-color; // For 3:15, 3:30, 3:45 but not 3:00 or 4:00 +@timepicker-minorvalue-text-color: darken(@secondary-color, 43); +@timepicker-majorvalue-background-color: @unfocused-clickable-color; // For 3:00, 4:00, 5:00, etc. +@timepicker-value-hovered-background-color: @pressed-background-color; @timepicker-value-hovered-text-color: @hovered-text-color; -@timepicker-arrow-hovered-background-color: #abd6ff; +@timepicker-arrow-hovered-background-color: @minor-selected-color; // ColorPalette -@colorpalette-background-color: #fff; +@colorpalette-background-color: @container-background-color; @swatch-border-color: @minor-border-color; @swatch-hovered-border-color: #000; @swatch-selected-border-color: #000; // Dialog -@dialog-underlay-color: #fff; // the thing that grays out the screen when a dialog is shown -@dialog-titlebar-border-color: #fff; // Inner border around the title sectionof a Dialog, inside the main border of the Dialog and the border between title and content -@dialog-titlebar-background-color: #abd6ff; +@dialog-underlay-color: @container-background-color; // the thing that grays out the screen when a dialog is shown +@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; // BorderContainer -@splitter-hovered-background-color: #cfe5fa; // Color of splitter when user hovers it, before mouse down -@splitter-dragged-background-color: #abd6ff; // Color of splitter while it's being dragged +@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 // Toolbar -@toolbar-button-checked-background-color: #fff; // a toggled-on button in the toolbar -@toolbar-combobutton-hovered-unhoveredsection-background-color: #f4ffff; // when user hovers a ComboButton in a Toolbar, the other half of the button turns this color +@toolbar-button-checked-background-color: @container-background-color; // a toggled-on button in the toolbar +@toolbar-combobutton-hovered-unhoveredsection-background-color: spin(saturate(lighten(@primary-color, 8), 19), -29); // when user hovers a ComboButton in a Toolbar, the other half of the button turns this color @toolbar-button-border-radius: 2px; // Rounded corner radius for buttons for buttons in toolbar // DnD -@dnd-avatar-background-color: #fff; // Background color of little Dialog-type box indicating dragged items +@dnd-avatar-background-color: @container-background-color; // Background color of little Dialog-type box indicating dragged items @dnd-avatar-header-background-color: #f58383; // Title bar for dragged items @dnd-avatar-candrop-header-background-color: #97e68d;// Title bar for dragged items when they can be dropped -@dnd-dropseparator-color: #769dc0; // Color of line indicating that user is about to drop between items A & B +@dnd-dropseparator-color: @base-border-color; // Color of line indicating that user is about to drop between items A & B // Document level -@document-text-color: #131313; // Text color for document itself (text outside of widgets) +@document-text-color: #131313; // Text color for document itself (text outside of widgets) @document-shadedsection-background-color: @bar-background-color;// background color used for <pre>, <code>, and table header rows -@document-border-color: #d3d3d3; // Border for <pre>, <code>, tables, etc. +@document-border-color: @disabled-color; // Border for <pre>, <code>, tables, etc. + +// Images +@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-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-tree-expand: "images/treeExpandImages.png"; +@image-tree-expand-ie6: "images/treeExpandImages8bit.png"; // Mixins diff --git a/lib/dijit/themes/dijit.css b/lib/dijit/themes/dijit.css index b6d57dca1..4c60bf371 100644 --- a/lib/dijit/themes/dijit.css +++ b/lib/dijit/themes/dijit.css @@ -39,6 +39,12 @@ #vertical-align: auto; /* makes TextBox,Button line up w/native counterparts on IE6 */ } +table.dijitInline { + /* To inline tables with a given width set */ + display:inline-table; + box-sizing: content-box; -moz-box-sizing: content-box; +} + .dijitHidden { /* To hide unselected panes in StackContainer etc. */ display: none !important; @@ -60,8 +66,8 @@ #display: inline; } -.dj_ie INPUT.dijitTextBox, -.dj_ie .dijitTextBox INPUT { +.dj_ie input.dijitTextBox, +.dj_ie .dijitTextBox input { font-size: 100%; } .dijitTextBox .dijitSpinnerButtonContainer, @@ -70,7 +76,7 @@ float: right; text-align: center; } -.dijitTextBox INPUT.dijitInputField { +.dijitTextBox input.dijitInputField { /* override unreasonable user styling of buttons and icons */ padding-left: 0 !important; padding-right: 0 !important; @@ -78,16 +84,6 @@ .dijitTextBox .dijitValidationContainer { display: none; } -.dijitInlineTable { - /* To inline tables with a given width set (otherwise, use dijitInline above) */ - display:inline-table; - display:inline-block; /* webkit and FF3 */ - #zoom: 1; /* set hasLayout:true to mimic inline-block */ - #display:inline; /* don't use .dj_ie since that increases the priority */ - box-sizing: content-box; -moz-box-sizing: content-box; - border:0; - padding:0; -} .dijitTeeny { font-size:1px; @@ -157,16 +153,16 @@ A11Y ****/ .dijit_a11y .dijitIcon, -.dijit_a11y DIV.dijitArrowButtonInner, /* is this only for Spinner? if so, it should be deleted */ -.dijit_a11y SPAN.dijitArrowButtonInner, -.dijit_a11y IMG.dijitArrowButtonInner, +.dijit_a11y div.dijitArrowButtonInner, /* is this only for Spinner? if so, it should be deleted */ +.dijit_a11y span.dijitArrowButtonInner, +.dijit_a11y img.dijitArrowButtonInner, .dijit_a11y .dijitCalendarIncrementControl, .dijit_a11y .dijitTreeExpando { /* hide icon nodes in high contrast mode; when necessary they will be replaced by character equivalents - * exception for INPUT.dijitArrowButtonInner, because the icon and character are controlled by the same node */ + * exception for input.dijitArrowButtonInner, because the icon and character are controlled by the same node */ display: none; } -.dijitSpinner DIV.dijitArrowButtonInner { +.dijitSpinner div.dijitArrowButtonInner { display: block; /* override previous rule */ } @@ -183,14 +179,16 @@ */ .dijit_a11y .dijitCalendarDateLabel { padding: 1px; + border: 0px !important; } .dijit_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel { - border-style: dotted !important; - border-width: 1px; + border-style: solid !important; + border-width: 1px !important; padding: 0; } .dijit_a11y .dijitCalendarDateTemplate { padding-bottom: 0.1em !important; /* otherwise bottom border doesn't appear on IE */ + border: 0px !important; } .dijit_a11y .dijitButtonNode { border: black outset medium !important; @@ -201,6 +199,10 @@ padding: 0 !important; } +.dijit_a11y .dijitButtonContents{ + margin: 0.15em; /* Margin needed to make focus outline visible */ +} + .dijit_a11y .dijitTextBoxReadOnly .dijitInputField, .dijit_a11y .dijitTextBoxReadOnly .dijitButtonNode { border-style: outset!important; @@ -246,6 +248,9 @@ } /* Buttons */ +.dj_gecko .dijit_a11y .dijitButtonDisabled .dijitButtonNode { + opacity: 0.5; +} .dijitToggleButton, .dijitButton, @@ -263,7 +268,7 @@ td.dijitButtonContents { display: table-cell; /* but don't affect Select, ComboButton */ } -.dijitButtonNode IMG { +.dijitButtonNode img { /* make text and images line up cleanly */ vertical-align:middle; /*margin-bottom:.2em;*/ @@ -331,7 +336,7 @@ td.dijitButtonContents { overflow: visible; } -DIV.dijitArrowButton { +div.dijitArrowButton { float: right; } @@ -351,14 +356,14 @@ DIV.dijitArrowButton { .dijitTextBoxDisabled { color: gray; } -.dj_webkit .dijitTextBoxDisabled INPUT { +.dj_webkit .dijitTextBoxDisabled input { color: #eee; /* because WebKit lightens disabled input/textarea no matter what color you specify */ } -.dj_webkit TEXTAREA.dijitTextAreaDisabled { +.dj_webkit textarea.dijitTextAreaDisabled { color: #333; /* because WebKit lightens disabled input/textarea no matter what color you specify */ } -.dj_gecko .dijitTextBoxReadOnly INPUT.dijitInputField, /* disable arrow and validation presentation INPUTs but allow real INPUT for text selection */ -.dj_gecko .dijitTextBoxDisabled INPUT { +.dj_gecko .dijitTextBoxReadOnly input.dijitInputField, /* disable arrow and validation presentation inputs but allow real input for text selection */ +.dj_gecko .dijitTextBoxDisabled input { -moz-user-input: none; /* prevent focus of disabled textbox buttons */ } @@ -377,14 +382,14 @@ DIV.dijitArrowButton { } /* rules for webkit to deal with fuzzy blue focus border */ -.dijitTextBox INPUT:focus { +.dijitTextBox input:focus { outline: none; /* blue fuzzy line looks wrong on combobox or something w/validation icon showing */ } .dijitTextBoxFocused { - outline: auto 5px -webkit-focus-ring-color; + outline: 5px -webkit-focus-ring-color; } -.dijitTextBox INPUT { +.dijitTextBox input { float: left; /* needed by IE to remove secret margin */ } .dijitInputInner { @@ -399,11 +404,11 @@ DIV.dijitArrowButton { margin-left: 0 !important; margin-right: 0 !important; } -.dijit_a11y .dijitTextBox INPUT { +.dijit_a11y .dijitTextBox input { margin: 0 !important; } -.dijitTextBoxError INPUT.dijitValidationInner, -.dijitTextBox INPUT.dijitArrowButtonInner { +.dijitTextBoxError input.dijitValidationInner, +.dijitTextBox input.dijitArrowButtonInner { /* <input> used to display arrow icon/validation icon, or in arrow character in high contrast mode. * The css below is a trick to hide the character in non-high-contrast mode */ @@ -415,26 +420,26 @@ DIV.dijitArrowButton { #letter-spacing: -5em !important; #text-align: right !important; } -.dj_ie .dijitTextBox INPUT, -.dj_ie INPUT.dijitTextBox { - overflow-y: visible; /* INPUTs need help expanding when padding is added or line-height is adjusted */ +.dj_ie .dijitTextBox input, +.dj_ie input.dijitTextBox { + overflow-y: visible; /* inputs need help expanding when padding is added or line-height is adjusted */ line-height: normal; /* strict mode */ } -.dj_ie7 .dijitTextBox INPUT.dijitValidationInner, -.dj_ie7 .dijitTextBox INPUT.dijitArrowButtonInner { +.dj_ie7 .dijitTextBox input.dijitValidationInner, +.dj_ie7 .dijitTextBox input.dijitArrowButtonInner { line-height: 86%; /* IE7 problem where the icon is vertically too low w/o this - real input stays at normal */ } -.dj_ie6 .dijitTextBox INPUT, -.dj_ie6 INPUT.dijitTextBox, -.dj_iequirks .dijitTextBox INPUT.dijitValidationInner, -.dj_iequirks .dijitTextBox INPUT.dijitArrowButtonInner, -.dj_iequirks .dijitTextBox INPUT.dijitSpinnerButtonInner, -.dj_iequirks .dijitTextBox INPUT.dijitInputInner, -.dj_iequirks INPUT.dijitTextBox { +.dj_ie6 .dijitTextBox input, +.dj_ie6 input.dijitTextBox, +.dj_iequirks .dijitTextBox input.dijitValidationInner, +.dj_iequirks .dijitTextBox input.dijitArrowButtonInner, +.dj_iequirks .dijitTextBox input.dijitSpinnerButtonInner, +.dj_iequirks .dijitTextBox input.dijitInputInner, +.dj_iequirks input.dijitTextBox { line-height: 100%; /* IE7 problem where the icon is vertically way too low w/o this */ } -.dijit_a11y INPUT.dijitValidationInner, -.dijit_a11y INPUT.dijitArrowButtonInner { +.dijit_a11y input.dijitValidationInner, +.dijit_a11y input.dijitArrowButtonInner { /* (in high contrast mode) revert rules from above so character displays */ text-indent: 0 !important; width: 1em !important; @@ -495,7 +500,7 @@ DIV.dijitArrowButton { } .dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer, .dijit_a11y .dijitSpinner .dijitArrowButtonInner, -.dijit_a11y .dijitSpinnerButtonContainer INPUT { +.dijit_a11y .dijitSpinnerButtonContainer input { width: 1em !important; } .dijit_a11y .dijitSpinner .dijitArrowButtonInner { @@ -620,8 +625,8 @@ DIV.dijitArrowButton { overflow: hidden; } -.dijitCheckBox INPUT, -.dijitRadio INPUT { +.dijitCheckBox input, +.dijitRadio input { margin: 0; padding: 0; display: block; @@ -649,6 +654,11 @@ DIV.dijitArrowButton { height: auto; } +.dijit_a11y .dijitFocusedLabel { + /* for checkboxes or radio buttons in high contrast mode, use border rather than outline to indicate focus (outline does not work in FF)*/ + border: 1px dotted; + outline: 0px !important; +} /**** dijit.ProgressBar @@ -683,7 +693,7 @@ DIV.dijitArrowButton { right:0; margin:0; padding:0; - width:auto; + width: 100%; /* needed for IE/quirks */ height:auto; background-color:#aaa; background-attachment: fixed; @@ -775,10 +785,10 @@ DIV.dijitArrowButton { overflow: hidden; } -body .dijitAlignTop, -body .dijitAlignBottom, -body .dijitAlignLeft, -body .dijitAlignRight { +.dijitAlignTop, +.dijitAlignBottom, +.dijitAlignLeft, +.dijitAlignRight { position: absolute; overflow: hidden; } @@ -786,7 +796,7 @@ body .dijitAlignRight { body .dijitAlignClient { position: absolute; } /* - * BorderContaienr + * BorderContainer * * .dijitBorderContainer is a stylized layout where panes have border and margin. * .dijitBorderContainerNoGutter is a raw layout. @@ -860,13 +870,13 @@ body .dijitAlignClient { position: absolute; } height: 7px; border-top:1px; border-bottom:1px; - cursor: ns-resize; + cursor: row-resize; } .dijitSplitterV { width: 7px; border-left:1px; border-right:1px; - cursor: ew-resize; + cursor: col-resize; } .dijitSplitContainer { position: relative; @@ -886,8 +896,6 @@ body .dijitAlignClient { position: absolute; } .dijitSplitContainerSizerV { position:absolute; font-size: 1px; - cursor: move; - cursor: w-resize; background-color: ThreeDFace; border: 1px solid; border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight; @@ -916,11 +924,12 @@ body .dijitAlignClient { position: absolute; } margin: 0; } -.dj_ie .dijitSplitterV, .dijitSplitContainerVirtualSizerH { - cursor: w-resize; +.dijitSplitContainerSizerH, .dijitSplitContainerVirtualSizerH { + cursor: col-resize; } -.dj_ie .dijitSplitterH, .dijitSplitContainerSizerV, .dijitSplitContainerVirtualSizerV { - cursor: n-resize; + +.dijitSplitContainerSizerV, .dijitSplitContainerVirtualSizerV { + cursor: row-resize; } .dijit_a11y .dijitSplitterH { @@ -947,6 +956,11 @@ body .dijitAlignClient { position: absolute; } overflow: hidden; } +.dijitContentPaneLoading .dijitIconLoading, +.dijitContentPaneError .dijitIconError { + margin-right: 9px; +} + /* TitlePane */ .dijitTitlePane { @@ -1040,13 +1054,13 @@ body .dijitAlignClient { position: absolute; } .dijitPaletteTable td { padding: 0; } -.dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg { +.dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg { /* hovered color swatch */ border: 1px solid #000; } -.dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg, -.dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg { +.dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg, +.dijitColorPalette .dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg { border: 2px solid #000; margin: 1px 0; /* reduce margin to compensate for increased border */ } @@ -1103,6 +1117,10 @@ body .dijitAlignClient { position: absolute; } vertical-align: middle; } +.dijitCalendarYearLabel { + white-space: nowrap; /* make sure previous, current, and next year appear on same row */ +} + .dijitCalendarNextYear { margin:0 0 0 0.55em; } @@ -1206,7 +1224,7 @@ body .dijitAlignClient { position: absolute; } border: 1px dotted black !important; } .dj_ff3 .dijit_a11y .dijitMenuItem td { - padding: none !important; + padding: 0 !important; background:none !important; } .dijit_a11y .dijitMenuItemSelected .dijitMenuItemLabel { @@ -1294,6 +1312,7 @@ body .dijitAlignClient { position: absolute; } width: 50000px; display: block; position: relative; + text-align: left; /* just in case ancestor has non-standard setting */ } .dijitTabListWrapper { overflow: hidden; @@ -1334,7 +1353,7 @@ body .dijitAlignClient { position: absolute; } border-right: 0; } -DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled { +div.dijitTabDisabled, .dj_ie div.dijitTabDisabled { cursor: auto; } @@ -1568,7 +1587,7 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled { right:50%; } -.dijit_a11y DIV.dijitSliderImageHandle, +.dijit_a11y div.dijitSliderImageHandle, .dijitSliderImageHandle { margin:0; padding:0; @@ -1816,7 +1835,7 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled { } /* + and - Slider buttons: override theme settings to display icons */ -.dijit_a11y .dijitSlider .dijitSliderButtonContainer DIV { +.dijit_a11y .dijitSlider .dijitSliderButtonContainer div { font-family: monospace; /* otherwise hyphen is larger and more vertically centered */ font-size: 1em; line-height: 1em; diff --git a/lib/dijit/themes/dijit_rtl.css b/lib/dijit/themes/dijit_rtl.css index 8ef3a285d..9c1b69c0d 100644 --- a/lib/dijit/themes/dijit_rtl.css +++ b/lib/dijit/themes/dijit_rtl.css @@ -11,7 +11,7 @@ /* Button */ -.dj_iequirks .dijitComboButtonRtl BUTTON { +.dj_iequirks .dijitComboButtonRtl button { /* workaround bug where label invisible (themeTesterQuirk.html?dir=rtl) */ float:left; } @@ -31,6 +31,11 @@ left: auto; } +.dj_ie7 .dijitInputContainer { + /* to fix wrong text alignment in rtl text box in IE */ + display: inline-block; +} + .dijitTextBoxRtl .dijitSpinnerButtonContainer, .dijitTextBoxRtl .dijitValidationContainer, .dijitTextBoxRtl .dijitArrowButtonContainer { @@ -87,13 +92,18 @@ } /* ContentPane*/ -.dijitRtl .dijitContentPaneLoading, .dijitRtl .dijitContentPaneError { - background-position:right; - padding-right:25px; + +.dijitRtl .dijitContentPaneLoading .dijitIconLoading, +.dijitRtl .dijitContentPaneError .dijitIconError { + margin-right: 0; + margin-left: 9px; } /* TabContainer */ +.dijitTabControllerRtl .nowrapTabStrip { + text-align: right; /* just in case ancestor has non-standard setting */ +} .dijitTabRtl .dijitTabCloseButton { margin-left: 0; margin-right: 1em; @@ -115,4 +125,4 @@ /* Select */ .dijitSelectRtl .dijitButtonContents { text-align: right; -}
\ No newline at end of file +} diff --git a/lib/dijit/themes/nihilo/Calendar.css b/lib/dijit/themes/nihilo/Calendar.css index 2c9248b08..55bb2ccae 100644 --- a/lib/dijit/themes/nihilo/Calendar.css +++ b/lib/dijit/themes/nihilo/Calendar.css @@ -119,10 +119,12 @@ margin:0; padding:0.4em 0 0.25em 0; text-align:center; + font-size: 1.17em; } .nihilo .dijitCalendarSelectedYear { /* label for selected year */ + font-weight:bolder; color:black; padding:0.2em; padding-bottom:0.1em; @@ -156,4 +158,4 @@ .nihilo .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover { background-color: #ffe284; color: #243C5F; -}
\ No newline at end of file +} diff --git a/lib/dijit/themes/nihilo/Menu.css b/lib/dijit/themes/nihilo/Menu.css index cad469863..1a8ec139e 100644 --- a/lib/dijit/themes/nihilo/Menu.css +++ b/lib/dijit/themes/nihilo/Menu.css @@ -29,6 +29,7 @@ } .nihilo .dijitMenuPassive .dijitMenuItemHover, +.nihilo .dijitComboBoxMenu .dijitMenuItemHover, .nihilo .dijitMenuItemSelected { background-color: #ffe284; /* #95a0b0; #555555; #aaaaaa; #646464; #60a1ea; #848484; */ color: #243C5F; diff --git a/lib/dijit/themes/nihilo/form/Button.css b/lib/dijit/themes/nihilo/form/Button.css index 0be9ea4a3..90e1ee2cc 100644 --- a/lib/dijit/themes/nihilo/form/Button.css +++ b/lib/dijit/themes/nihilo/form/Button.css @@ -52,8 +52,8 @@ background:#fafafa url("../images/buttonDisabled.png") top repeat-x; opacity: 0.60; } -.dj_ie6 .nihilo .dijitReadOnly INPUT, -.dj_ie7 .nihilo .dijitReadOnly INPUT, +.dj_ie6 .nihilo .dijitReadOnly input, +.dj_ie7 .nihilo .dijitReadOnly input, .dj_ie6 .nihilo .dijitComboButtonDisabled .dijitButtonText, .dj_ie7 .nihilo .dijitComboButtonDisabled .dijitButtonText { /* opacity doesn't work on table node in IE, work around here */ diff --git a/lib/dijit/themes/nihilo/form/Common.css b/lib/dijit/themes/nihilo/form/Common.css index 65dddc637..b67195f4b 100644 --- a/lib/dijit/themes/nihilo/form/Common.css +++ b/lib/dijit/themes/nihilo/form/Common.css @@ -10,7 +10,7 @@ dijit.form.ComboBox (partial) ****/ -.nihilo .dijitInputContainer INPUT, +.nihilo .dijitInputContainer input, .nihilo .dijitTextBox { margin: 0 0.1em; } diff --git a/lib/dijit/themes/nihilo/images/tooltipConnectorRight.png b/lib/dijit/themes/nihilo/images/tooltipConnectorRight.png Binary files differindex ed6efc46c..3d62dcd40 100644 --- a/lib/dijit/themes/nihilo/images/tooltipConnectorRight.png +++ b/lib/dijit/themes/nihilo/images/tooltipConnectorRight.png diff --git a/lib/dijit/themes/soria/Calendar.css b/lib/dijit/themes/soria/Calendar.css index 78572dab0..f77acd2eb 100644 --- a/lib/dijit/themes/soria/Calendar.css +++ b/lib/dijit/themes/soria/Calendar.css @@ -119,10 +119,12 @@ margin:0; padding:0.4em 0 0.25em 0; text-align:center; + font-size: 1.17em; } .soria .dijitCalendarSelectedYear { /* label for selected year */ + font-weight:bolder; color:black; padding:0.2em; padding-bottom:0.1em; @@ -156,4 +158,4 @@ .soria .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover { background-color: #d9e6f9; color: #243C5F; -}
\ No newline at end of file +} diff --git a/lib/dijit/themes/soria/Menu.css b/lib/dijit/themes/soria/Menu.css index 4d9d06811..ebd2e2885 100644 --- a/lib/dijit/themes/soria/Menu.css +++ b/lib/dijit/themes/soria/Menu.css @@ -29,6 +29,7 @@ } .soria .dijitMenuPassive .dijitMenuItemHover, +.soria .dijitComboBoxMenu .dijitMenuItemHover, .soria .dijitMenuItemSelected { background-color: #d9e6f9; /* #95a0b0; #555555; #aaaaaa; #646464; #60a1ea; #848484; */ color: #243C5F; diff --git a/lib/dijit/themes/soria/form/Button.css b/lib/dijit/themes/soria/form/Button.css index 6b813a6dd..9efe7ead8 100644 --- a/lib/dijit/themes/soria/form/Button.css +++ b/lib/dijit/themes/soria/form/Button.css @@ -44,8 +44,8 @@ background:#c3d3e5 url("../images/buttonDisabled.png") top repeat-x; opacity: 0.60; } -.dj_ie6 .soria .dijitReadOnly INPUT, -.dj_ie7 .soria .dijitReadOnly INPUT, +.dj_ie6 .soria .dijitReadOnly input, +.dj_ie7 .soria .dijitReadOnly input, .dj_ie6 .soria .dijitComboButtonDisabled .dijitButtonText, .dj_ie7 .soria .dijitComboButtonDisabled .dijitButtonText { /* opacity doesn't work on table node in IE, work around here */ diff --git a/lib/dijit/themes/soria/form/Common.css b/lib/dijit/themes/soria/form/Common.css index 8e3688e82..42dfefa2e 100644 --- a/lib/dijit/themes/soria/form/Common.css +++ b/lib/dijit/themes/soria/form/Common.css @@ -10,7 +10,7 @@ dijit.form.ComboBox (partial) ****/ -.soria .dijitInputContainer INPUT, +.soria .dijitInputContainer input, .soria .dijitTextBox { margin: 0 0.1em; } diff --git a/lib/dijit/themes/soria/images/tooltipConnectorRight.png b/lib/dijit/themes/soria/images/tooltipConnectorRight.png Binary files differindex 64190eef7..3d62dcd40 100644 --- a/lib/dijit/themes/soria/images/tooltipConnectorRight.png +++ b/lib/dijit/themes/soria/images/tooltipConnectorRight.png diff --git a/lib/dijit/themes/tundra/Calendar.css b/lib/dijit/themes/tundra/Calendar.css index 5fef68ee1..d650d4f57 100644 --- a/lib/dijit/themes/tundra/Calendar.css +++ b/lib/dijit/themes/tundra/Calendar.css @@ -120,10 +120,12 @@ margin:0; padding:0.4em 0 0.25em 0; text-align:center; + font-size: 1.17em; } .tundra .dijitCalendarSelectedYear { /* label for selected year */ + font-weight:bolder; color:black; padding:0.2em; padding-bottom:0.1em; @@ -156,4 +158,4 @@ .tundra .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover { background-color: #3559ac; color:#fff; -}
\ No newline at end of file +} diff --git a/lib/dijit/themes/tundra/Common.css b/lib/dijit/themes/tundra/Common.css index c339263e1..eb3e341f7 100644 --- a/lib/dijit/themes/tundra/Common.css +++ b/lib/dijit/themes/tundra/Common.css @@ -22,12 +22,13 @@ .tundra.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader {background-color: #97e68d; background-image: url(images/dndMove.png); background-repeat: no-repeat; background-position: 2px center;} .tundra.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader {background-color: #97e68d; background-image: url(images/dndCopy.png); background-repeat: no-repeat; background-position: 2px center;} -.tundra .dijitContentPaneLoading { +.tundra .dijitIconLoading { background:url('images/loading.gif') no-repeat left center; - padding-left:25px; + width: 24px; + height: 24px; } - -.tundra .dijitContentPaneError { +.tundra .dijitIconError { background:url('images/warning.png') no-repeat left center; - padding-left:25px; + width: 16px; + height: 16px; } diff --git a/lib/dijit/themes/tundra/Menu.css b/lib/dijit/themes/tundra/Menu.css index 6229b1773..884bd490e 100644 --- a/lib/dijit/themes/tundra/Menu.css +++ b/lib/dijit/themes/tundra/Menu.css @@ -27,6 +27,7 @@ } .tundra .dijitMenuPassive .dijitMenuItemHover, +.tundra .dijitComboBoxMenu .dijitMenuItemHover, .tundra .dijitMenuItemSelected { background-color: #3559ac; color:#fff; diff --git a/lib/dijit/themes/tundra/form/Common.css b/lib/dijit/themes/tundra/form/Common.css index 201368639..96899e138 100644 --- a/lib/dijit/themes/tundra/form/Common.css +++ b/lib/dijit/themes/tundra/form/Common.css @@ -10,7 +10,7 @@ dijit.form.ComboBox (partial) ****/ -.tundra .dijitInputContainer INPUT, +.tundra .dijitInputContainer input, .tundra .dijitTextBox { margin: 0 0.1em; } diff --git a/lib/dijit/themes/tundra/images/checkmark.gif b/lib/dijit/themes/tundra/images/checkmark.gif Binary files differindex ae6faa95a..ae6faa95a 100644..100755 --- a/lib/dijit/themes/tundra/images/checkmark.gif +++ b/lib/dijit/themes/tundra/images/checkmark.gif diff --git a/lib/dijit/themes/tundra/images/checkmarkNoBorder.gif b/lib/dijit/themes/tundra/images/checkmarkNoBorder.gif Binary files differindex 324bfb3cd..324bfb3cd 100644..100755 --- a/lib/dijit/themes/tundra/images/checkmarkNoBorder.gif +++ b/lib/dijit/themes/tundra/images/checkmarkNoBorder.gif diff --git a/lib/dijit/themes/tundra/images/checkmarkNoBorder.png b/lib/dijit/themes/tundra/images/checkmarkNoBorder.png Binary files differindex 9cec0c0aa..9cec0c0aa 100644..100755 --- a/lib/dijit/themes/tundra/images/checkmarkNoBorder.png +++ b/lib/dijit/themes/tundra/images/checkmarkNoBorder.png diff --git a/lib/dijit/themes/tundra/images/circleIcon.gif b/lib/dijit/themes/tundra/images/circleIcon.gif Binary files differindex d582290a5..d582290a5 100644..100755 --- a/lib/dijit/themes/tundra/images/circleIcon.gif +++ b/lib/dijit/themes/tundra/images/circleIcon.gif diff --git a/lib/dijit/themes/tundra/images/circleIcon.png b/lib/dijit/themes/tundra/images/circleIcon.png Binary files differindex 6f059e61e..6f059e61e 100644..100755 --- a/lib/dijit/themes/tundra/images/circleIcon.png +++ b/lib/dijit/themes/tundra/images/circleIcon.png diff --git a/lib/dijit/themes/tundra/images/dojoTundraGradientBg.gif b/lib/dijit/themes/tundra/images/dojoTundraGradientBg.gif Binary files differindex 0da12393b..0da12393b 100644..100755 --- a/lib/dijit/themes/tundra/images/dojoTundraGradientBg.gif +++ b/lib/dijit/themes/tundra/images/dojoTundraGradientBg.gif diff --git a/lib/dijit/themes/tundra/images/i.gif b/lib/dijit/themes/tundra/images/i.gif Binary files differindex ebd95a7aa..ebd95a7aa 100644..100755 --- a/lib/dijit/themes/tundra/images/i.gif +++ b/lib/dijit/themes/tundra/images/i.gif diff --git a/lib/dijit/themes/tundra/images/i_half.gif b/lib/dijit/themes/tundra/images/i_half.gif Binary files differindex 2947c4fa1..2947c4fa1 100644..100755 --- a/lib/dijit/themes/tundra/images/i_half.gif +++ b/lib/dijit/themes/tundra/images/i_half.gif diff --git a/lib/dijit/themes/tundra/images/loading.gif b/lib/dijit/themes/tundra/images/loading.gif Binary files differindex 6e7c8e5ec..6e7c8e5ec 100644..100755 --- a/lib/dijit/themes/tundra/images/loading.gif +++ b/lib/dijit/themes/tundra/images/loading.gif diff --git a/lib/dijit/themes/tundra/images/noX.gif b/lib/dijit/themes/tundra/images/noX.gif Binary files differindex 4a16dc795..4a16dc795 100644..100755 --- a/lib/dijit/themes/tundra/images/noX.gif +++ b/lib/dijit/themes/tundra/images/noX.gif diff --git a/lib/dijit/themes/tundra/images/preciseSliderThumb.gif b/lib/dijit/themes/tundra/images/preciseSliderThumb.gif Binary files differindex 15d4879cb..15d4879cb 100644..100755 --- a/lib/dijit/themes/tundra/images/preciseSliderThumb.gif +++ b/lib/dijit/themes/tundra/images/preciseSliderThumb.gif diff --git a/lib/dijit/themes/tundra/images/sliderFullFocus.png b/lib/dijit/themes/tundra/images/sliderFullFocus.png Binary files differindex ee193560d..ee193560d 100644..100755 --- a/lib/dijit/themes/tundra/images/sliderFullFocus.png +++ b/lib/dijit/themes/tundra/images/sliderFullFocus.png diff --git a/lib/dijit/themes/tundra/images/sliderFullVerticalFocus.png b/lib/dijit/themes/tundra/images/sliderFullVerticalFocus.png Binary files differindex 3ab37e6cc..3ab37e6cc 100644..100755 --- a/lib/dijit/themes/tundra/images/sliderFullVerticalFocus.png +++ b/lib/dijit/themes/tundra/images/sliderFullVerticalFocus.png diff --git a/lib/dijit/themes/tundra/images/tabClose.gif b/lib/dijit/themes/tundra/images/tabClose.gif Binary files differindex 2cb0ee1fa..2cb0ee1fa 100644..100755 --- a/lib/dijit/themes/tundra/images/tabClose.gif +++ b/lib/dijit/themes/tundra/images/tabClose.gif diff --git a/lib/dijit/themes/tundra/images/tabCloseHover.gif b/lib/dijit/themes/tundra/images/tabCloseHover.gif Binary files differindex f59471e6e..f59471e6e 100644..100755 --- a/lib/dijit/themes/tundra/images/tabCloseHover.gif +++ b/lib/dijit/themes/tundra/images/tabCloseHover.gif diff --git a/lib/dijit/themes/tundra/images/tabHover.gif b/lib/dijit/themes/tundra/images/tabHover.gif Binary files differindex 471e0eee2..471e0eee2 100644..100755 --- a/lib/dijit/themes/tundra/images/tabHover.gif +++ b/lib/dijit/themes/tundra/images/tabHover.gif diff --git a/lib/dijit/themes/tundra/images/treeExpand_minus.gif b/lib/dijit/themes/tundra/images/treeExpand_minus.gif Binary files differindex 597778237..597778237 100644..100755 --- a/lib/dijit/themes/tundra/images/treeExpand_minus.gif +++ b/lib/dijit/themes/tundra/images/treeExpand_minus.gif diff --git a/lib/dijit/themes/tundra/images/treeExpand_plus.gif b/lib/dijit/themes/tundra/images/treeExpand_plus.gif Binary files differindex 2b96a5552..2b96a5552 100644..100755 --- a/lib/dijit/themes/tundra/images/treeExpand_plus.gif +++ b/lib/dijit/themes/tundra/images/treeExpand_plus.gif diff --git a/lib/dijit/themes/tundra/images/validationInputBg.gif b/lib/dijit/themes/tundra/images/validationInputBg.gif Binary files differindex 5a9916a66..5a9916a66 100644..100755 --- a/lib/dijit/themes/tundra/images/validationInputBg.gif +++ b/lib/dijit/themes/tundra/images/validationInputBg.gif |
