Actualización
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -0,0 +1,277 @@
|
||||
/* 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;
|
||||
border-collapse: separate; // in case user CSS has set border-collapse: collapse for tables
|
||||
.border-radius(4px);
|
||||
|
||||
// Background color and alpha-gradient
|
||||
background-color: @calendar-background-color;
|
||||
background-image: url("images/calendar.png"); // fallback for browsers that don't support CSS gradients
|
||||
background-repeat: repeat-x; // so bottom of calendar isn't affected by gradient image repeating
|
||||
.alpha-white-gradient(1, 0px, 0.4, 2px, 0, 100%);
|
||||
|
||||
text-align:center;
|
||||
padding:6px 5px 3px 5px;
|
||||
}
|
||||
.dj_ie6 .claro .dijitCalendar {
|
||||
background-image:none; // because on IE6 background-image overrides background-color
|
||||
}
|
||||
.claro .dijitCalendar img {
|
||||
border:none;
|
||||
}
|
||||
.claro .dijitCalendarHover, .claro .dijitCalendar:hover,
|
||||
.claro .dijitCalendarActive {
|
||||
/* treat dijitCalendarActive like hover since there's
|
||||
* no concept of clicking a Calendar as a whole (although you can click things inside the calendar)
|
||||
*/
|
||||
background-color: @hovered-background-color;
|
||||
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;
|
||||
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-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 {
|
||||
padding: 0 3px 0 2px;
|
||||
border:solid 1px @border-color;
|
||||
.box-shadow(0 0 0 rgba(0,0,0,0));
|
||||
|
||||
// Override background settings from vanilla .dijitButtonNode. We want to inherit background of Calendar.
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode,
|
||||
.claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode {
|
||||
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 {
|
||||
border-color: @hovered-border-color;
|
||||
border-width:1px 0;
|
||||
.gradient-and-filter(@hovered-background-color, 70, 0);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.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;}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitColorPalette {border: 1px solid #b5bcc7; background: #ffffff; -moz-border-radius: 0; border-radius: 0;}.claro .dijitColorPalette .dijitPaletteImg {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;}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.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 {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}.claro .dijitComboBoxHighlightMatch {background-color: #abd6ff;}.claro .dijitFocusedLabel {outline: 1px dotted #494949;}.claro .dojoDndItem {border-color: rgba(0, 0, 0, 0); -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-property: background-color, border-color; -moz-transition-property: background-color, border-color; transition-property: background-color, border-color;}.claro .dojoDndItemOver {background-color: #abd6ff; background-image: url("images/standardGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); _background-image: none; padding: 1px; border: solid 1px #759dc0; color: #000000;}.claro .dojoDndItemAnchor, .claro .dojoDndItemSelected {background-color: #cfe5fa; background-image: url("images/standardGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); _background-image: none; padding: 1px; border: solid 1px #759dc0; color: #000000;}.claro .dojoDndItemBefore, .claro .dojoDndItemAfter {border-color: #759dc0;}.claro table.dojoDndAvatar {border: 1px solid #b5bcc7; 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;}
|
||||
@@ -0,0 +1,86 @@
|
||||
/* ========= 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 .dojoDndItem {
|
||||
border-color: rgba(0,0,0,0); // rgba() instead of none to prevent flash on hover fade-in
|
||||
.transition-duration(.25s);
|
||||
.transition-property(background-color, border-color)
|
||||
}
|
||||
.claro .dojoDndItemOver {
|
||||
// Hovered item. Matches dijitTreeRowHover.
|
||||
background-color:@hovered-background-color;
|
||||
.standard-gradient;
|
||||
padding: 1px; // reduce from 2px in dijit.css
|
||||
border:solid 1px @hovered-border-color;
|
||||
color:@hovered-text-color;
|
||||
}
|
||||
.claro .dojoDndItemAnchor,
|
||||
.claro .dojoDndItemSelected {
|
||||
// Selected items(s). Matches dijitTreeRowSelected.
|
||||
background-color:@selected-background-color;
|
||||
.standard-gradient;
|
||||
padding: 1px; // reduce from 2px in dijit.css
|
||||
border:solid 1px @selected-border-color;
|
||||
color:@selected-text-color;
|
||||
}
|
||||
|
||||
.claro .dojoDndItemBefore,
|
||||
.claro .dojoDndItemAfter {
|
||||
// line to indicate that user is dropping before/after this dojoDndItem
|
||||
border-color: @dnd-dropseparator-color;
|
||||
}
|
||||
|
||||
.claro table.dojoDndAvatar {
|
||||
border: 1px solid @border-color;
|
||||
border-collapse: collapse;
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.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 {margin: -10px -8px; padding: 10px 8px;}.claro .dijitDialogPaneActionBar {background-color: #efefef; padding: 3px 5px 2px 7px; text-align: right; border-top: 1px solid #d3d3d3; margin: 10px -8px -10px;}.claro .dijitTooltipDialog .dijitDialogPaneActionBar {-webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; margin: 10px -10px -8px;}.claro .dijitDialogPaneActionBar .dijitButton {float: none;}.claro .dijitDialogTitleBar {border: 1px solid #ffffff; border-top: none; background-color: #abd6ff; background-image: url("images/standardGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); _background-image: none; padding: 5px 7px 4px 7px;}.claro .dijitDialogTitle {padding: 0 1px; font-size: 1.091em; color: #000000;}.claro .dijitDialogCloseIcon {background: url("images/dialogCloseIcon.png"); background-repeat: no-repeat; position: absolute; right: 5px; height: 15px; width: 21px;}.dj_ie6 .claro .dijitDialogCloseIcon {background-image: url("images/dialogCloseIcon8bit.png");}.claro .dijitDialogCloseIconHover {background-position: -21px;}.claro .dijitDialogCloseIconActive {background-position: -42px;}.claro .dijitTooltip, .claro .dijitTooltipDialog {background: transparent;}.dijitTooltipBelow {padding-top: 13px; padding-left: 3px; padding-right: 3px;}.dijitTooltipAbove {padding-bottom: 13px; padding-left: 3px; padding-right: 3px;}.claro .dijitTooltipContainer {background-color: #ffffff; background-image: -moz-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px); background-image: -webkit-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px); background-image: -o-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px); background-image: -ms-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px); 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;}.claro .dijitTooltipConnector {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 {left: auto !important; right: 3px;}.claro .dijitTooltipBelow .dijitTooltipConnector {top: 0; left: 3px; background-position: -31px 0; width: 16px; height: 14px;}.claro .dijitTooltipAbove .dijitTooltipConnector {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 {right: 0; background-position: 0 0; width: 16px; height: 14px;}.claro .dijitTooltipRight {padding-left: 14px;}.claro .dijitTooltipRight .dijitTooltipConnector {left: 0; background-position: -48px 0; width: 16px; height: 14px;}.claro .dijitDialogUnderlay {background: #ffffff;}
|
||||
@@ -0,0 +1,209 @@
|
||||
/* 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 .dijitTooltipDialog .dijitDialogPaneActionBar {
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
margin: 10px -10px -8px;
|
||||
}
|
||||
.claro .dijitDialogPaneActionBar .dijitButton {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
.standard-gradient;
|
||||
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;
|
||||
.linear-gradient(bottom, @tooltip-gradient-color 0px, @popup-background-color 10px);
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitDialogRtl .dijitDialogCloseIcon {right: auto; left: 5px;}.claro .dijitDialogRtl .dijitDialogPaneActionBar {text-align: left; padding: 3px 7px 2px 5px;}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.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-repeat: repeat-x;}.claro .dijitEditorHover .dijitEditorIFrameContainer, .claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame {background-color: #e5f2fe;}.claro .dijitEditorFocused .dijitEditorIFrameContainer, .claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame {background-color: #ffffff;}.claro .dijitEditorHover .dijitEditorIFrameContainer, .claro .dijitEditorFocused .dijitEditorIFrameContainer {background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); background-image: -ms-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);}.claro .dijitEditorDisabled {border: 1px solid #d3d3d3; color: #818181;}.claro .dijitDisabled .dijitEditorIFrame, .claro .dijitDisabled .dijitEditorIFrameContainer, .claro .dijitDisabled .dijitEditorIFrameContainer .dijitEditorIFrame {background-color: #efefef; background-image: none;}
|
||||
@@ -0,0 +1,57 @@
|
||||
/* 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-repeat:repeat-x;
|
||||
}
|
||||
.claro .dijitEditorHover .dijitEditorIFrameContainer,
|
||||
.claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame{
|
||||
background-color: @textbox-hovered-background-color;
|
||||
}
|
||||
.claro .dijitEditorFocused .dijitEditorIFrameContainer,
|
||||
.claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame{
|
||||
background-color: @textbox-focused-background-color;
|
||||
}
|
||||
.claro .dijitEditorHover .dijitEditorIFrameContainer,
|
||||
.claro .dijitEditorFocused .dijitEditorIFrameContainer {
|
||||
.textbox-background-image;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitEditorRtl .dijitEditorIFrameContainer {padding: 3px 10px 1px 3px;}
|
||||
@@ -0,0 +1,9 @@
|
||||
/* Editor */
|
||||
|
||||
@import "variables";
|
||||
|
||||
.claro .dijitEditorRtl .dijitEditorIFrameContainer{
|
||||
padding:3px 10px 1px 3px;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitInlineEditBoxDisplayMode {border: 1px solid transparent;}.claro .dijitInlineEditBoxDisplayModeHover {background-color: #e5f2fe; border: solid 1px #759dc0;}.dj_ie6 .claro .dijitInlineEditBoxDisplayMode {border: none;}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitMenuBar {border: 1px solid #b5bcc7; margin: 0; padding: 0; background-color: #efefef; background-image: url("images/standardGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); _background-image: none;}.claro .dijitMenu {background-color: #ffffff; border: 1px solid #759dc0; margin: -1px 0;}.dj_ie6 .claro .dijitMenu {margin: 0;}.claro .dijitMenuItem {color: #000000;}.claro .dijitMenuBar .dijitMenuItem {padding: 6px 10px 7px; margin: -1px;}.claro .dijitMenuBar .dijitMenuItemHover, .claro .dijitMenuBar .dijitMenuItemSelected {border: solid 1px #759dc0; padding: 5px 9px 6px;}.claro .dijitMenuTable {border-collapse: separate; border-spacing: 0 0; padding: 0;}.claro .dijitMenuItem td {padding: 1px;}.claro .dijitSelectMenu .dijitMenuItemHover td,.claro .dijitSelectMenu .dijitMenuItemSelected td,.claro .dijitMenuItemHover,.claro .dijitMenuItemSelected {background-color: #abd6ff; background-image: url("images/standardGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); _background-image: none;}.claro .dijitMenuItemActive {background-image: url("images/activeGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); _background-image: none;}.dj_ie .claro .dijitMenuActive .dijitMenuItemHover,.dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,.dj_ie .claro .dijitMenuPassive .dijitMenuItemHover,.dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected {padding-top: 6px; padding-bottom: 5px; margin-top: -3px;}.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; border-bottom: 1px solid #b5bcc7;}.claro .dijitMenuSeparatorBottom {height: auto; margin-bottom: 1px;}.claro .dijitCheckedMenuItemIconChar {display: none;}.claro .dijitCheckedMenuItemIcon {background-image: url("form/images/checkboxRadioButtonStates.png"); background-repeat: no-repeat; background-position: -15px 50%; width: 15px; height: 16px;}.dj_ie6 .claro .dijitCheckedMenuItemIcon {background-image: url("form/images/checkboxAndRadioButtons_IE6.png");}.claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {background-position: 0 50%;}.claro .dijitComboBoxMenu {margin-left: 0; background-image: none;}.claro .dijitSelectMenu .dijitMenuItem td, .claro .dijitComboBoxMenu .dijitMenuItem {padding: 2px; border-width: 1px 0 1px 0; border-style: solid; border-color: #ffffff;}.claro .dijitSelectMenu .dijitMenuItemSelected td, .claro .dijitComboBoxMenu .dijitMenuItemSelected {color: #000000; border-color: #759dc0; background-color: #abd6ff;}.claro .dijitSelectMenu .dijitMenuItemHover td, .claro .dijitComboBoxMenu .dijitMenuItemHover {color: #000000; border-color: #769dc0; background-color: #abd6ff;}.claro .dijitComboBoxMenuActive .dijitMenuItemSelected {background-color: #7dbdfa;}.claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton {font-style: italic;}
|
||||
@@ -0,0 +1,179 @@
|
||||
/* 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 background-color of an active (mousedown) menu item
|
||||
td.dijitMenuItemIconCell - for padding around a menu item's icon
|
||||
td.dijitMenuItemLabel - for padding around a menu item's label
|
||||
.dijitMenuSeparatorTop - for border, top border, of the separator
|
||||
.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;
|
||||
.standard-gradient;
|
||||
}
|
||||
|
||||
.claro .dijitMenu {
|
||||
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 .dijitMenuItem {
|
||||
color: @text-color;
|
||||
}
|
||||
.claro .dijitMenuBar .dijitMenuItem {
|
||||
padding: 6px 10px 7px;
|
||||
margin:-1px;
|
||||
}
|
||||
.claro .dijitMenuBar .dijitMenuItemHover,
|
||||
.claro .dijitMenuBar .dijitMenuItemSelected {
|
||||
// on hover or selection of MenuBar item, add border and reduce padding to compensate
|
||||
border:solid 1px @hovered-border-color;
|
||||
padding: 5px 9px 6px;
|
||||
}
|
||||
|
||||
/* this prevents jiggling upon hover of a menu item */
|
||||
.claro .dijitMenuTable {
|
||||
border-collapse:separate;
|
||||
border-spacing:0 0;
|
||||
padding:0;
|
||||
}
|
||||
.claro .dijitMenuItem td{
|
||||
padding:1px;
|
||||
}
|
||||
/* hover over a MenuItem or MenuBarItem */
|
||||
.claro .dijitSelectMenu .dijitMenuItemHover td,
|
||||
.claro .dijitSelectMenu .dijitMenuItemSelected td,
|
||||
.claro .dijitMenuItemHover,
|
||||
.claro .dijitMenuItemSelected {
|
||||
// note: seems like the selected MenuItem should use @pressed-background-color
|
||||
// and .active-gradient, but claro didn't to that
|
||||
background-color: @hovered-background-color;
|
||||
.standard-gradient;
|
||||
}
|
||||
.claro .dijitMenuItemActive {
|
||||
// todo: seems like the selected MenuItem should come here
|
||||
// todo: seems like should use @pressed-background-color
|
||||
.active-gradient;
|
||||
}
|
||||
.dj_ie .claro .dijitMenuActive .dijitMenuItemHover,
|
||||
.dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,
|
||||
.dj_ie .claro .dijitMenuPassive .dijitMenuItemHover,
|
||||
.dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected {
|
||||
// Selectivity set to override ComboBox rules below.
|
||||
// If this rule isn't present, on IE6 hovering an item in the ComboBox drop down causes two
|
||||
// items to be highlighted (except when hovering the first item in the list)
|
||||
padding-top: 6px;
|
||||
padding-bottom: 5px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.claro 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 .dijitSelectMenu .dijitMenuItem td,
|
||||
.claro .dijitComboBoxMenu .dijitMenuItem {
|
||||
padding: @textbox-padding; // Make drop down menu text line up with text in <input>.
|
||||
border-width:1px 0 1px 0;
|
||||
border-style:solid;
|
||||
border-color: @select-dropdownitem-background-color;
|
||||
}
|
||||
.claro .dijitSelectMenu .dijitMenuItemSelected td,
|
||||
.claro .dijitComboBoxMenu .dijitMenuItemSelected {
|
||||
color:@selected-text-color;
|
||||
border-color:@hovered-border-color;
|
||||
background-color:@hovered-background-color;
|
||||
}
|
||||
.claro .dijitSelectMenu .dijitMenuItemHover td,
|
||||
.claro .dijitComboBoxMenu .dijitMenuItemHover {
|
||||
color: #000000;
|
||||
border-color: #769dc0;
|
||||
background-color: #abd6ff;
|
||||
}
|
||||
.claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
|
||||
background-color: @select-dropdownitem-hovered-background-color; /* TODO: why is this a different color than normal .dijitMenuItemSelected? */
|
||||
}
|
||||
.claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton {
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitMenuItemRtl .dijitMenuExpand {background-position: -7px 0; margin-right: 0; margin-left: 3px;}.claro .dijitMenuItemRtl .dijitMenuItemIcon {margin: 0 4px 0 0;}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitProgressBar {margin: 2px 0 2px 0;}.claro .dijitProgressBarEmpty {background-color: #ffffff; border-color: #759dc0;}.claro .dijitProgressBarTile {background-color: #abd6ff; background-image: url("images/progressBarFull.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%); background-attachment: scroll;}.dj_ie6 .claro .dijitProgressBarTile {background-image: none;}.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 {color: #000000;}.claro .dijitProgressBarIndeterminate .dijitProgressBarTile {background: #efefef url("images/progressBarAnim.gif") repeat-x top;}
|
||||
@@ -0,0 +1,64 @@
|
||||
/* 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-color: @progressbar-empty-background-color;
|
||||
border-color: @progressbar-border-color;
|
||||
}
|
||||
.claro .dijitProgressBarTile {
|
||||
/* inner container for finished portion when in 'tile' (image) mode */
|
||||
background-color: @progressbar-full-background-color;
|
||||
|
||||
// gradient background using CSS gradient, with fallback to image for IE
|
||||
background-image: url("images/progressBarFull.png");
|
||||
background-repeat: repeat-x;
|
||||
.alpha-white-gradient(0.93,0px, 0.41,1px, 0.7,2px, 0,100%);
|
||||
background-attachment: scroll; // override strange "fixed" setting from dijit.css
|
||||
}
|
||||
.dj_ie6 .claro .dijitProgressBarTile {
|
||||
background-image: none;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
These are "less" files that compile into the CSS of claro.
|
||||
|
||||
1. Install node from http://nodejs.org/#download
|
||||
|
||||
2. To compile all the files:
|
||||
|
||||
$ cd dijit/themes/claro
|
||||
$ node compile.js
|
||||
|
||||
|
||||
See http://lesscss.org/ and https://github.com/cloudhead/less.js/ for more information.
|
||||
@@ -0,0 +1 @@
|
||||
.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;}.claro .dijitTimePickerItem {background-image: url("images/standardGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); _background-image: none; border-top: solid 1px #b5bcc7; border-bottom: solid 1px #b5bcc7; margin-right: -1px; margin-left: -1px; margin-top: -1px;}.claro .dijitTimePickerTick {color: #818181; background-color: #efefef; font-size: 0.818em;}.claro .dijitTimePickerMarker {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; zoom: 1;}.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/standardGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); _background-image: none;}.claro .dijitTimePicker .dijitArrowButtonInner {height: 100%; background-image: url("form/images/commonFormArrows.png"); background-repeat: no-repeat; background-position: -140px 45%;}.claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner {background-position: -35px 45%;}.claro .dijitTimePicker .dijitUpArrowHover, .claro .dijitTimePicker .dijitDownArrowHover {background-color: #abd6ff;}.claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner {background-position: -175px 45%;}.claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner {background-position: -70px 45%;}
|
||||
@@ -0,0 +1,115 @@
|
||||
/* 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) */
|
||||
.standard-gradient;
|
||||
border-top:solid 1px @border-color;
|
||||
border-bottom:solid 1px @border-color;
|
||||
margin-right:-1px;
|
||||
margin-left:-1px;
|
||||
margin-top:-1px;
|
||||
}
|
||||
.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;
|
||||
.standard-gradient;
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
|
||||
// TODO: should have active rule, for clicking a .dijitTimePickerItem
|
||||
@@ -0,0 +1 @@
|
||||
.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%;}
|
||||
@@ -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%;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitTitlePaneTitle {background-color: #efefef; background-image: url("images/standardGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); _background-image: none; border: 1px solid #b5bcc7; padding: 0 7px 3px 7px; min-height: 17px;}.claro .dijitTitlePaneTitleHover {background-color: #abd6ff; border-color: #759dc0;}.claro .dijitTitlePaneTitleActive {background-color: #7dbdfa; border-color: #759dc0; background-image: url("images/activeGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); _background-image: none;}.claro .dijitTitlePaneTitleFocus {margin-top: 3px; 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;}
|
||||
@@ -0,0 +1,70 @@
|
||||
/* 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?
|
||||
.standard-gradient;
|
||||
border:1px solid @border-color;
|
||||
padding: 0 7px 3px 7px;
|
||||
min-height:17px;
|
||||
}
|
||||
.claro .dijitTitlePaneTitleHover {
|
||||
background-color: @hovered-background-color;
|
||||
border-color: @hovered-border-color;
|
||||
}
|
||||
.claro .dijitTitlePaneTitleActive {
|
||||
background-color: @pressed-background-color;
|
||||
border-color: @pressed-border-color;
|
||||
.active-gradient;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitTitlePaneRtl .dijitClosed .dijitArrowNode {background-position: -7px 0;}
|
||||
@@ -0,0 +1,7 @@
|
||||
/* TitlePane */
|
||||
|
||||
@import "variables";
|
||||
|
||||
.claro .dijitTitlePaneRtl .dijitClosed .dijitArrowNode {
|
||||
background-position: -7px 0;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,173 @@
|
||||
/* 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;
|
||||
.standard-gradient;
|
||||
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);
|
||||
|
||||
background-color:rgba(171,214,255,0);
|
||||
background-image: none; /* cancel gradient for normal buttons, we don't want any gradient besides toolbar's on non-hovered buttons */
|
||||
}
|
||||
.dj_ie .claro .dijitToolbar .dijitButton .dijitButtonNode,
|
||||
.dj_ie .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
|
||||
.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(...) */
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
border-width:1px;
|
||||
background-color: @hovered-background-color;
|
||||
.standard-gradient;
|
||||
padding: 1px;
|
||||
}
|
||||
.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode,
|
||||
.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton {
|
||||
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;
|
||||
.active-gradient;
|
||||
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;
|
||||
padding: 2px;
|
||||
}
|
||||
.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive {
|
||||
background-color: @pressed-background-color;
|
||||
.active-gradient;
|
||||
}
|
||||
.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive {
|
||||
background-color: @pressed-background-color;
|
||||
.active-gradient;
|
||||
}
|
||||
|
||||
/* Avoid double border between button and arrow */
|
||||
.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;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
.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 {-moz-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;}.claro .dijitToolbar .dijitComboButtonRtl .dijitArrowButton {-moz-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px;}.claro .dijitToolbar .dijitComboButtonRtlHover .dijitArrowButton, .claro .dijitToolbar .dijitComboButtonRtlActive .dijitArrowButton {border-left-width: 1px; border-right-width: 0; padding-left: 1px; padding-right: 2px;}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitTreeNode {zoom: 1;}.claro .dijitTreeIsRoot {background-image: none;}.claro .dijitTreeRow, .claro .dijitTreeNode .dojoDndItemBefore, .claro .dijitTreeNode .dojoDndItemAfter {padding: 4px 0 2px 0; background-color: none; background-color: transparent; background-color: rgba(171, 214, 255, 0); background-position: 0 0; background-repeat: repeat-x; border: solid 0 transparent; 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-color: #cfe5fa; background-image: url("images/standardGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); _background-image: none; padding: 3px 0 1px; border-color: #759dc0; border-width: 1px 0; color: #000000;}.claro .dijitTreeRowHover {background-color: #abd6ff; background-image: url("images/standardGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); _background-image: none; padding: 3px 0 1px; border-color: #759dc0; border-width: 1px 0; 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/activeGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); _background-image: none; padding: 3px 0 1px; border-color: #759dc0; border-width: 1px 0; color: #000000;}.claro .dijitTreeRowFocused {background-repeat: repeat;}.claro .dijitTreeExpando {background-image: url("images/treeExpandImages.png"); width: 16px; height: 16px; background-position: -35px 0;}.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");}.claro .dijitTreeNode .dojoDndItemBefore .dijitTreeContent {border-top: 2px solid #759dc0;}.claro .dijitTreeNode .dojoDndItemAfter .dijitTreeContent {border-bottom: 2px solid #759dc0;}
|
||||
@@ -0,0 +1,127 @@
|
||||
/* 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 0 2px 0;
|
||||
|
||||
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: solid 0 transparent;
|
||||
|
||||
color: @text-color;
|
||||
|
||||
.transition-property(background-color, border-color);
|
||||
.transition-duration(.25s);
|
||||
.transition-timing-function(ease-out);
|
||||
}
|
||||
|
||||
.claro .dijitTreeRowSelected {
|
||||
background-color: @selected-background-color;
|
||||
.standard-gradient;
|
||||
padding: 3px 0 1px;
|
||||
border-color: @selected-border-color;
|
||||
border-width: 1px 0;
|
||||
color: @selected-text-color;
|
||||
}
|
||||
.claro .dijitTreeRowHover {
|
||||
background-color: @hovered-background-color;
|
||||
.standard-gradient;
|
||||
padding: 3px 0 1px;
|
||||
border-color: @hovered-border-color;
|
||||
border-width: 1px 0;
|
||||
color: @hovered-text-color;
|
||||
.transition-duration(.25s);
|
||||
}
|
||||
.claro .dijitTreeRowActive {
|
||||
background-color:@pressed-background-color;
|
||||
.active-gradient;
|
||||
padding: 3px 0 1px;
|
||||
border-color: @pressed-border-color;
|
||||
border-width: 1px 0;
|
||||
color: @selected-text-color;
|
||||
}
|
||||
.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?
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -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);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
body, div, dl, dt, dd, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin: 0; padding: 0;}fieldset, img {border: 0 none;}address, caption, cite, code, dfn, th, var {font-style: normal; font-weight: normal;}caption, th {text-align: left;}q:before, q:after {content:"";}abbr, acronym {border:0;}body {font: 12px Myriad,Helvetica,Tahoma,Arial,clean,sans-serif; *font-size: 75%;}h1 {font-size: 1.5em; font-weight: normal; line-height: 1em; margin-top: 1em; margin-bottom:0;}h2 {font-size: 1.1667em; font-weight: bold; line-height: 1.286em; margin-top: 1.929em; margin-bottom:0.643em;}h3, h4, h5, h6 {font-size: 1em; font-weight: bold; line-height: 1.5em; margin-top: 1.5em; margin-bottom: 0;}p {font-size: 1em; margin-top: 1.5em; margin-bottom: 1.5em; line-height: 1.5em;}blockquote {font-size: 0.916em; margin-top: 3.272em; margin-bottom: 3.272em; line-height: 1.636em; padding: 1.636em; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}ol li, ul li {font-size: 1em; line-height: 1.5em; margin: 0;}pre, code {font-size:115%; *font-size:100%; font-family: Courier, "Courier New"; background-color: #efefef; border: 1px solid #ccc;}pre {border-width: 1px 0; padding: 1.5em;}table {font-size:100%;}.dojoTabular {border-collapse: collapse; border-spacing: 0; border: 1px solid #ccc; margin: 0 1.5em;}.dojoTabular th {text-align: center; font-weight: bold;}.dojoTabular thead,.dojoTabular tfoot {background-color: #efefef; border: 1px solid #ccc; border-width: 1px 0;}.dojoTabular th,.dojoTabular td {padding: 0.25em 0.5em;}.claro {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .688em; color: #131313;}.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;}.claro p {line-height: 1.3em;}.claro pre, .claro code {font-family: inherit; background-color: #efefef; border: 1px solid #d3d3d3;}.claro table.dojoTabular thead, .claro table.dojoTabular tfoot {background-color: #efefef; border: 1px solid #d3d3d3;}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitButtonNode {-webkit-transition-property: background-color; -moz-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s;}.claro .dijitButton .dijitButtonNode,.claro .dijitDropDownButton .dijitButtonNode,.claro .dijitComboButton .dijitButtonNode,.claro .dijitToggleButton .dijitButtonNode {border: 1px solid #759dc0; padding: 2px 4px 4px 4px; color: #000000; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); background-color: #bcd8f4; background-image: url("images/buttonEnabled.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); background-image: -webkit-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); background-image: -o-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); background-image: -ms-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); _background-image: none;}.claro .dijitComboButton .dijitArrowButton {border-left-width: 0; padding: 4px 2px 4px 2px;}.claro .dijitArrowButtonInner {width: 15px; height: 15px; margin: 0 auto; background-image: url("../form/images/buttonArrows.png"); background-repeat: no-repeat; background-position: -51px 53%;}.claro .dijitLeftArrowButton .dijitArrowButtonInner {background-position: -77px 53%;}.claro .dijitRightArrowButton .dijitArrowButtonInner {background-position: -26px 53%;}.claro .dijitUpArrowButton .dijitArrowButtonInner {background-position: 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;}.claro .dijitButtonHover .dijitButtonNode,.claro .dijitDropDownButtonHover .dijitButtonNode,.claro .dijitComboButton .dijitButtonNodeHover,.claro .dijitComboButton .dijitDownArrowButtonHover,.claro .dijitToggleButtonHover .dijitButtonNode {background-color: #86bdf2; color: #000000; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s;}.claro .dijitButtonActive .dijitButtonNode,.claro .dijitDropDownButtonActive .dijitButtonNode,.claro .dijitComboButtonActive .dijitButtonNode,.claro .dijitToggleButtonActive .dijitButtonNode,.claro .dijitToggleButtonChecked .dijitButtonNode {background-color: #86bdf2; -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s;}.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-color: #efefef; border: solid 1px #d3d3d3; color: #818181; -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); background-image: url("images/buttonDisabled.png"); background-image: -moz-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); background-image: -webkit-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); background-image: -o-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); background-image: -ms-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); _background-image: none;}.claro .dijitComboButtonDisabled .dijitArrowButton {border-left-width: 0;}.claro table.dijitComboButton {border-collapse: separate;}.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;}
|
||||
@@ -0,0 +1,164 @@
|
||||
/* 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;
|
||||
color: @text-color;
|
||||
.border-radius(@button-border-radius);
|
||||
.box-shadow(0 1px 1px rgba(0,0,0,0.15));
|
||||
|
||||
background-color: desaturate(darken(@button-background-color, 10), 20);
|
||||
|
||||
// Alpha transparency layer to add gradient to above background color.
|
||||
// Use CSS gradient with fallback to image for IE.
|
||||
background-image: url("images/buttonEnabled.png");
|
||||
background-repeat: repeat-x;
|
||||
.alpha-white-gradient(1, 0px, 0, 3px, 0.75, 100%);
|
||||
_background-image: none; // IE6 can't handle background-color and background-image at once.
|
||||
}
|
||||
|
||||
|
||||
.claro .dijitComboButton .dijitArrowButton {
|
||||
border-left-width: 0;
|
||||
padding: 4px 2px 4px 2px; /* TODO: still needed? */
|
||||
}
|
||||
|
||||
/*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: desaturate(darken(@button-hovered-background-color, 10), 20);
|
||||
color:@text-color;
|
||||
.transition-duration(.2s);
|
||||
}
|
||||
|
||||
/* active, checked status */
|
||||
.claro .dijitButtonActive .dijitButtonNode,
|
||||
.claro .dijitDropDownButtonActive .dijitButtonNode,
|
||||
.claro .dijitComboButtonActive .dijitButtonNode,
|
||||
.claro .dijitToggleButtonActive .dijitButtonNode,
|
||||
.claro .dijitToggleButtonChecked .dijitButtonNode {
|
||||
background-color: desaturate(darken(@button-pressed-background-color, 10), 20);
|
||||
.box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2));
|
||||
.transition-duration(.1s);
|
||||
}
|
||||
|
||||
/* 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-color: @disabled-background-color;
|
||||
border: solid 1px @disabled-border-color;
|
||||
color: @disabled-text-color;
|
||||
.box-shadow(0 0 0 rgba(0,0,0,0));
|
||||
|
||||
// Change the gradient from light to dark.
|
||||
// Again using CSS gradient with fallback to image for IE.
|
||||
background-image: url("images/buttonDisabled.png");
|
||||
.alpha-white-gradient(1, 0%, 0, 40%);
|
||||
_background-image: none; // IE6 can't handle background-color and background-image at once.
|
||||
}
|
||||
|
||||
.claro .dijitComboButtonDisabled .dijitArrowButton{
|
||||
border-left-width: 0;
|
||||
}
|
||||
/* for ComboButton */
|
||||
.claro table.dijitComboButton {
|
||||
border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.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;}
|
||||
@@ -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 */
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitToggleButton .dijitCheckBoxIcon {background-image: url("../images/checkmarkNoBorder.png");}.dj_ie6 .claro .dijitToggleButton .dijitCheckBoxIcon {background-image: url("../images/checkmarkNoBorder.gif");}.claro .dijitCheckBox, .claro .dijitCheckBoxIcon {background-image: url("../form/images/checkboxRadioButtonStates.png"); background-repeat: no-repeat; width: 15px; height: 16px; margin: 0 2px 0 0; padding: 0;}.dj_ie6 .claro .dijitCheckBox, .dj_ie6 .claro .dijitCheckBoxIcon {background-image: url("../form/images/checkboxAndRadioButtons_IE6.png");}.claro .dijitCheckBox, .claro .dijitToggleButton .dijitCheckBoxIcon {background-position: -15px;}.claro .dijitCheckBoxChecked, .claro .dijitToggleButtonChecked .dijitCheckBoxIcon {background-position: 0;}.claro .dijitCheckBoxDisabled {background-position: -75px;}.claro .dijitCheckBoxCheckedDisabled {background-position: -60px;}.claro .dijitCheckBoxHover {background-position: -45px;}.claro .dijitCheckBoxCheckedHover {background-position: -30px;}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,241 @@
|
||||
/* 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 .dijitValidationTextBoxError .dijitValidationContainer {
|
||||
background-color: @erroricon-background-color;
|
||||
background-image: url("../@{image-form-error}");
|
||||
background-position: top center;
|
||||
border: solid @erroricon-background-color 0;
|
||||
width: 9px;
|
||||
}
|
||||
|
||||
.claro .dijitTextBoxError .dijitValidationContainer {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.claro .dijitValidationTextBoxError .dijitValidationIcon {
|
||||
width: 0;
|
||||
background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */
|
||||
}
|
||||
|
||||
/* 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 .dijitSelect .dijitInputField,
|
||||
.claro .dijitTextBox .dijitInputField {
|
||||
// Subtract 1px from top/bottom because we add 1px to other nodes, see rules below.
|
||||
// Although we are theoretically only adding 1px to top/bottom browsers seem to pad inputs by 1px on left/right,
|
||||
// although that varies by so compensate for that too.
|
||||
padding: @textbox-padding - 1px @textbox-padding;
|
||||
}
|
||||
|
||||
.dj_gecko .claro .dijitTextBox .dijitInputInner,
|
||||
.dj_webkit .claro .dijitTextBox .dijitInputInner {
|
||||
// Although we are theoretically only adding 1px to top/bottom, some browsers seem to pad inputs by 1px on left/right,
|
||||
// so compensate for that too.
|
||||
padding: @textbox-padding - 1px;
|
||||
}
|
||||
|
||||
.claro .dijitSelect,
|
||||
.claro .dijitSelect .dijitButtonContents,
|
||||
.claro .dijitTextBox,
|
||||
.claro .dijitTextBox .dijitButtonNode {
|
||||
/* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */
|
||||
border-color: @border-color;
|
||||
.transition-property(background-color, border);
|
||||
.transition-duration(.35s);
|
||||
}
|
||||
|
||||
.claro .dijitSelect,
|
||||
.claro .dijitTextBox {
|
||||
background-color: @textbox-background-color;
|
||||
}
|
||||
|
||||
/* hover */
|
||||
.claro .dijitSelectHover,
|
||||
.claro .dijitSelectHover .dijitButtonContents,
|
||||
.claro .dijitTextBoxHover,
|
||||
.claro .dijitTextBoxHover .dijitButtonNode {
|
||||
border-color: @hovered-border-color;
|
||||
.transition-duration(.25s);
|
||||
}
|
||||
|
||||
.claro .dijitTextBoxHover {
|
||||
background-color: @textbox-hovered-background-color;
|
||||
.textbox-background-image;
|
||||
}
|
||||
|
||||
/* error state */
|
||||
.claro .dijitSelectError,
|
||||
.claro .dijitSelectError .dijitButtonContents,
|
||||
.claro .dijitTextBoxError,
|
||||
.claro .dijitTextBoxError .dijitButtonNode {
|
||||
border-color: @error-border-color;
|
||||
}
|
||||
|
||||
/* focused state */
|
||||
.claro .dijitSelectFocused,
|
||||
.claro .dijitSelectFocused .dijitButtonContents,
|
||||
.claro .dijitTextBoxFocused,
|
||||
.claro .dijitTextBoxFocused .dijitButtonNode {
|
||||
border-color:@focused-border-color;
|
||||
.transition-duration(.1s);
|
||||
}
|
||||
|
||||
.claro .dijitTextBoxFocused {
|
||||
background-color: @textbox-focused-background-color;
|
||||
.textbox-background-image;
|
||||
}
|
||||
.claro .dijitTextBoxFocused .dijitInputContainer {
|
||||
background: @textbox-focused-background-color;
|
||||
}
|
||||
|
||||
.claro .dijitSelectErrorFocused,
|
||||
.claro .dijitSelectErrorFocused .dijitButtonContents,
|
||||
.claro .dijitTextBoxErrorFocused,
|
||||
.claro .dijitTextBoxErrorFocused .dijitButtonNode {
|
||||
border-color: @error-focused-border-color;
|
||||
}
|
||||
|
||||
/* disabled state */
|
||||
.claro .dijitSelectDisabled,
|
||||
.claro .dijitSelectDisabled .dijitButtonContents,
|
||||
.claro .dijitTextBoxDisabled,
|
||||
.claro .dijitTextBoxDisabled .dijitButtonNode {
|
||||
border-color: @disabled-border-color;
|
||||
}
|
||||
|
||||
.claro .dijitSelectDisabled,
|
||||
.claro .dijitTextBoxDisabled,
|
||||
.claro .dijitTextBoxDisabled .dijitInputContainer {
|
||||
background-color: @textbox-disabled-background-color;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.claro .dijitSelectDisabled,
|
||||
.claro .dijitTextBoxDisabled,
|
||||
.claro .dijitTextBoxDisabled .dijitInputInner {
|
||||
color: @disabled-text-color;
|
||||
}
|
||||
|
||||
.dj_webkit .claro .dijitDisabled input {
|
||||
/* because WebKit lightens disabled input/textarea no matter what color you specify */
|
||||
color: darken(@disabled-text-color, 5%)
|
||||
}
|
||||
|
||||
.dj_webkit .claro textarea.dijitTextAreaDisabled {
|
||||
/* because WebKit lightens disabled input/textarea no matter what color you specify */
|
||||
color: darken(@disabled-text-color, 40%)
|
||||
}
|
||||
|
||||
/*========================= for special widgets =========================*/
|
||||
|
||||
/* Input boxes with an arrow (for a drop down) */
|
||||
|
||||
.claro .dijitSelect .dijitArrowButtonInner,
|
||||
.claro .dijitComboBox .dijitArrowButtonInner {
|
||||
background-image: url("../@{image-form-common-arrows}");
|
||||
background-position:-35px 53%;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0;
|
||||
width:16px;
|
||||
}
|
||||
|
||||
.claro .dijitComboBox .dijitArrowButtonInner {
|
||||
border: 1px solid @arrowbutton-inner-border-color; // white gutter around the arrow button
|
||||
}
|
||||
|
||||
.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 .dijitSelectLabel,
|
||||
.claro .dijitTextBox .dijitInputInner,
|
||||
.claro .dijitValidationTextBox .dijitValidationContainer {
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
.claro .dijitComboBox .dijitButtonNode {
|
||||
background-color: @arrowbutton-background-color;
|
||||
.standard-gradient("../");
|
||||
}
|
||||
|
||||
/* 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;
|
||||
.active-gradient("../");
|
||||
padding: 1px; // Since no border on arrow button (see rule below)
|
||||
}
|
||||
|
||||
.dj_iequirks .claro .dijitComboBox .dijitHasDropDownOpen {
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
.claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
|
||||
background-position:-70px 53%;
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitTextBoxRtlError .dijitValidationContainer {border-left-width: 0 !important; border-right-width: 1px !important;}
|
||||
@@ -0,0 +1,8 @@
|
||||
/* claro/form/Common_rtl.css */
|
||||
|
||||
@import "../variables";
|
||||
|
||||
.claro .dijitTextBoxRtlError .dijitValidationContainer {
|
||||
border-left-width: 0 !important;
|
||||
border-right-width: 1px !important;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitSpinnerButtonContainer {overflow: hidden; position: relative; width: auto; padding: 0 2px;}.claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner {border-width: 1px 0; border-style: solid none;}.claro .dijitSpinner .dijitArrowButton {width: auto; background-color: #efefef; background-image: url("../images/standardGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); _background-image: none; overflow: hidden;}.dj_iequirks .claro .dijitSpinner .dijitArrowButton {overflow: visible;}.claro .dijitSpinner .dijitSpinnerButtonInner {width: 15px;}.claro .dijitSpinner .dijitArrowButtonInner {border: solid 1px #ffffff; border-bottom-width: 0; background-image: url("../form/images/commonFormArrows.png"); background-repeat: no-repeat; height: 100%; width: 15px; padding-left: 1px; padding-right: 1px; background-position: -139px center; display: block; margin: -1px 0 -1px 0;}.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner,.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner,.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner,.dj_ie8 .claro .dijitSpinner .dijitArrowButtonInner {margin-top: 0;}.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner {width: 19px;}.claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {background-position: -34px;}.claro .dijitSpinner .dijitArrowButtonInner .dijitInputField {padding: 0;}.claro .dijitUpArrowButtonActive, .claro .dijitDownArrowButtonActive {background-color: #abd6ff;}.claro .dijitSpinner .dijitUpArrowButtonHover, .claro .dijitSpinner .dijitDownArrowButtonHover, .claro .dijitSpinnerFocused .dijitArrowButton {background-color: #abd6ff;}.claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner {background-position: -174px;}.claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner {background-position: -69px;}.claro .dijitSpinnerFocused {background-color: #ffffff; background-image: none;}.claro .dijitSpinner .dijitDownArrowButtonActive, .claro .dijitSpinner .dijitUpArrowButtonActive {background-color: #7dbefa; background-image: url("../images/activeGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); _background-image: none;}.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {border: 0; padding: 1px; margin-right: 2px; margin-bottom: 1px;}.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner {background-position: -173px;}.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {background-position: -68px;}.claro .dijitSpinnerDisabled .dijitArrowButtonInner {background-color: #efefef;}.claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner {background-position: -104px;}.claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner {background-position: 1px;}.dj_ie7 .claro .dijitSpinner {overflow: visible;}
|
||||
@@ -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;
|
||||
.standard-gradient("../");
|
||||
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_iequirks .claro .dijitSpinner .dijitArrowButtonInner,
|
||||
.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner,
|
||||
.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner,
|
||||
.dj_ie8 .claro .dijitSpinner .dijitArrowButtonInner {
|
||||
margin-top: 0; /* since its bottom aligned */
|
||||
}
|
||||
|
||||
.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.
|
||||
.active-gradient("../");
|
||||
}
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitToggleButton .dijitRadio, .claro .dijitToggleButton .dijitRadioIcon {background-image: url("../form/images/checkboxRadioButtonStates.png");}.dj_ie6 .claro .dijitToggleButton .dijitRadio, .dj_ie6 .claro .dijitToggleButton .dijitRadioIcon {background-image: url("../form/images/checkboxAndRadioButtons_IE6.png");}.claro .dijitRadio, .claro .dijitRadioIcon {background-image: url("../form/images/checkboxRadioButtonStates.png"); background-repeat: no-repeat; width: 15px; height: 15px; margin: 0 2px 0 0; padding: 0;}.dj_ie6 .claro .dijitRadio, .dj_ie6 .claro .dijitRadioIcon {background-image: url("../form/images/checkboxAndRadioButtons_IE6.png");}.claro .dijitRadio {background-position: -105px;}.claro .dijitToggleButton .dijitRadioIcon {background-position: -107px;}.claro .dijitRadioDisabled {background-position: -165px;}.claro .dijitRadioHover {background-position: -135px;}.claro .dijitRadioChecked {background-position: -90px;}.claro .dijitToggleButtonChecked .dijitRadioIcon {background-position: -92px;}.claro .dijitRadioCheckedHover {background-position: -120px;}.claro .dijitRadioCheckedDisabled {background-position: -150px;}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitSelect .dijitArrowButtonContainer {border: 1px solid #ffffff;}.claro .dijitSelect .dijitArrowButton {padding: 0; background-color: #efefef; background-image: url("../images/standardGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); _background-image: none;}.claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner {height: 16px;}.claro .dijitSelectHover {background-color: #e5f2fe; background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); background-image: -ms-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px); background-repeat: repeat-x;}.claro .dijitSelectFocused, .claro .dijitSelectHover {border-color: #759dc0;}.claro .dijitSelectHover .dijitArrowButton {background-color: #abd6ff;}.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {background-position: -70px 53%;}.claro .dijitSelectFocused .dijitArrowButton {background-color: #7dbefa; background-image: url("../images/activeGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); _background-image: none;}.claro .dijitSelectFocused .dijitArrowButton {border: none; padding: 1px;}.claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {background-position: -70px 53%;}.claro .dijitSelectDisabled {border-color: #d3d3d3; background-color: #efefef; background-image: none; color: #818181;}.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {background-position: 0 53%;}.claro .dijitSelectMenu td.dijitMenuItemIconCell, .claro .dijitSelectMenu td.dijitMenuArrowCell {display: none;}.claro .dijitSelectMenu td.dijitMenuItemLabel {padding: 2px;}.claro .dijitSelectMenu .dijitMenuSeparatorTop {border-bottom: 1px solid #759dc0;}
|
||||
@@ -0,0 +1,98 @@
|
||||
/* 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";
|
||||
|
||||
/* normal status */
|
||||
.claro .dijitSelect .dijitArrowButtonContainer {
|
||||
border: 1px solid @arrowbutton-inner-border-color;
|
||||
}
|
||||
|
||||
.claro .dijitSelect .dijitArrowButton {
|
||||
padding: 0;
|
||||
background-color: @arrowbutton-background-color;
|
||||
.standard-gradient("../");
|
||||
}
|
||||
|
||||
.claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner {
|
||||
height:16px;
|
||||
}
|
||||
|
||||
/* hover status */
|
||||
.claro .dijitSelectHover {
|
||||
background-color: @textbox-hovered-background-color;
|
||||
.textbox-background-image;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.claro .dijitSelectFocused,
|
||||
.claro .dijitSelectHover {
|
||||
border-color:@hovered-border-color;
|
||||
}
|
||||
|
||||
.claro .dijitSelectHover .dijitArrowButton {
|
||||
background-color:@arrowbutton-hovered-background-color;
|
||||
}
|
||||
|
||||
.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {
|
||||
background-position:-70px 53%;
|
||||
}
|
||||
|
||||
/* focused status */
|
||||
.claro .dijitSelectFocused .dijitArrowButton {
|
||||
background-color:#7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior.
|
||||
.active-gradient("../");
|
||||
}
|
||||
|
||||
.claro .dijitSelectFocused .dijitArrowButton {
|
||||
border: none;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {
|
||||
background-position:-70px 53%;
|
||||
}
|
||||
|
||||
/* disable status */
|
||||
.claro .dijitSelectDisabled {
|
||||
border-color: @disabled-border-color;
|
||||
background-color: @disabled-background-color;
|
||||
background-image: none;
|
||||
color: @disabled-text-color;
|
||||
}
|
||||
|
||||
.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {
|
||||
background-position:0 53%
|
||||
}
|
||||
|
||||
/* Dropdown menu style for select */
|
||||
.claro .dijitSelectMenu td.dijitMenuItemIconCell,
|
||||
.claro .dijitSelectMenu td.dijitMenuArrowCell {
|
||||
/* so that arrow and icon cells from MenuItem are not displayed */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.claro .dijitSelectMenu td.dijitMenuItemLabel {
|
||||
/* line up menu text with text in select box (in LTR and RTL modes) */
|
||||
padding: @textbox-padding;
|
||||
}
|
||||
|
||||
.claro .dijitSelectMenu .dijitMenuSeparatorTop {
|
||||
border-bottom:1px solid @focused-border-color;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,344 @@
|
||||
/* 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 .dijitRuleLabelsContainer {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
/* Horizontal Slider */
|
||||
|
||||
.claro .dijitRuleLabelsContainerH {
|
||||
padding: 2px 0;
|
||||
}
|
||||
.claro .dijitSlider .dijitSliderProgressBarH,
|
||||
.claro .dijitSlider .dijitSliderLeftBumper{
|
||||
border-color: @border-color;
|
||||
background-color: @slider-fullbar-background-color;
|
||||
.alpha-white-gradient (top, 1,0px, 1,1px, 0,2px);
|
||||
}
|
||||
.claro .dijitSlider .dijitSliderRemainingBarH,
|
||||
.claro .dijitSlider .dijitSliderRightBumper{
|
||||
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-color: @slider-hovered-fullbar-background-color;
|
||||
border-color: @hovered-border-color;
|
||||
}
|
||||
.claro .dijitSliderHover .dijitSliderRemainingBarH,
|
||||
.claro .dijitSliderHover .dijitSliderRightBumper{
|
||||
background-color: @slider-hovered-remainingbar-background-color;
|
||||
border-color: @hovered-border-color;
|
||||
}
|
||||
.claro .dijitSliderFocused .dijitSliderProgressBarH,
|
||||
.claro .dijitSliderFocused .dijitSliderLeftBumper{
|
||||
background-color: @slider-focused-fullbar-background-color;
|
||||
border-color: @focused-border-color;
|
||||
.box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
.claro .dijitSliderFocused .dijitSliderRemainingBarH,
|
||||
.claro .dijitSliderFocused .dijitSliderRightBumper{
|
||||
background-color: @slider-focused-remainingbar-background-color;
|
||||
border-color: @focused-border-color;
|
||||
.box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
.claro .dijitSliderDisabled .dijitSliderProgressBarH,
|
||||
.claro .dijitSliderDisabled .dijitSliderLeftBumper{
|
||||
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{
|
||||
border-color: @border-color;
|
||||
background-color: @slider-fullbar-background-color;
|
||||
.alpha-white-gradient (left, 1,0px, 0,1px);
|
||||
}
|
||||
.claro .dijitSlider .dijitSliderRemainingBarV,
|
||||
.claro .dijitSlider .dijitSliderTopBumper{
|
||||
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-color: @slider-hovered-fullbar-background-color;
|
||||
border-color: @hovered-border-color;
|
||||
}
|
||||
.claro .dijitSliderHover .dijitSliderRemainingBarV,
|
||||
.claro .dijitSliderHover .dijitSliderTopBumper{
|
||||
background-color: @slider-hovered-remainingbar-background-color;
|
||||
border-color: @hovered-border-color;
|
||||
}
|
||||
.claro .dijitSliderFocused .dijitSliderProgressBarV,
|
||||
.claro .dijitSliderFocused .dijitSliderBottomBumper{
|
||||
background-color: @slider-focused-fullbar-background-color;
|
||||
border-color: @focused-border-color;
|
||||
.box-shadow(inset 1px 0px 1px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
.claro .dijitSliderFocused .dijitSliderRemainingBarV,
|
||||
.claro .dijitSliderFocused .dijitSliderTopBumper{
|
||||
background-color: @slider-focused-remainingbar-background-color;
|
||||
border-color: @focused-border-color;
|
||||
.box-shadow(inset 1px 0px 1px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
.claro .dijitSliderDisabled .dijitSliderProgressBarV,
|
||||
.claro .dijitSliderDisabled .dijitSliderBottomBumper{
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.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%;}
|
||||
@@ -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%;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 297 B |
Binary file not shown.
|
After Width: | Height: | Size: 105 B |
@@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" ?>
|
||||
<!--
|
||||
Source file for buttonDisabled.png, which is used by IE7-9 for Button gradients.
|
||||
Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
|
||||
|
||||
Output should match gradients defined in Button.css. It is however an approximation, since generated
|
||||
output has a constant height, rather than matching the height of each button.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="18px" viewBox="0 0 1 18" preserveAspectRatio="none">
|
||||
|
||||
<defs>
|
||||
<linearGradient id="disabled" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="50%" stop-color="#ffffff" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!--
|
||||
Swatch for disabled buttons. It will only fill the top part of the disabled buttons.
|
||||
The bottom of disabled buttons are pure background-color
|
||||
-->
|
||||
<rect x="0" y="0" width="1" height="18" fill="url(#disabled)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1012 B |
Binary file not shown.
|
After Width: | Height: | Size: 122 B |
@@ -0,0 +1,24 @@
|
||||
<?xml version="1.0" ?>
|
||||
<!--
|
||||
Source file for buttonEnabled.png, which is used by IE7-9 for Button gradients.
|
||||
Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
|
||||
|
||||
Output should match gradients defined in Button.css. It is however an approximation, since generated
|
||||
output has a constant height, rather than matching the height of each button.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="149px" viewBox="0 0 1 149" preserveAspectRatio="none">
|
||||
|
||||
<defs>
|
||||
<linearGradient id="enabled" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="2%" stop-color="#ffffff" stop-opacity="0"/>
|
||||
<stop offset="15%" stop-color="#ffffff" stop-opacity="0.7"/> <!-- near bottom of average height buttons -->
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!--
|
||||
Swatch for enabled buttons. It's 149px tall to account for tall buttons, but usually
|
||||
only the top will be visible.
|
||||
-->
|
||||
<rect x="0" y="0" width="1" height="149" fill="url(#enabled)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 314 B |
Binary file not shown.
|
After Width: | Height: | Size: 355 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 B |
@@ -0,0 +1,19 @@
|
||||
<?xml version="1.0" ?>
|
||||
<!--
|
||||
Source file for standardGradient.png, which is used by IE7-9 for light-to-dark gradient of many widgets.
|
||||
Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
|
||||
|
||||
Output should match CSS gradient from .standard-gradient() mixin in variables.css.
|
||||
It is however an approximation, since generated
|
||||
output has a constant height, rather than matching the height of each node.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="16px" viewBox="0 0 1 1" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="rgb(190,190,190)" stop-opacity="0.98"/>
|
||||
<stop offset="20%" stop-color="#ffffff" stop-opacity="0.65"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="1" height="1" fill="url(#gradient)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 979 B |
Binary file not shown.
|
After Width: | Height: | Size: 194 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 705 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 718 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 177 B |
Binary file not shown.
|
After Width: | Height: | Size: 233 B |
Binary file not shown.
|
After Width: | Height: | Size: 153 B |
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" ?>
|
||||
<!--
|
||||
Source file for standardGradient.png, which is used by IE7-9 for light-to-dark gradient of many widgets.
|
||||
Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
|
||||
|
||||
Output should match CSS gradient from .standard-gradient() mixin in variables.css.
|
||||
It is however an approximation, since generated
|
||||
output has a constant height, rather than matching the height of each node.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 1 1" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.7"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="1" height="1" fill="url(#gradient)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 905 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 589 B |
Binary file not shown.
|
After Width: | Height: | Size: 676 B |
Binary file not shown.
|
After Width: | Height: | Size: 799 B |
@@ -0,0 +1 @@
|
||||
.claro .dijitAccordionContainer {border: none;}.claro .dijitAccordionInnerContainer {background-color: #efefef; border: solid 1px #b5bcc7; margin-bottom: 1px; -webkit-transition-property: background-color, border; -moz-transition-property: background-color, border; transition-property: background-color, border; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; -moz-transition-timing-function: linear; transition-timing-function: linear;}.claro .dijitAccordionTitle {background-color: transparent; background-image: url("../images/standardGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); _background-image: none; padding: 5px 7px 2px 7px; min-height: 17px; color: #494949;}.claro .dijitAccordionContainer .dijitAccordionChildWrapper {background-color: #ffffff; border: 1px solid #759dc0; margin: 0 2px 2px;}.claro .dijitAccordionContainer .dijitAccordionContainer-child {padding: 9px;}.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-image: url("../images/activeGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); _background-image: none; color: #000000;}.claro .dijitAccordionInnerContainerSelected {border-color: #759dc0; background-color: #cfe5fa;}.claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle {color: #000000; background-image: url("../images/standardGradient.png"); background-repeat: repeat-x; background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); _background-image: none;}.claro .dijitAccordionInnerContainerHover .dijitAccordionTitle {color: #000000;}.claro .dijitAccordionInnerContainerHover, .claro .dijitAccordionInnerContainerSelectedActive {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; -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);}
|
||||
@@ -0,0 +1,111 @@
|
||||
/* 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 */
|
||||
.standard-gradient("../");
|
||||
padding: 5px 7px 2px 7px;
|
||||
min-height:17px;
|
||||
color:@unselected-text-color;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.active-gradient("../");
|
||||
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;
|
||||
.standard-gradient("../"); /* 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;
|
||||
}
|
||||
|
||||
// TODO: why do we have any hover effect on the selected pane?
|
||||
// Since you can't click it, there shouldn't be a hover effect.
|
||||
.claro .dijitAccordionInnerContainerHover,
|
||||
.claro .dijitAccordionInnerContainerSelectedActive {
|
||||
/* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */
|
||||
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;
|
||||
.box-shadow(inset 0 0 3px rgba(0, 0, 0, .25));
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitBorderContainer {padding: 5px;}.claro .dijitSplitContainer-child, .claro .dijitBorderContainer-child {border: 1px #b5bcc7 solid;}.claro .dijitBorderContainer-dijitTabContainerTop,.claro .dijitBorderContainer-dijitTabContainerBottom,.claro .dijitBorderContainer-dijitTabContainerLeft,.claro .dijitBorderContainer-dijitTabContainerRight,.claro .dijitBorderContainer-dijitAccordionContainer {border: none;}.claro .dijitBorderContainer-dijitBorderContainer {border: 0; padding: 0;}.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;}.claro .dijitSplitterHHover, .claro .dijitSplitterVHover {font-size: 1px; background-color: #cfe5fa;}.claro .dijitSplitterHHover {background-image: -moz-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); background-image: -webkit-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); background-image: -o-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); background-image: -ms-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);}.claro .dijitSplitterVHover {background-image: -moz-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); background-image: -webkit-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); background-image: -o-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); background-image: -ms-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);}.claro .dijitSplitterHHover .dijitSplitterThumb, .claro .dijitSplitterVHover .dijitSplitterThumb {background: #759dc0 none;}.claro .dijitSplitterHActive, .claro .dijitSplitterVActive {font-size: 1px; background-color: #abd6ff; background-image: none;}
|
||||
@@ -0,0 +1,124 @@
|
||||
/* 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,
|
||||
.claro .dijitSplitterVHover {
|
||||
font-size: 1px;
|
||||
background-color: @splitter-hovered-background-color;
|
||||
}
|
||||
|
||||
.claro .dijitSplitterHHover {
|
||||
.alpha-white-gradient (left, 1,0px, 0,50%, 1,100%);
|
||||
}
|
||||
|
||||
.claro .dijitSplitterVHover {
|
||||
.alpha-white-gradient (top, 1,0px, 0,50%, 1,100%);
|
||||
}
|
||||
|
||||
.claro .dijitSplitterHHover .dijitSplitterThumb,
|
||||
.claro .dijitSplitterVHover .dijitSplitterThumb {
|
||||
background:@hovered-border-color none;
|
||||
}
|
||||
|
||||
|
||||
/* active splitter */
|
||||
.claro .dijitSplitterHActive,
|
||||
.claro .dijitSplitterVActive {
|
||||
font-size: 1px;
|
||||
background-color:@splitter-dragged-background-color;
|
||||
background-image: none; // color all the way across, not gradient like in hover mode
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.claro .dijitContentPane {padding: 8px;}.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;}
|
||||
@@ -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;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user