mirror of
https://git.tt-rss.org/git/tt-rss.git
synced 2026-02-10 16:01:33 +00:00
upgrade dojo to 1.8.3 (refs #570)
This commit is contained in:
Andrew Dolgov
@@ -33,15 +33,18 @@
|
||||
*/
|
||||
.claro .dijitCalendar {
|
||||
border: solid 1px #b5bcc7;
|
||||
background-color: #cfe5fa;
|
||||
background-image: url("images/calendarContainerImages.png");
|
||||
background-position: 0 -448px;
|
||||
background-repeat: repeat-x;
|
||||
text-align: center;
|
||||
padding: 6px 5px 3px 5px;
|
||||
border-collapse: separate;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
border-collapse: separate;
|
||||
background-color: #cfe5fa;
|
||||
background-image: url("images/calendar.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0) 100%);
|
||||
text-align: center;
|
||||
padding: 6px 5px 3px 5px;
|
||||
}
|
||||
.dj_ie6 .claro .dijitCalendar {
|
||||
background-image: none;
|
||||
@@ -50,7 +53,7 @@
|
||||
border: none;
|
||||
}
|
||||
.claro .dijitCalendarHover, .claro .dijitCalendar:hover, .claro .dijitCalendarActive {
|
||||
/* treat dijitCalenderActive like hover since there's
|
||||
/* treat dijitCalendarActive like hover since there's
|
||||
* no concept of clicking a Calendar as a whole (although you can click things inside the calendar)
|
||||
*/
|
||||
|
||||
@@ -113,9 +116,6 @@
|
||||
.claro .dijitCalendarDateTemplate {
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
background-image: url("images/calendarContainerImages.png");
|
||||
background-position: 0 0;
|
||||
background-repeat: repeat-x;
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
padding-top: 0;
|
||||
font-size: 0.909em;
|
||||
@@ -215,8 +215,6 @@
|
||||
background-color: #7dbdfa;
|
||||
}
|
||||
.claro .dijitCalendarActiveDate .dijitCalendarDateLabel, .claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel {
|
||||
background-image: url("images/calendarContainerImages.png");
|
||||
background-position: 0 -300px;
|
||||
background-color: #7dbdfa;
|
||||
border: solid 1px #ffffff;
|
||||
-webkit-transition-duration: 0.1s;
|
||||
@@ -249,13 +247,13 @@
|
||||
margin-right: -4px;
|
||||
}
|
||||
.claro .dijitCalendar .dijitDropDownButton .dijitButtonNode {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
padding: 0 3px 0 2px;
|
||||
border: solid 1px #b5bcc7;
|
||||
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode, .claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode {
|
||||
background-color: #e5f2fe;
|
||||
@@ -276,9 +274,12 @@
|
||||
padding: 2px 0;
|
||||
}
|
||||
.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover, .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover {
|
||||
background-color: #abd6ff;
|
||||
border-color: #759dc0;
|
||||
border-width: 1px 0;
|
||||
background-image: url("images/commonHighlight.png");
|
||||
background-repeat: repeat-x;
|
||||
background-color: #abd6ff;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= #ffffff , endColorstr= #abd6ff );
|
||||
}
|
||||
|
||||
@@ -35,25 +35,28 @@
|
||||
@import "variables";
|
||||
|
||||
.claro .dijitCalendar {
|
||||
border:solid 1px @border-color;
|
||||
border: solid 1px @border-color;
|
||||
border-collapse: separate; // in case user CSS has set border-collapse: collapse for tables
|
||||
.border-radius(4px);
|
||||
|
||||
// Background color and alpha-gradient
|
||||
background-color: @calendar-background-color;
|
||||
background-image:url(@image-calendar-container);
|
||||
background-position:0 -448px;
|
||||
background-repeat:repeat-x;
|
||||
background-image: url("images/calendar.png"); // fallback for browsers that don't support CSS gradients
|
||||
background-repeat: repeat-x; // so bottom of calendar isn't affected by gradient image repeating
|
||||
.alpha-white-gradient(1, 0px, 0.4, 2px, 0, 100%);
|
||||
|
||||
text-align:center;
|
||||
padding:6px 5px 3px 5px;
|
||||
.border-radius(4px);
|
||||
border-collapse: separate; // in case user CSS has set border-collapse: collapse for tables
|
||||
}
|
||||
.dj_ie6 .claro .dijitCalendar {
|
||||
background-image:none;
|
||||
background-image:none; // because on IE6 background-image overrides background-color
|
||||
}
|
||||
.claro .dijitCalendar img {
|
||||
border:none;
|
||||
}
|
||||
.claro .dijitCalendarHover, .claro .dijitCalendar:hover,
|
||||
.claro .dijitCalendarActive {
|
||||
/* treat dijitCalenderActive like hover since there's
|
||||
/* treat dijitCalendarActive like hover since there's
|
||||
* no concept of clicking a Calendar as a whole (although you can click things inside the calendar)
|
||||
*/
|
||||
background-color: @hovered-background-color;
|
||||
@@ -120,9 +123,6 @@
|
||||
.claro .dijitCalendarDateTemplate {
|
||||
text-align:center;
|
||||
background-color:@calendar-currentmonth-background-color;
|
||||
background-image:url(@image-calendar-container);
|
||||
background-position:0 0;
|
||||
background-repeat:repeat-x;
|
||||
border-bottom: 1px solid @minor-border-color;
|
||||
padding-top:0;
|
||||
font-size:0.909em;
|
||||
@@ -209,8 +209,6 @@
|
||||
}
|
||||
.claro .dijitCalendarActiveDate .dijitCalendarDateLabel,
|
||||
.claro .dijitCalendarEnabledDate:active .dijitCalendarDateLabel {
|
||||
background-image:url(@image-calendar-container);
|
||||
background-position:0 -300px;
|
||||
background-color: @calendar-date-pressed-background-color;
|
||||
border:solid 1px @calendar-date-pressed-border-color;
|
||||
.transition-duration(.1s);
|
||||
@@ -244,11 +242,13 @@
|
||||
margin-right:-4px;
|
||||
}
|
||||
.claro .dijitCalendar .dijitDropDownButton .dijitButtonNode {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
padding: 0 3px 0 2px;
|
||||
border:solid 1px @border-color;
|
||||
.box-shadow(0 0 0 rgba(0,0,0,0));
|
||||
|
||||
// Override background settings from vanilla .dijitButtonNode. We want to inherit background of Calendar.
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode,
|
||||
.claro .dijitCalendar .dijitDropDownButton:hover .dijitButtonNode {
|
||||
@@ -271,9 +271,7 @@
|
||||
}
|
||||
.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover,
|
||||
.claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel:hover {
|
||||
background-color: @hovered-background-color;
|
||||
border-color: @hovered-border-color;
|
||||
border-width:1px 0;
|
||||
background-image: url(@image-common-highlight);
|
||||
background-repeat:repeat-x;
|
||||
.gradient-and-filter(@hovered-background-color, 70, 0);
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
* .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg
|
||||
* adds border for active or selected state
|
||||
*/
|
||||
.claro .dijitColorPalette {
|
||||
.claro .dijitColorPalette {
|
||||
border: 1px solid #b5bcc7;
|
||||
background: #ffffff;
|
||||
-moz-border-radius: 0;
|
||||
|
||||
@@ -20,12 +20,44 @@
|
||||
|
||||
outline: 1px dotted #494949;
|
||||
}
|
||||
/* Drag and Drop */
|
||||
.claro .dojoDndItemBefore, .claro .dojoDndItemAfter {
|
||||
border-top: 1px solid #759dc0;
|
||||
/* Drag and Drop*/
|
||||
.claro .dojoDndItem {
|
||||
border-color: rgba(0, 0, 0, 0);
|
||||
-webkit-transition-duration: 0.25s;
|
||||
-moz-transition-duration: 0.25s;
|
||||
transition-duration: 0.25s;
|
||||
-webkit-transition-property: background-color, border-color;
|
||||
-moz-transition-property: background-color, border-color;
|
||||
transition-property: background-color, border-color;
|
||||
}
|
||||
.claro .dojoDndItemOver {
|
||||
cursor: pointer;
|
||||
background-color: #abd6ff;
|
||||
background-image: url("images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
padding: 1px;
|
||||
border: solid 1px #759dc0;
|
||||
color: #000000;
|
||||
}
|
||||
.claro .dojoDndItemAnchor, .claro .dojoDndItemSelected {
|
||||
background-color: #cfe5fa;
|
||||
background-image: url("images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
padding: 1px;
|
||||
border: solid 1px #759dc0;
|
||||
color: #000000;
|
||||
}
|
||||
.claro .dojoDndItemBefore, .claro .dojoDndItemAfter {
|
||||
border-color: #759dc0;
|
||||
}
|
||||
.claro table.dojoDndAvatar {
|
||||
border: 1px solid #b5bcc7;
|
||||
|
||||
@@ -20,14 +20,36 @@
|
||||
outline: 1px dotted @focus-outline-color;
|
||||
}
|
||||
|
||||
/* Drag and Drop */
|
||||
.claro .dojoDndItemBefore,
|
||||
.claro .dojoDndItemAfter{
|
||||
border-top: 1px solid @dnd-dropseparator-color;
|
||||
/* Drag and Drop*/
|
||||
.claro .dojoDndItem {
|
||||
border-color: rgba(0,0,0,0); // rgba() instead of none to prevent flash on hover fade-in
|
||||
.transition-duration(.25s);
|
||||
.transition-property(background-color, border-color)
|
||||
}
|
||||
.claro .dojoDndItemOver {
|
||||
cursor:pointer;
|
||||
}
|
||||
// Hovered item. Matches dijitTreeRowHover.
|
||||
background-color:@hovered-background-color;
|
||||
.standard-gradient;
|
||||
padding: 1px; // reduce from 2px in dijit.css
|
||||
border:solid 1px @hovered-border-color;
|
||||
color:@hovered-text-color;
|
||||
}
|
||||
.claro .dojoDndItemAnchor,
|
||||
.claro .dojoDndItemSelected {
|
||||
// Selected items(s). Matches dijitTreeRowSelected.
|
||||
background-color:@selected-background-color;
|
||||
.standard-gradient;
|
||||
padding: 1px; // reduce from 2px in dijit.css
|
||||
border:solid 1px @selected-border-color;
|
||||
color:@selected-text-color;
|
||||
}
|
||||
|
||||
.claro .dojoDndItemBefore,
|
||||
.claro .dojoDndItemAfter {
|
||||
// line to indicate that user is dropping before/after this dojoDndItem
|
||||
border-color: @dnd-dropseparator-color;
|
||||
}
|
||||
|
||||
.claro table.dojoDndAvatar {
|
||||
border: 1px solid @border-color;
|
||||
border-collapse: collapse;
|
||||
|
||||
@@ -56,6 +56,15 @@
|
||||
border-top: 1px solid #d3d3d3;
|
||||
margin: 10px -8px -10px;
|
||||
}
|
||||
.claro .dijitTooltipDialog .dijitDialogPaneActionBar {
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
margin: 10px -10px -8px;
|
||||
}
|
||||
.claro .dijitDialogPaneActionBar .dijitButton {
|
||||
float: none;
|
||||
}
|
||||
@@ -65,8 +74,13 @@
|
||||
border: 1px solid #ffffff;
|
||||
border-top: none;
|
||||
background-color: #abd6ff;
|
||||
background-image: url("images/titlebar.png");
|
||||
background-image: url("images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
padding: 5px 7px 4px 7px;
|
||||
}
|
||||
.claro .dijitDialogTitle {
|
||||
@@ -121,8 +135,10 @@
|
||||
/* the part with the text */
|
||||
|
||||
background-color: #ffffff;
|
||||
background-image: url("images/tooltipGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px);
|
||||
background-image: -webkit-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px);
|
||||
background-image: -o-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px);
|
||||
background-image: linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px);
|
||||
background-position: bottom;
|
||||
border: 1px solid #759dc0;
|
||||
padding: 6px 8px;
|
||||
@@ -134,9 +150,6 @@
|
||||
font-size: 1em;
|
||||
color: #000000;
|
||||
}
|
||||
.dj_ie6 .claro .dijitTooltipContainer {
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitTooltipConnector {
|
||||
/* the arrow piece */
|
||||
|
||||
|
||||
@@ -59,6 +59,15 @@
|
||||
border-top: 1px solid @minor-border-color;
|
||||
margin: 10px -8px -10px;
|
||||
}
|
||||
.claro .dijitTooltipDialog .dijitDialogPaneActionBar {
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
margin: 10px -10px -8px;
|
||||
}
|
||||
.claro .dijitDialogPaneActionBar .dijitButton {
|
||||
float: none;
|
||||
}
|
||||
@@ -68,8 +77,7 @@
|
||||
border: 1px solid @dialog-titlebar-border-color;
|
||||
border-top:none;
|
||||
background-color: @dialog-titlebar-background-color;
|
||||
background-image: url(@image-titlebar);
|
||||
background-repeat:repeat-x;
|
||||
.standard-gradient;
|
||||
padding: 5px 7px 4px 7px;
|
||||
}
|
||||
|
||||
@@ -123,8 +131,7 @@
|
||||
.claro .dijitTooltipContainer {
|
||||
/* the part with the text */
|
||||
background-color:@popup-background-color;
|
||||
background-image:url(@image-tooltip-gradient);
|
||||
background-repeat:repeat-x;
|
||||
.linear-gradient(bottom, @tooltip-gradient-color 0px, @popup-background-color 10px);
|
||||
background-position:bottom;
|
||||
border:1px solid @popup-border-color;
|
||||
padding:6px 8px;
|
||||
@@ -134,9 +141,6 @@
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.dj_ie6 .claro .dijitTooltipContainer {
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitTooltipConnector {
|
||||
/* the arrow piece */
|
||||
border: 0;
|
||||
|
||||
@@ -25,20 +25,20 @@
|
||||
}
|
||||
.claro .dijitEditor .dijitEditorIFrameContainer {
|
||||
background-color: #ffffff;
|
||||
background-image: url("form/images/textBox_back.png");
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.dj_ie6 .claro .dijitEditor .dijitEditorIFrameContainer {
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitEditorHover .dijitEditorIFrameContainer, .claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame {
|
||||
background-color: #e5f2fe;
|
||||
}
|
||||
.claro .dijitEditorFocused .dijitEditorIFrameContainer, .claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame {
|
||||
/* TODO: contradicts rule above, which background-color do you want? */
|
||||
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.claro .dijitEditorHover .dijitEditorIFrameContainer, .claro .dijitEditorFocused .dijitEditorIFrameContainer {
|
||||
background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
|
||||
background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
|
||||
background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
|
||||
background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
|
||||
}
|
||||
/* Disabled */
|
||||
.claro .dijitEditorDisabled {
|
||||
border: 1px solid #d3d3d3;
|
||||
|
||||
@@ -28,22 +28,20 @@
|
||||
}
|
||||
.claro .dijitEditor .dijitEditorIFrameContainer{
|
||||
background-color: @textbox-background-color;
|
||||
background-image: url(@image-form-textbox-background);
|
||||
background-repeat:repeat-x;
|
||||
}
|
||||
.dj_ie6 .claro .dijitEditor .dijitEditorIFrameContainer{
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitEditorHover .dijitEditorIFrameContainer,
|
||||
.claro .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame{
|
||||
background-color: @textbox-hovered-background-color;
|
||||
}
|
||||
.claro .dijitEditorFocused .dijitEditorIFrameContainer,
|
||||
.claro .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame{
|
||||
/* TODO: contradicts rule above, which background-color do you want? */
|
||||
background-color: @textbox-focused-background-color;
|
||||
}
|
||||
|
||||
.claro .dijitEditorHover .dijitEditorIFrameContainer,
|
||||
.claro .dijitEditorFocused .dijitEditorIFrameContainer {
|
||||
.textbox-background-image;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
.claro .dijitEditorDisabled {
|
||||
|
||||
@@ -4,8 +4,8 @@ There are three areas of styling for the Menu:
|
||||
|
||||
1. The menu
|
||||
There are three types of menus:
|
||||
i)Context Menu
|
||||
ii)Drop down Menu
|
||||
i) Context Menu
|
||||
ii) Drop down Menu
|
||||
iii) Navigation Menu
|
||||
All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
|
||||
.dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
|
||||
@@ -18,7 +18,7 @@ There are three areas of styling for the Menu:
|
||||
3. Menu items - items in the menu.
|
||||
.dijitMenuItem - for color
|
||||
.dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected
|
||||
.dijitMenuItemActive - for bacgkround-color of an active (mousedown) menu item
|
||||
.dijitMenuItemActive - for background-color of an active (mousedown) menu item
|
||||
td.dijitMenuItemIconCell - for padding around a menu item's icon
|
||||
td.dijitMenuItemLabel - for padding around a menu item's label
|
||||
.dijitMenuSeparatorTop - for border, top border, of the separator
|
||||
@@ -34,15 +34,15 @@ There are three areas of styling for the Menu:
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #efefef;
|
||||
background-image: url("images/commonHighlight.png");
|
||||
background-position: 0 0;
|
||||
background-image: url("images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.dj_ie6 .claro .dijitMenuBar {
|
||||
background-image: none;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
}
|
||||
.claro .dijitMenu {
|
||||
background-repeat: repeat-y;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #759dc0;
|
||||
/* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */
|
||||
@@ -54,16 +54,16 @@ There are three areas of styling for the Menu:
|
||||
/* above -1px makes top/bottom borders disappear on IE6 */
|
||||
|
||||
}
|
||||
.claro .dijitMenuItem {
|
||||
color: #000000;
|
||||
}
|
||||
.claro .dijitMenuBar .dijitMenuItem {
|
||||
padding: 6px 10px 7px;
|
||||
background-position: 0 100px;
|
||||
margin: -1px;
|
||||
}
|
||||
.claro .dijitMenuItem {
|
||||
background-image: url("images/menuHighlight.png");
|
||||
background-position: 0 -40px;
|
||||
background-repeat: repeat-x;
|
||||
color: #000000;
|
||||
.claro .dijitMenuBar .dijitMenuItemHover, .claro .dijitMenuBar .dijitMenuItemSelected {
|
||||
border: solid 1px #759dc0;
|
||||
padding: 5px 9px 6px;
|
||||
}
|
||||
/* this prevents jiggling upon hover of a menu item */
|
||||
.claro .dijitMenuTable {
|
||||
@@ -74,27 +74,28 @@ There are three areas of styling for the Menu:
|
||||
.claro .dijitMenuItem td {
|
||||
padding: 1px;
|
||||
}
|
||||
/* hover over a MenuBarItem */
|
||||
.claro .dijitMenuPassive .dijitMenuItemHover, .claro .dijitMenuPassive .dijitMenuItemSelected {
|
||||
/* hover over a MenuItem or MenuBarItem */
|
||||
.claro .dijitSelectMenu .dijitMenuItemHover td,
|
||||
.claro .dijitSelectMenu .dijitMenuItemSelected td,
|
||||
.claro .dijitMenuItemHover,
|
||||
.claro .dijitMenuItemSelected {
|
||||
background-color: #abd6ff;
|
||||
border: solid 1px #759dc0;
|
||||
background-position: 0 0;
|
||||
color: #000000;
|
||||
padding: 5px 9px 6px;
|
||||
background-image: url("images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
}
|
||||
.claro .dijitMenuPassive .dijitMenuItemActive {
|
||||
background-position: 0 -177px;
|
||||
}
|
||||
.dj_ie6 .claro .dijitMenuItem, .dj_ie6 .claro .dijitMenuPassive .dijitMenuItem {
|
||||
background-image: none;
|
||||
}
|
||||
/* MenuBarItem that has been selected and menu drops down from it */
|
||||
.claro .dijitMenuActive .dijitMenuItemHover, .claro .dijitMenuActive .dijitMenuItemSelected {
|
||||
border: solid 1px #759dc0;
|
||||
padding: 5px 9px 6px;
|
||||
background-color: #abd6ff;
|
||||
background-position: 0 0;
|
||||
color: #000000;
|
||||
.claro .dijitMenuItemActive {
|
||||
background-image: url("images/activeGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
}
|
||||
.dj_ie .claro .dijitMenuActive .dijitMenuItemHover,
|
||||
.dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,
|
||||
@@ -104,13 +105,6 @@ There are three areas of styling for the Menu:
|
||||
padding-bottom: 5px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
.claro .dijitMenuActive .dijitMenuItemActive {
|
||||
background-color: #7dbdfa;
|
||||
background-position: 0 -177px;
|
||||
}
|
||||
.claro .dijitMenuItemActive {
|
||||
background-position: 0 -177px;
|
||||
}
|
||||
.claro td.dijitMenuItemIconCell {
|
||||
padding: 2px;
|
||||
margin: 0 0 0 4px;
|
||||
@@ -162,25 +156,23 @@ There are three areas of styling for the Menu:
|
||||
margin-left: 0;
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitComboBoxMenu .dijitMenuItem {
|
||||
.claro .dijitSelectMenu .dijitMenuItem td, .claro .dijitComboBoxMenu .dijitMenuItem {
|
||||
padding: 2px;
|
||||
border-width: 1px 0 1px 0;
|
||||
border-style: solid;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
.claro .dijitComboBoxMenu .dijitMenuItemSelected {
|
||||
.claro .dijitSelectMenu .dijitMenuItemSelected td, .claro .dijitComboBoxMenu .dijitMenuItemSelected {
|
||||
color: #000000;
|
||||
border-color: #759dc0;
|
||||
background-color: #abd6ff;
|
||||
}
|
||||
.claro .dijitComboBoxMenu .dijitMenuItemHover {
|
||||
.claro .dijitSelectMenu .dijitMenuItemHover td, .claro .dijitComboBoxMenu .dijitMenuItemHover {
|
||||
color: #000000;
|
||||
border-color: #769dc0;
|
||||
background-color: #abd6ff;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
|
||||
background-position: 0 -177px;
|
||||
background-color: #7dbdfa;
|
||||
/* TODO: why is this a different color than normal .dijitMenuItemSelected? */
|
||||
|
||||
|
||||
@@ -4,8 +4,8 @@ There are three areas of styling for the Menu:
|
||||
|
||||
1. The menu
|
||||
There are three types of menus:
|
||||
i)Context Menu
|
||||
ii)Drop down Menu
|
||||
i) Context Menu
|
||||
ii) Drop down Menu
|
||||
iii) Navigation Menu
|
||||
All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
|
||||
.dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
|
||||
@@ -18,7 +18,7 @@ There are three areas of styling for the Menu:
|
||||
3. Menu items - items in the menu.
|
||||
.dijitMenuItem - for color
|
||||
.dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected
|
||||
.dijitMenuItemActive - for bacgkround-color of an active (mousedown) menu item
|
||||
.dijitMenuItemActive - for background-color of an active (mousedown) menu item
|
||||
td.dijitMenuItemIconCell - for padding around a menu item's icon
|
||||
td.dijitMenuItemLabel - for padding around a menu item's label
|
||||
.dijitMenuSeparatorTop - for border, top border, of the separator
|
||||
@@ -37,15 +37,10 @@ There are three areas of styling for the Menu:
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: @bar-background-color;
|
||||
background-image: url(@image-common-highlight);
|
||||
background-position:0 0;
|
||||
background-repeat:repeat-x;
|
||||
}
|
||||
.dj_ie6 .claro .dijitMenuBar {
|
||||
background-image:none;
|
||||
.standard-gradient;
|
||||
}
|
||||
|
||||
.claro .dijitMenu {
|
||||
background-repeat:repeat-y;
|
||||
background-color:@menu-background-color;
|
||||
border: 1px solid @popup-border-color;
|
||||
|
||||
@@ -55,16 +50,19 @@ There are three areas of styling for the Menu:
|
||||
.dj_ie6 .claro .dijitMenu {
|
||||
margin: 0; /* above -1px makes top/bottom borders disappear on IE6 */
|
||||
}
|
||||
|
||||
.claro .dijitMenuItem {
|
||||
color: @text-color;
|
||||
}
|
||||
.claro .dijitMenuBar .dijitMenuItem {
|
||||
padding: 6px 10px 7px;
|
||||
background-position:0 100px;
|
||||
margin:-1px;
|
||||
}
|
||||
.claro .dijitMenuItem {
|
||||
background-image: url(@image-menu-highlight);
|
||||
background-position:0 -40px;
|
||||
background-repeat:repeat-x;
|
||||
color: @text-color;
|
||||
}
|
||||
.claro .dijitMenuBar .dijitMenuItemHover,
|
||||
.claro .dijitMenuBar .dijitMenuItemSelected {
|
||||
// on hover or selection of MenuBar item, add border and reduce padding to compensate
|
||||
border:solid 1px @hovered-border-color;
|
||||
padding: 5px 9px 6px;
|
||||
}
|
||||
|
||||
/* this prevents jiggling upon hover of a menu item */
|
||||
@@ -76,50 +74,36 @@ There are three areas of styling for the Menu:
|
||||
.claro .dijitMenuItem td{
|
||||
padding:1px;
|
||||
}
|
||||
/* hover over a MenuBarItem */
|
||||
.claro .dijitMenuPassive .dijitMenuItemHover,
|
||||
.claro .dijitMenuPassive .dijitMenuItemSelected {
|
||||
/* hover over a MenuItem or MenuBarItem */
|
||||
.claro .dijitSelectMenu .dijitMenuItemHover td,
|
||||
.claro .dijitSelectMenu .dijitMenuItemSelected td,
|
||||
.claro .dijitMenuItemHover,
|
||||
.claro .dijitMenuItemSelected {
|
||||
// note: seems like the selected MenuItem should use @pressed-background-color
|
||||
// and .active-gradient, but claro didn't to that
|
||||
background-color: @hovered-background-color;
|
||||
border:solid 1px @hovered-border-color;
|
||||
background-position:0 0;
|
||||
color:@text-color;
|
||||
padding: 5px 9px 6px;
|
||||
.standard-gradient;
|
||||
}
|
||||
.claro .dijitMenuPassive .dijitMenuItemActive{
|
||||
background-position:0 -177px;
|
||||
}
|
||||
.dj_ie6 .claro .dijitMenuItem,
|
||||
.dj_ie6 .claro .dijitMenuPassive .dijitMenuItem {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
/* MenuBarItem that has been selected and menu drops down from it */
|
||||
.claro .dijitMenuActive .dijitMenuItemHover,
|
||||
.claro .dijitMenuActive .dijitMenuItemSelected {
|
||||
border:solid 1px @hovered-border-color;
|
||||
padding: 5px 9px 6px;
|
||||
background-color: @hovered-background-color;
|
||||
background-position:0 0;
|
||||
color:@hovered-text-color;
|
||||
.claro .dijitMenuItemActive {
|
||||
// todo: seems like the selected MenuItem should come here
|
||||
// todo: seems like should use @pressed-background-color
|
||||
.active-gradient;
|
||||
}
|
||||
.dj_ie .claro .dijitMenuActive .dijitMenuItemHover,
|
||||
.dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,
|
||||
.dj_ie .claro .dijitMenuPassive .dijitMenuItemHover,
|
||||
.dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected {
|
||||
// Selectivity set to override ComboBox rules below.
|
||||
// If this rule isn't present, on IE6 hovering an item in the ComboBox drop down causes two
|
||||
// items to be highlighted (except when hovering the first item in the list)
|
||||
padding-top: 6px;
|
||||
padding-bottom: 5px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
.claro .dijitMenuActive .dijitMenuItemActive{
|
||||
background-color: @pressed-background-color;
|
||||
background-position:0 -177px;
|
||||
}
|
||||
.claro .dijitMenuItemActive {
|
||||
background-position:0 -177px;
|
||||
}
|
||||
|
||||
.claro td.dijitMenuItemIconCell {
|
||||
padding: 2px;
|
||||
margin: 0 0 0 4px;
|
||||
padding: 2px;
|
||||
margin: 0 0 0 4px;
|
||||
}
|
||||
.claro td.dijitMenuItemLabel {
|
||||
padding-top: 5px;
|
||||
@@ -168,25 +152,26 @@ There are three areas of styling for the Menu:
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.claro .dijitSelectMenu .dijitMenuItem td,
|
||||
.claro .dijitComboBoxMenu .dijitMenuItem {
|
||||
padding: @textbox-padding; // Make drop down menu text line up with text in <input>.
|
||||
border-width:1px 0 1px 0;
|
||||
border-style:solid;
|
||||
border-color: @select-dropdownitem-background-color;
|
||||
}
|
||||
.claro .dijitSelectMenu .dijitMenuItemSelected td,
|
||||
.claro .dijitComboBoxMenu .dijitMenuItemSelected {
|
||||
color:@selected-text-color;
|
||||
border-color:@hovered-border-color;
|
||||
background-color:@hovered-background-color;
|
||||
}
|
||||
.claro .dijitSelectMenu .dijitMenuItemHover td,
|
||||
.claro .dijitComboBoxMenu .dijitMenuItemHover {
|
||||
color: #000000;
|
||||
border-color: #769dc0;
|
||||
background-color: #abd6ff;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
|
||||
background-position:0 -177px;
|
||||
background-color: @select-dropdownitem-hovered-background-color; /* TODO: why is this a different color than normal .dijitMenuItemSelected? */
|
||||
}
|
||||
.claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton {
|
||||
|
||||
@@ -30,13 +30,20 @@
|
||||
.claro .dijitProgressBarEmpty {
|
||||
/* outer container and background of the bar that's not finished yet*/
|
||||
|
||||
background: #ffffff url("images/progressBarEmpty.png") no-repeat left;
|
||||
background-color: #ffffff;
|
||||
border-color: #759dc0;
|
||||
}
|
||||
.claro .dijitProgressBarTile {
|
||||
/* inner container for finished portion when in 'tile' (image) mode */
|
||||
|
||||
background: #abd6ff url("images/progressBarFull.png") repeat-x top;
|
||||
background-color: #abd6ff;
|
||||
background-image: url("images/progressBarFull.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.93) 0px, rgba(255, 255, 255, 0.41) 1px, rgba(255, 255, 255, 0.7) 2px, rgba(255, 255, 255, 0) 100%);
|
||||
background-attachment: scroll;
|
||||
}
|
||||
.dj_ie6 .claro .dijitProgressBarTile {
|
||||
background-image: none;
|
||||
|
||||
@@ -32,12 +32,18 @@
|
||||
}
|
||||
.claro .dijitProgressBarEmpty {
|
||||
/* outer container and background of the bar that's not finished yet*/
|
||||
background: @progressbar-empty-background-color url(@image-progressbar-empty) no-repeat left;
|
||||
background-color: @progressbar-empty-background-color;
|
||||
border-color: @progressbar-border-color;
|
||||
}
|
||||
.claro .dijitProgressBarTile {
|
||||
/* inner container for finished portion when in 'tile' (image) mode */
|
||||
background: @progressbar-full-background-color url(@image-progressbar-full) repeat-x top;
|
||||
background-color: @progressbar-full-background-color;
|
||||
|
||||
// gradient background using CSS gradient, with fallback to image for IE
|
||||
background-image: url("images/progressBarFull.png");
|
||||
background-repeat: repeat-x;
|
||||
.alpha-white-gradient(0.93,0px, 0.41,1px, 0.7,2px, 0,100%);
|
||||
background-attachment: scroll; // override strange "fixed" setting from dijit.css
|
||||
}
|
||||
.dj_ie6 .claro .dijitProgressBarTile {
|
||||
background-image: none;
|
||||
|
||||
@@ -1,41 +1,11 @@
|
||||
These are "less" files that compile into the CSS of claro.
|
||||
|
||||
---------
|
||||
Installing and running on Windows:
|
||||
|
||||
1. Install node:
|
||||
a) Go to https://github.com/ajaxorg/node-builds, press download button, and select "download zip"
|
||||
b) unzip the file into C:\
|
||||
|
||||
2. Add node environment variables:
|
||||
|
||||
a) open Control Panel --> click System icon --> select Advanced tab --> click Environment variables button
|
||||
b) press "edit" on path
|
||||
c) depending on what directory you unzipped to and the exact filenames, you will add something like
|
||||
|
||||
;C:\ajaxorg-node-builds-0fcee7d\win32
|
||||
|
||||
4. To compile all the files:
|
||||
|
||||
C:\> cd C:\myworkspace\dijit\themes\claro
|
||||
C:\> node compile.js
|
||||
|
||||
--------
|
||||
To install/run less version 2 on mac:
|
||||
|
||||
1. Install Node.js
|
||||
Download a built copy from https://github.com/ajaxorg/node-builds.
|
||||
Alternately, go to http://nodejs.org/#download (./configure, make, make install).
|
||||
1. Install node from http://nodejs.org/#download
|
||||
|
||||
2. Edit .bash_profile etc. to add node to your path
|
||||
|
||||
export PATH=$PATH:/opt/less/bin
|
||||
|
||||
To compile all the files:
|
||||
2. To compile all the files:
|
||||
|
||||
$ cd dijit/themes/claro
|
||||
$ node compile.js
|
||||
|
||||
-----
|
||||
|
||||
See http://lesscss.org/ and https://github.com/cloudhead/less.js/ for more information.
|
||||
|
||||
@@ -35,19 +35,19 @@
|
||||
.claro .dijitTimePickerItem {
|
||||
/* dijitTimePickerItem refers to both Tick's (minor values like 2:15, 2:30, 2:45) and Marker's (major values like 2PM, 3PM) */
|
||||
|
||||
background-image: url("images/commonHighlight.png");
|
||||
background-position: 0 -1px;
|
||||
background-image: url("images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
border-top: solid 1px #b5bcc7;
|
||||
border-bottom: solid 1px #b5bcc7;
|
||||
margin-right: -1px;
|
||||
margin-left: -1px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
/* to make up for lack of alpha transparency in IE6 */
|
||||
.dj_ie6 .claro .dijitTimePickerItem {
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitTimePickerTick {
|
||||
/* minor value */
|
||||
|
||||
@@ -100,12 +100,13 @@
|
||||
border-right: none;
|
||||
border-color: #b5bcc7;
|
||||
background-color: #efefef;
|
||||
background-image: url("images/commonHighlight.png");
|
||||
background-position: 0 -1px;
|
||||
background-image: url("images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.dj_ie6 .claro .dijitTimePicker .dijitButtonNode {
|
||||
background-image: none;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
}
|
||||
.claro .dijitTimePicker .dijitArrowButtonInner {
|
||||
height: 100%;
|
||||
|
||||
@@ -34,19 +34,13 @@
|
||||
}
|
||||
.claro .dijitTimePickerItem{
|
||||
/* dijitTimePickerItem refers to both Tick's (minor values like 2:15, 2:30, 2:45) and Marker's (major values like 2PM, 3PM) */
|
||||
background-image: url(@image-common-highlight);
|
||||
background-position:0 -1px;
|
||||
background-repeat:repeat-x;
|
||||
.standard-gradient;
|
||||
border-top:solid 1px @border-color;
|
||||
border-bottom:solid 1px @border-color;
|
||||
margin-right:-1px;
|
||||
margin-left:-1px;
|
||||
margin-top:-1px;
|
||||
}
|
||||
/* to make up for lack of alpha transparency in IE6 */
|
||||
.dj_ie6 .claro .dijitTimePickerItem {
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitTimePickerTick {
|
||||
/* minor value */
|
||||
color:@timepicker-minorvalue-text-color;
|
||||
@@ -95,12 +89,7 @@
|
||||
border-right:none;
|
||||
border-color:@border-color;
|
||||
background-color: @unselected-background-color;
|
||||
background-image: url(@image-common-highlight);
|
||||
background-position:0 -1px;
|
||||
background-repeat:repeat-x;
|
||||
}
|
||||
.dj_ie6 .claro .dijitTimePicker .dijitButtonNode {
|
||||
background-image: none;
|
||||
.standard-gradient;
|
||||
}
|
||||
.claro .dijitTimePicker .dijitArrowButtonInner{
|
||||
height: 100%; /* hack claro.button.css */
|
||||
@@ -122,3 +111,5 @@
|
||||
.claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner {
|
||||
background-position:-70px 45%;
|
||||
}
|
||||
|
||||
// TODO: should have active rule, for clicking a .dijitTimePickerItem
|
||||
@@ -19,15 +19,17 @@
|
||||
*/
|
||||
.claro .dijitTitlePaneTitle {
|
||||
background-color: #efefef;
|
||||
background-image: url("images/titlebar.png");
|
||||
background-image: url("images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
border: 1px solid #b5bcc7;
|
||||
padding: 0 7px 3px 7px;
|
||||
min-height: 17px;
|
||||
}
|
||||
.dj_ie6 .claro .dijitTitlePaneTitle {
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitTitlePaneTitleHover {
|
||||
background-color: #abd6ff;
|
||||
border-color: #759dc0;
|
||||
@@ -35,7 +37,13 @@
|
||||
.claro .dijitTitlePaneTitleActive {
|
||||
background-color: #7dbdfa;
|
||||
border-color: #759dc0;
|
||||
background-position: 0 -136px;
|
||||
background-image: url("images/activeGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
}
|
||||
.claro .dijitTitlePaneTitleFocus {
|
||||
margin-top: 3px;
|
||||
|
||||
@@ -22,15 +22,11 @@
|
||||
|
||||
.claro .dijitTitlePaneTitle {
|
||||
background-color: @unselected-background-color; // TODO: Mailed Jason, shouldn't this toggle to @selected-background-color when pane opened?
|
||||
background-image: url(@image-titlebar);
|
||||
background-repeat:repeat-x;
|
||||
.standard-gradient;
|
||||
border:1px solid @border-color;
|
||||
padding: 0 7px 3px 7px;
|
||||
min-height:17px;
|
||||
}
|
||||
.dj_ie6 .claro .dijitTitlePaneTitle {
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitTitlePaneTitleHover {
|
||||
background-color: @hovered-background-color;
|
||||
border-color: @hovered-border-color;
|
||||
@@ -38,7 +34,7 @@
|
||||
.claro .dijitTitlePaneTitleActive {
|
||||
background-color: @pressed-background-color;
|
||||
border-color: @pressed-border-color;
|
||||
background-position:0 -136px;
|
||||
.active-gradient;
|
||||
}
|
||||
.claro .dijitTitlePaneTitleFocus {
|
||||
margin-top:3px;
|
||||
|
||||
@@ -20,9 +20,13 @@
|
||||
.claro .dijitToolbar {
|
||||
border-bottom: 1px solid #b5bcc7;
|
||||
background-color: #efefef;
|
||||
background-image: url("images/commonHighlight.png");
|
||||
background-position: 0 0;
|
||||
background-image: url("images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
padding: 2px 0 2px 4px;
|
||||
zoom: 1;
|
||||
}
|
||||
@@ -47,13 +51,13 @@
|
||||
-webkit-transition-property: background-color;
|
||||
-moz-transition-property: background-color;
|
||||
transition-property: background-color;
|
||||
-webkit-transition-duration: 0.3s, 0.35s;
|
||||
-moz-transition-duration: 0.3s, 0.35s;
|
||||
transition-duration: 0.3s, 0.35s;
|
||||
background-image: url("images/commonHighlight.png");
|
||||
background-position: 0 -30px;
|
||||
background-repeat: repeat-x;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
-moz-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
background-color: rgba(171, 214, 255, 0);
|
||||
background-image: none;
|
||||
/* cancel gradient for normal buttons, we don't want any gradient besides toolbar's on non-hovered buttons */
|
||||
|
||||
}
|
||||
.dj_ie .claro .dijitToolbar .dijitButton .dijitButtonNode,
|
||||
.dj_ie .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
|
||||
@@ -63,15 +67,6 @@
|
||||
background-color: transparent;
|
||||
/* for IE, which doesn't understand rgba(...) */
|
||||
|
||||
}
|
||||
.dj_ie6 .claro .dijitToolbar .dijitButton .dijitButtonNode,
|
||||
.dj_ie6 .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
|
||||
.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNode,
|
||||
.dj_ie6 .claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
|
||||
.dj_ie6 .claro .dijitToolbar .dijitComboBox .dijitButtonNode {
|
||||
background: none;
|
||||
/* because background-color: transparent above doesn't work on IE*/
|
||||
|
||||
}
|
||||
/* hover status */
|
||||
.dj_ie .claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
|
||||
@@ -112,13 +107,18 @@
|
||||
.claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
|
||||
.claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode,
|
||||
.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode {
|
||||
background-position: 0 0;
|
||||
border-width: 1px;
|
||||
background-color: #abd6ff;
|
||||
background-image: url("images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
padding: 1px;
|
||||
}
|
||||
.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton {
|
||||
background-position: 0 0;
|
||||
background-color: #f3ffff;
|
||||
}
|
||||
.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover {
|
||||
@@ -128,7 +128,13 @@
|
||||
.claro .dijitToolbar .dijitButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode {
|
||||
border-width: 1px;
|
||||
background-color: #7dbdfa;
|
||||
background-position: 0 -177px;
|
||||
background-image: url("images/activeGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
padding: 1px;
|
||||
}
|
||||
.claro .dijitToolbar .dijitComboButtonActive {
|
||||
@@ -140,14 +146,27 @@
|
||||
}
|
||||
.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton {
|
||||
background-color: #f3ffff;
|
||||
background-position: 0 -177px;
|
||||
padding: 2px;
|
||||
}
|
||||
.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive {
|
||||
background-color: #7dbdfa;
|
||||
background-image: url("images/activeGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
}
|
||||
.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive {
|
||||
background-color: #7dbdfa;
|
||||
background-image: url("images/activeGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
}
|
||||
/* Avoid double border between button and arrow */
|
||||
.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton {
|
||||
@@ -170,9 +189,6 @@
|
||||
background-color: #ffffff;
|
||||
padding: 1px;
|
||||
}
|
||||
.dj_ie6 .claro .dijitToolbar {
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitToolbarSeparator {
|
||||
/* separator icon in the editor sprite */
|
||||
|
||||
|
||||
@@ -23,9 +23,7 @@
|
||||
.claro .dijitToolbar {
|
||||
border-bottom: 1px solid @border-color;
|
||||
background-color: @bar-background-color;
|
||||
background-image: url(@image-common-highlight);
|
||||
background-position:0 0;
|
||||
background-repeat:repeat-x;
|
||||
.standard-gradient;
|
||||
padding: 2px 0 2px 4px;
|
||||
zoom: 1;
|
||||
}
|
||||
@@ -45,12 +43,10 @@
|
||||
.border-radius(@toolbar-button-border-radius);
|
||||
.box-shadow(none);
|
||||
.transition-property(background-color);
|
||||
.transition-duration(.3s, .35s);
|
||||
.transition-duration(.3s);
|
||||
|
||||
background-image: url(@image-common-highlight);
|
||||
background-position:0 -30px;
|
||||
background-repeat:repeat-x;
|
||||
background-color:rgba(171,214,255,0);
|
||||
background-image: none; /* cancel gradient for normal buttons, we don't want any gradient besides toolbar's on non-hovered buttons */
|
||||
}
|
||||
.dj_ie .claro .dijitToolbar .dijitButton .dijitButtonNode,
|
||||
.dj_ie .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
|
||||
@@ -59,13 +55,7 @@
|
||||
.dj_ie .claro .dijitToolbar .dijitComboBox .dijitButtonNode {
|
||||
background-color: transparent; /* for IE, which doesn't understand rgba(...) */
|
||||
}
|
||||
.dj_ie6 .claro .dijitToolbar .dijitButton .dijitButtonNode,
|
||||
.dj_ie6 .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode,
|
||||
.dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNode,
|
||||
.dj_ie6 .claro .dijitToolbar .dijitToggleButton .dijitButtonNode,
|
||||
.dj_ie6 .claro .dijitToolbar .dijitComboBox .dijitButtonNode {
|
||||
background: none; /* because background-color: transparent above doesn't work on IE*/
|
||||
}
|
||||
|
||||
/* hover status */
|
||||
.dj_ie .claro .dijitToolbar .dijitButtonHover .dijitButtonNode,
|
||||
.dj_ie .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
|
||||
@@ -103,14 +93,13 @@
|
||||
.claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
|
||||
.claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode,
|
||||
.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode {
|
||||
background-position:0 0;
|
||||
border-width:1px;
|
||||
background-color: @hovered-background-color;
|
||||
.standard-gradient;
|
||||
padding: 1px;
|
||||
}
|
||||
.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode,
|
||||
.claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton {
|
||||
background-position:0 0;
|
||||
background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color;
|
||||
}
|
||||
.claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover,
|
||||
@@ -124,7 +113,7 @@
|
||||
.claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode {
|
||||
border-width: 1px;
|
||||
background-color:@pressed-background-color;
|
||||
background-position:0 -177px;
|
||||
.active-gradient;
|
||||
padding: 1px;
|
||||
}
|
||||
.claro .dijitToolbar .dijitComboButtonActive {
|
||||
@@ -135,14 +124,15 @@
|
||||
.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode,
|
||||
.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton {
|
||||
background-color: @toolbar-combobutton-hovered-unhoveredsection-background-color;
|
||||
background-position:0 -177px;
|
||||
padding: 2px;
|
||||
}
|
||||
.claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive {
|
||||
background-color: @pressed-background-color;
|
||||
.active-gradient;
|
||||
}
|
||||
.claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive {
|
||||
background-color: @pressed-background-color;
|
||||
.active-gradient;
|
||||
}
|
||||
|
||||
/* Avoid double border between button and arrow */
|
||||
@@ -165,10 +155,6 @@
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.dj_ie6 .claro .dijitToolbar {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.claro .dijitToolbarSeparator {
|
||||
/* separator icon in the editor sprite */
|
||||
background: url(@image-editor-icons-enabled);
|
||||
|
||||
@@ -37,17 +37,13 @@
|
||||
.claro .dijitTreeRow, .claro .dijitTreeNode .dojoDndItemBefore, .claro .dijitTreeNode .dojoDndItemAfter {
|
||||
/* so insert line shows up on IE when dropping after a target element */
|
||||
|
||||
padding: 4px 1px 2px 0;
|
||||
margin: 0 1px;
|
||||
/* replaced by border for selected/hovered row */
|
||||
|
||||
padding: 4px 0 2px 0;
|
||||
background-color: none;
|
||||
background-color: transparent;
|
||||
background-color: rgba(171, 214, 255, 0);
|
||||
background-position: 0 0;
|
||||
background-repeat: repeat-x;
|
||||
border-color: rgba(118, 157, 192, 0);
|
||||
border-width: 0;
|
||||
border: solid 0 transparent;
|
||||
color: #000000;
|
||||
-webkit-transition-property: background-color, border-color;
|
||||
-moz-transition-property: background-color, border-color;
|
||||
@@ -60,20 +56,31 @@
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.claro .dijitTreeRowSelected {
|
||||
background-repeat: repeat-x;
|
||||
background-color: #cfe5fa;
|
||||
background-image: url("images/commonHighlight.png");
|
||||
background-image: url("images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
padding: 3px 0 1px;
|
||||
margin: 0;
|
||||
border: solid 1px #759dc0;
|
||||
border-color: #759dc0;
|
||||
border-width: 1px 0;
|
||||
color: #000000;
|
||||
}
|
||||
.claro .dijitTreeRowHover {
|
||||
background-color: #abd6ff;
|
||||
background-image: url("images/commonHighlight.png");
|
||||
background-image: url("images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
padding: 3px 0 1px;
|
||||
margin: 0;
|
||||
border: solid 1px #759dc0;
|
||||
border-color: #759dc0;
|
||||
border-width: 1px 0;
|
||||
color: #000000;
|
||||
-webkit-transition-duration: 0.25s;
|
||||
-moz-transition-duration: 0.25s;
|
||||
@@ -81,16 +88,18 @@
|
||||
}
|
||||
.claro .dijitTreeRowActive {
|
||||
background-color: #7dbdfa;
|
||||
background-image: url("images/commonHighlight.png");
|
||||
background-position: 0 -177px;
|
||||
background-image: url("images/activeGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
padding: 3px 0 1px;
|
||||
margin-left: 0;
|
||||
border: solid 1px #759dc0;
|
||||
border-color: #759dc0;
|
||||
border-width: 1px 0;
|
||||
color: #000000;
|
||||
}
|
||||
.dj_ie6 .claro .dijitTreeRow {
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitTreeRowFocused {
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
@@ -40,8 +40,7 @@
|
||||
.claro .dijitTreeNode .dojoDndItemBefore,
|
||||
.claro .dijitTreeNode .dojoDndItemAfter {
|
||||
/* so insert line shows up on IE when dropping after a target element */
|
||||
padding: 4px 1px 2px 0;
|
||||
margin: 0 1px; /* replaced by border for selected/hovered row */
|
||||
padding: 4px 0 2px 0;
|
||||
|
||||
background-color: none; // IE6 doesn't understand rgba() or transparent below
|
||||
background-color: transparent; // IE8 doesn't understand rgba() below
|
||||
@@ -49,8 +48,7 @@
|
||||
background-position:0 0;
|
||||
background-repeat:repeat-x;
|
||||
|
||||
border-color: rgba(118,157,192,0); // rgba() instead of none to prevent flash on hover fade-in
|
||||
border-width: 0;
|
||||
border: solid 0 transparent;
|
||||
|
||||
color: @text-color;
|
||||
|
||||
@@ -60,34 +58,29 @@
|
||||
}
|
||||
|
||||
.claro .dijitTreeRowSelected {
|
||||
background-repeat:repeat-x;
|
||||
background-color:@selected-background-color;
|
||||
background-image: url(@image-common-highlight);
|
||||
background-color: @selected-background-color;
|
||||
.standard-gradient;
|
||||
padding: 3px 0 1px;
|
||||
margin: 0;
|
||||
border:solid 1px @selected-border-color;
|
||||
color:@selected-text-color;
|
||||
border-color: @selected-border-color;
|
||||
border-width: 1px 0;
|
||||
color: @selected-text-color;
|
||||
}
|
||||
.claro .dijitTreeRowHover {
|
||||
background-color:@hovered-background-color;
|
||||
background-image: url(@image-common-highlight);
|
||||
background-color: @hovered-background-color;
|
||||
.standard-gradient;
|
||||
padding: 3px 0 1px;
|
||||
margin: 0;
|
||||
border:solid 1px @hovered-border-color;
|
||||
color:@hovered-text-color;
|
||||
border-color: @hovered-border-color;
|
||||
border-width: 1px 0;
|
||||
color: @hovered-text-color;
|
||||
.transition-duration(.25s);
|
||||
}
|
||||
.claro .dijitTreeRowActive {
|
||||
background-color:@pressed-background-color;
|
||||
background-image: url(@image-common-highlight);
|
||||
background-position:0 -177px;
|
||||
.active-gradient;
|
||||
padding: 3px 0 1px;
|
||||
margin-left: 0;
|
||||
border:solid 1px @pressed-border-color;
|
||||
color:@selected-text-color;
|
||||
}
|
||||
.dj_ie6 .claro .dijitTreeRow {
|
||||
background-image: none;
|
||||
border-color: @pressed-border-color;
|
||||
border-width: 1px 0;
|
||||
color: @selected-text-color;
|
||||
}
|
||||
.claro .dijitTreeRowFocused {
|
||||
background-repeat: repeat;
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
@import url("form/Button_rtl.css");
|
||||
@import url("layout/TabContainer_rtl.css");
|
||||
@import url("form/Slider_rtl.css");
|
||||
@import url("form/Select_rtl.css");
|
||||
@import url("Dialog_rtl.css");
|
||||
@import url("Editor_rtl.css");
|
||||
@import url("../../icons/editorIcons_rtl.css");/* RTL sprite for editor icons to be used by all themes*/
|
||||
|
||||
@@ -43,16 +43,20 @@
|
||||
|
||||
border: 1px solid #759dc0;
|
||||
padding: 2px 4px 4px 4px;
|
||||
background-image: url("../form/images/button.png");
|
||||
background-position: center top;
|
||||
background-repeat: repeat-x;
|
||||
background-color: #e5f2fe;
|
||||
color: #000000;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
background-color: #bcd8f4;
|
||||
background-image: url("images/buttonEnabled.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%);
|
||||
background-image: -webkit-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%);
|
||||
background-image: -o-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%);
|
||||
background-image: linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%);
|
||||
_background-image: none;
|
||||
}
|
||||
.claro .dijitComboButton .dijitArrowButton {
|
||||
border-left-width: 0;
|
||||
@@ -100,7 +104,7 @@
|
||||
.claro .dijitComboButton .dijitButtonNodeHover,
|
||||
.claro .dijitComboButton .dijitDownArrowButtonHover,
|
||||
.claro .dijitToggleButtonHover .dijitButtonNode {
|
||||
background-color: #abd6ff;
|
||||
background-color: #86bdf2;
|
||||
color: #000000;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
-moz-transition-duration: 0.2s;
|
||||
@@ -111,11 +115,11 @@
|
||||
.claro .dijitDropDownButtonActive .dijitButtonNode,
|
||||
.claro .dijitComboButtonActive .dijitButtonNode,
|
||||
.claro .dijitToggleButtonActive .dijitButtonNode,
|
||||
.claro .dijitStackController .dijitToggleButtonChecked .dijitButtonNode {
|
||||
background-color: #abd6ff;
|
||||
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
.claro .dijitToggleButtonChecked .dijitButtonNode {
|
||||
background-color: #86bdf2;
|
||||
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
|
||||
-webkit-transition-duration: 0.1s;
|
||||
-moz-transition-duration: 0.1s;
|
||||
transition-duration: 0.1s;
|
||||
@@ -132,13 +136,18 @@
|
||||
.claro .dijitDropDownButtonDisabled .dijitButtonNode,
|
||||
.claro .dijitComboButtonDisabled .dijitButtonNode,
|
||||
.claro .dijitToggleButtonDisabled .dijitButtonNode {
|
||||
background-position: 0 -149px;
|
||||
background-color: #efefef;
|
||||
border: solid 1px #d3d3d3;
|
||||
color: #818181;
|
||||
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
background-image: url("images/buttonDisabled.png");
|
||||
background-image: -moz-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%);
|
||||
background-image: -webkit-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%);
|
||||
background-image: -o-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%);
|
||||
background-image: linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%);
|
||||
_background-image: none;
|
||||
}
|
||||
.claro .dijitComboButtonDisabled .dijitArrowButton {
|
||||
border-left-width: 0;
|
||||
@@ -149,9 +158,6 @@
|
||||
/* override dijit.css so that ComboBox rounded corners work */
|
||||
|
||||
}
|
||||
.dj_ie6 .claro .dijitButtonNode {
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitComboButton .dijitStretch {
|
||||
-moz-border-radius: 4px 0 0 4px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
|
||||
@@ -40,16 +40,22 @@
|
||||
.claro .dijitToggleButton .dijitButtonNode {
|
||||
/* rules for the dijit.form.*Button widgets (see also ComboButton section below) */
|
||||
border: 1px solid @button-border-color;
|
||||
padding:2px 4px 4px 4px;
|
||||
background-image: url("../@{image-form-button}");
|
||||
background-position: center top;
|
||||
background-repeat: repeat-x;
|
||||
background-color: @button-background-color;
|
||||
padding: 2px 4px 4px 4px;
|
||||
color: @text-color;
|
||||
.border-radius(@button-border-radius);
|
||||
.box-shadow(0 1px 1px rgba(0,0,0,0.15));
|
||||
|
||||
background-color: desaturate(darken(@button-background-color, 10), 20);
|
||||
|
||||
// Alpha transparency layer to add gradient to above background color.
|
||||
// Use CSS gradient with fallback to image for IE.
|
||||
background-image: url("images/buttonEnabled.png");
|
||||
background-repeat: repeat-x;
|
||||
.alpha-white-gradient(1, 0px, 0, 3px, 0.75, 100%);
|
||||
_background-image: none; // IE6 can't handle background-color and background-image at once.
|
||||
}
|
||||
|
||||
|
||||
.claro .dijitComboButton .dijitArrowButton {
|
||||
border-left-width: 0;
|
||||
padding: 4px 2px 4px 2px; /* TODO: still needed? */
|
||||
@@ -101,7 +107,7 @@
|
||||
.claro .dijitComboButton .dijitButtonNodeHover,
|
||||
.claro .dijitComboButton .dijitDownArrowButtonHover,
|
||||
.claro .dijitToggleButtonHover .dijitButtonNode {
|
||||
background-color: @button-hovered-background-color;
|
||||
background-color: desaturate(darken(@button-hovered-background-color, 10), 20);
|
||||
color:@text-color;
|
||||
.transition-duration(.2s);
|
||||
}
|
||||
@@ -111,9 +117,9 @@
|
||||
.claro .dijitDropDownButtonActive .dijitButtonNode,
|
||||
.claro .dijitComboButtonActive .dijitButtonNode,
|
||||
.claro .dijitToggleButtonActive .dijitButtonNode,
|
||||
.claro .dijitStackController .dijitToggleButtonChecked .dijitButtonNode {
|
||||
background-color: @button-pressed-background-color;
|
||||
.box-shadow(0 0 0 rgba(0,0,0,0));
|
||||
.claro .dijitToggleButtonChecked .dijitButtonNode {
|
||||
background-color: desaturate(darken(@button-pressed-background-color, 10), 20);
|
||||
.box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2));
|
||||
.transition-duration(.1s);
|
||||
}
|
||||
|
||||
@@ -129,13 +135,19 @@
|
||||
.claro .dijitButtonDisabled .dijitButtonNode,
|
||||
.claro .dijitDropDownButtonDisabled .dijitButtonNode,
|
||||
.claro .dijitComboButtonDisabled .dijitButtonNode,
|
||||
.claro .dijitToggleButtonDisabled .dijitButtonNode {
|
||||
background-position:0 -149px;
|
||||
.claro .dijitToggleButtonDisabled .dijitButtonNode {
|
||||
background-color: @disabled-background-color;
|
||||
border: solid 1px @disabled-border-color;
|
||||
color: @disabled-text-color;
|
||||
.box-shadow(0 0 0 rgba(0,0,0,0));
|
||||
|
||||
// Change the gradient from light to dark.
|
||||
// Again using CSS gradient with fallback to image for IE.
|
||||
background-image: url("images/buttonDisabled.png");
|
||||
.alpha-white-gradient(1, 0%, 0, 40%);
|
||||
_background-image: none; // IE6 can't handle background-color and background-image at once.
|
||||
}
|
||||
|
||||
.claro .dijitComboButtonDisabled .dijitArrowButton{
|
||||
border-left-width: 0;
|
||||
}
|
||||
@@ -144,10 +156,6 @@
|
||||
border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */
|
||||
}
|
||||
|
||||
.dj_ie6 .claro .dijitButtonNode {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.claro .dijitComboButton .dijitStretch {
|
||||
.border-radius(@button-border-radius 0 0 @button-border-radius);
|
||||
}
|
||||
|
||||
@@ -4,15 +4,17 @@
|
||||
.claro .dijitTextBox, .claro .dijitInputInner {
|
||||
color: #000000;
|
||||
}
|
||||
.claro .dijitTextBoxError .dijitValidationContainer {
|
||||
.claro .dijitValidationTextBoxError .dijitValidationContainer {
|
||||
background-color: #d46464;
|
||||
background-image: url("../form/images/error.png");
|
||||
background-position: top center;
|
||||
border: solid #d46464 0;
|
||||
border-left-width: 1px;
|
||||
width: 9px;
|
||||
}
|
||||
.claro .dijitTextBoxError .dijitValidationIcon {
|
||||
.claro .dijitTextBoxError .dijitValidationContainer {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
.claro .dijitValidationTextBoxError .dijitValidationIcon {
|
||||
width: 0;
|
||||
background-color: transparent !important;
|
||||
/* so the INPUT doesn't obscure the border in rtl+a11y */
|
||||
@@ -26,13 +28,16 @@
|
||||
.claro .dijitTextArea, .claro .dijitInputField .dijitPlaceHolder {
|
||||
padding: 2px;
|
||||
}
|
||||
.claro .dijitTextBox .dijitInputField {
|
||||
.claro .dijitSelect .dijitInputField, .claro .dijitTextBox .dijitInputField {
|
||||
padding: 1px 2px;
|
||||
}
|
||||
.dj_gecko .claro .dijitTextBox .dijitInputInner, .dj_webkit .claro .dijitTextBox .dijitInputInner {
|
||||
padding: 1px;
|
||||
}
|
||||
.claro .dijitTextBox, .claro .dijitTextBox .dijitButtonNode {
|
||||
.claro .dijitSelect,
|
||||
.claro .dijitSelect .dijitButtonContents,
|
||||
.claro .dijitTextBox,
|
||||
.claro .dijitTextBox .dijitButtonNode {
|
||||
/* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */
|
||||
|
||||
border-color: #b5bcc7;
|
||||
@@ -43,11 +48,14 @@
|
||||
-moz-transition-duration: 0.35s;
|
||||
transition-duration: 0.35s;
|
||||
}
|
||||
.claro .dijitTextBox {
|
||||
.claro .dijitSelect, .claro .dijitTextBox {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
/* hover */
|
||||
.claro .dijitTextBoxHover, .claro .dijitTextBoxHover .dijitButtonNode {
|
||||
.claro .dijitSelectHover,
|
||||
.claro .dijitSelectHover .dijitButtonContents,
|
||||
.claro .dijitTextBoxHover,
|
||||
.claro .dijitTextBoxHover .dijitButtonNode {
|
||||
border-color: #759dc0;
|
||||
-webkit-transition-duration: 0.25s;
|
||||
-moz-transition-duration: 0.25s;
|
||||
@@ -55,18 +63,23 @@
|
||||
}
|
||||
.claro .dijitTextBoxHover {
|
||||
background-color: #e5f2fe;
|
||||
background-image: url("../form/images/textBox_back.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
|
||||
background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
|
||||
background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
|
||||
background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
|
||||
}
|
||||
/* error state */
|
||||
.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitButtonNode {
|
||||
.claro .dijitSelectError,
|
||||
.claro .dijitSelectError .dijitButtonContents,
|
||||
.claro .dijitTextBoxError,
|
||||
.claro .dijitTextBoxError .dijitButtonNode {
|
||||
border-color: #d46464;
|
||||
}
|
||||
.claro .dijitTextBoxError, .claro .dijitTextBoxError .dijitInputContainer {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
/* focused state */
|
||||
.claro .dijitTextBoxFocused, .claro .dijitTextBoxFocused .dijitButtonNode {
|
||||
.claro .dijitSelectFocused,
|
||||
.claro .dijitSelectFocused .dijitButtonContents,
|
||||
.claro .dijitTextBoxFocused,
|
||||
.claro .dijitTextBoxFocused .dijitButtonNode {
|
||||
border-color: #759dc0;
|
||||
-webkit-transition-duration: 0.1s;
|
||||
-moz-transition-duration: 0.1s;
|
||||
@@ -74,27 +87,35 @@
|
||||
}
|
||||
.claro .dijitTextBoxFocused {
|
||||
background-color: #ffffff;
|
||||
background-image: url("../form/images/textBox_back.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
|
||||
background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
|
||||
background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
|
||||
background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
|
||||
}
|
||||
.claro .dijitTextBoxFocused .dijitInputContainer {
|
||||
background: #ffffff;
|
||||
}
|
||||
.claro .dijitTextBoxErrorFocused, .claro .dijitTextBoxErrorFocused .dijitButtonNode {
|
||||
.claro .dijitSelectErrorFocused,
|
||||
.claro .dijitSelectErrorFocused .dijitButtonContents,
|
||||
.claro .dijitTextBoxErrorFocused,
|
||||
.claro .dijitTextBoxErrorFocused .dijitButtonNode {
|
||||
border-color: #ce5050;
|
||||
}
|
||||
/* disabled state */
|
||||
.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitButtonNode {
|
||||
.claro .dijitSelectDisabled,
|
||||
.claro .dijitSelectDisabled .dijitButtonContents,
|
||||
.claro .dijitTextBoxDisabled,
|
||||
.claro .dijitTextBoxDisabled .dijitButtonNode {
|
||||
border-color: #d3d3d3;
|
||||
}
|
||||
.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer {
|
||||
.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputContainer {
|
||||
background-color: #efefef;
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner {
|
||||
.claro .dijitSelectDisabled, .claro .dijitTextBoxDisabled, .claro .dijitTextBoxDisabled .dijitInputInner {
|
||||
color: #818181;
|
||||
}
|
||||
.dj_webkit .claro .dijitTextBoxDisabled input {
|
||||
.dj_webkit .claro .dijitDisabled input {
|
||||
/* because WebKit lightens disabled input/textarea no matter what color you specify */
|
||||
|
||||
color: #757575;
|
||||
@@ -106,12 +127,14 @@
|
||||
}
|
||||
/*========================= for special widgets =========================*/
|
||||
/* Input boxes with an arrow (for a drop down) */
|
||||
.claro .dijitComboBox .dijitArrowButtonInner {
|
||||
.claro .dijitSelect .dijitArrowButtonInner, .claro .dijitComboBox .dijitArrowButtonInner {
|
||||
background-image: url("../form/images/commonFormArrows.png");
|
||||
background-position: -35px 53%;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0;
|
||||
width: 16px;
|
||||
}
|
||||
.claro .dijitComboBox .dijitArrowButtonInner {
|
||||
border: 1px solid #ffffff;
|
||||
}
|
||||
.claro .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
|
||||
@@ -122,13 +145,18 @@
|
||||
}
|
||||
/* Add 1px vertical padding to the <input> where user types and the validation icon,
|
||||
to match the 1px border on arrow button */
|
||||
.claro .dijitTextBox .dijitInputInner, .claro .dijitTextBox .dijitValidationContainer {
|
||||
.claro .dijitSelectLabel, .claro .dijitTextBox .dijitInputInner, .claro .dijitValidationTextBox .dijitValidationContainer {
|
||||
padding: 1px 0;
|
||||
}
|
||||
.claro .dijitComboBox .dijitButtonNode {
|
||||
background-color: #efefef;
|
||||
background-image: url("../form/images/formHighlight.png");
|
||||
background-image: url("../images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
}
|
||||
/* Arrow "hover" effect:
|
||||
* The arrow button should change color whenever the mouse is in a position such that clicking it
|
||||
@@ -144,9 +172,18 @@
|
||||
/* Arrow Button change when drop down is open */
|
||||
.claro .dijitComboBox .dijitHasDropDownOpen {
|
||||
background-color: #7dbdfa;
|
||||
background-position: 0 -177px;
|
||||
background-image: url("../images/activeGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
padding: 1px;
|
||||
}
|
||||
.dj_iequirks .claro .dijitComboBox .dijitHasDropDownOpen {
|
||||
padding: 1px 0;
|
||||
}
|
||||
.claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
|
||||
background-position: -70px 53%;
|
||||
border: 0 none;
|
||||
@@ -166,10 +203,6 @@
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
/* ie6 doesn't support transparent background img */
|
||||
.dj_ie6 .claro .dijitTextBox, .dj_ie6 .claro .dijitComboBox .dijitButtonNode {
|
||||
background-image: none;
|
||||
}
|
||||
.dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
@@ -13,15 +13,19 @@
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
.claro .dijitTextBoxError .dijitValidationContainer {
|
||||
.claro .dijitValidationTextBoxError .dijitValidationContainer {
|
||||
background-color: @erroricon-background-color;
|
||||
background-image: url("../@{image-form-error}");
|
||||
background-position: top center;
|
||||
border: solid @erroricon-background-color 0;
|
||||
border-left-width: 1px;
|
||||
width: 9px;
|
||||
}
|
||||
.claro .dijitTextBoxError .dijitValidationIcon {
|
||||
|
||||
.claro .dijitTextBoxError .dijitValidationContainer {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.claro .dijitValidationTextBoxError .dijitValidationIcon {
|
||||
width: 0;
|
||||
background-color: transparent !important; /* so the INPUT doesn't obscure the border in rtl+a11y */
|
||||
}
|
||||
@@ -35,12 +39,15 @@
|
||||
.claro .dijitInputField .dijitPlaceHolder {
|
||||
padding: @textbox-padding;
|
||||
}
|
||||
|
||||
.claro .dijitSelect .dijitInputField,
|
||||
.claro .dijitTextBox .dijitInputField {
|
||||
// Subtract 1px from top/bottom because we add 1px to other nodes, see rules below.
|
||||
// Although we are theoretically only adding 1px to top/bottom browsers seem to pad inputs by 1px on left/right,
|
||||
// although that varies by so compensate for that too.
|
||||
padding: @textbox-padding - 1px @textbox-padding;
|
||||
}
|
||||
|
||||
.dj_gecko .claro .dijitTextBox .dijitInputInner,
|
||||
.dj_webkit .claro .dijitTextBox .dijitInputInner {
|
||||
// Although we are theoretically only adding 1px to top/bottom, some browsers seem to pad inputs by 1px on left/right,
|
||||
@@ -48,6 +55,8 @@
|
||||
padding: @textbox-padding - 1px;
|
||||
}
|
||||
|
||||
.claro .dijitSelect,
|
||||
.claro .dijitSelect .dijitButtonContents,
|
||||
.claro .dijitTextBox,
|
||||
.claro .dijitTextBox .dijitButtonNode {
|
||||
/* color for (outer) border on *TextBox widgets, and border between input and buttons on ComboBox and Spinner */
|
||||
@@ -55,70 +64,84 @@
|
||||
.transition-property(background-color, border);
|
||||
.transition-duration(.35s);
|
||||
}
|
||||
|
||||
.claro .dijitSelect,
|
||||
.claro .dijitTextBox {
|
||||
background-color: @textbox-background-color;
|
||||
}
|
||||
|
||||
/* hover */
|
||||
.claro .dijitSelectHover,
|
||||
.claro .dijitSelectHover .dijitButtonContents,
|
||||
.claro .dijitTextBoxHover,
|
||||
.claro .dijitTextBoxHover .dijitButtonNode {
|
||||
border-color: @hovered-border-color;
|
||||
.transition-duration(.25s);
|
||||
}
|
||||
|
||||
.claro .dijitTextBoxHover {
|
||||
background-color: @textbox-hovered-background-color;
|
||||
background-image: url("../@{image-form-textbox-background}");
|
||||
background-repeat: repeat-x;
|
||||
.textbox-background-image;
|
||||
}
|
||||
|
||||
/* error state */
|
||||
.claro .dijitSelectError,
|
||||
.claro .dijitSelectError .dijitButtonContents,
|
||||
.claro .dijitTextBoxError,
|
||||
.claro .dijitTextBoxError .dijitButtonNode {
|
||||
border-color: @error-border-color;
|
||||
}
|
||||
.claro .dijitTextBoxError,
|
||||
.claro .dijitTextBoxError .dijitInputContainer {
|
||||
background-color: @textbox-error-background-color;
|
||||
}
|
||||
|
||||
/* focused state */
|
||||
.claro .dijitSelectFocused,
|
||||
.claro .dijitSelectFocused .dijitButtonContents,
|
||||
.claro .dijitTextBoxFocused,
|
||||
.claro .dijitTextBoxFocused .dijitButtonNode {
|
||||
border-color:@focused-border-color;
|
||||
.transition-duration(.1s);
|
||||
}
|
||||
|
||||
.claro .dijitTextBoxFocused {
|
||||
background-color: @textbox-focused-background-color;
|
||||
background-image: url("../@{image-form-textbox-background}");
|
||||
background-repeat: repeat-x;
|
||||
.textbox-background-image;
|
||||
}
|
||||
.claro .dijitTextBoxFocused .dijitInputContainer {
|
||||
background: @textbox-focused-background-color;
|
||||
}
|
||||
|
||||
.claro .dijitSelectErrorFocused,
|
||||
.claro .dijitSelectErrorFocused .dijitButtonContents,
|
||||
.claro .dijitTextBoxErrorFocused,
|
||||
.claro .dijitTextBoxErrorFocused .dijitButtonNode {
|
||||
border-color: @error-focused-border-color;
|
||||
}
|
||||
|
||||
/* disabled state */
|
||||
.claro .dijitSelectDisabled,
|
||||
.claro .dijitSelectDisabled .dijitButtonContents,
|
||||
.claro .dijitTextBoxDisabled,
|
||||
.claro .dijitTextBoxDisabled .dijitButtonNode {
|
||||
border-color: @disabled-border-color;
|
||||
}
|
||||
|
||||
.claro .dijitSelectDisabled,
|
||||
.claro .dijitTextBoxDisabled,
|
||||
.claro .dijitTextBoxDisabled .dijitInputContainer {
|
||||
background-color: @textbox-disabled-background-color;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.claro .dijitSelectDisabled,
|
||||
.claro .dijitTextBoxDisabled,
|
||||
.claro .dijitTextBoxDisabled .dijitInputInner {
|
||||
color: @disabled-text-color;
|
||||
}
|
||||
.dj_webkit .claro .dijitTextBoxDisabled input {
|
||||
|
||||
.dj_webkit .claro .dijitDisabled input {
|
||||
/* because WebKit lightens disabled input/textarea no matter what color you specify */
|
||||
color: darken(@disabled-text-color, 5%)
|
||||
}
|
||||
|
||||
.dj_webkit .claro textarea.dijitTextAreaDisabled {
|
||||
/* because WebKit lightens disabled input/textarea no matter what color you specify */
|
||||
color: darken(@disabled-text-color, 40%)
|
||||
@@ -128,12 +151,16 @@
|
||||
|
||||
/* Input boxes with an arrow (for a drop down) */
|
||||
|
||||
.claro .dijitSelect .dijitArrowButtonInner,
|
||||
.claro .dijitComboBox .dijitArrowButtonInner {
|
||||
background-image: url("../@{image-form-common-arrows}");
|
||||
background-position:-35px 53%;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0;
|
||||
width:16px;
|
||||
}
|
||||
|
||||
.claro .dijitComboBox .dijitArrowButtonInner {
|
||||
border: 1px solid @arrowbutton-inner-border-color; // white gutter around the arrow button
|
||||
}
|
||||
|
||||
@@ -147,15 +174,15 @@
|
||||
|
||||
/* Add 1px vertical padding to the <input> where user types and the validation icon,
|
||||
to match the 1px border on arrow button */
|
||||
.claro .dijitSelectLabel,
|
||||
.claro .dijitTextBox .dijitInputInner,
|
||||
.claro .dijitTextBox .dijitValidationContainer {
|
||||
.claro .dijitValidationTextBox .dijitValidationContainer {
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
.claro .dijitComboBox .dijitButtonNode {
|
||||
background-color: @arrowbutton-background-color;
|
||||
background-image: url("../@{image-form-highlight}");
|
||||
background-repeat:repeat-x;
|
||||
.standard-gradient("../");
|
||||
}
|
||||
|
||||
/* Arrow "hover" effect:
|
||||
@@ -167,6 +194,7 @@
|
||||
.claro .dijitComboBox .dijitDownArrowButtonHover {
|
||||
background-color:@arrowbutton-hovered-background-color;
|
||||
}
|
||||
|
||||
.claro .dijitComboBoxOpenOnClickHover .dijitArrowButtonInner,
|
||||
.claro .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner {
|
||||
background-position:-70px 53%;
|
||||
@@ -175,9 +203,14 @@
|
||||
/* Arrow Button change when drop down is open */
|
||||
.claro .dijitComboBox .dijitHasDropDownOpen { // .dijitHasDropDown is on dijitArrowButton node
|
||||
background-color: @pressed-background-color;
|
||||
background-position:0 -177px;
|
||||
.active-gradient("../");
|
||||
padding: 1px; // Since no border on arrow button (see rule below)
|
||||
}
|
||||
|
||||
.dj_iequirks .claro .dijitComboBox .dijitHasDropDownOpen {
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
.claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
|
||||
background-position:-70px 53%;
|
||||
border: 0 none;
|
||||
@@ -199,14 +232,10 @@
|
||||
width: 0;
|
||||
}
|
||||
|
||||
/* ie6 doesn't support transparent background img */
|
||||
.dj_ie6 .claro .dijitTextBox,
|
||||
.dj_ie6 .claro .dijitComboBox .dijitButtonNode {
|
||||
background-image: none;
|
||||
}
|
||||
.dj_borderbox .claro .dijitComboBox .dijitHasDropDownOpen .dijitArrowButtonInner {
|
||||
width:18px; // quirks mode means border-box sizing, so 18px with the border (same as 16px without border)
|
||||
}
|
||||
|
||||
.dj_borderbox .claro .dijitComboBoxFocused .dijitHasDropDownOpen .dijitArrowButtonInner {
|
||||
width:16px; // when no border, then back to 16px just like content-box sizing
|
||||
}
|
||||
|
||||
@@ -1,10 +1,5 @@
|
||||
/* claro/form/Common_rtl.css */
|
||||
/*claro should not have the icon on the container
|
||||
.claro .dijitTextBoxRtlError .dijitValidationIcon {
|
||||
border-left-width: 0;
|
||||
border-right-width: 1px;
|
||||
}*/
|
||||
.claro .dijitTextBoxRtlError .dijitValidationContainer {
|
||||
border-left-width: 0;
|
||||
border-right-width: 1px;
|
||||
border-left-width: 0 !important;
|
||||
border-right-width: 1px !important;
|
||||
}
|
||||
|
||||
@@ -2,12 +2,7 @@
|
||||
|
||||
@import "../variables";
|
||||
|
||||
/*claro should not have the icon on the container
|
||||
.claro .dijitTextBoxRtlError .dijitValidationIcon {
|
||||
border-left-width: 0;
|
||||
border-right-width: 1px;
|
||||
}*/
|
||||
.claro .dijitTextBoxRtlError .dijitValidationContainer {
|
||||
border-left-width: 0;
|
||||
border-right-width: 1px;
|
||||
border-left-width: 0 !important;
|
||||
border-right-width: 1px !important;
|
||||
}
|
||||
|
||||
@@ -35,9 +35,13 @@
|
||||
.claro .dijitSpinner .dijitArrowButton {
|
||||
width: auto;
|
||||
background-color: #efefef;
|
||||
background-image: url("../form/images/formHighlight.png");
|
||||
background-position: 0 0;
|
||||
background-image: url("../images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dj_iequirks .claro .dijitSpinner .dijitArrowButton {
|
||||
@@ -70,7 +74,10 @@
|
||||
/* compensate for inner border */
|
||||
|
||||
}
|
||||
.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, .dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner {
|
||||
.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner,
|
||||
.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner,
|
||||
.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner,
|
||||
.dj_ie8 .claro .dijitSpinner .dijitArrowButtonInner {
|
||||
margin-top: 0;
|
||||
/* since its bottom aligned */
|
||||
|
||||
@@ -104,7 +111,13 @@
|
||||
/* mouse down status */
|
||||
.claro .dijitSpinner .dijitDownArrowButtonActive, .claro .dijitSpinner .dijitUpArrowButtonActive {
|
||||
background-color: #7dbefa;
|
||||
background-position: 0 -177px;
|
||||
background-image: url("../images/activeGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
}
|
||||
.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {
|
||||
/* hide inner border while button is depressed */
|
||||
|
||||
@@ -37,9 +37,7 @@
|
||||
.claro .dijitSpinner .dijitArrowButton {
|
||||
width:auto;
|
||||
background-color: @arrowbutton-background-color;
|
||||
background-image: url("../@{image-form-highlight}");
|
||||
background-position:0 0;
|
||||
background-repeat:repeat-x;
|
||||
.standard-gradient("../");
|
||||
overflow: hidden;
|
||||
}
|
||||
.dj_iequirks .claro .dijitSpinner .dijitArrowButton {
|
||||
@@ -68,8 +66,10 @@
|
||||
margin: -1px 0 -1px 0; /* compensate for inner border */
|
||||
}
|
||||
|
||||
.dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner,
|
||||
.dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner,
|
||||
.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner {
|
||||
.dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner,
|
||||
.dj_ie8 .claro .dijitSpinner .dijitArrowButtonInner {
|
||||
margin-top: 0; /* since its bottom aligned */
|
||||
}
|
||||
|
||||
@@ -112,7 +112,7 @@
|
||||
.claro .dijitSpinner .dijitDownArrowButtonActive,
|
||||
.claro .dijitSpinner .dijitUpArrowButtonActive {
|
||||
background-color: #7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior.
|
||||
background-position:0 -177px;
|
||||
.active-gradient("../");
|
||||
}
|
||||
.claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner,
|
||||
.claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {
|
||||
|
||||
@@ -16,82 +16,69 @@
|
||||
* 4. Various states
|
||||
* .dijitSelectHover|.dijitSelectFocused|.dijitSelectDisabled .* - for border, padding and background-color|image
|
||||
*/
|
||||
.claro .dijitSelect .dijitButtonText {
|
||||
padding: 2px;
|
||||
}
|
||||
/* normal status */
|
||||
.claro .dijitSelect {
|
||||
border: 1px solid #b5bcc7;
|
||||
background-color: #ffffff;
|
||||
border-collapse: separate;
|
||||
}
|
||||
.dj_ie6 .claro .dijitSelect, .dj_ie6 .claro .dijitSelect .dijitButtonNode {
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitSelect .dijitButtonContents {
|
||||
border: 0 solid #b5bcc7;
|
||||
border-right-width: 1px;
|
||||
.claro .dijitSelect .dijitArrowButtonContainer {
|
||||
border: 1px solid #ffffff;
|
||||
}
|
||||
.claro .dijitSelect .dijitArrowButton {
|
||||
padding: 0;
|
||||
border: 1px solid #ffffff;
|
||||
border-top: none;
|
||||
background-color: #efefef;
|
||||
background-image: url("../form/images/formHighlight.png");
|
||||
background-image: url("../images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
}
|
||||
.claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner {
|
||||
background-image: url("../form/images/commonFormArrows.png");
|
||||
background-position: -35px 70%;
|
||||
background-repeat: no-repeat;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
/* hover status */
|
||||
.claro .dijitSelectHover {
|
||||
border: 1px solid #759dc0;
|
||||
background-color: #e5f2fe;
|
||||
background-image: url("../form/images/textBox_back.png");
|
||||
background-image: -moz-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
|
||||
background-image: -webkit-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
|
||||
background-image: -o-linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
|
||||
background-image: linear-gradient(rgba(127, 127, 127, 0.2) 0%, rgba(127, 127, 127, 0) 2px);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.claro .dijitSelectHover .dijitButtonContents {
|
||||
.claro .dijitSelectFocused, .claro .dijitSelectHover {
|
||||
border-color: #759dc0;
|
||||
}
|
||||
.claro .dijitSelectHover .dijitArrowButton {
|
||||
background-color: #abd6ff;
|
||||
}
|
||||
.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {
|
||||
background-position: -70px 70%;
|
||||
background-position: -70px 53%;
|
||||
}
|
||||
/* focused status */
|
||||
.claro .dijitSelectFocused {
|
||||
border: 1px solid #759dc0;
|
||||
}
|
||||
.claro .dijitSelectFocused .dijitButtonContents {
|
||||
border-color: #759dc0;
|
||||
}
|
||||
.claro .dijitSelectFocused .dijitArrowButton {
|
||||
background-color: #7dbefa;
|
||||
background-position: 0 -177px;
|
||||
background-image: url("../images/activeGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
}
|
||||
.claro .dijitSelectFocused .dijitArrowButton {
|
||||
border: none;
|
||||
padding: 0 1px;
|
||||
padding: 1px;
|
||||
}
|
||||
.claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {
|
||||
background-position: -70px 70%;
|
||||
margin-bottom: 1px;
|
||||
background-position: -70px 53%;
|
||||
}
|
||||
/* disable status */
|
||||
.claro .dijitSelectDisabled {
|
||||
border: 1px solid #d3d3d3;
|
||||
border-color: #d3d3d3;
|
||||
background-color: #efefef;
|
||||
background-image: none;
|
||||
color: #818181;
|
||||
}
|
||||
.claro .dijitSelectDisabled .dijitArrowButton {
|
||||
background-color: #efefef;
|
||||
}
|
||||
.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {
|
||||
background-position: 0 70%;
|
||||
background-position: 0 53%;
|
||||
}
|
||||
/* Dropdown menu style for select */
|
||||
.claro .dijitSelectMenu td.dijitMenuItemIconCell, .claro .dijitSelectMenu td.dijitMenuArrowCell {
|
||||
|
||||
@@ -19,101 +19,75 @@
|
||||
|
||||
@import "../variables";
|
||||
|
||||
.claro .dijitSelect .dijitButtonText {
|
||||
padding: @textbox-padding;
|
||||
}
|
||||
|
||||
/* normal status */
|
||||
.claro .dijitSelect {
|
||||
border: 1px solid @border-color;
|
||||
background-color: @textbox-background-color;
|
||||
border-collapse: separate;
|
||||
}
|
||||
.dj_ie6 .claro .dijitSelect,
|
||||
.dj_ie6 .claro .dijitSelect .dijitButtonNode {
|
||||
background-image:none;
|
||||
}
|
||||
|
||||
.claro .dijitSelect .dijitButtonContents {
|
||||
border: 0 solid @border-color;
|
||||
border-right-width: 1px;
|
||||
.claro .dijitSelect .dijitArrowButtonContainer {
|
||||
border: 1px solid @arrowbutton-inner-border-color;
|
||||
}
|
||||
|
||||
.claro .dijitSelect .dijitArrowButton {
|
||||
padding: 0;
|
||||
border: 1px solid @arrowbutton-inner-border-color;
|
||||
border-top:none;
|
||||
background-color: @arrowbutton-background-color;
|
||||
background-image: url("../@{image-form-highlight}");
|
||||
background-repeat:repeat-x;
|
||||
.standard-gradient("../");
|
||||
}
|
||||
|
||||
.claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner {
|
||||
background-image: url("../@{image-form-common-arrows}");
|
||||
background-position:-35px 70%;
|
||||
background-repeat: no-repeat;
|
||||
width:16px;
|
||||
height:16px;
|
||||
}
|
||||
|
||||
/* hover status */
|
||||
.claro .dijitSelectHover {
|
||||
border: 1px solid @hovered-border-color;
|
||||
background-color: @textbox-hovered-background-color;
|
||||
background-image: url("../@{image-form-textbox-background}");
|
||||
.textbox-background-image;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.claro .dijitSelectHover .dijitButtonContents {
|
||||
.claro .dijitSelectFocused,
|
||||
.claro .dijitSelectHover {
|
||||
border-color:@hovered-border-color;
|
||||
}
|
||||
|
||||
.claro .dijitSelectHover .dijitArrowButton {
|
||||
background-color:@arrowbutton-hovered-background-color;
|
||||
}
|
||||
|
||||
.claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {
|
||||
background-position:-70px 70%;
|
||||
background-position:-70px 53%;
|
||||
}
|
||||
|
||||
/* focused status */
|
||||
.claro .dijitSelectFocused {
|
||||
border: 1px solid @focused-border-color;
|
||||
}
|
||||
.claro .dijitSelectFocused .dijitButtonContents {
|
||||
border-color:@focused-border-color;
|
||||
}
|
||||
.claro .dijitSelectFocused .dijitArrowButton {
|
||||
background-color:#7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior.
|
||||
background-position:0 -177px;
|
||||
border: none;
|
||||
padding: 0 1px;
|
||||
.active-gradient("../");
|
||||
}
|
||||
|
||||
.claro .dijitSelectFocused .dijitArrowButton {
|
||||
border: none;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {
|
||||
background-position:-70px 70%;
|
||||
margin-bottom: 1px;
|
||||
background-position:-70px 53%;
|
||||
}
|
||||
|
||||
/* disable status */
|
||||
.claro .dijitSelectDisabled {
|
||||
border: 1px solid @disabled-border-color;
|
||||
border-color: @disabled-border-color;
|
||||
background-color: @disabled-background-color;
|
||||
background-image: none;
|
||||
color: @disabled-text-color;
|
||||
}
|
||||
.claro .dijitSelectDisabled .dijitArrowButton {
|
||||
background-color: @disabled-background-color;
|
||||
}
|
||||
|
||||
.claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {
|
||||
background-position:0 70%
|
||||
background-position:0 53%
|
||||
}
|
||||
|
||||
/* Dropdown menu style for select */
|
||||
|
||||
.claro .dijitSelectMenu td.dijitMenuItemIconCell,
|
||||
.claro .dijitSelectMenu td.dijitMenuArrowCell {
|
||||
/* so that arrow and icon cells from MenuItem are not displayed */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.claro .dijitSelectMenu td.dijitMenuItemLabel {
|
||||
/* line up menu text with text in select box (in LTR and RTL modes) */
|
||||
padding: @textbox-padding;
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
.claro .dijitSelectRtl .dijitButtonContents {
|
||||
border-right-width: 0;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
@import "../variables";
|
||||
|
||||
.claro .dijitSelectRtl .dijitButtonContents {
|
||||
border-right-width: 0;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
@@ -63,7 +63,7 @@
|
||||
background-image: none;
|
||||
border-color: #d3d3d3;
|
||||
}
|
||||
.claro .dijitRuleLabel {
|
||||
.claro .dijitRuleLabelsContainer {
|
||||
color: #000000;
|
||||
}
|
||||
/* Horizontal Slider */
|
||||
@@ -71,16 +71,14 @@
|
||||
padding: 2px 0;
|
||||
}
|
||||
.claro .dijitSlider .dijitSliderProgressBarH, .claro .dijitSlider .dijitSliderLeftBumper {
|
||||
background-image: url("../form/images/sliderHorizontal.png");
|
||||
background-repeat: repeat-x;
|
||||
background-position: 0 -20px;
|
||||
border-color: #b5bcc7;
|
||||
background-color: #cfe5fa;
|
||||
background-image: -moz-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px);
|
||||
background-image: -webkit-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px);
|
||||
background-image: -o-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px);
|
||||
background-image: linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px);
|
||||
}
|
||||
.claro .dijitSlider .dijitSliderRemainingBarH, .claro .dijitSlider .dijitSliderRightBumper {
|
||||
background-image: url("../form/images/sliderHorizontal.png");
|
||||
background-repeat: repeat-x;
|
||||
background-position: 0 -11px;
|
||||
border-color: #b5bcc7;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
@@ -91,24 +89,26 @@
|
||||
border-left: solid 1px #b5bcc7;
|
||||
}
|
||||
.claro .dijitSliderHover .dijitSliderProgressBarH, .claro .dijitSliderHover .dijitSliderLeftBumper {
|
||||
background-position: 0 -20px;
|
||||
background-color: #abd6ff;
|
||||
border-color: #759dc0;
|
||||
}
|
||||
.claro .dijitSliderHover .dijitSliderRemainingBarH, .claro .dijitSliderHover .dijitSliderRightBumper {
|
||||
background-position: 0 0;
|
||||
background-color: #ffffff;
|
||||
border-color: #759dc0;
|
||||
}
|
||||
.claro .dijitSliderFocused .dijitSliderProgressBarH, .claro .dijitSliderFocused .dijitSliderLeftBumper {
|
||||
background-position: 0 -30px;
|
||||
background-color: #abd6ff;
|
||||
border-color: #759dc0;
|
||||
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.claro .dijitSliderFocused .dijitSliderRemainingBarH, .claro .dijitSliderFocused .dijitSliderRightBumper {
|
||||
background-position: 0 -9px;
|
||||
background-color: #ffffff;
|
||||
border-color: #759dc0;
|
||||
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.claro .dijitSliderDisabled .dijitSliderProgressBarH, .claro .dijitSliderDisabled .dijitSliderLeftBumper {
|
||||
background-color: #d3d3d3;
|
||||
@@ -124,16 +124,14 @@
|
||||
padding: 0 2px;
|
||||
}
|
||||
.claro .dijitSlider .dijitSliderProgressBarV, .claro .dijitSlider .dijitSliderBottomBumper {
|
||||
background-image: url("../form/images/sliderVertical.png");
|
||||
background-repeat: repeat-y;
|
||||
background-position: -36px 0;
|
||||
border-color: #b5bcc7;
|
||||
background-color: #cfe5fa;
|
||||
background-image: -moz-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px);
|
||||
background-image: -webkit-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px);
|
||||
background-image: -o-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px);
|
||||
background-image: linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 1px);
|
||||
}
|
||||
.claro .dijitSlider .dijitSliderRemainingBarV, .claro .dijitSlider .dijitSliderTopBumper {
|
||||
background-image: url("../form/images/sliderVertical.png");
|
||||
background-repeat: repeat-y;
|
||||
background-position: -3px 0;
|
||||
border-color: #b5bcc7;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
@@ -144,20 +142,26 @@
|
||||
border-top: solid 1px #b5bcc7;
|
||||
}
|
||||
.claro .dijitSliderHover .dijitSliderProgressBarV, .claro .dijitSliderHover .dijitSliderBottomBumper {
|
||||
background-position: -36px 0;
|
||||
background-color: #abd6ff;
|
||||
border-color: #759dc0;
|
||||
}
|
||||
.claro .dijitSliderHover .dijitSliderRemainingBarV, .claro .dijitSliderHover .dijitSliderTopBumper {
|
||||
background-position: 0 0;
|
||||
background-color: #ffffff;
|
||||
border-color: #759dc0;
|
||||
}
|
||||
.claro .dijitSliderFocused .dijitSliderProgressBarV, .claro .dijitSliderFocused .dijitSliderBottomBumper {
|
||||
background-position: -56px 0;
|
||||
background-color: #abd6ff;
|
||||
border-color: #759dc0;
|
||||
-webkit-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.claro .dijitSliderFocused .dijitSliderRemainingBarV, .claro .dijitSliderFocused .dijitSliderTopBumper {
|
||||
background-position: -18px 0;
|
||||
background-color: #ffffff;
|
||||
border-color: #759dc0;
|
||||
-webkit-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: inset 1px 0px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.claro .dijitSliderDisabled .dijitSliderProgressBarV, .claro .dijitSliderDisabled .dijitSliderBottomBumper {
|
||||
background-color: #d3d3d3;
|
||||
@@ -317,13 +321,3 @@
|
||||
background-position: -107px 49%;
|
||||
background-color: #efefef;
|
||||
}
|
||||
.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH,
|
||||
.dj_ie6 .claro .dijitSlider .dijitSliderLeftBumper,
|
||||
.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarH,
|
||||
.dj_ie6 .claro .dijitSlider .dijitSliderRightBumper,
|
||||
.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarV,
|
||||
.dj_ie6 .claro .dijitSlider .dijitSliderTopBumper,
|
||||
.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarV,
|
||||
.dj_ie6 .claro .dijitSlider .dijitSliderBottomBumper {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
background-image: none;
|
||||
border-color: @disabled-border-color;
|
||||
}
|
||||
.claro .dijitRuleLabel {
|
||||
.claro .dijitRuleLabelsContainer {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
@@ -77,17 +77,12 @@
|
||||
}
|
||||
.claro .dijitSlider .dijitSliderProgressBarH,
|
||||
.claro .dijitSlider .dijitSliderLeftBumper{
|
||||
background-image: url("../@{image-form-slider-horizontal}");
|
||||
background-repeat:repeat-x;
|
||||
background-position:0 -20px;
|
||||
border-color: @border-color;
|
||||
background-color: @slider-fullbar-background-color;
|
||||
.alpha-white-gradient (top, 1,0px, 1,1px, 0,2px);
|
||||
}
|
||||
.claro .dijitSlider .dijitSliderRemainingBarH,
|
||||
.claro .dijitSlider .dijitSliderRightBumper{
|
||||
background-image: url("../@{image-form-slider-horizontal}");
|
||||
background-repeat:repeat-x;
|
||||
background-position:0 -11px;
|
||||
border-color: @border-color;
|
||||
background-color: @slider-remainingbar-background-color;
|
||||
}
|
||||
@@ -99,27 +94,25 @@
|
||||
}
|
||||
.claro .dijitSliderHover .dijitSliderProgressBarH,
|
||||
.claro .dijitSliderHover .dijitSliderLeftBumper{
|
||||
background-position:0 -20px;
|
||||
background-color: @slider-hovered-fullbar-background-color;
|
||||
border-color: @hovered-border-color;
|
||||
}
|
||||
.claro .dijitSliderHover .dijitSliderRemainingBarH,
|
||||
.claro .dijitSliderHover .dijitSliderRightBumper{
|
||||
background-position:0 0;
|
||||
background-color: @slider-hovered-remainingbar-background-color;
|
||||
border-color: @hovered-border-color;
|
||||
}
|
||||
.claro .dijitSliderFocused .dijitSliderProgressBarH,
|
||||
.claro .dijitSliderFocused .dijitSliderLeftBumper{
|
||||
background-position:0 -30px;
|
||||
background-color: @slider-focused-fullbar-background-color;
|
||||
border-color: @focused-border-color;
|
||||
.box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
.claro .dijitSliderFocused .dijitSliderRemainingBarH,
|
||||
.claro .dijitSliderFocused .dijitSliderRightBumper{
|
||||
background-position:0 -9px;
|
||||
background-color: @slider-focused-remainingbar-background-color;
|
||||
border-color: @focused-border-color;
|
||||
.box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
.claro .dijitSliderDisabled .dijitSliderProgressBarH,
|
||||
.claro .dijitSliderDisabled .dijitSliderLeftBumper{
|
||||
@@ -138,17 +131,12 @@
|
||||
}
|
||||
.claro .dijitSlider .dijitSliderProgressBarV,
|
||||
.claro .dijitSlider .dijitSliderBottomBumper{
|
||||
background-image: url("../@{image-form-slider-vertical}");
|
||||
background-repeat:repeat-y;
|
||||
background-position:-36px 0;
|
||||
border-color: @border-color;
|
||||
background-color: @slider-fullbar-background-color;
|
||||
.alpha-white-gradient (left, 1,0px, 0,1px);
|
||||
}
|
||||
.claro .dijitSlider .dijitSliderRemainingBarV,
|
||||
.claro .dijitSlider .dijitSliderTopBumper{
|
||||
background-image: url("../@{image-form-slider-vertical}");
|
||||
background-repeat:repeat-y;
|
||||
background-position:-3px 0;
|
||||
border-color: @border-color;
|
||||
background-color: @slider-remainingbar-background-color;
|
||||
}
|
||||
@@ -160,23 +148,25 @@
|
||||
}
|
||||
.claro .dijitSliderHover .dijitSliderProgressBarV,
|
||||
.claro .dijitSliderHover .dijitSliderBottomBumper{
|
||||
background-position:-36px 0;
|
||||
background-color: @slider-hovered-fullbar-background-color;
|
||||
border-color: @hovered-border-color;
|
||||
}
|
||||
.claro .dijitSliderHover .dijitSliderRemainingBarV,
|
||||
.claro .dijitSliderHover .dijitSliderTopBumper{
|
||||
background-position:0 0;
|
||||
background-color: @slider-hovered-remainingbar-background-color;
|
||||
border-color: @hovered-border-color;
|
||||
}
|
||||
.claro .dijitSliderFocused .dijitSliderProgressBarV,
|
||||
.claro .dijitSliderFocused .dijitSliderBottomBumper{
|
||||
background-position:-56px 0;
|
||||
background-color: @slider-focused-fullbar-background-color;
|
||||
border-color: @focused-border-color;
|
||||
.box-shadow(inset 1px 0px 1px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
.claro .dijitSliderFocused .dijitSliderRemainingBarV,
|
||||
.claro .dijitSliderFocused .dijitSliderTopBumper{
|
||||
background-position:-18px 0;
|
||||
background-color: @slider-focused-remainingbar-background-color;
|
||||
border-color: @focused-border-color;
|
||||
.box-shadow(inset 1px 0px 1px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
.claro .dijitSliderDisabled .dijitSliderProgressBarV,
|
||||
.claro .dijitSliderDisabled .dijitSliderBottomBumper{
|
||||
@@ -352,14 +342,3 @@
|
||||
background-position:-107px 49%;
|
||||
background-color:@disabled-background-color;
|
||||
}
|
||||
|
||||
.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarH,
|
||||
.dj_ie6 .claro .dijitSlider .dijitSliderLeftBumper,
|
||||
.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarH,
|
||||
.dj_ie6 .claro .dijitSlider .dijitSliderRightBumper,
|
||||
.dj_ie6 .claro .dijitSlider .dijitSliderProgressBarV,
|
||||
.dj_ie6 .claro .dijitSlider .dijitSliderTopBumper,
|
||||
.dj_ie6 .claro .dijitSlider .dijitSliderRemainingBarV,
|
||||
.dj_ie6 .claro .dijitSlider .dijitSliderBottomBumper {
|
||||
background-image:none;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 680 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.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 339 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 180 B |
Binary file not shown.
|
Before Width: | Height: | Size: 177 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 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.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 339 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 339 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
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.
|
Before Width: | Height: | Size: 640 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
@@ -50,16 +50,17 @@
|
||||
background-color: transparent;
|
||||
/* pick up color from dijitAccordionInnerContainer */
|
||||
|
||||
background-image: url("../layout/images/accordion.png");
|
||||
background-position: 0 0;
|
||||
background-image: url("../images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
padding: 5px 7px 2px 7px;
|
||||
min-height: 17px;
|
||||
color: #494949;
|
||||
}
|
||||
.dj_ie6 .claro .dijitAccordionTitle {
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitAccordionContainer .dijitAccordionChildWrapper {
|
||||
/* this extends the blue trim styling of the title bar to wrapping around the node.
|
||||
* done by setting margin
|
||||
@@ -83,7 +84,13 @@
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
.claro .dijitAccordionInnerContainerActive .dijitAccordionTitle {
|
||||
background-position: 0 -136px;
|
||||
background-image: url("../images/activeGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
color: #000000;
|
||||
}
|
||||
/* Open (a.k.a. selected) pane */
|
||||
@@ -93,7 +100,13 @@
|
||||
}
|
||||
.claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle {
|
||||
color: #000000;
|
||||
background-position: 0 0;
|
||||
background-image: url("../images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
_background-image: none;
|
||||
/* avoid effect when clicking the title of the open pane */
|
||||
|
||||
}
|
||||
@@ -114,7 +127,7 @@
|
||||
}
|
||||
.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #759dc0 !important;
|
||||
border: 1px solid #759dc0;
|
||||
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25);
|
||||
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25);
|
||||
|
||||
@@ -43,16 +43,12 @@
|
||||
}
|
||||
.claro .dijitAccordionTitle {
|
||||
background-color: transparent; /* pick up color from dijitAccordionInnerContainer */
|
||||
background-image: url("../@{image-layout-accordion}");
|
||||
background-position:0 0;
|
||||
background-repeat:repeat-x;
|
||||
.standard-gradient("../");
|
||||
padding: 5px 7px 2px 7px;
|
||||
min-height:17px;
|
||||
color:@unselected-text-color;
|
||||
}
|
||||
.dj_ie6 .claro .dijitAccordionTitle {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.claro .dijitAccordionContainer .dijitAccordionChildWrapper {
|
||||
/* this extends the blue trim styling of the title bar to wrapping around the node.
|
||||
* done by setting margin
|
||||
@@ -75,7 +71,7 @@
|
||||
.transition-duration(.1s);
|
||||
}
|
||||
.claro .dijitAccordionInnerContainerActive .dijitAccordionTitle {
|
||||
background-position:0 -136px;
|
||||
.active-gradient("../");
|
||||
color:@selected-text-color;
|
||||
}
|
||||
|
||||
@@ -87,7 +83,7 @@
|
||||
}
|
||||
.claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle {
|
||||
color:@selected-text-color;
|
||||
background-position: 0 0; /* avoid effect when clicking the title of the open pane */
|
||||
.standard-gradient("../"); /* avoid effect when clicking the title of the open pane */
|
||||
}
|
||||
|
||||
/* Hovering open or closed pane */
|
||||
@@ -97,6 +93,8 @@
|
||||
color:@hovered-text-color;
|
||||
}
|
||||
|
||||
// TODO: why do we have any hover effect on the selected pane?
|
||||
// Since you can't click it, there shouldn't be a hover effect.
|
||||
.claro .dijitAccordionInnerContainerHover,
|
||||
.claro .dijitAccordionInnerContainerSelectedActive {
|
||||
/* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */
|
||||
@@ -108,6 +106,6 @@
|
||||
.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper,
|
||||
.claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper {
|
||||
background-color:@pane-background-color;
|
||||
border:1px solid @hovered-border-color !important;
|
||||
border:1px solid @hovered-border-color;
|
||||
.box-shadow(inset 0 0 3px rgba(0, 0, 0, .25));
|
||||
}
|
||||
|
||||
@@ -84,26 +84,28 @@ Splitters and gutters:
|
||||
margin: 0;
|
||||
}
|
||||
/* hovered splitter */
|
||||
.claro .dijitSplitterHHover {
|
||||
.claro .dijitSplitterHHover, .claro .dijitSplitterVHover {
|
||||
font-size: 1px;
|
||||
background: url("../layout/images/splitterHorizontalHover.png") no-repeat center top;
|
||||
background-color: #cfe5fa;
|
||||
}
|
||||
.claro .dijitSplitterHHover .dijitSplitterThumb {
|
||||
background: #759dc0 none;
|
||||
.claro .dijitSplitterHHover {
|
||||
background-image: -moz-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);
|
||||
background-image: -webkit-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);
|
||||
background-image: -o-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);
|
||||
background-image: linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);
|
||||
}
|
||||
.claro .dijitSplitterVHover {
|
||||
font-size: 1px;
|
||||
background: url("../layout/images/splitterVerticalHover.png") no-repeat center left;
|
||||
background-image: -moz-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);
|
||||
background-image: -webkit-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);
|
||||
background-image: -o-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);
|
||||
background-image: linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%);
|
||||
}
|
||||
.claro .dijitSplitterVHover .dijitSplitterThumb {
|
||||
.claro .dijitSplitterHHover .dijitSplitterThumb, .claro .dijitSplitterVHover .dijitSplitterThumb {
|
||||
background: #759dc0 none;
|
||||
}
|
||||
.dj_ie6 .dijitSplitterHHover, .dj_ie6 .claro .dijitSplitterVHover {
|
||||
background-color: #cfe5fa;
|
||||
background-image: none;
|
||||
}
|
||||
/* active splitter */
|
||||
.claro .dijitSplitterHActive, .claro .dijitSplitterVActive {
|
||||
font-size: 1px;
|
||||
background-color: #abd6ff;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
@@ -95,34 +95,30 @@ Splitters and gutters:
|
||||
}
|
||||
|
||||
/* hovered splitter */
|
||||
.claro .dijitSplitterHHover {
|
||||
.claro .dijitSplitterHHover,
|
||||
.claro .dijitSplitterVHover {
|
||||
font-size: 1px;
|
||||
background: url("../@{image-layout-splitter-horizontal-hover}") no-repeat center top;
|
||||
background-color: @splitter-hovered-background-color;
|
||||
}
|
||||
|
||||
|
||||
.claro .dijitSplitterHHover .dijitSplitterThumb {
|
||||
background:@hovered-border-color none;
|
||||
.claro .dijitSplitterHHover {
|
||||
.alpha-white-gradient (left, 1,0px, 0,50%, 1,100%);
|
||||
}
|
||||
|
||||
.claro .dijitSplitterVHover {
|
||||
font-size: 1px;
|
||||
background: url("../@{image-layout-splitter-vertical-hover}") no-repeat center left;
|
||||
.alpha-white-gradient (top, 1,0px, 0,50%, 1,100%);
|
||||
}
|
||||
|
||||
.claro .dijitSplitterHHover .dijitSplitterThumb,
|
||||
.claro .dijitSplitterVHover .dijitSplitterThumb {
|
||||
background:@hovered-border-color none;
|
||||
}
|
||||
|
||||
.dj_ie6 .dijitSplitterHHover,
|
||||
.dj_ie6 .claro .dijitSplitterVHover {
|
||||
background-color: @splitter-hovered-background-color;
|
||||
background-image:none;
|
||||
}
|
||||
|
||||
/* active splitter */
|
||||
.claro .dijitSplitterHActive,
|
||||
.claro .dijitSplitterVActive {
|
||||
font-size: 1px;
|
||||
background-color:@splitter-dragged-background-color;
|
||||
background-image: none; // color all the way across, not gradient like in hover mode
|
||||
}
|
||||
|
||||
@@ -17,18 +17,18 @@
|
||||
* .tabStripButtonDisabled - styles for disabled tab strip buttons
|
||||
*
|
||||
* Tab Button:
|
||||
* .dijitTabContainerTop-tabs .dijitTabInnerDiv/.dijitTabContent - styles for top tab button container
|
||||
* .dijitTabContainerBottom-tabs .dijitTabInnerDiv/.dijitTabContent - styles for bottom tab button container
|
||||
* .dijitTabContainerLeft-tabs .dijitTabInnerDiv/.dijitTabContent - styles for left tab button container
|
||||
* .dijitTabContainerRight-tabs .dijitTabInnerDiv/.dijitTabContent - styles for right tab button container
|
||||
* .dijitTabContainerTop-tabs .dijitTab - styles for top tab button container
|
||||
* .dijitTabContainerBottom-tabs .dijitTab - styles for bottom tab button container
|
||||
* .dijitTabContainerLeft-tabs .dijitTab - styles for left tab button container
|
||||
* .dijitTabContainerRight-tabs .dijitTab - styles for right tab button container
|
||||
*
|
||||
* .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent
|
||||
* .dijitTabContainerTop-tabs .dijitTabChecked .dijitTab
|
||||
* - styles for selected status of top tab button
|
||||
* same to Bottom, Left, Right Tabs
|
||||
*
|
||||
* .dijitTabHover .dijitTabInnerDiv - styles when mouse hover on tab buttons
|
||||
* .dijitTabActive .dijitTabInnerDiv - styles when mouse down on tab buttons
|
||||
* .dijitTabChecked .dijitTabInnerDiv - styles when on buttons of selected tab
|
||||
* .dijitTabHover .dijitTab - styles when mouse hover on tab buttons
|
||||
* .dijitTabActive .dijitTab - styles when mouse down on tab buttons
|
||||
* .dijitTabChecked .dijitTab - styles when on buttons of selected tab
|
||||
*
|
||||
* .dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs
|
||||
* .dijitTabCloseButtonHover - styles when mouse hover on close action button
|
||||
@@ -77,7 +77,8 @@
|
||||
|
||||
display: none;
|
||||
}
|
||||
.claro .dijitTabInnerDiv {
|
||||
.claro .dijitTab {
|
||||
border: 1px solid #b5bcc7;
|
||||
background-color: #efefef;
|
||||
-webkit-transition-property: background-color, border;
|
||||
-moz-transition-property: background-color, border;
|
||||
@@ -87,132 +88,104 @@
|
||||
transition-duration: 0.35s;
|
||||
color: #494949;
|
||||
}
|
||||
.claro .dijitTabHover .dijitTabInnerDiv {
|
||||
.claro .dijitTabHover {
|
||||
border-color: #759dc0;
|
||||
background-color: #abd6ff;
|
||||
-webkit-transition-duration: 0.25s;
|
||||
-moz-transition-duration: 0.25s;
|
||||
transition-duration: 0.25s;
|
||||
color: #000000;
|
||||
}
|
||||
.claro .dijitTabActive .dijitTabInnerDiv {
|
||||
.claro .dijitTabActive {
|
||||
border-color: #759dc0;
|
||||
background-color: #7dbdfa;
|
||||
color: #000000;
|
||||
-webkit-transition-duration: 0.1s;
|
||||
-moz-transition-duration: 0.1s;
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
.claro .dijitTabChecked .dijitTabInnerDiv {
|
||||
.claro .dijitTabChecked {
|
||||
border-color: #b5bcc7;
|
||||
background-color: #cfe5fa;
|
||||
color: #000000;
|
||||
}
|
||||
.claro .dijitTabContent {
|
||||
border: 1px solid #b5bcc7;
|
||||
.claro .dijitTabDisabled {
|
||||
background-color: #d3d3d3;
|
||||
}
|
||||
.claro .dijitTabHover .dijitTabContent {
|
||||
border-color: #759dc0;
|
||||
}
|
||||
.claro .dijitTabActive .dijitTabContent {
|
||||
border-color: #759dc0;
|
||||
}
|
||||
.claro .dijitTabChecked .dijitTabContent {
|
||||
color: #000000;
|
||||
border-color: #b5bcc7;
|
||||
}
|
||||
.claro .tabStripButton .dijitTabInnerDiv {
|
||||
.claro .tabStripButton {
|
||||
background-color: transparent;
|
||||
}
|
||||
.claro .tabStripButton .dijitTabContent {
|
||||
border: none;
|
||||
}
|
||||
/*** end common ***/
|
||||
/*************** top tab ***************/
|
||||
.claro .dijitTabContainerTop-tabs .dijitTab {
|
||||
/* unselected (and not hovered/pressed) tab */
|
||||
|
||||
top: 1px;
|
||||
/* used for overlap */
|
||||
|
||||
margin-right: 1px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab {
|
||||
top: 3px;
|
||||
}
|
||||
/* for top tab padding. change height when status changes */
|
||||
.claro .dijitTabContainerTop-tabs .dijitTabContent {
|
||||
padding: 3px 6px;
|
||||
border-bottom-width: 0;
|
||||
background-image: url("../layout/images/tabTop.png");
|
||||
background-position: 0 0;
|
||||
background-repeat: repeat-x;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
|
||||
padding-bottom: 4px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
/* normal status */
|
||||
.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv {
|
||||
background-image: url("../layout/images/tabTop.png");
|
||||
background-position: 0 -248px;
|
||||
background-position: bottom;
|
||||
background-image: url("images/tabTopUnselected.png");
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
|
||||
-webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04);
|
||||
-moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04);
|
||||
box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
/* checked status */
|
||||
.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv {
|
||||
background-image: none;
|
||||
.claro .dijitTabContainerTop-tabs .dijitTabChecked {
|
||||
/* selected tab */
|
||||
|
||||
padding-bottom: 4px;
|
||||
padding-top: 9px;
|
||||
background-image: url("images/tabTopSelected.png");
|
||||
background-image: -moz-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px);
|
||||
background-image: -webkit-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px);
|
||||
background-image: -o-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px);
|
||||
background-image: linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px);
|
||||
-webkit-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
|
||||
background-position: 0 -102px;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
/** end top tab **/
|
||||
/*************** bottom tab ***************/
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTab {
|
||||
/* unselected (and not hovered/pressed) tab */
|
||||
|
||||
top: -1px;
|
||||
/* used for overlap */
|
||||
|
||||
margin-right: 1px;
|
||||
}
|
||||
/* calculate the position and size */
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTabContent {
|
||||
padding: 3px 6px;
|
||||
border-top-width: 0;
|
||||
background-image: url("../layout/images/tabBottom.png");
|
||||
background-position: 0 -249px;
|
||||
background-repeat: repeat-x;
|
||||
background-position: bottom;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTab {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
/* normal status */
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
|
||||
background-image: url("../layout/images/tabBottom.png");
|
||||
background-position: top;
|
||||
background-image: url("images/tabBottomUnselected.png");
|
||||
background-repeat: repeat-x;
|
||||
background-position: bottom;
|
||||
background-image: -moz-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
|
||||
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
/* checked status */
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent {
|
||||
padding-bottom: 7px;
|
||||
padding-top: 4px;
|
||||
background-position: 0 -119px;
|
||||
}
|
||||
/* selected tab */
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTabChecked {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
|
||||
background-image: none;
|
||||
padding-bottom: 9px;
|
||||
padding-top: 4px;
|
||||
background-image: url("images/tabBottomSelected.png");
|
||||
background-image: -moz-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px);
|
||||
background-image: -webkit-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px);
|
||||
background-image: -o-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px);
|
||||
background-image: linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px);
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
@@ -220,33 +193,29 @@
|
||||
/** end bottom tab **/
|
||||
/*************** left tab ***************/
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTab {
|
||||
border-right-width: 0;
|
||||
/* unselected (and not hovered/pressed) tab */
|
||||
|
||||
left: 1px;
|
||||
/* used for overlap */
|
||||
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
/* normal status */
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
|
||||
background-image: url("../layout/images/tabLeft.png");
|
||||
background-position: -347px -340px;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTabContent {
|
||||
padding: 3px 8px 4px 4px;
|
||||
background-image: url("../layout/images/tabLeft.png");
|
||||
background-image: url("images/tabLeftUnselected.png");
|
||||
background-repeat: repeat-y;
|
||||
background-position: 0 0;
|
||||
background-image: -moz-linear-gradient(left, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(left, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(left, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(left, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
/* checked status */
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent {
|
||||
/* selected tab */
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTabChecked {
|
||||
border-right-width: 0;
|
||||
padding-right: 9px;
|
||||
border-right: none;
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv {
|
||||
background-position: 0 -179px;
|
||||
background-repeat: repeat-y;
|
||||
background-image: url("images/tabLeftSelected.png");
|
||||
background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px);
|
||||
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px);
|
||||
background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px);
|
||||
background-image: linear-gradient(left, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px);
|
||||
-webkit-box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05);
|
||||
@@ -254,51 +223,50 @@
|
||||
/** end left tab **/
|
||||
/*************** right tab ***************/
|
||||
.claro .dijitTabContainerRight-tabs .dijitTab {
|
||||
border-left-width: 0;
|
||||
/* unselected (and not hovered/pressed) tab */
|
||||
|
||||
left: -1px;
|
||||
/* used for overlap */
|
||||
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
/* normal status */
|
||||
.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv {
|
||||
background-image: url("../layout/images/tabRight.png");
|
||||
background-repeat: repeat-y;
|
||||
background-position: -1px -347px;
|
||||
}
|
||||
.claro .dijitTabContainerRight-tabs .dijitTabContent {
|
||||
padding: 3px 8px 4px 4px;
|
||||
background-image: url("../layout/images/tabRight.png");
|
||||
background-position: right top;
|
||||
background-image: url("images/tabRightUnselected.png");
|
||||
background-repeat: repeat-y;
|
||||
background-position: right;
|
||||
background-image: -moz-linear-gradient(right, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(right, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(right, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(right, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
/* checked status */
|
||||
.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent {
|
||||
.claro .dijitTabContainerRight-tabs .dijitTabChecked {
|
||||
/* selected tab */
|
||||
|
||||
padding-left: 5px;
|
||||
border-left: none;
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv {
|
||||
background-position: -348px -179px;
|
||||
border-left-width: 0;
|
||||
background-image: url("images/tabRightSelected.png");
|
||||
background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px);
|
||||
background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px);
|
||||
background-image: -o-linear-gradient(right, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px);
|
||||
background-image: linear-gradient(right, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px);
|
||||
-webkit-box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07);
|
||||
-moz-box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07);
|
||||
box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
/** end right tab **/
|
||||
/** round corner **/
|
||||
.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, .claro .dijitTabContainerTop-tabs .dijitTabContent {
|
||||
.claro .dijitTabContainerTop-tabs .dijitTab {
|
||||
-moz-border-radius: 2px 2px 0 0;
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, .claro .dijitTabContainerBottom-tabs .dijitTabContent {
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTab {
|
||||
-moz-border-radius: 0 0 2px 2px;
|
||||
border-radius: 0 0 2px 2px;
|
||||
}
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, .claro .dijitTabContainerLeft-tabs .dijitTabContent {
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTab {
|
||||
-moz-border-radius: 2px 0 0 2px;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, .claro .dijitTabContainerRight-tabs .dijitTabContent {
|
||||
.claro .dijitTabContainerRight-tabs .dijitTab {
|
||||
-moz-border-radius: 0 2px 2px 0;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
@@ -310,15 +278,18 @@
|
||||
.claro .dijitTabListContainer-top .tabStripButton {
|
||||
padding: 4px 3px;
|
||||
margin-top: 7px;
|
||||
background-image: url("../layout/images/tabTop.png");
|
||||
background-position: 0 0;
|
||||
background-image: -moz-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
.claro .dijitTabListContainer-bottom .tabStripButton {
|
||||
padding: 5px 3px;
|
||||
margin-bottom: 4px;
|
||||
background-image: url("../layout/images/tabTop.png");
|
||||
background-position: 0 -248px;
|
||||
background-position: bottom;
|
||||
padding: 4px 3px;
|
||||
margin-bottom: 7px;
|
||||
background-image: -moz-linear-gradient(bottom, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -webkit-linear-gradient(bottom, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: -o-linear-gradient(bottom, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(bottom, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
.claro .tabStripButtonHover {
|
||||
background-color: #abd6ff;
|
||||
@@ -361,10 +332,9 @@
|
||||
}
|
||||
.claro .dijitTabContainerNested .dijitTabContainerTop-tabs {
|
||||
border-bottom: solid 1px #b5bcc7;
|
||||
padding: 1px 2px 4px;
|
||||
margin-top: -2px;
|
||||
padding: 2px 2px 4px;
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTabContent {
|
||||
.claro .dijitTabContainerTabListNested .dijitTab {
|
||||
background: rgba(255, 255, 255, 0) none repeat scroll 0 0;
|
||||
border: none;
|
||||
padding: 4px;
|
||||
@@ -378,11 +348,7 @@
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv {
|
||||
/* 4 element selector to override box-shadow setting from above rule:
|
||||
* .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { ... }
|
||||
*/
|
||||
|
||||
.claro .dijitTabContainerTabListNested .dijitTab {
|
||||
background: none;
|
||||
border: none;
|
||||
top: 0;
|
||||
@@ -392,7 +358,7 @@
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent {
|
||||
.claro .dijitTabContainerTabListNested .dijitTabHover {
|
||||
background-color: #e5f2fe;
|
||||
border: solid 1px #cfe5fa;
|
||||
padding: 3px;
|
||||
@@ -403,18 +369,21 @@
|
||||
.claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
|
||||
text-decoration: none;
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent {
|
||||
.claro .dijitTabContainerTabListNested .dijitTabActive {
|
||||
border: solid 1px #759dc0;
|
||||
padding: 3px;
|
||||
background: #abd6ff url("../layout/images/tabNested.png") repeat-x;
|
||||
background: #abd6ff url("images/tabNested.png") repeat-x;
|
||||
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.61) 0%, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.61) 100%);
|
||||
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.61) 0%, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.61) 100%);
|
||||
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.61) 0%, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.61) 100%);
|
||||
background-image: linear-gradient(rgba(255, 255, 255, 0.61) 0%, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.61) 100%);
|
||||
-webkit-transition-duration: 0.1s;
|
||||
-moz-transition-duration: 0.1s;
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent {
|
||||
.claro .dijitTabContainerTabListNested .dijitTabChecked {
|
||||
padding: 3px;
|
||||
border: solid 1px #759dc0;
|
||||
background-position: 0 105px;
|
||||
background-color: #cfe5fa;
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
|
||||
@@ -426,9 +395,6 @@
|
||||
/* prevent double border */
|
||||
|
||||
}
|
||||
.dj_ie6 .claro .dijitTabContent,
|
||||
.dj_ie6 .claro .dijitTabInnerDiv,
|
||||
.dj_ie6 .dijitTabListContainer-top .tabStripButton,
|
||||
.dj_ie6 .dijitTabListContainer-bottom .tabStripButton {
|
||||
background-image: none;
|
||||
.claro .dijitTab, .claro .tabStripButton {
|
||||
_background-image: none !important;
|
||||
}
|
||||
|
||||
@@ -17,18 +17,18 @@
|
||||
* .tabStripButtonDisabled - styles for disabled tab strip buttons
|
||||
*
|
||||
* Tab Button:
|
||||
* .dijitTabContainerTop-tabs .dijitTabInnerDiv/.dijitTabContent - styles for top tab button container
|
||||
* .dijitTabContainerBottom-tabs .dijitTabInnerDiv/.dijitTabContent - styles for bottom tab button container
|
||||
* .dijitTabContainerLeft-tabs .dijitTabInnerDiv/.dijitTabContent - styles for left tab button container
|
||||
* .dijitTabContainerRight-tabs .dijitTabInnerDiv/.dijitTabContent - styles for right tab button container
|
||||
* .dijitTabContainerTop-tabs .dijitTab - styles for top tab button container
|
||||
* .dijitTabContainerBottom-tabs .dijitTab - styles for bottom tab button container
|
||||
* .dijitTabContainerLeft-tabs .dijitTab - styles for left tab button container
|
||||
* .dijitTabContainerRight-tabs .dijitTab - styles for right tab button container
|
||||
*
|
||||
* .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent
|
||||
* .dijitTabContainerTop-tabs .dijitTabChecked .dijitTab
|
||||
* - styles for selected status of top tab button
|
||||
* same to Bottom, Left, Right Tabs
|
||||
*
|
||||
* .dijitTabHover .dijitTabInnerDiv - styles when mouse hover on tab buttons
|
||||
* .dijitTabActive .dijitTabInnerDiv - styles when mouse down on tab buttons
|
||||
* .dijitTabChecked .dijitTabInnerDiv - styles when on buttons of selected tab
|
||||
* .dijitTabHover .dijitTab - styles when mouse hover on tab buttons
|
||||
* .dijitTabActive .dijitTab - styles when mouse down on tab buttons
|
||||
* .dijitTabChecked .dijitTab - styles when on buttons of selected tab
|
||||
*
|
||||
* .dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs
|
||||
* .dijitTabCloseButtonHover - styles when mouse hover on close action button
|
||||
@@ -49,6 +49,13 @@
|
||||
|
||||
@import "../variables";
|
||||
|
||||
.unselected-tab-gradient (@direction) {
|
||||
// white line, dark line, then fade from light to dark
|
||||
.alpha-white-gradient (@direction, 1,0px, 1,1px, 0.1,2px, 0.6,7px, 0,100%);
|
||||
}
|
||||
.topBottom-selected-tab-gradient (@direction) {
|
||||
.alpha-white-gradient (@direction, 1,0px, 1,1px, 0,2px, 1,7px); // white line, blue line, remainder white
|
||||
}
|
||||
/*** some common features ***/
|
||||
.claro .dijitTabPaneWrapper {
|
||||
background:@pane-background-color;
|
||||
@@ -78,45 +85,37 @@
|
||||
/* set the spacer invisible. note that height:0 doesn't work on IE/quirks, it's still 10px. */
|
||||
display: none;
|
||||
}
|
||||
.claro .dijitTabInnerDiv {
|
||||
.claro .dijitTab {
|
||||
border: 1px solid @border-color;
|
||||
background-color:@unselected-background-color;
|
||||
.transition-property(background-color, border);
|
||||
.transition-duration(.35s);
|
||||
color:@unselected-text-color;
|
||||
}
|
||||
.claro .dijitTabHover .dijitTabInnerDiv {
|
||||
.claro .dijitTabHover {
|
||||
border-color: @hovered-border-color;
|
||||
background-color:@hovered-background-color;
|
||||
.transition-duration(.25s);
|
||||
color:@hovered-text-color;
|
||||
}
|
||||
.claro .dijitTabActive .dijitTabInnerDiv {
|
||||
.claro .dijitTabActive {
|
||||
border-color: @pressed-border-color;
|
||||
background-color:@pressed-background-color;
|
||||
color:@selected-text-color;
|
||||
.transition-duration(.1s);
|
||||
}
|
||||
.claro .dijitTabChecked .dijitTabInnerDiv {
|
||||
background-color:@selected-background-color;
|
||||
color:@selected-text-color;
|
||||
}
|
||||
|
||||
.claro .dijitTabContent {
|
||||
border: 1px solid @border-color;
|
||||
}
|
||||
.claro .dijitTabHover .dijitTabContent {
|
||||
border-color: @hovered-border-color;
|
||||
}
|
||||
.claro .dijitTabActive .dijitTabContent {
|
||||
border-color: @pressed-border-color;
|
||||
}
|
||||
.claro .dijitTabChecked .dijitTabContent {
|
||||
color:@selected-text-color; // todo: redundant with .claro .dijitTabChecked .dijitTabInnerDiv above?
|
||||
.claro .dijitTabChecked {
|
||||
// selected tab
|
||||
border-color: @border-color; // don't use @selected-border-color because need to match border of TabContainer
|
||||
background-color: @selected-background-color;
|
||||
color: @selected-text-color;
|
||||
}
|
||||
.claro .dijitTabDisabled {
|
||||
background-color: @tab-disabled-background-color;
|
||||
}
|
||||
|
||||
.claro .tabStripButton .dijitTabInnerDiv {
|
||||
.claro .tabStripButton {
|
||||
background-color: transparent;
|
||||
}
|
||||
.claro .tabStripButton .dijitTabContent {
|
||||
border: none;
|
||||
}
|
||||
/*** end common ***/
|
||||
@@ -124,169 +123,133 @@
|
||||
|
||||
/*************** top tab ***************/
|
||||
.claro .dijitTabContainerTop-tabs .dijitTab {
|
||||
/* unselected (and not hovered/pressed) tab */
|
||||
top: 1px; /* used for overlap */
|
||||
margin-right: 1px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab {
|
||||
top: 3px;
|
||||
}
|
||||
/* for top tab padding. change height when status changes */
|
||||
.claro .dijitTabContainerTop-tabs .dijitTabContent {
|
||||
padding:3px 6px;
|
||||
border-bottom-width: 0;
|
||||
background-image:url("../@{image-layout-tab-top}");
|
||||
background-position:0 0;
|
||||
background-repeat:repeat-x;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
|
||||
// gradient (CSS gradient, with backup image for IE6-9)
|
||||
background-image: url("images/tabTopUnselected.png");
|
||||
background-repeat: repeat-x;
|
||||
.unselected-tab-gradient(top);
|
||||
|
||||
.box-shadow(0 -1px 1px rgba(0, 0, 0, 0.04));
|
||||
}
|
||||
.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
|
||||
|
||||
.claro .dijitTabContainerTop-tabs .dijitTabChecked {
|
||||
/* selected tab */
|
||||
padding-bottom: 4px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
padding-top: 9px;
|
||||
|
||||
/* normal status */
|
||||
.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv {
|
||||
background-image:url("../@{image-layout-tab-top}");
|
||||
background-position:0 -248px;
|
||||
background-position:bottom;
|
||||
background-repeat:repeat-x;
|
||||
.box-shadow(0 -1px 1px rgba(0, 0, 0, 0.04));
|
||||
}
|
||||
// gradient (CSS gradient, with backup image for IE6-9)
|
||||
background-image: url("images/tabTopSelected.png");
|
||||
.topBottom-selected-tab-gradient (top);
|
||||
|
||||
/* checked status */
|
||||
.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv {
|
||||
background-image:none;
|
||||
.box-shadow(0 -1px 2px rgba(0, 0, 0, 0.05));
|
||||
}
|
||||
.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent {
|
||||
background-position:0 -102px;
|
||||
background-repeat:repeat-x;
|
||||
}
|
||||
|
||||
/** end top tab **/
|
||||
|
||||
|
||||
/*************** bottom tab ***************/
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTab {
|
||||
/* unselected (and not hovered/pressed) tab */
|
||||
top: -1px; /* used for overlap */
|
||||
margin-right: 1px;
|
||||
}
|
||||
/* calculate the position and size */
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTabContent {
|
||||
padding:3px 6px;
|
||||
border-top-width: 0;
|
||||
background-image: url("../@{image-layout-tab-bottom}");
|
||||
background-position:0 -249px;
|
||||
background-repeat: repeat-x;
|
||||
background-position:bottom;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTab {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
/* normal status */
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
|
||||
background-image: url("../@{image-layout-tab-bottom}");
|
||||
background-position: top;
|
||||
|
||||
// gradient (CSS gradient, with backup image for IE6-9)
|
||||
background-image: url("images/tabBottomUnselected.png");
|
||||
background-repeat: repeat-x;
|
||||
background-position: bottom;
|
||||
.unselected-tab-gradient(bottom);
|
||||
|
||||
.box-shadow(0 1px 1px rgba(0, 0, 0, 0.04));
|
||||
|
||||
}
|
||||
|
||||
/* checked status */
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent {
|
||||
padding-bottom: 7px;
|
||||
padding-top: 4px;
|
||||
background-position:0 -119px;
|
||||
}
|
||||
/* selected tab */
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTabChecked {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
|
||||
background-image:none;
|
||||
padding-bottom: 9px;
|
||||
padding-top: 4px;
|
||||
|
||||
// gradient (CSS gradient, with backup image for IE6-9)
|
||||
background-image: url("images/tabBottomSelected.png");
|
||||
.topBottom-selected-tab-gradient (bottom);
|
||||
|
||||
.box-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
|
||||
}
|
||||
/** end bottom tab **/
|
||||
|
||||
/*************** left tab ***************/
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTab {
|
||||
border-right-width: 0;
|
||||
/* unselected (and not hovered/pressed) tab */
|
||||
left: 1px; /* used for overlap */
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
/* normal status */
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
|
||||
background-image: url("../@{image-layout-tab-left}");
|
||||
background-position: -347px -340px;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTabContent {
|
||||
padding:3px 8px 4px 4px;
|
||||
background-image: url("../@{image-layout-tab-left}");
|
||||
|
||||
// gradient (CSS gradient, with backup image for IE6-9)
|
||||
background-image: url("images/tabLeftUnselected.png");
|
||||
background-repeat: repeat-y;
|
||||
background-position:0 0;
|
||||
.unselected-tab-gradient(left);
|
||||
}
|
||||
/* checked status */
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent {
|
||||
|
||||
/* selected tab */
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTabChecked {
|
||||
border-right-width: 0;
|
||||
padding-right: 9px;
|
||||
border-right: none;
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv {
|
||||
background-position:0 -179px;
|
||||
background-repeat:repeat-y;
|
||||
|
||||
// gradient (CSS gradient, with backup image for IE6-9)
|
||||
background-image: url("images/tabLeftSelected.png");
|
||||
.alpha-white-gradient (left, 0.5,0px, 1,30px); // 1/2 inch blue gradient, remainder white
|
||||
|
||||
.box-shadow(-1px 0 2px rgba(0, 0, 0, .05));
|
||||
}
|
||||
/** end left tab **/
|
||||
|
||||
/*************** right tab ***************/
|
||||
.claro .dijitTabContainerRight-tabs .dijitTab {
|
||||
border-left-width: 0;
|
||||
/* unselected (and not hovered/pressed) tab */
|
||||
left: -1px; /* used for overlap */
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
/* normal status */
|
||||
.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv {
|
||||
background-image: url("../@{image-layout-tab-right}");
|
||||
background-repeat: repeat-y;
|
||||
background-position: -1px -347px;
|
||||
}
|
||||
.claro .dijitTabContainerRight-tabs .dijitTabContent {
|
||||
padding:3px 8px 4px 4px;
|
||||
background-image: url("../@{image-layout-tab-right}");
|
||||
background-position:right top;
|
||||
|
||||
// gradient (CSS gradient, with backup image for IE6-9)
|
||||
background-image: url("images/tabRightUnselected.png");
|
||||
background-repeat: repeat-y;
|
||||
background-position: right;
|
||||
.unselected-tab-gradient(right);
|
||||
}
|
||||
/* checked status */
|
||||
.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent {
|
||||
.claro .dijitTabContainerRight-tabs .dijitTabChecked {
|
||||
/* selected tab */
|
||||
padding-left: 5px;
|
||||
border-left: none;
|
||||
background-image: none;
|
||||
}
|
||||
.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv {
|
||||
background-position:-348px -179px;
|
||||
border-left-width: 0;
|
||||
|
||||
// gradient (CSS gradient, with backup image for IE6-9)
|
||||
background-image: url("images/tabRightSelected.png");
|
||||
.alpha-white-gradient (right, 0.5,0px, 1,30px); // 1/2 inch blue gradient, remainder white
|
||||
|
||||
.box-shadow(1px 0 2px rgba(0, 0, 0, 0.07));
|
||||
}
|
||||
/** end right tab **/
|
||||
|
||||
/** round corner **/
|
||||
.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv,
|
||||
.claro .dijitTabContainerTop-tabs .dijitTabContent {
|
||||
.claro .dijitTabContainerTop-tabs .dijitTab {
|
||||
.border-radius(2px 2px 0 0);
|
||||
}
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv,
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTabContent{
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTab {
|
||||
.border-radius(0 0 2px 2px);
|
||||
}
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv,
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTabContent{
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTab {
|
||||
.border-radius(2px 0 0 2px);
|
||||
}
|
||||
|
||||
.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv,
|
||||
.claro .dijitTabContainerRight-tabs .dijitTabContent{
|
||||
.claro .dijitTabContainerRight-tabs .dijitTab {
|
||||
.border-radius(0 2px 2px 0);
|
||||
}
|
||||
|
||||
@@ -298,15 +261,12 @@
|
||||
.claro .dijitTabListContainer-top .tabStripButton {
|
||||
padding: 4px 3px;
|
||||
margin-top:7px;
|
||||
background-image: url("../@{image-layout-tab-top}");
|
||||
background-position:0 0;
|
||||
.alpha-white-gradient (top, 1,0px, 0.1,1px, 0.6,6px, 0,100%); // to match unselected tab, but had to tweak numbers
|
||||
}
|
||||
.claro .dijitTabListContainer-bottom .tabStripButton {
|
||||
padding:5px 3px;
|
||||
margin-bottom:4px;
|
||||
background-image: url("../@{image-layout-tab-top}");
|
||||
background-position:0 -248px;
|
||||
background-position:bottom;
|
||||
padding:4px 3px;
|
||||
margin-bottom:7px;
|
||||
.alpha-white-gradient (bottom, 1,0px, 0.1,1px, 0.6,6px, 0,100%); // to match unselected tab, but had to tweak numbers
|
||||
}
|
||||
.claro .tabStripButtonHover {
|
||||
background-color:@hovered-background-color;
|
||||
@@ -349,10 +309,9 @@
|
||||
}
|
||||
.claro .dijitTabContainerNested .dijitTabContainerTop-tabs {
|
||||
border-bottom:solid 1px @border-color;
|
||||
padding:1px 2px 4px;
|
||||
margin-top:-2px;
|
||||
padding:2px 2px 4px;
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTabContent {
|
||||
.claro .dijitTabContainerTabListNested .dijitTab {
|
||||
background:rgba(255, 255, 255, 0) none repeat scroll 0 0;
|
||||
border: none;
|
||||
padding: 4px;
|
||||
@@ -361,34 +320,35 @@
|
||||
.transition-duration(.3s);
|
||||
.border-radius(2px);
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv {
|
||||
/* 4 element selector to override box-shadow setting from above rule:
|
||||
* .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { ... }
|
||||
*/
|
||||
.claro .dijitTabContainerTabListNested .dijitTab {
|
||||
background: none;
|
||||
border: none;
|
||||
top: 0;/* to override top: 1px/-1px for normal tabs */
|
||||
.box-shadow(none);
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent {
|
||||
.claro .dijitTabContainerTabListNested .dijitTabHover {
|
||||
background-color: @nestedtab-hovered-background-color;
|
||||
border:solid 1px @nestedtab-hovered-border-color;
|
||||
padding: 3px;
|
||||
padding: 3px; // 4px above padding - 1px compensation for border
|
||||
.transition-duration(.2s);
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
|
||||
text-decoration: none;
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent {
|
||||
.claro .dijitTabContainerTabListNested .dijitTabActive {
|
||||
border:solid 1px @nestedtab-selected-border-color;
|
||||
padding: 3px;
|
||||
background: @nestedtab-selected-background-color url("../@{image-layout-tab-nested}") repeat-x;
|
||||
|
||||
// CSS gradient with fallback to image for IE
|
||||
// this is in a weird place, only for active state; mailed Jason about it
|
||||
background: @nestedtab-selected-background-color url("images/tabNested.png") repeat-x;
|
||||
.alpha-white-gradient (0.61,0%, 0,17%, 0,83%, 0.61,100%);
|
||||
|
||||
.transition-duration(.1s);
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent {
|
||||
.claro .dijitTabContainerTabListNested .dijitTabChecked {
|
||||
padding: 3px;
|
||||
border:solid 1px @selected-border-color;
|
||||
background-position: 0 105px;
|
||||
background-color:@selected-background-color;
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
|
||||
@@ -399,10 +359,8 @@
|
||||
border: none;/* prevent double border */
|
||||
}
|
||||
|
||||
|
||||
.dj_ie6 .claro .dijitTabContent,
|
||||
.dj_ie6 .claro .dijitTabInnerDiv,
|
||||
.dj_ie6 .dijitTabListContainer-top .tabStripButton,
|
||||
.dj_ie6 .dijitTabListContainer-bottom .tabStripButton{
|
||||
background-image: none;
|
||||
.claro .dijitTab,
|
||||
.claro .tabStripButton {
|
||||
// IE6 can't handle background-image and background-color on same node
|
||||
_background-image: none !important;
|
||||
}
|
||||
|
||||
@@ -2,66 +2,3 @@
|
||||
margin-right: 0;
|
||||
margin-left: 1px;
|
||||
}
|
||||
.claro .dijitTabRtl {
|
||||
-moz-box-orient: horizontal;
|
||||
text-align: right;
|
||||
}
|
||||
.dj_ie7 .claro .dijitTabRtl .dijitTabContent {
|
||||
display: block;
|
||||
left: 0;
|
||||
}
|
||||
.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl, .dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl {
|
||||
top: 1px;
|
||||
}
|
||||
.dj_ie7 .claro .tabStripButtonRtl .dijitButtonContents,
|
||||
.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents,
|
||||
.dj_ie6 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv,
|
||||
.dj_ie6 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv,
|
||||
.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv,
|
||||
.dj_ie7 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv,
|
||||
.dj_iequirks .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv,
|
||||
.dj_iequirks .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv {
|
||||
float: left;
|
||||
}
|
||||
.dj_ie6 .claro .dijitTabRtl .tabLabel,
|
||||
.dj_ie6 .claro .dijitTabContainerRight-tabs .dijitTabRtl,
|
||||
.dj_ie6 .claro .dijitTabContainerLeft-tabs .dijitTabRtl,
|
||||
.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtl .dijitTabInnerDiv,
|
||||
.dj_ie7 .claro .dijitTabContainerLeft-tabs .dijitTabRtl .dijitTabInnerDiv {
|
||||
/*Make the .tablabel have width in ie6 with haslayout property, fix Close icon position bug*/
|
||||
|
||||
zoom: 1;
|
||||
}
|
||||
.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton, .dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton, .dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, .dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs {
|
||||
width: 1%;
|
||||
}
|
||||
.dj_ie6 .dijitTabContainerTopStrip, .dj_ie6 .dijitTabContainerBottomStrip {
|
||||
position: absolute;
|
||||
}
|
||||
.dj_iequirks .claro .dijitTabContainerTopRtl .dijitTabContainerTopStrip {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtlChecked .dijitTabInnerDiv {
|
||||
background-position: -341px -179px;
|
||||
}
|
||||
.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, .dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon {
|
||||
position: relative;
|
||||
}
|
||||
.dj_ie6-rtl .claro .dijitTabContainerTop-tabs {
|
||||
/* this strange rule prevents IE6 bug in themeTester.html?dir=rtl upon closing
|
||||
* "Closable" tab, where the other tabs disappear
|
||||
*/
|
||||
|
||||
padding-left: 3px;
|
||||
}
|
||||
.dj_iequirks-rtl .claro .dijitTabListWrapper {
|
||||
/* this strange rule prevents IE6 bug in themeTesterQuirk.html?dir=rtl upon closing
|
||||
* "Closable" tab, where the other tabs disappear
|
||||
*/
|
||||
|
||||
border-left: 1px solid #ffffff;
|
||||
border-right: 1px solid #ffffff;
|
||||
}
|
||||
|
||||
@@ -5,77 +5,3 @@
|
||||
margin-right: 0;
|
||||
margin-left: 1px;
|
||||
}
|
||||
.claro .dijitTabRtl {
|
||||
-moz-box-orient:horizontal;
|
||||
text-align: right;
|
||||
}
|
||||
.dj_ie7 .claro .dijitTabRtl .dijitTabContent {
|
||||
display: block;
|
||||
left: 0;
|
||||
}
|
||||
.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl,
|
||||
.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl {
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
// Note that .tabStripButtonRtl .dijitButtonContents needed for IE8 quirks but breaks IE6 quirks
|
||||
.dj_ie7 .claro .tabStripButtonRtl .dijitButtonContents,
|
||||
.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents,
|
||||
.dj_ie6 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv,
|
||||
.dj_ie6 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv,
|
||||
.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv,
|
||||
.dj_ie7 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv,
|
||||
.dj_iequirks .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv,
|
||||
.dj_iequirks .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv {
|
||||
float:left;
|
||||
}
|
||||
.dj_ie6 .claro .dijitTabRtl .tabLabel,
|
||||
.dj_ie6 .claro .dijitTabContainerRight-tabs .dijitTabRtl,
|
||||
.dj_ie6 .claro .dijitTabContainerLeft-tabs .dijitTabRtl,
|
||||
.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtl .dijitTabInnerDiv,
|
||||
.dj_ie7 .claro .dijitTabContainerLeft-tabs .dijitTabRtl .dijitTabInnerDiv {
|
||||
/*Make the .tablabel have width in ie6 with haslayout property, fix Close icon position bug*/
|
||||
zoom:1;
|
||||
}
|
||||
.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton,
|
||||
.dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton,
|
||||
.dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton {
|
||||
margin-right:5px;
|
||||
}
|
||||
|
||||
.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs,
|
||||
.dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs {
|
||||
width:1%;
|
||||
}
|
||||
|
||||
.dj_ie6 .dijitTabContainerTopStrip,
|
||||
.dj_ie6 .dijitTabContainerBottomStrip {
|
||||
position:absolute;
|
||||
}
|
||||
.dj_iequirks .claro .dijitTabContainerTopRtl .dijitTabContainerTopStrip {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtlChecked .dijitTabInnerDiv {
|
||||
background-position:-341px -179px;
|
||||
}
|
||||
|
||||
.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon,
|
||||
.dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.dj_ie6-rtl .claro .dijitTabContainerTop-tabs {
|
||||
/* this strange rule prevents IE6 bug in themeTester.html?dir=rtl upon closing
|
||||
* "Closable" tab, where the other tabs disappear
|
||||
*/
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
.dj_iequirks-rtl .claro .dijitTabListWrapper {
|
||||
/* this strange rule prevents IE6 bug in themeTesterQuirk.html?dir=rtl upon closing
|
||||
* "Closable" tab, where the other tabs disappear
|
||||
*/
|
||||
border-left: 1px solid @pane-background-color;
|
||||
border-right: 1px solid @pane-background-color;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 640 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 718 B |
Binary file not shown.
|
After Width: | Height: | Size: 118 B |
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" ?>
|
||||
<!--
|
||||
Source file for tabBottomSelected.png, which is used by IE7-9 for selected tabs.
|
||||
Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
|
||||
|
||||
Output should match CSS gradient from .topBottom-selected-tab-gradient() from TabContainer.less.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="250px" viewBox="0 0 1 250" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="1" height="242" fill="white"/>
|
||||
<rect x="0" y="242" width="1" height="6" fill="url(#gradient)"/>
|
||||
<rect x="0" y="248" width="1" height="2" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 885 B |
Binary file not shown.
|
After Width: | Height: | Size: 110 B |
@@ -0,0 +1,19 @@
|
||||
<?xml version="1.0" ?>
|
||||
<!--
|
||||
Source file for tabBottomUnselected.png, which is used by IE7-9 for the selected tabs.
|
||||
Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
|
||||
|
||||
Output should match CSS gradient from TabContainer.less.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="16px" viewBox="0 0 1 16" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="100%" x2="0%" y2="0%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="6%" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="13%" stop-color="#ffffff" stop-opacity="0.2"/>
|
||||
<stop offset="43%" stop-color="#ffffff" stop-opacity="0.6"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="1" height="16" fill="url(#gradient)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 923 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 213 B |
@@ -0,0 +1,17 @@
|
||||
<?xml version="1.0" ?>
|
||||
<!--
|
||||
Source file for tabLeftSelected.png, which is used by IE7-9 for selected tabs.
|
||||
Compile to png with batik, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
|
||||
|
||||
Output should match CSS gradient from TabContainer.less.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1000px" height="1px" viewBox="0 0 1000 1" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="30" height="1" fill="url(#gradient)"/>
|
||||
<rect x="30" y="0" width="970" height="1" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 784 B |
Binary file not shown.
|
After Width: | Height: | Size: 106 B |
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" ?>
|
||||
<!--
|
||||
Source file for tabLeftUnselected.png, which is used by IE7-9 for the selected tabs.
|
||||
Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
|
||||
|
||||
Output should match CSS gradient from TabContainer.less.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="150px" height="1px" viewBox="0 0 100 1" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="150" height="1" fill="url(#gradient)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 737 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 210 B |
@@ -0,0 +1,17 @@
|
||||
<?xml version="1.0" ?>
|
||||
<!--
|
||||
Source file for tabRightSelected.png, which is used by IE7-9 for selected tabs.
|
||||
Compile to png with batik, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
|
||||
|
||||
Output should match CSS gradient from TabContainer.less.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1000px" height="1px" viewBox="0 0 1000 1" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="100%" y1="0%" x2="0%" y2="0%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="970" height="1" fill="white"/>
|
||||
<rect x="970" y="0" width="30" height="1" fill="url(#gradient)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 786 B |
Binary file not shown.
|
After Width: | Height: | Size: 105 B |
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" ?>
|
||||
<!--
|
||||
Source file for tabRightUnselected.png, which is used by IE7-9 for the selected tabs.
|
||||
Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
|
||||
|
||||
Output should match CSS gradient from TabContainer.less.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="150px" height="1px" viewBox="0 0 100 1" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="100%" y1="0%" x2="0%" y2="0%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="150" height="1" fill="url(#gradient)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 738 B |
Binary file not shown.
|
Before Width: | Height: | Size: 721 B |
Binary file not shown.
|
After Width: | Height: | Size: 120 B |
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" ?>
|
||||
<!--
|
||||
Source file for tabTopSelected.png, which is used by IE7-9 for the selected tabs.
|
||||
Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
|
||||
|
||||
Output should match CSS gradient from .topBottom-selected-tab-gradient() from TabContainer.less.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="250px" viewBox="0 0 1 250" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="1" height="2" fill="white"/>
|
||||
<rect x="0" y="2" width="1" height="6" fill="url(#gradient)"/>
|
||||
<rect x="0" y="8" width="1" height="242" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 882 B |
Binary file not shown.
|
After Width: | Height: | Size: 121 B |
@@ -0,0 +1,19 @@
|
||||
<?xml version="1.0" ?>
|
||||
<!--
|
||||
Source file for tabTopUnSelected.png, which is used by IE7-9 for the selected tabs.
|
||||
Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm
|
||||
|
||||
Output should match CSS gradient from TabContainer.less.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="16px" viewBox="0 0 1 16" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="6%" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="13%" stop-color="#ffffff" stop-opacity="0.2"/>
|
||||
<stop offset="43%" stop-color="#ffffff" stop-opacity="0.6"/>
|
||||
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="1" height="16" fill="url(#gradient)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 920 B |
@@ -6,7 +6,7 @@
|
||||
@disabled-color: #d3d3d3; // Base for disabled backgrounds and borders
|
||||
@error-color: #d46464;
|
||||
|
||||
@container-background-color:#fff; // Backgrounds for various content areas such as TitlePane, ContentPane and Inputs
|
||||
@container-background-color:#fff; // Backgrounds for various content areas such as TitlePane, ContentPane and Inputs (if changed, adjust selected tab to match)
|
||||
|
||||
@minor-selected-color: spin(saturate(darken(@primary-color, 6), 19), 0); // Color for various arrows and buttons
|
||||
@base-border-color: spin(desaturate(darken(@primary-color, 29), 44), -1); // Augmented and used directly by variables to create border colors for various widgets
|
||||
@@ -136,6 +136,9 @@
|
||||
@dialog-titlebar-border-color: @container-background-color; // Inner border around the title sectionof a Dialog, inside the main border of the Dialog and the border between title and content
|
||||
@dialog-titlebar-background-color: @minor-selected-color;
|
||||
|
||||
// Tooltip
|
||||
@tooltip-gradient-color: fade(@primary-color,10%); // a little swath of color at the bottom of tooltips
|
||||
|
||||
// BorderContainer
|
||||
@splitter-hovered-background-color: @primary-color; // Color of splitter when user hovers it, before mouse down
|
||||
@splitter-dragged-background-color: @minor-selected-color; // Color of splitter while it's being dragged
|
||||
@@ -156,49 +159,29 @@
|
||||
@document-shadedsection-background-color: @bar-background-color;// background color used for <pre>, <code>, and table header rows
|
||||
@document-border-color: @disabled-color; // Border for <pre>, <code>, tables, etc.
|
||||
|
||||
// Images
|
||||
// Icons, arrows, etc.
|
||||
@image-arrow-sprite: "images/spriteArrows.png";
|
||||
@image-calendar-container: "images/calendarContainerImages.png";
|
||||
@image-calendar-arrows: "images/calendarArrows.png";
|
||||
@image-calendar-arrows-ie6: "images/calendarArrows8bit.png";
|
||||
@image-checkmark: "images/checkmarkNoBorder.png";
|
||||
@image-checkmark-ie6: "images/checkmarkNoBorder.gif";
|
||||
@image-common-highlight: "images/commonHighlight.png";
|
||||
@image-dialog-close: "images/dialogCloseIcon.png";
|
||||
@image-dialog-close-ie6: "images/dialogCloseIcon8bit.png";
|
||||
@image-dnd: "images/dnd.png";
|
||||
@image-editor-icons-enabled: "../../icons/images/editorIconsEnabled.png";
|
||||
@image-form-button: "form/images/button.png";
|
||||
@image-form-button-arrows: "form/images/buttonArrows.png";
|
||||
@image-form-checkbox-and-radios: "form/images/checkboxRadioButtonStates.png";
|
||||
@image-form-checkbox-and-radios-ie6: "form/images/checkboxAndRadioButtons_IE6.png";
|
||||
@image-form-common-arrows: "form/images/commonFormArrows.png";
|
||||
@image-form-error: "form/images/error.png";
|
||||
@image-form-highlight: "form/images/formHighlight.png";
|
||||
@image-form-slider-horizontal: "form/images/sliderHorizontal.png";
|
||||
@image-form-slider-thumbs: "form/images/sliderThumbs.png";
|
||||
@image-form-slider-vertical: "form/images/sliderVertical.png";
|
||||
@image-form-textbox-background: "form/images/textBox_back.png";
|
||||
@image-layout-accordion: "layout/images/accordion.png";
|
||||
@image-layout-splitter-horizontal-hover: "layout/images/splitterHorizontalHover.png";
|
||||
@image-layout-splitter-vertical-hover: "layout/images/splitterVerticalHover.png";
|
||||
@image-layout-tab-bottom: "layout/images/tabBottom.png";
|
||||
@image-layout-tab-close: "layout/images/tabClose.png";
|
||||
@image-layout-tab-left: "layout/images/tabLeft.png";
|
||||
@image-layout-tab-nested: "layout/images/tabNested.png";
|
||||
@image-layout-tab-right: "layout/images/tabRight.png";
|
||||
@image-layout-tab-top: "layout/images/tabTop.png";
|
||||
@image-layout-tab-close: "layout/images/tabClose.png"; // [x] icon to close a tab
|
||||
@image-loading-animation: "images/loadingAnimation.gif";
|
||||
@image-menu-highlight: "images/menuHighlight.png";
|
||||
@image-progressbar-empty: "images/progressBarEmpty.png";
|
||||
@image-progressbar-full: "images/progressBarFull.png";
|
||||
@image-progressbar-anim: "images/progressBarAnim.gif";
|
||||
@image-titlebar: "images/titlebar.png";
|
||||
@image-tooltip: "images/tooltip.png";
|
||||
@image-tooltip-ie6: "images/tooltip8bit.png";
|
||||
@image-tooltip-gradient: "images/tooltipGradient.png";
|
||||
@image-tooltip: "images/tooltip.png"; // arrow connectors
|
||||
@image-tooltip-ie6: "images/tooltip8bit.png"; // arrow connectors (8 bit)
|
||||
@image-tree-expand: "images/treeExpandImages.png";
|
||||
@image-tree-expand-ie6: "images/treeExpandImages8bit.png";
|
||||
@image-progressbar-anim: "images/progressBarAnim.gif";
|
||||
|
||||
// Mixins
|
||||
|
||||
@@ -242,3 +225,154 @@
|
||||
-moz-transition-timing-function: @value;
|
||||
transition-timing-function: @value;
|
||||
}
|
||||
|
||||
.linear-gradient (@value1, @value2) {
|
||||
// summary:
|
||||
// Expands to browser specific background-image specifications for a linear-gradient (2 stops)
|
||||
background-image: -moz-linear-gradient(@value1, @value2); // FF3.6 - FF15 (FF16+ supports linear-gradient)
|
||||
background-image: -webkit-linear-gradient(@value1, @value2); // Chrome10+, Safari5.1+
|
||||
background-image: -o-linear-gradient(@value1, @value2); // Opera 11.10+
|
||||
background-image: linear-gradient(@value1, @value2);
|
||||
}
|
||||
.linear-gradient (@value1, @value2, @value3) {
|
||||
background-image: -moz-linear-gradient(@value1, @value2, @value3); // FF3.6 - FF15 (FF16+ supports linear-gradient)
|
||||
background-image: -webkit-linear-gradient(@value1, @value2, @value3); // Chrome10+, Safari5.1+
|
||||
background-image: -o-linear-gradient(@value1, @value2, @value3); // Opera 11.10+
|
||||
background-image: linear-gradient(@value1, @value2, @value3);
|
||||
}
|
||||
.linear-gradient (@value1, @value2, @value3, @value4) {
|
||||
background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4); // FF3.6 - FF15 (FF16+ supports linear-gradient)
|
||||
background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4); // Chrome10+, Safari5.1+
|
||||
background-image: -o-linear-gradient(@value1, @value2, @value3, @value4); // Opera 11.10+
|
||||
background-image: linear-gradient(@value1, @value2, @value3, @value4);
|
||||
}
|
||||
.linear-gradient (@value1, @value2, @value3, @value4, @value5) {
|
||||
background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4, @value5); // FF3.6 - FF15 (FF16+ supports linear-gradient)
|
||||
background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4, @value5); // Chrome10+, Safari5.1+
|
||||
background-image: -o-linear-gradient(@value1, @value2, @value3, @value4, @value5); // Opera 11.10+
|
||||
background-image: linear-gradient(@value1, @value2, @value3, @value4, @value5);
|
||||
}
|
||||
.linear-gradient (@value1, @value2, @value3, @value4, @value5, @value6) {
|
||||
background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6); // FF3.6 - FF15 (FF16+ supports linear-gradient)
|
||||
background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6); // Chrome10+, Safari5.1+
|
||||
background-image: -o-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6); // Opera 11.10+
|
||||
background-image: linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6);
|
||||
}
|
||||
.linear-gradient (@value1, @value2, @value3, @value4, @value5, @value6, @value7) {
|
||||
background-image: -moz-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7); // FF3.6 - FF15 (FF16+ supports linear-gradient)
|
||||
background-image: -webkit-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7); // Chrome10+, Safari5.1+
|
||||
background-image: -o-linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7); // Opera 11.10+
|
||||
background-image: linear-gradient(@value1, @value2, @value3, @value4, @value5, @value6, @value7);
|
||||
}
|
||||
|
||||
.alpha-white-gradient (@opacity1, @stop1, @opacity2, @stop2) {
|
||||
// summary:
|
||||
// For setting up white background-image with variable transparency.
|
||||
// example:
|
||||
// Gradient starts at top (0%) with 30% opacity, and then ends at bottom (100%) with full transparency
|
||||
// | .alpha-white-gradient(0.3, 0%, 0, 100%)
|
||||
//
|
||||
.linear-gradient(rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2);
|
||||
}
|
||||
.alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2) {
|
||||
.linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2);
|
||||
}
|
||||
.alpha-white-gradient (@opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3) {
|
||||
.linear-gradient(rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3);
|
||||
}
|
||||
.alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3) {
|
||||
.linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3);
|
||||
}
|
||||
.alpha-white-gradient (@opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4) {
|
||||
.linear-gradient(rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3, rgba(255,255,255, @opacity4) @stop4);
|
||||
}
|
||||
.alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4) {
|
||||
.linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3, rgba(255,255,255, @opacity4) @stop4);
|
||||
}
|
||||
.alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4, @opacity5, @stop5) {
|
||||
.linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3, rgba(255,255,255, @opacity4) @stop4, rgba(255,255,255, @opacity5) @stop5);
|
||||
}
|
||||
.alpha-white-gradient (@start, @opacity1, @stop1, @opacity2, @stop2, @opacity3, @stop3, @opacity4, @stop4, @opacity5, @stop5, @opacity6, @stop6) {
|
||||
.linear-gradient(@start, rgba(255,255,255,@opacity1) @stop1, rgba(255,255,255,@opacity2) @stop2, rgba(255,255,255, @opacity3) @stop3, rgba(255,255,255, @opacity4) @stop4, rgba(255,255,255, @opacity5) @stop5, rgba(255,255,255, @opacity6) @stop6);
|
||||
}
|
||||
|
||||
.gradient-and-filter (@color, @fade1, @fade2) {
|
||||
// summary:
|
||||
// Sets up a background color with a vertical gradient.
|
||||
// In order to make transitions work properly on mozilla and webkit, this is done by combining
|
||||
// a background-color which will be changed based on state (ex: hover) with a constant
|
||||
// white alpha-transparency background-image. On IE it creates a DXImageTransform filter.
|
||||
// @color:
|
||||
// The color
|
||||
// @fade1:
|
||||
// The percent to fade at the top
|
||||
// @fade2:
|
||||
// The percent to fade at the bottom
|
||||
background-color: @color; // the base color
|
||||
.linear-gradient(fadeout(#fff, 100-@fade1), fadeout(#fff, 100-@fade2));
|
||||
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="lighten(@color, @fade1)~", endColorstr="lighten(@color, @fade2)~")"; // IE
|
||||
}
|
||||
.horizontal-gradient-and-filter (@color, @fade1, @fade2) {
|
||||
// summary:
|
||||
// Sets up a background color with a horizontal gradient.
|
||||
// In order to make transitions work properly on mozilla and webkit, this is done by combining
|
||||
// a background-color which will be changed based on state (ex: hover) with a constant
|
||||
// white alpha-transparency background-image. On IE it creates a DXImageTransform filter.
|
||||
// @color:
|
||||
// The color
|
||||
// @fade1:
|
||||
// The percent to fade at the top
|
||||
// @fade2:
|
||||
// The percent to fade at the bottom
|
||||
background-color: @color; // the base color
|
||||
.linear-gradient(left, fadeout(#fff, 100-@fade1), fadeout(#fff, 100-@fade2));
|
||||
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr="lighten(@color, @fade1)~", endColorstr="lighten(@color, @fade2)~"gradientType=1)"; // IE
|
||||
}
|
||||
|
||||
|
||||
// Mixins defining gradients
|
||||
|
||||
.textbox-background-image () {
|
||||
// summary:
|
||||
// Background image used for hovered TextBoxes and similar controls.
|
||||
// It's just a small inset shadow below the top border (inside of the TextBox).
|
||||
.linear-gradient(rgba(127,127,127,0.2) 0%, rgba(127,127,127,0) 2px);
|
||||
}
|
||||
|
||||
.standard-gradient (@pathToRoot: "") {
|
||||
// summary:
|
||||
// Light to dark background-image used by widgets with short height (~16px) including:
|
||||
// - MenuBar, and hovered MenuItem/MenuBarItem
|
||||
// - arrow icon wrapper for Select, ComboBox, Spinner
|
||||
// - Toolbar and hovered Toolbar buttons
|
||||
// - TitlePane title bar, AccordionContainer title bar, Dialog title bar
|
||||
|
||||
// Fallback for IE
|
||||
background-image: url("@{pathToRoot}images/standardGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
|
||||
// CSS gradient for other browsers
|
||||
.alpha-white-gradient(0.7, 0%, 0, 100%);
|
||||
|
||||
// IE6 can't handle a background-image with transparency and a background-color; the color is blocked out
|
||||
_background-image: none;
|
||||
}
|
||||
.active-gradient (@pathToRoot: "") {
|
||||
// summary:
|
||||
// Light to dark background-image with an inset gray shadow at the top,
|
||||
// used by widgets when they are active (ie: mousedown) or selected, including:
|
||||
// - active MenuItem/MenuBarItem
|
||||
// - arrow icon wrapper for Select, ComboBox, Spinner when active or drop down is open
|
||||
// - active Toolbar buttons
|
||||
// - active TitlePane title bar, AccordionContainer title bar
|
||||
|
||||
// Fallback for IE
|
||||
background-image: url("@{pathToRoot}images/activeGradient.png");
|
||||
background-repeat: repeat-x;
|
||||
|
||||
// CSS gradient for other browsers
|
||||
.linear-gradient(rgba(190,190,190,0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
|
||||
|
||||
// IE6 can't handle a background-image with transparency and a background-color; the color is blocked out
|
||||
_background-image: none;
|
||||
}
|
||||
|
||||
+288
-147
@@ -17,11 +17,11 @@
|
||||
margin:0;
|
||||
border:0;
|
||||
padding:0;
|
||||
line-height:normal;
|
||||
font: inherit;
|
||||
line-height:normal;
|
||||
color: inherit;
|
||||
}
|
||||
.dijit_a11y .dijitReset {
|
||||
.dj_a11y .dijitReset {
|
||||
-moz-appearance: none; /* remove predefined high-contrast styling in Firefox */
|
||||
}
|
||||
|
||||
@@ -56,32 +56,45 @@ table.dijitInline {
|
||||
position: relative; /* to support setting width/height, see #2033 */
|
||||
}
|
||||
|
||||
.dj_ie6 .dijitComboBox .dijitInputContainer,
|
||||
.dijitInputContainer {
|
||||
/* for positioning of placeHolder */
|
||||
#zoom: 1;
|
||||
overflow: hidden;
|
||||
float: none !important; /* needed by FF to squeeze the INPUT in */
|
||||
float: none !important; /* needed to squeeze the INPUT in */
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
#display: inline;
|
||||
}
|
||||
.dj_ie7 .dijitInputContainer {
|
||||
float: left !important; /* needed by IE to squeeze the INPUT in */
|
||||
clear: left;
|
||||
display: inline-block !important; /* to fix wrong text alignment in rtl text box */
|
||||
}
|
||||
|
||||
.dj_ie .dijitSelect input,
|
||||
.dj_ie input.dijitTextBox,
|
||||
.dj_ie .dijitTextBox input {
|
||||
font-size: 100%;
|
||||
}
|
||||
.dijitSelect .dijitButtonText {
|
||||
float: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
TABLE.dijitSelect {
|
||||
padding: 0 !important; /* messes up border alignment */
|
||||
}
|
||||
.dijitTextBox .dijitSpinnerButtonContainer,
|
||||
.dijitTextBox .dijitArrowButtonContainer,
|
||||
.dijitTextBox .dijitValidationContainer {
|
||||
.dijitValidationTextBox .dijitValidationContainer {
|
||||
float: right;
|
||||
text-align: center;
|
||||
}
|
||||
.dijitSelect input.dijitInputField,
|
||||
.dijitTextBox input.dijitInputField {
|
||||
/* override unreasonable user styling of buttons and icons */
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
.dijitTextBox .dijitValidationContainer {
|
||||
.dijitValidationTextBox .dijitValidationContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -90,10 +103,10 @@ table.dijitInline {
|
||||
line-height:1px;
|
||||
}
|
||||
|
||||
.dijitOffScreen {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -10000px;
|
||||
.dijitOffScreen { /* these class attributes should supercede any inline positioning style */
|
||||
position: absolute !important;
|
||||
left: 50% !important;
|
||||
top: -10000px !important;
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -152,12 +165,12 @@ table.dijitInline {
|
||||
/****
|
||||
A11Y
|
||||
****/
|
||||
.dijit_a11y .dijitIcon,
|
||||
.dijit_a11y div.dijitArrowButtonInner, /* is this only for Spinner? if so, it should be deleted */
|
||||
.dijit_a11y span.dijitArrowButtonInner,
|
||||
.dijit_a11y img.dijitArrowButtonInner,
|
||||
.dijit_a11y .dijitCalendarIncrementControl,
|
||||
.dijit_a11y .dijitTreeExpando {
|
||||
.dj_a11y .dijitIcon,
|
||||
.dj_a11y div.dijitArrowButtonInner, /* is this only for Spinner? if so, it should be deleted */
|
||||
.dj_a11y span.dijitArrowButtonInner,
|
||||
.dj_a11y img.dijitArrowButtonInner,
|
||||
.dj_a11y .dijitCalendarIncrementControl,
|
||||
.dj_a11y .dijitTreeExpando {
|
||||
/* hide icon nodes in high contrast mode; when necessary they will be replaced by character equivalents
|
||||
* exception for input.dijitArrowButtonInner, because the icon and character are controlled by the same node */
|
||||
display: none;
|
||||
@@ -166,7 +179,7 @@ table.dijitInline {
|
||||
display: block; /* override previous rule */
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitA11ySideArrow {
|
||||
.dj_a11y .dijitA11ySideArrow {
|
||||
display: inline !important; /* display text instead */
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -177,20 +190,20 @@ table.dijitInline {
|
||||
* Avoid screen jitter when switching selected date by compensating for the selected node's
|
||||
* border w/padding on other nodes.
|
||||
*/
|
||||
.dijit_a11y .dijitCalendarDateLabel {
|
||||
.dj_a11y .dijitCalendarDateLabel {
|
||||
padding: 1px;
|
||||
border: 0px !important;
|
||||
}
|
||||
.dijit_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel {
|
||||
.dj_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel {
|
||||
border-style: solid !important;
|
||||
border-width: 1px !important;
|
||||
padding: 0;
|
||||
}
|
||||
.dijit_a11y .dijitCalendarDateTemplate {
|
||||
.dj_a11y .dijitCalendarDateTemplate {
|
||||
padding-bottom: 0.1em !important; /* otherwise bottom border doesn't appear on IE */
|
||||
border: 0px !important;
|
||||
}
|
||||
.dijit_a11y .dijitButtonNode {
|
||||
.dj_a11y .dijitButtonNode {
|
||||
border: black outset medium !important;
|
||||
|
||||
/* In claro, hovering a toolbar button reduces padding and adds a border.
|
||||
@@ -198,13 +211,16 @@ table.dijitInline {
|
||||
*/
|
||||
padding: 0 !important;
|
||||
}
|
||||
.dj_a11y .dijitArrowButton {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitButtonContents{
|
||||
.dj_a11y .dijitButtonContents {
|
||||
margin: 0.15em; /* Margin needed to make focus outline visible */
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitTextBoxReadOnly .dijitInputField,
|
||||
.dijit_a11y .dijitTextBoxReadOnly .dijitButtonNode {
|
||||
.dj_a11y .dijitTextBoxReadOnly .dijitInputField,
|
||||
.dj_a11y .dijitTextBoxReadOnly .dijitButtonNode {
|
||||
border-style: outset!important;
|
||||
border-width: medium!important;
|
||||
border-color: #999 !important;
|
||||
@@ -215,6 +231,7 @@ table.dijitInline {
|
||||
.dijitButtonNode * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.dijitSelect .dijitArrowButtonInner,
|
||||
.dijitButtonNode .dijitArrowButtonInner {
|
||||
/* the arrow icon node */
|
||||
background: no-repeat center;
|
||||
@@ -248,7 +265,7 @@ table.dijitInline {
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.dj_gecko .dijit_a11y .dijitButtonDisabled .dijitButtonNode {
|
||||
.dj_gecko .dj_a11y .dijitButtonDisabled .dijitButtonNode {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@@ -299,6 +316,9 @@ td.dijitButtonContents {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.dijitSelect {
|
||||
border:1px solid gray;
|
||||
}
|
||||
.dijitButtonNode {
|
||||
/* Node that is acting as a button -- may or may not be a BUTTON element */
|
||||
border:1px solid gray;
|
||||
@@ -318,6 +338,8 @@ td.dijitButtonContents {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.dijitSelect,
|
||||
.dijitSelect *,
|
||||
.dijitButtonNode,
|
||||
.dijitButtonNode * {
|
||||
cursor: pointer;
|
||||
@@ -356,11 +378,11 @@ div.dijitArrowButton {
|
||||
.dijitTextBoxDisabled {
|
||||
color: gray;
|
||||
}
|
||||
.dj_webkit .dijitTextBoxDisabled input {
|
||||
color: #eee; /* because WebKit lightens disabled input/textarea no matter what color you specify */
|
||||
.dj_safari .dijitTextBoxDisabled input {
|
||||
color: #B0B0B0; /* because Safari lightens disabled input/textarea no matter what color you specify */
|
||||
}
|
||||
.dj_webkit textarea.dijitTextAreaDisabled {
|
||||
color: #333; /* because WebKit lightens disabled input/textarea no matter what color you specify */
|
||||
.dj_safari textarea.dijitTextAreaDisabled {
|
||||
color: #333; /* because Safari lightens disabled input/textarea no matter what color you specify */
|
||||
}
|
||||
.dj_gecko .dijitTextBoxReadOnly input.dijitInputField, /* disable arrow and validation presentation inputs but allow real input for text selection */
|
||||
.dj_gecko .dijitTextBoxDisabled input {
|
||||
@@ -389,13 +411,17 @@ div.dijitArrowButton {
|
||||
outline: 5px -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.dijitSelect input,
|
||||
.dijitTextBox input {
|
||||
float: left; /* needed by IE to remove secret margin */
|
||||
}
|
||||
.dj_ie6 input.dijitTextBox,
|
||||
.dj_ie6 .dijitTextBox input {
|
||||
float: none;
|
||||
}
|
||||
.dijitInputInner {
|
||||
/* for when an <input> is embedded inside an inline-block <div> with a size and border */
|
||||
border:0 !important;
|
||||
vertical-align:middle !important;
|
||||
background-color:transparent !important;
|
||||
width:100% !important;
|
||||
/* IE dislikes horizontal tweaking combined with width:100% so punish everyone for consistency */
|
||||
@@ -404,15 +430,16 @@ div.dijitArrowButton {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.dijit_a11y .dijitTextBox input {
|
||||
.dj_a11y .dijitTextBox input {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.dijitTextBoxError input.dijitValidationInner,
|
||||
.dijitValidationTextBoxError input.dijitValidationInner,
|
||||
.dijitSelect input,
|
||||
.dijitTextBox input.dijitArrowButtonInner {
|
||||
/* <input> used to display arrow icon/validation icon, or in arrow character in high contrast mode.
|
||||
* The css below is a trick to hide the character in non-high-contrast mode
|
||||
*/
|
||||
text-indent: -1em !important;
|
||||
text-indent: -2em !important;
|
||||
direction: ltr !important;
|
||||
text-align: left !important;
|
||||
height: auto !important;
|
||||
@@ -420,15 +447,26 @@ div.dijitArrowButton {
|
||||
#letter-spacing: -5em !important;
|
||||
#text-align: right !important;
|
||||
}
|
||||
.dj_ie .dijitSelect input,
|
||||
.dj_ie .dijitTextBox input,
|
||||
.dj_ie input.dijitTextBox {
|
||||
overflow-y: visible; /* inputs need help expanding when padding is added or line-height is adjusted */
|
||||
line-height: normal; /* strict mode */
|
||||
}
|
||||
.dj_ie7 .dijitTextBox input.dijitValidationInner,
|
||||
.dj_ie7 .dijitTextBox input.dijitArrowButtonInner {
|
||||
line-height: 86%; /* IE7 problem where the icon is vertically too low w/o this - real input stays at normal */
|
||||
.dijitSelect .dijitSelectLabel span {
|
||||
line-height: 100%;
|
||||
}
|
||||
.dj_ie .dijitSelect .dijitSelectLabel {
|
||||
line-height: normal;
|
||||
}
|
||||
.dj_ie6 .dijitSelect .dijitSelectLabel,
|
||||
.dj_ie7 .dijitSelect .dijitSelectLabel,
|
||||
.dj_ie8 .dijitSelect .dijitSelectLabel,
|
||||
.dj_iequirks .dijitSelect .dijitSelectLabel,
|
||||
.dijitSelect td,
|
||||
.dj_ie6 .dijitSelect input,
|
||||
.dj_iequirks .dijitSelect input,
|
||||
.dj_ie6 .dijitSelect .dijitValidationContainer,
|
||||
.dj_ie6 .dijitTextBox input,
|
||||
.dj_ie6 input.dijitTextBox,
|
||||
.dj_iequirks .dijitTextBox input.dijitValidationInner,
|
||||
@@ -438,14 +476,15 @@ div.dijitArrowButton {
|
||||
.dj_iequirks input.dijitTextBox {
|
||||
line-height: 100%; /* IE7 problem where the icon is vertically way too low w/o this */
|
||||
}
|
||||
.dijit_a11y input.dijitValidationInner,
|
||||
.dijit_a11y input.dijitArrowButtonInner {
|
||||
.dj_a11y input.dijitValidationInner,
|
||||
.dj_a11y input.dijitArrowButtonInner {
|
||||
/* (in high contrast mode) revert rules from above so character displays */
|
||||
text-indent: 0 !important;
|
||||
width: 1em !important;
|
||||
#text-align: left !important;
|
||||
color: black !important;
|
||||
}
|
||||
.dijitTextBoxError .dijitValidationContainer {
|
||||
.dijitValidationTextBoxError .dijitValidationContainer {
|
||||
display: inline;
|
||||
cursor: default;
|
||||
}
|
||||
@@ -457,6 +496,7 @@ div.dijitArrowButton {
|
||||
/* dividing line between input area and up/down button(s) for ComboBox and Spinner */
|
||||
border-width: 0 0 0 1px !important; /* !important needed due to wayward ".theme .dijitButtonNode" rules */
|
||||
}
|
||||
.dj_a11y .dijitSelect .dijitArrowButtonContainer,
|
||||
.dijitToolbar .dijitComboBox .dijitArrowButtonContainer {
|
||||
/* overrides above rule plus mirror-image rule in dijit_rtl.css to have no divider when ComboBox in Toolbar */
|
||||
border-width: 0 !important;
|
||||
@@ -470,7 +510,7 @@ div.dijitArrowButton {
|
||||
/* dividing line between input area and up/down button(s) for ComboBox and Spinner */
|
||||
border-width: 0;
|
||||
}
|
||||
.dj_ie .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
|
||||
.dj_ie .dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode {
|
||||
clear: both; /* IE workaround */
|
||||
}
|
||||
|
||||
@@ -495,35 +535,36 @@ div.dijitArrowButton {
|
||||
.dijitSpinnerButtonContainer .dijitButtonNode {
|
||||
border-width: 0;
|
||||
}
|
||||
.dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
|
||||
border: 0 none !important;
|
||||
.dj_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
|
||||
border-width: 0px !important;
|
||||
border-style: solid !important;
|
||||
}
|
||||
.dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer,
|
||||
.dijit_a11y .dijitSpinner .dijitArrowButtonInner,
|
||||
.dijit_a11y .dijitSpinnerButtonContainer input {
|
||||
.dj_a11y .dijitTextBox .dijitSpinnerButtonContainer,
|
||||
.dj_a11y .dijitSpinner .dijitArrowButtonInner,
|
||||
.dj_a11y .dijitSpinnerButtonContainer input {
|
||||
width: 1em !important;
|
||||
}
|
||||
.dijit_a11y .dijitSpinner .dijitArrowButtonInner {
|
||||
.dj_a11y .dijitSpinner .dijitArrowButtonInner {
|
||||
margin: 0 auto !important; /* should auto-center */
|
||||
}
|
||||
.dj_ie .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
|
||||
.dj_ie .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
|
||||
padding-left: 0.3em !important;
|
||||
padding-right: 0.3em !important;
|
||||
margin-left: 0.3em !important;
|
||||
margin-right: 0.3em !important;
|
||||
width: 1.4em !important;
|
||||
}
|
||||
.dj_ie7 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
|
||||
.dj_ie7 .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
|
||||
padding-left: 0 !important; /* manually center INPUT: character is .5em and total width = 1em */
|
||||
padding-right: 0 !important;
|
||||
width: 1em !important;
|
||||
}
|
||||
.dj_ie6 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
|
||||
.dj_ie6 .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
|
||||
margin-left: 0.1em !important;
|
||||
margin-right: 0.1em !important;
|
||||
width: 1em !important;
|
||||
}
|
||||
.dj_iequirks .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
|
||||
.dj_iequirks .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
width: 2em !important;
|
||||
@@ -545,7 +586,7 @@ div.dijitArrowButton {
|
||||
.dj_iequirks .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
|
||||
width: auto;
|
||||
}
|
||||
.dijit_a11y .dijitSpinnerButtonContainer .dijitArrowButton {
|
||||
.dj_a11y .dijitSpinnerButtonContainer .dijitArrowButton {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.dijitSpinner .dijitSpinnerButtonContainer .dijitDownArrowButton {
|
||||
@@ -578,6 +619,7 @@ div.dijitArrowButton {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
width: 100%;
|
||||
visibility: hidden;
|
||||
}
|
||||
.dj_ie .dijitSpinner .dijitArrowButtonInner .dijitInputField {
|
||||
zoom: 50%; /* emulate transform: scale(0.5) */
|
||||
@@ -586,26 +628,19 @@ div.dijitArrowButton {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
|
||||
.dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
|
||||
width: 100%;
|
||||
}
|
||||
.dj_iequirks .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
|
||||
width: 1em; /* matches .dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer rule - 100% is the whole screen width in quirks */
|
||||
.dj_iequirks .dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton {
|
||||
width: 1em; /* matches .dj_a11y .dijitTextBox .dijitSpinnerButtonContainer rule - 100% is the whole screen width in quirks */
|
||||
}
|
||||
.dijitSpinner .dijitArrowButtonInner .dijitInputField {
|
||||
visibility: hidden;
|
||||
}
|
||||
.dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
|
||||
.dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField {
|
||||
vertical-align:top;
|
||||
visibility: visible;
|
||||
}
|
||||
.dijit_a11y .dijitSpinnerButtonContainer {
|
||||
.dj_a11y .dijitSpinnerButtonContainer {
|
||||
width: 1em;
|
||||
}
|
||||
.dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode {
|
||||
border-width: 1px 0 0 0;
|
||||
border-style: solid !important;
|
||||
}
|
||||
|
||||
/****
|
||||
dijit.form.CheckBox
|
||||
@@ -641,20 +676,20 @@ div.dijitArrowButton {
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitCheckBox,
|
||||
.dijit_a11y .dijitRadio {
|
||||
.dj_a11y .dijitCheckBox,
|
||||
.dj_a11y .dijitRadio {
|
||||
/* in a11y mode we display the native checkbox (not the icon), so don't restrict the size */
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
.dijit_a11y .dijitCheckBoxInput {
|
||||
.dj_a11y .dijitCheckBoxInput {
|
||||
opacity: 1;
|
||||
filter: none;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitFocusedLabel {
|
||||
.dj_a11y .dijitFocusedLabel {
|
||||
/* for checkboxes or radio buttons in high contrast mode, use border rather than outline to indicate focus (outline does not work in FF)*/
|
||||
border: 1px dotted;
|
||||
outline: 0px !important;
|
||||
@@ -664,6 +699,9 @@ div.dijitArrowButton {
|
||||
dijit.ProgressBar
|
||||
****/
|
||||
|
||||
.dijitProgressBar {
|
||||
z-index: 0; /* so z-index settings below have no effect outside of the ProgressBar */
|
||||
}
|
||||
.dijitProgressBarEmpty {
|
||||
/* outer container and background of the bar that's not finished yet*/
|
||||
position:relative;overflow:hidden;
|
||||
@@ -699,7 +737,7 @@ div.dijitArrowButton {
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitProgressBarTile {
|
||||
.dj_a11y .dijitProgressBarTile {
|
||||
/* a11y: The border provides visibility in high-contrast mode */
|
||||
border-width:2px;
|
||||
border-style:solid;
|
||||
@@ -721,7 +759,7 @@ div.dijitArrowButton {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitProgressBarIndeterminate .dijitProgressBarIndeterminateHighContrastImage {
|
||||
.dj_a11y .dijitProgressBarIndeterminate .dijitProgressBarIndeterminateHighContrastImage {
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:0;
|
||||
@@ -768,7 +806,7 @@ div.dijitArrowButton {
|
||||
.dijitTooltipConnector {
|
||||
position: absolute;
|
||||
}
|
||||
.dijit_a11y .dijitTooltipConnector {
|
||||
.dj_a11y .dijitTooltipConnector {
|
||||
display: none; /* won't show b/c it's background-image; hide to avoid border gap */
|
||||
}
|
||||
|
||||
@@ -804,6 +842,7 @@ body .dijitAlignClient { position: absolute; }
|
||||
.dijitBorderContainer, .dijitBorderContainerNoGutter {
|
||||
position:relative;
|
||||
overflow: hidden;
|
||||
z-index: 0; /* so z-index settings below have no effect outside of the BorderContainer */
|
||||
}
|
||||
|
||||
.dijitBorderContainerPane,
|
||||
@@ -883,7 +922,7 @@ body .dijitAlignClient { position: absolute; }
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
.dj_ff3 .dijit_a11y div.dijitSplitter:focus {
|
||||
.dj_ff3 .dj_a11y div.dijitSplitter:focus {
|
||||
outline-style:dotted;
|
||||
outline-width: 2px;
|
||||
}
|
||||
@@ -932,11 +971,11 @@ body .dijitAlignClient { position: absolute; }
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitSplitterH {
|
||||
.dj_a11y .dijitSplitterH {
|
||||
border-top:1px solid #d3d3d3 !important;
|
||||
border-bottom:1px solid #d3d3d3 !important;
|
||||
}
|
||||
.dijit_a11y .dijitSplitterV {
|
||||
.dj_a11y .dijitSplitterV {
|
||||
border-left:1px solid #d3d3d3 !important;
|
||||
border-right:1px solid #d3d3d3 !important;
|
||||
}
|
||||
@@ -974,6 +1013,12 @@ body .dijitAlignClient { position: absolute; }
|
||||
/* TitlePane that cannot be toggled */
|
||||
cursor: default;
|
||||
}
|
||||
.dijitFixedOpen .dijitArrowNode, .dijitFixedOpen .dijitArrowNodeInner,
|
||||
.dijitFixedClosed .dijitArrowNode, .dijitFixedClosed .dijitArrowNodeInner{
|
||||
/* don't show the open close icon, it makes the user think the pane is closable*/
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dijitTitlePaneTitle * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -981,12 +1026,12 @@ body .dijitAlignClient { position: absolute; }
|
||||
/* normally, hide arrow text in favor of icon */
|
||||
display: none;
|
||||
}
|
||||
.dijit_a11y .dijitTitlePane .dijitArrowNodeInner {
|
||||
.dj_a11y .dijitTitlePane .dijitArrowNodeInner {
|
||||
/* ... except in a11y mode, then show text arrow */
|
||||
display:inline !important;
|
||||
font-family: monospace; /* because - and + are different widths */
|
||||
}
|
||||
.dijit_a11y .dijitTitlePane .dijitArrowNode {
|
||||
.dj_a11y .dijitTitlePane .dijitArrowNode {
|
||||
/* ... and hide icon */
|
||||
display:none;
|
||||
}
|
||||
@@ -1066,8 +1111,8 @@ body .dijitAlignClient { position: absolute; }
|
||||
}
|
||||
|
||||
|
||||
.dijit_a11y .dijitColorPalette .dijitPaletteTable,
|
||||
.dijit_a11y .dijitColorPalette .dijitPaletteTable * {
|
||||
.dj_a11y .dijitColorPalette .dijitPaletteTable,
|
||||
.dj_a11y .dijitColorPalette .dijitPaletteTable * {
|
||||
/* table cells are to catch events, but the swatches are in the PaletteImg behind the table */
|
||||
background-color: transparent !important;
|
||||
}
|
||||
@@ -1093,12 +1138,12 @@ body .dijitAlignClient { position: absolute; }
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitAccordionTitle .arrowTextUp,
|
||||
.dijit_a11y .dijitAccordionTitleSelected .arrowTextDown {
|
||||
.dj_a11y .dijitAccordionTitle .arrowTextUp,
|
||||
.dj_a11y .dijitAccordionTitleSelected .arrowTextDown {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitAccordionTitleSelected .arrowTextUp {
|
||||
.dj_a11y .dijitAccordionTitleSelected .arrowTextUp {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1185,6 +1230,15 @@ body .dijitAlignClient { position: absolute; }
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
No need to show a focus border since it's obvious from the shading, and there's a .dj_a11y .dijitMenuItemSelected
|
||||
rule below that handles the high contrast case when there's no shading.
|
||||
Hiding the focus border also works around webkit bug https://code.google.com/p/chromium/issues/detail?id=125779.
|
||||
*/
|
||||
.dijitMenuItem:focus {
|
||||
outline: none
|
||||
}
|
||||
|
||||
.dijitMenuPassive .dijitMenuItemHover,
|
||||
.dijitMenuItemSelected {
|
||||
/*
|
||||
@@ -1207,11 +1261,10 @@ body .dijitAlignClient { position: absolute; }
|
||||
opacity:0.5;
|
||||
cursor:default;
|
||||
}
|
||||
.dj_ie .dijit_a11y .dijitMenuItemDisabled,
|
||||
.dj_ie .dijit_a11y .dijitMenuItemDisabled td,
|
||||
.dj_ie .dijitMenuItemDisabled *,
|
||||
.dj_ie .dijitMenuItemDisabled td {
|
||||
color:gray !important;
|
||||
.dj_ie .dj_a11y .dijitMenuItemDisabled,
|
||||
.dj_ie .dj_a11y .dijitMenuItemDisabled *,
|
||||
.dj_ie .dijitMenuItemDisabled * {
|
||||
color: gray;
|
||||
filter: alpha(opacity=35);
|
||||
}
|
||||
|
||||
@@ -1220,25 +1273,25 @@ body .dijitAlignClient { position: absolute; }
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitMenuItemSelected {
|
||||
border: 1px dotted black !important;
|
||||
.dj_a11y .dijitMenuItemSelected {
|
||||
border: 1px dotted black !important; /* for 2.0 use outline instead, to prevent jitter */
|
||||
}
|
||||
.dj_ff3 .dijit_a11y .dijitMenuItem td {
|
||||
.dj_ff3 .dj_a11y .dijitMenuItem td {
|
||||
padding: 0 !important;
|
||||
background:none !important;
|
||||
}
|
||||
.dijit_a11y .dijitMenuItemSelected .dijitMenuItemLabel {
|
||||
.dj_a11y .dijitMenuItemSelected .dijitMenuItemLabel {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
.dj_ie8 .dijit_a11y .dijitMenuItemLabel {
|
||||
.dj_ie8 .dj_a11y .dijitMenuItemLabel {
|
||||
position:static;
|
||||
}
|
||||
|
||||
.dijitMenuExpandA11y {
|
||||
display: none;
|
||||
}
|
||||
.dijit_a11y .dijitMenuExpandA11y {
|
||||
.dj_a11y .dijitMenuExpandA11y {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@@ -1270,13 +1323,13 @@ body .dijitAlignClient { position: absolute; }
|
||||
.dijitCheckedMenuItemChecked .dijitCheckedMenuItemIconChar {
|
||||
visibility: visible;
|
||||
}
|
||||
.dijit_a11y .dijitCheckedMenuItemIconChar {
|
||||
.dj_a11y .dijitCheckedMenuItemIconChar {
|
||||
display:inline !important;
|
||||
}
|
||||
.dijit_a11y .dijitCheckedMenuItemIcon {
|
||||
.dj_a11y .dijitCheckedMenuItemIcon {
|
||||
display: none;
|
||||
}
|
||||
.dj_ie .dijit_a11y .dijitMenuBar .dijitMenuItem {
|
||||
.dj_ie .dj_a11y .dijitMenuBar .dijitMenuItem {
|
||||
/* so bottom border of MenuBar appears on IE7 in high-contrast mode */
|
||||
margin: 0;
|
||||
}
|
||||
@@ -1287,8 +1340,27 @@ body .dijitAlignClient { position: absolute; }
|
||||
cursor: default; /* because pressing it has no effect */
|
||||
}
|
||||
|
||||
/* TabContainer */
|
||||
/***
|
||||
TabContainer
|
||||
|
||||
Main class hierarchy:
|
||||
|
||||
.dijitTabContainer - the whole TabContainer
|
||||
.dijitTabController / .dijitTabListContainer-top - wrapper for tab buttons, scroll buttons
|
||||
.dijitTabListWrapper / .dijitTabContainerTopStrip - outer wrapper for tab buttons (normal width)
|
||||
.nowrapTabStrip / .dijitTabContainerTop-tabs - inner wrapper for tab buttons (50K width)
|
||||
.dijitTabPaneWrapper - wrapper for content panes, has all borders except the one between content and tabs
|
||||
***/
|
||||
|
||||
.dijitTabContainer {
|
||||
z-index: 0; /* so z-index settings below have no effect outside of the TabContainer */
|
||||
overflow-y: visible; /* prevent off-by-one-pixel errors from hiding bottom border (opposite tab labels) */
|
||||
}
|
||||
.dj_ie6 .dijitTabContainer {
|
||||
/* workaround IE6 problem when tall content overflows TabContainer, see editor/test_FullScreen.html */
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
.dijitTabContainerNoLayout {
|
||||
width: 100%; /* otherwise ScrollingTabController goes to 50K pixels wide */
|
||||
}
|
||||
@@ -1297,9 +1369,13 @@ body .dijitAlignClient { position: absolute; }
|
||||
.dijitTabContainerTop-tabs,
|
||||
.dijitTabContainerLeft-tabs,
|
||||
.dijitTabContainerRight-tabs {
|
||||
z-index: 1;
|
||||
overflow: visible !important; /* so tabs can cover up border adjacent to container */
|
||||
}
|
||||
|
||||
.dijitTabController {
|
||||
z-index: 1;
|
||||
}
|
||||
.dijitTabContainerBottom-container,
|
||||
.dijitTabContainerTop-container,
|
||||
.dijitTabContainerLeft-container,
|
||||
@@ -1313,12 +1389,14 @@ body .dijitAlignClient { position: absolute; }
|
||||
display: block;
|
||||
position: relative;
|
||||
text-align: left; /* just in case ancestor has non-standard setting */
|
||||
z-index: 1;
|
||||
}
|
||||
.dijitTabListWrapper {
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dijit_a11y .tabStripButton img {
|
||||
.dj_a11y .tabStripButton img {
|
||||
/* hide the icons (or rather the empty space where they normally appear) because text will appear instead */
|
||||
display: none;
|
||||
}
|
||||
@@ -1332,7 +1410,7 @@ body .dijitAlignClient { position: absolute; }
|
||||
|
||||
.dijitTabContainerLeft-tabs {
|
||||
border-right: 1px solid black;
|
||||
float: left;
|
||||
float: left; /* needed for IE7 RTL mode */
|
||||
}
|
||||
.dijitTabContainerLeft-container {
|
||||
border-left: 0;
|
||||
@@ -1347,7 +1425,7 @@ body .dijitAlignClient { position: absolute; }
|
||||
|
||||
.dijitTabContainerRight-tabs {
|
||||
border-left: 1px solid black;
|
||||
float: left;
|
||||
float: left; /* needed for IE7 RTL mode */
|
||||
}
|
||||
.dijitTabContainerRight-container {
|
||||
border-right: 0;
|
||||
@@ -1393,11 +1471,6 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
|
||||
#display:inline; /* don't use .dj_ie since that increases the priority */
|
||||
}
|
||||
|
||||
.dijitTabInnerDiv {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
|
||||
.tabStripButton {
|
||||
z-index: 12;
|
||||
}
|
||||
@@ -1435,13 +1508,13 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
|
||||
|
||||
/* images off, high-contrast mode styles */
|
||||
|
||||
.dijit_a11y .dijitTabCloseButton {
|
||||
.dj_a11y .dijitTabCloseButton {
|
||||
background-image: none !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitTabCloseText {
|
||||
.dj_a11y .dijitTabCloseText {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@@ -1460,14 +1533,14 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitInlineEditBoxDisplayMode,
|
||||
.dj_a11y .dijitInlineEditBoxDisplayMode,
|
||||
.dj_ie6 .dijitInlineEditBoxDisplayMode {
|
||||
/* except that IE6 doesn't support transparent borders, nor does high contrast mode */
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dijitInlineEditBoxDisplayModeHover,
|
||||
.dijit_a11y .dijitInlineEditBoxDisplayModeHover,
|
||||
.dj_a11y .dijitInlineEditBoxDisplayModeHover,
|
||||
.dj_ie6 .dijitInlineEditBoxDisplayModeHover {
|
||||
/* An InlineEditBox in view mode (click this to edit the text) */
|
||||
background-color: #e2ebf2;
|
||||
@@ -1505,7 +1578,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitExpandoText {
|
||||
.dj_a11y .dijitExpandoText {
|
||||
display: inline;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
@@ -1524,7 +1597,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
|
||||
.dijitDialog {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
overflow: hidden; /* override overflow: auto; from ContentPane to make dragging smoother */
|
||||
overflow: hidden; /* override overflow: auto; from ContentPane to make dragging smoother */
|
||||
}
|
||||
|
||||
.dijitDialogTitleBar {
|
||||
@@ -1555,8 +1628,8 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
|
||||
}
|
||||
|
||||
/* images off, high-contrast mode styles */
|
||||
.dijit_a11y .dijitSpinnerButtonContainer,
|
||||
.dijit_a11y .dijitDialog {
|
||||
.dj_a11y .dijitSpinnerButtonContainer,
|
||||
.dj_a11y .dijitDialog {
|
||||
opacity: 1 !important;
|
||||
background-color: white !important;
|
||||
}
|
||||
@@ -1567,7 +1640,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitDialog .closeText {
|
||||
.dj_a11y .dijitDialog .closeText {
|
||||
display:inline;
|
||||
}
|
||||
|
||||
@@ -1587,7 +1660,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
|
||||
right:50%;
|
||||
}
|
||||
|
||||
.dijit_a11y div.dijitSliderImageHandle,
|
||||
.dj_a11y div.dijitSliderImageHandle,
|
||||
.dijitSliderImageHandle {
|
||||
margin:0;
|
||||
padding:0;
|
||||
@@ -1597,16 +1670,16 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
|
||||
height:0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dj_iequirks .dijit_a11y .dijitSliderImageHandle {
|
||||
.dj_iequirks .dj_a11y .dijitSliderImageHandle {
|
||||
font-size: 0;
|
||||
}
|
||||
.dj_ie7 .dijitSliderImageHandle {
|
||||
overflow: hidden; /* IE7 workaround to make slider handle VISIBLE in non-a11y mode */
|
||||
}
|
||||
.dj_ie7 .dijit_a11y .dijitSliderImageHandle {
|
||||
.dj_ie7 .dj_a11y .dijitSliderImageHandle {
|
||||
overflow: visible; /* IE7 workaround to make slider handle VISIBLE in a11y mode */
|
||||
}
|
||||
.dijit_a11y .dijitSliderFocused .dijitSliderImageHandle {
|
||||
.dj_a11y .dijitSliderFocused .dijitSliderImageHandle {
|
||||
border:4px solid #000;
|
||||
height:8px;
|
||||
width:8px;
|
||||
@@ -1727,6 +1800,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
|
||||
|
||||
.dijitSliderDecorationV {
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dijitSliderButton {
|
||||
@@ -1736,7 +1810,7 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitSliderButtonInner {
|
||||
.dj_a11y .dijitSliderButtonInner {
|
||||
visibility:visible !important;
|
||||
}
|
||||
|
||||
@@ -1825,17 +1899,17 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
|
||||
margin-top:-.55em;
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitSliderReadOnly,
|
||||
.dijit_a11y .dijitSliderDisabled {
|
||||
.dj_a11y .dijitSliderReadOnly,
|
||||
.dj_a11y .dijitSliderDisabled {
|
||||
opacity:0.6;
|
||||
}
|
||||
.dj_ie .dijit_a11y .dijitSliderReadOnly .dijitSliderBar,
|
||||
.dj_ie .dijit_a11y .dijitSliderDisabled .dijitSliderBar {
|
||||
.dj_ie .dj_a11y .dijitSliderReadOnly .dijitSliderBar,
|
||||
.dj_ie .dj_a11y .dijitSliderDisabled .dijitSliderBar {
|
||||
filter: alpha(opacity=40);
|
||||
}
|
||||
|
||||
/* + and - Slider buttons: override theme settings to display icons */
|
||||
.dijit_a11y .dijitSlider .dijitSliderButtonContainer div {
|
||||
.dj_a11y .dijitSlider .dijitSliderButtonContainer div {
|
||||
font-family: monospace; /* otherwise hyphen is larger and more vertically centered */
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
@@ -1845,10 +1919,16 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
|
||||
}
|
||||
|
||||
/* Icon-only buttons (often in toolbars) still display the text in high-contrast mode */
|
||||
.dijit_a11y .dijitButtonContents .dijitButtonText,
|
||||
.dijit_a11y .dijitTab .tabLabel {
|
||||
.dj_a11y .dijitButtonContents .dijitButtonText,
|
||||
.dj_a11y .dijitTab .tabLabel {
|
||||
display: inline !important;
|
||||
}
|
||||
.dj_a11y .dijitSelect .dijitButtonText {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.dijitSelectError .dijitButtonContents .dijitButtonText {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* TextArea, SimpleTextArea */
|
||||
.dijitTextArea {
|
||||
@@ -1932,10 +2012,16 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
|
||||
color:white;
|
||||
cursor:pointer;
|
||||
}
|
||||
.dijit_a11y .dijitTimePickerItemSelected .dijitTimePickerItemInner {
|
||||
|
||||
.dijitTimePickerItemDisabled {
|
||||
color:gray;
|
||||
text-decoration:line-through;
|
||||
}
|
||||
|
||||
.dj_a11y .dijitTimePickerItemSelected .dijitTimePickerItemInner {
|
||||
border: solid 4px black;
|
||||
}
|
||||
.dijit_a11y .dijitTimePickerItemHover .dijitTimePickerItemInner {
|
||||
.dj_a11y .dijitTimePickerItemHover .dijitTimePickerItemInner {
|
||||
border: dashed 4px black;
|
||||
}
|
||||
|
||||
@@ -1944,60 +2030,72 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
|
||||
/* character (instead of icon) to show that ToggleButton is checked */
|
||||
display:none !important;
|
||||
}
|
||||
.dijit_a11y .dijitToggleButton .dijitToggleButtonIconChar {
|
||||
.dj_a11y .dijitToggleButton .dijitToggleButtonIconChar {
|
||||
display:inline !important;
|
||||
visibility:hidden;
|
||||
}
|
||||
.dj_ie6 .dijitToggleButtonIconChar, .dj_ie6 .tabStripButton .dijitButtonText {
|
||||
font-family: "Arial Unicode MS"; /* otherwise the a11y character (checkmark, arrow, etc.) appears as a box */
|
||||
}
|
||||
.dijit_a11y .dijitToggleButtonChecked .dijitToggleButtonIconChar {
|
||||
.dj_a11y .dijitToggleButtonChecked .dijitToggleButtonIconChar {
|
||||
display: inline !important; /* In high contrast mode, display the check symbol */
|
||||
visibility:visible !important;
|
||||
}
|
||||
|
||||
.dijitArrowButtonChar {
|
||||
display:none !important;
|
||||
display:none !important;
|
||||
}
|
||||
.dijit_a11y .dijitArrowButtonChar {
|
||||
display:inline !important;
|
||||
.dj_a11y .dijitArrowButtonChar {
|
||||
display:inline !important;
|
||||
}
|
||||
|
||||
.dijit_a11y .dijitDropDownButton .dijitArrowButtonInner,
|
||||
.dijit_a11y .dijitComboButton .dijitArrowButtonInner {
|
||||
.dj_a11y .dijitDropDownButton .dijitArrowButtonInner,
|
||||
.dj_a11y .dijitComboButton .dijitArrowButtonInner {
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
/* Select */
|
||||
.dijitSelect {
|
||||
margin: 0.2em;
|
||||
border-collapse: collapse;
|
||||
.dj_a11y .dijitSelect {
|
||||
border-collapse: separate !important;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
.dj_ie .dijitSelect,
|
||||
.dj_ie7 .dijitSelect,
|
||||
.dj_iequirks .dijitSelect {
|
||||
.dj_ie .dijitSelect {
|
||||
vertical-align: middle; /* Set this back for what we hack in dijit inline */
|
||||
}
|
||||
.dj_ie6 .dijitSelect .dijitValidationContainer,
|
||||
.dj_ie8 .dijitSelect .dijitButtonText {
|
||||
vertical-align: top;
|
||||
}
|
||||
.dj_ie6 .dijitTextBox .dijitInputContainer,
|
||||
.dj_iequirks .dijitTextBox .dijitInputContainer,
|
||||
.dj_ie6 .dijitTextBox .dijitArrowButtonInner,
|
||||
.dj_ie6 .dijitSpinner .dijitSpinnerButtonInner,
|
||||
.dijitSelect .dijitSelectLabel {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.dijitNumberTextBox {
|
||||
text-align: left;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.dijitNumberTextBox .dijitInputInner {
|
||||
text-align: inherit; /* input */
|
||||
}
|
||||
|
||||
.dijitToolbar .dijitSelect {
|
||||
margin: 0;
|
||||
}
|
||||
.dj_webkit .dijitToolbar .dijitSelect {
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
.dijit_a11y .dijitSelectDisabled .dijitButtonNode {
|
||||
border-style: outset!important;
|
||||
border-width: medium!important;
|
||||
border-color: #999 !important;
|
||||
color:#999 !important;
|
||||
}
|
||||
.dijitSelect .dijitButtonContents {
|
||||
padding: 0;
|
||||
background: transparent none;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
border-style: none solid none none;
|
||||
border-width: 1px;
|
||||
}
|
||||
.dijitSelectFixedWidth .dijitButtonContents {
|
||||
width: 100%;
|
||||
@@ -2049,3 +2147,46 @@ div.dijitTabDisabled, .dj_ie div.dijitTabDisabled {
|
||||
/* a region the user would be able to click on, but it's disabled */
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Drag and Drop */
|
||||
.dojoDndItem {
|
||||
padding: 2px; /* will be replaced by border during drag over (dojoDndItemBefore, dojoDndItemAfter) */
|
||||
|
||||
/* Prevent magnifying-glass text selection icon to appear on mobile webkit as it causes a touchout event */
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none; /* Disable selection/Copy of UIWebView */
|
||||
}
|
||||
.dojoDndHorizontal .dojoDndItem {
|
||||
/* make contents of horizontal container be side by side, rather than vertical */
|
||||
#display: inline;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dojoDndItemBefore,
|
||||
.dojoDndItemAfter {
|
||||
border: 0px solid #369;
|
||||
}
|
||||
.dojoDndItemBefore {
|
||||
border-width: 2px 0 0 0;
|
||||
padding: 0 2px 2px 2px;
|
||||
}
|
||||
.dojoDndItemAfter {
|
||||
border-width: 0 0 2px 0;
|
||||
padding: 2px 2px 0 2px;
|
||||
}
|
||||
.dojoDndHorizontal .dojoDndItemBefore {
|
||||
border-width: 0 0 0 2px;
|
||||
padding: 2px 2px 2px 0;
|
||||
}
|
||||
.dojoDndHorizontal .dojoDndItemAfter {
|
||||
border-width: 0 2px 0 0;
|
||||
padding: 2px 0 2px 2px;
|
||||
}
|
||||
|
||||
.dojoDndItemOver {
|
||||
cursor:pointer;
|
||||
}
|
||||
.dj_gecko .dijitArrowButtonInner INPUT,
|
||||
.dj_gecko INPUT.dijitArrowButtonInner {
|
||||
-moz-user-focus:ignore;
|
||||
}
|
||||
|
||||
@@ -15,6 +15,9 @@
|
||||
/* workaround bug where label invisible (themeTesterQuirk.html?dir=rtl) */
|
||||
float:left;
|
||||
}
|
||||
.dj_ie .dijitTextBoxRtl .dijitInputContainer {
|
||||
clear: right;
|
||||
}
|
||||
|
||||
/* TextBox, ComboBox, Spinner */
|
||||
|
||||
@@ -31,17 +34,20 @@
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.dj_ie7 .dijitInputContainer {
|
||||
/* to fix wrong text alignment in rtl text box in IE */
|
||||
display: inline-block;
|
||||
.dijitSelectRtl .dijitButtonText {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.dijitTextBoxRtl .dijitSpinnerButtonContainer,
|
||||
.dijitTextBoxRtl .dijitValidationContainer,
|
||||
.dijitValidationTextBoxRtl .dijitValidationContainer,
|
||||
.dijitTextBoxRtl .dijitArrowButtonContainer {
|
||||
float: left;
|
||||
}
|
||||
|
||||
div.dijitNumberTextBoxRtl {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Calendar */
|
||||
|
||||
.dijitCalendarRtl .dijitCalendarNextYear {
|
||||
@@ -108,6 +114,23 @@
|
||||
margin-left: 0;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.dj_ie6 .dijitTabRtl .tabLabel,
|
||||
.dj_ie6 .dijitTabContainerRight-tabs .dijitTabRtl,
|
||||
.dj_ie6 .dijitTabContainerLeft-tabs .dijitTabRtl,
|
||||
.dj_ie7 .dijitTabContainerRight-tabs .dijitTabRtl,
|
||||
.dj_ie7 .dijitTabContainerLeft-tabs .dijitTabRtl {
|
||||
zoom: 1;
|
||||
}
|
||||
.dj_ie6 .dijitTabContainerRight-tabs .dijitTabRtl,
|
||||
.dj_ie7 .dijitTabContainerRight-tabs .dijitTabRtl {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.dj_ie6 .dijitTabContainerRightRtl .dijitTabContainerRight-tabs,
|
||||
.dj_ie6 .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs {
|
||||
/* otherwise tab labels invisible */
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
/* TimePicker */
|
||||
.dj_ie .dijitTimePickerRtl .dijitTimePickerItem {
|
||||
@@ -124,5 +147,19 @@
|
||||
|
||||
/* Select */
|
||||
.dijitSelectRtl .dijitButtonContents {
|
||||
border-style: none none none solid;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* DnD
|
||||
* These rules should apply for containers that are dir=rtl (either set directly, or inherited)
|
||||
* but seems the best we can do is look for .dijitRtl on an ancestor node.
|
||||
*/
|
||||
.dijitRtl .dojoDndHorizontal .dojoDndItemBefore {
|
||||
border-width: 0 2px 0 0;
|
||||
padding: 2px 0 2px 2px;
|
||||
}
|
||||
.dijitRtl .dojoDndHorizontal .dojoDndItemAfter {
|
||||
border-width: 0 0 0 2px;
|
||||
padding: 2px 2px 2px 0;
|
||||
}
|
||||
|
||||
@@ -1,17 +1,9 @@
|
||||
.nihilo .dojoDndItemOver {
|
||||
background-image: url(images/treeHover.png);
|
||||
}
|
||||
|
||||
/* DnD avatar-specific settings */
|
||||
/* For now it uses a default set of rules. Some other DnD classes can be modified as well. */
|
||||
.nihilo .dojoDndItemBefore {
|
||||
border-top: 2px solid #369;
|
||||
}
|
||||
|
||||
.nihilo .dojoDndItemAfter {
|
||||
border-bottom: 2px solid #369;
|
||||
}
|
||||
|
||||
.nihilo .dojoDndItemOver {
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.nihilo table.dojoDndAvatar { -moz-border-radius: 0; border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; font-size: 75%; color: black;}
|
||||
.nihilo .dojoDndAvatar td { border: none; }
|
||||
.nihilo .dojoDndAvatar tr { border: none; }
|
||||
|
||||
@@ -67,15 +67,7 @@
|
||||
}
|
||||
|
||||
.nihilo .dijitTooltipContainer {
|
||||
/*
|
||||
The part with the text.
|
||||
|
||||
NOTE:
|
||||
FF doesn't clip images used as CSS bgs if you specify a border
|
||||
radius. If you use a solid color, it does. Webkit gets it right.
|
||||
Sigh.
|
||||
background: #ffffff url("images/popupMenuBg.gif") repeat-x bottom left;
|
||||
*/
|
||||
/* The part with the text. */
|
||||
background-color: #fff;
|
||||
border:1px solid #d3d3d3;
|
||||
padding:0.45em;
|
||||
|
||||
@@ -16,14 +16,13 @@
|
||||
background: #fff url("../images/buttonEnabled.png") repeat-x top left;
|
||||
}
|
||||
|
||||
.nihilo .dijitSelect .dijitButtonContents {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.nihilo .dijitButtonText {
|
||||
text-align: center;
|
||||
padding: 0 0.3em;
|
||||
}
|
||||
.nihilo .dijitInputField {
|
||||
padding: 0; /* set padding:0 for .nihilo .dijitSelect .dijitButtonText but with a low priority rule that can be easily trumped by the user */
|
||||
}
|
||||
|
||||
.nihilo .dijitComboBox .dijitButtonNode {
|
||||
border-width: 0 0 0 1px;
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
.dijitRtl .nihilo .dijitComboBox .dijitButtonNode {
|
||||
.nihilo .dijitComboBoxRtl .dijitButtonNode {
|
||||
border-width: 0 0 0 1px;
|
||||
}
|
||||
.dijitRtl .nihilo .dijitSelect .dijitButtonContents {
|
||||
border-left: none;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
|
||||
@@ -10,11 +10,12 @@
|
||||
dijit.form.ComboBox (partial)
|
||||
****/
|
||||
|
||||
.nihilo .dijitInputContainer input,
|
||||
.nihilo .dijitTextBox {
|
||||
.nihilo .dijitInputContainer input {
|
||||
margin: 0 0.1em;
|
||||
}
|
||||
|
||||
.nihilo .dijitSelect .dijitButtonContents,
|
||||
.nihilo .dijitSelect,
|
||||
.nihilo .dijitTextBox,
|
||||
.nihilo .dijitTextArea {
|
||||
/* For all except dijit.form.NumberSpinner: the actual input element.
|
||||
@@ -23,26 +24,34 @@
|
||||
*/
|
||||
background:#fff url("../images/validationInputBg.png") repeat-x top left;
|
||||
#background:#fff url('../images/validationInputBg.gif') repeat-x top left;
|
||||
}
|
||||
.nihilo .dijitSelect,
|
||||
.nihilo .dijitTextBox,
|
||||
.nihilo .dijitTextArea {
|
||||
border:1px solid #d3d3d3;
|
||||
}
|
||||
|
||||
.nihilo .dijitSelect .dijitArrowButton,
|
||||
.nihilo .dijitComboBox .dijitButtonNode {
|
||||
padding: 0 0.2em !important;
|
||||
padding: 0 0.2em;
|
||||
}
|
||||
.nihilo .dijitSelect .dijitButtonContents,
|
||||
.nihilo .dijitTextBox .dijitButtonNode {
|
||||
/* line between the input area and the drop down button */
|
||||
border-color: #d3d3d3;
|
||||
}
|
||||
|
||||
.nihilo .dijitSelectFocused,
|
||||
.nihilo .dijitTextBoxFocused,
|
||||
.nihilo .dijitTextAreaFocused {
|
||||
/* input field when focused (ie: typing affects it) */
|
||||
border-color:#b3b3b3;
|
||||
}
|
||||
.nihilo .dijitSelectFocused TD,
|
||||
.nihilo .dijitTextBoxFocused .dijitButtonNode,
|
||||
.nihilo .dijitSpinner .dijitUpArrowButtonActive,
|
||||
.nihilo .dijitSpinner .dijitDownArrowButtonActive {
|
||||
border-left-color:#d3d3d3;
|
||||
border-color:#d3d3d3;
|
||||
}
|
||||
.nihilo .dijitSpinnerFocused .dijitDownArrowButton,
|
||||
.nihilo .dijitSpinner .dijitUpArrowButtonActive,
|
||||
@@ -62,7 +71,7 @@
|
||||
}
|
||||
|
||||
/* Validation errors */
|
||||
.nihilo .dijitValidationIcon {
|
||||
.nihilo .dijitValidationTextBoxError .dijitValidationIcon {
|
||||
/* prevent height change when widget goes from valid to invalid state */
|
||||
width: 16px;
|
||||
background: transparent url('../images/warning.png') no-repeat center center;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user