diff options
Diffstat (limited to 'lib/dijit/themes/dijit.css')
-rw-r--r-- | lib/dijit/themes/dijit.css | 880 |
1 files changed, 629 insertions, 251 deletions
diff --git a/lib/dijit/themes/dijit.css b/lib/dijit/themes/dijit.css index 0d8302344..b6d57dca1 100644 --- a/lib/dijit/themes/dijit.css +++ b/lib/dijit/themes/dijit.css @@ -1,6 +1,19 @@ +/* + Essential styles that themes can inherit. + In other words, works but doesn't look great. +*/ + + + +/**** + GENERIC PIECES + ****/ .dijitReset { - + /* Use this style to null out padding, margin, border in your template elements + so that page specific styles don't break them. + - Use in all TABLE, TR and TD tags. + */ margin:0; border:0; padding:0; @@ -9,34 +22,44 @@ color: inherit; } .dijit_a11y .dijitReset { - -moz-appearance: none; + -moz-appearance: none; /* remove predefined high-contrast styling in Firefox */ } + .dijitInline { - - display:inline-block; - #zoom: 1; - #display:inline; + /* To inline block elements. + Similar to InlineBox below, but this has fewer side-effects in Moz. + Also, apparently works on a DIV as well as a FIELDSET. + */ + display:inline-block; /* webkit and FF3 */ + #zoom: 1; /* set hasLayout:true to mimic inline-block */ + #display:inline; /* don't use .dj_ie since that increases the priority */ border:0; padding:0; vertical-align:middle; - #vertical-align: auto; + #vertical-align: auto; /* makes TextBox,Button line up w/native counterparts on IE6 */ } + .dijitHidden { - + /* To hide unselected panes in StackContainer etc. */ display: none !important; } + .dijitVisible { - - display: block !important; - position: relative; + /* To show selected pane in StackContainer etc. */ + display: block !important; /* override user's display:none setting via style setting or indirectly via class */ + position: relative; /* to support setting width/height, see #2033 */ } + .dijitInputContainer { - + /* for positioning of placeHolder */ #zoom: 1; overflow: hidden; - float: none !important; - position:relative; + float: none !important; /* needed by FF to squeeze the INPUT in */ + position: relative; + vertical-align: middle; + #display: inline; } + .dj_ie INPUT.dijitTextBox, .dj_ie .dijitTextBox INPUT { font-size: 100%; @@ -48,7 +71,7 @@ text-align: center; } .dijitTextBox INPUT.dijitInputField { - + /* override unreasonable user styling of buttons and icons */ padding-left: 0 !important; padding-right: 0 !important; } @@ -56,25 +79,31 @@ display: none; } .dijitInlineTable { - + /* To inline tables with a given width set (otherwise, use dijitInline above) */ display:inline-table; - display:inline-block; - #zoom: 1; - #display:inline; + display:inline-block; /* webkit and FF3 */ + #zoom: 1; /* set hasLayout:true to mimic inline-block */ + #display:inline; /* don't use .dj_ie since that increases the priority */ box-sizing: content-box; -moz-box-sizing: content-box; border:0; padding:0; } + .dijitTeeny { font-size:1px; line-height:1px; } + .dijitOffScreen { position: absolute; - visibility: hidden; left: 50%; top: -10000px; } + +/* + * Popup items have a wrapper div (dijitPopup) + * with the real popup inside, and maybe an iframe too + */ .dijitPopup { position: absolute; background-color: transparent; @@ -82,14 +111,9 @@ border: 0; padding: 0; } -.dijit_a11y .dijitPopup, -.dijit_ally .dijitPopup DIV, -.dijit_a11y .dijitPopup TABLE, -.dijit_a11y .dijitTooltipContainer { - background-color: white !important; -} + .dijitPositionOnly { - + /* Null out all position-related properties */ padding: 0 !important; border: 0 !important; background-color: transparent !important; @@ -97,15 +121,17 @@ height: auto !important; width: auto !important; } + .dijitNonPositionOnly { - + /* Null position-related properties */ float: none !important; position: static !important; margin: 0 0 0 0 !important; vertical-align: middle !important; } + .dijitBackgroundIframe { - + /* iframe used to prevent problems with PDF or other applets overlaying menus etc */ position: absolute; left: 0; top: 0; @@ -116,52 +142,65 @@ padding: 0; margin: 0; } + .dijitDisplayNone { - + /* hide something. Use this as a class rather than element.style so another class can override */ display:none !important; } + .dijitContainer { - - overflow: hidden; -} -.dijit_a11y * { - background-image:none !important; + /* for all layout containers */ + overflow: hidden; /* need on IE so something can be reduced in size, and so scrollbars aren't temporarily displayed when resizing */ } + +/**** + A11Y + ****/ .dijit_a11y .dijitIcon, -.dijit_a11y DIV.dijitArrowButtonInner, +.dijit_a11y DIV.dijitArrowButtonInner, /* is this only for Spinner? if so, it should be deleted */ .dijit_a11y SPAN.dijitArrowButtonInner, .dijit_a11y IMG.dijitArrowButtonInner, -.dijit_a11y .dijitCalendarIncrementControl { - +.dijit_a11y .dijitCalendarIncrementControl, +.dijit_a11y .dijitTreeExpando { + /* hide icon nodes in high contrast mode; when necessary they will be replaced by character equivalents + * exception for INPUT.dijitArrowButtonInner, because the icon and character are controlled by the same node */ display: none; } .dijitSpinner DIV.dijitArrowButtonInner { - display: block; + display: block; /* override previous rule */ } + .dijit_a11y .dijitA11ySideArrow { - display: inline !important; + display: inline !important; /* display text instead */ cursor: pointer; } + +/* + * Since we can't use shading in a11y mode, and since the underline indicates today's date, + * use a border to show the selected date. + * Avoid screen jitter when switching selected date by compensating for the selected node's + * border w/padding on other nodes. + */ .dijit_a11y .dijitCalendarDateLabel { padding: 1px; } .dijit_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel { border-style: dotted !important; border-width: 1px; - padding: 0px; + padding: 0; } .dijit_a11y .dijitCalendarDateTemplate { - padding-bottom: 0.1em !important; -} -.dijit_a11y .dijit * { - background:white !important; - color:black !important; + padding-bottom: 0.1em !important; /* otherwise bottom border doesn't appear on IE */ } .dijit_a11y .dijitButtonNode { - border-color: black!important; - border-style: outset!important; - border-width: medium!important; + border: black outset medium !important; + + /* In claro, hovering a toolbar button reduces padding and adds a border. + * Not needed in a11y mode since Toolbar buttons always have a border. + */ + padding: 0 !important; } + .dijit_a11y .dijitTextBoxReadOnly .dijitInputField, .dijit_a11y .dijitTextBoxReadOnly .dijitButtonNode { border-style: outset!important; @@ -169,83 +208,94 @@ border-color: #999 !important; color:#999 !important; } + +/* button inner contents - labels, icons etc. */ .dijitButtonNode * { vertical-align: middle; } .dijitButtonNode .dijitArrowButtonInner { - + /* the arrow icon node */ background: no-repeat center; width: 12px; height: 12px; - direction: ltr; + direction: ltr; /* needed by IE/RTL */ } + +/**** + 3-element borders: ( dijitLeft + dijitStretch + dijitRight ) + These were added for rounded corners on dijit.form.*Button but never actually used. + ****/ + .dijitLeft { - + /* Left part of a 3-element border */ background-position:left top; background-repeat:no-repeat; } + .dijitStretch { - - white-space:nowrap; + /* Middle (stretchy) part of a 3-element border */ + white-space:nowrap; /* MOW: move somewhere else */ background-repeat:repeat-x; } + .dijitRight { - - #display:inline; + /* Right part of a 3-element border */ + #display:inline; /* IE7 sizes to outer size w/o this */ background-position:right top; background-repeat:no-repeat; } + +/* Buttons */ + .dijitToggleButton, .dijitButton, .dijitDropDownButton, .dijitComboButton { - + /* outside of button */ margin: 0.2em; + vertical-align: middle; } + .dijitButtonContents { - display: block; + display: block; /* to make focus border rectangular */ } td.dijitButtonContents { - display: table-cell; + display: table-cell; /* but don't affect Select, ComboButton */ } + .dijitButtonNode IMG { - + /* make text and images line up cleanly */ vertical-align:middle; - -} -TABLE.dijitComboButton { - - border-collapse: collapse; - border:0; - padding:0; - margin:0; + /*margin-bottom:.2em;*/ } + .dijitToolbar .dijitComboButton { - + /* because Toolbar only draws a border around the hovered thing */ border-collapse: separate; } + .dijitToolbar .dijitToggleButton, .dijitToolbar .dijitButton, .dijitToolbar .dijitDropDownButton, .dijitToolbar .dijitComboButton { margin: 0; } + .dijitToolbar .dijitButtonContents { - + /* just because it used to be this way */ padding: 1px 2px; } -.dj_ie .dijitComboButton { - - margin-bottom: -3px; -} + + .dj_webkit .dijitToolbar .dijitDropDownButton { padding-left: 0.3em; } .dj_gecko .dijitToolbar .dijitButtonNode::-moz-focus-inner { padding:0; } + .dijitButtonNode { - + /* Node that is acting as a button -- may or may not be a BUTTON element */ border:1px solid gray; margin:0; line-height:normal; @@ -255,76 +305,95 @@ TABLE.dijitComboButton { white-space: nowrap; } .dj_webkit .dijitSpinner .dijitSpinnerButtonContainer { - + /* apparent WebKit bug where messing with the font coupled with line-height:normal X 2 (dijitReset & dijitButtonNode) + can be different than just a single line-height:normal, visible in InlineEditBox/Spinner */ line-height:inherit; } .dijitTextBox .dijitButtonNode { border-width: 0; } + .dijitButtonNode, .dijitButtonNode * { cursor: pointer; } + .dj_ie .dijitButtonNode { - + /* ensure hasLayout */ zoom: 1; } + .dj_ie .dijitButtonNode button { - + /* + disgusting hack to get rid of spurious padding around button elements + on IE. MSIE is truly the web's boat anchor. + */ overflow: visible; } + DIV.dijitArrowButton { float: right; } + +/****** + TextBox related. + Everything that has an <input> +*******/ + .dijitTextBox { border: solid black 1px; - #overflow: hidden; - width: 15em; + #overflow: hidden; /* #6027, #6067 */ + width: 15em; /* need to set default size on outer node since inner nodes say <input style="width:100%"> and <td width=100%>. user can override */ vertical-align: middle; - #vertical-align: auto; } + .dijitTextBoxReadOnly, .dijitTextBoxDisabled { color: gray; } .dj_webkit .dijitTextBoxDisabled INPUT { - color: #eee; + color: #eee; /* because WebKit lightens disabled input/textarea no matter what color you specify */ } .dj_webkit TEXTAREA.dijitTextAreaDisabled { - color: #333; + color: #333; /* because WebKit lightens disabled input/textarea no matter what color you specify */ } -.dj_gecko .dijitTextBoxReadOnly INPUT, +.dj_gecko .dijitTextBoxReadOnly INPUT.dijitInputField, /* disable arrow and validation presentation INPUTs but allow real INPUT for text selection */ .dj_gecko .dijitTextBoxDisabled INPUT { - -moz-user-input: none; + -moz-user-input: none; /* prevent focus of disabled textbox buttons */ } + .dijitPlaceHolder { - + /* hint text that appears in a textbox until user starts typing */ color: #AAAAAA; font-style: italic; position: absolute; top: 0; left: 0; - #filter: ""; + #filter: ""; /* make this showup in IE6 after the rendering of the widget */ } + .dijitTimeTextBox { width: 8em; } + +/* rules for webkit to deal with fuzzy blue focus border */ .dijitTextBox INPUT:focus { - outline: none; + outline: none; /* blue fuzzy line looks wrong on combobox or something w/validation icon showing */ } .dijitTextBoxFocused { outline: auto 5px -webkit-focus-ring-color; } + .dijitTextBox INPUT { - float: left; + float: left; /* needed by IE to remove secret margin */ } .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 */ padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; @@ -335,7 +404,9 @@ DIV.dijitArrowButton { } .dijitTextBoxError INPUT.dijitValidationInner, .dijitTextBox INPUT.dijitArrowButtonInner { - + /* <input> used to display arrow icon/validation icon, or in arrow character in high contrast mode. + * The css below is a trick to hide the character in non-high-contrast mode + */ text-indent: -1em !important; direction: ltr !important; text-align: left !important; @@ -346,12 +417,12 @@ DIV.dijitArrowButton { } .dj_ie .dijitTextBox INPUT, .dj_ie INPUT.dijitTextBox { - overflow-y: visible; - line-height: normal; + 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%; + line-height: 86%; /* IE7 problem where the icon is vertically too low w/o this - real input stays at normal */ } .dj_ie6 .dijitTextBox INPUT, .dj_ie6 INPUT.dijitTextBox, @@ -360,11 +431,11 @@ DIV.dijitArrowButton { .dj_iequirks .dijitTextBox INPUT.dijitSpinnerButtonInner, .dj_iequirks .dijitTextBox INPUT.dijitInputInner, .dj_iequirks INPUT.dijitTextBox { - line-height: 100%; + line-height: 100%; /* IE7 problem where the icon is vertically way too low w/o this */ } .dijit_a11y INPUT.dijitValidationInner, .dijit_a11y INPUT.dijitArrowButtonInner { - + /* (in high contrast mode) revert rules from above so character displays */ text-indent: 0 !important; width: 1em !important; #text-align: left !important; @@ -373,29 +444,38 @@ DIV.dijitArrowButton { display: inline; cursor: default; } + +/* ComboBox & Spinner */ + .dijitSpinner .dijitSpinnerButtonContainer, .dijitComboBox .dijitArrowButtonContainer { - - border-width: 0 0 0 1px !important; + /* 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 */ +} +.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; +} + +.dijitComboBoxMenu { + /* Drop down menu is implemented as <ul> <li/> <li/> ... but we don't want circles before each item */ + list-style-type: none; } .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode { - + /* dividing line between input area and up/down button(s) for ComboBox and Spinner */ border-width: 0; } .dj_ie .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode { - clear: both; -} -.dijit_a11y .dijitTextBox .dijitValidationContainer, -.dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer, -.dijit_a11y .dijitComboBox .dijitArrowButtonContainer { - - border: solid black !important; - border-width: 0 0 0 1px !important; + clear: both; /* IE workaround */ } + .dj_ie .dijitToolbar .dijitComboBox { - + /* make combobox buttons align properly with other buttons in a toolbar */ vertical-align: middle; } + +/* Spinner */ + .dijitTextBox .dijitSpinnerButtonContainer { width: 1em; position: relative !important; @@ -403,7 +483,7 @@ DIV.dijitArrowButton { } .dijitSpinner .dijitSpinnerButtonInner { width:1em; - visibility:hidden !important; + visibility:hidden !important; /* just a sizing element */ overflow-x:hidden; } .dijitComboBox .dijitButtonNode, @@ -419,7 +499,7 @@ DIV.dijitArrowButton { width: 1em !important; } .dijit_a11y .dijitSpinner .dijitArrowButtonInner { - margin: 0 auto !important; + margin: 0 auto !important; /* should auto-center */ } .dj_ie .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { padding-left: 0.3em !important; @@ -429,8 +509,8 @@ DIV.dijitArrowButton { width: 1.4em !important; } .dj_ie7 .dijit_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { - padding-left: 0.0em !important; - padding-right: 0.0em !important; + 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 { @@ -444,7 +524,9 @@ DIV.dijitArrowButton { width: 2em !important; } .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { - + /* note: .dijitInputLayoutContainer makes this rule override .dijitArrowButton settings + * for dijit.form.Button + */ padding: 0; position: absolute !important; right: 0; @@ -466,7 +548,7 @@ DIV.dijitArrowButton { border-top-width: 1px !important; } .dijitSpinner .dijitSpinnerButtonContainer .dijitUpArrowButton { - #bottom: 50%; + #bottom: 50%; /* otherwise (on some machines) top arrow icon too close to splitter border (IE6/7) */ top: 0; } .dijitSpinner .dijitArrowButtonInner { @@ -493,16 +575,17 @@ DIV.dijitArrowButton { width: 100%; } .dj_ie .dijitSpinner .dijitArrowButtonInner .dijitInputField { - zoom: 50%; + zoom: 50%; /* emulate transform: scale(0.5) */ } .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButtonInner { overflow: hidden; } + .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { width: 100%; } .dj_iequirks .dijit_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { - width: 1em; + width: 1em; /* matches .dijit_a11y .dijitTextBox .dijitSpinnerButtonContainer rule - 100% is the whole screen width in quirks */ } .dijitSpinner .dijitArrowButtonInner .dijitInputField { visibility: hidden; @@ -515,9 +598,16 @@ DIV.dijitArrowButton { width: 1em; } .dijit_a11y .dijitSpinnerButtonContainer .dijitButtonNode { - border-width: 1px 0px 0px 0px; + border-width: 1px 0 0 0; border-style: solid !important; } + +/**** + dijit.form.CheckBox + & + dijit.form.RadioButton + ****/ + .dijitCheckBox, .dijitRadio, .dijitCheckBoxInput { @@ -529,22 +619,26 @@ DIV.dijitArrowButton { background-repeat:no-repeat; overflow: hidden; } + .dijitCheckBox INPUT, .dijitRadio INPUT { margin: 0; padding: 0; display: block; } + .dijitCheckBoxInput { - + /* place the actual input on top, but all-but-invisible */ opacity: 0.01; } + .dj_ie .dijitCheckBoxInput { filter: alpha(opacity=0); } + .dijit_a11y .dijitCheckBox, .dijit_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; } @@ -554,14 +648,21 @@ DIV.dijitArrowButton { width: auto; height: auto; } + + +/**** + dijit.ProgressBar + ****/ + .dijitProgressBarEmpty { - + /* outer container and background of the bar that's not finished yet*/ position:relative;overflow:hidden; - border:1px solid black; - z-index:0; + border:1px solid black; /* a11y: border necessary for high-contrast mode */ + z-index:0; /* establish a stacking context for this progress bar */ } + .dijitProgressBarFull { - + /* outer container for background of bar that is finished */ position:absolute; overflow:hidden; z-index:-1; @@ -571,8 +672,9 @@ DIV.dijitArrowButton { .dj_ie6 .dijitProgressBarFull { height:1.6em; } + .dijitProgressBarTile { - + /* inner container for finished portion */ position:absolute; overflow:hidden; top:0; @@ -586,27 +688,29 @@ DIV.dijitArrowButton { background-color:#aaa; background-attachment: fixed; } + .dijit_a11y .dijitProgressBarTile { - + /* a11y: The border provides visibility in high-contrast mode */ border-width:2px; border-style:solid; background-color:transparent !important; } + .dj_ie6 .dijitProgressBarTile { - + /* width:auto works in IE6 with position:static but not position:absolute */ position:static; - + /* height:auto or 100% does not work in IE6 */ height:1.6em; } -.dijitProgressBarIndeterminate .dijitProgressBarLabel { - visibility:hidden; -} + .dijitProgressBarIndeterminate .dijitProgressBarTile { - + /* animated gif for 'indeterminate' mode */ } + .dijitProgressBarIndeterminateHighContrastImage { display:none; } + .dijit_a11y .dijitProgressBarIndeterminate .dijitProgressBarIndeterminateHighContrastImage { display:block; position:absolute; @@ -617,6 +721,7 @@ DIV.dijitArrowButton { width:100%; height:auto; } + .dijitProgressBarLabel { display:block; position:static; @@ -624,38 +729,52 @@ DIV.dijitArrowButton { text-align:center; background-color:transparent !important; } + +/**** + dijit.Tooltip + ****/ + .dijitTooltip { position: absolute; z-index: 2000; display: block; - - left: 50%; + /* make visible but off screen */ + left: 0; top: -10000px; overflow: visible; } + .dijitTooltipContainer { border: solid black 2px; background: #b8b5b5; color: black; font-size: small; } + .dijitTooltipFocusNode { padding: 2px 2px 2px 2px; } + .dijitTooltipConnector { position: absolute; } .dijit_a11y .dijitTooltipConnector { - display: none; + display: none; /* won't show b/c it's background-image; hide to avoid border gap */ } + .dijitTooltipData { display:none; } + +/* Layout widgets. This is essential CSS to make layout work (it isn't "styling" CSS) + make sure that the position:absolute in dijitAlign* overrides other classes */ + .dijitLayoutContainer { position: relative; display: block; overflow: hidden; } + body .dijitAlignTop, body .dijitAlignBottom, body .dijitAlignLeft, @@ -663,40 +782,61 @@ body .dijitAlignRight { position: absolute; overflow: hidden; } + body .dijitAlignClient { position: absolute; } + +/* + * BorderContaienr + * + * .dijitBorderContainer is a stylized layout where panes have border and margin. + * .dijitBorderContainerNoGutter is a raw layout. + */ .dijitBorderContainer, .dijitBorderContainerNoGutter { position:relative; overflow: hidden; } + .dijitBorderContainerPane, .dijitBorderContainerNoGutterPane { - position: absolute !important; - z-index: 2; + position: absolute !important; /* !important to override position:relative in dijitTabContainer etc. */ + z-index: 2; /* above the splitters so that off-by-one browser errors don't cover up border of pane */ } + .dijitBorderContainer > .dijitTextArea { - + /* On Safari, for SimpleTextArea inside a BorderContainer, + don't want to display the grip to resize */ resize: none; } + .dijitGutter { - + /* gutter is just a place holder for empty space between panes in BorderContainer */ position: absolute; - font-size: 1px; + font-size: 1px; /* needed by IE6 even though div is empty, otherwise goes to 15px */ } + +/* SplitContainer + + 'V' == container that splits vertically (up/down) + 'H' = horizontal (left/right) +*/ + .dijitSplitter { position: absolute; overflow: hidden; - z-index: 10; + z-index: 10; /* above the panes so that splitter focus is visible on FF, see #7583*/ background-color: #fff; border-color: gray; border-style: solid; border-width: 0; } .dj_ie .dijitSplitter { - z-index: 1; + z-index: 1; /* behind the panes so that pane borders aren't obscured see test_Gui.html/[14392] */ } + .dijitSplitterActive { z-index: 11 !important; } + .dijitSplitterCover { position:absolute; z-index:-1; @@ -705,13 +845,17 @@ body .dijitAlignClient { position: absolute; } width:100%; height:100%; } + .dijitSplitterCoverActive { z-index:3 !important; } + +/* #6945: stop mouse events */ .dj_ie .dijitSplitterCover { background: white; filter: alpha(opacity=0); } + .dijitSplitterH { height: 7px; border-top:1px; @@ -733,9 +877,11 @@ body .dijitAlignClient { position: absolute; } outline-style:dotted; outline-width: 2px; } + .dijitSplitPane { position: absolute; } + .dijitSplitContainerSizerH, .dijitSplitContainerSizerV { position:absolute; @@ -747,15 +893,18 @@ body .dijitAlignClient { position: absolute; } border-color: ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight; margin: 0; } + .dijitSplitContainerSizerH .thumb, .dijitSplitterV .dijitSplitterThumb { overflow:hidden; position:absolute; top:49%; } + .dijitSplitContainerSizerV .thumb, .dijitSplitterH .dijitSplitterThumb { position:absolute; left:49%; } + .dijitSplitterShadow, .dijitSplitContainerVirtualSizerH, .dijitSplitContainerVirtualSizerV { @@ -766,12 +915,14 @@ body .dijitAlignClient { position: absolute; } filter: Alpha(Opacity=50); margin: 0; } + .dj_ie .dijitSplitterV, .dijitSplitContainerVirtualSizerH { cursor: w-resize; } .dj_ie .dijitSplitterH, .dijitSplitContainerSizerV, .dijitSplitContainerVirtualSizerV { cursor: n-resize; } + .dijit_a11y .dijitSplitterH { border-top:1px solid #d3d3d3 !important; border-bottom:1px solid #d3d3d3 !important; @@ -780,14 +931,24 @@ body .dijitAlignClient { position: absolute; } border-left:1px solid #d3d3d3 !important; border-right:1px solid #d3d3d3 !important; } + +/* ContentPane */ + .dijitContentPane { display: block; - overflow: auto; + overflow: auto; /* if we don't have this (or overflow:hidden), then Widget.resizeTo() doesn't make sense for ContentPane */ } + .dijitContentPaneSingleChild { - + /* + * if the ContentPane holds a single layout widget child which is being sized to match the content pane, + * then the ContentPane should never get a scrollbar (but it does due to browser bugs, see #9449 + */ overflow: hidden; } + +/* TitlePane */ + .dijitTitlePane { display: block; overflow: hidden; @@ -795,45 +956,48 @@ body .dijitAlignClient { position: absolute; } .dijitTitlePaneTitle { cursor: pointer; } -.dijitFixedOpen { - +.dijitFixedOpen, .dijitFixedClosed { + /* TitlePane that cannot be toggled */ cursor: default; } .dijitTitlePaneTitle * { vertical-align: middle; } .dijitTitlePane .dijitArrowNodeInner { - + /* normally, hide arrow text in favor of icon */ display: none; } .dijit_a11y .dijitTitlePane .dijitArrowNodeInner { - + /* ... except in a11y mode, then show text arrow */ display:inline !important; - font-family: monospace; + font-family: monospace; /* because - and + are different widths */ } .dijit_a11y .dijitTitlePane .dijitArrowNode { - + /* ... and hide icon */ display:none; } + .dj_ie6 .dijitTitlePaneContentOuter, .dj_ie6 .dijitTitlePane .dijitTitlePaneTitle { - + /* force hasLayout to ensure borders etc, show up */ zoom: 1; } + +/* Color Palette + * Sizes designed so that table cell positions match icons in underlying image, + * which appear at 20x20 intervals. + */ + .dijitColorPalette { border: 1px solid #999; background: #fff; position: relative; } -img.dijitColorPaletteUnder { - - border-style: none; - position: absolute; - left: 0; - top: 0; -} + .dijitColorPalette .dijitPaletteTable { - + /* Table that holds the palette cells, and overlays image file with color swatches. + * padding/margin to align table with image. + */ padding: 2px 3px 3px 3px; position: relative; overflow: hidden; @@ -843,52 +1007,59 @@ img.dijitColorPaletteUnder { .dj_ie6 .dijitColorPalette .dijitPaletteTable, .dj_ie7 .dijitColorPalette .dijitPaletteTable, .dj_iequirks .dijitColorPalette .dijitPaletteTable { - + /* using padding above so that focus border isn't cutoff on moz/webkit, + * but using margin on IE because padding doesn't seem to work + */ padding: 0; margin: 2px 3px 3px 3px; } + .dijitColorPalette .dijitPaletteCell { - - height: 20px; - width: 20px; + /* <td> in the <table> */ font-size: 1px; vertical-align: middle; text-align: center; + background: none; } .dijitColorPalette .dijitPaletteImg { - - width: 16px; - height: 14px; + /* Called dijitPaletteImg for back-compat, this actually wraps the color swatch with a border and padding */ + padding: 1px; /* white area between gray border and color swatch */ border: 1px solid #999; + margin: 2px 1px; cursor: default; - vertical-align: middle; + font-size: 1px; /* prevent <span> from getting bigger just to hold a character */ } -.dj_iequirks .dijitColorPalette .dijitPaletteImg { - margin: 1px; +.dj_gecko .dijitColorPalette .dijitPaletteImg { + padding-bottom: 0; /* workaround rendering glitch on FF, it adds an extra pixel at the bottom */ +} +.dijitColorPalette .dijitColorPaletteSwatch { + /* the actual part where the color is */ + width: 14px; + height: 12px; } .dijitPaletteTable td { - padding: 0px; + padding: 0; } .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg { - + /* hovered color swatch */ border: 1px solid #000; } + .dijitColorPalette .dijitPaletteCellActive .dijitPaletteImg, .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg { border: 2px solid #000; + margin: 1px 0; /* reduce margin to compensate for increased border */ } + + .dijit_a11y .dijitColorPalette .dijitPaletteTable, .dijit_a11y .dijitColorPalette .dijitPaletteTable * { - + /* table cells are to catch events, but the swatches are in the PaletteImg behind the table */ background-color: transparent !important; } -.dj_gecko .dijit_a11y .dijitColorPalette .dijitPaletteCellFocused .dijitPaletteImg { - border: 3px dotted #000; - margin: -1px; -} -.dijit_a11y .dijitColorPalette .dijitPaletteCellHover .dijitPaletteImg { - border: 2px solid #000 !important; -} + +/* AccordionContainer */ + .dijitAccordionContainer { border:1px solid #b7b7b7; border-top:0 !important; @@ -899,39 +1070,51 @@ img.dijitColorPaletteUnder { .dijitAccordionTitleSelected { cursor: default; } + +/* images off, high-contrast mode styles */ .dijitAccordionTitle .arrowTextUp, .dijitAccordionTitle .arrowTextDown { display: none; font-size: 0.65em; font-weight: normal !important; } + .dijit_a11y .dijitAccordionTitle .arrowTextUp, .dijit_a11y .dijitAccordionTitleSelected .arrowTextDown { display: inline; } + .dijit_a11y .dijitAccordionTitleSelected .arrowTextUp { display: none; } -.dj_ie6 .dijitAccordionTitle, -.dj_iequirks .dijitAccordionTitle { - - zoom: 1; + +.dijitAccordionChildWrapper { + /* this is the node whose height is adjusted */ + overflow: hidden; } + +/* Calendar */ + .dijitCalendarContainer { - width: auto; + width: auto; /* in case user has specified a width for the TABLE nodes, see #10553 */ } .dijitCalendarContainer th, .dijitCalendarContainer td { padding: 0; + vertical-align: middle; } + .dijitCalendarNextYear { margin:0 0 0 0.55em; } + .dijitCalendarPreviousYear { margin:0 0.55em 0 0; } + .dijitCalendarIncrementControl { vertical-align: middle; } + .dijitCalendarIncrementControl, .dijitCalendarDateTemplate, .dijitCalendarMonthLabel, @@ -939,18 +1122,29 @@ img.dijitColorPaletteUnder { .dijitCalendarNextYear { cursor: pointer; } + .dijitCalendarDisabledDate { color: gray; text-decoration: line-through; cursor: default; } + .dijitSpacer { - + /* don't display it, but make it affect the width */ position: relative; height: 1px; overflow: hidden; visibility: hidden; } + +/* Styling for month drop down list */ + +.dijitCalendarMonthMenu .dijitCalendarMonthLabel { + text-align:center; +} + +/* Menu */ + .dijitMenu { border:1px solid black; background-color:white; @@ -960,26 +1154,38 @@ img.dijitColorPaletteUnder { border-width:0; background-color:white; } + +/* workaround for webkit bug #8427, remove this when it is fixed upstream */ .dj_webkit .dijitMenuTable td[colspan="2"]{ border-right:hidden; } + .dijitMenuItem { text-align: left; white-space: nowrap; padding:.1em .2em; cursor:pointer; } + .dijitMenuPassive .dijitMenuItemHover, .dijitMenuItemSelected { - + /* + * dijitMenuItemHover refers to actual mouse over + * dijitMenuItemSelected is used after a menu has been "activated" by + * clicking it, tabbing into it, or being opened from a parent menu, + * and denotes that the menu item has focus or that focus is on a child + * menu + */ background-color:black; color:white; } + .dijitMenuItemIcon, .dijitMenuExpand { background-repeat: no-repeat; } + .dijitMenuItemDisabled * { - + /* for a disabled menu item, just set it to mostly transparent */ opacity:0.5; cursor:default; } @@ -990,10 +1196,12 @@ img.dijitColorPaletteUnder { color:gray !important; filter: alpha(opacity=35); } + .dijitMenuItemLabel { position: relative; vertical-align: middle; } + .dijit_a11y .dijitMenuItemSelected { border: 1px dotted black !important; } @@ -1008,28 +1216,35 @@ img.dijitColorPaletteUnder { .dj_ie8 .dijit_a11y .dijitMenuItemLabel { position:static; } + .dijitMenuExpandA11y { display: none; } .dijit_a11y .dijitMenuExpandA11y { display: inline; } + .dijitMenuSeparator td { border: 0; padding: 0; } + +/* separator can be two pixels -- set border of either one to 0 to have only one */ .dijitMenuSeparatorTop { height: 50%; margin: 0; margin-top:3px; font-size: 1px; } + .dijitMenuSeparatorBottom { height: 50%; margin: 0; margin-bottom:3px; font-size: 1px; } + +/* the checked menu item */ .dijitCheckedMenuItemIconChar { vertical-align: middle; visibility:hidden; @@ -1044,21 +1259,29 @@ img.dijitColorPaletteUnder { display: none; } .dj_ie .dijit_a11y .dijitMenuBar .dijitMenuItem { - - margin: 0px; + /* so bottom border of MenuBar appears on IE7 in high-contrast mode */ + margin: 0; } + +/* StackContainer */ + .dijitStackController .dijitToggleButtonChecked * { - cursor: default; + cursor: default; /* because pressing it has no effect */ } + +/* TabContainer */ + .dijitTabContainerNoLayout { - width: 100%; + width: 100%; /* otherwise ScrollingTabController goes to 50K pixels wide */ } + .dijitTabContainerBottom-tabs, .dijitTabContainerTop-tabs, .dijitTabContainerLeft-tabs, .dijitTabContainerRight-tabs { - overflow: visible !important; + overflow: visible !important; /* so tabs can cover up border adjacent to container */ } + .dijitTabContainerBottom-container, .dijitTabContainerTop-container, .dijitTabContainerLeft-container, @@ -1075,39 +1298,46 @@ img.dijitColorPaletteUnder { .dijitTabListWrapper { overflow: hidden; } + .dijit_a11y .tabStripButton img { - + /* hide the icons (or rather the empty space where they normally appear) because text will appear instead */ display: none; } + .dijitTabContainerTop-tabs { border-bottom: 1px solid black; } .dijitTabContainerTop-container { - border-top: 0px; + border-top: 0; } + .dijitTabContainerLeft-tabs { border-right: 1px solid black; float: left; } .dijitTabContainerLeft-container { - border-left: 0px; + border-left: 0; } + .dijitTabContainerBottom-tabs { border-top: 1px solid black; } .dijitTabContainerBottom-container { - border-bottom: 0px; + border-bottom: 0; } + .dijitTabContainerRight-tabs { border-left: 1px solid black; float: left; } .dijitTabContainerRight-container { - border-right: 0px; + border-right: 0; } + DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled { cursor: auto; } + .dijitTab { position:relative; cursor:pointer; @@ -1115,107 +1345,147 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled { z-index:3; } .dijitTab * { - + /* make tab icons and close icon line up w/text */ vertical-align: middle; } .dijitTabChecked { - cursor: default; + cursor: default; /* because clicking will have no effect */ } + .dijitTabContainerTop-tabs .dijitTab { - top: 1px; + top: 1px; /* to overlap border on .dijitTabContainerTop-tabs */ } .dijitTabContainerBottom-tabs .dijitTab { - top: -1px; + top: -1px; /* to overlap border on .dijitTabContainerBottom-tabs */ } .dijitTabContainerLeft-tabs .dijitTab { - left: 1px; + left: 1px; /* to overlap border on .dijitTabContainerLeft-tabs */ } .dijitTabContainerRight-tabs .dijitTab { - left: -1px; + left: -1px; /* to overlap border on .dijitTabContainerRight-tabs */ } + + .dijitTabContainerTop-tabs .dijitTab, .dijitTabContainerBottom-tabs .dijitTab { - - display:inline-block; - #zoom: 1; - #display:inline; + /* Inline-block */ + display:inline-block; /* webkit and FF3 */ + #zoom: 1; /* set hasLayout:true to mimic inline-block */ + #display:inline; /* don't use .dj_ie since that increases the priority */ } + .dijitTabInnerDiv { position:relative; } + + .tabStripButton { z-index: 12; } + .dijitTabButtonDisabled .tabStripButton { display: none; } + + .dijitTabCloseButton { margin-left: 1em; } + .dijitTabCloseText { display:none; } + +.dijitTab .tabLabel { + /* make sure tabs w/close button and w/out close button are same height, even w/small (<15px) font. + * assumes <=15px height for close button icon. + */ + min-height: 15px; + display: inline-block; +} +.dijitNoIcon { + /* applied to <img>/<span> node when there is no icon specified */ + display: none; +} +.dj_ie6 .dijitTab .dijitNoIcon { + /* because min-height (on .tabLabel, above) doesn't work on IE6 */ + display: inline; + height: 15px; + width: 1px; +} + +/* images off, high-contrast mode styles */ + .dijit_a11y .dijitTabCloseButton { background-image: none !important; width: auto !important; height: auto !important; - border: thin dotted; -} -.dijit_a11y .dijitTabCloseButtonHover { - border:thin solid; } + .dijit_a11y .dijitTabCloseText { display: inline; } -.dijit_a11y .dijitTabChecked { - - border-style:dashed !important; -} -.dijit_a11y .dijitTabInnerDiv { - border-left:none !important; - } + .dijitTabPane, .dijitStackContainer-child, .dijitAccordionContainer-child { - + /* children of TabContainer, StackContainer, and AccordionContainer shouldn't have borders + * b/c a border is already there from the TabContainer/StackContainer/AccordionContainer itself. + */ border: none !important; } + +/* InlineEditBox */ .dijitInlineEditBoxDisplayMode { - border: 1px solid transparent; + border: 1px solid transparent; /* so keyline (border) on hover can appear without screen jump */ cursor: text; } + .dijit_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_ie6 .dijitInlineEditBoxDisplayModeHover { - + /* An InlineEditBox in view mode (click this to edit the text) */ background-color: #e2ebf2; border: solid 1px black; } + .dijitInlineEditBoxDisplayModeDisabled { cursor: default; } + +/* Tree */ +.dijitTree { + overflow: auto; /* for scrollbars when Tree has a height setting, and to prevent wrapping around float elements, see #11491 */ +} + .dijitTreeIndent { - + /* amount to indent each tree node (relative to parent node) */ width: 19px; } + .dijitTreeRow, .dijitTreeContent { white-space: nowrap; } + .dijitTreeRow img { - + /* make the expando and folder icons line up with the label */ vertical-align: middle; } + .dijitTreeContent { cursor: default; } + .dijitExpandoText { display: none; } + .dijit_a11y .dijitExpandoText { display: inline; padding-left: 10px; @@ -1225,14 +1495,19 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled { border-width: thin; cursor: pointer; } + .dijitTreeLabel { - margin: 0px 4px; + margin: 0 4px; } + +/* Dialog */ + .dijitDialog { position: absolute; z-index: 999; - overflow: hidden; + overflow: hidden; /* override overflow: auto; from ContentPane to make dragging smoother */ } + .dijitDialogTitleBar { cursor: move; } @@ -1250,38 +1525,49 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled { display: none; background: transparent !important; } + .dijitDialogUnderlay { background: #eee; opacity: 0.5; } + .dj_ie .dijitDialogUnderlay { filter: alpha(opacity=50); } + +/* images off, high-contrast mode styles */ .dijit_a11y .dijitSpinnerButtonContainer, .dijit_a11y .dijitDialog { opacity: 1 !important; background-color: white !important; } + .dijitDialog .closeText { display:none; - + /* for the onhover border in high contrast on IE: */ position:absolute; } + .dijit_a11y .dijitDialog .closeText { display:inline; } + +/* Slider */ + .dijitSliderMoveable { z-index:99; position:absolute !important; display:block; vertical-align:middle; } + .dijitSliderMoveableH { right:0; } .dijitSliderMoveableV { right:50%; } + .dijit_a11y DIV.dijitSliderImageHandle, .dijitSliderImageHandle { margin:0; @@ -1296,177 +1582,217 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled { font-size: 0; } .dj_ie7 .dijitSliderImageHandle { - overflow: hidden; + overflow: hidden; /* IE7 workaround to make slider handle VISIBLE in non-a11y mode */ } .dj_ie7 .dijit_a11y .dijitSliderImageHandle { - overflow: visible; + overflow: visible; /* IE7 workaround to make slider handle VISIBLE in a11y mode */ } .dijit_a11y .dijitSliderFocused .dijitSliderImageHandle { border:4px solid #000; height:8px; width:8px; } + .dijitSliderImageHandleV { top:-8px; right: -50%; } + .dijitSliderImageHandleH { left:50%; top:-5px; vertical-align:top; } + .dijitSliderBar { border-style:solid; border-color:black; cursor: pointer; } + .dijitSliderBarContainerV { position:relative; height:100%; z-index:1; } + .dijitSliderBarContainerH { position:relative; z-index:1; } + .dijitSliderBarH { height:4px; border-width:1px 0; } + .dijitSliderBarV { width:4px; border-width:0 1px; } + .dijitSliderProgressBar { background-color:red; z-index:1; } + .dijitSliderProgressBarV { position:static !important; - height:0%; + height:0; vertical-align:top; text-align:left; } + .dijitSliderProgressBarH { position:absolute !important; - width:0%; + width:0; vertical-align:middle; overflow:visible; } + .dijitSliderRemainingBar { overflow:hidden; background-color:transparent; z-index:1; } + .dijitSliderRemainingBarV { height:100%; text-align:left; } + .dijitSliderRemainingBarH { width:100% !important; } + +/* the slider bumper is the space consumed by the slider handle when it hangs over an edge */ .dijitSliderBumper { overflow:hidden; z-index:1; } + .dijitSliderBumperV { width:4px; height:8px; border-width:0 1px; } + .dijitSliderBumperH { width:8px; height:4px; border-width:1px 0; } + .dijitSliderBottomBumper, .dijitSliderLeftBumper { background-color:red; } + .dijitSliderTopBumper, .dijitSliderRightBumper { background-color:transparent; } + .dijitSliderDecoration { text-align:center; } -.dijitSliderV TD { - position: relative; + +.dijitSliderDecorationC, +.dijitSliderDecorationV { + position: relative; /* needed for IE+quirks+RTL+vertical (rendering bug) but add everywhere for custom styling consistency but this messes up IE horizontal sliders */ } + .dijitSliderDecorationH { width: 100%; } + .dijitSliderDecorationV { height: 100%; } + .dijitSliderButton { font-family:monospace; margin:0; padding:0; display:block; } + .dijit_a11y .dijitSliderButtonInner { visibility:visible !important; } + .dijitSliderButtonContainer { text-align:center; - height:0; + height:0; /* ??? */ } .dijitSliderButtonContainer * { cursor: pointer; } + .dijitSlider .dijitButtonNode { padding:0; display:block; } + .dijitRuleContainer { position:relative; overflow:visible; } + .dijitRuleContainerV { height:100%; line-height:0; float:left; text-align:left; } + .dj_opera .dijitRuleContainerV { line-height:2%; } + .dj_ie .dijitRuleContainerV { line-height:normal; } + .dj_gecko .dijitRuleContainerV { - margin:0 0 1px 0; + margin:0 0 1px 0; /* mozilla bug workaround for float:left,height:100% block elements */ } + .dijitRuleMark { position:absolute; border:1px solid black; line-height:0; height:100%; } + .dijitRuleMarkH { width:0; border-top-width:0 !important; border-bottom-width:0 !important; border-left-width:0 !important; } + .dijitRuleLabelContainer { position:absolute; } + .dijitRuleLabelContainerH { text-align:center; display:inline-block; } + .dijitRuleLabelH { position:relative; left:-50%; } + .dijitRuleLabelV { - + /* so that long labels don't overflow to multiple rows, or overwrite slider itself */ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } + .dijitRuleMarkV { height:0; border-right-width:0 !important; @@ -1475,9 +1801,11 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled { width:100%; left:0; } + .dj_ie .dijitRuleLabelContainerV { margin-top:-.55em; } + .dijit_a11y .dijitSliderReadOnly, .dijit_a11y .dijitSliderDisabled { opacity:0.6; @@ -1486,70 +1814,100 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled { .dj_ie .dijit_a11y .dijitSliderDisabled .dijitSliderBar { filter: alpha(opacity=40); } + +/* + and - Slider buttons: override theme settings to display icons */ .dijit_a11y .dijitSlider .dijitSliderButtonContainer DIV { - font-family: monospace; + font-family: monospace; /* otherwise hyphen is larger and more vertically centered */ font-size: 1em; line-height: 1em; height: auto; width: auto; - margin: 0px 4px; + margin: 0 4px; } + +/* Icon-only buttons (often in toolbars) still display the text in high-contrast mode */ .dijit_a11y .dijitButtonContents .dijitButtonText, .dijit_a11y .dijitTab .tabLabel { display: inline !important; } + +/* TextArea, SimpleTextArea */ .dijitTextArea { width:100%; - overflow-y: auto; + overflow-y: auto; /* w/out this IE's SimpleTextArea goes to overflow: scroll */ } .dijitTextArea[cols] { - width:auto; + width:auto; /* SimpleTextArea cols */ } .dj_ie .dijitTextAreaCols { width:auto; } + +.dijitExpandingTextArea { + /* for auto exanding textarea (called Textarea currently, rename for 2.0) don't want to display the grip to resize */ + resize: none; +} + + +/* Toolbar + * Note that other toolbar rules (for objects in toolbars) are scattered throughout this file. + */ + .dijitToolbarSeparator { height: 18px; width: 5px; padding: 0 1px; margin: 0; } + +/* Editor */ .dijitIEFixedToolbar { position:absolute; - + /* top:0; */ top: expression(eval((document.documentElement||document.body).scrollTop)); } + .dijitEditor { - display: block; + display: block; /* prevents glitch on FF with InlineEditBox, see #8404 */ } + .dijitEditorDisabled, .dijitEditorReadOnly { color: gray; } + +/* TimePicker */ + .dijitTimePickerItemInner { text-align:center; border:0; padding:2px 8px 2px 8px; } + .dijitTimePickerTick, .dijitTimePickerMarker { border-bottom:1px solid gray; } + .dijitTimePicker .dijitDownArrowButton { border-top: none !important; } + .dijitTimePickerTick { color:#CCC; } + .dijitTimePickerMarker { color:black; background-color:#CCC; } + .dijitTimePickerItemSelected { font-weight:bold; color:#333; background-color:#b7cdee; } + .dijitTimePickerItemHover { background-color:gray; color:white; @@ -1561,8 +1919,10 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled { .dijit_a11y .dijitTimePickerItemHover .dijitTimePickerItemInner { border: dashed 4px black; } + + .dijitToggleButtonIconChar { - + /* character (instead of icon) to show that ToggleButton is checked */ display:none !important; } .dijit_a11y .dijitToggleButton .dijitToggleButtonIconChar { @@ -1570,22 +1930,26 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled { visibility:hidden; } .dj_ie6 .dijitToggleButtonIconChar, .dj_ie6 .tabStripButton .dijitButtonText { - font-family: "Arial Unicode MS"; + font-family: "Arial Unicode MS"; /* otherwise the a11y character (checkmark, arrow, etc.) appears as a box */ } .dijit_a11y .dijitToggleButtonChecked .dijitToggleButtonIconChar { - display: inline !important; + display: inline !important; /* In high contrast mode, display the check symbol */ visibility:visible !important; } + .dijitArrowButtonChar { display:none !important; } .dijit_a11y .dijitArrowButtonChar { display:inline !important; } + .dijit_a11y .dijitDropDownButton .dijitArrowButtonInner, .dijit_a11y .dijitComboButton .dijitArrowButtonInner { display:none !important; } + +/* Select */ .dijitSelect { margin: 0.2em; border-collapse: collapse; @@ -1593,7 +1957,7 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled { .dj_ie .dijitSelect, .dj_ie7 .dijitSelect, .dj_iequirks .dijitSelect { - vertical-align: middle; + vertical-align: middle; /* Set this back for what we hack in dijit inline */ } .dj_ie8 .dijitSelect .dijitButtonText { vertical-align: top; @@ -1611,7 +1975,7 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled { color:#999 !important; } .dijitSelect .dijitButtonContents { - padding: 0px; + padding: 0; background: transparent none; white-space: nowrap; text-align: left; @@ -1619,36 +1983,50 @@ DIV.dijitTabDisabled, .dj_ie DIV.dijitTabDisabled { .dijitSelectFixedWidth .dijitButtonContents { width: 100%; } + .dijitSelectMenu .dijitMenuItemIcon { - + /* avoid blank area in left side of menu (since we have no icons) */ display:none; } .dj_ie6 .dijitSelectMenu .dijitMenuItemLabel, .dj_ie7 .dijitSelectMenu .dijitMenuItemLabel { - + /* Set back to static due to bug in ie6/ie7 - See Bug #9651 */ position: static; } + +/* Fix the baseline of our label (for multi-size font elements) */ .dijitSelectLabel * { vertical-align: baseline; } + +/* Styling for the currently-selected option (rich text can mess this up) */ .dijitSelectSelectedOption * { font-weight: bold; } + +/* Fix the styling of the dropdown menu to be more combobox-like */ .dijitSelectMenu { border-width: 1px; } + +/* Style the different areas of the button to look like a "real" dropdown */ +/* Remove margins on the sub-table */ .dijitSelectMenu .dijitMenuTable { - margin: 0px; + margin: 0; background-color: transparent; } + +/* Used in cases, such as FullScreen plugin, when we need to force stuff to static positioning. */ .dijitForceStatic { position: static !important; } + +/**** Disabled cursor *****/ .dijitReadOnly *, .dijitDisabled *, .dijitReadOnly, .dijitDisabled { - + /* a region the user would be able to click on, but it's disabled */ cursor: default; } |