diff options
Diffstat (limited to 'js/dojo-1.7.2/dijit/themes/claro')
121 files changed, 7438 insertions, 0 deletions
diff --git a/js/dojo-1.7.2/dijit/themes/claro/Calendar.css b/js/dojo-1.7.2/dijit/themes/claro/Calendar.css new file mode 100644 index 0000000..a0f9597 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Calendar.css @@ -0,0 +1,284 @@ +/* Calendar + * + * Styling Calendar mainly includes: + * + * 1. Calendar container + * .dijitCalendar - main container + * .dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active + * + * 2. Month + * .dijitCalendarMonthContainer + * .dijitCalendarMonthLabel + * .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month + * .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active + * + * 3. Date + * .dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S + * .dijitCalendarDateTemplate - date label wrapper + * .dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month + * .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date + * .dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date + * .dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active + * + * 4. Year + * .dijitCalendarYearContainer + * .dijitCalendarYearLabel + * .dijitCalendarPreviousYear /.dijitCalendarNextYear + * .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active + * + * 5. Dropdown Month Menu + * .dijitCalendarMonthMenu - menu container + * .dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item + * .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state + */ +.claro .dijitCalendar { + border: solid 1px #b5bcc7; + background-color: #cfe5fa; + background-image: url("images/calendarContainerImages.png"); + background-position: 0 -448px; + background-repeat: repeat-x; + text-align: center; + padding: 6px 5px 3px 5px; + -moz-border-radius: 4px; + border-radius: 4px; + border-collapse: separate; +} +.dj_ie6 .claro .dijitCalendar { + background-image: none; +} +.claro .dijitCalendar img { + border: none; +} +.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 #759dc0; +} +.claro .dijitCalendarMonthContainer th { + text-align: center; + padding-bottom: 4px; + vertical-align: middle; +} +.claro .dijitCalendarMonthLabel { + color: #000000; + font-size: 1.091em; + padding: 0 4px; +} +/* next/previous month arrows */ +.claro .dijitCalendarIncrementControl { + width: 18px; + height: 16px; + background-image: url("images/calendarArrows.png"); + background-repeat: no-repeat; +} +.dj_ie6 .claro .dijitCalendarIncrementControl { + background-image: url("images/calendarArrows8bit.png"); +} +.claro .dijitCalendarIncrease { + background-position: -18px 0; +} +.claro .dijitCalendarArrowHover .dijitCalendarDecrease, .claro .dijitCalendarArrow:hover .dijitCalendarDecrease { + background-position: -36px 0; +} +.claro .dijitCalendarArrowHover .dijitCalendarIncrease, .claro .dijitCalendarArrow:hover .dijitCalendarIncrease { + background-position: -55px 0; +} +.claro .dijitCalendarArrowActive .dijitCalendarDecrease, .claro .dijitCalendarArrow:active .dijitCalendarDecrease { + background-position: -72px 0; +} +.claro .dijitCalendarArrowActive .dijitCalendarIncrease, .claro .dijitCalendarArrow:active .dijitCalendarIncrease { + background-position: -91px 0; +} +.claro .dijitA11ySideArrow { + /* text +/- labels instead of arrow icons, for high contrast mode */ + + display: none; +} +.claro .dijitCalendarDayLabelTemplate { + padding-bottom: 0; + text-align: center; + border-bottom: 1px solid #b5bcc7; + 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; + background-image: url("images/calendarContainerImages.png"); + background-position: 0 0; + background-repeat: repeat-x; + border-bottom: 1px solid #d3d3d3; + padding-top: 0; + font-size: 0.909em; + font-family: Arial; + font-weight: bold; + letter-spacing: .05em; + text-align: center; + color: #000000; +} +.dj_ie6 .claro .dijitCalendarDateTemplate { + background-image: none; +} +.claro .dijitCalendarPreviousMonth, .claro .dijitCalendarNextMonth { + background-color: #e5f2fe; + background-image: none; + border-bottom: solid 1px #d3d3d3; + /* todo: redundant with above .dijitCalendarDateTemplate rule */ +} +.claro .dijitCalendarDateTemplate .dijitCalendarDateLabel { + text-decoration: none; + display: block; + padding: 3px 5px 3px 4px; + border: solid 1px #ffffff; + /* intentionally matches background-color, no visible border until hover/selection */ + + background-color: rgba(171, 212, 251, 0); + /* transparent causes black-flash animation problem on webkit */ + + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + transition-property: background-color, border; + -webkit-transition-duration: 0.35s; + -moz-transition-duration: 0.35s; + transition-duration: 0.35s; +} +.claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel, .claro .dijitCalendarNextMonth .dijitCalendarDateLabel { + color: #759dc0; + border-color: #e5f2fe; + /* intentionally matches background-color, no visible border until hover/selection */ + +} +.claro .dijitCalendarYearContainer { + vertical-align: middle; +} +.claro .dijitCalendarYearControl { + padding: 1px 2px 2px 2px; +} +.claro .dijitCalendarYearLabel { + padding: 2px 0 0 0; + margin: 0; + font-size: 1.17em; +} +.claro .dijitCalendarYearLabel span { + /* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */ + + vertical-align: middle; +} +.claro .dijitCalendarSelectedYear { + padding: 0 3px; +} +.claro .dijitCalendarNextYear, .claro .dijitCalendarPreviousYear { + padding: 1px 6px 1px 6px; + font-size: 0.909em; +} +.claro .dijitCalendarSelectedYear { + font-size: 1.091em; + color: #000000; +} +/* End Normal Calendar Style */ +/* Hovered Calendar Style */ +.claro .dijitCalendarHoveredDate .dijitCalendarDateLabel, .claro .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel { + background-color: #abd6ff; + border: solid 1px #759dc0; + color: #000000; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; +} +.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: #e5f2fe; +} +/* End Hovered Calendar Style */ +/* Active Calendar Style */ +.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: #7dbdfa; +} +.claro .dijitCalendarActiveDate .dijitCalendarDateLabel, .claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel { + background-image: url("images/calendarContainerImages.png"); + background-position: 0 -300px; + background-color: #7dbdfa; + border: solid 1px #ffffff; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; +} +.dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel { + background-image: none; +} +/* End Active Calendar Style */ +/* Selected Calendar Style */ +.claro .dijitCalendarSelectedDate .dijitCalendarDateLabel { + color: #000000; + background-color: #abd6ff; + border-color: #759dc0; +} +/* End Selected Calendar Style */ +/* Disabled Calendar Style*/ +.claro .dijitCalendarDisabledDate .dijitCalendarDateLabel { + color: #818181; + text-decoration: line-through; +} +/* End Disabled Calendar Style */ +/* Styling for month DropDownButton */ +.claro .dijitCalendar .dijitDropDownButton { + margin: 0; +} +.claro .dijitCalendar .dijitButtonText { + padding: 1px 0 3px; + margin-right: -4px; +} +.claro .dijitCalendar .dijitDropDownButton .dijitButtonNode { + background-color: transparent; + background-image: none; + padding: 0 3px 0 2px; + border: solid 1px #b5bcc7; + -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + box-shadow: 0 0 0 rgba(0, 0, 0, 0); +} +.claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode, .claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode { + background-color: #e5f2fe; + border: solid 1px #ffffff; +} +/* Styling for month drop down list */ +.claro .dijitCalendarMonthMenu { + border-color: #759dc0; + background-color: #ffffff; + text-align: center; + background-image: none; +} +.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel { + border-top: solid 1px #ffffff; + /* intentionally invisible until hover */ + + border-bottom: solid 1px #ffffff; + padding: 2px 0; +} +.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover, .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover { + background-color: #abd6ff; + border-color: #759dc0; + border-width: 1px 0; + background-image: url("images/commonHighlight.png"); + background-repeat: repeat-x; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Calendar.less b/js/dojo-1.7.2/dijit/themes/claro/Calendar.less new file mode 100644 index 0000000..55decd3 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Calendar.less @@ -0,0 +1,279 @@ +/* Calendar + * + * Styling Calendar mainly includes: + * + * 1. Calendar container + * .dijitCalendar - main container + * .dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active + * + * 2. Month + * .dijitCalendarMonthContainer + * .dijitCalendarMonthLabel + * .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month + * .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active + * + * 3. Date + * .dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S + * .dijitCalendarDateTemplate - date label wrapper + * .dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month + * .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date + * .dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date + * .dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active + * + * 4. Year + * .dijitCalendarYearContainer + * .dijitCalendarYearLabel + * .dijitCalendarPreviousYear /.dijitCalendarNextYear + * .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active + * + * 5. Dropdown Month Menu + * .dijitCalendarMonthMenu - menu container + * .dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item + * .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state + */ + +@import "variables"; + +.claro .dijitCalendar { + border:solid 1px @border-color; + background-color: @calendar-background-color; + background-image:url(@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; +} +.claro .dijitCalendar img { + border:none; +} +.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: @hovered-background-color; + border:solid 1px @hovered-border-color; +} +.claro .dijitCalendarMonthContainer th { + text-align:center; + padding-bottom:4px; + vertical-align:middle; +} +.claro .dijitCalendarMonthLabel { + color: @text-color; + font-size: 1.091em; + padding: 0 4px; +} + +/* next/previous month arrows */ +.claro .dijitCalendarIncrementControl { + width:18px; + height:16px; + background-image: url(@image-calendar-arrows); + background-repeat: no-repeat; +} +.dj_ie6 .claro .dijitCalendarIncrementControl { + background-image: url(@image-calendar-arrows-ie6); +} +.claro .dijitCalendarIncrease { + background-position:-18px 0; +} +.claro .dijitCalendarArrowHover .dijitCalendarDecrease, +.claro .dijitCalendarArrow:hover .dijitCalendarDecrease { + background-position:-36px 0; +} +.claro .dijitCalendarArrowHover .dijitCalendarIncrease, +.claro .dijitCalendarArrow:hover .dijitCalendarIncrease { + background-position:-55px 0; +} +.claro .dijitCalendarArrowActive .dijitCalendarDecrease, +.claro .dijitCalendarArrow:active .dijitCalendarDecrease { + background-position:-72px 0; +} +.claro .dijitCalendarArrowActive .dijitCalendarIncrease, +.claro .dijitCalendarArrow:active .dijitCalendarIncrease { + background-position:-91px 0; +} +.claro .dijitA11ySideArrow { + /* text +/- labels instead of arrow icons, for high contrast mode */ + display: none; +} + +.claro .dijitCalendarDayLabelTemplate { + padding-bottom:0; + text-align:center; + border-bottom:1px solid @border-color; + 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(@image-calendar-container); + background-position:0 0; + background-repeat:repeat-x; + border-bottom: 1px solid @minor-border-color; + padding-top:0; + font-size:0.909em; + font-family: Arial; + font-weight:bold; + letter-spacing:.05em; + text-align:center; + color: @text-color; +} +.dj_ie6 .claro .dijitCalendarDateTemplate { + background-image: none; +} +.claro .dijitCalendarPreviousMonth, +.claro .dijitCalendarNextMonth { + background-color: @calendar-adjacentmonth-background-color; + background-image:none; + border-bottom:solid 1px @minor-border-color; /* todo: redundant with above .dijitCalendarDateTemplate rule */ +} +.claro .dijitCalendarDateTemplate .dijitCalendarDateLabel { + text-decoration:none; + display:block; + padding:3px 5px 3px 4px; + border:solid 1px @calendar-currentmonth-background-color; /* intentionally matches background-color, no visible border until hover/selection */ + background-color:rgba(171,212,251,0); /* transparent causes black-flash animation problem on webkit */ + .transition-property(background-color, border); + .transition-duration(.35s); +} +.claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel, +.claro .dijitCalendarNextMonth .dijitCalendarDateLabel{ + color: @calendar-adjacentmonth-text-color; + border-color: @calendar-adjacentmonth-background-color; /* intentionally matches background-color, no visible border until hover/selection */ +} + +.claro .dijitCalendarYearContainer { + vertical-align:middle; +} +.claro .dijitCalendarYearControl { + padding: 1px 2px 2px 2px; +} +.claro .dijitCalendarYearLabel { + padding: 2px 0 0 0; + margin: 0; + font-size: 1.17em; +} +.claro .dijitCalendarYearLabel span { + /* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */ + vertical-align:middle; +} +.claro .dijitCalendarSelectedYear { + padding:0 3px; +} +.claro .dijitCalendarNextYear, +.claro .dijitCalendarPreviousYear { + padding: 1px 6px 1px 6px; + font-size:0.909em; +} +.claro .dijitCalendarSelectedYear { + font-size:1.091em; + color:@selected-text-color; +} +/* End Normal Calendar Style */ +/* Hovered Calendar Style */ +.claro .dijitCalendarHoveredDate .dijitCalendarDateLabel, +.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 .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 */ + background-color: @calendar-button-hovered-background-color; +} +/* End Hovered Calendar Style */ +/* Active Calendar Style */ +.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, +.claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel { + background-image:url(@image-calendar-container); + background-position:0 -300px; + background-color: @calendar-date-pressed-background-color; + border:solid 1px @calendar-date-pressed-border-color; + .transition-duration(.1s); +} +.dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel { + background-image:none; +} +/* End Active Calendar Style */ +/* Selected Calendar Style */ +.claro .dijitCalendarSelectedDate .dijitCalendarDateLabel { + color:@selected-text-color; + background-color: @calendar-date-selected-background-color; + border-color: @calendar-date-selected-border-color; +} +/* End Selected Calendar Style */ +/* Disabled Calendar Style*/ +.claro .dijitCalendarDisabledDate .dijitCalendarDateLabel { + color: @disabled-text-color; + text-decoration:line-through; +} + +/* End Disabled Calendar Style */ + +/* Styling for month DropDownButton */ + +.claro .dijitCalendar .dijitDropDownButton { + margin: 0; +} +.claro .dijitCalendar .dijitButtonText { + padding: 1px 0 3px; + margin-right:-4px; +} +.claro .dijitCalendar .dijitDropDownButton .dijitButtonNode { + background-color: transparent; + background-image: none; + padding: 0 3px 0 2px; + border:solid 1px @border-color; + .box-shadow(0 0 0 rgba(0,0,0,0)); +} +.claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode, +.claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode { + background-color: @calendar-button-hovered-background-color; + border:solid 1px @calendar-button-hovered-border-color; +} + +/* Styling for month drop down list */ + +.claro .dijitCalendarMonthMenu { + border-color: @popup-border-color; + background-color: @menu-background-color; + text-align:center; + background-image: none; +} +.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel { + border-top: solid 1px @menu-background-color; /* intentionally invisible until hover */ + border-bottom: solid 1px @menu-background-color; + padding: 2px 0; +} +.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover, +.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover { + background-color: @hovered-background-color; + border-color: @hovered-border-color; + border-width:1px 0; + background-image: url(@image-common-highlight); + background-repeat:repeat-x; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Calendar_rtl.css b/js/dojo-1.7.2/dijit/themes/claro/Calendar_rtl.css new file mode 100644 index 0000000..5892a64 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Calendar_rtl.css @@ -0,0 +1,18 @@ +.claro .dijitCalendarRtl .dijitCalendarIncrease { + background-position: 0 0; +} +.claro .dijitCalendarRtl .dijitCalendarDecrease { + background-position: -18px 0; +} +.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarIncrease { + background-position: -36px 0; +} +.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarDecrease { + background-position: -55px 0; +} +.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarIncrease { + background-position: -72px 0; +} +.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarDecrease { + background-position: -91px 0; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Calendar_rtl.less b/js/dojo-1.7.2/dijit/themes/claro/Calendar_rtl.less new file mode 100644 index 0000000..713717b --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Calendar_rtl.less @@ -0,0 +1,19 @@ +.claro .dijitCalendarRtl .dijitCalendarIncrease{ + background-position: 0 0; +} +.claro .dijitCalendarRtl .dijitCalendarDecrease { + background-position: -18px 0; +} +.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarIncrease { + background-position: -36px 0; +} +.claro .dijitCalendarRtl .dijitCalendarArrowHover .dijitCalendarDecrease { + background-position: -55px 0; +} +.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarIncrease { + background-position: -72px 0; +} +.claro .dijitCalendarRtl .dijitCalendarArrowActive .dijitCalendarDecrease { + background-position: -91px 0; +} + diff --git a/js/dojo-1.7.2/dijit/themes/claro/ColorPalette.css b/js/dojo-1.7.2/dijit/themes/claro/ColorPalette.css new file mode 100644 index 0000000..a23b2df --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/ColorPalette.css @@ -0,0 +1,41 @@ +/* ColorPalette + * + * Styling of the ColorPalette consists of the following: + * + * 1. the whole color palette + * .dijitColorPalette - for outline, border, and background color of the whole color palette + * Note: outline does not work for IE + * + * 2. the color swatch + * .dijitColorPalette .dijitPaletteImg + * transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch. + * displays border around a color swatch + * + * 3. hovered swatch + * .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg + * the hovered state of the color swatch - adds border + * + * 4. active and selected swatch + * .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg + * .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg + * adds border for active or selected state + */ +.claro .dijitColorPalette { + border: 1px solid #b5bcc7; + background: #ffffff; + -moz-border-radius: 0; + border-radius: 0; +} +.claro .dijitColorPalette .dijitPaletteImg { + /* transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch. + * displays border around a color swatch + * overrides border color in dijit.css */ + + border: 1px solid #d3d3d3; +} +.claro .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg { + border: 1px solid #000000; +} +.claro .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg, .claro .dijitColorPalette .dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg { + border: 2px solid #000000; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/ColorPalette.less b/js/dojo-1.7.2/dijit/themes/claro/ColorPalette.less new file mode 100644 index 0000000..ffa3ac0 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/ColorPalette.less @@ -0,0 +1,44 @@ +/* ColorPalette + * + * Styling of the ColorPalette consists of the following: + * + * 1. the whole color palette + * .dijitColorPalette - for outline, border, and background color of the whole color palette + * Note: outline does not work for IE + * + * 2. the color swatch + * .dijitColorPalette .dijitPaletteImg + * transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch. + * displays border around a color swatch + * + * 3. hovered swatch + * .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg + * the hovered state of the color swatch - adds border + * + * 4. active and selected swatch + * .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg + * .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg + * adds border for active or selected state + */ + +@import "variables"; + +.claro .dijitColorPalette { + border: 1px solid @border-color; + background: @colorpalette-background-color; + .border-radius(0); +} + +.claro .dijitColorPalette .dijitPaletteImg { + /* transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch. + * displays border around a color swatch + * overrides border color in dijit.css */ + border: 1px solid @minor-border-color; +} +.claro .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg { + border: 1px solid @swatch-hovered-border-color; +} +.claro .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg, +.claro .dijitColorPalette .dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg { + border: 2px solid @swatch-selected-border-color; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Common.css b/js/dojo-1.7.2/dijit/themes/claro/Common.css new file mode 100644 index 0000000..83f6128 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Common.css @@ -0,0 +1,65 @@ +/* ========= Styling rules to affect widgets ========= */ +.claro .dijitPopup { + -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); +} +.claro .dijitTooltipDialogPopup { + /* exception popups: do not use a shadow on these because they aren't rectangular */ + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* The highlight is shown in the ComboBox menu. TODO: move to form/Common.less */ +.claro .dijitComboBoxHighlightMatch { + background-color: #abd6ff; +} +.claro .dijitFocusedLabel { + /* for checkboxes or radio buttons, hatch border around the corresponding label, to indicate focus */ + + outline: 1px dotted #494949; +} +/* Drag and Drop */ +.claro .dojoDndItemBefore, .claro .dojoDndItemAfter { + border-top: 1px solid #759dc0; +} +.claro .dojoDndItemOver { + cursor: pointer; +} +.claro table.dojoDndAvatar { + border: 1px solid #b5bcc7; + border-collapse: collapse; + background-color: #ffffff; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); +} +.claro .dojoDndAvatarHeader td { + height: 20px; + padding-left: 21px; +} +.claro.dojoDndMove .dojoDndAvatarHeader, .claro.dojoDndCopy .dojoDndAvatarHeader { + background-image: url("images/dnd.png"); + background-repeat: no-repeat; + background-position: 2px -122px; +} +.claro .dojoDndAvatarItem td { + padding: 5px; +} +.claro.dojoDndMove .dojoDndAvatarHeader { + background-color: #f58383; + background-position: 2px -103px; +} +.claro.dojoDndCopy .dojoDndAvatarHeader { + background-color: #f58383; + background-position: 2px -68px; +} +.claro.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader { + background-color: #97e68d; + background-position: 2px -33px; +} +.claro.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader { + background-color: #97e68d; + background-position: 2px 2px; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Common.less b/js/dojo-1.7.2/dijit/themes/claro/Common.less new file mode 100644 index 0000000..248fc1a --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Common.less @@ -0,0 +1,64 @@ +/* ========= Styling rules to affect widgets ========= */ + +@import "variables"; + +.claro .dijitPopup { + .box-shadow(0 1px 5px rgba(0,0,0,0.25)); +} +.claro .dijitTooltipDialogPopup { + /* exception popups: do not use a shadow on these because they aren't rectangular */ + .box-shadow(none); +} + +/* The highlight is shown in the ComboBox menu. TODO: move to form/Common.less */ +.claro .dijitComboBoxHighlightMatch { + background-color: @select-matchedtext-background-color; +} + +.claro .dijitFocusedLabel { + /* for checkboxes or radio buttons, hatch border around the corresponding label, to indicate focus */ + outline: 1px dotted @focus-outline-color; +} + +/* Drag and Drop */ +.claro .dojoDndItemBefore, +.claro .dojoDndItemAfter{ + border-top: 1px solid @dnd-dropseparator-color; +} +.claro .dojoDndItemOver { + cursor:pointer; + } +.claro table.dojoDndAvatar { + border: 1px solid @border-color; + border-collapse: collapse; + background-color: @dnd-avatar-background-color; + .box-shadow(0 1px 3px rgba(0, 0, 0, .25)); +} +.claro .dojoDndAvatarHeader td { + height: 20px; + padding-left:21px; +} +.claro.dojoDndMove .dojoDndAvatarHeader, .claro.dojoDndCopy .dojoDndAvatarHeader { + background-image: url(@image-dnd); + background-repeat: no-repeat; + background-position:2px -122px; +} +.claro .dojoDndAvatarItem td { + padding: 5px; +} +.claro.dojoDndMove .dojoDndAvatarHeader { + background-color: @dnd-avatar-header-background-color; + background-position:2px -103px; +} +.claro.dojoDndCopy .dojoDndAvatarHeader { + background-color: @dnd-avatar-header-background-color; + background-position:2px -68px; +} +.claro.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader { + background-color: @dnd-avatar-candrop-header-background-color; + background-position:2px -33px; +} +.claro.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader { + background-color: @dnd-avatar-candrop-header-background-color; + background-position:2px 2px; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Dialog.css b/js/dojo-1.7.2/dijit/themes/claro/Dialog.css new file mode 100644 index 0000000..ae0b18d --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Dialog.css @@ -0,0 +1,205 @@ +/* Dialog + * + * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog + * + * Dialog: + * 1. Dialog (default styling): + * .dijitDialog - styles for dialog's bounding box + * + * 2. Dialog title + * .dijitDialogTitleBar - styles for the title container at the top of dialog + * .dijitDialogTitle - the text container in dialog title + * + * 3. Dialog content + * .dijitDialogPaneContent - main container for content area and action bar + * .dijitDialogPaneContentArea - styles for content container + * + * 4. Dialog action bar + * .dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content + * + * 5. Dialog underlay + * .dijitDialogUnderlay - div under the dialog which used for separate dialog and page content + * + * + * Tooltip & TooltipDialog: + * 1. tooltip content container: + * .dijitTooltipContainer - tooltip content container + * + * 2. tooltip connector: + * .dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right) + */ +.claro .dijitDialog { + border: 1px solid #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 #759dc0; + padding: 10px 8px; + position: relative; +} +.claro .dijitDialogPaneContentArea { + /* trick to get action bar (gray bar at bottom with OK/cancel buttons) to span from + * left to right but still indent dialog content + */ + margin: -10px -8px; + padding: 10px 8px; +} +.claro .dijitDialogPaneActionBar { + /* gray bar at bottom of dialog with OK/Cancel buttons */ + + background-color: #efefef; + padding: 3px 5px 2px 7px; + text-align: right; + border-top: 1px solid #d3d3d3; + margin: 10px -8px -10px; +} +.claro .dijitDialogPaneActionBar .dijitButton { + float: none; +} +.claro .dijitDialogTitleBar { + /* outer container for the titlebar of the dialog */ + + border: 1px solid #ffffff; + border-top: none; + background-color: #abd6ff; + background-image: url("images/titlebar.png"); + background-repeat: repeat-x; + padding: 5px 7px 4px 7px; +} +.claro .dijitDialogTitle { + /* typography and styling of the dialog title */ + + padding: 0 1px; + font-size: 1.091em; + color: #000000; +} +.claro .dijitDialogCloseIcon { + /* the default close icon for the dialog */ + + background: url("images/dialogCloseIcon.png"); + background-repeat: no-repeat; + position: absolute; + right: 5px; + height: 15px; + width: 21px; +} +.dj_ie6 .claro .dijitDialogCloseIcon { + background-image: url("images/dialogCloseIcon8bit.png"); +} +.claro .dijitDialogCloseIconHover { + background-position: -21px; +} +.claro .dijitDialogCloseIconActive { + background-position: -42px; +} +/* Tooltip and TooltipDialog */ +.claro .dijitTooltip, .claro .dijitTooltipDialog { + /* the outermost dom node, holding the connector and container */ + + background: transparent; + /* make the area on the sides of the arrow transparent */ + +} +.dijitTooltipBelow { + /* leave room for arrow above content */ + + padding-top: 13px; + padding-left: 3px; + padding-right: 3px; +} +.dijitTooltipAbove { + /* leave room for arrow below content */ + + padding-bottom: 13px; + padding-left: 3px; + padding-right: 3px; +} +.claro .dijitTooltipContainer { + /* the part with the text */ + + background-color: #ffffff; + background-image: url("images/tooltipGradient.png"); + background-repeat: repeat-x; + background-position: bottom; + border: 1px solid #759dc0; + padding: 6px 8px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + font-size: 1em; + color: #000000; +} +.dj_ie6 .claro .dijitTooltipContainer { + background-image: none; +} +.claro .dijitTooltipConnector { + /* the arrow piece */ + + border: 0; + z-index: 2; + background-image: url("images/tooltip.png"); + background-repeat: no-repeat; + width: 16px; + height: 14px; +} +.dj_ie6 .claro .dijitTooltipConnector { + background-image: url("images/tooltip8bit.png"); +} +.claro .dijitTooltipABRight .dijitTooltipConnector { + /* above or below tooltip, but the arrow appears on the right, + and the right edges of target and tooltip are aligned rather than the left */ + + left: auto !important; + right: 3px; +} +.claro .dijitTooltipBelow .dijitTooltipConnector { + /* the arrow piece for tooltips below an element */ + + top: 0; + left: 3px; + background-position: -31px 0; + width: 16px; + height: 14px; +} +.claro .dijitTooltipAbove .dijitTooltipConnector { + /* the arrow piece for tooltips above an element */ + + bottom: 0; + left: 3px; + background-position: -15px 0; + width: 16px; + height: 14px; +} +.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector, .dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector { + bottom: -1px; +} +.claro .dijitTooltipLeft { + padding-right: 14px; +} +.claro .dijitTooltipLeft .dijitTooltipConnector { + /* the arrow piece for tooltips to the left of an element, bottom borders aligned */ + + right: 0; + background-position: 0 0; + width: 16px; + height: 14px; +} +.claro .dijitTooltipRight { + padding-left: 14px; +} +.claro .dijitTooltipRight .dijitTooltipConnector { + /* the arrow piece for tooltips to the right of an element, bottom borders aligned */ + + left: 0; + background-position: -48px 0; + width: 16px; + height: 14px; +} +.claro .dijitDialogUnderlay { + background: #ffffff; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Dialog.less b/js/dojo-1.7.2/dijit/themes/claro/Dialog.less new file mode 100644 index 0000000..5e74be7 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Dialog.less @@ -0,0 +1,205 @@ +/* Dialog + * + * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog + * + * Dialog: + * 1. Dialog (default styling): + * .dijitDialog - styles for dialog's bounding box + * + * 2. Dialog title + * .dijitDialogTitleBar - styles for the title container at the top of dialog + * .dijitDialogTitle - the text container in dialog title + * + * 3. Dialog content + * .dijitDialogPaneContent - main container for content area and action bar + * .dijitDialogPaneContentArea - styles for content container + * + * 4. Dialog action bar + * .dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content + * + * 5. Dialog underlay + * .dijitDialogUnderlay - div under the dialog which used for separate dialog and page content + * + * + * Tooltip & TooltipDialog: + * 1. tooltip content container: + * .dijitTooltipContainer - tooltip content container + * + * 2. tooltip connector: + * .dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right) + */ + +@import "variables"; + +.claro .dijitDialog { + border: 1px solid @popup-border-color; + .box-shadow(0 1px 5px rgba(0,0,0,0.25)); +} + +.claro .dijitDialogPaneContent { + background: @pane-background-color repeat-x top left; + border-top: 1px solid @popup-border-color; + padding:10px 8px; + position: relative; +} + +.claro .dijitDialogPaneContentArea { + /* trick to get action bar (gray bar at bottom with OK/cancel buttons) to span from + * left to right but still indent dialog content + */ + margin: -10px -8px; + padding: 10px 8px; +} + +.claro .dijitDialogPaneActionBar { + /* gray bar at bottom of dialog with OK/Cancel buttons */ + background-color: @bar-background-color; + padding: 3px 5px 2px 7px; + text-align: right; + border-top: 1px solid @minor-border-color; + margin: 10px -8px -10px; +} +.claro .dijitDialogPaneActionBar .dijitButton { + float: none; +} + +.claro .dijitDialogTitleBar { + /* outer container for the titlebar of the dialog */ + border: 1px solid @dialog-titlebar-border-color; + border-top:none; + background-color: @dialog-titlebar-background-color; + background-image: url(@image-titlebar); + background-repeat:repeat-x; + padding: 5px 7px 4px 7px; +} + +.claro .dijitDialogTitle { + /* typography and styling of the dialog title */ + padding: 0 1px; + font-size:1.091em; + color: @text-color; +} + +.claro .dijitDialogCloseIcon { + /* the default close icon for the dialog */ + background: url(@image-dialog-close); + background-repeat:no-repeat; + position: absolute; + right: 5px; + height: 15px; + width: 21px; +} +.dj_ie6 .claro .dijitDialogCloseIcon { + background-image: url(@image-dialog-close-ie6); +} +.claro .dijitDialogCloseIconHover { + background-position:-21px; +} +.claro .dijitDialogCloseIconActive { + background-position:-42px; +} + +/* Tooltip and TooltipDialog */ + +.claro .dijitTooltip, +.claro .dijitTooltipDialog { + /* the outermost dom node, holding the connector and container */ + background: transparent; /* make the area on the sides of the arrow transparent */ +} +.dijitTooltipBelow { + /* leave room for arrow above content */ + padding-top: 13px; + padding-left:3px; + padding-right:3px; +} + +.dijitTooltipAbove { + /* leave room for arrow below content */ + padding-bottom: 13px; + padding-left:3px; + padding-right:3px; +} + +.claro .dijitTooltipContainer { + /* the part with the text */ + background-color:@popup-background-color; + background-image:url(@image-tooltip-gradient); + background-repeat:repeat-x; + background-position:bottom; + border:1px solid @popup-border-color; + padding:6px 8px; + .border-radius(4px); + .box-shadow(0 1px 3px rgba(0,0,0,0.25)); + font-size: 1em; + color: @text-color; +} + +.dj_ie6 .claro .dijitTooltipContainer { + background-image: none; +} +.claro .dijitTooltipConnector { + /* the arrow piece */ + border: 0; + z-index: 2; + background-image:url(@image-tooltip); + background-repeat:no-repeat; + width:16px; + height:14px; +} +.dj_ie6 .claro .dijitTooltipConnector { + background-image:url(@image-tooltip-ie6); +} +.claro .dijitTooltipABRight .dijitTooltipConnector { + /* above or below tooltip, but the arrow appears on the right, + and the right edges of target and tooltip are aligned rather than the left */ + left: auto !important; + right: 3px; +} + +.claro .dijitTooltipBelow .dijitTooltipConnector { + /* the arrow piece for tooltips below an element */ + top: 0; + left: 3px; + background-position:-31px 0; + width:16px; + height:14px; +} + +.claro .dijitTooltipAbove .dijitTooltipConnector { + /* the arrow piece for tooltips above an element */ + bottom: 0; + left: 3px; + background-position:-15px 0; + width:16px; + height:14px; +} +.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector, +.dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector { + bottom: -1px; +} + +.claro .dijitTooltipLeft { + padding-right: 14px; +} +.claro .dijitTooltipLeft .dijitTooltipConnector { + /* the arrow piece for tooltips to the left of an element, bottom borders aligned */ + right: 0; + background-position:0 0; + width:16px; + height:14px; +} + +.claro .dijitTooltipRight { + padding-left: 14px; +} +.claro .dijitTooltipRight .dijitTooltipConnector { + /* the arrow piece for tooltips to the right of an element, bottom borders aligned */ + left: 0; + background-position:-48px 0; + width:16px; + height:14px; +} + +.claro .dijitDialogUnderlay { + background: @dialog-underlay-color; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Dialog_rtl.css b/js/dojo-1.7.2/dijit/themes/claro/Dialog_rtl.css new file mode 100644 index 0000000..34930eb --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Dialog_rtl.css @@ -0,0 +1,9 @@ +/* Dialog */ +.claro .dijitDialogRtl .dijitDialogCloseIcon { + right: auto; + left: 5px; +} +.claro .dijitDialogRtl .dijitDialogPaneActionBar { + text-align: left; + padding: 3px 7px 2px 5px; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Dialog_rtl.less b/js/dojo-1.7.2/dijit/themes/claro/Dialog_rtl.less new file mode 100644 index 0000000..452fe93 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Dialog_rtl.less @@ -0,0 +1,13 @@ +/* Dialog */ + +@import "variables"; + +.claro .dijitDialogRtl .dijitDialogCloseIcon { + right: auto; + left: 5px; +} + +.claro .dijitDialogRtl .dijitDialogPaneActionBar { + text-align: left; + padding: 3px 7px 2px 5px; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Editor.css b/js/dojo-1.7.2/dijit/themes/claro/Editor.css new file mode 100644 index 0000000..9f167f9 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Editor.css @@ -0,0 +1,50 @@ +/* Editor + * + * Styling Editor means styling the Editor inside iframe container (dijitEditorIFrameContainer) + * + * 1. Editor iframe container (default styling): + * .dijitEditorIFrameContainer - normal state styles: background-color, border, padding + * + * 2. hovered Editor iframe container (ie, mouse hover on editor) + * .dijitEditorHover .dijitEditorIFrameContainer/dijitEditorIFrame - styles when mouse hover on the container + * + * 3. focused Editor iframe container (ie, mouse focus on the editor pane) + * .dijitEditorFocused .dijitEditorIFrameContainer/dijitEditorIFrame - styles when container focused + * + * 3. disabled Editor iframe container + * .dijitEditorDisabled - editor's inner iframe container disable status styles: background, border + */ +.claro .dijitEditorIFrameContainer { + padding: 3px 3px 1px 10px; +} +.claro .dijitEditorIFrame { + background-color: #ffffff; +} +.claro .dijitEditor { + border: 1px solid #b5bcc7; +} +.claro .dijitEditor .dijitEditorIFrameContainer { + background-color: #ffffff; + background-image: url("form/images/textBox_back.png"); + background-repeat: repeat-x; +} +.dj_ie6 .claro .dijitEditor .dijitEditorIFrameContainer { + background-image: none; +} +.claro .dijitEditorHover .dijitEditorIFrameContainer, .claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame { + background-color: #e5f2fe; +} +.claro .dijitEditorFocused .dijitEditorIFrameContainer, .claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame { + /* TODO: contradicts rule above, which background-color do you want? */ + + background-color: #ffffff; +} +/* Disabled */ +.claro .dijitEditorDisabled { + border: 1px solid #d3d3d3; + color: #818181; +} +.claro .dijitDisabled .dijitEditorIFrame, .claro .dijitDisabled .dijitEditorIFrameContainer, .claro .dijitDisabled .dijitEditorIFrameContainer .dijitEditorIFrame { + background-color: #efefef; + background-image: none; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Editor.less b/js/dojo-1.7.2/dijit/themes/claro/Editor.less new file mode 100644 index 0000000..f74a5d4 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Editor.less @@ -0,0 +1,59 @@ +/* Editor + * + * Styling Editor means styling the Editor inside iframe container (dijitEditorIFrameContainer) + * + * 1. Editor iframe container (default styling): + * .dijitEditorIFrameContainer - normal state styles: background-color, border, padding + * + * 2. hovered Editor iframe container (ie, mouse hover on editor) + * .dijitEditorHover .dijitEditorIFrameContainer/dijitEditorIFrame - styles when mouse hover on the container + * + * 3. focused Editor iframe container (ie, mouse focus on the editor pane) + * .dijitEditorFocused .dijitEditorIFrameContainer/dijitEditorIFrame - styles when container focused + * + * 3. disabled Editor iframe container + * .dijitEditorDisabled - editor's inner iframe container disable status styles: background, border + */ + +@import "variables"; + +.claro .dijitEditorIFrameContainer{ + padding:3px 3px 1px 10px; +} +.claro .dijitEditorIFrame { + background-color: @textbox-background-color; +} +.claro .dijitEditor { + border: 1px solid @border-color; +} +.claro .dijitEditor .dijitEditorIFrameContainer{ + background-color: @textbox-background-color; + background-image: url(@image-form-textbox-background); + background-repeat:repeat-x; +} +.dj_ie6 .claro .dijitEditor .dijitEditorIFrameContainer{ + background-image: none; +} +.claro .dijitEditorHover .dijitEditorIFrameContainer, +.claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame{ + background-color: @textbox-hovered-background-color; +} +.claro .dijitEditorFocused .dijitEditorIFrameContainer, +.claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame{ + /* TODO: contradicts rule above, which background-color do you want? */ + background-color: @textbox-focused-background-color; +} + + +/* Disabled */ +.claro .dijitEditorDisabled { + border: 1px solid @disabled-border-color; + color: @disabled-text-color; +} + +.claro .dijitDisabled .dijitEditorIFrame, +.claro .dijitDisabled .dijitEditorIFrameContainer, +.claro .dijitDisabled .dijitEditorIFrameContainer .dijitEditorIFrame { + background-color: @textbox-disabled-background-color; + background-image: none; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Editor_rtl.css b/js/dojo-1.7.2/dijit/themes/claro/Editor_rtl.css new file mode 100644 index 0000000..f633558 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Editor_rtl.css @@ -0,0 +1,4 @@ +/* Editor */ +.claro .dijitEditorRtl .dijitEditorIFrameContainer { + padding: 3px 10px 1px 3px; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Editor_rtl.less b/js/dojo-1.7.2/dijit/themes/claro/Editor_rtl.less new file mode 100644 index 0000000..8ebc013 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Editor_rtl.less @@ -0,0 +1,9 @@ +/* Editor */ + +@import "variables"; + +.claro .dijitEditorRtl .dijitEditorIFrameContainer{ + padding:3px 10px 1px 3px; +} + + diff --git a/js/dojo-1.7.2/dijit/themes/claro/InlineEditBox.css b/js/dojo-1.7.2/dijit/themes/claro/InlineEditBox.css new file mode 100644 index 0000000..0cd1457 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/InlineEditBox.css @@ -0,0 +1,20 @@ +/* InlineEditBox + * + * Styling InlineEditBox mainly includes: + * + * 1. Normal state + * .dijitInlineEditBoxDisplayMode - for border + * + * 2. Hover state + * .dijitInlineEditBoxDisplayModeHover - for border and background color + */ +.claro .dijitInlineEditBoxDisplayMode { + border: 1px solid transparent; +} +.claro .dijitInlineEditBoxDisplayModeHover { + background-color: #e5f2fe; + border: solid 1px #759dc0; +} +.dj_ie6 .claro .dijitInlineEditBoxDisplayMode { + border: none; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/InlineEditBox.less b/js/dojo-1.7.2/dijit/themes/claro/InlineEditBox.less new file mode 100644 index 0000000..a7162be --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/InlineEditBox.less @@ -0,0 +1,25 @@ +/* InlineEditBox + * + * Styling InlineEditBox mainly includes: + * + * 1. Normal state + * .dijitInlineEditBoxDisplayMode - for border + * + * 2. Hover state + * .dijitInlineEditBoxDisplayModeHover - for border and background color + */ + +@import "variables"; + +.claro .dijitInlineEditBoxDisplayMode { + border: 1px solid transparent; +} + +.claro .dijitInlineEditBoxDisplayModeHover { + background-color: @textbox-hovered-background-color; + border: solid 1px @hovered-border-color; +} + +.dj_ie6 .claro .dijitInlineEditBoxDisplayMode { + border: none; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Menu.css b/js/dojo-1.7.2/dijit/themes/claro/Menu.css new file mode 100644 index 0000000..e1c1562 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Menu.css @@ -0,0 +1,190 @@ +/* Menu + +There are three areas of styling for the Menu: + + 1. The menu + There are three types of menus: + i)Context Menu + ii)Drop down Menu + iii) Navigation Menu + All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border + .dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect + .dijitMenuTable - for padding - also affects Select widget + + 2. The menu bar + .dijitMenuBar - for border, margins, padding, background-color of the menu bar + .dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) + + 3. Menu items - items in the menu. + .dijitMenuItem - for color + .dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected + .dijitMenuItemActive - for bacgkround-color of an active (mousedown) menu item + td.dijitMenuItemIconCell - for padding around a menu item's icon + td.dijitMenuItemLabel - for padding around a menu item's label + .dijitMenuSeparatorTop - for border, top border, of the separator + .dijitMenuSeparatorBottom - for bottom margin of the separator + + Styles specific to ComboBox and FilteringSelect widgets: + .dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu + .dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu + +*/ +.claro .dijitMenuBar { + border: 1px solid #b5bcc7; + margin: 0; + padding: 0; + background-color: #efefef; + background-image: url("images/commonHighlight.png"); + background-position: 0 0; + background-repeat: repeat-x; +} +.dj_ie6 .claro .dijitMenuBar { + background-image: none; +} +.claro .dijitMenu { + background-repeat: repeat-y; + background-color: #ffffff; + border: 1px solid #759dc0; + /* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */ + + margin: -1px 0; +} +.dj_ie6 .claro .dijitMenu { + margin: 0; + /* above -1px makes top/bottom borders disappear on IE6 */ + +} +.claro .dijitMenuBar .dijitMenuItem { + padding: 6px 10px 7px; + background-position: 0 100px; + 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 { + border-collapse: separate; + border-spacing: 0 0; + padding: 0; +} +.claro .dijitMenuItem td { + padding: 1px; +} +/* hover over a MenuBarItem */ +.claro .dijitMenuPassive .dijitMenuItemHover, .claro .dijitMenuPassive .dijitMenuItemSelected { + background-color: #abd6ff; + border: solid 1px #759dc0; + background-position: 0 0; + color: #000000; + padding: 5px 9px 6px; +} +.claro .dijitMenuPassive .dijitMenuItemActive { + background-position: 0 -177px; +} +.dj_ie6 .claro .dijitMenuItem, .dj_ie6 .claro .dijitMenuPassive .dijitMenuItem { + background-image: none; +} +/* MenuBarItem that has been selected and menu drops down from it */ +.claro .dijitMenuActive .dijitMenuItemHover, .claro .dijitMenuActive .dijitMenuItemSelected { + border: solid 1px #759dc0; + padding: 5px 9px 6px; + background-color: #abd6ff; + background-position: 0 0; + color: #000000; +} +.dj_ie .claro .dijitMenuActive .dijitMenuItemHover, +.dj_ie .claro .dijitMenuActive .dijitMenuItemSelected, +.dj_ie .claro .dijitMenuPassive .dijitMenuItemHover, +.dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected { + padding-top: 6px; + padding-bottom: 5px; + margin-top: -3px; +} +.claro .dijitMenuActive .dijitMenuItemActive { + background-color: #7dbdfa; + background-position: 0 -177px; +} +.claro .dijitMenuItemActive { + background-position: 0 -177px; +} +.claro td.dijitMenuItemIconCell { + padding: 2px; + margin: 0 0 0 4px; +} +.claro td.dijitMenuItemLabel { + padding-top: 5px; + padding-bottom: 5px; +} +.claro .dijitMenuExpand { + width: 7px; + height: 7px; + background-image: url("images/spriteArrows.png"); + background-position: -14px 0; + margin-right: 3px; +} +.claro .dijitMenuItemDisabled .dijitMenuItemIconCell { + opacity: 1; +} +.claro .dijitMenuSeparatorTop { + height: auto; + margin-top: 1px; + /* prevents spacing above/below separator */ + + border-bottom: 1px solid #b5bcc7; +} +.claro .dijitMenuSeparatorBottom { + height: auto; + margin-bottom: 1px; +} +/* the checked menu item */ +.claro .dijitCheckedMenuItemIconChar { + display: none; +} +.claro .dijitCheckedMenuItemIcon { + background-image: url("form/images/checkboxRadioButtonStates.png"); + background-repeat: no-repeat; + background-position: -15px 50%; + width: 15px; + height: 16px; +} +.dj_ie6 .claro .dijitCheckedMenuItemIcon { + background-image: url("form/images/checkboxAndRadioButtons_IE6.png"); +} +.claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon { + background-position: 0 50%; +} +/*ComboBox Menu*/ +.claro .dijitComboBoxMenu { + margin-left: 0; + background-image: none; +} +.claro .dijitComboBoxMenu .dijitMenuItem { + padding: 2px; + border-width: 1px 0 1px 0; + border-style: solid; + border-color: #ffffff; +} +.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: #7dbdfa; + /* TODO: why is this a different color than normal .dijitMenuItemSelected? */ + +} +.claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton { + font-style: italic; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Menu.less b/js/dojo-1.7.2/dijit/themes/claro/Menu.less new file mode 100644 index 0000000..80467a5 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Menu.less @@ -0,0 +1,194 @@ +/* Menu + +There are three areas of styling for the Menu: + + 1. The menu + There are three types of menus: + i)Context Menu + ii)Drop down Menu + iii) Navigation Menu + All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border + .dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect + .dijitMenuTable - for padding - also affects Select widget + + 2. The menu bar + .dijitMenuBar - for border, margins, padding, background-color of the menu bar + .dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) + + 3. Menu items - items in the menu. + .dijitMenuItem - for color + .dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected + .dijitMenuItemActive - for bacgkround-color of an active (mousedown) menu item + td.dijitMenuItemIconCell - for padding around a menu item's icon + td.dijitMenuItemLabel - for padding around a menu item's label + .dijitMenuSeparatorTop - for border, top border, of the separator + .dijitMenuSeparatorBottom - for bottom margin of the separator + + Styles specific to ComboBox and FilteringSelect widgets: + .dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu + .dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu + +*/ + +@import "variables"; + +.claro .dijitMenuBar { + border: 1px solid @border-color; + margin: 0; + padding: 0; + background-color: @bar-background-color; + background-image: url(@image-common-highlight); + background-position:0 0; + background-repeat:repeat-x; +} +.dj_ie6 .claro .dijitMenuBar { + background-image:none; +} +.claro .dijitMenu { + background-repeat:repeat-y; + background-color:@menu-background-color; + border: 1px solid @popup-border-color; + + /* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */ + margin: -1px 0; +} +.dj_ie6 .claro .dijitMenu { + margin: 0; /* above -1px makes top/bottom borders disappear on IE6 */ +} +.claro .dijitMenuBar .dijitMenuItem { + padding: 6px 10px 7px; + background-position:0 100px; + margin:-1px; +} +.claro .dijitMenuItem { + 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 */ +.claro .dijitMenuTable { + border-collapse:separate; + border-spacing:0 0; + padding:0; +} +.claro .dijitMenuItem td{ + padding:1px; +} +/* hover over a MenuBarItem */ +.claro .dijitMenuPassive .dijitMenuItemHover, +.claro .dijitMenuPassive .dijitMenuItemSelected { + background-color: @hovered-background-color; + border:solid 1px @hovered-border-color; + background-position:0 0; + color:@text-color; + padding: 5px 9px 6px; +} +.claro .dijitMenuPassive .dijitMenuItemActive{ + background-position:0 -177px; +} +.dj_ie6 .claro .dijitMenuItem, +.dj_ie6 .claro .dijitMenuPassive .dijitMenuItem { + background-image: none; +} + +/* MenuBarItem that has been selected and menu drops down from it */ +.claro .dijitMenuActive .dijitMenuItemHover, +.claro .dijitMenuActive .dijitMenuItemSelected { + border:solid 1px @hovered-border-color; + padding: 5px 9px 6px; + background-color: @hovered-background-color; + background-position:0 0; + color:@hovered-text-color; +} +.dj_ie .claro .dijitMenuActive .dijitMenuItemHover, +.dj_ie .claro .dijitMenuActive .dijitMenuItemSelected, +.dj_ie .claro .dijitMenuPassive .dijitMenuItemHover, +.dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected { + padding-top: 6px; + padding-bottom: 5px; + margin-top: -3px; +} +.claro .dijitMenuActive .dijitMenuItemActive{ + background-color: @pressed-background-color; + background-position:0 -177px; +} +.claro .dijitMenuItemActive { + background-position:0 -177px; +} +.claro td.dijitMenuItemIconCell { + padding: 2px; + margin: 0 0 0 4px; +} +.claro td.dijitMenuItemLabel { + padding-top: 5px; + padding-bottom: 5px; +} +.claro .dijitMenuExpand { + width: 7px; + height: 7px; + background-image: url(@image-arrow-sprite); + background-position: -14px 0; + margin-right:3px; +} +.claro .dijitMenuItemDisabled .dijitMenuItemIconCell { + opacity:1; +} +.claro .dijitMenuSeparatorTop { + height: auto; + margin-top:1px; /* prevents spacing above/below separator */ + border-bottom: 1px solid @border-color +} +.claro .dijitMenuSeparatorBottom{ + height: auto; + margin-bottom:1px; +} +/* the checked menu item */ +.claro .dijitCheckedMenuItemIconChar { + display: none; +} +.claro .dijitCheckedMenuItemIcon { + background-image: url(@image-form-checkbox-and-radios); + background-repeat:no-repeat; + background-position: -15px 50%; + width:15px; + height:16px; +} +.dj_ie6 .claro .dijitCheckedMenuItemIcon { + background-image: url(@image-form-checkbox-and-radios-ie6); +} +.claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon { + background-position: 0 50%; +} + +/*ComboBox Menu*/ +.claro .dijitComboBoxMenu { + margin-left:0; + background-image: none; +} + +.claro .dijitComboBoxMenu .dijitMenuItem { + padding: @textbox-padding; // Make drop down menu text line up with text in <input>. + border-width:1px 0 1px 0; + border-style:solid; + border-color: @select-dropdownitem-background-color; +} +.claro .dijitComboBoxMenu .dijitMenuItemSelected { + color:@selected-text-color; + border-color:@hovered-border-color; + background-color:@hovered-background-color; +} +.claro .dijitComboBoxMenu .dijitMenuItemHover { + color: #000000; + border-color: #769dc0; + background-color: #abd6ff; + background-position: 0 0; +} +.claro .dijitComboBoxMenuActive .dijitMenuItemSelected { + background-position:0 -177px; + background-color: @select-dropdownitem-hovered-background-color; /* TODO: why is this a different color than normal .dijitMenuItemSelected? */ +} +.claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton { + font-style: italic; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Menu_rtl.css b/js/dojo-1.7.2/dijit/themes/claro/Menu_rtl.css new file mode 100644 index 0000000..2b96cba --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Menu_rtl.css @@ -0,0 +1,8 @@ +.claro .dijitMenuItemRtl .dijitMenuExpand { + background-position: -7px 0; + margin-right: 0; + margin-left: 3px; +} +.claro .dijitMenuItemRtl .dijitMenuItemIcon { + margin: 0 4px 0 0; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Menu_rtl.less b/js/dojo-1.7.2/dijit/themes/claro/Menu_rtl.less new file mode 100644 index 0000000..6f669f5 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Menu_rtl.less @@ -0,0 +1,11 @@ +@import "variables"; + +.claro .dijitMenuItemRtl .dijitMenuExpand { + background-position: -7px 0; + margin-right: 0; + margin-left: 3px; +} + +.claro .dijitMenuItemRtl .dijitMenuItemIcon { + margin:0 4px 0 0; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/ProgressBar.css b/js/dojo-1.7.2/dijit/themes/claro/ProgressBar.css new file mode 100644 index 0000000..925021f --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/ProgressBar.css @@ -0,0 +1,63 @@ +/* ProgressBar + * + * Styling of the ProgressBar consists of the following: + * + * 1. the base progress bar + * .dijitProgressBar - sets margins for the progress bar + * + * 2. the empty bar + * .dijitProgressBarEmpty - sets background img and color for bar or parts of bar that are not finished yet + * Also sets border color for whole bar + * + * 3. tile mode + * .dijitProgressBarTile + * inner container for finished portion when in 'tile' (image) mode + * + * 4. full bar mode + * .dijitProgressBarFull + * adds border to right side of the filled portion of bar + * + * 5. text for label of bar + * .dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts. + * + * 6. indeterminate mode + * .dijitProgressBarIndeterminate .dijitProgressBarTile + * sets animated gif for the progress bar in 'indeterminate' mode + */ +.claro .dijitProgressBar { + margin: 2px 0 2px 0; +} +.claro .dijitProgressBarEmpty { + /* outer container and background of the bar that's not finished yet*/ + + background: #ffffff url("images/progressBarEmpty.png") no-repeat left; + border-color: #759dc0; +} +.claro .dijitProgressBarTile { + /* inner container for finished portion when in 'tile' (image) mode */ + + background: #abd6ff url("images/progressBarFull.png") repeat-x top; +} +.dj_ie6 .claro .dijitProgressBarTile { + background-image: none; +} +.claro .dijitProgressBarFull { + 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. */ + + color: #000000; +} +.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: #efefef url("images/progressBarAnim.gif") repeat-x top; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/ProgressBar.less b/js/dojo-1.7.2/dijit/themes/claro/ProgressBar.less new file mode 100644 index 0000000..8edf426 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/ProgressBar.less @@ -0,0 +1,58 @@ +/* ProgressBar + * + * Styling of the ProgressBar consists of the following: + * + * 1. the base progress bar + * .dijitProgressBar - sets margins for the progress bar + * + * 2. the empty bar + * .dijitProgressBarEmpty - sets background img and color for bar or parts of bar that are not finished yet + * Also sets border color for whole bar + * + * 3. tile mode + * .dijitProgressBarTile + * inner container for finished portion when in 'tile' (image) mode + * + * 4. full bar mode + * .dijitProgressBarFull + * adds border to right side of the filled portion of bar + * + * 5. text for label of bar + * .dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts. + * + * 6. indeterminate mode + * .dijitProgressBarIndeterminate .dijitProgressBarTile + * sets animated gif for the progress bar in 'indeterminate' mode + */ + + @import "variables"; + +.claro .dijitProgressBar { + margin:2px 0 2px 0; +} +.claro .dijitProgressBarEmpty { + /* outer container and background of the bar that's not finished yet*/ + background: @progressbar-empty-background-color url(@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(@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. */ + color: @progressbar-text-color; +} +.claro .dijitProgressBarIndeterminate .dijitProgressBarTile { + /* use an animated gif for the progress bar in 'indeterminate' mode; + background-color won't appear unless user has turned off background images */ + background: @bar-background-color url(@image-progressbar-anim) repeat-x top; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/README b/js/dojo-1.7.2/dijit/themes/claro/README new file mode 100644 index 0000000..3b4b4aa --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/README @@ -0,0 +1,41 @@ +These are "less" files that compile into the CSS of claro. + +--------- +Installing and running on Windows: + +1. Install node: + a) Go to https://github.com/ajaxorg/node-builds, press download button, and select "download zip" + b) unzip the file into C:\ + +2. Add node environment variables: + + a) open Control Panel --> click System icon --> select Advanced tab --> click Environment variables button + b) press "edit" on path + c) depending on what directory you unzipped to and the exact filenames, you will add something like + + ;C:\ajaxorg-node-builds-0fcee7d\win32 + +4. To compile all the files: + + C:\> cd C:\myworkspace\dijit\themes\claro + C:\> node compile.js + +-------- +To install/run less version 2 on mac: + +1. Install Node.js + Download a built copy from https://github.com/ajaxorg/node-builds. + Alternately, go to http://nodejs.org/#download (./configure, make, make install). + +2. Edit .bash_profile etc. to add node to your path + + export PATH=$PATH:/opt/less/bin + +To compile all the files: + + $ cd dijit/themes/claro + $ node compile.js + +----- + +See http://lesscss.org/ and https://github.com/cloudhead/less.js/ for more information. diff --git a/js/dojo-1.7.2/dijit/themes/claro/TimePicker.css b/js/dojo-1.7.2/dijit/themes/claro/TimePicker.css new file mode 100644 index 0000000..c8d6bb2 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/TimePicker.css @@ -0,0 +1,130 @@ +/* Time Picker + * + * Styling the Time Picker consists of the following: + * + * 1. minor time values + * .dijitTimePickerTick - set text color, size, background color of minor values + * .dijitTimePickerTickHover - set hover style of minor time values + * dijitTimePickerTickSelected - set selected style of minor time values + * + * 2. major time values - 1:00, 2:00, times on the hour + * set text color, size, background color, left/right margins for "zoom" affect + * .dijitTimePickerMarkerHover - to set hover style of major time values + * .dijitTimePickerMarkerSelected - set selected style of major time values + * + * 3. up and down arrow buttons + * .dijitTimePicker .dijitButtonNode - background-color, border + * .dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state + * + * Other classes provide the fundamental structure of the TimePicker and should not be modified. + */ +/* override Button.css */ +.claro .dijitTimePicker .dijitButtonNode { + padding: 0 0; + -moz-border-radius: 0; + border-radius: 0; +} +.claro .dijitTimePicker { + border: 1px #b5bcc7 solid; + border-top: none; + border-bottom: none; + background-color: #fff; + /* TODO: useless? Appears to be overridden by settings on individual elements */ + +} +.claro .dijitTimePickerItem { + /* dijitTimePickerItem refers to both Tick's (minor values like 2:15, 2:30, 2:45) and Marker's (major values like 2PM, 3PM) */ + + background-image: url("images/commonHighlight.png"); + background-position: 0 -1px; + background-repeat: repeat-x; + border-top: solid 1px #b5bcc7; + border-bottom: solid 1px #b5bcc7; + margin-right: -1px; + margin-left: -1px; + margin-top: -1px; +} +/* to make up for lack of alpha transparency in IE6 */ +.dj_ie6 .claro .dijitTimePickerItem { + background-image: none; +} +.claro .dijitTimePickerTick { + /* minor value */ + + color: #818181; + background-color: #efefef; + font-size: 0.818em; +} +.claro .dijitTimePickerMarker { + /* major value - 1:00, 2:00, times on the hour */ + + background-color: #e5f2fe; + font-size: 1em; + white-space: nowrap; +} +.claro .dijitTimePickerTickHover, +.claro .dijitTimePickerMarkerHover, +.claro .dijitTimePickerMarkerSelected, +.claro .dijitTimePickerTickSelected { + background-color: #7dbdfa; + border: solid 1px #b5bcc7; + margin-left: -7px; + margin-right: -7px; + color: #000000; +} +.claro .dijitTimePickerMarkerSelected, .claro .dijitTimePickerTickSelected { + font-size: 1em; +} +.dj_ie .claro .dijitTimePickerTickHover, +.dj_ie .claro .dijitTimePickerMarkerHover, +.dj_ie .claro .dijitTimePickerMarkerSelected, +.dj_ie .claro .dijitTimePickerTickSelected { + width: 114%; +} +.dj_ie6 .claro .dijitTimePickerTickHover, +.dj_ie6 .claro .dijitTimePickerMarkerHover, +.dj_ie6 .claro .dijitTimePickerMarkerSelected, +.dj_ie6 .claro .dijitTimePickerTickSelected { + position: relative; + /* creates widening of element */ + zoom: 1; + /* creates widening of element */ + +} +.claro .dijitTimePickerTick .dijitTimePickerItemInner { + padding: 1px; + margin: 0; +} +.claro .dijitTimePicker .dijitButtonNode { + border-left: none; + border-right: none; + border-color: #b5bcc7; + background-color: #efefef; + background-image: url("images/commonHighlight.png"); + background-position: 0 -1px; + background-repeat: repeat-x; +} +.dj_ie6 .claro .dijitTimePicker .dijitButtonNode { + background-image: none; +} +.claro .dijitTimePicker .dijitArrowButtonInner { + height: 100%; + /* hack claro.button.css */ + + background-image: url("form/images/commonFormArrows.png"); + background-repeat: no-repeat; + background-position: -140px 45%; +} +.claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner { + background-position: -35px 45%; +} +/* hover */ +.claro .dijitTimePicker .dijitUpArrowHover, .claro .dijitTimePicker .dijitDownArrowHover { + background-color: #abd6ff; +} +.claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner { + background-position: -175px 45%; +} +.claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner { + background-position: -70px 45%; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/TimePicker.less b/js/dojo-1.7.2/dijit/themes/claro/TimePicker.less new file mode 100644 index 0000000..a6253f7 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/TimePicker.less @@ -0,0 +1,124 @@ +/* Time Picker + * + * Styling the Time Picker consists of the following: + * + * 1. minor time values + * .dijitTimePickerTick - set text color, size, background color of minor values + * .dijitTimePickerTickHover - set hover style of minor time values + * dijitTimePickerTickSelected - set selected style of minor time values + * + * 2. major time values - 1:00, 2:00, times on the hour + * set text color, size, background color, left/right margins for "zoom" affect + * .dijitTimePickerMarkerHover - to set hover style of major time values + * .dijitTimePickerMarkerSelected - set selected style of major time values + * + * 3. up and down arrow buttons + * .dijitTimePicker .dijitButtonNode - background-color, border + * .dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state + * + * Other classes provide the fundamental structure of the TimePicker and should not be modified. + */ + +@import "variables"; + +/* override Button.css */ +.claro .dijitTimePicker .dijitButtonNode { + padding: 0 0; + .border-radius(0); +} +.claro .dijitTimePicker{ + border:1px @border-color solid; + border-top:none; + border-bottom:none; + background-color:#fff; /* TODO: useless? Appears to be overridden by settings on individual elements */ +} +.claro .dijitTimePickerItem{ + /* dijitTimePickerItem refers to both Tick's (minor values like 2:15, 2:30, 2:45) and Marker's (major values like 2PM, 3PM) */ + background-image: url(@image-common-highlight); + background-position:0 -1px; + background-repeat:repeat-x; + border-top:solid 1px @border-color; + border-bottom:solid 1px @border-color; + margin-right:-1px; + margin-left:-1px; + margin-top:-1px; +} +/* to make up for lack of alpha transparency in IE6 */ +.dj_ie6 .claro .dijitTimePickerItem { + background-image: none; +} +.claro .dijitTimePickerTick { + /* minor value */ + color:@timepicker-minorvalue-text-color; + background-color:@timepicker-minorvalue-background-color; + font-size:0.818em; +} +.claro .dijitTimePickerMarker { + /* major value - 1:00, 2:00, times on the hour */ + background-color: @timepicker-majorvalue-background-color; + font-size: 1em; + white-space: nowrap; +} +.claro .dijitTimePickerTickHover, +.claro .dijitTimePickerMarkerHover, +.claro .dijitTimePickerMarkerSelected, +.claro .dijitTimePickerTickSelected { + background-color: @timepicker-value-hovered-background-color; + border:solid 1px @border-color; + margin-left:-7px; + margin-right:-7px; + color:@timepicker-value-hovered-text-color; +} +.claro .dijitTimePickerMarkerSelected, +.claro .dijitTimePickerTickSelected { + font-size: 1em; +} +.dj_ie .claro .dijitTimePickerTickHover, +.dj_ie .claro .dijitTimePickerMarkerHover, +.dj_ie .claro .dijitTimePickerMarkerSelected, +.dj_ie .claro .dijitTimePickerTickSelected { + width: 114%; +} +.dj_ie6 .claro .dijitTimePickerTickHover, +.dj_ie6 .claro .dijitTimePickerMarkerHover, +.dj_ie6 .claro .dijitTimePickerMarkerSelected, +.dj_ie6 .claro .dijitTimePickerTickSelected { + position: relative; /* creates widening of element */ + zoom: 1; /* creates widening of element */ +} +.claro .dijitTimePickerTick .dijitTimePickerItemInner { + padding:1px; + margin:0; +} +.claro .dijitTimePicker .dijitButtonNode { + border-left:none; + border-right:none; + border-color:@border-color; + background-color: @unselected-background-color; + background-image: url(@image-common-highlight); + background-position:0 -1px; + background-repeat:repeat-x; +} +.dj_ie6 .claro .dijitTimePicker .dijitButtonNode { + background-image: none; +} +.claro .dijitTimePicker .dijitArrowButtonInner{ + height: 100%; /* hack claro.button.css */ + background-image: url(@image-form-common-arrows); + background-repeat: no-repeat; + background-position:-140px 45%; +} +.claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner{ + background-position:-35px 45%; +} +/* hover */ +.claro .dijitTimePicker .dijitUpArrowHover, +.claro .dijitTimePicker .dijitDownArrowHover { + background-color: @timepicker-arrow-hovered-background-color; +} +.claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner { + background-position:-175px 45%; +} +.claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner { + background-position:-70px 45%; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/TimePicker_rtl.css b/js/dojo-1.7.2/dijit/themes/claro/TimePicker_rtl.css new file mode 100644 index 0000000..6dfcf83 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/TimePicker_rtl.css @@ -0,0 +1,9 @@ +/* TimePicker */ +.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickHover, +.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerHover, +.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerSelected, +.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickSelected { + margin-left: -6px; + margin-right: -8px; + width: 114%; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/TimePicker_rtl.less b/js/dojo-1.7.2/dijit/themes/claro/TimePicker_rtl.less new file mode 100644 index 0000000..44f5da5 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/TimePicker_rtl.less @@ -0,0 +1,12 @@ +/* TimePicker */ + +@import "variables"; + +.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickHover, +.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerHover, +.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerMarkerSelected, +.dj_ie .claro .dijitTimePickerRtl .dijitTimePickerTickSelected { + margin-left:-6px; + margin-right:-8px; + width: 114%; +}
\ No newline at end of file diff --git a/js/dojo-1.7.2/dijit/themes/claro/TitlePane.css b/js/dojo-1.7.2/dijit/themes/claro/TitlePane.css new file mode 100644 index 0000000..1415615 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/TitlePane.css @@ -0,0 +1,71 @@ +/* TitlePane + * + * Styling TitlePane means styling the TitlePane title and its content container (dijitTitlePane) + * + * TitlePane title: + * 1. TitlePane title (default styling): + * .dijitTitlePaneTitle - TitlePane's title div style: background-color, border + * + * 2. hovered TitlePane title (ie, mouse hover on a title bar) + * .dijitTitlePaneTitleHover - styles when mouse hover on the title div + * + * 3. active TitlePane title (ie, mouse down on a title bar) + * .dijitTitlePaneTitleActive - styles when mouse down on the title div + * + * + * TitlePane Content Container: + * 1. outer/inner container: + * .dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div + */ +.claro .dijitTitlePaneTitle { + background-color: #efefef; + background-image: url("images/titlebar.png"); + background-repeat: repeat-x; + border: 1px solid #b5bcc7; + padding: 0 7px 3px 7px; + min-height: 17px; +} +.dj_ie6 .claro .dijitTitlePaneTitle { + background-image: none; +} +.claro .dijitTitlePaneTitleHover { + background-color: #abd6ff; + border-color: #759dc0; +} +.claro .dijitTitlePaneTitleActive { + background-color: #7dbdfa; + border-color: #759dc0; + background-position: 0 -136px; +} +.claro .dijitTitlePaneTitleFocus { + margin-top: 3px; + padding-bottom: 2px; +} +.claro .dijitTitlePane .dijitArrowNode { + background-image: url("images/spriteArrows.png"); + background-repeat: no-repeat; + height: 8px; + width: 7px; +} +.claro .dijitTitlePane .dijitOpen .dijitArrowNode { + background-position: 0 0; +} +.claro .dijitTitlePane .dijitClosed .dijitArrowNode { + background-position: -14px 0; +} +.claro .dijitTitlePane .dijitTitlePaneTextNode { + color: #000000; +} +.claro .dijitTitlePaneContentOuter { + background: #ffffff; + border: 1px solid #b5bcc7; + border-top: none; +} +.claro .dijitTitlePaneContentInner { + padding: 10px; +} +.claro .dijitTitlePaneTextNode { + margin-left: 4px; + margin-right: 4px; + vertical-align: text-top; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/TitlePane.less b/js/dojo-1.7.2/dijit/themes/claro/TitlePane.less new file mode 100644 index 0000000..89da9f3 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/TitlePane.less @@ -0,0 +1,74 @@ +/* TitlePane + * + * Styling TitlePane means styling the TitlePane title and its content container (dijitTitlePane) + * + * TitlePane title: + * 1. TitlePane title (default styling): + * .dijitTitlePaneTitle - TitlePane's title div style: background-color, border + * + * 2. hovered TitlePane title (ie, mouse hover on a title bar) + * .dijitTitlePaneTitleHover - styles when mouse hover on the title div + * + * 3. active TitlePane title (ie, mouse down on a title bar) + * .dijitTitlePaneTitleActive - styles when mouse down on the title div + * + * + * TitlePane Content Container: + * 1. outer/inner container: + * .dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div + */ + +@import "variables"; + +.claro .dijitTitlePaneTitle { + background-color: @unselected-background-color; // TODO: Mailed Jason, shouldn't this toggle to @selected-background-color when pane opened? + background-image: url(@image-titlebar); + background-repeat:repeat-x; + border:1px solid @border-color; + padding: 0 7px 3px 7px; + min-height:17px; +} +.dj_ie6 .claro .dijitTitlePaneTitle { + background-image: none; +} +.claro .dijitTitlePaneTitleHover { + background-color: @hovered-background-color; + border-color: @hovered-border-color; +} +.claro .dijitTitlePaneTitleActive { + background-color: @pressed-background-color; + border-color: @pressed-border-color; + background-position:0 -136px; +} +.claro .dijitTitlePaneTitleFocus { + margin-top:3px; + padding-bottom:2px; +} +.claro .dijitTitlePane .dijitArrowNode { + background-image: url(@image-arrow-sprite); + background-repeat: no-repeat; + height: 8px; + width: 7px; +} +.claro .dijitTitlePane .dijitOpen .dijitArrowNode { + background-position: 0 0; +} +.claro .dijitTitlePane .dijitClosed .dijitArrowNode { + background-position: -14px 0; +} +.claro .dijitTitlePane .dijitTitlePaneTextNode { + color:@text-color; +} +.claro .dijitTitlePaneContentOuter { + background: @pane-background-color; + border:1px solid @border-color; + border-top:none; +} +.claro .dijitTitlePaneContentInner { + padding:10px; +} +.claro .dijitTitlePaneTextNode { + margin-left: 4px; + margin-right: 4px; + vertical-align:text-top; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/TitlePane_rtl.css b/js/dojo-1.7.2/dijit/themes/claro/TitlePane_rtl.css new file mode 100644 index 0000000..3f68ab3 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/TitlePane_rtl.css @@ -0,0 +1,4 @@ +/* TitlePane */ +.claro .dijitTitlePaneRtl .dijitClosed .dijitArrowNode { + background-position: -7px 0; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/TitlePane_rtl.less b/js/dojo-1.7.2/dijit/themes/claro/TitlePane_rtl.less new file mode 100644 index 0000000..693584f --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/TitlePane_rtl.less @@ -0,0 +1,7 @@ +/* TitlePane */ + +@import "variables"; + +.claro .dijitTitlePaneRtl .dijitClosed .dijitArrowNode { + background-position: -7px 0; +}
\ No newline at end of file diff --git a/js/dojo-1.7.2/dijit/themes/claro/Toolbar.css b/js/dojo-1.7.2/dijit/themes/claro/Toolbar.css new file mode 100644 index 0000000..18c605c --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Toolbar.css @@ -0,0 +1,189 @@ +/* Toolbar + * + * Styling Toolbar means styling the toolbar container and the widget inside toolbar (dijitToolbar) + * + * 1. toolbar (default styling): + * .dijitToolbar - styles for outer container + * + * 2. widget inside toolbar + * .dijitToolbar .dijitButtonNode - Button widget + * .dijitComboButton - ComboButton widget + * .dijitDropDownButton - DropDownButton widget + * .dijitToggleButton - ToggleButton widget + * + * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside) + * .dijitToolbar .dijitButtonNodeHover - styles for hovered Button widget + * + * 4. actived widget inside toolbar (ie, mouse down on the widget inside) + * .dijitToolbar .dijitButtonNodeActive - mouse down on Button widget + */ +.claro .dijitToolbar { + border-bottom: 1px solid #b5bcc7; + background-color: #efefef; + background-image: url("images/commonHighlight.png"); + background-position: 0 0; + background-repeat: repeat-x; + padding: 2px 0 2px 4px; + zoom: 1; +} +.claro .dijitToolbar label { + padding: 0 3px 0 6px; +} +/** 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; + -moz-border-radius: 2px; + border-radius: 2px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.3s, 0.35s; + -moz-transition-duration: 0.3s, 0.35s; + transition-duration: 0.3s, 0.35s; + background-image: url("images/commonHighlight.png"); + background-position: 0 -30px; + background-repeat: repeat-x; + background-color: rgba(171, 214, 255, 0); +} +.dj_ie .claro .dijitToolbar .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 .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: #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 */ + + -moz-border-radius: 2px 0 0 2px; + border-radius: 2px 0 0 2px; +} +.claro .dijitToolbar .dijitComboButton .dijitArrowButton { + /* no rounded border on side adjacent to button */ + + -moz-border-radius: 0 2px 2px 0; + border-radius: 0 2px 2px 0; +} +.claro .dijitToolbar .dijitComboBox .dijitButtonNode { + padding: 0; +} +/* hover status */ +.claro .dijitToolbar .dijitButtonHover .dijitButtonNode, +.claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, +.claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode, +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode { + background-position: 0 0; + border-width: 1px; + background-color: #abd6ff; + padding: 1px; +} +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { + background-position: 0 0; + background-color: #f3ffff; +} +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover { + background-color: #abd6ff; +} +/* active status */ +.claro .dijitToolbar .dijitButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { + border-width: 1px; + background-color: #7dbdfa; + background-position: 0 -177px; + padding: 1px; +} +.claro .dijitToolbar .dijitComboButtonActive { + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; + border-width: 1px; + padding: 0; +} +.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { + background-color: #f3ffff; + background-position: 0 -177px; + padding: 2px; +} +.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive { + background-color: #7dbdfa; +} +.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive { + background-color: #7dbdfa; +} +/* Avoid double border between button and arrow */ +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { + border-left-width: 0; +} +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { + padding-left: 2px; + /* since there's no left border, don't reduce from 2px --> 1px */ + +} +/* toggle button checked status */ +.claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode { + margin: 0; + /* remove margin and add a border */ + + border-width: 1px; + border-style: solid; + background-image: none; + border-color: #759dc0; + background-color: #ffffff; + padding: 1px; +} +.dj_ie6 .claro .dijitToolbar { + background-image: none; +} +.claro .dijitToolbarSeparator { + /* separator icon in the editor sprite */ + + background: url("../../icons/images/editorIconsEnabled.png"); +} +/* Toolbar inside of disabled Editor */ +.claro .dijitDisabled .dijitToolbar { + background: none; + background-color: #efefef; + border-bottom: 1px solid #d3d3d3; +} +.claro .dijitToolbar .dijitComboBoxDisabled .dijitArrowButtonInner { + background-position: 0 50%; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Toolbar.less b/js/dojo-1.7.2/dijit/themes/claro/Toolbar.less new file mode 100644 index 0000000..b61e819 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Toolbar.less @@ -0,0 +1,187 @@ +/* Toolbar + * + * Styling Toolbar means styling the toolbar container and the widget inside toolbar (dijitToolbar) + * + * 1. toolbar (default styling): + * .dijitToolbar - styles for outer container + * + * 2. widget inside toolbar + * .dijitToolbar .dijitButtonNode - Button widget + * .dijitComboButton - ComboButton widget + * .dijitDropDownButton - DropDownButton widget + * .dijitToggleButton - ToggleButton widget + * + * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside) + * .dijitToolbar .dijitButtonNodeHover - styles for hovered Button widget + * + * 4. actived widget inside toolbar (ie, mouse down on the widget inside) + * .dijitToolbar .dijitButtonNodeActive - mouse down on Button widget + */ + +@import "variables"; + +.claro .dijitToolbar { + border-bottom: 1px solid @border-color; + background-color: @bar-background-color; + background-image: url(@image-common-highlight); + background-position:0 0; + background-repeat:repeat-x; + padding: 2px 0 2px 4px; + zoom: 1; +} + +.claro .dijitToolbar label { + padding: 0 3px 0 6px; +} + +/** override claro/form/Button.css, 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); + .box-shadow(none); + .transition-property(background-color); + .transition-duration(.3s, .35s); + + 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 .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 .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 { + /* no rounded border on side adjacent to arrow */ + .border-radius(@toolbar-button-border-radius 0 0 @toolbar-button-border-radius); +} +.claro .dijitToolbar .dijitComboButton .dijitArrowButton { + /* no rounded border on side adjacent to button */ + .border-radius(0 @toolbar-button-border-radius @toolbar-button-border-radius 0); +} + +.claro .dijitToolbar .dijitComboBox .dijitButtonNode { + padding: 0; +} + +/* hover status */ +.claro .dijitToolbar .dijitButtonHover .dijitButtonNode, +.claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, +.claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode, +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode { + background-position:0 0; + border-width:1px; + background-color: @hovered-background-color; + padding: 1px; +} +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { + background-position:0 0; + background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color; +} +.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover, +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover { + background-color: @hovered-background-color; +} + +/* active status */ +.claro .dijitToolbar .dijitButtonActive .dijitButtonNode, +.claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, +.claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { + border-width: 1px; + background-color:@pressed-background-color; + background-position:0 -177px; + padding: 1px; +} +.claro .dijitToolbar .dijitComboButtonActive { + .transition-duration(.2s); + border-width: 1px; + padding: 0; +} +.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode, +.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { + background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color; + background-position:0 -177px; + padding: 2px; +} +.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive { + background-color: @pressed-background-color; +} +.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive { + background-color: @pressed-background-color; +} + +/* Avoid double border between button and arrow */ +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton, +.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { + border-left-width: 0; +} +.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { + padding-left: 2px; /* since there's no left border, don't reduce from 2px --> 1px */ +} + +/* toggle button checked status */ +.claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode { + margin: 0; /* remove margin and add a border */ + border-width: 1px; + border-style: solid; + background-image: none; + border-color: @selected-border-color; + background-color: @toolbar-button-checked-background-color; + padding: 1px; +} + +.dj_ie6 .claro .dijitToolbar { + background-image: none; +} + +.claro .dijitToolbarSeparator { + /* separator icon in the editor sprite */ + background: url(@image-editor-icons-enabled); +} + +/* Toolbar inside of disabled Editor */ +.claro .dijitDisabled .dijitToolbar { + background:none; + background-color:@disabled-background-color; + border-bottom: 1px solid @disabled-border-color; +} + +.claro .dijitToolbar .dijitComboBoxDisabled .dijitArrowButtonInner { + background-position:0 50%; +} + diff --git a/js/dojo-1.7.2/dijit/themes/claro/Toolbar_rtl.css b/js/dojo-1.7.2/dijit/themes/claro/Toolbar_rtl.css new file mode 100644 index 0000000..2fab1de --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Toolbar_rtl.css @@ -0,0 +1,30 @@ +/* Toolbar RTL */ +/* Repeated rules from Toolbar.css to override rule from Button_rtl.css, which is loaded after Toolbar.css */ +.claro .dijitToolbar .dijitComboButtonRtl .dijitButtonNode { + border-width: 0; + padding: 2px; +} +.claro .dijitToolbar .dijitComboButtonRtlHover .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonRtlActive .dijitButtonNode { + border-width: 1px; + padding: 1px; +} +.claro .dijitToolbar .dijitComboButtonRtl .dijitStretch { + /* no rounded border on side adjacent to arrow */ + + -moz-border-radius: 0 2px 2px 0; + border-radius: 0 2px 2px 0; +} +.claro .dijitToolbar .dijitComboButtonRtl .dijitArrowButton { + /* no rounded border on side adjacent to button */ + + -moz-border-radius: 2px 0 0 2px; + border-radius: 2px 0 0 2px; +} +.claro .dijitToolbar .dijitComboButtonRtlHover .dijitArrowButton, .claro .dijitToolbar .dijitComboButtonRtlActive .dijitArrowButton { + /* border between button and arrow */ + + border-left-width: 1px; + border-right-width: 0; + padding-left: 1px; + padding-right: 2px; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Toolbar_rtl.less b/js/dojo-1.7.2/dijit/themes/claro/Toolbar_rtl.less new file mode 100644 index 0000000..8d31c88 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Toolbar_rtl.less @@ -0,0 +1,32 @@ +/* Toolbar RTL */ + +@import "variables"; + +/* Repeated rules from Toolbar.css to override rule from Button_rtl.css, which is loaded after Toolbar.css */ +.claro .dijitToolbar .dijitComboButtonRtl .dijitButtonNode { + border-width: 0; + padding: 2px; +} +.claro .dijitToolbar .dijitComboButtonRtlHover .dijitButtonNode, +.claro .dijitToolbar .dijitComboButtonRtlActive .dijitButtonNode { + border-width: 1px; + padding: 1px; +} + +.claro .dijitToolbar .dijitComboButtonRtl .dijitStretch { + /* no rounded border on side adjacent to arrow */ + .border-radius(0 2px 2px 0); +} +.claro .dijitToolbar .dijitComboButtonRtl .dijitArrowButton { + /* no rounded border on side adjacent to button */ + .border-radius(2px 0 0 2px); +} + +.claro .dijitToolbar .dijitComboButtonRtlHover .dijitArrowButton, +.claro .dijitToolbar .dijitComboButtonRtlActive .dijitArrowButton { + /* border between button and arrow */ + border-left-width: 1px; + border-right-width: 0; + padding-left: 1px; + padding-right: 2px; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Tree.css b/js/dojo-1.7.2/dijit/themes/claro/Tree.css new file mode 100644 index 0000000..738bb33 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Tree.css @@ -0,0 +1,134 @@ +/* Tree + * + * Styling Tree mostly means styling the TreeRow (dijitTreeRow) + * There are 4 basic states to style: + * + * Tree Row: + * 1. tree row (default styling): + * .dijitTreeRow - styles for each row of the tree + * + * 2. hovered tree row (mouse hover on a tree row) + * .dijitTreeRowHover - styles when mouse over on one row + * + * 3. active tree row (mouse down on a tree row) + * .dijitTreeRowActive - styles when mouse down on one row + * + * 4. selected tree row + * dijitTreeRowSelected - style when the row has been selected + * + * Tree Expando: + * dijitTreeExpando - the expando at the left of the text of each tree row + * + * Drag and Drop on TreeNodes: (insert line on dijitTreeContent node so it'll aligned w/ target element) + * .dijitTreeNode .dojoDndItemBefore/.dojoDndItemAfter - use border style simulate a separate line + */ +.claro .dijitTreeNode { + zoom: 1; + /* force layout on IE (TODO: may not be needed anymore) */ + +} +.claro .dijitTreeIsRoot { + background-image: none; +} +/* Styling for basic tree node (unhovered, unselected) + * Also use this styling when dropping between items on the tree (in other words, don't + * use hover effect) + */ +.claro .dijitTreeRow, .claro .dijitTreeNode .dojoDndItemBefore, .claro .dijitTreeNode .dojoDndItemAfter { + /* so insert line shows up on IE when dropping after a target element */ + + padding: 4px 1px 2px 0; + margin: 0 1px; + /* replaced by border for selected/hovered row */ + + background-color: none; + background-color: transparent; + background-color: rgba(171, 214, 255, 0); + background-position: 0 0; + background-repeat: repeat-x; + border-color: rgba(118, 157, 192, 0); + border-width: 0; + color: #000000; + -webkit-transition-property: background-color, border-color; + -moz-transition-property: background-color, border-color; + transition-property: background-color, border-color; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.claro .dijitTreeRowSelected { + background-repeat: repeat-x; + background-color: #cfe5fa; + background-image: url("images/commonHighlight.png"); + padding: 3px 0 1px; + margin: 0; + 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 #759dc0; + color: #000000; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; +} +.claro .dijitTreeRowActive { + background-color: #7dbdfa; + background-image: url("images/commonHighlight.png"); + background-position: 0 -177px; + padding: 3px 0 1px; + margin-left: 0; + border: solid 1px #759dc0; + color: #000000; +} +.dj_ie6 .claro .dijitTreeRow { + background-image: none; +} +.claro .dijitTreeRowFocused { + background-repeat: repeat; +} +/* expando (open/closed) icon */ +.claro .dijitTreeExpando { + background-image: url("images/treeExpandImages.png"); + width: 16px; + height: 16px; + background-position: -35px 0; + /* for dijitTreeExpandoOpened */ + +} +.dj_ie6 .claro .dijitTreeExpando { + background-image: url("images/treeExpandImages8bit.png"); +} +.claro .dijitTreeRowHover .dijitTreeExpandoOpened { + background-position: -53px 0; +} +.claro .dijitTreeExpandoClosed { + background-position: 1px 0; +} +.claro .dijitTreeRowHover .dijitTreeExpandoClosed { + background-position: -17px 0; +} +.claro .dijitTreeExpandoLeaf, .dj_ie6 .claro .dijitTreeExpandoLeaf { + background-image: none; +} +.claro .dijitTreeExpandoLoading { + background-image: url("images/loadingAnimation.gif"); +} +/* Drag and Drop on TreeNodes + * Put insert line on dijitTreeContent node so it's aligned w/ + * (ie, indented equally with) target element, even + * though dijitTreeRowNode is the actual "drag object" + */ +.claro .dijitTreeNode .dojoDndItemBefore .dijitTreeContent { + border-top: 2px solid #759dc0; +} +.claro .dijitTreeNode .dojoDndItemAfter .dijitTreeContent { + border-bottom: 2px solid #759dc0; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/Tree.less b/js/dojo-1.7.2/dijit/themes/claro/Tree.less new file mode 100644 index 0000000..ff6cd5a --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/Tree.less @@ -0,0 +1,134 @@ +/* Tree + * + * Styling Tree mostly means styling the TreeRow (dijitTreeRow) + * There are 4 basic states to style: + * + * Tree Row: + * 1. tree row (default styling): + * .dijitTreeRow - styles for each row of the tree + * + * 2. hovered tree row (mouse hover on a tree row) + * .dijitTreeRowHover - styles when mouse over on one row + * + * 3. active tree row (mouse down on a tree row) + * .dijitTreeRowActive - styles when mouse down on one row + * + * 4. selected tree row + * dijitTreeRowSelected - style when the row has been selected + * + * Tree Expando: + * dijitTreeExpando - the expando at the left of the text of each tree row + * + * Drag and Drop on TreeNodes: (insert line on dijitTreeContent node so it'll aligned w/ target element) + * .dijitTreeNode .dojoDndItemBefore/.dojoDndItemAfter - use border style simulate a separate line + */ + +@import "variables"; + +.claro .dijitTreeNode { + zoom: 1; /* force layout on IE (TODO: may not be needed anymore) */ +} +.claro .dijitTreeIsRoot { + background-image: none; +} + +/* Styling for basic tree node (unhovered, unselected) + * Also use this styling when dropping between items on the tree (in other words, don't + * use hover effect) + */ +.claro .dijitTreeRow, +.claro .dijitTreeNode .dojoDndItemBefore, +.claro .dijitTreeNode .dojoDndItemAfter { + /* so insert line shows up on IE when dropping after a target element */ + padding: 4px 1px 2px 0; + margin: 0 1px; /* replaced by border for selected/hovered row */ + + background-color: none; // IE6 doesn't understand rgba() or transparent below + background-color: transparent; // IE8 doesn't understand rgba() below + background-color: rgba(171,214,255,0); // rgba() instead of transparent to prevent flash on hover fade-in + background-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); +} + +.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; + color:@selected-text-color; +} +.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; + color:@hovered-text-color; + .transition-duration(.25s); +} +.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 .dijitTreeRow { + background-image: none; +} +.claro .dijitTreeRowFocused { + background-repeat: repeat; +} + +/* expando (open/closed) icon */ + +.claro .dijitTreeExpando { + background-image: url(@image-tree-expand); + width: 16px; + height: 16px; + background-position: -35px 0; /* for dijitTreeExpandoOpened */ +} +.dj_ie6 .claro .dijitTreeExpando { + background-image: url(@image-tree-expand-ie6); +} +.claro .dijitTreeRowHover .dijitTreeExpandoOpened { + background-position: -53px 0; +} +.claro .dijitTreeExpandoClosed { + background-position: 1px 0; +} +.claro .dijitTreeRowHover .dijitTreeExpandoClosed { + background-position: -17px 0; +} +.claro .dijitTreeExpandoLeaf, +.dj_ie6 .claro .dijitTreeExpandoLeaf { + background-image:none; +} +.claro .dijitTreeExpandoLoading { + background-image: url(@image-loading-animation); +} + +/* Drag and Drop on TreeNodes + * Put insert line on dijitTreeContent node so it's aligned w/ + * (ie, indented equally with) target element, even + * though dijitTreeRowNode is the actual "drag object" + */ +.claro .dijitTreeNode .dojoDndItemBefore .dijitTreeContent { + border-top: 2px solid @dnd-dropseparator-color; // TODO: normal separator is just 1px, why is this 2px? +} +.claro .dijitTreeNode .dojoDndItemAfter .dijitTreeContent { + border-bottom: 2px solid @dnd-dropseparator-color; // TODO: normal separator is just 1px, why is this 2px? +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/claro.css b/js/dojo-1.7.2/dijit/themes/claro/claro.css new file mode 100644 index 0000000..d3cb268 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/claro.css @@ -0,0 +1,28 @@ +@import url("../dijit.css"); +@import url("../../icons/commonIcons.css");/*sprite containing common icons to be used by all themes*/ +@import url("Common.css"); +@import url("form/Common.css"); +@import url("form/Button.css"); +@import url("form/Checkbox.css"); +@import url("form/RadioButton.css"); +@import url("form/Select.css"); +@import url("layout/TabContainer.css"); +@import url("Dialog.css"); +@import url("layout/AccordionContainer.css"); +@import url("layout/ContentPane.css"); +@import url("Calendar.css"); +@import url("Menu.css"); +@import url("form/Slider.css"); +@import url("ColorPalette.css"); +@import url("InlineEditBox.css"); +@import url("ProgressBar.css"); +@import url("TimePicker.css"); +@import url("layout/BorderContainer.css"); +@import url("Tree.css"); +@import url("Toolbar.css"); +@import url("Editor.css");/*in order to test button or menu item with icon */ +@import url("../../icons/editorIcons.css"); /*sprite for editor icons to be used by all themes*/ +@import url("TitlePane.css"); +@import url("form/NumberSpinner.css"); + +@import url("claro_rtl.css"); diff --git a/js/dojo-1.7.2/dijit/themes/claro/claro_rtl.css b/js/dojo-1.7.2/dijit/themes/claro/claro_rtl.css new file mode 100644 index 0000000..6f85707 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/claro_rtl.css @@ -0,0 +1,16 @@ +/* RTL files */ +@import url("../dijit_rtl.css"); +@import url("form/Common_rtl.css"); +@import url("form/Button_rtl.css"); +@import url("layout/TabContainer_rtl.css"); +@import url("form/Slider_rtl.css"); +@import url("form/Select_rtl.css"); +@import url("Dialog_rtl.css"); +@import url("Editor_rtl.css"); +@import url("../../icons/editorIcons_rtl.css");/* RTL sprite for editor icons to be used by all themes*/ +@import url("../../icons/commonIcons_rtl.css");/* RTL sprite for common icons to be used by all themes*/ +@import url("TitlePane_rtl.css"); +@import url("Menu_rtl.css"); +@import url("Calendar_rtl.css"); +@import url("TimePicker_rtl.css"); +@import url("Toolbar_rtl.css"); diff --git a/js/dojo-1.7.2/dijit/themes/claro/compile.js b/js/dojo-1.7.2/dijit/themes/claro/compile.js new file mode 100644 index 0000000..08e6375 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/compile.js @@ -0,0 +1,52 @@ +// Script to process all the less files and convert them to CSS files +// Run from themes/dijit/claro like: +// +// $ node compile.js + +var fs = require('fs'), // file system access + path = require('path'), // get directory from file name + less = require('../../../util/less'); // less processor + +var options = { + compress: false, + optimization: 1, + silent: false +}; + +var allFiles = [].concat( + fs.readdirSync("."), + fs.readdirSync("form").map(function(fname){ return "form/"+fname; }), + fs.readdirSync("layout").map(function(fname){ return "layout/"+fname; }) + ), + lessFiles = allFiles.filter(function(name){ return name && name != "variables.less" && /\.less$/.test(name); }); + +lessFiles.forEach(function(fname){ + console.log("=== " + fname); + fs.readFile(fname, 'utf-8', function(e, data){ + if(e){ + console.error("lessc: " + e.message); + process.exit(1); + } + + new(less.Parser)({ + paths: [path.dirname(fname)], + optimization: options.optimization, + filename: fname + }).parse(data, function(err, tree){ + if(err){ + less.writeError(err, options); + process.exit(1); + }else{ + try{ + var css = tree.toCSS({ compress: options.compress }), + outputFname = fname.replace('.less', '.css'); + var fd = fs.openSync(outputFname, "w"); + fs.writeSync(fd, css, 0, "utf8"); + }catch(e){ + less.writeError(e, options); + process.exit(2); + } + } + }); + }); +}); diff --git a/js/dojo-1.7.2/dijit/themes/claro/document.css b/js/dojo-1.7.2/dijit/themes/claro/document.css new file mode 100644 index 0000000..64e470c --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/document.css @@ -0,0 +1,41 @@ +@import url("../../../dojo/resources/dojo.css"); +/* ======= Styling for the document itself (overriding dojo.css) ======== */ +.claro { + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: .688em; + color: #131313; +} +/* Headings */ +.claro h1 { + font-size: 1.545em; + margin-bottom: 0.727em; +} +.claro h2 { + font-size: 1.364em; + line-height: 1.455em; + margin-top: 1em; + margin-bottom: 0.60em; + font-weight: normal; +} +.claro h3, +.claro h4, +.claro h5, +.claro h6 { + font-size: 1.091em; + font-weight: normal; +} +/* paragraphs, quotes and lists */ +.claro p { + line-height: 1.3em; +} +/* pre and code */ +.claro pre, .claro code { + font-family: inherit; + background-color: #efefef; + border: 1px solid #d3d3d3; +} +/* tables */ +.claro table.dojoTabular thead, .claro table.dojoTabular tfoot { + background-color: #efefef; + border: 1px solid #d3d3d3; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/document.less b/js/dojo-1.7.2/dijit/themes/claro/document.less new file mode 100644 index 0000000..7f86356 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/document.less @@ -0,0 +1,45 @@ +/* ======= Styling for the document itself (overriding dojo.css) ======== */ + +@import "variables"; +@import url("../../../dojo/resources/dojo.css"); + +.claro { + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: .688em; + color: @document-text-color; +} + +/* Headings */ +.claro h1 { + font-size: 1.545em; + margin-bottom:0.727em; +} +.claro h2 { + font-size: 1.364em; + line-height: 1.455em; + margin-top:1em; + margin-bottom:0.60em; + font-weight: normal; +} +.claro h3, .claro h4, .claro h5, .claro h6 { + font-size:1.091em; + font-weight: normal; +} + +/* paragraphs, quotes and lists */ +.claro p { + line-height: 1.3em; +} + +/* pre and code */ +.claro pre, .claro code { + font-family:inherit; + background-color: @document-shadedsection-background-color; + border: 1px solid @document-border-color; +} + +/* tables */ +.claro table.dojoTabular thead, .claro table.dojoTabular tfoot { + background-color: @document-shadedsection-background-color; + border: 1px solid @document-border-color; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Button.css b/js/dojo-1.7.2/dijit/themes/claro/form/Button.css new file mode 100644 index 0000000..bc7c3dc --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Button.css @@ -0,0 +1,162 @@ +/* Button | DropDownButton | ComboButton | ToggleButton + * + * Styling Buttons mainly includes: + * + * 1. Containers + * .dijitButton + * .dijitDropDownButton + * .dijitComboButton + * .dijitButtonNode - common button/arrow wrapper shared across all three button types + * + * 2. Button text + * .dijitButtonText + * + * 3. Arrows - only for DropDownButton and ComboButton + * There are total four directions arrows - down, left, right, up: + * .dijitArrowButtonInner - down arrow by default + * .dijitLeftArrowButton .dijitArrowButtonInner - left arrow + * .dijitRightArrowButton .dijitArrowButtonInner - right arrow + * .dijitUpArrowButton .dijitArrowButtonInner - up arrow + * + * 4. States - Hover, Active, Disabled, e.g. + * .dijitButtonHover .dijitButtonNode + * .dijitButtonActive .dijitButtonNode + * .dijitButtonDisabled .dijitButtonNode + * + * .dijitDisabled .dijitArrowButtonInner - disabled arrow states + */ +.claro .dijitButtonNode { + /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */ + + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.claro .dijitButton .dijitButtonNode, +.claro .dijitDropDownButton .dijitButtonNode, +.claro .dijitComboButton .dijitButtonNode, +.claro .dijitToggleButton .dijitButtonNode { + /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */ + + border: 1px solid #759dc0; + padding: 2px 4px 4px 4px; + background-image: url("../form/images/button.png"); + background-position: center top; + background-repeat: repeat-x; + background-color: #e5f2fe; + color: #000000; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); +} +.claro .dijitComboButton .dijitArrowButton { + border-left-width: 0; + padding: 4px 2px 4px 2px; + /* TODO: still needed? */ + +} +/*arrow styles for down/up/left/right directions*/ +.claro .dijitArrowButtonInner { + width: 15px; + height: 15px; + margin: 0 auto; + background-image: url("../form/images/buttonArrows.png"); + background-repeat: no-repeat; + background-position: -51px 53%; +} +.claro .dijitLeftArrowButton .dijitArrowButtonInner { + background-position: -77px 53%; +} +.claro .dijitRightArrowButton .dijitArrowButtonInner { + background-position: -26px 53%; +} +.claro .dijitUpArrowButton .dijitArrowButtonInner { + background-position: 0 53%; +} +.claro .dijitDisabled .dijitArrowButtonInner { + background-position: -151px 53%; +} +.claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner { + background-position: -177px 53%; +} +.claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner { + background-position: -126px 53%; +} +.claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner { + background-position: -100px 53%; +} +.claro .dijitButtonText { + padding: 0 0.3em; + text-align: center; +} +/* hover status */ +.claro .dijitButtonHover .dijitButtonNode, +.claro .dijitDropDownButtonHover .dijitButtonNode, +.claro .dijitComboButton .dijitButtonNodeHover, +.claro .dijitComboButton .dijitDownArrowButtonHover, +.claro .dijitToggleButtonHover .dijitButtonNode { + background-color: #abd6ff; + color: #000000; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; +} +/* active, checked status */ +.claro .dijitButtonActive .dijitButtonNode, +.claro .dijitDropDownButtonActive .dijitButtonNode, +.claro .dijitComboButtonActive .dijitButtonNode, +.claro .dijitToggleButtonActive .dijitButtonNode, +.claro .dijitStackController .dijitToggleButtonChecked .dijitButtonNode { + background-color: #abd6ff; + -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + box-shadow: 0 0 0 rgba(0, 0, 0, 0); + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; +} +/* disabled status */ +.claro .dijitButtonDisabled, +.claro .dijitDropDownButtonDisabled, +.claro .dijitComboButtonDisabled, +.claro .dijitToggleButtonDisabled { + background-image: none; + outline: none; +} +.claro .dijitButtonDisabled .dijitButtonNode, +.claro .dijitDropDownButtonDisabled .dijitButtonNode, +.claro .dijitComboButtonDisabled .dijitButtonNode, +.claro .dijitToggleButtonDisabled .dijitButtonNode { + background-position: 0 -149px; + background-color: #efefef; + border: solid 1px #d3d3d3; + color: #818181; + -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + box-shadow: 0 0 0 rgba(0, 0, 0, 0); +} +.claro .dijitComboButtonDisabled .dijitArrowButton { + border-left-width: 0; +} +/* for ComboButton */ +.claro table.dijitComboButton { + border-collapse: separate; + /* override dijit.css so that ComboBox rounded corners work */ + +} +.dj_ie6 .claro .dijitButtonNode { + background-image: none; +} +.claro .dijitComboButton .dijitStretch { + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} +.claro .dijitComboButton .dijitArrowButton { + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Button.less b/js/dojo-1.7.2/dijit/themes/claro/form/Button.less new file mode 100644 index 0000000..208e4de --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Button.less @@ -0,0 +1,156 @@ +/* Button | DropDownButton | ComboButton | ToggleButton + * + * Styling Buttons mainly includes: + * + * 1. Containers + * .dijitButton + * .dijitDropDownButton + * .dijitComboButton + * .dijitButtonNode - common button/arrow wrapper shared across all three button types + * + * 2. Button text + * .dijitButtonText + * + * 3. Arrows - only for DropDownButton and ComboButton + * There are total four directions arrows - down, left, right, up: + * .dijitArrowButtonInner - down arrow by default + * .dijitLeftArrowButton .dijitArrowButtonInner - left arrow + * .dijitRightArrowButton .dijitArrowButtonInner - right arrow + * .dijitUpArrowButton .dijitArrowButtonInner - up arrow + * + * 4. States - Hover, Active, Disabled, e.g. + * .dijitButtonHover .dijitButtonNode + * .dijitButtonActive .dijitButtonNode + * .dijitButtonDisabled .dijitButtonNode + * + * .dijitDisabled .dijitArrowButtonInner - disabled arrow states + */ + +@import "../variables"; + +.claro .dijitButtonNode { + /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */ + .transition-property(background-color); + .transition-duration(.3s); +} + +.claro .dijitButton .dijitButtonNode, +.claro .dijitDropDownButton .dijitButtonNode, +.claro .dijitComboButton .dijitButtonNode, +.claro .dijitToggleButton .dijitButtonNode { + /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */ + border: 1px solid @button-border-color; + padding:2px 4px 4px 4px; + background-image: url("../@{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)); +} + +.claro .dijitComboButton .dijitArrowButton { + border-left-width: 0; + padding: 4px 2px 4px 2px; /* TODO: still needed? */ +} + +/*arrow styles for down/up/left/right directions*/ +.claro .dijitArrowButtonInner { + width: 15px; + height: 15px; + margin: 0 auto; + background-image:url("../@{image-form-button-arrows}"); + background-repeat:no-repeat; + background-position:-51px 53%; +} +.claro .dijitLeftArrowButton .dijitArrowButtonInner { + background-position: -77px 53%; +} +.claro .dijitRightArrowButton .dijitArrowButtonInner { + background-position: -26px 53%; +} +.claro .dijitUpArrowButton .dijitArrowButtonInner { + background-position: 0 53%; +} +.claro .dijitDisabled .dijitArrowButtonInner { + background-position: -151px 53%; +} +.claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner { + background-position: -177px 53%; +} +.claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner { + background-position: -126px 53%; +} +.claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner { + background-position: -100px 53%; +} + +.claro .dijitButtonText { + padding: 0 0.3em; + text-align: center; +} + + + + + +/* hover status */ +.claro .dijitButtonHover .dijitButtonNode, +.claro .dijitDropDownButtonHover .dijitButtonNode, +.claro .dijitComboButton .dijitButtonNodeHover, +.claro .dijitComboButton .dijitDownArrowButtonHover, +.claro .dijitToggleButtonHover .dijitButtonNode { + background-color: @button-hovered-background-color; + color:@text-color; + .transition-duration(.2s); +} + +/* active, checked status */ +.claro .dijitButtonActive .dijitButtonNode, +.claro .dijitDropDownButtonActive .dijitButtonNode, +.claro .dijitComboButtonActive .dijitButtonNode, +.claro .dijitToggleButtonActive .dijitButtonNode, +.claro .dijitStackController .dijitToggleButtonChecked .dijitButtonNode { + background-color: @button-pressed-background-color; + .box-shadow(0 0 0 rgba(0,0,0,0)); + .transition-duration(.1s); +} + +/* disabled status */ +.claro .dijitButtonDisabled, +.claro .dijitDropDownButtonDisabled, +.claro .dijitComboButtonDisabled, +.claro .dijitToggleButtonDisabled { + background-image: none; + outline: none; +} + +.claro .dijitButtonDisabled .dijitButtonNode, +.claro .dijitDropDownButtonDisabled .dijitButtonNode, +.claro .dijitComboButtonDisabled .dijitButtonNode, +.claro .dijitToggleButtonDisabled .dijitButtonNode { + background-position:0 -149px; + background-color: @disabled-background-color; + border: solid 1px @disabled-border-color; + color: @disabled-text-color; + .box-shadow(0 0 0 rgba(0,0,0,0)); +} +.claro .dijitComboButtonDisabled .dijitArrowButton{ + border-left-width: 0; +} +/* for ComboButton */ +.claro table.dijitComboButton { + border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */ +} + +.dj_ie6 .claro .dijitButtonNode { + background-image: none; +} + +.claro .dijitComboButton .dijitStretch { + .border-radius(@button-border-radius 0 0 @button-border-radius); +} +.claro .dijitComboButton .dijitArrowButton { + .border-radius(0 @button-border-radius @button-border-radius 0); +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Button_rtl.css b/js/dojo-1.7.2/dijit/themes/claro/form/Button_rtl.css new file mode 100644 index 0000000..2d5b08b --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Button_rtl.css @@ -0,0 +1,13 @@ +/* Combo Button */ +.claro .dijitComboButtonRtl .dijitStretch { + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} +.claro .dijitComboButtonRtl .dijitArrowButton { + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; + padding: 3px 0 4px; + border-left-width: 1px; + border-right-width: 0; +} +/* End Combo Button */
\ No newline at end of file diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Button_rtl.less b/js/dojo-1.7.2/dijit/themes/claro/form/Button_rtl.less new file mode 100644 index 0000000..6225d68 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Button_rtl.less @@ -0,0 +1,16 @@ +@import "../variables"; + +/* Combo Button */ + +.claro .dijitComboButtonRtl .dijitStretch { + .border-radius(0 @button-border-radius @button-border-radius 0); +} + +.claro .dijitComboButtonRtl .dijitArrowButton { + .border-radius(@button-border-radius 0 0 @button-border-radius); + padding:3px 0 4px; + border-left-width: 1px; + border-right-width: 0; +} + +/* End Combo Button */
\ No newline at end of file diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Checkbox.css b/js/dojo-1.7.2/dijit/themes/claro/form/Checkbox.css new file mode 100644 index 0000000..1c1a3c4 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Checkbox.css @@ -0,0 +1,71 @@ +/* CheckBox + * + * Styling CheckBox mainly includes: + * + * 1. Containers + * .dijitCheckBox|.dijitCheckBoxIcon - for border, padding, width|height and background image + * + * 2. CheckBox within ToggleButton + * .dijitToggleButton|.dijitToggleButtonChecked .* - for background image + * + * 3. Checked state + * .dijitCheckBoxChecked - for checked background-color|image + * .dijitToggleButtonChecked - for border, background-color|image, display and width|height + * + * 4. Hover state + * .dijitCheckBoxHover|.dijitCheckBoxCheckedHover - for background image + * + * 5. Disabled state + * .dijitCheckBoxDisabled|.dijitCheckBoxCheckedDisabled - for background image + */ +.claro .dijitToggleButton .dijitCheckBoxIcon { + background-image: url("../images/checkmarkNoBorder.png"); +} +.dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon { + background-image: url("../images/checkmarkNoBorder.gif"); +} +.claro .dijitCheckBox, .claro .dijitCheckBoxIcon { + background-image: url("../form/images/checkboxRadioButtonStates.png"); + /* checkbox sprite image */ + + background-repeat: no-repeat; + width: 15px; + height: 16px; + margin: 0 2px 0 0; + padding: 0; +} +.dj_ie6 .claro .dijitCheckBox, .dj_ie6 .claro .dijitCheckBoxIcon { + background-image: url("../form/images/checkboxAndRadioButtons_IE6.png"); + /* checkbox sprite image */ + +} +.claro .dijitCheckBox, .claro .dijitToggleButton .dijitCheckBoxIcon { + /* unchecked */ + + background-position: -15px; +} +.claro .dijitCheckBoxChecked, .claro .dijitToggleButtonChecked .dijitCheckBoxIcon { + /* checked */ + + background-position: 0; +} +.claro .dijitCheckBoxDisabled { + /* disabled */ + + background-position: -75px; +} +.claro .dijitCheckBoxCheckedDisabled { + /* disabled but checked */ + + background-position: -60px; +} +.claro .dijitCheckBoxHover { + /* hovering over an unchecked enabled checkbox */ + + background-position: -45px; +} +.claro .dijitCheckBoxCheckedHover { + /* hovering over an checked enabled checkbox */ + + background-position: -30px; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Checkbox.less b/js/dojo-1.7.2/dijit/themes/claro/form/Checkbox.less new file mode 100644 index 0000000..6ce4448 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Checkbox.less @@ -0,0 +1,79 @@ +/* CheckBox + * + * Styling CheckBox mainly includes: + * + * 1. Containers + * .dijitCheckBox|.dijitCheckBoxIcon - for border, padding, width|height and background image + * + * 2. CheckBox within ToggleButton + * .dijitToggleButton|.dijitToggleButtonChecked .* - for background image + * + * 3. Checked state + * .dijitCheckBoxChecked - for checked background-color|image + * .dijitToggleButtonChecked - for border, background-color|image, display and width|height + * + * 4. Hover state + * .dijitCheckBoxHover|.dijitCheckBoxCheckedHover - for background image + * + * 5. Disabled state + * .dijitCheckBoxDisabled|.dijitCheckBoxCheckedDisabled - for background image + */ + +@import "../variables"; + +.claro .dijitToggleButton .dijitCheckBoxIcon { + background-image: url("../@{image-checkmark}"); +} + +.dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon { + background-image: url("../@{image-checkmark-ie6}"); +} + +.claro .dijitCheckBox, +.claro .dijitCheckBoxIcon /* inside a toggle button */ { + background-image: url("../@{image-form-checkbox-and-radios}"); /* checkbox sprite image */ + background-repeat: no-repeat; + width: 15px; + height: 16px; + margin: 0 2px 0 0; + padding: 0; +} + +.dj_ie6 .claro .dijitCheckBox, +.dj_ie6 .claro .dijitCheckBoxIcon /* inside a toggle button */ { + background-image: url("../@{image-form-checkbox-and-radios-ie6}"); /* checkbox sprite image */ +} + +.claro .dijitCheckBox, +.claro .dijitToggleButton .dijitCheckBoxIcon { + /* unchecked */ + background-position: -15px; +} + +.claro .dijitCheckBoxChecked, +.claro .dijitToggleButtonChecked .dijitCheckBoxIcon { + /* checked */ + background-position: -0; +} + +.claro .dijitCheckBoxDisabled { + /* disabled */ + background-position: -75px; +} + +.claro .dijitCheckBoxCheckedDisabled { + /* disabled but checked */ + background-position: -60px; +} + +.claro .dijitCheckBoxHover { + /* hovering over an unchecked enabled checkbox */ + background-position: -45px; +} + +.claro .dijitCheckBoxCheckedHover { + /* hovering over an checked enabled checkbox */ + background-position: -30px; +} + + diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Common.css b/js/dojo-1.7.2/dijit/themes/claro/form/Common.css new file mode 100644 index 0000000..ce108c1 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Common.css @@ -0,0 +1,178 @@ +/* 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("../form/images/error.png"); + background-position: top center; + border: solid #d46464 0; + border-left-width: 1px; + width: 9px; +} +.claro .dijitTextBoxError .dijitValidationIcon { + width: 0; + background-color: transparent !important; + /* so the INPUT doesn't obscure the border in rtl+a11y */ + +} +/* Padding for the input area of TextBox based widgets, and corresponding padding for the + * down arrow button and the placeholder. placeholder is explicitly listed because + * dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField + * won't affect it + */ +.claro .dijitTextArea, .claro .dijitInputField .dijitPlaceHolder { + padding: 2px; +} +.claro .dijitTextBox .dijitInputField { + padding: 1px 2px; +} +.dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner { + padding: 1px; +} +.claro .dijitTextBox, .claro .dijitTextBox .dijitButtonNode { + /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */ + + border-color: #b5bcc7; + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + transition-property: background-color, border; + -webkit-transition-duration: 0.35s; + -moz-transition-duration: 0.35s; + transition-duration: 0.35s; +} +.claro .dijitTextBox { + background-color: #ffffff; +} +/* hover */ +.claro .dijitTextBoxHover, .claro .dijitTextBoxHover .dijitButtonNode { + border-color: #759dc0; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; +} +.claro .dijitTextBoxHover { + background-color: #e5f2fe; + background-image: url("../form/images/textBox_back.png"); + background-repeat: repeat-x; +} +/* error state */ +.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitButtonNode { + border-color: #d46464; +} +.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitInputContainer { + background-color: #ffffff; +} +/* focused state */ +.claro .dijitTextBoxFocused, .claro .dijitTextBoxFocused .dijitButtonNode { + 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("../form/images/textBox_back.png"); + background-repeat: repeat-x; +} +.claro .dijitTextBoxFocused .dijitInputContainer { + background: #ffffff; +} +.claro .dijitTextBoxErrorFocused, .claro .dijitTextBoxErrorFocused .dijitButtonNode { + border-color: #ce5050; +} +/* disabled state */ +.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitButtonNode { + border-color: #d3d3d3; +} +.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("../form/images/commonFormArrows.png"); + background-position: -35px 53%; + background-repeat: no-repeat; + margin: 0; + width: 16px; + border: 1px solid #ffffff; +} +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; +} +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; +} +/* Add 1px vertical padding to the <input> where user types and the validation icon, + to match the 1px border on arrow button */ +.claro .dijitTextBox .dijitInputInner, .claro .dijitTextBox .dijitValidationContainer { + padding: 1px 0; +} +.claro .dijitComboBox .dijitButtonNode { + background-color: #efefef; + background-image: url("../form/images/formHighlight.png"); + background-repeat: repeat-x; +} +/* Arrow "hover" effect: + * The arrow button should change color whenever the mouse is in a position such that clicking it + * will toggle the drop down. That's either (1) anywhere over the ComboBox or (2) over the arrow + * button, depending on the openOnClick setting for the widget. + */ +.claro .dijitComboBoxOpenOnClickHover .dijitButtonNode, .claro .dijitComboBox .dijitDownArrowButtonHover { + background-color: #abd6ff; +} +.claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner, .claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner { + background-position: -70px 53%; +} +/* Arrow Button change when drop down is open */ +.claro .dijitComboBox .dijitHasDropDownOpen { + background-color: #7dbdfa; + background-position: 0 -177px; + padding: 1px; +} +.claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { + background-position: -70px 53%; + border: 0 none; +} +/* disabled state */ +.claro div.dijitComboBoxDisabled .dijitArrowButtonInner { + /* specific selector set to override background-position setting from Button.js + * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */ + + background-position: 0 50%; + background-color: #efefef; +} +/*========================= hacks for browsers =========================*/ +/* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */ +.dj_ff3 .claro .dijitInputField input[type="hidden"] { + display: none; + height: 0; + width: 0; +} +/* ie6 doesn't support transparent background img */ +.dj_ie6 .claro .dijitTextBox, .dj_ie6 .claro .dijitComboBox .dijitButtonNode { + background-image: none; +} +.dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { + width: 18px; +} +.dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner { + width: 16px; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Common.less b/js/dojo-1.7.2/dijit/themes/claro/form/Common.less new file mode 100644 index 0000000..742a43f --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Common.less @@ -0,0 +1,212 @@ +/* claro/form/Common.css */ + +/*========================= common css =========================*/ + +@import "../variables"; + +/* '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("../@{image-form-error}"); + background-position: top center; + border: solid @erroricon-background-color 0; + border-left-width: 1px; + width: 9px; +} +.claro .dijitTextBoxError .dijitValidationIcon { + width: 0; + background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */ +} + +/* Padding for the input area of TextBox based widgets, and corresponding padding for the + * down arrow button and the placeholder. placeholder is explicitly listed because + * dijitPlaceHolder is absolutely positioned, so padding set on dijitInputField + * won't affect it + */ +.claro .dijitTextArea, +.claro .dijitInputField .dijitPlaceHolder { + padding: @textbox-padding; +} +.claro .dijitTextBox .dijitInputField { + // Subtract 1px from top/bottom because we add 1px to other nodes, see rules below. + // Although we are theoretically only adding 1px to top/bottom browsers seem to pad inputs by 1px on left/right, + // although that varies by so compensate for that too. + padding: @textbox-padding - 1px @textbox-padding; +} +.dj_gecko .claro .dijitTextBox .dijitInputInner, +.dj_webkit .claro .dijitTextBox .dijitInputInner { + // Although we are theoretically only adding 1px to top/bottom, some browsers seem to pad inputs by 1px on left/right, + // so compensate for that too. + padding: @textbox-padding - 1px; +} + +.claro .dijitTextBox, +.claro .dijitTextBox .dijitButtonNode { + /* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */ + border-color: @border-color; + .transition-property(background-color, border); + .transition-duration(.35s); +} +.claro .dijitTextBox { + background-color: @textbox-background-color; +} + +/* hover */ +.claro .dijitTextBoxHover, +.claro .dijitTextBoxHover .dijitButtonNode { + border-color: @hovered-border-color; + .transition-duration(.25s); +} +.claro .dijitTextBoxHover { + background-color: @textbox-hovered-background-color; + background-image: url("../@{image-form-textbox-background}"); + background-repeat: repeat-x; +} + +/* error state */ +.claro .dijitTextBoxError, +.claro .dijitTextBoxError .dijitButtonNode { + border-color: @error-border-color; +} +.claro .dijitTextBoxError, +.claro .dijitTextBoxError .dijitInputContainer { + background-color: @textbox-error-background-color; +} + +/* focused state */ +.claro .dijitTextBoxFocused, +.claro .dijitTextBoxFocused .dijitButtonNode { + border-color:@focused-border-color; + .transition-duration(.1s); +} +.claro .dijitTextBoxFocused { + background-color: @textbox-focused-background-color; + background-image: url("../@{image-form-textbox-background}"); + background-repeat: repeat-x; +} +.claro .dijitTextBoxFocused .dijitInputContainer { + background: @textbox-focused-background-color; +} + +.claro .dijitTextBoxErrorFocused, +.claro .dijitTextBoxErrorFocused .dijitButtonNode { + border-color: @error-focused-border-color; +} + +/* disabled state */ +.claro .dijitTextBoxDisabled, +.claro .dijitTextBoxDisabled .dijitButtonNode { + border-color: @disabled-border-color; +} +.claro .dijitTextBoxDisabled, +.claro .dijitTextBoxDisabled .dijitInputContainer { + background-color: @textbox-disabled-background-color; + background-image: none; +} +.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("../@{image-form-common-arrows}"); + background-position:-35px 53%; + background-repeat: no-repeat; + margin: 0; + width:16px; + border: 1px solid @arrowbutton-inner-border-color; // white gutter around the arrow button +} + +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; +} + +.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; +} + +/* Add 1px vertical padding to the <input> where user types and the validation icon, + to match the 1px border on arrow button */ +.claro .dijitTextBox .dijitInputInner, +.claro .dijitTextBox .dijitValidationContainer { + padding: 1px 0; +} + +.claro .dijitComboBox .dijitButtonNode { + background-color: @arrowbutton-background-color; + background-image: url("../@{image-form-highlight}"); + background-repeat:repeat-x; +} + +/* Arrow "hover" effect: + * The arrow button should change color whenever the mouse is in a position such that clicking it + * will toggle the drop down. That's either (1) anywhere over the ComboBox or (2) over the arrow + * button, depending on the openOnClick setting for the widget. + */ +.claro .dijitComboBoxOpenOnClickHover .dijitButtonNode, +.claro .dijitComboBox .dijitDownArrowButtonHover { + background-color:@arrowbutton-hovered-background-color; +} +.claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner, +.claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner { + background-position:-70px 53%; +} + +/* Arrow Button change when drop down is open */ +.claro .dijitComboBox .dijitHasDropDownOpen { // .dijitHasDropDown is on dijitArrowButton node + background-color: @pressed-background-color; + background-position:0 -177px; + padding: 1px; // Since no border on arrow button (see rule below) +} +.claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { + background-position:-70px 53%; + border: 0 none; +} + +/* disabled state */ +.claro div.dijitComboBoxDisabled .dijitArrowButtonInner { + /* specific selector set to override background-position setting from Button.js + * (.claro .dijitComboBoxDisabled .dijitArrowButtonInner) */ + background-position:0 50%; + background-color:@disabled-background-color; +} + +/*========================= hacks for browsers =========================*/ +/* it seems the input[type="hidden"] has a height (16px) too... this may cause the widget's height calculate error */ +.dj_ff3 .claro .dijitInputField input[type="hidden"] { + display: none; + height: 0; + width: 0; +} + +/* ie6 doesn't support transparent background img */ +.dj_ie6 .claro .dijitTextBox, +.dj_ie6 .claro .dijitComboBox .dijitButtonNode { + background-image: none; +} +.dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner { + width:18px; // quirks mode means border-box sizing, so 18px with the border (same as 16px without border) +} +.dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner { + width:16px; // when no border, then back to 16px just like content-box sizing +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Common_rtl.css b/js/dojo-1.7.2/dijit/themes/claro/form/Common_rtl.css new file mode 100644 index 0000000..74827c1 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Common_rtl.css @@ -0,0 +1,10 @@ +/* claro/form/Common_rtl.css */ +/*claro should not have the icon on the container +.claro .dijitTextBoxRtlError .dijitValidationIcon { + border-left-width: 0; + border-right-width: 1px; +}*/ +.claro .dijitTextBoxRtlError .dijitValidationContainer { + border-left-width: 0; + border-right-width: 1px; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Common_rtl.less b/js/dojo-1.7.2/dijit/themes/claro/form/Common_rtl.less new file mode 100644 index 0000000..fd4975a --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Common_rtl.less @@ -0,0 +1,13 @@ +/* claro/form/Common_rtl.css */ + +@import "../variables"; + +/*claro should not have the icon on the container +.claro .dijitTextBoxRtlError .dijitValidationIcon { + border-left-width: 0; + border-right-width: 1px; +}*/ +.claro .dijitTextBoxRtlError .dijitValidationContainer { + border-left-width: 0; + border-right-width: 1px; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/NumberSpinner.css b/js/dojo-1.7.2/dijit/themes/claro/form/NumberSpinner.css new file mode 100644 index 0000000..fcc8049 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/NumberSpinner.css @@ -0,0 +1,138 @@ +/* NumberSpinner - namespace "dijitSpinner" + * + * Styling NumberSpinner mainly includes: + * + * 1. Arrows + * Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner - for border, padding and position + * Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton + * Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image + * + * 2. Hover state + * .dijitUpArrowButtonHover|.dijitDownArrowButtonHover .* - for background color|image + * + * 3. Active state + * .dijitUpArrowButtonActive|.dijitDownArrowButtonActive .* - for border, padding, margin and background color|image + * + * 4. Focused state + * .dijitSpinnerFocused .* - for background color|image + * + * 5. Disabled state + * .dijitSpinnerDisabled .* - for background color|image + */ +.claro .dijitSpinnerButtonContainer { + overflow: hidden; + position: relative; + width: auto; + padding: 0 2px; +} +.claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner { + border-width: 1px 0; + /* reserve space to match the claro combobox button border with border and not padding to make IE happier */ + + border-style: solid none; +} +/* button */ +.claro .dijitSpinner .dijitArrowButton { + width: auto; + background-color: #efefef; + background-image: url("../form/images/formHighlight.png"); + background-position: 0 0; + background-repeat: repeat-x; + overflow: hidden; +} +.dj_iequirks .claro .dijitSpinner .dijitArrowButton { + overflow: visible; + /* 0 height w/o this */ + +} +.claro .dijitSpinner .dijitSpinnerButtonInner { + width: 15px; +} +/* up & down button icons */ +.claro .dijitSpinner .dijitArrowButtonInner { + border: solid 1px #ffffff; + border-bottom-width: 0; + /* 2 top borders = 1 top+bottom border in ComboBox */ + + background-image: url("../form/images/commonFormArrows.png"); + background-repeat: no-repeat; + height: 100%; + width: 15px; + padding-left: 1px; + padding-right: 1px; + /* for up arrow */ + + background-position: -139px center; + /* override button.css (TODO: move to Common.css since ComboBox needs this too) */ + + display: block; + margin: -1px 0 -1px 0; + /* compensate for inner border */ + +} +.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, .dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner { + margin-top: 0; + /* since its bottom aligned */ + +} +.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner { + width: 19px; +} +.claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner { + background-position: -34px; +} +.claro .dijitSpinner .dijitArrowButtonInner .dijitInputField { + padding: 0; +} +/** hover & focused status **/ +.claro .dijitUpArrowButtonActive, .claro .dijitDownArrowButtonActive { + background-color: #abd6ff; +} +.claro .dijitSpinner .dijitUpArrowButtonHover, .claro .dijitSpinner .dijitDownArrowButtonHover, .claro .dijitSpinnerFocused .dijitArrowButton { + background-color: #abd6ff; +} +.claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner { + background-position: -174px; +} +.claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner { + background-position: -69px; +} +.claro .dijitSpinnerFocused { + background-color: #ffffff; + background-image: none; +} +/* mouse down status */ +.claro .dijitSpinner .dijitDownArrowButtonActive, .claro .dijitSpinner .dijitUpArrowButtonActive { + background-color: #7dbefa; + background-position: 0 -177px; +} +.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { + /* hide inner border while button is depressed */ + + border: 0; + padding: 1px; + margin-right: 2px; + margin-bottom: 1px; +} +.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner { + background-position: -173px; +} +.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { + background-position: -68px; +} +/* disabled */ +.claro .dijitSpinnerDisabled .dijitArrowButtonInner { + background-color: #efefef; +} +.claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner { + background-position: -104px; +} +.claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner { + background-position: 1px; +} +/** hacks for browsers **/ +/* for IE 7, when div is enlarged, + * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/ +.dj_ie7 .claro .dijitSpinner { + overflow: visible; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/NumberSpinner.less b/js/dojo-1.7.2/dijit/themes/claro/form/NumberSpinner.less new file mode 100644 index 0000000..1c79d3a --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/NumberSpinner.less @@ -0,0 +1,150 @@ +/* NumberSpinner - namespace "dijitSpinner" + * + * Styling NumberSpinner mainly includes: + * + * 1. Arrows + * Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner - for border, padding and position + * Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton + * Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image + * + * 2. Hover state + * .dijitUpArrowButtonHover|.dijitDownArrowButtonHover .* - for background color|image + * + * 3. Active state + * .dijitUpArrowButtonActive|.dijitDownArrowButtonActive .* - for border, padding, margin and background color|image + * + * 4. Focused state + * .dijitSpinnerFocused .* - for background color|image + * + * 5. Disabled state + * .dijitSpinnerDisabled .* - for background color|image + */ + +@import "../variables"; + +.claro .dijitSpinnerButtonContainer { + overflow: hidden; + position: relative; + width: auto; + padding: 0 2px; +} +.claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner { + border-width: 1px 0; /* reserve space to match the claro combobox button border with border and not padding to make IE happier */ + border-style: solid none; +} + +/* button */ +.claro .dijitSpinner .dijitArrowButton { + width:auto; + background-color: @arrowbutton-background-color; + background-image: url("../@{image-form-highlight}"); + background-position:0 0; + background-repeat:repeat-x; + overflow: hidden; +} +.dj_iequirks .claro .dijitSpinner .dijitArrowButton { + overflow: visible; /* 0 height w/o this */ +} + +.claro .dijitSpinner .dijitSpinnerButtonInner { + width: 15px; +} +/* up & down button icons */ +.claro .dijitSpinner .dijitArrowButtonInner { + border:solid 1px @arrowbutton-inner-border-color; + border-bottom-width: 0; /* 2 top borders = 1 top+bottom border in ComboBox */ + background-image: url("../@{image-form-common-arrows}"); + background-repeat: no-repeat; + height: 100%; + width:15px; + padding-left: 1px; + padding-right: 1px; + + /* for up arrow */ + background-position:-139px center; + + /* override button.css (TODO: move to Common.css since ComboBox needs this too) */ + display: block; + margin: -1px 0 -1px 0; /* compensate for inner border */ +} + +.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, +.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner { + margin-top: 0; /* since its bottom aligned */ +} + +.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner { + width: 19px; +} +.claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner { + background-position:-34px; +} +.claro .dijitSpinner .dijitArrowButtonInner .dijitInputField { + padding: 0; +} + +/** hover & focused status **/ + +.claro .dijitUpArrowButtonActive, +.claro .dijitDownArrowButtonActive { + background-color:@arrowbutton-pressed-background-color; +} + +.claro .dijitSpinner .dijitUpArrowButtonHover, +.claro .dijitSpinner .dijitDownArrowButtonHover, +.claro .dijitSpinnerFocused .dijitArrowButton { + background-color: @arrowbutton-hovered-background-color; +} + +.claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner { + background-position:-174px; +} +.claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner { + background-position:-69px; +} + +.claro .dijitSpinnerFocused { + background-color: @textbox-focused-background-color; + background-image: none; +} + +/* mouse down status */ +.claro .dijitSpinner .dijitDownArrowButtonActive, +.claro .dijitSpinner .dijitUpArrowButtonActive { + background-color: #7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior. + background-position:0 -177px; +} +.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, +.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { + /* hide inner border while button is depressed */ + border: 0; + padding: 1px; + margin-right:2px; + margin-bottom:1px; +} +.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner { + background-position:-173px; +} +.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { + background-position:-68px; +} + +/* disabled */ + +.claro .dijitSpinnerDisabled .dijitArrowButtonInner { + background-color: @disabled-background-color; +} +.claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner { + background-position:-104px; +} +.claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner { + background-position:1px; +} + +/** hacks for browsers **/ + +/* for IE 7, when div is enlarged, + * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/ +.dj_ie7 .claro .dijitSpinner { + overflow:visible; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/RadioButton.css b/js/dojo-1.7.2/dijit/themes/claro/form/RadioButton.css new file mode 100644 index 0000000..bad1854 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/RadioButton.css @@ -0,0 +1,79 @@ +/* RadioButton + * + * Styling RadioButton mainly includes: + * + * 1. Containers + * .dijitRadio|.dijitRadioIcon - for border, padding, width|height and background image + * + * 2. RadioButton within ToggleButton + * .dijitToggleButton|.dijitToggleButtonChecked .* - for background image + * + * 3. Checked state + * .dijitRadioChecked - for checked background-color|image + * .dijitToggleButtonChecked - for border, background-color|image, display and width|height + * + * 4. Hover state + * .dijitRadioHover|.dijitRadioCheckedHover - for background image + * + * 5. Disabled state + * .dijitRadioDisabled|.dijitRadioCheckedDisabled - for background image + */ +.claro .dijitToggleButton .dijitRadio, .claro .dijitToggleButton .dijitRadioIcon { + background-image: url("../form/images/checkboxRadioButtonStates.png"); +} +.dj_ie6 .claro .dijitToggleButton .dijitRadio, .dj_ie6 .claro .dijitToggleButton .dijitRadioIcon { + background-image: url("../form/images/checkboxAndRadioButtons_IE6.png"); +} +.claro .dijitRadio, .claro .dijitRadioIcon { + /* inside a toggle button */ + + background-image: url("../form/images/checkboxRadioButtonStates.png"); + /* checkbox sprite image */ + + background-repeat: no-repeat; + width: 15px; + height: 15px; + margin: 0 2px 0 0; + padding: 0; +} +.dj_ie6 .claro .dijitRadio, .dj_ie6 .claro .dijitRadioIcon { + /* inside a toggle button */ + + background-image: url("../form/images/checkboxAndRadioButtons_IE6.png"); + /* checkbox sprite image */ + +} +.claro .dijitRadio { + /* unselected */ + + background-position: -105px; +} +.claro .dijitToggleButton .dijitRadioIcon { + /* unselected */ + + background-position: -107px; +} +.claro .dijitRadioDisabled { + /* unselected and disabled */ + + background-position: -165px; +} +.claro .dijitRadioHover { + /* hovering over an unselected enabled radio button */ + + background-position: -135px; +} +.claro .dijitRadioChecked { + background-position: -90px; +} +.claro .dijitToggleButtonChecked .dijitRadioIcon { + background-position: -92px; +} +.claro .dijitRadioCheckedHover { + background-position: -120px; +} +.claro .dijitRadioCheckedDisabled { + /* selected but disabled */ + + background-position: -150px; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/RadioButton.less b/js/dojo-1.7.2/dijit/themes/claro/form/RadioButton.less new file mode 100644 index 0000000..f48cb67 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/RadioButton.less @@ -0,0 +1,84 @@ +/* RadioButton + * + * Styling RadioButton mainly includes: + * + * 1. Containers + * .dijitRadio|.dijitRadioIcon - for border, padding, width|height and background image + * + * 2. RadioButton within ToggleButton + * .dijitToggleButton|.dijitToggleButtonChecked .* - for background image + * + * 3. Checked state + * .dijitRadioChecked - for checked background-color|image + * .dijitToggleButtonChecked - for border, background-color|image, display and width|height + * + * 4. Hover state + * .dijitRadioHover|.dijitRadioCheckedHover - for background image + * + * 5. Disabled state + * .dijitRadioDisabled|.dijitRadioCheckedDisabled - for background image + */ + +@import "../variables"; + +.claro .dijitToggleButton .dijitRadio, +.claro .dijitToggleButton .dijitRadioIcon { + background-image: url("../@{image-form-checkbox-and-radios}"); +} + +.dj_ie6 .claro .dijitToggleButton .dijitRadio, +.dj_ie6 .claro .dijitToggleButton .dijitRadioIcon { + background-image: url("../@{image-form-checkbox-and-radios-ie6}"); +} + +.claro .dijitRadio, +.claro .dijitRadioIcon { /* inside a toggle button */ + background-image: url("../@{image-form-checkbox-and-radios}"); /* checkbox sprite image */ + background-repeat: no-repeat; + width: 15px; + height: 15px; + margin: 0 2px 0 0; + padding: 0; +} + +.dj_ie6 .claro .dijitRadio, +.dj_ie6 .claro .dijitRadioIcon { /* inside a toggle button */ + background-image: url("../@{image-form-checkbox-and-radios-ie6}"); /* checkbox sprite image */ +} + +.claro .dijitRadio{ + /* unselected */ + background-position: -105px; +} + +.claro .dijitToggleButton .dijitRadioIcon { + /* unselected */ + background-position: -107px; +} + +.claro .dijitRadioDisabled { + /* unselected and disabled */ + background-position: -165px; +} + +.claro .dijitRadioHover { + /* hovering over an unselected enabled radio button */ + background-position: -135px; +} + +.claro .dijitRadioChecked{ + background-position: -90px; +} + +.claro .dijitToggleButtonChecked .dijitRadioIcon { + background-position: -92px; +} + +.claro .dijitRadioCheckedHover{ + background-position: -120px; +} + +.claro .dijitRadioCheckedDisabled { + /* selected but disabled */ + background-position: -150px; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Select.css b/js/dojo-1.7.2/dijit/themes/claro/form/Select.css new file mode 100644 index 0000000..bfbca4e --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Select.css @@ -0,0 +1,109 @@ +/* Select + * + * Styling Select mainly includes: + * + * 1. Containers + * .dijitSelect - for border, background-color + * .dijitButtonContents - for border + * + * 2. Arrow + * .dijitArrowButton - for border, padding and background-color|image + * .dijitArrowButtonInner - for border, background-color|image, display and width|height + * + * 3. Menu + * .dijitSelectMenu .* - for border, padding + * + * 4. Various states + * .dijitSelectHover|.dijitSelectFocused|.dijitSelectDisabled .* - for border, padding and background-color|image + */ +.claro .dijitSelect .dijitButtonText { + padding: 2px; +} +/* normal status */ +.claro .dijitSelect { + border: 1px solid #b5bcc7; + background-color: #ffffff; + border-collapse: separate; +} +.dj_ie6 .claro .dijitSelect, .dj_ie6 .claro .dijitSelect .dijitButtonNode { + background-image: none; +} +.claro .dijitSelect .dijitButtonContents { + border: 0 solid #b5bcc7; + border-right-width: 1px; +} +.claro .dijitSelect .dijitArrowButton { + padding: 0; + border: 1px solid #ffffff; + border-top: none; + background-color: #efefef; + background-image: url("../form/images/formHighlight.png"); + background-repeat: repeat-x; +} +.claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner { + background-image: url("../form/images/commonFormArrows.png"); + background-position: -35px 70%; + background-repeat: no-repeat; + width: 16px; + height: 16px; +} +/* hover status */ +.claro .dijitSelectHover { + border: 1px solid #759dc0; + background-color: #e5f2fe; + background-image: url("../form/images/textBox_back.png"); + background-repeat: repeat-x; +} +.claro .dijitSelectHover .dijitButtonContents { + border-color: #759dc0; +} +.claro .dijitSelectHover .dijitArrowButton { + background-color: #abd6ff; +} +.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner { + background-position: -70px 70%; +} +/* focused status */ +.claro .dijitSelectFocused { + border: 1px solid #759dc0; +} +.claro .dijitSelectFocused .dijitButtonContents { + border-color: #759dc0; +} +.claro .dijitSelectFocused .dijitArrowButton { + background-color: #7dbefa; + background-position: 0 -177px; + border: none; + padding: 0 1px; +} +.claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner { + background-position: -70px 70%; + margin-bottom: 1px; +} +/* disable status */ +.claro .dijitSelectDisabled { + border: 1px solid #d3d3d3; + background-color: #efefef; + background-image: none; + color: #818181; +} +.claro .dijitSelectDisabled .dijitArrowButton { + background-color: #efefef; +} +.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner { + background-position: 0 70%; +} +/* Dropdown menu style for select */ +.claro .dijitSelectMenu td.dijitMenuItemIconCell, .claro .dijitSelectMenu td.dijitMenuArrowCell { + /* so that arrow and icon cells from MenuItem are not displayed */ + + display: none; +} +.claro .dijitSelectMenu td.dijitMenuItemLabel { + /* line up menu text with text in select box (in LTR and RTL modes) */ + + padding: 2px; +} +.claro .dijitSelectMenu .dijitMenuSeparatorTop { + border-bottom: 1px solid #759dc0; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Select.less b/js/dojo-1.7.2/dijit/themes/claro/form/Select.less new file mode 100644 index 0000000..0e74261 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Select.less @@ -0,0 +1,124 @@ +/* Select + * + * Styling Select mainly includes: + * + * 1. Containers + * .dijitSelect - for border, background-color + * .dijitButtonContents - for border + * + * 2. Arrow + * .dijitArrowButton - for border, padding and background-color|image + * .dijitArrowButtonInner - for border, background-color|image, display and width|height + * + * 3. Menu + * .dijitSelectMenu .* - for border, padding + * + * 4. Various states + * .dijitSelectHover|.dijitSelectFocused|.dijitSelectDisabled .* - for border, padding and background-color|image + */ + +@import "../variables"; + +.claro .dijitSelect .dijitButtonText { + padding: @textbox-padding; +} + +/* normal status */ +.claro .dijitSelect { + border: 1px solid @border-color; + background-color: @textbox-background-color; + border-collapse: separate; +} +.dj_ie6 .claro .dijitSelect, +.dj_ie6 .claro .dijitSelect .dijitButtonNode { + background-image:none; +} + +.claro .dijitSelect .dijitButtonContents { + border: 0 solid @border-color; + border-right-width: 1px; +} + +.claro .dijitSelect .dijitArrowButton { + padding: 0; + border: 1px solid @arrowbutton-inner-border-color; + border-top:none; + background-color: @arrowbutton-background-color; + background-image: url("../@{image-form-highlight}"); + background-repeat:repeat-x; +} + +.claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner { + background-image: url("../@{image-form-common-arrows}"); + background-position:-35px 70%; + background-repeat: no-repeat; + width:16px; + height:16px; +} + +/* hover status */ +.claro .dijitSelectHover { + border: 1px solid @hovered-border-color; + background-color: @textbox-hovered-background-color; + background-image: url("../@{image-form-textbox-background}"); + background-repeat: repeat-x; +} + +.claro .dijitSelectHover .dijitButtonContents { + border-color:@hovered-border-color; +} + +.claro .dijitSelectHover .dijitArrowButton { + background-color:@arrowbutton-hovered-background-color; +} +.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner { + background-position:-70px 70%; +} + +/* focused status */ +.claro .dijitSelectFocused { + border: 1px solid @focused-border-color; +} +.claro .dijitSelectFocused .dijitButtonContents { + border-color:@focused-border-color; +} +.claro .dijitSelectFocused .dijitArrowButton { + background-color:#7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior. + background-position:0 -177px; + border: none; + padding: 0 1px; +} +.claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner { + background-position:-70px 70%; + margin-bottom: 1px; +} + +/* disable status */ +.claro .dijitSelectDisabled { + border: 1px solid @disabled-border-color; + background-color: @disabled-background-color; + background-image: none; + color: @disabled-text-color; +} +.claro .dijitSelectDisabled .dijitArrowButton { + background-color: @disabled-background-color; +} +.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner { + background-position:0 70% +} + +/* Dropdown menu style for select */ + +.claro .dijitSelectMenu td.dijitMenuItemIconCell, +.claro .dijitSelectMenu td.dijitMenuArrowCell { + /* so that arrow and icon cells from MenuItem are not displayed */ + display: none; +} +.claro .dijitSelectMenu td.dijitMenuItemLabel { + /* line up menu text with text in select box (in LTR and RTL modes) */ + padding: @textbox-padding; +} + +.claro .dijitSelectMenu .dijitMenuSeparatorTop { + border-bottom:1px solid @focused-border-color; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Select_rtl.css b/js/dojo-1.7.2/dijit/themes/claro/form/Select_rtl.css new file mode 100644 index 0000000..a14d4ec --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Select_rtl.css @@ -0,0 +1,4 @@ +.claro .dijitSelectRtl .dijitButtonContents { + border-right-width: 0; + border-left-width: 1px; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Select_rtl.less b/js/dojo-1.7.2/dijit/themes/claro/form/Select_rtl.less new file mode 100644 index 0000000..ffa40dc --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Select_rtl.less @@ -0,0 +1,6 @@ +@import "../variables"; + +.claro .dijitSelectRtl .dijitButtonContents { + border-right-width: 0; + border-left-width: 1px; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Slider.css b/js/dojo-1.7.2/dijit/themes/claro/form/Slider.css new file mode 100644 index 0000000..eb82e17 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Slider.css @@ -0,0 +1,329 @@ +/* Slider + * + * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar) + * + * Slider progress bar: + * 1. Slider progress bar (default styling): + * .dijitSliderProgressBarH - progress bar at the middle of horizontal slider + * .dijitSliderLeftBumper - bar at the left of horizontal slider + * .dijitSliderRightBumper - bar at the right of horizontal slider + * .dijitSliderProgressBarV - progress bar at the middle of vertical slider + * .dijitSliderTopBumper - bar at the top of vertical slider + * .dijitSliderBottomtBumper - bar at the bottom of vertical slider + * + * 2. hovered Slider progress bar (ie, mouse hover on progress bar) + * .dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border + * + * 3. focused Slider progress bar (ie, mouse focused on progress bar) + * .dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border + * + * 4. disabled/read-only Slider progress bar + * .dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled + * + * + * Slider Thumbs: + * 1. Slider Thumbs (default styling): + * .dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar + * + * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs) + * .dijitSliderHover .dijitSliderImageHandleH - hovered controller style + * + * 3. focused Slider progress bar (ie, mouse focused on slider thumbs) + * .dijitSliderFocused .dijitSliderImageHandleV - focused controller style + * + * + * Slider Increment/Decrement Buttons: + * 1. Slider Increment/Decrement Buttons (default styling): + * .dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider + * .dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider + * .dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider + * .dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider + * + * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons) + * .dijitSliderHover .dijitSliderDecrementIconH - for background, border + * + * 3. active Slider Increment/Decrement Buttons (mouse down on the icons) + * .dijitSliderActive .dijitSliderIncrementIconV - for background, border + * + * 4. disabled/read-only Slider Increment/Decrement Buttons + * .dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider + * .dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider + */ +.claro .dijitSliderBar { + border-style: solid; + outline: 1px; +} +.claro .dijitSliderFocused .dijitSliderBar { + border-color: #759dc0; +} +.claro .dijitSliderHover .dijitSliderBar { + 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("../form/images/sliderHorizontal.png"); + background-repeat: repeat-x; + background-position: 0 -20px; + border-color: #b5bcc7; + background-color: #cfe5fa; +} +.claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper { + background-image: url("../form/images/sliderHorizontal.png"); + background-repeat: repeat-x; + background-position: 0 -11px; + border-color: #b5bcc7; + background-color: #ffffff; +} +.claro .dijitSliderRightBumper { + border-right: solid 1px #b5bcc7; +} +.claro .dijitSliderLeftBumper { + border-left: solid 1px #b5bcc7; +} +.claro .dijitSliderHover .dijitSliderProgressBarH, .claro .dijitSliderHover .dijitSliderLeftBumper { + background-position: 0 -20px; + background-color: #abd6ff; + border-color: #759dc0; +} +.claro .dijitSliderHover .dijitSliderRemainingBarH, .claro .dijitSliderHover .dijitSliderRightBumper { + background-position: 0 0; + background-color: #ffffff; + border-color: #759dc0; +} +.claro .dijitSliderFocused .dijitSliderProgressBarH, .claro .dijitSliderFocused .dijitSliderLeftBumper { + background-position: 0 -30px; + background-color: #abd6ff; + border-color: #759dc0; +} +.claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper { + background-position: 0 -9px; + background-color: #ffffff; + border-color: #759dc0; +} +.claro .dijitSliderDisabled .dijitSliderProgressBarH, .claro .dijitSliderDisabled .dijitSliderLeftBumper { + background-color: #d3d3d3; + /* left side of slider, fill matches border */ + + background-image: none; +} +.claro .dijitSliderDisabled .dijitSliderRemainingBarH, .claro .dijitSliderDisabled .dijitSliderRightBumper { + background-color: #efefef; +} +/* Vertical Slider */ +.claro .dijitRuleLabelsContainerV { + padding: 0 2px; +} +.claro .dijitSlider .dijitSliderProgressBarV, .claro .dijitSlider .dijitSliderBottomBumper { + background-image: url("../form/images/sliderVertical.png"); + background-repeat: repeat-y; + background-position: -36px 0; + border-color: #b5bcc7; + background-color: #cfe5fa; +} +.claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper { + background-image: url("../form/images/sliderVertical.png"); + background-repeat: repeat-y; + background-position: -3px 0; + border-color: #b5bcc7; + background-color: #ffffff; +} +.claro .dijitSliderBottomBumper { + border-bottom: solid 1px #b5bcc7; +} +.claro .dijitSliderTopBumper { + border-top: solid 1px #b5bcc7; +} +.claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper { + background-position: -36px 0; + background-color: #abd6ff; +} +.claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper { + background-position: 0 0; + background-color: #ffffff; +} +.claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper { + background-position: -56px 0; + background-color: #abd6ff; +} +.claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper { + background-position: -18px 0; + background-color: #ffffff; +} +.claro .dijitSliderDisabled .dijitSliderProgressBarV, .claro .dijitSliderDisabled .dijitSliderBottomBumper { + background-color: #d3d3d3; + /* bottom side of slider, fill matches border */ + +} +.claro .dijitSliderDisabled .dijitSliderRemainingBarV, .claro .dijitSliderDisabled .dijitSliderTopBumper { + background-color: #efefef; +} +/* ------- Thumbs ------- */ +.claro .dijitSliderImageHandleH { + border: 0; + width: 18px; + height: 16px; + background-image: url("../form/images/sliderThumbs.png"); + background-repeat: no-repeat; + background-position: 0 0; +} +.claro .dijitSliderHover .dijitSliderImageHandleH { + background-position: -18px 0; +} +.claro .dijitSliderFocused .dijitSliderImageHandleH { + background-position: -36px 0; +} +.claro .dijitSliderProgressBarH .dijitSliderThumbHover { + background-position: -36px 0; +} +.claro .dijitSliderProgressBarH .dijitSliderThumbActive { + background-position: -36px 0; +} +.claro .dijitSliderReadOnly .dijitSliderImageHandleH, .claro .dijitSliderDisabled .dijitSliderImageHandleH { + background-position: -54px 0; +} +.claro .dijitSliderImageHandleV { + border: 0; + width: 18px; + height: 16px; + background-image: url("../form/images/sliderThumbs.png"); + background-repeat: no-repeat; + background-position: -289px 0; +} +.claro .dijitSliderHover .dijitSliderImageHandleV { + background-position: -307px 0; +} +.claro .dijitSliderFocused .dijitSliderImageHandleV { + background-position: -325px 0; +} +.claro .dijitSliderProgressBarV .dijitSliderThumbHover { + background-position: -325px 0; +} +.claro .dijitSliderProgressBarV .dijitSliderThumbActive { + background-position: -325px 0; +} +.claro .dijitSliderReadOnly .dijitSliderImageHandleV, .claro .dijitSliderDisabled .dijitSliderImageHandleV { + background-position: -343px 0; +} +/* ---- Increment/Decrement Buttons ---- */ +.claro .dijitSliderButtonContainerH { + padding: 1px 3px 1px 2px; +} +.claro .dijitSliderButtonContainerV { + padding: 3px 1px 2px 1px; +} +.claro .dijitSliderDecrementIconH, +.claro .dijitSliderIncrementIconH, +.claro .dijitSliderDecrementIconV, +.claro .dijitSliderIncrementIconV { + background-image: url("../form/images/commonFormArrows.png"); + background-repeat: no-repeat; + background-color: #efefef; + -moz-border-radius: 2px; + border-radius: 2px; + border: solid 1px #b5bcc7; + font-size: 1px; +} +.claro .dijitSliderDecrementIconH, .claro .dijitSliderIncrementIconH { + height: 12px; + width: 9px; +} +.claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV { + height: 9px; + width: 12px; +} +.claro .dijitSliderActive .dijitSliderDecrementIconH, +.claro .dijitSliderActive .dijitSliderIncrementIconH, +.claro .dijitSliderActive .dijitSliderDecrementIconV, +.claro .dijitSliderActive .dijitSliderIncrementIconV, +.claro .dijitSliderHover .dijitSliderDecrementIconH, +.claro .dijitSliderHover .dijitSliderIncrementIconH, +.claro .dijitSliderHover .dijitSliderDecrementIconV, +.claro .dijitSliderHover .dijitSliderIncrementIconV { + /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */ + + border: solid 1px #759dc0; + background-color: #ffffff; +} +.claro .dijitSliderDecrementIconH { + background-position: -357px 50%; +} +.claro .dijitSliderActive .dijitSliderDecrementIconH.claro .dijitSliderHover .dijitSliderDecrementIconH { + background-position: -393px 50%; +} +.claro .dijitSliderIncrementIconH { + background-position: -251px 50%; +} +.claro .dijitSliderActive .dijitSliderIncrementIconH.claro .dijitSliderHover .dijitSliderIncrementIconH { + background-position: -283px 50%; +} +.claro .dijitSliderDecrementIconV { + background-position: -38px 50%; +} +.claro .dijitSliderActive .dijitSliderDecrementIconV.claro .dijitSliderHover .dijitSliderDecrementIconV { + background-position: -73px 50%; +} +.claro .dijitSliderIncrementIconV { + background-position: -143px 49%; +} +.claro .dijitSliderActive .dijitSliderIncrementIconV.claro .dijitSliderHover .dijitSliderIncrementIconV { + background-position: -178px 49%; +} +.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover, +.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover, +.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover, +.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover { + background-color: #cfe5fa; +} +.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive, +.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive, +.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, +.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { + background-color: #abd6ff; + border-color: #759dc0; +} +.claro .dijitSliderButtonInner { + visibility: hidden; +} +.claro .dijitSliderDisabled .dijitSliderBar { + border-color: #d3d3d3; +} +.claro .dijitSliderReadOnly *, .claro .dijitSliderDisabled * { + border-color: #d3d3d3; + color: #818181; +} +.claro .dijitSliderReadOnly .dijitSliderDecrementIconH, .claro .dijitSliderDisabled .dijitSliderDecrementIconH { + background-position: -321px 50%; + background-color: #efefef; +} +.claro .dijitSliderReadOnly .dijitSliderIncrementIconH, .claro .dijitSliderDisabled .dijitSliderIncrementIconH { + background-position: -215px 50%; + background-color: #efefef; +} +.claro .dijitSliderReadOnly .dijitSliderDecrementIconV, .claro .dijitSliderDisabled .dijitSliderDecrementIconV { + background-position: -3px 49%; + background-color: #efefef; +} +.claro .dijitSliderReadOnly .dijitSliderIncrementIconV, .claro .dijitSliderDisabled .dijitSliderIncrementIconV { + background-position: -107px 49%; + background-color: #efefef; +} +.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH, +.dj_ie6 .claro .dijitSlider .dijitSliderLeftBumper, +.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarH, +.dj_ie6 .claro .dijitSlider .dijitSliderRightBumper, +.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarV, +.dj_ie6 .claro .dijitSlider .dijitSliderTopBumper, +.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarV, +.dj_ie6 .claro .dijitSlider .dijitSliderBottomBumper { + background-image: none; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Slider.less b/js/dojo-1.7.2/dijit/themes/claro/form/Slider.less new file mode 100644 index 0000000..db0f8cb --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Slider.less @@ -0,0 +1,365 @@ +/* Slider + * + * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar) + * + * Slider progress bar: + * 1. Slider progress bar (default styling): + * .dijitSliderProgressBarH - progress bar at the middle of horizontal slider + * .dijitSliderLeftBumper - bar at the left of horizontal slider + * .dijitSliderRightBumper - bar at the right of horizontal slider + * .dijitSliderProgressBarV - progress bar at the middle of vertical slider + * .dijitSliderTopBumper - bar at the top of vertical slider + * .dijitSliderBottomtBumper - bar at the bottom of vertical slider + * + * 2. hovered Slider progress bar (ie, mouse hover on progress bar) + * .dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border + * + * 3. focused Slider progress bar (ie, mouse focused on progress bar) + * .dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border + * + * 4. disabled/read-only Slider progress bar + * .dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled + * + * + * Slider Thumbs: + * 1. Slider Thumbs (default styling): + * .dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar + * + * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs) + * .dijitSliderHover .dijitSliderImageHandleH - hovered controller style + * + * 3. focused Slider progress bar (ie, mouse focused on slider thumbs) + * .dijitSliderFocused .dijitSliderImageHandleV - focused controller style + * + * + * Slider Increment/Decrement Buttons: + * 1. Slider Increment/Decrement Buttons (default styling): + * .dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider + * .dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider + * .dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider + * .dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider + * + * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons) + * .dijitSliderHover .dijitSliderDecrementIconH - for background, border + * + * 3. active Slider Increment/Decrement Buttons (mouse down on the icons) + * .dijitSliderActive .dijitSliderIncrementIconV - for background, border + * + * 4. disabled/read-only Slider Increment/Decrement Buttons + * .dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider + * .dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider + */ + +@import "../variables"; + +.claro .dijitSliderBar { + border-style: solid; + outline: 1px; +} +.claro .dijitSliderFocused .dijitSliderBar { + border-color: @focused-border-color; +} +.claro .dijitSliderHover .dijitSliderBar { + border-color: @hovered-border-color; +} +.claro .dijitSliderDisabled .dijitSliderBar { + background-image: none; + border-color: @disabled-border-color; +} +.claro .dijitRuleLabel { + color: @text-color; +} + +/* Horizontal Slider */ + +.claro .dijitRuleLabelsContainerH { + padding: 2px 0; +} +.claro .dijitSlider .dijitSliderProgressBarH, +.claro .dijitSlider .dijitSliderLeftBumper{ + background-image: url("../@{image-form-slider-horizontal}"); + background-repeat:repeat-x; + background-position:0 -20px; + border-color: @border-color; + background-color: @slider-fullbar-background-color; +} +.claro .dijitSlider .dijitSliderRemainingBarH, +.claro .dijitSlider .dijitSliderRightBumper{ + background-image: url("../@{image-form-slider-horizontal}"); + background-repeat:repeat-x; + background-position:0 -11px; + border-color: @border-color; + background-color: @slider-remainingbar-background-color; +} +.claro .dijitSliderRightBumper { + border-right: solid 1px @border-color; +} +.claro .dijitSliderLeftBumper { + border-left: solid 1px @border-color; +} +.claro .dijitSliderHover .dijitSliderProgressBarH, +.claro .dijitSliderHover .dijitSliderLeftBumper{ + background-position:0 -20px; + background-color: @slider-hovered-fullbar-background-color; + border-color: @hovered-border-color; +} +.claro .dijitSliderHover .dijitSliderRemainingBarH, +.claro .dijitSliderHover .dijitSliderRightBumper{ + background-position:0 0; + background-color: @slider-hovered-remainingbar-background-color; + border-color: @hovered-border-color; +} +.claro .dijitSliderFocused .dijitSliderProgressBarH, +.claro .dijitSliderFocused .dijitSliderLeftBumper{ + background-position:0 -30px; + background-color: @slider-focused-fullbar-background-color; + border-color: @focused-border-color; +} +.claro .dijitSliderFocused .dijitSliderRemainingBarH, +.claro .dijitSliderFocused .dijitSliderRightBumper{ + background-position:0 -9px; + background-color: @slider-focused-remainingbar-background-color; + border-color: @focused-border-color; +} +.claro .dijitSliderDisabled .dijitSliderProgressBarH, +.claro .dijitSliderDisabled .dijitSliderLeftBumper{ + background-color: @disabled-border-color; /* left side of slider, fill matches border */ + background-image:none; +} +.claro .dijitSliderDisabled .dijitSliderRemainingBarH, +.claro .dijitSliderDisabled .dijitSliderRightBumper{ + background-color: @disabled-background-color; +} + +/* Vertical Slider */ + +.claro .dijitRuleLabelsContainerV { + padding: 0 2px; +} +.claro .dijitSlider .dijitSliderProgressBarV, +.claro .dijitSlider .dijitSliderBottomBumper{ + background-image: url("../@{image-form-slider-vertical}"); + background-repeat:repeat-y; + background-position:-36px 0; + border-color: @border-color; + background-color: @slider-fullbar-background-color; +} +.claro .dijitSlider .dijitSliderRemainingBarV, +.claro .dijitSlider .dijitSliderTopBumper{ + background-image: url("../@{image-form-slider-vertical}"); + background-repeat:repeat-y; + background-position:-3px 0; + border-color: @border-color; + background-color: @slider-remainingbar-background-color; +} +.claro .dijitSliderBottomBumper { + border-bottom: solid 1px @border-color; +} +.claro .dijitSliderTopBumper { + border-top: solid 1px @border-color; +} +.claro .dijitSliderHover .dijitSliderProgressBarV, +.claro .dijitSliderHover .dijitSliderBottomBumper{ + background-position:-36px 0; + background-color: @slider-hovered-fullbar-background-color; +} +.claro .dijitSliderHover .dijitSliderRemainingBarV, +.claro .dijitSliderHover .dijitSliderTopBumper{ + background-position:0 0; + background-color: @slider-hovered-remainingbar-background-color; +} +.claro .dijitSliderFocused .dijitSliderProgressBarV, +.claro .dijitSliderFocused .dijitSliderBottomBumper{ + background-position:-56px 0; + background-color: @slider-focused-fullbar-background-color; +} +.claro .dijitSliderFocused .dijitSliderRemainingBarV, +.claro .dijitSliderFocused .dijitSliderTopBumper{ + background-position:-18px 0; + background-color: @slider-focused-remainingbar-background-color; +} +.claro .dijitSliderDisabled .dijitSliderProgressBarV, +.claro .dijitSliderDisabled .dijitSliderBottomBumper{ + background-color: @disabled-border-color; /* bottom side of slider, fill matches border */ +} +.claro .dijitSliderDisabled .dijitSliderRemainingBarV, +.claro .dijitSliderDisabled .dijitSliderTopBumper{ + background-color: @disabled-background-color; +} + + +/* ------- Thumbs ------- */ + +.claro .dijitSliderImageHandleH { + border: 0; + width: 18px; + height: 16px; + background-image: url("../@{image-form-slider-thumbs}"); + background-repeat:no-repeat; + background-position:0 0; +} +.claro .dijitSliderHover .dijitSliderImageHandleH { + background-position:-18px 0; +} +.claro .dijitSliderFocused .dijitSliderImageHandleH { + background-position:-36px 0; +} +.claro .dijitSliderProgressBarH .dijitSliderThumbHover{ + background-position:-36px 0; +} +.claro .dijitSliderProgressBarH .dijitSliderThumbActive{ + background-position:-36px 0; +} +.claro .dijitSliderReadOnly .dijitSliderImageHandleH, +.claro .dijitSliderDisabled .dijitSliderImageHandleH { + background-position:-54px 0; +} +.claro .dijitSliderImageHandleV { + border: 0; + width: 18px; + height: 16px; + background-image: url("../@{image-form-slider-thumbs}"); + background-repeat:no-repeat; + background-position:-289px 0; +} +.claro .dijitSliderHover .dijitSliderImageHandleV { + background-position:-307px 0; +} +.claro .dijitSliderFocused .dijitSliderImageHandleV { + background-position:-325px 0; +} +.claro .dijitSliderProgressBarV .dijitSliderThumbHover{ + background-position:-325px 0; +} +.claro .dijitSliderProgressBarV .dijitSliderThumbActive{ + background-position:-325px 0; +} +.claro .dijitSliderReadOnly .dijitSliderImageHandleV, +.claro .dijitSliderDisabled .dijitSliderImageHandleV { + background-position:-343px 0; +} + +/* ---- Increment/Decrement Buttons ---- */ + +.claro .dijitSliderButtonContainerH{ + padding: 1px 3px 1px 2px; +} +.claro .dijitSliderButtonContainerV{ + padding: 3px 1px 2px 1px; +} +.claro .dijitSliderDecrementIconH, +.claro .dijitSliderIncrementIconH, +.claro .dijitSliderDecrementIconV, +.claro .dijitSliderIncrementIconV { + background-image: url("../@{image-form-common-arrows}"); + background-repeat:no-repeat; + background-color: @arrowbutton-background-color; + .border-radius(2px); + border: solid 1px @border-color; + font-size: 1px; +} +.claro .dijitSliderDecrementIconH, +.claro .dijitSliderIncrementIconH { + height: 12px; + width: 9px; +} +.claro .dijitSliderDecrementIconV, +.claro .dijitSliderIncrementIconV { + height: 9px; + width: 12px; +} +.claro .dijitSliderActive .dijitSliderDecrementIconH, +.claro .dijitSliderActive .dijitSliderIncrementIconH, +.claro .dijitSliderActive .dijitSliderDecrementIconV, +.claro .dijitSliderActive .dijitSliderIncrementIconV, +.claro .dijitSliderHover .dijitSliderDecrementIconH, +.claro .dijitSliderHover .dijitSliderIncrementIconH, +.claro .dijitSliderHover .dijitSliderDecrementIconV, +.claro .dijitSliderHover .dijitSliderIncrementIconV { + /* dijitSliderActive should be treated as dijitSliderHover since "clicking the slider" has no meaning */ + border: solid 1px @hovered-border-color; + background-color: @slider-hoveredButton-background-color; +} + +.claro .dijitSliderDecrementIconH { + background-position:-357px 50%; +} +.claro .dijitSliderActive .dijitSliderDecrementIconH +.claro .dijitSliderHover .dijitSliderDecrementIconH { + background-position:-393px 50%; +} +.claro .dijitSliderIncrementIconH { + background-position:-251px 50%; +} +.claro .dijitSliderActive .dijitSliderIncrementIconH +.claro .dijitSliderHover .dijitSliderIncrementIconH { + background-position:-283px 50%; +} +.claro .dijitSliderDecrementIconV { + background-position:-38px 50%; +} +.claro .dijitSliderActive .dijitSliderDecrementIconV +.claro .dijitSliderHover .dijitSliderDecrementIconV { + background-position:-73px 50%; +} +.claro .dijitSliderIncrementIconV { + background-position:-143px 49%; +} +.claro .dijitSliderActive .dijitSliderIncrementIconV +.claro .dijitSliderHover .dijitSliderIncrementIconV { + background-position:-178px 49%; +} +.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonHover, +.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonHover, +.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonHover, +.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonHover { + background-color: @slider-button-hovered-background-color; +} +.claro .dijitSliderButtonContainerV .dijitSliderDecrementButtonActive, +.claro .dijitSliderButtonContainerH .dijitSliderDecrementButtonActive, +.claro .dijitSliderButtonContainerV .dijitSliderIncrementButtonActive, +.claro .dijitSliderButtonContainerH .dijitSliderIncrementButtonActive { + background-color: @slider-button-pressed-background-color; + border-color:@pressed-border-color; +} +.claro .dijitSliderButtonInner { + visibility: hidden; +} +.claro .dijitSliderDisabled .dijitSliderBar{ + border-color: @disabled-border-color; +} +.claro .dijitSliderReadOnly *,.claro .dijitSliderDisabled * { + border-color: @disabled-border-color; + color: @disabled-text-color; +} +.claro .dijitSliderReadOnly .dijitSliderDecrementIconH, +.claro .dijitSliderDisabled .dijitSliderDecrementIconH { + background-position:-321px 50%; + background-color:@disabled-background-color; +} +.claro .dijitSliderReadOnly .dijitSliderIncrementIconH, +.claro .dijitSliderDisabled .dijitSliderIncrementIconH { + background-position:-215px 50%; + background-color:@disabled-background-color; +} +.claro .dijitSliderReadOnly .dijitSliderDecrementIconV, +.claro .dijitSliderDisabled .dijitSliderDecrementIconV { + background-position:-3px 49%; + background-color:@disabled-background-color; +} +.claro .dijitSliderReadOnly .dijitSliderIncrementIconV, +.claro .dijitSliderDisabled .dijitSliderIncrementIconV { + background-position:-107px 49%; + background-color:@disabled-background-color; +} + +.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH, +.dj_ie6 .claro .dijitSlider .dijitSliderLeftBumper, +.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarH, +.dj_ie6 .claro .dijitSlider .dijitSliderRightBumper, +.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarV, +.dj_ie6 .claro .dijitSlider .dijitSliderTopBumper, +.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarV, +.dj_ie6 .claro .dijitSlider .dijitSliderBottomBumper { + background-image:none; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Slider_rtl.css b/js/dojo-1.7.2/dijit/themes/claro/form/Slider_rtl.css new file mode 100644 index 0000000..97e078b --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Slider_rtl.css @@ -0,0 +1,24 @@ +.claro .dijitSliderRtl .dijitSliderProgressBarH, +.claro .dijitSliderRtl .dijitSliderRemainingBarH, +.claro .dijitSliderRtl .dijitSliderLeftBumper, +.claro .dijitSliderRtl .dijitSliderRightBumper, +.claro .dijitSliderRtl .dijitSliderTopBumper { + background-position: top right; +} +.claro .dijitSliderRtl .dijitSliderProgressBarV, .claro .dijitSliderRtl .dijitSliderRemainingBarV, .claro .dijitSliderRtl .dijitSliderBottomBumper { + background-position: bottom right; +} +.claro .dijitSliderRtl .dijitSliderLeftBumper { + border-left-width: 0; + border-right-width: 1px; +} +.claro .dijitSliderRtl .dijitSliderRightBumper { + border-left-width: 1px; + border-right-width: 0; +} +.claro .dijitSliderRtl .dijitSliderIncrementIconH { + background-position: -357px 50%; +} +.claro .dijitSliderRtl .dijitSliderDecrementIconH { + background-position: -251px 50%; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/Slider_rtl.less b/js/dojo-1.7.2/dijit/themes/claro/form/Slider_rtl.less new file mode 100644 index 0000000..66a7116 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/Slider_rtl.less @@ -0,0 +1,33 @@ +@import "../variables"; + +.claro .dijitSliderRtl .dijitSliderProgressBarH, +.claro .dijitSliderRtl .dijitSliderRemainingBarH, +.claro .dijitSliderRtl .dijitSliderLeftBumper, +.claro .dijitSliderRtl .dijitSliderRightBumper, +.claro .dijitSliderRtl .dijitSliderTopBumper { + background-position: top right; +} + +.claro .dijitSliderRtl .dijitSliderProgressBarV, +.claro .dijitSliderRtl .dijitSliderRemainingBarV, +.claro .dijitSliderRtl .dijitSliderBottomBumper { + background-position: bottom right; +} + +.claro .dijitSliderRtl .dijitSliderLeftBumper { + border-left-width: 0; + border-right-width: 1px; +} + +.claro .dijitSliderRtl .dijitSliderRightBumper { + border-left-width: 1px; + border-right-width: 0; +} + +.claro .dijitSliderRtl .dijitSliderIncrementIconH { + background-position:-357px 50%; +} + +.claro .dijitSliderRtl .dijitSliderDecrementIconH { + background-position:-251px 50%; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/images/button.png b/js/dojo-1.7.2/dijit/themes/claro/form/images/button.png Binary files differnew file mode 100644 index 0000000..cb787cb --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/images/button.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/images/buttonArrows.png b/js/dojo-1.7.2/dijit/themes/claro/form/images/buttonArrows.png Binary files differnew file mode 100644 index 0000000..642eff3 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/images/buttonArrows.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/images/button_grad_d.png b/js/dojo-1.7.2/dijit/themes/claro/form/images/button_grad_d.png Binary files differnew file mode 100644 index 0000000..3a71a46 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/images/button_grad_d.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/images/checkboxAndRadioButtons_IE6.png b/js/dojo-1.7.2/dijit/themes/claro/form/images/checkboxAndRadioButtons_IE6.png Binary files differnew file mode 100644 index 0000000..92d2221 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/images/checkboxAndRadioButtons_IE6.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/images/checkboxRadioButtonStates.png b/js/dojo-1.7.2/dijit/themes/claro/form/images/checkboxRadioButtonStates.png Binary files differnew file mode 100644 index 0000000..2d06a82 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/images/checkboxRadioButtonStates.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/images/commonFormArrows.png b/js/dojo-1.7.2/dijit/themes/claro/form/images/commonFormArrows.png Binary files differnew file mode 100644 index 0000000..6d04742 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/images/commonFormArrows.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/images/error.png b/js/dojo-1.7.2/dijit/themes/claro/form/images/error.png Binary files differnew file mode 100644 index 0000000..46de1cd --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/images/error.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/images/formHighlight.png b/js/dojo-1.7.2/dijit/themes/claro/form/images/formHighlight.png Binary files differnew file mode 100644 index 0000000..f90eb25 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/images/formHighlight.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/images/shadow.png b/js/dojo-1.7.2/dijit/themes/claro/form/images/shadow.png Binary files differnew file mode 100644 index 0000000..72d60e6 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/images/shadow.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/images/sliderHorizontal.png b/js/dojo-1.7.2/dijit/themes/claro/form/images/sliderHorizontal.png Binary files differnew file mode 100644 index 0000000..d769a64 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/images/sliderHorizontal.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/images/sliderThumbs.png b/js/dojo-1.7.2/dijit/themes/claro/form/images/sliderThumbs.png Binary files differnew file mode 100644 index 0000000..70ab2fe --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/images/sliderThumbs.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/images/sliderVertical.png b/js/dojo-1.7.2/dijit/themes/claro/form/images/sliderVertical.png Binary files differnew file mode 100644 index 0000000..9d69d04 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/images/sliderVertical.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/form/images/textBox_back.png b/js/dojo-1.7.2/dijit/themes/claro/form/images/textBox_back.png Binary files differnew file mode 100644 index 0000000..dfc752a --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/form/images/textBox_back.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/calendarArrows.png b/js/dojo-1.7.2/dijit/themes/claro/images/calendarArrows.png Binary files differnew file mode 100644 index 0000000..3f6faa5 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/calendarArrows.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/calendarArrows8bit.png b/js/dojo-1.7.2/dijit/themes/claro/images/calendarArrows8bit.png Binary files differnew file mode 100644 index 0000000..ab9d66c --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/calendarArrows8bit.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/calendarContainerImages.png b/js/dojo-1.7.2/dijit/themes/claro/images/calendarContainerImages.png Binary files differnew file mode 100644 index 0000000..44fa088 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/calendarContainerImages.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/checkmarkNoBorder.gif b/js/dojo-1.7.2/dijit/themes/claro/images/checkmarkNoBorder.gif Binary files differnew file mode 100644 index 0000000..324bfb3 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/checkmarkNoBorder.gif diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/checkmarkNoBorder.png b/js/dojo-1.7.2/dijit/themes/claro/images/checkmarkNoBorder.png Binary files differnew file mode 100644 index 0000000..9cec0c0 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/checkmarkNoBorder.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/commonHighlight.png b/js/dojo-1.7.2/dijit/themes/claro/images/commonHighlight.png Binary files differnew file mode 100644 index 0000000..f90eb25 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/commonHighlight.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/dialogCloseIcon.png b/js/dojo-1.7.2/dijit/themes/claro/images/dialogCloseIcon.png Binary files differnew file mode 100644 index 0000000..a605c71 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/dialogCloseIcon.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/dialogCloseIcon8bit.png b/js/dojo-1.7.2/dijit/themes/claro/images/dialogCloseIcon8bit.png Binary files differnew file mode 100644 index 0000000..d2b063b --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/dialogCloseIcon8bit.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/dnd.png b/js/dojo-1.7.2/dijit/themes/claro/images/dnd.png Binary files differnew file mode 100644 index 0000000..8cb04aa --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/dnd.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/loadingAnimation.gif b/js/dojo-1.7.2/dijit/themes/claro/images/loadingAnimation.gif Binary files differnew file mode 100644 index 0000000..d76e4cd --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/loadingAnimation.gif diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/menuHighlight.png b/js/dojo-1.7.2/dijit/themes/claro/images/menuHighlight.png Binary files differnew file mode 100644 index 0000000..22328a7 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/menuHighlight.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/progressBarAnim.gif b/js/dojo-1.7.2/dijit/themes/claro/images/progressBarAnim.gif Binary files differnew file mode 100644 index 0000000..30c0d9d --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/progressBarAnim.gif diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/progressBarEmpty.png b/js/dojo-1.7.2/dijit/themes/claro/images/progressBarEmpty.png Binary files differnew file mode 100644 index 0000000..e0a6856 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/progressBarEmpty.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/progressBarFull.png b/js/dojo-1.7.2/dijit/themes/claro/images/progressBarFull.png Binary files differnew file mode 100644 index 0000000..280f51d --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/progressBarFull.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/spriteArrows.png b/js/dojo-1.7.2/dijit/themes/claro/images/spriteArrows.png Binary files differnew file mode 100644 index 0000000..608f4c7 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/spriteArrows.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/titlebar.png b/js/dojo-1.7.2/dijit/themes/claro/images/titlebar.png Binary files differnew file mode 100644 index 0000000..4818103 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/titlebar.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/tooltip.png b/js/dojo-1.7.2/dijit/themes/claro/images/tooltip.png Binary files differnew file mode 100644 index 0000000..2b22273 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/tooltip.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/tooltip8bit.png b/js/dojo-1.7.2/dijit/themes/claro/images/tooltip8bit.png Binary files differnew file mode 100644 index 0000000..51f65f1 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/tooltip8bit.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/tooltipGradient.png b/js/dojo-1.7.2/dijit/themes/claro/images/tooltipGradient.png Binary files differnew file mode 100644 index 0000000..ce4860e --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/tooltipGradient.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/treeExpandImages.png b/js/dojo-1.7.2/dijit/themes/claro/images/treeExpandImages.png Binary files differnew file mode 100644 index 0000000..75cf385 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/treeExpandImages.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/treeExpandImages8bit.png b/js/dojo-1.7.2/dijit/themes/claro/images/treeExpandImages8bit.png Binary files differnew file mode 100644 index 0000000..290b2e1 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/treeExpandImages8bit.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/images/treeExpand_loading.gif b/js/dojo-1.7.2/dijit/themes/claro/images/treeExpand_loading.gif Binary files differnew file mode 100644 index 0000000..424d376 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/images/treeExpand_loading.gif diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/AccordionContainer.css b/js/dojo-1.7.2/dijit/themes/claro/layout/AccordionContainer.css new file mode 100644 index 0000000..3483176 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/AccordionContainer.css @@ -0,0 +1,121 @@ +/* Accordion + * + * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer) + * and the title inside of it (dijitAccordionTitle). There are 4 basic states to style: + * + * 1. closed pane (and default styling): + * .dijitAccordionInnerContainer - container for each accordion child + * .dijitAccordionTitle - title for each accordion child + * + * 2. active closed pane (ie, mouse down on a title bar) + * .dijitAccordionInnerContainerActive - for background-color, border + * .dijitAccordionInnerContainerActive dijitAccordionTitle - for text color + * + * 3. open pane (expanded child) + * .dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane) + * setting a margin so that there's blue trim all the way around the child + * + * These rules need to override the closed pane active: + * + * .dijitAccordionInnerContainerSelected - for background-color, border + * .dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color + * + * 4. hovered pane, open or closed + * The selectors below affect hovering over both a closed pane (ie, hovering a title bar), + * and hovering over an open pane. Also, treat mouse down on an open pane as a hover: + * + * .dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border + * .dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color + */ +.claro .dijitAccordionContainer { + border: none; +} +.claro .dijitAccordionInnerContainer { + background-color: #efefef; + /* gray, for closed pane */ + + border: solid 1px #b5bcc7; + margin-bottom: 1px; + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + transition-property: background-color, border; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + transition-timing-function: linear; +} +.claro .dijitAccordionTitle { + background-color: transparent; + /* pick up color from dijitAccordionInnerContainer */ + + background-image: url("../layout/images/accordion.png"); + background-position: 0 0; + background-repeat: repeat-x; + padding: 5px 7px 2px 7px; + min-height: 17px; + color: #494949; +} +.dj_ie6 .claro .dijitAccordionTitle { + background-image: none; +} +.claro .dijitAccordionContainer .dijitAccordionChildWrapper { + /* this extends the blue trim styling of the title bar to wrapping around the node. + * done by setting margin + */ + + background-color: #ffffff; + border: 1px solid #759dc0; + margin: 0 2px 2px; +} +.claro .dijitAccordionContainer .dijitAccordionContainer-child { + /* this is affecting the child widget itself */ + + padding: 9px; +} +/* Active state for closed pane */ +.claro .dijitAccordionInnerContainerActive { + border: 1px solid #759dc0; + background-color: #7dbdfa; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; +} +.claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { + background-position: 0 -136px; + color: #000000; +} +/* Open (a.k.a. selected) pane */ +.claro .dijitAccordionInnerContainerSelected { + border-color: #759dc0; + background-color: #cfe5fa; +} +.claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { + color: #000000; + background-position: 0 0; + /* avoid effect when clicking the title of the open pane */ + +} +/* Hovering open or closed pane */ +.claro .dijitAccordionInnerContainerHover .dijitAccordionTitle { + /* both open and closed */ + + color: #000000; +} +.claro .dijitAccordionInnerContainerHover, .claro .dijitAccordionInnerContainerSelectedActive { + /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */ + + border: 1px solid #759dc0; + background-color: #abd6ff; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; +} +.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper { + background-color: #ffffff; + 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/js/dojo-1.7.2/dijit/themes/claro/layout/AccordionContainer.less b/js/dojo-1.7.2/dijit/themes/claro/layout/AccordionContainer.less new file mode 100644 index 0000000..b3aa622 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/AccordionContainer.less @@ -0,0 +1,113 @@ +/* Accordion + * + * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer) + * and the title inside of it (dijitAccordionTitle). There are 4 basic states to style: + * + * 1. closed pane (and default styling): + * .dijitAccordionInnerContainer - container for each accordion child + * .dijitAccordionTitle - title for each accordion child + * + * 2. active closed pane (ie, mouse down on a title bar) + * .dijitAccordionInnerContainerActive - for background-color, border + * .dijitAccordionInnerContainerActive dijitAccordionTitle - for text color + * + * 3. open pane (expanded child) + * .dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane) + * setting a margin so that there's blue trim all the way around the child + * + * These rules need to override the closed pane active: + * + * .dijitAccordionInnerContainerSelected - for background-color, border + * .dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color + * + * 4. hovered pane, open or closed + * The selectors below affect hovering over both a closed pane (ie, hovering a title bar), + * and hovering over an open pane. Also, treat mouse down on an open pane as a hover: + * + * .dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border + * .dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color + */ + +@import "../variables"; + +.claro .dijitAccordionContainer { + border:none; +} +.claro .dijitAccordionInnerContainer { + background-color: @unselected-background-color; /* gray, for closed pane */ + border:solid 1px @border-color; + margin-bottom:1px; + .transition-property(background-color,border); + .transition-duration(.3s); + .transition-timing-function(linear); +} +.claro .dijitAccordionTitle { + background-color: transparent; /* pick up color from dijitAccordionInnerContainer */ + background-image: url("../@{image-layout-accordion}"); + background-position:0 0; + background-repeat:repeat-x; + padding: 5px 7px 2px 7px; + min-height:17px; + color:@unselected-text-color; +} +.dj_ie6 .claro .dijitAccordionTitle { + background-image: none; +} +.claro .dijitAccordionContainer .dijitAccordionChildWrapper { + /* this extends the blue trim styling of the title bar to wrapping around the node. + * done by setting margin + */ + background-color:@pane-background-color; + border:1px solid @selected-border-color; + margin: 0 2px 2px; +} + +.claro .dijitAccordionContainer .dijitAccordionContainer-child { + /* this is affecting the child widget itself */ + padding: 9px; +} + +/* Active state for closed pane */ + +.claro .dijitAccordionInnerContainerActive { + border:1px solid @selected-border-color; + background-color:@pressed-background-color; + .transition-duration(.1s); +} +.claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { + background-position:0 -136px; + color:@selected-text-color; +} + +/* Open (a.k.a. selected) pane */ + +.claro .dijitAccordionInnerContainerSelected { + border-color:@selected-border-color; + background-color: @selected-background-color; +} +.claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { + color:@selected-text-color; + background-position: 0 0; /* avoid effect when clicking the title of the open pane */ +} + +/* Hovering open or closed pane */ + +.claro .dijitAccordionInnerContainerHover .dijitAccordionTitle { + /* both open and closed */ + color:@hovered-text-color; +} + +.claro .dijitAccordionInnerContainerHover, +.claro .dijitAccordionInnerContainerSelectedActive { + /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */ + border:1px solid @hovered-border-color; + background-color:@hovered-background-color; + .transition-duration(.2s); +} + +.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, +.claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper { + background-color:@pane-background-color; + border:1px solid @hovered-border-color !important; + .box-shadow(inset 0 0 3px rgba(0, 0, 0, .25)); +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/BorderContainer.css b/js/dojo-1.7.2/dijit/themes/claro/layout/BorderContainer.css new file mode 100644 index 0000000..8c0a5fa --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/BorderContainer.css @@ -0,0 +1,109 @@ +/* BorderContainer + +Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable. + +Styling the BorderContainer widget consists of the following: + +.dijitBorderContainer - for border and padding of the entire border container + +.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer. + +.dijitBorderContainer-dijitTabContainerTop, +.dijitBorderContainer-dijitTabContainerBottom, +.dijitBorderContainer-dijitTabContainerLeft, +.dijitBorderContainer-dijitTabContainerRight, +.dijitBorderContainer-dijitAccordionContainer -for border of the border containers within TabContainer or AccordionContainer widget + +.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers + +Splitters and gutters: + +.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter +.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter +.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter +.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter +.dijitSplitterHHover - for background-color of a hovered horizontal splitter +.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter +.dijitSplitterVHover - for background-color of a hovered vertical splitter +.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter +.dijitSplitterHActive - for background-color of an active horizontal splitter +.dijitSplitterVActive - for background-color of an active horizontal splitter +*/ +.claro .dijitBorderContainer { + /* matches the width of the splitters between panes */ + + padding: 5px; +} +.claro .dijitSplitContainer-child, .claro .dijitBorderContainer-child { + /* By default put borders on all children of BorderContainer, + * to give illusion of borders on the splitters themselves. + */ + + border: 1px #b5bcc7 solid; +} +.claro .dijitBorderContainer-dijitTabContainerTop, +.claro .dijitBorderContainer-dijitTabContainerBottom, +.claro .dijitBorderContainer-dijitTabContainerLeft, +.claro .dijitBorderContainer-dijitTabContainerRight, +.claro .dijitBorderContainer-dijitAccordionContainer { + /* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper), + * so override rule setting border on domNode + */ + + border: none; +} +.claro .dijitBorderContainer-dijitBorderContainer { + /* make nested BorderContainers look like a single big widget with lots of splitters */ + + border: 0; + padding: 0; +} +/* Splitters and gutters */ +.claro .dijitSplitterH, .claro .dijitGutterH { + background: none; + border: 0; + height: 5px; +} +.claro .dijitSplitterH .dijitSplitterThumb { + background: #b5bcc7 none; + height: 1px; + top: 2px; + width: 19px; +} +.claro .dijitSplitterV, .claro .dijitGutterV { + background: none; + border: 0; + width: 5px; + margin: 0; +} +.claro .dijitSplitterV .dijitSplitterThumb { + background: #b5bcc7 none; + height: 19px; + left: 2px; + width: 1px; + margin: 0; +} +/* hovered splitter */ +.claro .dijitSplitterHHover { + font-size: 1px; + background: url("../layout/images/splitterHorizontalHover.png") no-repeat center top; +} +.claro .dijitSplitterHHover .dijitSplitterThumb { + background: #759dc0 none; +} +.claro .dijitSplitterVHover { + font-size: 1px; + background: url("../layout/images/splitterVerticalHover.png") no-repeat center left; +} +.claro .dijitSplitterVHover .dijitSplitterThumb { + background: #759dc0 none; +} +.dj_ie6 .dijitSplitterHHover, .dj_ie6 .claro .dijitSplitterVHover { + background-color: #cfe5fa; + background-image: none; +} +/* active splitter */ +.claro .dijitSplitterHActive, .claro .dijitSplitterVActive { + font-size: 1px; + background-color: #abd6ff; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/BorderContainer.less b/js/dojo-1.7.2/dijit/themes/claro/layout/BorderContainer.less new file mode 100644 index 0000000..b7c672e --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/BorderContainer.less @@ -0,0 +1,128 @@ +/* BorderContainer + +Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable. + +Styling the BorderContainer widget consists of the following: + +.dijitBorderContainer - for border and padding of the entire border container + +.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer. + +.dijitBorderContainer-dijitTabContainerTop, +.dijitBorderContainer-dijitTabContainerBottom, +.dijitBorderContainer-dijitTabContainerLeft, +.dijitBorderContainer-dijitTabContainerRight, +.dijitBorderContainer-dijitAccordionContainer -for border of the border containers within TabContainer or AccordionContainer widget + +.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers + +Splitters and gutters: + +.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter +.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter +.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter +.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter +.dijitSplitterHHover - for background-color of a hovered horizontal splitter +.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter +.dijitSplitterVHover - for background-color of a hovered vertical splitter +.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter +.dijitSplitterHActive - for background-color of an active horizontal splitter +.dijitSplitterVActive - for background-color of an active horizontal splitter +*/ + +@import "../variables"; + +.claro .dijitBorderContainer { + /* matches the width of the splitters between panes */ + padding: 5px; +} + +.claro .dijitSplitContainer-child, +.claro .dijitBorderContainer-child { + /* By default put borders on all children of BorderContainer, + * to give illusion of borders on the splitters themselves. + */ + border: 1px @border-color solid; +} + +.claro .dijitBorderContainer-dijitTabContainerTop, +.claro .dijitBorderContainer-dijitTabContainerBottom, +.claro .dijitBorderContainer-dijitTabContainerLeft, +.claro .dijitBorderContainer-dijitTabContainerRight, +.claro .dijitBorderContainer-dijitAccordionContainer { + /* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper), + * so override rule setting border on domNode + */ + border: none; + +} +.claro .dijitBorderContainer-dijitBorderContainer { + /* make nested BorderContainers look like a single big widget with lots of splitters */ + border: 0; + padding: 0; +} + +/* Splitters and gutters */ + +.claro .dijitSplitterH, +.claro .dijitGutterH { + background:none; + border:0; + height:5px; +} + +.claro .dijitSplitterH .dijitSplitterThumb { + background:@border-color none; + height:1px; + top:2px; + width:19px; +} + +.claro .dijitSplitterV, +.claro .dijitGutterV { + background:none; + border:0; + width:5px; + margin: 0; +} + +.claro .dijitSplitterV .dijitSplitterThumb { + background:@border-color none; + height:19px; + left:2px; + width:1px; + margin: 0; +} + +/* hovered splitter */ +.claro .dijitSplitterHHover { + font-size: 1px; + background: url("../@{image-layout-splitter-horizontal-hover}") no-repeat center top; +} + + +.claro .dijitSplitterHHover .dijitSplitterThumb { + background:@hovered-border-color none; +} + +.claro .dijitSplitterVHover { + font-size: 1px; + background: url("../@{image-layout-splitter-vertical-hover}") no-repeat center left; +} + +.claro .dijitSplitterVHover .dijitSplitterThumb { + background:@hovered-border-color none; +} + +.dj_ie6 .dijitSplitterHHover, +.dj_ie6 .claro .dijitSplitterVHover { + background-color: @splitter-hovered-background-color; + background-image:none; +} + +/* active splitter */ +.claro .dijitSplitterHActive, +.claro .dijitSplitterVActive { + font-size: 1px; + background-color:@splitter-dragged-background-color; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/ContentPane.css b/js/dojo-1.7.2/dijit/themes/claro/layout/ContentPane.css new file mode 100644 index 0000000..a7753de --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/ContentPane.css @@ -0,0 +1,38 @@ +/* ContentPane + * + * .dijitContentPane + * set padding for basic content pane + * + * Nested layouts: + * + * .dijitTabContainerTop-dijitContentPane, + * .dijitTabContainerLeft-dijitContentPane, + * .dijitTabContainerBottom-dijitContentPane, + * .dijitTabContainerRight-dijitContentPane + * set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container + * + * .dijitAccordionContainer-dijitContentPane + * set background-color and padding of ContentPane nested within Accordion + * + * .dijitSplitContainer-dijitContentPane, + * set background-color and padding of ContentPane nested within a SplitContainer + * + * .dijitBorderContainer-dijitContentPane + * set background-color and padding of ContentPane nested within a BorderContainer + */ +.claro .dijitContentPane { + padding: 8px; +} +/* nested layouts */ +.claro .dijitTabContainerTop-dijitContentPane, +.claro .dijitTabContainerLeft-dijitContentPane, +.claro .dijitTabContainerBottom-dijitContentPane, +.claro .dijitTabContainerRight-dijitContentPane, +.claro .dijitAccordionContainer-dijitContentPane { + background-color: #ffffff; + padding: 8px; +} +.claro .dijitSplitContainer-dijitContentPane, .claro .dijitBorderContainer-dijitContentPane { + background-color: #ffffff; + padding: 8px; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/ContentPane.less b/js/dojo-1.7.2/dijit/themes/claro/layout/ContentPane.less new file mode 100644 index 0000000..83329bd --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/ContentPane.less @@ -0,0 +1,43 @@ +/* ContentPane + * + * .dijitContentPane + * set padding for basic content pane + * + * Nested layouts: + * + * .dijitTabContainerTop-dijitContentPane, + * .dijitTabContainerLeft-dijitContentPane, + * .dijitTabContainerBottom-dijitContentPane, + * .dijitTabContainerRight-dijitContentPane + * set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container + * + * .dijitAccordionContainer-dijitContentPane + * set background-color and padding of ContentPane nested within Accordion + * + * .dijitSplitContainer-dijitContentPane, + * set background-color and padding of ContentPane nested within a SplitContainer + * + * .dijitBorderContainer-dijitContentPane + * set background-color and padding of ContentPane nested within a BorderContainer + */ + +@import "../variables"; + +.claro .dijitContentPane { + padding: 8px; +} + +/* nested layouts */ +.claro .dijitTabContainerTop-dijitContentPane, +.claro .dijitTabContainerLeft-dijitContentPane, +.claro .dijitTabContainerBottom-dijitContentPane, +.claro .dijitTabContainerRight-dijitContentPane, +.claro .dijitAccordionContainer-dijitContentPane { + background-color: @pane-background-color; + padding: 8px; +} +.claro .dijitSplitContainer-dijitContentPane, +.claro .dijitBorderContainer-dijitContentPane { + background-color: @pane-background-color; + padding: 8px; +}
\ No newline at end of file diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/TabContainer.css b/js/dojo-1.7.2/dijit/themes/claro/layout/TabContainer.css new file mode 100644 index 0000000..641b921 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/TabContainer.css @@ -0,0 +1,434 @@ +/* TabContainer + * + * Styling TabContainer means styling the TabList and Its content container (dijitTitlePane) + * + * Tab List: (including 4 kinds of tab location) + * .dijitTabContainerTop-tabs - tablist container at top + * .dijitTabContainerBottom-tabs - tablist container at bottom + * .dijitTabContainerLeft-tabs - tablist container at left + * .dijitTabContainerRight-tabs - tablist container at right + * + * Tab Strip Button: + * .dijitTabStripIcon - tab strip button icon + * .dijitTabStripMenuIcon - down arrow icon position + * .dijitTabStripSlideLeftIcon - left arrow icon position + * .dijitTabStripSlideRightIcon - right arrow icon position + * + * .tabStripButtonDisabled - styles for disabled tab strip buttons + * + * Tab Button: + * .dijitTabContainerTop-tabs .dijitTabInnerDiv/.dijitTabContent - styles for top tab button container + * .dijitTabContainerBottom-tabs .dijitTabInnerDiv/.dijitTabContent - styles for bottom tab button container + * .dijitTabContainerLeft-tabs .dijitTabInnerDiv/.dijitTabContent - styles for left tab button container + * .dijitTabContainerRight-tabs .dijitTabInnerDiv/.dijitTabContent - styles for right tab button container + * + * .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent + * - styles for selected status of top tab button + * same to Bottom, Left, Right Tabs + * + * .dijitTabHover .dijitTabInnerDiv - styles when mouse hover on tab buttons + * .dijitTabActive .dijitTabInnerDiv - styles when mouse down on tab buttons + * .dijitTabChecked .dijitTabInnerDiv - styles when on buttons of selected tab + * + * .dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs + * .dijitTabCloseButtonHover - styles when mouse hover on close action button + * .dijitTabCloseButtonActive - styles when mouse down on close action button + * + * Tab Button: (checked status) + * + * Tab Content Container: + * .dijitTabContainerTop-dijitContentPane + * .dijitTabContainerBottom-dijitContentPane + * .dijitTabContainerLeft-dijitContentPane + * .dijitTabContainerRight-dijitContentPane - for background and padding + * + * Nested Tabs: + * .dijitTabContainerNested - Container for nested tabs + * .dijitTabContainerTabListNested - tab list container for nested tabs + */ +/*** some common features ***/ +.claro .dijitTabPaneWrapper { + background: #ffffff; +} +.claro .dijitTabPaneWrapper, +.claro .dijitTabContainerTop-tabs, +.claro .dijitTabContainerBottom-tabs, +.claro .dijitTabContainerLeft-tabs, +.claro .dijitTabContainerRight-tabs { + /* todo: add common class name for this div */ + + border-color: #b5bcc7; +} +.claro .dijitTabCloseButton { + background: url("../layout/images/tabClose.png") no-repeat; + width: 14px; + height: 14px; + margin-left: 5px; + margin-right: -5px; +} +.claro .dijitTabCloseButtonHover { + background-position: -14px; +} +.claro .dijitTabCloseButtonActive { + background-position: -28px; +} +.claro .dijitTabSpacer { + /* set the spacer invisible. note that height:0 doesn't work on IE/quirks, it's still 10px. */ + + display: none; +} +.claro .dijitTabInnerDiv { + background-color: #efefef; + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + transition-property: background-color, border; + -webkit-transition-duration: 0.35s; + -moz-transition-duration: 0.35s; + transition-duration: 0.35s; + color: #494949; +} +.claro .dijitTabHover .dijitTabInnerDiv { + background-color: #abd6ff; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; + color: #000000; +} +.claro .dijitTabActive .dijitTabInnerDiv { + background-color: #7dbdfa; + color: #000000; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; +} +.claro .dijitTabChecked .dijitTabInnerDiv { + background-color: #cfe5fa; + color: #000000; +} +.claro .dijitTabContent { + border: 1px solid #b5bcc7; +} +.claro .dijitTabHover .dijitTabContent { + border-color: #759dc0; +} +.claro .dijitTabActive .dijitTabContent { + border-color: #759dc0; +} +.claro .dijitTabChecked .dijitTabContent { + color: #000000; + border-color: #b5bcc7; +} +.claro .tabStripButton .dijitTabInnerDiv { + background-color: transparent; +} +.claro .tabStripButton .dijitTabContent { + border: none; +} +/*** end common ***/ +/*************** top tab ***************/ +.claro .dijitTabContainerTop-tabs .dijitTab { + top: 1px; + /* used for overlap */ + + margin-right: 1px; + padding-top: 3px; +} +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab { + top: 3px; +} +/* for top tab padding. change height when status changes */ +.claro .dijitTabContainerTop-tabs .dijitTabContent { + padding: 3px 6px; + border-bottom-width: 0; + background-image: url("../layout/images/tabTop.png"); + background-position: 0 0; + background-repeat: repeat-x; + min-width: 60px; + text-align: center; +} +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { + padding-bottom: 4px; + padding-top: 6px; +} +/* normal status */ +.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv { + background-image: url("../layout/images/tabTop.png"); + background-position: 0 -248px; + background-position: bottom; + background-repeat: repeat-x; + -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04); + -moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04); +} +/* checked status */ +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { + background-image: none; + -webkit-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); +} +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { + background-position: 0 -102px; + background-repeat: repeat-x; +} +/** end top tab **/ +/*************** bottom tab ***************/ +.claro .dijitTabContainerBottom-tabs .dijitTab { + top: -1px; + /* used for overlap */ + + margin-right: 1px; +} +/* calculate the position and size */ +.claro .dijitTabContainerBottom-tabs .dijitTabContent { + padding: 3px 6px; + border-top-width: 0; + background-image: url("../layout/images/tabBottom.png"); + background-position: 0 -249px; + background-repeat: repeat-x; + background-position: bottom; + min-width: 60px; + text-align: center; +} +.claro .dijitTabContainerBottom-tabs .dijitTab { + padding-bottom: 3px; +} +/* normal status */ +.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv { + background-image: url("../layout/images/tabBottom.png"); + background-position: top; + background-repeat: repeat-x; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); +} +/* checked status */ +.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent { + padding-bottom: 7px; + padding-top: 4px; + background-position: 0 -119px; +} +.claro .dijitTabContainerBottom-tabs .dijitTabChecked { + padding-bottom: 0; +} +.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv { + background-image: none; + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); +} +/** end bottom tab **/ +/*************** left tab ***************/ +.claro .dijitTabContainerLeft-tabs .dijitTab { + border-right-width: 0; + left: 1px; + /* used for overlap */ + + margin-bottom: 1px; +} +/* normal status */ +.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv { + background-image: url("../layout/images/tabLeft.png"); + background-position: -347px -340px; + background-repeat: repeat-y; +} +.claro .dijitTabContainerLeft-tabs .dijitTabContent { + padding: 3px 8px 4px 4px; + background-image: url("../layout/images/tabLeft.png"); + background-repeat: repeat-y; + background-position: 0 0; +} +/* checked status */ +.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent { + padding-right: 9px; + border-right: none; + background-image: none; +} +.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv { + background-position: 0 -179px; + background-repeat: repeat-y; + -webkit-box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05); + box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05); +} +/** end left tab **/ +/*************** right tab ***************/ +.claro .dijitTabContainerRight-tabs .dijitTab { + border-left-width: 0; + left: -1px; + /* used for overlap */ + + margin-bottom: 1px; +} +/* normal status */ +.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv { + background-image: url("../layout/images/tabRight.png"); + background-repeat: repeat-y; + background-position: -1px -347px; +} +.claro .dijitTabContainerRight-tabs .dijitTabContent { + padding: 3px 8px 4px 4px; + background-image: url("../layout/images/tabRight.png"); + background-position: right top; + background-repeat: repeat-y; +} +/* checked status */ +.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent { + padding-left: 5px; + border-left: none; + background-image: none; +} +.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv { + background-position: -348px -179px; + -webkit-box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07); + -moz-box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07); + box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07); +} +/** end right tab **/ +/** round corner **/ +.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, .claro .dijitTabContainerTop-tabs .dijitTabContent { + -moz-border-radius: 2px 2px 0 0; + border-radius: 2px 2px 0 0; +} +.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, .claro .dijitTabContainerBottom-tabs .dijitTabContent { + -moz-border-radius: 0 0 2px 2px; + border-radius: 0 0 2px 2px; +} +.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, .claro .dijitTabContainerLeft-tabs .dijitTabContent { + -moz-border-radius: 2px 0 0 2px; + border-radius: 2px 0 0 2px; +} +.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, .claro .dijitTabContainerRight-tabs .dijitTabContent { + -moz-border-radius: 0 2px 2px 0; + border-radius: 0 2px 2px 0; +} +/************ left/right scroll buttons + menu button ************/ +.claro .tabStripButton { + background-color: #e5f2fe; + border: 1px solid #b5bcc7; +} +.claro .dijitTabListContainer-top .tabStripButton { + padding: 4px 3px; + margin-top: 7px; + background-image: url("../layout/images/tabTop.png"); + background-position: 0 0; +} +.claro .dijitTabListContainer-bottom .tabStripButton { + padding: 5px 3px; + margin-bottom: 4px; + background-image: url("../layout/images/tabTop.png"); + background-position: 0 -248px; + background-position: bottom; +} +.claro .tabStripButtonHover { + background-color: #abd6ff; +} +.claro .tabStripButtonActive { + background-color: #7dbdfa; +} +.claro .dijitTabStripIcon { + height: 15px; + width: 15px; + margin: 0 auto; + background: url("../form/images/buttonArrows.png") no-repeat -75px 50%; + background-color: transparent; +} +.claro .dijitTabStripSlideRightIcon { + background-position: -24px 50%; +} +.claro .dijitTabStripMenuIcon { + background-position: -51px 50%; +} +/*disabled styles for tab strip buttons*/ +.claro .dijitTabListContainer-top .tabStripButtonDisabled, .claro .dijitTabListContainer-bottom .tabStripButtonDisabled { + background-color: #d3d3d3; + border: 1px solid #b5bcc7; + /* to match border of TabContainer itself */ + +} +.claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon { + background-position: -175px 50%; +} +.claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon { + background-position: -124px 50%; +} +.claro .tabStripButtonDisabled .dijitTabStripMenuIcon { + background-position: -151px 50%; +} +/* Nested Tabs */ +.claro .dijitTabContainerNested .dijitTabListWrapper { + height: auto; +} +.claro .dijitTabContainerNested .dijitTabContainerTop-tabs { + border-bottom: solid 1px #b5bcc7; + padding: 1px 2px 4px; + margin-top: -2px; +} +.claro .dijitTabContainerTabListNested .dijitTabContent { + background: rgba(255, 255, 255, 0) none repeat scroll 0 0; + border: none; + padding: 4px; + border-color: rgba(118, 157, 192, 0); + -webkit-transition-property: background-color, border-color; + -moz-transition-property: background-color, border-color; + transition-property: background-color, border-color; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + transition-duration: 0.3s; + -moz-border-radius: 2px; + border-radius: 2px; +} +.claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv { + /* 4 element selector to override box-shadow setting from above rule: + * .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { ... } + */ + + background: none; + border: none; + top: 0; + /* to override top: 1px/-1px for normal tabs */ + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent { + background-color: #e5f2fe; + border: solid 1px #cfe5fa; + padding: 3px; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; +} +.claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel { + text-decoration: none; +} +.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent { + border: solid 1px #759dc0; + padding: 3px; + 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 #759dc0; + background-position: 0 105px; + background-color: #cfe5fa; +} +.claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel { + text-decoration: none; + background-image: none; +} +.claro .dijitTabPaneWrapperNested { + border: none; + /* prevent double border */ + +} +.dj_ie6 .claro .dijitTabContent, +.dj_ie6 .claro .dijitTabInnerDiv, +.dj_ie6 .dijitTabListContainer-top .tabStripButton, +.dj_ie6 .dijitTabListContainer-bottom .tabStripButton { + background-image: none; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/TabContainer.less b/js/dojo-1.7.2/dijit/themes/claro/layout/TabContainer.less new file mode 100644 index 0000000..16947ff --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/TabContainer.less @@ -0,0 +1,408 @@ +/* TabContainer + * + * Styling TabContainer means styling the TabList and Its content container (dijitTitlePane) + * + * Tab List: (including 4 kinds of tab location) + * .dijitTabContainerTop-tabs - tablist container at top + * .dijitTabContainerBottom-tabs - tablist container at bottom + * .dijitTabContainerLeft-tabs - tablist container at left + * .dijitTabContainerRight-tabs - tablist container at right + * + * Tab Strip Button: + * .dijitTabStripIcon - tab strip button icon + * .dijitTabStripMenuIcon - down arrow icon position + * .dijitTabStripSlideLeftIcon - left arrow icon position + * .dijitTabStripSlideRightIcon - right arrow icon position + * + * .tabStripButtonDisabled - styles for disabled tab strip buttons + * + * Tab Button: + * .dijitTabContainerTop-tabs .dijitTabInnerDiv/.dijitTabContent - styles for top tab button container + * .dijitTabContainerBottom-tabs .dijitTabInnerDiv/.dijitTabContent - styles for bottom tab button container + * .dijitTabContainerLeft-tabs .dijitTabInnerDiv/.dijitTabContent - styles for left tab button container + * .dijitTabContainerRight-tabs .dijitTabInnerDiv/.dijitTabContent - styles for right tab button container + * + * .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent + * - styles for selected status of top tab button + * same to Bottom, Left, Right Tabs + * + * .dijitTabHover .dijitTabInnerDiv - styles when mouse hover on tab buttons + * .dijitTabActive .dijitTabInnerDiv - styles when mouse down on tab buttons + * .dijitTabChecked .dijitTabInnerDiv - styles when on buttons of selected tab + * + * .dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs + * .dijitTabCloseButtonHover - styles when mouse hover on close action button + * .dijitTabCloseButtonActive - styles when mouse down on close action button + * + * Tab Button: (checked status) + * + * Tab Content Container: + * .dijitTabContainerTop-dijitContentPane + * .dijitTabContainerBottom-dijitContentPane + * .dijitTabContainerLeft-dijitContentPane + * .dijitTabContainerRight-dijitContentPane - for background and padding + * + * Nested Tabs: + * .dijitTabContainerNested - Container for nested tabs + * .dijitTabContainerTabListNested - tab list container for nested tabs + */ + +@import "../variables"; + +/*** some common features ***/ +.claro .dijitTabPaneWrapper { + background:@pane-background-color; +} +.claro .dijitTabPaneWrapper, +.claro .dijitTabContainerTop-tabs, +.claro .dijitTabContainerBottom-tabs, +.claro .dijitTabContainerLeft-tabs, +.claro .dijitTabContainerRight-tabs { + /* todo: add common class name for this div */ + border-color: @border-color; +} +.claro .dijitTabCloseButton { + background: url("../@{image-layout-tab-close}") no-repeat; + width: 14px; + height: 14px; + margin-left: 5px; + margin-right:-5px; +} +.claro .dijitTabCloseButtonHover { + background-position:-14px; +} +.claro .dijitTabCloseButtonActive { + background-position:-28px; +} +.claro .dijitTabSpacer { + /* set the spacer invisible. note that height:0 doesn't work on IE/quirks, it's still 10px. */ + display: none; +} +.claro .dijitTabInnerDiv { + background-color:@unselected-background-color; + .transition-property(background-color, border); + .transition-duration(.35s); + color:@unselected-text-color; +} +.claro .dijitTabHover .dijitTabInnerDiv { + background-color:@hovered-background-color; + .transition-duration(.25s); + color:@hovered-text-color; +} +.claro .dijitTabActive .dijitTabInnerDiv { + background-color:@pressed-background-color; + color:@selected-text-color; + .transition-duration(.1s); +} +.claro .dijitTabChecked .dijitTabInnerDiv { + background-color:@selected-background-color; + color:@selected-text-color; +} + +.claro .dijitTabContent { + border: 1px solid @border-color; +} +.claro .dijitTabHover .dijitTabContent { + border-color: @hovered-border-color; +} +.claro .dijitTabActive .dijitTabContent { + border-color: @pressed-border-color; +} +.claro .dijitTabChecked .dijitTabContent { + color:@selected-text-color; // todo: redundant with .claro .dijitTabChecked .dijitTabInnerDiv above? + border-color: @border-color; // don't use @selected-border-color because need to match border of TabContainer +} + +.claro .tabStripButton .dijitTabInnerDiv { + background-color: transparent; +} +.claro .tabStripButton .dijitTabContent { + border: none; +} +/*** end common ***/ + + +/*************** top tab ***************/ +.claro .dijitTabContainerTop-tabs .dijitTab { + top: 1px; /* used for overlap */ + margin-right: 1px; + padding-top: 3px; +} +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab { + top: 3px; +} +/* for top tab padding. change height when status changes */ +.claro .dijitTabContainerTop-tabs .dijitTabContent { + padding:3px 6px; + border-bottom-width: 0; + background-image:url("../@{image-layout-tab-top}"); + background-position:0 0; + background-repeat:repeat-x; + min-width: 60px; + text-align: center; +} +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { + padding-bottom: 4px; + padding-top: 6px; +} + +/* normal status */ +.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv { + background-image:url("../@{image-layout-tab-top}"); + background-position:0 -248px; + background-position:bottom; + background-repeat:repeat-x; + .box-shadow(0 -1px 1px rgba(0, 0, 0, 0.04)); +} + +/* checked status */ +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { + background-image:none; + .box-shadow(0 -1px 2px rgba(0, 0, 0, 0.05)); +} +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { + background-position:0 -102px; + background-repeat:repeat-x; +} +/** end top tab **/ + + +/*************** bottom tab ***************/ +.claro .dijitTabContainerBottom-tabs .dijitTab { + top: -1px; /* used for overlap */ + margin-right: 1px; +} +/* calculate the position and size */ +.claro .dijitTabContainerBottom-tabs .dijitTabContent { + padding:3px 6px; + border-top-width: 0; + background-image: url("../@{image-layout-tab-bottom}"); + background-position:0 -249px; + background-repeat: repeat-x; + background-position:bottom; + min-width: 60px; + text-align: center; +} +.claro .dijitTabContainerBottom-tabs .dijitTab { + padding-bottom: 3px; +} +/* normal status */ +.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv { + background-image: url("../@{image-layout-tab-bottom}"); + background-position: top; + background-repeat: repeat-x; + .box-shadow(0 1px 1px rgba(0, 0, 0, 0.04)); + +} + +/* checked status */ +.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent { + padding-bottom: 7px; + padding-top: 4px; + background-position:0 -119px; +} +.claro .dijitTabContainerBottom-tabs .dijitTabChecked { + padding-bottom: 0; +} +.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv { + background-image:none; + .box-shadow(0 1px 2px rgba(0, 0, 0, 0.05)); +} +/** end bottom tab **/ + +/*************** left tab ***************/ +.claro .dijitTabContainerLeft-tabs .dijitTab { + border-right-width: 0; + left: 1px; /* used for overlap */ + margin-bottom: 1px; +} +/* normal status */ +.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv { + background-image: url("../@{image-layout-tab-left}"); + background-position: -347px -340px; + background-repeat: repeat-y; +} +.claro .dijitTabContainerLeft-tabs .dijitTabContent { + padding:3px 8px 4px 4px; + background-image: url("../@{image-layout-tab-left}"); + background-repeat: repeat-y; + background-position:0 0; +} +/* checked status */ +.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent { + padding-right: 9px; + border-right: none; + background-image: none; +} +.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv { + background-position:0 -179px; + background-repeat:repeat-y; + .box-shadow(-1px 0 2px rgba(0, 0, 0, .05)); +} +/** end left tab **/ + +/*************** right tab ***************/ +.claro .dijitTabContainerRight-tabs .dijitTab { + border-left-width: 0; + left: -1px; /* used for overlap */ + margin-bottom: 1px; +} +/* normal status */ +.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv { + background-image: url("../@{image-layout-tab-right}"); + background-repeat: repeat-y; + background-position: -1px -347px; +} +.claro .dijitTabContainerRight-tabs .dijitTabContent { + padding:3px 8px 4px 4px; + background-image: url("../@{image-layout-tab-right}"); + background-position:right top; + background-repeat: repeat-y; +} +/* checked status */ +.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent { + padding-left: 5px; + border-left: none; + background-image: none; +} +.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv { + background-position:-348px -179px; + .box-shadow(1px 0 2px rgba(0, 0, 0, 0.07)); +} +/** end right tab **/ + +/** round corner **/ +.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerTop-tabs .dijitTabContent { + .border-radius(2px 2px 0 0); +} +.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerBottom-tabs .dijitTabContent{ + .border-radius(0 0 2px 2px); +} +.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerLeft-tabs .dijitTabContent{ + .border-radius(2px 0 0 2px); +} + +.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerRight-tabs .dijitTabContent{ + .border-radius(0 2px 2px 0); +} + +/************ left/right scroll buttons + menu button ************/ +.claro .tabStripButton { + background-color:@button-background-color; + border: 1px solid @border-color; +} +.claro .dijitTabListContainer-top .tabStripButton { + padding: 4px 3px; + margin-top:7px; + background-image: url("../@{image-layout-tab-top}"); + background-position:0 0; +} +.claro .dijitTabListContainer-bottom .tabStripButton { + padding:5px 3px; + margin-bottom:4px; + background-image: url("../@{image-layout-tab-top}"); + background-position:0 -248px; + background-position:bottom; +} +.claro .tabStripButtonHover { + background-color:@hovered-background-color; +} +.claro .tabStripButtonActive { + background-color:@pressed-background-color; +} +.claro .dijitTabStripIcon { + height:15px; + width:15px; + margin: 0 auto; + background:url("../@{image-form-button-arrows}") no-repeat -75px 50%; + background-color: transparent; +} +.claro .dijitTabStripSlideRightIcon{ + background-position: -24px 50%; +} +.claro .dijitTabStripMenuIcon { + background-position: -51px 50%; +} + +/*disabled styles for tab strip buttons*/ +.claro .dijitTabListContainer-top .tabStripButtonDisabled, +.claro .dijitTabListContainer-bottom .tabStripButtonDisabled { + background-color:@tab-disabled-background-color; + border:1px solid @border-color; /* to match border of TabContainer itself */ +} +.claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon { + background-position:-175px 50%; +} +.claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon { + background-position: -124px 50%; +} +.claro .tabStripButtonDisabled .dijitTabStripMenuIcon { + background-position: -151px 50%; +} +/* Nested Tabs */ +.claro .dijitTabContainerNested .dijitTabListWrapper { + height: auto; +} +.claro .dijitTabContainerNested .dijitTabContainerTop-tabs { + border-bottom:solid 1px @border-color; + padding:1px 2px 4px; + margin-top:-2px; +} +.claro .dijitTabContainerTabListNested .dijitTabContent { + background:rgba(255, 255, 255, 0) none repeat scroll 0 0; + border: none; + padding: 4px; + border-color: rgba(118,157,192,0); + .transition-property(background-color, border-color); + .transition-duration(.3s); + .border-radius(2px); +} +.claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv { + /* 4 element selector to override box-shadow setting from above rule: + * .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { ... } + */ + background: none; + border: none; + top: 0;/* to override top: 1px/-1px for normal tabs */ + .box-shadow(none); +} +.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent { + background-color: @nestedtab-hovered-background-color; + border:solid 1px @nestedtab-hovered-border-color; + padding: 3px; + .transition-duration(.2s); +} +.claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel { + text-decoration: none; +} +.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent { + border:solid 1px @nestedtab-selected-border-color; + padding: 3px; + background: @nestedtab-selected-background-color url("../@{image-layout-tab-nested}") repeat-x; + .transition-duration(.1s); +} +.claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent { + padding: 3px; + border:solid 1px @selected-border-color; + background-position: 0 105px; + background-color:@selected-background-color; +} +.claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel { + text-decoration: none; + background-image:none; +} +.claro .dijitTabPaneWrapperNested { + border: none;/* prevent double border */ +} + + +.dj_ie6 .claro .dijitTabContent, +.dj_ie6 .claro .dijitTabInnerDiv, +.dj_ie6 .dijitTabListContainer-top .tabStripButton, +.dj_ie6 .dijitTabListContainer-bottom .tabStripButton{ + background-image: none; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/TabContainer_rtl.css b/js/dojo-1.7.2/dijit/themes/claro/layout/TabContainer_rtl.css new file mode 100644 index 0000000..89fdff0 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/TabContainer_rtl.css @@ -0,0 +1,67 @@ +.claro .dijitTabContainerTop-tabs .dijitTabRtl, .claro .dijitTabContainerBottom-tabs .dijitTabRtl { + margin-right: 0; + margin-left: 1px; +} +.claro .dijitTabRtl { + -moz-box-orient: horizontal; + text-align: right; +} +.dj_ie7 .claro .dijitTabRtl .dijitTabContent { + display: block; + left: 0; +} +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl, .dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl { + top: 1px; +} +.dj_ie7 .claro .tabStripButtonRtl .dijitButtonContents, +.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents, +.dj_ie6 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie6 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie7 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_iequirks .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_iequirks .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv { + float: left; +} +.dj_ie6 .claro .dijitTabRtl .tabLabel, +.dj_ie6 .claro .dijitTabContainerRight-tabs .dijitTabRtl, +.dj_ie6 .claro .dijitTabContainerLeft-tabs .dijitTabRtl, +.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie7 .claro .dijitTabContainerLeft-tabs .dijitTabRtl .dijitTabInnerDiv { + /*Make the .tablabel have width in ie6 with haslayout property, fix Close icon position bug*/ + + zoom: 1; +} +.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton, .dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton, .dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton { + margin-right: 5px; +} +.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, .dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs { + width: 1%; +} +.dj_ie6 .dijitTabContainerTopStrip, .dj_ie6 .dijitTabContainerBottomStrip { + position: absolute; +} +.dj_iequirks .claro .dijitTabContainerTopRtl .dijitTabContainerTopStrip { + padding-top: 10px; +} +.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtlChecked .dijitTabInnerDiv { + background-position: -341px -179px; +} +.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, .dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon { + position: relative; +} +.dj_ie6-rtl .claro .dijitTabContainerTop-tabs { + /* this strange rule prevents IE6 bug in themeTester.html?dir=rtl upon closing + * "Closable" tab, where the other tabs disappear + */ + + padding-left: 3px; +} +.dj_iequirks-rtl .claro .dijitTabListWrapper { + /* this strange rule prevents IE6 bug in themeTesterQuirk.html?dir=rtl upon closing + * "Closable" tab, where the other tabs disappear + */ + + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/TabContainer_rtl.less b/js/dojo-1.7.2/dijit/themes/claro/layout/TabContainer_rtl.less new file mode 100644 index 0000000..eaada0d --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/TabContainer_rtl.less @@ -0,0 +1,81 @@ +@import "../variables"; + +.claro .dijitTabContainerTop-tabs .dijitTabRtl, +.claro .dijitTabContainerBottom-tabs .dijitTabRtl { + margin-right: 0; + margin-left: 1px; +} +.claro .dijitTabRtl { + -moz-box-orient:horizontal; + text-align: right; +} +.dj_ie7 .claro .dijitTabRtl .dijitTabContent { + display: block; + left: 0; +} +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl, +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl { + top: 1px; +} + +// Note that .tabStripButtonRtl .dijitButtonContents needed for IE8 quirks but breaks IE6 quirks +.dj_ie7 .claro .tabStripButtonRtl .dijitButtonContents, +.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents, +.dj_ie6 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie6 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie7 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_iequirks .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_iequirks .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv { + float:left; +} +.dj_ie6 .claro .dijitTabRtl .tabLabel, +.dj_ie6 .claro .dijitTabContainerRight-tabs .dijitTabRtl, +.dj_ie6 .claro .dijitTabContainerLeft-tabs .dijitTabRtl, +.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie7 .claro .dijitTabContainerLeft-tabs .dijitTabRtl .dijitTabInnerDiv { + /*Make the .tablabel have width in ie6 with haslayout property, fix Close icon position bug*/ + zoom:1; +} +.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton, +.dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton, +.dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton { + margin-right:5px; +} + +.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, +.dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs { + width:1%; +} + +.dj_ie6 .dijitTabContainerTopStrip, +.dj_ie6 .dijitTabContainerBottomStrip { + position:absolute; +} +.dj_iequirks .claro .dijitTabContainerTopRtl .dijitTabContainerTopStrip { + padding-top: 10px; +} +.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtlChecked .dijitTabInnerDiv { + background-position:-341px -179px; +} + +.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, +.dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon { + position: relative; +} + + +.dj_ie6-rtl .claro .dijitTabContainerTop-tabs { + /* this strange rule prevents IE6 bug in themeTester.html?dir=rtl upon closing + * "Closable" tab, where the other tabs disappear + */ + padding-left: 3px; +} + +.dj_iequirks-rtl .claro .dijitTabListWrapper { + /* this strange rule prevents IE6 bug in themeTesterQuirk.html?dir=rtl upon closing + * "Closable" tab, where the other tabs disappear + */ + border-left: 1px solid @pane-background-color; + border-right: 1px solid @pane-background-color; +} diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/images/accordion.png b/js/dojo-1.7.2/dijit/themes/claro/layout/images/accordion.png Binary files differnew file mode 100644 index 0000000..4818103 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/images/accordion.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/images/splitterHorizontalHover.png b/js/dojo-1.7.2/dijit/themes/claro/layout/images/splitterHorizontalHover.png Binary files differnew file mode 100644 index 0000000..0f5b691 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/images/splitterHorizontalHover.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/images/splitterVerticalHover.png b/js/dojo-1.7.2/dijit/themes/claro/layout/images/splitterVerticalHover.png Binary files differnew file mode 100644 index 0000000..2c3c696 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/images/splitterVerticalHover.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabBottom.png b/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabBottom.png Binary files differnew file mode 100644 index 0000000..dbcfc85 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabBottom.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabClose.png b/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabClose.png Binary files differnew file mode 100644 index 0000000..f3b2363 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabClose.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabLeft.png b/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabLeft.png Binary files differnew file mode 100644 index 0000000..8e9fcba --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabLeft.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabNested.png b/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabNested.png Binary files differnew file mode 100644 index 0000000..0140cf4 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabNested.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabRight.png b/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabRight.png Binary files differnew file mode 100644 index 0000000..0aaae53 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabRight.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabTop.png b/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabTop.png Binary files differnew file mode 100644 index 0000000..2822487 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/layout/images/tabTop.png diff --git a/js/dojo-1.7.2/dijit/themes/claro/variables.less b/js/dojo-1.7.2/dijit/themes/claro/variables.less new file mode 100644 index 0000000..ca7d677 --- /dev/null +++ b/js/dojo-1.7.2/dijit/themes/claro/variables.less @@ -0,0 +1,244 @@ +// General + +@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; + +@container-background-color:#fff; // Backgrounds for various content areas such as TitlePane, ContentPane and Inputs + +@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 + + +@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 + +@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 + +@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: @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: @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. + +// CheckBox, RadioButton +@focus-outline-color: darken(@secondary-color, 65); // Color for artificial focus outline around labels of checkboxes + +// TabContainer +@nestedtab-hovered-background-color: @unfocused-clickable-color; +@nestedtab-hovered-border-color: @primary-color; +@nestedtab-selected-border-color: @selected-border-color; +@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: @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: @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: @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: @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: @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:@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: @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: @minor-selected-color; + +// ColorPalette +@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: @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: @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: @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: @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: @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-shadedsection-background-color: @bar-background-color;// background color used for <pre>, <code>, and table header rows +@document-border-color: @disabled-color; // Border for <pre>, <code>, tables, etc. + +// Images +@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 + +.border-radius (@radius) { + -moz-border-radius: @radius; + border-radius: @radius; +} + +.box-shadow (@value) { + -webkit-box-shadow: @value; + -moz-box-shadow: @value; + box-shadow: @value; +} + +.transition-property (@value) { + -webkit-transition-property: @value; + -moz-transition-property: @value; + transition-property: @value; +} + +.transition-property (@value1, @value2) { + -webkit-transition-property: @value1, @value2; + -moz-transition-property: @value1, @value2; + transition-property: @value1, @value2; +} + +.transition-duration (@value) { + -webkit-transition-duration: @value; + -moz-transition-duration: @value; + transition-duration: @value; +} + +.transition-duration (@value1, @value2) { + -webkit-transition-duration: @value1, @value2; + -moz-transition-duration: @value1, @value2; + transition-duration: @value1, @value2; +} + +.transition-timing-function (@value) { + -webkit-transition-timing-function: @value; + -moz-transition-timing-function: @value; + transition-timing-function: @value; +} |
