diff options
Diffstat (limited to 'lib/flat-ttrss/flat_combined.css')
| -rw-r--r-- | lib/flat-ttrss/flat_combined.css | 13256 |
1 files changed, 13256 insertions, 0 deletions
diff --git a/lib/flat-ttrss/flat_combined.css b/lib/flat-ttrss/flat_combined.css new file mode 100644 index 000000000..cbee39988 --- /dev/null +++ b/lib/flat-ttrss/flat_combined.css @@ -0,0 +1,13256 @@ +/* RTL files */ + +/* dijit */ + +/* layout */ + +/* dijit */ + +/* not in flat theme */ +/* dijit base */ + +/* dijit */ + +/* layout */ + +/* form */ + +/* icons */ + +/* rtl */ +.flat .dijitToolbar .dijitToggleButtonRtl, +.flat .dijitToolbar .dijitButtonRtl, +.flat .dijitToolbar .dijitDropDownButtonRtl, +.flat .dijitToolbar .dijitComboButtonRtl { + margin-left: 4px; + margin-right: auto; +} +.flat .dijitToolbar .dijitDropDownButtonRtl .dijitArrowButtonInner { + margin-left: auto; + margin-right: 4px; +} +.flat .dijitTabContainerTop-tabs .dijitTabRtl, +.flat .dijitTabContainerBottom-tabs .dijitTabRtl { + margin-right: 0; + margin-left: -1px; +} +.flat .dijitTabControllerRtl, +.flat .dijitTabControllerRtl .nowrapTabStrip { + text-align: right; +} +.flat .dijitTabRtl .dijitTabCloseButton { + margin-left: 0; + margin-right: 4px; +} +/* BorderContainer + +Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable. + +Styling the BorderContainer widget consists of the following: + +.dijitBorderContainer - for border and padding of the entire border container + +.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer. + +.dijitBorderContainer-dijitTabContainerTop, +.dijitBorderContainer-dijitTabContainerBottom, +.dijitBorderContainer-dijitTabContainerLeft, +.dijitBorderContainer-dijitTabContainerRight, +.dijitBorderContainer-dijitAccordionContainer -for border of the border containers within TabContainer or AccordionContainer widget + +.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers + +Splitters and gutters: + +.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter +.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter +.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter +.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter +.dijitSplitterHHover - for background-color of a hovered horizontal splitter +.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter +.dijitSplitterVHover - for background-color of a hovered vertical splitter +.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter +.dijitSplitterHActive - for background-color of an active horizontal splitter +.dijitSplitterVActive - for background-color of an active horizontal splitter +*/ +.flat .dijitBorderContainer { +/* matches the width of the splitters between panes */ + padding: 5px; +} +.flat .dijitSplitContainer-child, +.flat .dijitBorderContainer-child { + border: 1px solid #ccc; +} +.flat .dijitBorderContainer-dijitTabContainerTop, +.flat .dijitBorderContainer-dijitTabContainerBottom, +.flat .dijitBorderContainer-dijitTabContainerLeft, +.flat .dijitBorderContainer-dijitTabContainerRight, +.flat .dijitBorderContainer-dijitAccordionContainer { +/* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper), + * so override rule setting border on domNode + */ + border: none; +} +.flat .dijitBorderContainer-dijitBorderContainer { + border: 0; + padding: 0; +} +.flat .dijitSplitterH, +.flat .dijitGutterH { + background: none; + border: 0; + height: 5px; +} +.flat .dijitSplitterH .dijitSplitterThumb { + background: #ccc; + height: 1px; + top: 2px; + width: 19px; +} +.flat .dijitSplitterV, +.flat .dijitGutterV { + background: none; + border: 0; + width: 5px; + margin: 0; +} +.flat .dijitSplitterV .dijitSplitterThumb { + background: #ccc; + height: 19px; + left: 2px; + width: 1px; + margin: 0; +} +.flat .dijitSplitterHHover, +.flat .dijitSplitterVHover { + font-size: 1px; + background: #f2f2f2; +} +.flat .dijitSplitterHHover .dijitSplitterThumb, +.flat .dijitSplitterVHover .dijitSplitterThumb { + background: #999; +} +.flat .dijitSplitterHActive, +.flat .dijitSplitterVActive { + font-size: 1px; + background: #f2f2f2; +} +.flat .dijitSplitterHActive .dijitSplitterThumb, +.flat .dijitSplitterVActive .dijitSplitterThumb { + background: #999; +} +/* TabContainer + * + * Styling TabContainer means styling the TabList and Its content container (dijitTitlePane) + * + * Tab List: (including 4 kinds of tab location) + * .dijitTabContainerTop-tabs - tablist container at top + * .dijitTabContainerBottom-tabs - tablist container at bottom + * .dijitTabContainerLeft-tabs - tablist container at left + * .dijitTabContainerRight-tabs - tablist container at right + * + * Tab Strip Button: + * .dijitTabStripIcon - tab strip button icon + * .dijitTabStripMenuIcon - down arrow icon position + * .dijitTabStripSlideLeftIcon - left arrow icon position + * .dijitTabStripSlideRightIcon - right arrow icon position + * + * .tabStripButtonDisabled - styles for disabled tab strip buttons + * + * Tab Button: + * .dijitTabContainerTop-tabs .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 .dijitTab + * - styles for selected status of top tab button + * same to Bottom, Left, Right Tabs + * + * .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 + * .dijitTabCloseButtonActive - styles when mouse down on close action button + * + * Tab Button: (checked status) + * + * Tab Content Container: + * .dijitTabContainerTop-dijitContentPane + * .dijitTabContainerBottom-dijitContentPane + * .dijitTabContainerLeft-dijitContentPane + * .dijitTabContainerRight-dijitContentPane - for background and padding + * + * Nested Tabs: + * .dijitTabContainerNested - Container for nested tabs + * .dijitTabContainerTabListNested - tab list container for nested tabs + */ +.flat .dijitTabContainer { + border-radius: 4px; +} +.flat .dijitTabPaneWrapper { + background: #fff; + border: 1px solid #ccc; + margin: 0; + padding: 0; + border-radius: 0 0 4px 4px; +} +.flat .dijitTabContainerTop-tabs, +.flat .dijitTabContainerBottom-tabs, +.flat .dijitTabContainerLeft-tabs, +.flat .dijitTabContainerRight-tabs { + border: none; +} +.flat .dijitTabSpacer { + display: none; +} +.flat .dijitTab { + border: 1px solid transparent; + background-color: #fff; + text-align: center; + -webkit-transition-property: background, padding, margin; + -moz-transition-property: background, padding, margin; + -o-transition-property: background, padding, margin; + -ms-transition-property: background, padding, margin; + transition-property: background, padding, margin; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + -o-transition-duration: 0.2s; + -ms-transition-duration: 0.2s; + transition-duration: 0.2s; + -webkit-transition-timing-function: ease; + -moz-transition-timing-function: ease; + -o-transition-timing-function: ease; + -ms-transition-timing-function: ease; + transition-timing-function: ease; + position: relative; + z-index: 0; +} +.flat .dijitTab:before { + content: ""; + display: block; + position: absolute; +} +.flat .dijitTabHover { + background-color: #f2f2f2; +} +.flat .dijitTabActive { + background-color: #e6e6e6; +} +.flat .dijitTabChecked { + border: 1px solid #ccc; + z-index: 1; +} +.flat .dijitTabChecked.dijitTabHover, +.flat .dijitTabChecked.dijitTabActive { + border: 1px solid #ccc; + background-color: #fff; + color: #424242; +} +.flat .dijitTabDisabled { + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .tabStripButton { + background-color: transparent; + border: none; +} +.flat .dijitTabCloseButton { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: 1; + font-size: 1em; + vertical-align: middle; + margin-left: 4px; + opacity: 0.35; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)"; + filter: alpha(opacity=35); +} +.flat .dijitTabCloseButton:before { + content: "\f00e"; +} +.flat .dijitTabCloseButtonHover { + opacity: 0.75; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; + filter: alpha(opacity=75); +} +.flat .dijitTabCloseButtonActive { + opacity: 1; + -ms-filter: none; + filter: none; +} +.flat .dijitTabContainerTop-tabs .dijitTab { + margin-right: 0; + padding: 6px 16px; + border-bottom-color: #ccc; + border-left: none; + border-right: none; +} +.flat .dijitTabContainerTop-tabs .dijitTabChecked { + border-bottom: 1px solid #fff; + border-left: 1px solid #ccc; + border-right: 1px solid #ccc; +} +.flat .dijitTabContainerTop-tabs .dijitTabChecked:before { + height: 3px; + background: #257aa7; + top: -1px; + left: -1px; + right: -1px; +} +.flat .dijitTabListContainer-top { + margin-top: 1px; +} +.flat .dijitTabListContainer-top .dijitTab { + top: 0; +} +.flat .dijitTabPaneWrapper.dijitTabContainerBottom-container { + border-radius: 4px 4px 0 0; +} +.flat .dijitTabContainerBottom-tabs .dijitTab { + margin-right: 0; + padding: 6px 16px; + border-top-color: #ccc; + border-left: none; + border-right: none; +} +.flat .dijitTabContainerBottom-tabs .dijitTabChecked { + border-top: 1px solid #fff; + border-left: 1px solid #ccc; + border-right: 1px solid #ccc; +} +.flat .dijitTabContainerBottom-tabs .dijitTabChecked:before { + height: 3px; + background: #257aa7; + bottom: -1px; + left: -1px; + right: -1px; +} +.flat .dijitTabListContainer-bottom { + margin-top: -1px; +} +.flat .dijitTabListContainer-bottom .dijitTab { + top: 0; +} +.flat .dijitTabPaneWrapper.dijitTabContainerLeft-container { + border-radius: 0 4px 4px 0; +} +.flat .dijitTabContainerLeft-tabs .dijitTab { + margin-bottom: 0; + padding: 8px 12px; + border-right-color: #ccc; + border-top: none; + border-bottom: none; +} +.flat .dijitTabContainerLeft-tabs .dijitTabChecked { + border-right: 1px solid #fff; + border-top: 1px solid #ccc; + border-bottom: 1px solid #ccc; +} +.flat .dijitTabContainerLeft-tabs .dijitTabChecked:before { + width: 3px; + background: #257aa7; + bottom: -1px; + left: -1px; + top: -1px; +} +.flat .dijitTabPaneWrapper.dijitTabContainerRight-container { + border-radius: 4px 0 0 4px; +} +.flat .dijitTabContainerRight-tabs .dijitTab { + margin-bottom: 0; + padding: 8px 12px; + border-left-color: #ccc; + border-top: none; + border-bottom: none; +} +.flat .dijitTabContainerRight-tabs .dijitTabChecked { + border-left: 1px solid #fff; + border-top: 1px solid #ccc; + border-bottom: 1px solid #ccc; +} +.flat .dijitTabContainerRight-tabs .dijitTabChecked:before { + width: 3px; + background: #257aa7; + bottom: -1px; + right: -1px; + top: -1px; +} +.flat .tabStripButton { + background-color: #fff; + border: 1px solid transparent; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -o-transition-property: background-color; + -ms-transition-property: background-color; + transition-property: background-color; +} +.flat .dijitTabListContainer-top .tabStripButton, +.flat .dijitTabListContainer-bottom .tabStripButton { + padding: 4px 8px; + margin-left: 0; + margin-right: 0; +} +.flat .dijitTabListContainer-top .tabStripButton { + margin-bottom: 1px; +} +.flat .dijitTabListContainer-bottom .tabStripButton { + margin-top: 1px; +} +.flat .tabStripButtonHover { + background-color: #f2f2f2; +} +.flat .tabStripButtonActive { + background-color: #e6e6e6; +} +.flat .dijitTabStripIcon { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: #257aa7; + vertical-align: middle; +} +.flat .dijitTabStripIcon:before { + content: "\f004"; +} +.flat .dijitTabStripSlideRightIcon:before { + content: "\f005"; +} +.flat .dijitTabStripMenuIcon:before { + content: "\f006"; +} +.flat .dijitTabListContainer-top .tabStripButtonDisabled, +.flat .dijitTabListContainer-bottom .tabStripButtonDisabled { + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitTabContainerNested .dijitTabListWrapper { + height: auto; +} +.flat .dijitTabContainerTabListNested .dijitTab { + color: #257aa7; + margin: 4px; + padding: 4px 8px; + border: 1px solid transparent; + border-radius: 4px; + -webkit-transition-property: background-color, border-color; + -moz-transition-property: background-color, border-color; + -o-transition-property: background-color, border-color; + -ms-transition-property: background-color, border-color; + transition-property: background-color, border-color; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + -o-transition-duration: 0.3s; + -ms-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.flat .dijitTabContainerTabListNested .dijitTabHover { + background-color: #f2f2f2; +} +.flat .dijitTabContainerTabListNested .dijitTabActive { + color: #257aa7; + background-color: #e6e6e6; +} +.flat .dijitTabContainerTabListNested .dijitTabChecked, +.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabHover, +.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabActive { + color: #fff; + background-color: #257aa7; +} +.flat .dijitTabContainerTabListNested .dijitTabChecked:before, +.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabHover:before, +.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabActive:before { + display: none; +} +.flat .dijitTabContainerTabListNested.dijitTabContainerTop-tabs .dijitTab { + margin-right: 4px; +} +.flat .dijitTabContainerTabListNested.dijitTabContainerBottom-tabs .dijitTab { + margin-right: 4px; +} +.flat .dijitTabContainerTabListNested.dijitTabContainerLeft-tabs .dijitTab { + margin-bottom: 4px; +} +.flat .dijitTabContainerTabListNested.dijitTabContainerRight-tabs .dijitTab { + margin-bottom: 4px; +} +.flat .dijitTabPaneWrapperNested { + border: none; /* prevent double border */ + -webkit-box-shadow: none; + box-shadow: none; +} +/* ContentPane + * + * .dijitContentPane + * set padding for basic content pane + * + * Nested layouts: + * + * .dijitTabContainerTop-dijitContentPane, + * .dijitTabContainerLeft-dijitContentPane, + * .dijitTabContainerBottom-dijitContentPane, + * .dijitTabContainerRight-dijitContentPane + * set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container + * + * .dijitAccordionContainer-dijitContentPane + * set background-color and padding of ContentPane nested within Accordion + * + * .dijitSplitContainer-dijitContentPane, + * set background-color and padding of ContentPane nested within a SplitContainer + * + * .dijitBorderContainer-dijitContentPane + * set background-color and padding of ContentPane nested within a BorderContainer + */ +.flat .dijitContentPane { + background-color: #fff; + padding: 8px; +} +.flat .dijitTabContainerTop-dijitContentPane, +.flat .dijitTabContainerLeft-dijitContentPane, +.flat .dijitTabContainerBottom-dijitContentPane, +.flat .dijitTabContainerRight-dijitContentPane, +.flat .dijitAccordionContainer-dijitContentPane { + background-color: #fff; + padding: 8px; + left: 0 !important; + top: 0 !important; +} +.flat .dijitAccordionTitle .arrowTextUp, +.flat .dijitAccordionTitle .arrowTextDown { + float: left; +} +/* Accordion + * + * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer) + * and the title inside of it (dijitAccordionTitle). There are 4 basic states to style: + * + * 1. closed pane (and default styling): + * .dijitAccordionInnerContainer - container for each accordion child + * .dijitAccordionTitle - title for each accordion child + * + * 2. active closed pane (ie, mouse down on a title bar) + * .dijitAccordionInnerContainerActive - for background-color, border + * .dijitAccordionInnerContainerActive dijitAccordionTitle - for text color + * + * 3. open pane (expanded child) + * .dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane) + * setting a margin so that there's blue trim all the way around the child + * + * These rules need to override the closed pane active: + * + * .dijitAccordionInnerContainerSelected - for background-color, border + * .dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color + * + * 4. hovered pane, open or closed + * The selectors below affect hovering over both a closed pane (ie, hovering a title bar), + * and hovering over an open pane. Also, treat mouse down on an open pane as a hover: + * + * .dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border + * .dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color + */ +.flat .dijitAccordionContainer { + border: 0 none; + border-radius: 4px; +} +.flat .dijitAccordionInnerContainer { + background-color: #fff; + border: 1px solid #ccc; + border-radius: 4px; + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + -o-transition-property: background-color, border; + -ms-transition-property: background-color, border; + transition-property: background-color, border; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + -o-transition-duration: 0.3s; + -ms-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -o-transition-timing-function: linear; + -ms-transition-timing-function: linear; + transition-timing-function: linear; +} +.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainer { + margin-top: 0; + position: relative; +} +.flat .dijitAccordionTitle { + border-style: solid; + border-width: 1px; + border-color: #ccc; + padding: 4px; + border-radius: 4px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + border: 0 none; + border-radius: 4px; +} +.flat .dijitAccordionTitle .arrowTextUp, +.flat .dijitAccordionTitle .arrowTextDown { + display: none; + float: right; + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-align: center; + font-size: 0px; +} +.flat .dijitAccordionTitle .arrowTextUp:before, +.flat .dijitAccordionTitle .arrowTextDown:before { + content: "\f007"; + font-size: 18px; +} +.flat .dijitAccordionTitle .arrowTextUp { + display: block; +} +.flat .dijitAccordionTitle .arrowTextUp:before { + content: "\f006"; +} +.flat .dijitAccordionInnerContainerHover .dijitAccordionTitle { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitAccordionInnerContainerActive .dijitAccordionTitle { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitAccordionInnerContainerSelected { + border: 0 none; +} +.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle { + color: #fff; + background-color: #257aa7; + border-radius: 4px 4px 0 0; +} +.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextUp { + display: none; +} +.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextDown { + display: block; +} +.flat .dijitAccordionContainer .dijitAccordionChildWrapper { + background-color: #fff; + border: 1px solid #ccc; + border-top: 0 none; + position: relative; + z-index: 1; + clear: both; + border-radius: 0 0 4px 4px; +} +.flat .dijitAccordionInnerContainer { + border-radius: 0; +} +.flat .dijitAccordionInnerContainer .dijitAccordionTitle { + border-radius: 0; +} +.flat .dijitAccordionInnerContainer:not(:last-child) .dijitAccordionChildWrapper { + border-radius: 0; +} +.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainer { + border-top: 0 none; +} +.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainerSelected:last-child .dijitAccordionTitle { + border-radius: 0; +} +.flat .dijitAccordionInnerContainer:first-child, +.flat .dijitAccordionInnerContainer:first-child .dijitAccordionTitle { + border-radius: 4px 4px 0 0; +} +.flat .dijitAccordionInnerContainer:last-child, +.flat .dijitAccordionInnerContainer:last-child .dijitAccordionTitle { + border-radius: 0 0 4px 4px; +} +/* TitlePane */ +.flat .dijitTitlePaneRtl .dijitTitlePaneTitle { + text-align: right; +} +.flat .dijitTitlePaneRtl .dijitClosed .dijitArrowNode:before { + content: "\f006"; +} +.flat .dijitColorPaletteRtl .dijitColorPaletteUnder { + left: auto; + right: 0; +} +.dijitPopup { + border-radius: 4px; +} +/* ----- Drag and Drop ----- */ +.dojoDndItem { + border: 1px solid transparent; + cursor: pointer; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -ms-transition-duration: 0.25s; + transition-duration: 0.25s; + -webkit-transition-property: background-color, border-color, opacity; + -moz-transition-property: background-color, border-color, opacity; + -o-transition-property: background-color, border-color, opacity; + -ms-transition-property: background-color, border-color, opacity; + transition-property: background-color, border-color, opacity; +} +/* hover */ +.dojoDndItemOver { + background-color: #f5f5f5; + border-radius: 4px; +} +.dojoDndItemAnchor { + background-color: transparent; + border: 1px dashed #257aa7; + border-radius: 4px; +} +/* selected */ +.dojoDndItemBefore { + background: transparent; + padding-top: 2px; + border-top: 1px solid #257aa7; +} +.dojoDndItemAfter { + background: transparent; + padding-bottom: 2px; + border-bottom: 1px solid #257aa7; +} +/* Avatar */ +table.dojoDndAvatar { + display: block; +} +.dojoDndAvatarHeader td { + display: none; +} +.dojoDndAvatarHeader:before { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + display: table-cell; +} +/* cannot drop */ +.dojoDndMove .dojoDndAvatarHeader:before { + color: #dd2c00; + content: "\f01c"; +} +.dojoDndCopy .dojoDndAvatarHeader:before { + color: #dd2c00; + content: "\f01c"; +} +/* can drop */ +.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader:before { + color: #43a047; + content: "\f008"; +} +.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader:before { + color: #43a047; + content: "\f008"; +} +.dojoDndAvatarItem { + border-radius: 4px; +} +.dojoDndAvatarItem td > * { + padding: 4px 8px; + list-style-type: none; + background-color: #fff; + -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); + box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); +} +/* Calendar + * + * Styling Calendar mainly includes: + * + * 1. Calendar container + * .dijitCalendar - main container + * .dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active + * + * 2. Month + * .dijitCalendarMonthContainer + * .dijitCalendarMonthLabel + * .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month + * .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active + * + * 3. Date + * .dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S + * .dijitCalendarDateTemplate - date label wrapper + * .dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month + * .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date + * .dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date + * .dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active + * + * 4. Year + * .dijitCalendarYearContainer + * .dijitCalendarYearLabel + * .dijitCalendarPreviousYear /.dijitCalendarNextYear + * .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active + * + * 5. Dropdown Month Menu + * .dijitCalendarMonthMenu - menu container + * .dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item + * .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state + */ +.flat .dijitCalendar { + background-color: #fff; + text-align: center; + padding: 4px; + border: 1px solid #ccc; + border-collapse: separate; + border-radius: 4px; + -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); + box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); +} +.flat .dijitCalendarMonthContainer th { + text-align: center; + line-height: 20px; + vertical-align: middle; + margin: 4px 0; +} +.flat .dijitCalendarArrow { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + cursor: pointer; + font-size: 24px; + border: 1px solid transparent; + padding: 4px; +} +.flat .dijitCalendarDecrease, +.flat .dijitCalendarIncrease { + display: none; +} +.flat .dijitCalendarDecrementArrow { + float: left; + padding-left: 2px; +} +.flat .dijitCalendarDecrementArrow:before { + content: "\f000"; +} +.flat .dijitCalendarIncrementArrow { + float: right; + padding-right: 2px; +} +.flat .dijitCalendarIncrementArrow:before { + content: "\f001"; +} +.flat .dijitCalendarArrowHover .dijitCalendarIncrementControl, +.flat .dijitCalendarArrow:hover .dijitCalendarIncrementControl, +.flat .dijitCalendarNextYearHover, +.flat .dijitCalendarNextYear:hover, +.flat .dijitCalendarPreviousYearHover, +.flat .dijitCalendarPreviousYear:hover { + border-style: solid; + border-width: 1px; + border-color: #ccc; + padding: 4px; + border-radius: 4px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + padding: 4px; +} +.flat .dijitCalendarArrowActive .dijitCalendarIncrementControl, +.flat .dijitCalendarArrow:active .dijitCalendarIncrementControl, +.flat .dijitCalendarNextYearActive, +.flat .dijitCalendarNextYear:active, +.flat .dijitCalendarPreviousYearActive, +.flat .dijitCalendarPreviousYear:active { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitA11ySideArrow { +/* text +/- labels instead of arrow icons, for high contrast mode */ + display: none; +} +.flat .dijitCalendarContainer th, +.flat .dijitCalendarContainer td { + padding: 4px; +} +.flat .dijitCalendarDayLabelTemplate { + text-align: center; + border-bottom: #ccc; +} +.flat .dijitCalendarDayLabel { + font-weight: bold; + text-align: center; +} +.flat .dijitCalendarDateTemplate { + font-size: 0.9em; + letter-spacing: 0.05em; + text-align: center; +} +.flat .dijitCalendarDateTemplate .dijitCalendarDateLabel { + text-decoration: none; + display: block; + padding: 2px 4px; + border: 0 none; + border-radius: 50%; +} +.flat .dijitCalendarPreviousMonth .dijitCalendarDateLabel, +.flat .dijitCalendarNextMonth .dijitCalendarDateLabel { + color: #c2c2c2; +} +.flat .dijitCalendarCurrentDate .dijitCalendarDateLabel { + border-color: #257aa7; +} +.flat .dijitCalendarHoveredDate .dijitCalendarDateLabel, +.flat .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel { + background-color: #f2f2f2; +} +.flat .dijitCalendarActiveDate .dijitCalendarDateLabel, +.flat .dijitCalendarEnabledDate:active .dijitCalendarDateLabel { + background-color: #e6e6e6; +} +.flat .dijitCalendarSelectedDate .dijitCalendarDateLabel, +.flat .dijitCalendarSelectedDate.dijitCalendarHoveredDate .dijitCalendarDateLabel { + color: #fff; + background-color: #257aa7; +} +.flat .dijitCalendarDisabledDate .dijitCalendarDateLabel { + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitCalendarYearContainer { + vertical-align: middle; +} +.flat .dijitCalendarYearLabel { + padding: 4px 0 0 0; + margin: 0; + font-size: 1.15em; +} +.flat .dijitCalendarYearLabel span { + vertical-align: middle; +} +.flat .dijitCalendarSelectedYear, +.flat .dijitCalendarNextYear, +.flat .dijitCalendarPreviousYear { + padding: 4px; +} +.flat .dijitCalendarSelectedYear { + color: #257aa7; +} +.flat .dijitCalendarNextYear, +.flat .dijitCalendarPreviousYear { + color: #257aa7; + font-size: 0.9em; + line-height: 20px; + border: 1px solid transparent; +} +.flat .dijitCalendarSelectedYear { + padding: 0 4px; +} +.flat .dijitCalendar .dijitDropDownButton { + margin: 0; +} +.flat .dijitCalendarMonthMenu { + padding: 8px 0; +} +.flat .dijitCalendarMonthMenu .dijitCalendarMonthLabel { + padding: 4px; +} +.flat .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover { + color: #fff; + background-color: #257aa7; +} +/* Menu + +There are three areas of styling for the Menu: + + 1. The menu + There are three types of menus: + i) Context Menu + ii) Drop down Menu + iii) Navigation Menu + All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border + .dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect + .dijitMenuTable - for padding - also affects Select widget + + 2. The menu bar + .dijitMenuBar - for border, margins, padding, background-color of the menu bar + .dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) + + 3. Menu items - items in the menu. + .dijitMenuItem - for color + .dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected + .dijitMenuItemActive - for background-color of an active (mousedown) menu item + td.dijitMenuItemIconCell - for padding around a menu item's icon + td.dijitMenuItemLabel - for padding around a menu item's label + .dijitMenuSeparatorTop - for border, top border, of the separator + .dijitMenuSeparatorBottom - for bottom margin of the separator + + Styles specific to ComboBox and FilteringSelect widgets: + .dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu + .dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu + +*/ +.flat .dijitMenu { + background: #fff; + border: 1px solid #ccc; + border-radius: 4px; + margin: 0; + -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); + box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); +} +.flat .dijitMenuTable, +.flat .dijitComboBoxMenu { + padding: 8px 0; +} +.flat .dijitComboBoxMenu { + margin-left: 0; + background-image: none; +} +.flat .dijitMenuTable { +/* this prevents jiggling upon hover of a menu item */ + border-collapse: separate; + border-spacing: 0 0; +} +.flat .dijitMenuItem, +.flat .dijitMenuItem td { + line-height: 20px; + padding: 8px; + white-space: nowrap; +} +.flat .dijitMenuItemHover td, +.flat .dijitMenuItemHover { + color: #fff; + background-color: #257aa7; +} +.flat .dijitMenuItemActive td, +.flat .dijitMenuItemActive { + color: #fff; + background-color: #257aa7; +} +.flat .dijitMenuItemSelected td, +.flat .dijitMenuItemSelected { + color: #fff; + background-color: #257aa7; +} +.flat .dijitMenuItemDisabled { + color: #9e9e9e; +} +.flat .dijitMenuItemDisabled.dijitMenuItemSelected td, +.flat .dijitMenuItemDisabled.dijitMenuItemSelected { + color: #f2f2f2; + background: #5cafdb; +} +.flat .dijitMenuSeparatorTop { + height: auto; + margin-top: 1px; /* prevents spacing above/below separator */ + border-bottom: 1px solid #ccc; +} +.flat .dijitMenuSeparatorBottom { + height: auto; + margin-bottom: 1px; + border-top: 1px solid transparent; +} +.flat td.dijitMenuItemIconCell { + padding: 4px; + margin: 0 0 0 4px; + text-align: center; +} +.flat .dijitMenuExpand { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.flat .dijitMenuExpand:before { + content: "\f001"; +} +.flat .dijitCheckedMenuItemIconChar { + display: none; +} +.flat .dijitMenuPreviousButton, +.flat .dijitMenuNextButton { + font-style: italic; +} +.flat .dijitMenuBar { + margin: 0; + padding: 0; + background-color: #f5f5f5; +} +.flat .dijitMenuBar .dijitMenuItem { + padding: 8px 12px; + margin: 0; +} +.flat .dijitMenuBar .dijitMenuItemHover { + color: #fff; + background-color: #257aa7; +} +.flat .dijitMenuBar .dijitMenuItemActive { + color: #fff; + background-color: #257aa7; +} +.flat .dijitMenuBar .dijitMenuItemSelected, +.flat .dijitMenuBar .dijitMenuItemHover.dijitMenuItemSelected, +.flat .dijitMenuBar .dijitMenuItemActive.dijitMenuItemSelected { + color: #fff; + background-color: #257aa7; +} +.flat .dijitMenuBar .dijitMenuItemDisabled.dijitMenuItemSelected { + color: #f2f2f2; + background: #5cafdb; +} +.flat .dijitMenuPopup { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.flat .dijitMenuPopup .dijitMenu { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.flat .dijitMenuPopup .dijitMenuItem, +.flat .dijitMenuPopup .dijitMenuItem td { + padding: 8px; +} +.flat .dijitDialogRtl .dijitDialogCloseIcon { + right: auto; + left: 12px; +} +.flat .dijitDialogRtl .dijitDialogPaneActionBar, +.flat .dijitTooltipDialogRtl .dijitDialogPaneActionBar { + text-align: left; +} +.flat .dijitSliderRtl .dijitSliderProgressBarH { + float: right; + right: 0; + left: auto; +} +.flat .dijitSliderRtl .dijitSliderLeftBumper { + border-left-width: 0; + border-right-width: 1px; + margin-left: 0; + margin-right: 4px; + border-radius: 0 1.5px 1.5px 0; +} +.flat .dijitSliderRtl .dijitSliderRightBumper { + border-left-width: 1px; + border-right-width: 0; + margin-left: 4px; + margin-right: -2px; + border-radius: 1.5px 0 0 1.5px; +} +.flat .dijitSliderRtl .dijitSliderMoveableH { + right: auto; + left: 0; +} +.flat .dijitSliderRtl .dijitSliderImageHandleV { + left: auto; +} +.flat .dijitSliderRtl .dijitSliderImageHandleH { + left: -50%; +} +.flat .dijitSliderRtl .dijitRuleContainerV { + float: right; +} +/* Slider + * + * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar) + * + * Slider progress bar: + * 1. Slider progress bar (default styling): + * .dijitSliderProgressBarH - progress bar at the middle of horizontal slider + * .dijitSliderLeftBumper - bar at the left of horizontal slider + * .dijitSliderRightBumper - bar at the right of horizontal slider + * .dijitSliderProgressBarV - progress bar at the middle of vertical slider + * .dijitSliderTopBumper - bar at the top of vertical slider + * .dijitSliderBottomtBumper - bar at the bottom of vertical slider + * + * 2. hovered Slider progress bar (ie, mouse hover on progress bar) + * .dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border + * + * 3. focused Slider progress bar (ie, mouse focused on progress bar) + * .dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border + * + * 4. disabled/read-only Slider progress bar + * .dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled + * + * + * Slider Thumbs: + * 1. Slider Thumbs (default styling): + * .dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar + * + * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs) + * .dijitSliderHover .dijitSliderImageHandleH - hovered controller style + * + * 3. focused Slider progress bar (ie, mouse focused on slider thumbs) + * .dijitSliderFocused .dijitSliderImageHandleV - focused controller style + * + * + * Slider Increment/Decrement Buttons: + * 1. Slider Increment/Decrement Buttons (default styling): + * .dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider + * .dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider + * .dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider + * .dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider + * + * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons) + * .dijitSliderHover .dijitSliderDecrementIconH - for background, border + * + * 3. active Slider Increment/Decrement Buttons (mouse down on the icons) + * .dijitSliderActive .dijitSliderIncrementIconV - for background, border + * + * 4. disabled/read-only Slider Increment/Decrement Buttons + * .dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider + * .dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider + */ +.flat .dijitSliderBar { + border-style: solid; + outline: 1px; +} +.flat .dijitRuleLabelsContainer { + color: #424242; + font-size: smaller; +} +.flat .dijitSliderDisabled { + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitRuleLabelsContainerH { + padding: 0; +} +.flat .dijitSliderBarH, +.flat .dijitSliderBumperH { + height: 3px; +} +.flat .dijitSlider .dijitSliderLeftBumper { + border-radius: 1.5px 0 0 1.5px; + border: 0 none; + margin-left: 4px; +} +.flat .dijitSlider .dijitSliderRightBumper { + border-radius: 0 1.5px 1.5px 0; + border: 0 none; + margin-left: -2px; + margin-right: 4px; +} +.flat .dijitSlider .dijitSliderProgressBarH, +.flat .dijitSlider .dijitSliderLeftBumper { + border: 0 none; + background-color: #257aa7; + background-image: none; +} +.flat .dijitSlider .dijitSliderRemainingBarH, +.flat .dijitSlider .dijitSliderRightBumper { + border: 0 none; + background-color: #ccc; +} +.flat .dijitSliderHover .dijitSliderProgressBarH, +.flat .dijitSliderHover .dijitSliderLeftBumper { + background-color: #22709a; + background-image: none; +} +.flat .dijitSliderFocused .dijitSliderProgressBarH, +.flat .dijitSliderFocused .dijitSliderLeftBumper { + -webkit-box-shadow: none; + box-shadow: none; +} +.flat .dijitSliderFocused .dijitSliderRemainingBarH, +.flat .dijitSliderFocused .dijitSliderRightBumper { + -webkit-box-shadow: none; + box-shadow: none; +} +.flat .dijitRuleLabelsContainerV { + padding: 0; +} +.flat .dijitSliderBarV, +.flat .dijitSliderBumperV { + width: 3px; +} +.flat .dijitSlider .dijitSliderTopBumper { + border-radius: 1.5px 1.5px 0 0; + border: 0 none; + margin-top: 4px; + margin-bottom: -2px; +} +.flat .dijitSlider .dijitSliderBottomBumper { + border-radius: 0 0 1.5px 1.5px; + border: 0 none; + margin-bottom: 4px; +} +.flat .dijitSlider .dijitSliderProgressBarV, +.flat .dijitSlider .dijitSliderBottomBumper { + border: 0 none; + background-color: #257aa7; + background-image: none; +} +.flat .dijitSlider .dijitSliderRemainingBarV, +.flat .dijitSlider .dijitSliderTopBumper { + border: 0 none; + background-color: #ccc; +} +.flat .dijitSliderHover .dijitSliderProgressBarV, +.flat .dijitSliderHover .dijitSliderBottomBumper { + background-color: #22709a; + background-image: none; +} +.flat .dijitSliderFocused .dijitSliderProgressBarV, +.flat .dijitSliderFocused .dijitSliderBottomBumper { + -webkit-box-shadow: none; + box-shadow: none; +} +.flat .dijitSliderFocused .dijitSliderRemainingBarV, +.flat .dijitSliderFocused .dijitSliderTopBumper { + -webkit-box-shadow: none; + box-shadow: none; +} +.flat .dijitSliderImageHandle { + background: #fff; + -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); + box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); + border-radius: 50%; + border: 1px solid #257aa7; + width: 16px; + height: 16px; + margin-top: -2px; + position: absolute; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.flat .dijitSliderImageHandle:after { + content: ""; + display: block; + background: #257aa7; + border-radius: 50%; + height: 10px; + width: 10px; + left: 2px; + top: 2px; + position: absolute; +} +.flat .dijitSliderImageHandleV { + margin-top: 0; +} +.flat .dijitSliderHover .dijitSliderImageHandle, +.flat .dijitSliderFocused .dijitSliderImageHandle { + -webkit-box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.2); + box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.2); +} +.flat .dijitSliderDisabled.dijitSliderFocused .dijitSliderImageHandle:after { + display: none; +} +.flat .dijitSliderDecrementIconH, +.flat .dijitSliderIncrementIconH, +.flat .dijitSliderDecrementIconV, +.flat .dijitSliderIncrementIconV { + border-style: solid; + border-width: 1px; + border-color: #ccc; + padding: 4px; + border-radius: 4px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + height: 20px; + width: 20px; + cursor: pointer; + color: #257aa7; + padding: 0; +} +.flat .dijitSliderDecrementIconH:hover, +.flat .dijitSliderIncrementIconH:hover, +.flat .dijitSliderDecrementIconV:hover, +.flat .dijitSliderIncrementIconV:hover { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitSliderDecrementIconH:active, +.flat .dijitSliderIncrementIconH:active, +.flat .dijitSliderDecrementIconV:active, +.flat .dijitSliderIncrementIconV:active { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitSliderReadOnly .dijitSliderDecrementIconH, +.flat .dijitSliderDisabled .dijitSliderDecrementIconH, +.flat .dijitSliderReadOnly .dijitSliderDecrementIconV, +.flat .dijitSliderDisabled .dijitSliderDecrementIconV, +.flat .dijitSliderReadOnly .dijitSliderIncrementIconH, +.flat .dijitSliderDisabled .dijitSliderIncrementIconH, +.flat .dijitSliderReadOnly .dijitSliderIncrementIconV, +.flat .dijitSliderDisabled .dijitSliderIncrementIconV { + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitSliderIncrementIconH, +.flat .dijitSliderIncrementIconV, +.flat .dijitSliderDecrementIconH, +.flat .dijitSliderDecrementIconV { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.flat .dijitSliderIncrementIconH:before, +.flat .dijitSliderIncrementIconV:before, +.flat .dijitSliderDecrementIconH:before, +.flat .dijitSliderDecrementIconV:before { + content: "\f011"; + top: 0; + line-height: 20px; +} +.flat .dijitSliderIncrementIconH .dijitSliderButtonInner, +.flat .dijitSliderIncrementIconV .dijitSliderButtonInner, +.flat .dijitSliderDecrementIconH .dijitSliderButtonInner, +.flat .dijitSliderDecrementIconV .dijitSliderButtonInner { + display: none; +} +.flat .dijitSliderDecrementIconH:before, +.flat .dijitSliderDecrementIconV:before { + content: "\f012"; +} +.flat .dijitRuleMark { + border: 0 none; +} +.flat .dijitRuleMarkH { + border-right: 1px solid #e0e0e0; +} +.flat .dijitRuleMarkV { + border-bottom: 1px solid #e0e0e0; +} +.flat .dijitRuleLabelContainerH { + margin-top: 2px; + margin-bottom: 2px; +} +.flat .dijitRuleLabelContainerV { + margin-left: 2px; + margin-right: 2px; +} +.flat .dijitSelectRtl .dijitButtonText { + float: right; + padding: 0 12px 0 0; +} +.flat .dijitSelectRtl .dijitButtonContents { + border-style: none none none solid; + text-align: right; +} +.flat .dijitComboBoxRtl .dijitButtonNode.dijitArrowButtonContainer { + border-radius: 4px 0 0 4px; +} +.flat .dijitComboBoxRtl .dijitArrowButtonContainer { + border-right-width: 1px !important; + border-left-width: 0 !important; +} +.flat .dijitTextBoxRtl .dijitValidationContainer, +.flat .dijitTextBoxRtl .dijitSpinnerButtonContainer { + border-right-width: 1px !important; + border-left-width: 0 !important; +} +.flat .dijitTextBoxRtlError .dijitValidationContainer { + border-left-width: 0; + border-right-width: 1px; +} +.flat .dijitRtl .dijitPlaceHolder { + left: auto; + right: 0; +} +.flat .dijitTextBoxRtl .dijitSpinnerButtonContainer, +.flat .dijitValidationTextBoxRtl .dijitValidationContainer, +.flat .dijitTextBoxRtl .dijitArrowButtonContainer { + float: left; +} +.flat div.dijitNumberTextBoxRtl { + text-align: right; +} +/* RadioButton + * + * Styling RadioButton mainly includes: + * + * 1. Containers + * .dijitRadio|.dijitRadioIcon + * + * 2. RadioButton within ToggleButton + * .dijitToggleButton|.dijitToggleButtonChecked + * + * 3. Checked state + * .dijitRadioChecked + * .dijitToggleButtonChecked + * + * 4. Hover state + * .dijitRadioHover|.dijitRadioCheckedHover + * + * 5. Disabled state + * .dijitRadioDisabled|.dijitRadioCheckedDisabled + */ +.flat .dijitRadio, +.flat .dijitRadioIcon { +/* inside a toggle button */ + width: 16px; + height: 16px; + background: #fff; + border: 1px solid #257aa7; + border-radius: 50%; + position: relative; + overflow: visible; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.flat .dijitRadio:after, +.flat .dijitRadioIcon:after { + content: " "; + display: block; + width: 0; + height: 0; + background-color: #257aa7; + border-radius: 50%; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + margin: 8px; + position: absolute; + top: 0; + left: 0; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; +} +.flat .dijitRadioHover { + border-color: #43a3d5; +} +.flat .dijitRadioChecked:after, +.flat .dijitChecked .dijitRadioIcon:after { + width: 8px; + height: 8px; + margin: 3px; + opacity: 1; + -ms-filter: none; + filter: none; +} +.flat .alt-primary .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-primary .dijitRadioIcon:after { + background-color: #fff; +} +.flat .alt-success .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-success .dijitRadioIcon:after { + background-color: #fff; +} +.flat .alt-info .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-info .dijitRadioIcon:after { + background-color: #fff; +} +.flat .alt-warning .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-warning .dijitRadioIcon:after { + background-color: #fff; +} +.flat .alt-danger .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-danger .dijitRadioIcon:after { + background-color: #fff; +} +.flat .alt-inverse .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-inverse .dijitRadioIcon:after { + background-color: #fff; +} +.flat .dijitRadioDisabled { + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitRadioCheckedDisabled { + background-color: #f5f5f5; + border-color: #5cafdb; +} +.flat .dijitRadioCheckedDisabled:after { + background-color: #5cafdb; +} +.flat .dijitRadioMenuItem .dijitCheckedMenuItemIcon { + width: 16px; + height: 16px; + background: #fff; + border: 1px solid #ccc; + border-radius: 50%; + position: relative; + overflow: visible; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.flat .dijitRadioMenuItem .dijitCheckedMenuItemIcon:after { + content: " "; + display: block; + width: 0; + height: 0; + background-color: #257aa7; + border-radius: 50%; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + margin: 8px; + position: absolute; + top: 0; + left: 0; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; +} +.flat .dijitRadioMenuItemChecked .dijitCheckedMenuItemIcon { + border-color: #ccc; +} +.flat .dijitRadioMenuItemChecked .dijitCheckedMenuItemIcon:after { + width: 8px; + height: 8px; + margin: 3px; + opacity: 1; + -ms-filter: none; + filter: none; +} +/* CheckBox + * + * Styling CheckBox mainly includes: + * + * 1. Containers + * .dijitCheckBox + * + * 2. CheckBox within ToggleButton + * .dijitCheckBoxIcon + * + * 3. States - Checked, Hover, Disabled. + * .dijitCheckBoxChecked + * .dijitCheckBoxHover + * .dijitCheckBoxCheckedHover + * .dijitCheckBoxDisabled + * .dijitCheckBoxCheckedDisabled + */ +.flat .dijitCheckBox { + background-color: #fff; + border: 1px solid #ccc; + width: 16px; + height: 16px; + line-height: 1; + padding: 0; + border-radius: 2px; + text-align: center; + position: relative; + overflow: visible; + -webkit-transition: all 0.1s linear; + -moz-transition: all 0.1s linear; + -o-transition: all 0.1s linear; + -ms-transition: all 0.1s linear; + transition: all 0.1s linear; +} +.flat .dijitCheckBox input { + position: absolute; + top: 0; +} +.flat .dijitCheckBoxIcon:before, +.flat .dijitCheckBoxChecked:before, +.flat .dijitCheckBoxCheckedDisabled:before { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + content: "\f00c"; + color: #fff; +} +.flat .dijitCheckBoxIcon { + padding: 0; +} +.flat .dijitCheckBoxIcon:before { + color: #257aa7; +} +.flat .alt-primary .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .alt-success .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .alt-info .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .alt-warning .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .alt-danger .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .alt-inverse .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .dijitCheckBoxChecked { + background-color: #257aa7; + border-color: #257aa7; +} +.flat .dijitCheckBoxHover { + background-color: #fff; + border: 1px solid #257aa7; +} +.flat .dijitCheckBoxCheckedHover { + background-color: #2d95cd; + border: 1px solid #257aa7; +} +.flat .dijitCheckBoxDisabled { + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitCheckBoxCheckedDisabled { + color: #a6a6a6; + background-color: #5cafdb; + border-color: #5cafdb; +} +.flat .dijitCheckedMenuItem .dijitCheckedMenuItemIcon { + background-color: #fff; + border: 1px solid #ccc; + width: 16px; + height: 16px; + line-height: 1; + padding: 0; + border-radius: 2px; + text-align: center; + position: relative; + overflow: visible; + -webkit-transition: all 0.1s linear; + -moz-transition: all 0.1s linear; + -o-transition: all 0.1s linear; + -ms-transition: all 0.1s linear; + transition: all 0.1s linear; +} +.flat .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon:before { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + content: "\f00c"; + color: #257aa7; +} +/* Text Inputs: [TextBox | DateTextBox | CurrencyTextBox | ValidationTextBox | ...] | TextArea + * Mainly includes: + * + * 1. Containers + * .dijitTextBox + * .dijitInputField - container that wraps "dijitInputInner" or "dijitPlaceHolder" + * + * 2. Textbox input + * .dijitInputInner + * .dijitPlaceHolder + * + * 3. States - Hover, Focused, Disabled, Error, Error while Focused e.g. + * .dijitTextBoxHover + * .dijitTextBoxFocused + * .dijitTextBoxDisabled + * .dijitTextBoxError + * .dijitTextBoxErrorFocused + * +*/ +.flat .dijitTextBox, +.flat .dijitInputInner { + line-height: 20px; +} +.flat .dijitTextBox { + background: #fff; + border: 1px solid #ccc; + border-radius: 4px; + -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; + -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; + -o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; + -ms-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; + transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; +} +.flat .dijitTextArea { + padding: 4px 6px; +} +.flat .dijitTextBox .dijitInputField { + padding: 0 4px; + margin: 0 2px; +} +.flat .dijitSelect.alt-primary, +.flat .dijitComboBox.alt-primary, +.flat .dijitSpinner.alt-primary { + border-color: #1e88e5; +} +.flat .dijitSelect.alt-success, +.flat .dijitComboBox.alt-success, +.flat .dijitSpinner.alt-success { + border-color: #43a047; +} +.flat .dijitSelect.alt-info, +.flat .dijitComboBox.alt-info, +.flat .dijitSpinner.alt-info { + border-color: #03a9f4; +} +.flat .dijitSelect.alt-warning, +.flat .dijitComboBox.alt-warning, +.flat .dijitSpinner.alt-warning { + border-color: #fb8c00; +} +.flat .dijitSelect.alt-danger, +.flat .dijitComboBox.alt-danger, +.flat .dijitSpinner.alt-danger { + border-color: #e53935; +} +.flat .dijitSelect.alt-inverse, +.flat .dijitComboBox.alt-inverse, +.flat .dijitSpinner.alt-inverse { + border-color: #616161; +} +.flat .dijitTextBox .dijitInputInner, +.flat .dijitValidationTextBox .dijitValidationContainer, +.flat .dijitTextBox .dijitInputField .dijitPlaceHolder { + padding: 4px; +} +.flat .dijitTextBoxHover { + border-color: #257aa7; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -ms-transition-duration: 0.25s; + transition-duration: 0.25s; +} +.flat .dijitTextBoxFocused { + border-color: #257aa7; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + -o-transition-duration: 0.1s; + -ms-transition-duration: 0.1s; + transition-duration: 0.1s; +} +.flat .dijitTextBoxDisabled { + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitComboBoxDisabled.alt-primary, +.flat .dijitSpinnerDisabled.alt-primary { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #6db2ee; +} +.flat .dijitComboBoxDisabled.alt-primary .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-primary .dijitButtonNode { + background: #6db2ee; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-primary .dijitSpinnerButtonContainer { + border-left-color: #6db2ee; +} +.flat .dijitSpinnerRtlDisabled.alt-primary .dijitSpinnerButtonContainer { + border-right-color: #6db2ee; +} +.flat .dijitSelectDisabled.alt-primary { + border-color: #6db2ee; +} +.flat .dijitSelectDisabled.alt-primary .dijitStretch, +.flat .dijitSelectDisabled.alt-primary .dijitButtonNode { + background: #6db2ee; + color: #f2f2f2; +} +.flat .dijitComboBoxDisabled.alt-success, +.flat .dijitSpinnerDisabled.alt-success { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #7dc981; +} +.flat .dijitComboBoxDisabled.alt-success .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-success .dijitButtonNode { + background: #7dc981; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-success .dijitSpinnerButtonContainer { + border-left-color: #7dc981; +} +.flat .dijitSpinnerRtlDisabled.alt-success .dijitSpinnerButtonContainer { + border-right-color: #7dc981; +} +.flat .dijitSelectDisabled.alt-success { + border-color: #7dc981; +} +.flat .dijitSelectDisabled.alt-success .dijitStretch, +.flat .dijitSelectDisabled.alt-success .dijitButtonNode { + background: #7dc981; + color: #f2f2f2; +} +.flat .dijitComboBoxDisabled.alt-info, +.flat .dijitSpinnerDisabled.alt-info { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #56c9fd; +} +.flat .dijitComboBoxDisabled.alt-info .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-info .dijitButtonNode { + background: #56c9fd; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-info .dijitSpinnerButtonContainer { + border-left-color: #56c9fd; +} +.flat .dijitSpinnerRtlDisabled.alt-info .dijitSpinnerButtonContainer { + border-right-color: #56c9fd; +} +.flat .dijitSelectDisabled.alt-info { + border-color: #56c9fd; +} +.flat .dijitSelectDisabled.alt-info .dijitStretch, +.flat .dijitSelectDisabled.alt-info .dijitButtonNode { + background: #56c9fd; + color: #f2f2f2; +} +.flat .dijitComboBoxDisabled.alt-warning, +.flat .dijitSpinnerDisabled.alt-warning { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #ffb557; +} +.flat .dijitComboBoxDisabled.alt-warning .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-warning .dijitButtonNode { + background: #ffb557; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-warning .dijitSpinnerButtonContainer { + border-left-color: #ffb557; +} +.flat .dijitSpinnerRtlDisabled.alt-warning .dijitSpinnerButtonContainer { + border-right-color: #ffb557; +} +.flat .dijitSelectDisabled.alt-warning { + border-color: #ffb557; +} +.flat .dijitSelectDisabled.alt-warning .dijitStretch, +.flat .dijitSelectDisabled.alt-warning .dijitButtonNode { + background: #ffb557; + color: #f2f2f2; +} +.flat .dijitComboBoxDisabled.alt-danger, +.flat .dijitSpinnerDisabled.alt-danger { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #ee7e7c; +} +.flat .dijitComboBoxDisabled.alt-danger .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-danger .dijitButtonNode { + background: #ee7e7c; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-danger .dijitSpinnerButtonContainer { + border-left-color: #ee7e7c; +} +.flat .dijitSpinnerRtlDisabled.alt-danger .dijitSpinnerButtonContainer { + border-right-color: #ee7e7c; +} +.flat .dijitSelectDisabled.alt-danger { + border-color: #ee7e7c; +} +.flat .dijitSelectDisabled.alt-danger .dijitStretch, +.flat .dijitSelectDisabled.alt-danger .dijitButtonNode { + background: #ee7e7c; + color: #f2f2f2; +} +.flat .dijitComboBoxDisabled.alt-inverse, +.flat .dijitSpinnerDisabled.alt-inverse { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #989898; +} +.flat .dijitComboBoxDisabled.alt-inverse .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-inverse .dijitButtonNode { + background: #989898; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-inverse .dijitSpinnerButtonContainer { + border-left-color: #989898; +} +.flat .dijitSpinnerRtlDisabled.alt-inverse .dijitSpinnerButtonContainer { + border-right-color: #989898; +} +.flat .dijitSelectDisabled.alt-inverse { + border-color: #989898; +} +.flat .dijitSelectDisabled.alt-inverse .dijitStretch, +.flat .dijitSelectDisabled.alt-inverse .dijitButtonNode { + background: #989898; + color: #f2f2f2; +} +.flat .dijitTextBoxError, +.flat .dijitTextBoxError .dijitButtonNode { + border-color: #dd2c00; +} +.flat .dijitTextBoxErrorFocused, +.flat .dijitTextBoxErrorFocused .dijitButtonNode { + border: 1px solid #bc2500; +} +.flat .dijitValidationTextBoxError .dijitValidationContainer { + color: #dd2c00; + width: 18px; + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 18px; +} +.flat .dijitValidationTextBoxError .dijitValidationContainer:before { + content: "\f017"; +} +.flat .dijitValidationTextBoxError .dijitValidationIcon { + display: none; +} +.flat table.dijitComboButtonRtl .dijitStretch { + border-radius: 0 4px 4px 0; +} +.flat table.dijitComboButtonRtl .dijitArrowButton { + border-radius: 4px 0 0 4px; + border-left-width: 1px; + border-right-width: 0; +} +.flat .dijitDropDownButtonRtl .dijitButtonNode { + padding-left: 8px; +} +.flat .dijitDropDownButtonRtl .dijitArrowButtonInner { + margin-left: 0; + margin-right: 12px; +} +/* Select | Combobox + * And minor style for DateTextBox | MultiSelect + * + * Styling Select mainly includes: + * + * 1. Containers + * Select: + * .dijitSelect + * .dijitButtonContents + * Combobox: + * .dijitComboBox + * + * 2. Arrow Button + * .dijitArrowButton + * .dijitArrowButtonInner + * .dijitComboBox .dijitButtonNode + * + * 3. Menu + * .dijitSelectMenu + * + * 4. States - Hover, Active, Focused, Disabled, e.g. + * + * Select: Hover, Active, Focused, Disabled + * .dijitSelectHover + * .dijitSelectFocused + * .dijitSelectDisabled + * + * Combobox: Hover, Focused (Open), Disabled + * .dijitComboBox .dijitDownArrowButtonHover + * .dijitComboBoxOpenHover .dijitButtonNode + * .dijitComboBoxDisabled .dijitButtonNode + * + */ +.flat .dijitSelect .dijitArrowButtonInner, +.flat .dijitComboBox .dijitArrowButtonInner { + margin: 0; + width: 0; + height: 0; +} +.flat .dijitSelect { + border-style: solid; + border-width: 1px; + border-color: #ccc; + padding: 4px; + border-radius: 4px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + table-layout: fixed; +} +.flat .dijitSelect .dijitButtonContents, +.flat .dijitSelect .dijitArrowButton { + line-height: 20px; + padding: 4px 12px; + border: 0; + border-radius: 0 2.666666666666668px 2.666666666666668px 0; +} +.flat .dijitSelect .dijitButtonContents { + padding: 0; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + border-radius: 2.666666666666668px 0 0 2.666666666666668px; +} +.flat .dijitSelect .dijitInputField { + padding: 0 0 0 12px; +} +.flat .dijitSelect .dijitArrowButton { + width: 20px; + padding: 4px; +} +.flat .dijitSelectHover { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitSelectActive { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitSelectFocused { + border: 1px solid #ccc; +} +.flat .dijitSelectDisabled { + cursor: default; + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitComboBox .dijitButtonNode { + border-style: solid; + border-width: 1px; + border-color: #ccc; + padding: 4px; + border-radius: 4px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + border-radius: 0 2.666666666666668px 2.666666666666668px 0; +} +.flat .dijitComboBoxOpenHover .dijitButtonNode, +.flat .dijitComboBox .dijitDownArrowButtonHover { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; + -webkit-box-shadow: none; + box-shadow: none; +} +.flat .dijitComboBoxDisabled .dijitButtonNode { + cursor: default; + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitComboBox .dijitArrowButton { + width: 20px; + padding: 4px; +} +.flat .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; +} +.flat .dijitDateTextBox .dijitArrowButton:before { + content: "\f01e"; +} +.flat .dijitTimeTextBox .dijitArrowButton:before { + content: "\f01f"; +} +.flat select { + padding: 4px 0; + border: 1px solid #ccc; + -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); + box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); +} +.flat select option { + padding: 4px 8px; +} +.flat .dijitSelectMenu td.dijitMenuItemIconCell, +.flat .dijitSelectMenu td.dijitMenuArrowCell { +/* so that arrow and icon cells from MenuItem are not displayed */ + display: none; +} +.flat .dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton { + right: 0; + left: auto; +} +/* NumberSpinner - namespace "dijitSpinner" + * + * Styling NumberSpinner mainly includes: + * + * 1. Arrows + * Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner - for border, padding and position + * Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton + * Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image + * + * 2. Hover state + * .dijitUpArrowButtonHover|.dijitDownArrowButtonHover .* - for background color|image + * + * 3. Active state + * .dijitUpArrowButtonActive|.dijitDownArrowButtonActive .* - for border, padding, margin and background color|image + * + * 4. Focused state + * .dijitSpinnerFocused .* - for background color|image + * + * 5. Disabled state + * .dijitSpinnerDisabled .* - for background color|image + */ +.flat .dijitSpinner .dijitSpinnerButtonContainer { + overflow: hidden; + position: relative; + width: auto; + padding: 0; + border: 1px solid #ccc; +} +.flat .dijitSpinner .dijitSpinnerButtonInner { + width: 30px; + padding: 4px 0 !important; + margin: 0; +} +.flat .dijitSpinner .dijitArrowButton { + border-style: solid; + border-width: 1px; + border-color: #ccc; + padding: 4px; + border-radius: 4px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + border-radius: 0; + border: 0; + width: auto; + overflow: hidden; + left: 0; + right: 0; + padding: 0; +} +.flat .dijitSpinner .dijitArrowButton:before { + content: none; +} +.flat .dijitSpinner .dijitUpArrowButton { + border-top-right-radius: 2.666666666666668px; +} +.flat .dijitSpinner .dijitDownArrowButton { + border-bottom-right-radius: 2.666666666666668px; +} +.flat .dijitSpinner .dijitUpArrowButtonHover, +.flat .dijitSpinner .dijitDownArrowButtonHover { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitSpinner .dijitDownArrowButtonActive, +.flat .dijitSpinner .dijitUpArrowButtonActive { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitSpinner .dijitArrowButtonInner { + line-height: 14px; + display: block; +} +.flat .dijitSpinner .dijitArrowButtonInner .dijitInputField { + padding: 0; +} +.flat .dijitSpinner .dijitArrowButtonInner:before { + content: "\f003"; +} +.flat .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner:before { + content: "\f002"; +} +.flat .dijitSpinnerDisabled .dijitDownArrowButton, +.flat .dijitSpinnerDisabled .dijitUpArrowButton { + cursor: default; + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .alt-primary .dijitSpinnerButtonContainer { + border-color: #1e88e5; +} +.flat .alt-success .dijitSpinnerButtonContainer { + border-color: #43a047; +} +.flat .alt-info .dijitSpinnerButtonContainer { + border-color: #03a9f4; +} +.flat .alt-warning .dijitSpinnerButtonContainer { + border-color: #fb8c00; +} +.flat .alt-danger .dijitSpinnerButtonContainer { + border-color: #e53935; +} +.flat .alt-inverse .dijitSpinnerButtonContainer { + border-color: #616161; +} +/* Button | DropDownButton | ComboButton | ToggleButton + * + * Styling Buttons mainly includes: + * + * 1. Containers + * .dijitButton + * .dijitDropDownButton + * .dijitComboButton + * .dijitButtonNode - common button/arrow wrapper shared across all three button types + * + * 2. Button text + * .dijitButtonText + * + * 3. Arrows - only for DropDownButton and ComboButton + * There are total four directions arrows - down, left, right, up: + * .dijitArrowButtonInner - down arrow by default + * .dijitLeftArrowButton .dijitArrowButtonInner - left arrow + * .dijitRightArrowButton .dijitArrowButtonInner - right arrow + * .dijitUpArrowButton .dijitArrowButtonInner - up arrow + * + * 4. States - Hover, Active, Disabled, e.g. + * .dijitButtonHover .dijitButtonNode + * .dijitButtonActive .dijitButtonNode + * .dijitButtonDisabled .dijitButtonNode + * + * .dijitDisabled .dijitArrowButtonInner - disabled arrow states + */ +.flat .dijitButtonText { + padding: 0 4px; + text-align: center; +} +.flat .dijitButton .dijitButtonNode, +.flat .dijitDropDownButton .dijitButtonNode, +.flat .dijitComboButton .dijitButtonNode, +.flat .dijitToggleButton .dijitButtonNode { + border-style: solid; + border-width: 1px; + border-color: #ccc; + padding: 4px; + border-radius: 4px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; +} +.flat .dijitButton.alt-primary .dijitButtonNode, +.flat .dijitDropDownButton.alt-primary .dijitButtonNode, +.flat .dijitComboButton.alt-primary .dijitButtonNode, +.flat .dijitToggleButton.alt-primary .dijitButtonNode, +.flat .dijitComboBox.alt-primary .dijitButtonNode, +.flat .dijitSelect.alt-primary .dijitButtonContents, +.flat .dijitSelect.alt-primary .dijitButtonNode, +.flat .dijitSpinner.alt-primary .dijitArrowButton { + background: #1e88e5; + color: #fff; + border-color: #166fbd; +} +.flat .dijitComboButton.alt-primary .dijitStretch { + border-right-color: #166fbd; +} +.flat .dijitComboButtonRtl.alt-primary .dijitStretch { + border-left-color: #166fbd; +} +.flat .dijitButton.alt-success .dijitButtonNode, +.flat .dijitDropDownButton.alt-success .dijitButtonNode, +.flat .dijitComboButton.alt-success .dijitButtonNode, +.flat .dijitToggleButton.alt-success .dijitButtonNode, +.flat .dijitComboBox.alt-success .dijitButtonNode, +.flat .dijitSelect.alt-success .dijitButtonContents, +.flat .dijitSelect.alt-success .dijitButtonNode, +.flat .dijitSpinner.alt-success .dijitArrowButton { + background: #43a047; + color: #fff; + border-color: #37823a; +} +.flat .dijitComboButton.alt-success .dijitStretch { + border-right-color: #37823a; +} +.flat .dijitComboButtonRtl.alt-success .dijitStretch { + border-left-color: #37823a; +} +.flat .dijitButton.alt-info .dijitButtonNode, +.flat .dijitDropDownButton.alt-info .dijitButtonNode, +.flat .dijitComboButton.alt-info .dijitButtonNode, +.flat .dijitToggleButton.alt-info .dijitButtonNode, +.flat .dijitComboBox.alt-info .dijitButtonNode, +.flat .dijitSelect.alt-info .dijitButtonContents, +.flat .dijitSelect.alt-info .dijitButtonNode, +.flat .dijitSpinner.alt-info .dijitArrowButton { + background: #03a9f4; + color: #fff; + border-color: #028ac7; +} +.flat .dijitComboButton.alt-info .dijitStretch { + border-right-color: #028ac7; +} +.flat .dijitComboButtonRtl.alt-info .dijitStretch { + border-left-color: #028ac7; +} +.flat .dijitButton.alt-warning .dijitButtonNode, +.flat .dijitDropDownButton.alt-warning .dijitButtonNode, +.flat .dijitComboButton.alt-warning .dijitButtonNode, +.flat .dijitToggleButton.alt-warning .dijitButtonNode, +.flat .dijitComboBox.alt-warning .dijitButtonNode, +.flat .dijitSelect.alt-warning .dijitButtonContents, +.flat .dijitSelect.alt-warning .dijitButtonNode, +.flat .dijitSpinner.alt-warning .dijitArrowButton { + background: #fb8c00; + color: #fff; + border-color: #cd7200; +} +.flat .dijitComboButton.alt-warning .dijitStretch { + border-right-color: #cd7200; +} +.flat .dijitComboButtonRtl.alt-warning .dijitStretch { + border-left-color: #cd7200; +} +.flat .dijitButton.alt-danger .dijitButtonNode, +.flat .dijitDropDownButton.alt-danger .dijitButtonNode, +.flat .dijitComboButton.alt-danger .dijitButtonNode, +.flat .dijitToggleButton.alt-danger .dijitButtonNode, +.flat .dijitComboBox.alt-danger .dijitButtonNode, +.flat .dijitSelect.alt-danger .dijitButtonContents, +.flat .dijitSelect.alt-danger .dijitButtonNode, +.flat .dijitSpinner.alt-danger .dijitArrowButton { + background: #e53935; + color: #fff; + border-color: #cc1e1a; +} +.flat .dijitComboButton.alt-danger .dijitStretch { + border-right-color: #cc1e1a; +} +.flat .dijitComboButtonRtl.alt-danger .dijitStretch { + border-left-color: #cc1e1a; +} +.flat .dijitButton.alt-inverse .dijitButtonNode, +.flat .dijitDropDownButton.alt-inverse .dijitButtonNode, +.flat .dijitComboButton.alt-inverse .dijitButtonNode, +.flat .dijitToggleButton.alt-inverse .dijitButtonNode, +.flat .dijitComboBox.alt-inverse .dijitButtonNode, +.flat .dijitSelect.alt-inverse .dijitButtonContents, +.flat .dijitSelect.alt-inverse .dijitButtonNode, +.flat .dijitSpinner.alt-inverse .dijitArrowButton { + background: #616161; + color: #fff; + border-color: #4f4f4f; +} +.flat .dijitComboButton.alt-inverse .dijitStretch { + border-right-color: #4f4f4f; +} +.flat .dijitComboButtonRtl.alt-inverse .dijitStretch { + border-left-color: #4f4f4f; +} +.flat .dijitButtonHover .dijitButtonNode, +.flat .dijitDropDownButtonHover .dijitButtonNode, +.flat .dijitToggleButtonHover .dijitButtonNode { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitComboButton .dijitButtonNodeHover, +.flat .dijitComboButton .dijitDownArrowButtonHover { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitButtonHover.alt-primary .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-primary .dijitButtonNode, +.flat .dijitComboButton.alt-primary .dijitButtonNodeHover, +.flat .dijitComboButton.alt-primary .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-primary .dijitButtonNode, +.flat .dijitComboBoxHover.alt-primary .dijitButtonNode, +.flat .dijitSelectHover.alt-primary .dijitButtonContents, +.flat .dijitSelectHover.alt-primary .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitArrowButton, +.flat .dijitSpinner.alt-primary .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-primary .dijitDownArrowButtonHover { + background: #1981dd; + border-color: #1774c5; +} +.flat .dijitButtonHover.alt-success .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-success .dijitButtonNode, +.flat .dijitComboButton.alt-success .dijitButtonNodeHover, +.flat .dijitComboButton.alt-success .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-success .dijitButtonNode, +.flat .dijitComboBoxHover.alt-success .dijitButtonNode, +.flat .dijitSelectHover.alt-success .dijitButtonContents, +.flat .dijitSelectHover.alt-success .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-success .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-success .dijitArrowButton, +.flat .dijitSpinner.alt-success .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-success .dijitDownArrowButtonHover { + background: #409843; + border-color: #39883c; +} +.flat .dijitButtonHover.alt-info .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-info .dijitButtonNode, +.flat .dijitComboButton.alt-info .dijitButtonNodeHover, +.flat .dijitComboButton.alt-info .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-info .dijitButtonNode, +.flat .dijitComboBoxHover.alt-info .dijitButtonNode, +.flat .dijitSelectHover.alt-info .dijitButtonContents, +.flat .dijitSelectHover.alt-info .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-info .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-info .dijitArrowButton, +.flat .dijitSpinner.alt-info .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-info .dijitDownArrowButtonHover { + background: #03a1e8; + border-color: #0390cf; +} +.flat .dijitButtonHover.alt-warning .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-warning .dijitButtonNode, +.flat .dijitComboButton.alt-warning .dijitButtonNodeHover, +.flat .dijitComboButton.alt-warning .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-warning .dijitButtonNode, +.flat .dijitComboBoxHover.alt-warning .dijitButtonNode, +.flat .dijitSelectHover.alt-warning .dijitButtonContents, +.flat .dijitSelectHover.alt-warning .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitArrowButton, +.flat .dijitSpinner.alt-warning .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-warning .dijitDownArrowButtonHover { + background: #ee8500; + border-color: #d57700; +} +.flat .dijitButtonHover.alt-danger .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-danger .dijitButtonNode, +.flat .dijitComboButton.alt-danger .dijitButtonNodeHover, +.flat .dijitComboButton.alt-danger .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-danger .dijitButtonNode, +.flat .dijitComboBoxHover.alt-danger .dijitButtonNode, +.flat .dijitSelectHover.alt-danger .dijitButtonContents, +.flat .dijitSelectHover.alt-danger .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitArrowButton, +.flat .dijitSpinner.alt-danger .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-danger .dijitDownArrowButtonHover { + background: #e32d29; + border-color: #d4201b; +} +.flat .dijitButtonHover.alt-inverse .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-inverse .dijitButtonNode, +.flat .dijitComboButton.alt-inverse .dijitButtonNodeHover, +.flat .dijitComboButton.alt-inverse .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-inverse .dijitButtonNode, +.flat .dijitComboBoxHover.alt-inverse .dijitButtonNode, +.flat .dijitSelectHover.alt-inverse .dijitButtonContents, +.flat .dijitSelectHover.alt-inverse .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitArrowButton, +.flat .dijitSpinner.alt-inverse .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-inverse .dijitDownArrowButtonHover { + background: #5c5c5c; + border-color: #525252; +} +.flat .dijitButtonActive .dijitButtonNode, +.flat .dijitDropDownButtonActive .dijitButtonNode, +.flat .dijitToggleButtonActive .dijitButtonNode, +.flat .dijitToggleButtonChecked .dijitButtonNode { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitComboButton .dijitButtonNodeActive, +.flat .dijitComboButton .dijitDownArrowButtonActive { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitButtonActive.alt-primary .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-primary .dijitButtonNode, +.flat .dijitComboButton.alt-primary .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-primary .dijitButtonNode, +.flat .dijitComboBoxActive.alt-primary .dijitButtonNode, +.flat .dijitSelectActive.alt-primary .dijitButtonContents, +.flat .dijitSelectActive.alt-primary .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitArrowButton, +.flat .dijitComboBox.alt-primary .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-primary .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-primary .dijitDownArrowButtonActive { + background: #1878cc; + border-color: #135fa3; +} +.flat .dijitButtonActive.alt-success .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-success .dijitButtonNode, +.flat .dijitComboButton.alt-success .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-success .dijitButtonNode, +.flat .dijitComboBoxActive.alt-success .dijitButtonNode, +.flat .dijitSelectActive.alt-success .dijitButtonContents, +.flat .dijitSelectActive.alt-success .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-success .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-success .dijitArrowButton, +.flat .dijitComboBox.alt-success .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-success .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-success .dijitDownArrowButtonActive { + background: #3b8d3e; + border-color: #2f7032; +} +.flat .dijitButtonActive.alt-info .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-info .dijitButtonNode, +.flat .dijitComboButton.alt-info .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-info .dijitButtonNode, +.flat .dijitComboBoxActive.alt-info .dijitButtonNode, +.flat .dijitSelectActive.alt-info .dijitButtonContents, +.flat .dijitSelectActive.alt-info .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-info .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-info .dijitArrowButton, +.flat .dijitComboBox.alt-info .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-info .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-info .dijitDownArrowButtonActive { + background: #0395d7; + border-color: #0276ab; +} +.flat .dijitButtonActive.alt-warning .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-warning .dijitButtonNode, +.flat .dijitComboButton.alt-warning .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-warning .dijitButtonNode, +.flat .dijitComboBoxActive.alt-warning .dijitButtonNode, +.flat .dijitSelectActive.alt-warning .dijitButtonContents, +.flat .dijitSelectActive.alt-warning .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitArrowButton, +.flat .dijitComboBox.alt-warning .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-warning .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-warning .dijitDownArrowButtonActive { + background: #dd7b00; + border-color: #b06200; +} +.flat .dijitButtonActive.alt-danger .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-danger .dijitButtonNode, +.flat .dijitComboButton.alt-danger .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-danger .dijitButtonNode, +.flat .dijitComboBoxActive.alt-danger .dijitButtonNode, +.flat .dijitSelectActive.alt-danger .dijitButtonContents, +.flat .dijitSelectActive.alt-danger .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitArrowButton, +.flat .dijitComboBox.alt-danger .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-danger .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-danger .dijitDownArrowButtonActive { + background: #dc211c; + border-color: #af1a17; +} +.flat .dijitButtonActive.alt-inverse .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-inverse .dijitButtonNode, +.flat .dijitComboButton.alt-inverse .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-inverse .dijitButtonNode, +.flat .dijitComboBoxActive.alt-inverse .dijitButtonNode, +.flat .dijitSelectActive.alt-inverse .dijitButtonContents, +.flat .dijitSelectActive.alt-inverse .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitArrowButton, +.flat .dijitComboBox.alt-inverse .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-inverse .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-inverse .dijitDownArrowButtonActive { + background: #555; + border-color: #444; +} +.flat .dijitButtonDisabled, +.flat .dijitDropDownButtonDisabled, +.flat .dijitComboButtonDisabled, +.flat .dijitToggleButtonDisabled { + outline: none; +} +.flat .dijitButtonDisabled .dijitButtonNode, +.flat .dijitDropDownButtonDisabled .dijitButtonNode, +.flat .dijitComboButtonDisabled .dijitButtonNode, +.flat .dijitToggleButtonDisabled .dijitButtonNode { + cursor: default; + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitButtonDisabled.alt-primary .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-primary .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-primary .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-primary .dijitButtonNode { + background: #6db2ee; + border-color: #50a2eb; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-primary .dijitStretch { + border-right-color: #50a2eb; +} +.flat .dijitComboButtonRtlDisabled.alt-primary .dijitStretch { + border-left-color: #50a2eb; +} +.flat .dijitComboBoxDisabled.alt-primary .dijitButtonNode { + border-left-color: #50a2eb; +} +.flat .dijitComboBoxRtlDisabled.alt-primary .dijitButtonNode { + border-right-color: #50a2eb; +} +.flat .dijitTimeTextBoxDisabled.alt-primary .dijitButtonNode { + border-left-color: #50a2eb; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-primary .dijitButtonNode { + border-right-color: #50a2eb; +} +.flat .dijitDateTextBoxDisabled.alt-primary .dijitButtonNode { + border-left-color: #50a2eb; +} +.flat .dijitDateTextBoxRtlDisabled.alt-primary .dijitButtonNode { + border-right-color: #50a2eb; +} +.flat .dijitButtonDisabled.alt-success .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-success .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-success .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-success .dijitButtonNode { + background: #7dc981; + border-color: #63be67; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-success .dijitStretch { + border-right-color: #63be67; +} +.flat .dijitComboButtonRtlDisabled.alt-success .dijitStretch { + border-left-color: #63be67; +} +.flat .dijitComboBoxDisabled.alt-success .dijitButtonNode { + border-left-color: #63be67; +} +.flat .dijitComboBoxRtlDisabled.alt-success .dijitButtonNode { + border-right-color: #63be67; +} +.flat .dijitTimeTextBoxDisabled.alt-success .dijitButtonNode { + border-left-color: #63be67; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-success .dijitButtonNode { + border-right-color: #63be67; +} +.flat .dijitDateTextBoxDisabled.alt-success .dijitButtonNode { + border-left-color: #63be67; +} +.flat .dijitDateTextBoxRtlDisabled.alt-success .dijitButtonNode { + border-right-color: #63be67; +} +.flat .dijitButtonDisabled.alt-info .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-info .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-info .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-info .dijitButtonNode { + background: #56c9fd; + border-color: #34befd; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-info .dijitStretch { + border-right-color: #34befd; +} +.flat .dijitComboButtonRtlDisabled.alt-info .dijitStretch { + border-left-color: #34befd; +} +.flat .dijitComboBoxDisabled.alt-info .dijitButtonNode { + border-left-color: #34befd; +} +.flat .dijitComboBoxRtlDisabled.alt-info .dijitButtonNode { + border-right-color: #34befd; +} +.flat .dijitTimeTextBoxDisabled.alt-info .dijitButtonNode { + border-left-color: #34befd; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-info .dijitButtonNode { + border-right-color: #34befd; +} +.flat .dijitDateTextBoxDisabled.alt-info .dijitButtonNode { + border-left-color: #34befd; +} +.flat .dijitDateTextBoxRtlDisabled.alt-info .dijitButtonNode { + border-right-color: #34befd; +} +.flat .dijitButtonDisabled.alt-warning .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-warning .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-warning .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-warning .dijitButtonNode { + background: #ffb557; + border-color: #ffa635; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-warning .dijitStretch { + border-right-color: #ffa635; +} +.flat .dijitComboButtonRtlDisabled.alt-warning .dijitStretch { + border-left-color: #ffa635; +} +.flat .dijitComboBoxDisabled.alt-warning .dijitButtonNode { + border-left-color: #ffa635; +} +.flat .dijitComboBoxRtlDisabled.alt-warning .dijitButtonNode { + border-right-color: #ffa635; +} +.flat .dijitTimeTextBoxDisabled.alt-warning .dijitButtonNode { + border-left-color: #ffa635; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-warning .dijitButtonNode { + border-right-color: #ffa635; +} +.flat .dijitDateTextBoxDisabled.alt-warning .dijitButtonNode { + border-left-color: #ffa635; +} +.flat .dijitDateTextBoxRtlDisabled.alt-warning .dijitButtonNode { + border-right-color: #ffa635; +} +.flat .dijitButtonDisabled.alt-danger .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-danger .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-danger .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-danger .dijitButtonNode { + background: #ee7e7c; + border-color: #eb6561; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-danger .dijitStretch { + border-right-color: #eb6561; +} +.flat .dijitComboButtonRtlDisabled.alt-danger .dijitStretch { + border-left-color: #eb6561; +} +.flat .dijitComboBoxDisabled.alt-danger .dijitButtonNode { + border-left-color: #eb6561; +} +.flat .dijitComboBoxRtlDisabled.alt-danger .dijitButtonNode { + border-right-color: #eb6561; +} +.flat .dijitTimeTextBoxDisabled.alt-danger .dijitButtonNode { + border-left-color: #eb6561; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-danger .dijitButtonNode { + border-right-color: #eb6561; +} +.flat .dijitDateTextBoxDisabled.alt-danger .dijitButtonNode { + border-left-color: #eb6561; +} +.flat .dijitDateTextBoxRtlDisabled.alt-danger .dijitButtonNode { + border-right-color: #eb6561; +} +.flat .dijitButtonDisabled.alt-inverse .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-inverse .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-inverse .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-inverse .dijitButtonNode { + background: #989898; + border-color: #848484; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-inverse .dijitStretch { + border-right-color: #848484; +} +.flat .dijitComboButtonRtlDisabled.alt-inverse .dijitStretch { + border-left-color: #848484; +} +.flat .dijitComboBoxDisabled.alt-inverse .dijitButtonNode { + border-left-color: #848484; +} +.flat .dijitComboBoxRtlDisabled.alt-inverse .dijitButtonNode { + border-right-color: #848484; +} +.flat .dijitTimeTextBoxDisabled.alt-inverse .dijitButtonNode { + border-left-color: #848484; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-inverse .dijitButtonNode { + border-right-color: #848484; +} +.flat .dijitDateTextBoxDisabled.alt-inverse .dijitButtonNode { + border-left-color: #848484; +} +.flat .dijitDateTextBoxRtlDisabled.alt-inverse .dijitButtonNode { + border-right-color: #848484; +} +.flat .dijitComboButtonDisabled .dijitArrowButton { + border-left-width: 0; +} +.flat .dijitDropDownButton .dijitButtonNode { + padding-right: 8px; +} +.flat table.dijitComboButton { + border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */ +} +.flat table.dijitComboButton .dijitStretch { + border-radius: 4px 0 0 4px; +} +.flat table.dijitComboButton .dijitArrowButton { + padding: 4px; + width: 20px; + border-radius: 0 4px 4px 0; + border-left-width: 0; +} +.flat .dijitToggleButton .dijitCheckBoxIcon { + display: none; +} +.flat .dijitToggleButtonChecked .dijitIcon { + display: inline-block; +} +.flat .dijitDropDownButton .dijitArrowButtonInner { + margin-left: 3px; +} +.flat .dijitDropDownButton .dijitArrowButtonInner, +.flat .dijitArrowButton { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.flat .dijitDropDownButton .dijitArrowButtonInner:before, +.flat .dijitArrowButton:before { + content: "\f002"; +} +.flat .dijitLeftArrowButton:before { + content: "\f000"; +} +.flat .dijitRightArrowButton:before { + content: "\f001"; +} +.flat .dijitUpArrowButton:before { + content: "\f003"; +} +/* Toolbar + * + * Styling Toolbar means styling the toolbar container and the widget inside toolbar (dijitToolbar) + * + * 1. toolbar (default styling): + * .dijitToolbar - styles for outer container + * + * 2. widget inside toolbar + * .dijitToolbar .dijitButtonNode - Button widget + * .dijitComboButton - ComboButton widget + * .dijitDropDownButton - DropDownButton widget + * .dijitToggleButton - ToggleButton widget + * + * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside) + * .dijitToolbar .dijitButtonNodeHover - styles for hovered Button widget + * + * 4. actived widget inside toolbar (ie, mouse down on the widget inside) + * .dijitToolbar .dijitButtonNodeActive - mouse down on Button widget + */ +.flat .dijitToolbar { + background-color: #f5f5f5; + padding: 4px; + zoom: 1; +/* Override default button styles */ +/* Hover */ +/* + .dijitComboButtonHover { + .dijitButtonNode, + .dijitDownArrowButton { + } + + .dijitButtonNodeHover, + .dijitDownArrowButtonHover { + } + } + */ +/* Active */ +/* Toggle button checked status */ +} +.flat .dijitToolbar label { + padding: 8px; +} +.flat .dijitToolbar .dijitToggleButton, +.flat .dijitToolbar .dijitButton, +.flat .dijitToolbar .dijitDropDownButton, +.flat .dijitToolbar .dijitComboButton { + margin-right: 4px; +} +.flat .dijitToolbar .dijitButton .dijitButtonNode, +.flat .dijitToolbar .dijitDropDownButton .dijitButtonNode, +.flat .dijitToolbar .dijitComboButton .dijitButtonNode, +.flat .dijitToolbar .dijitToggleButton .dijitButtonNode, +.flat .dijitToolbar .dijitComboBox .dijitButtonNode { + border-color: transparent; + padding: 4px; + background-color: transparent; + border-radius: 4px; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -o-transition-property: background-color; + -ms-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + -o-transition-duration: 0.3s; + -ms-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.flat .dijitToolbar .dijitComboButton .dijitStretch { +/* no rounded border on side adjacent to arrow */ + border-radius: 4px 0 0 4px; +} +.flat .dijitToolbar .dijitComboButton .dijitArrowButton { +/* no rounded border on side adjacent to button */ + border-radius: 0 4px 4px 0; +} +.flat .dijitToolbar .dijitComboBox .dijitButtonNode { + padding: 0 8px; +} +.flat .dijitToolbar .dijitComboBox .dijitInputInner { + padding: 0; +} +.flat .dijitToolbar .dijitDropDownButton .dijitArrowButtonInner { + margin-left: 4px; +} +.flat .dijitToolbar .dijitButtonHover .dijitButtonNode, +.flat .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, +.flat .dijitToolbar .dijitToggleButtonHover .dijitButtonNode, +.flat .dijitToolbar .dijitComboButtonHover .dijitButtonNode { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; + border: 1px solid #ccc; +} +.flat .dijitToolbar .dijitButtonActive .dijitButtonNode, +.flat .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, +.flat .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; + border: 1px solid #ccc; +} +.flat .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; + border: 1px solid #ccc; +} +.flat .dijitToolbarSeparator { + width: 1px; + height: 20px; + background-color: #ccc; + padding: 0; + margin: 0 4px; +} +.flat .dijitDisabled .dijitToolbar { + background-color: #f5f5f5; + border-bottom: 1px solid #ccc; +} +/* ProgressBar + * + * Styling of the ProgressBar consists of the following: + * + * 1. the base progress bar + * .dijitProgressBar - sets margins for the progress bar + * + * 2. the empty bar + * .dijitProgressBarEmpty - sets background img and color for bar or parts of bar that are not finished yet + * Also sets border color for whole bar + * + * 3. tile mode + * .dijitProgressBarTile + * inner container for finished portion when in 'tile' (image) mode + * + * 4. full bar mode + * .dijitProgressBarFull + * adds border to right side of the filled portion of bar + * + * 5. text for label of bar + * .dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts. + * + * 6. indeterminate mode + * .dijitProgressBarIndeterminate .dijitProgressBarTile + * sets animated gif for the progress bar in 'indeterminate' mode + */ +.flat .dijitProgressBar { + background-color: #e0e0e0; + border: 0 none; + border-radius: 4px; +} +.flat .dijitProgressBarTile { + background: url("images/progressBarStrips.png") repeat-x top; + -webkit-animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; + -ms-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} +.flat .dijitProgressBarFull { + background-color: #257aa7; + -webkit-transition-property: width; + -moz-transition-property: width; + -o-transition-property: width; + -ms-transition-property: width; + transition-property: width; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -ms-transition-duration: 0.25s; + transition-duration: 0.25s; + height: 100%; +} +.flat .dijitProgressBar.alt-primary .dijitProgressBarFull { + background-color: #1e88e5; +} +.flat .dijitProgressBar.alt-success .dijitProgressBarFull { + background-color: #43a047; +} +.flat .dijitProgressBar.alt-info .dijitProgressBarFull { + background-color: #03a9f4; +} +.flat .dijitProgressBar.alt-warning .dijitProgressBarFull { + background-color: #fb8c00; +} +.flat .dijitProgressBar.alt-danger .dijitProgressBarFull { + background-color: #e53935; +} +.flat .dijitProgressBar.alt-inverse .dijitProgressBarFull { + background-color: #616161; +} +.flat .dijitProgressBarLabel { + margin-top: 0.2em; + margin-bottom: 0.2em; + color: #fff; + font-size: 1em; + text-shadow: 0.1em 0.1em 1px #424242; +} +@-moz-keyframes progress-bar-stripes { + from { + background-position: 75px 0; + } + to { + background-position: 0 0; + } +} +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 75px 0; + } + to { + background-position: 0 0; + } +} +@-o-keyframes progress-bar-stripes { + from { + background-position: 75px 0; + } + to { + background-position: 0 0; + } +} +@keyframes progress-bar-stripes { + from { + background-position: 75px 0; + } + to { + background-position: 0 0; + } +} +.flat .dijitTreeRtl { + text-align: right; +} +.flat .dijitTreeRtl .dijitTreeContainer { + float: right; +} +.flat .dijitTreeRtl .dijitTreeExpandoClosed:before { + content: "\e60b"; +} +/* TitlePane and Fieldset + * + * Styling TitlePane means styling the TitlePane title and its content container (dijitTitlePane) + * + * TitlePane title: + * 1. TitlePane title (default styling): + * .dijitTitlePaneTitle - TitlePane's title div style: background-color, border + * + * 2. hovered TitlePane title (ie, mouse hover on a title bar) + * .dijitTitlePaneTitleHover - styles when mouse hover on the title div + * + * 3. active TitlePane title (ie, mouse down on a title bar) + * .dijitTitlePaneTitleActive - styles when mouse down on the title div + * + * + * TitlePane Content Container: + * 1. outer/inner container: + * .dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div + */ +.flat .dijitTitlePaneTitle { + border-style: solid; + border-width: 1px; + border-color: #ccc; + padding: 4px; + border-radius: 4px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + border-radius: 4px 4px 0 0; +} +.flat .dijitTitlePaneTitleHover, +.flat .dijitFieldsetTitleHover { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitTitlePaneTitleActive, +.flat .dijitFieldsetTitleActive { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitFieldset { + border-radius: 4px 4px 0 0; +} +.flat .dijitFieldset .dijitArrowNodeInner { + display: none; +} +.flat .dijitFieldset .dijitFieldsetTitleClosed .dijitArrowNode:before { + content: "\f006"; +} +.flat .dijitTitlePane .dijitArrowNode, +.flat .dijitFieldset .dijitArrowNode { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 18px; + text-align: center; +} +.flat .dijitTitlePane .dijitArrowNode:before, +.flat .dijitFieldset .dijitArrowNode:before { + content: "\f007"; +} +.flat .dijitTitlePane .dijitClosed, +.flat .dijitFieldset .dijitClosed { + border-radius: 4px; +} +.flat .dijitTitlePane .dijitClosed .dijitArrowNode:before, +.flat .dijitFieldset .dijitClosed .dijitArrowNode:before { + content: "\f006"; +} +.flat .dijitTitlePaneContentOuter { + background-color: #fff; + border: 1px solid #ccc; + border-top: none; + border-radius: 0 0 4px 4px; +} +.flat .dijitFieldset { + background-color: #fff; + border: 1px solid #ccc; + border-radius: 4px; +} +.flat .dijitTitlePaneContentInner, +.flat .dijitFieldsetContentInner { + padding: 8px; +} +.flat .dijitTitlePaneTextNode, +.flat .dijitFieldsetLegendNode { + margin-left: 8px; + margin-right: 8px; + vertical-align: text-top; +} +.flat .dijitFieldsetLegendNode { + cursor: default; +} +/* Time Picker + * + * Styling the Time Picker consists of the following: + * + * 1. minor time values + * .dijitTimePickerTick - set text color, size, background color of minor values + * .dijitTimePickerTickHover - set hover style of minor time values + * dijitTimePickerTickSelected - set selected style of minor time values + * + * 2. major time values - 1:00, 2:00, times on the hour + * set text color, size, background color, left/right margins for "zoom" affect + * .dijitTimePickerMarkerHover - to set hover style of major time values + * .dijitTimePickerMarkerSelected - set selected style of major time values + * + * 3. up and down arrow buttons + * .dijitTimePicker .dijitButtonNode - background-color, border + * .dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state + * + * Other classes provide the fundamental structure of the TimePicker and should not be modified. + */ +.dijitTimePickerPopup { + -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); + box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); + height: 200px; +} +.dijitTimePicker { + background-color: #fff; + padding: 4px 0; + border: 1px solid #ccc; + border-radius: 4px; +} +.dijitTimePickerItem { + margin: 0; +} +.dijitTimePickerTick { +/* minor value */ + color: #9e9e9e; + border: 0 none; +} +.dijitTimePickerMarker { +/* major value - 1:00, 2:00, times on the hour */ + background-color: transparent; + white-space: nowrap; + border: 0 none; +} +.dijitTimePickerTickHover, +.dijitTimePickerMarkerHover { + background: #f2f2f2; + color: #424242; +} +.dijitTimePickerMarkerSelected, +.dijitTimePickerTickSelected { + background: #f2f2f2; + color: #424242; +} +.dijitTimePickerTick .dijitTimePickerItemInner, +.dijitTimePickerMarker .dijitTimePickerItemInner { + padding: 8px; + margin: 0; +} +.flat .dijitCalendarRtl .dijitCalendarDecrease:before { + content: "\f001"; +} +.flat .dijitCalendarRtl .dijitCalendarIncrease:before { + content: "\f000"; +} +/* InlineEditBox + * + * Styling InlineEditBox mainly includes: + * + * 1. Normal state + * .dijitInlineEditBoxDisplayMode - for border + * + * 2. Hover state + * .dijitInlineEditBoxDisplayModeHover - for border and background color + */ +.flat .dijitInlineEditBoxDisplayMode { + border: 1px dashed transparent; + padding: 4px 6px; +} +.flat .dijitInlineEditBoxDisplayModeHover { + background-color: transparent; + border: 1px dashed #257aa7; +} +.flat .dijitInlineEditBoxDisplayModeDisabled { + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitMenuBarRtl { + text-align: right; +} +.flat .dijitMenuItemRtl { + text-align: right; +} +.flat .dijitMenuItemRtl .dijitMenuExpand:before { + content: "\f000"; +} +/* Dialog + * + * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog + * + * Dialog: + * 1. Dialog (default styling): + * .dijitDialog - styles for dialog's bounding box + * + * 2. Dialog title + * .dijitDialogTitleBar - styles for the title container at the top of dialog + * .dijitDialogTitle - the text container in dialog title + * + * 3. Dialog content + * .dijitDialogPaneContent - main container for content area and action bar + * .dijitDialogPaneContentArea - styles for content container + * + * 4. Dialog action bar + * .dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content + * + * 5. Dialog underlay + * .dijitDialogUnderlay - div under the dialog which used for separate dialog and page content + * + * + * Tooltip & TooltipDialog: + * 1. tooltip content container: + * .dijitTooltipContainer - tooltip content container + * + * 2. tooltip connector: + * .dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right) + */ +.flat .dijitDialog { + background-color: #fff; + border: 1px solid #ccc; + border-radius: 4px; + -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); + box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); +} +.flat .dijitDialogPaneContent { + background-color: #fff; + border-radius: 0 0 4px 4px; + padding: 8px; + position: relative; +} +.flat .dijitDialogPaneActionBar { +/* the bar at bottom with OK/Cancel buttons */ + padding-top: 8px; + text-align: right; + position: relative; +} +.flat .dijitDialogPaneActionBar .dijitButton { + float: none; +} +.flat .dijitTooltipDialog .dijitDialogPaneActionBar { + border-radius: 0 0 4px 4px; + margin: 8px 0 0; +} +.flat .dijitDialogTitleBar { +/* outer container for the titlebar of the dialog */ + line-height: 20px; + border-bottom: 1px solid #e0e0e0; + padding: 8px 12px; + border-radius: 4px 4px 0 0; +} +.flat .dijitDialogTitle { +/* typography and styling of the dialog title */ + font-size: 1.1em; + font-weight: bold; +} +.flat .dijitDialogCloseIcon { +/* the default close icon for the dialog */ + width: 20px; + height: 20px; + line-height: 20px; + text-align: center; + position: absolute; + top: 8px; + right: 12px; + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitDialogCloseIcon:before { + content: "\f00e"; + font-size: 20px; +} +.flat .dijitDialogCloseIcon .closeText { + display: none; +} +.flat .dijitDialogCloseIconHover, +.flat .dijitDialogCloseIconActive { + opacity: 1; + -ms-filter: none; + filter: none; +} +.flat .dijitDialogUnderlay { + background: #000; + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitTooltip, +.flat .dijitTooltipDialog { +/* the outermost dom node, holding the connector and container */ + background: transparent; /* make the area on the sides of the arrow transparent */ +} +.flat .dijitTooltipContainer { + background-color: #424242; + opacity: 1; + -ms-filter: none; + filter: none; + padding: 4px 8px; + border-radius: 4px; +} +.flat .dijitTooltip .dijitTooltipContainer { + color: #fff; + border: 0 none; +} +.flat .dijitTooltipConnector { +/* the arrow */ + z-index: 2; + width: auto; + height: auto; + opacity: 1; + -ms-filter: none; + filter: none; +} +.flat .dijitTooltipABRight .dijitTooltipConnector { +/* above or below tooltip, but the arrow appears on the right, + and the right edges of target and tooltip are aligned rather than the left */ + left: auto !important; + right: 8px; +} +.flat .dijitTooltipBelow { +/* leave room for arrow above content */ + padding-top: 4px; +} +.flat .dijitTooltipBelow .dijitTooltipConnector { +/* the arrow piece for tooltips below an element */ + top: 0; + left: 8px; + border-bottom: 4px solid #424242; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 0; +} +.flat .dijitTooltipAbove { +/* leave room for arrow below content */ + padding-bottom: 4px; +} +.flat .dijitTooltipAbove .dijitTooltipConnector { +/* the arrow piece for tooltips above an element */ + bottom: 0; + left: 8px; + border-top: 4px solid #424242; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-bottom: 0; +} +.flat .dijitTooltipLeft { + padding-right: 4px; +} +.flat .dijitTooltipLeft .dijitTooltipConnector { +/* the arrow piece for tooltips to the left of an element, bottom borders aligned */ + right: 0; + border-left: 4px solid #424242; + border-bottom: 4px solid transparent; + border-top: 4px solid transparent; + border-right: 0; +} +.flat .dijitTooltipRight { + padding-left: 4px; +} +.flat .dijitTooltipRight .dijitTooltipConnector { +/* the arrow piece for tooltips to the right of an element, bottom borders aligned */ + left: 0; + border-bottom: 4px solid transparent; + border-top: 4px solid transparent; + border-right: 4px solid #424242; +} +.flat .dijitTooltipDialog .dijitTooltipContainer { + background: #fff; + border: 1px solid #ccc; + border-radius: 4px; + -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); + box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); + opacity: 1; + -ms-filter: none; + filter: none; +} +.flat .dijitTooltipDialog.dijitTooltipBelow { + padding-top: 6px; +} +.flat .dijitTooltipDialog.dijitTooltipAbove { + padding-bottom: 6px; +} +.flat .dijitTooltipDialog.dijitTooltipLeft { + padding-right: 6px; +} +.flat .dijitTooltipDialog.dijitTooltipRight { + padding-left: 6px; +} +.flat .dijitTooltipDialog .dijitTooltipConnector { + height: 0; + width: 0; + position: absolute; + z-index: 2; + opacity: 1; + -ms-filter: none; + filter: none; +} +.flat .dijitTooltipDialog .dijitTooltipConnector:after { + content: ""; + height: 0; + width: 0; + position: absolute; +} +.flat .dijitTooltipDialog.dijitTooltipAbove .dijitTooltipConnector { + border-color: #ccc transparent transparent; + border-width: 7px 7px 0; /* one extra pixel is added as the border of the arrows */ + border-style: solid; +} +.flat .dijitTooltipDialog.dijitTooltipAbove .dijitTooltipConnector:after { + border-color: #fff transparent transparent; + border-width: 6px 6px 0; + border-style: solid; + left: -6px; + top: -7px; +} +.flat .dijitTooltipDialog.dijitTooltipBelow .dijitTooltipConnector { + border-color: transparent transparent #ccc; + border-width: 0 7px 7px; + border-style: solid; +} +.flat .dijitTooltipDialog.dijitTooltipBelow .dijitTooltipConnector:after { + border-color: transparent transparent #fff; + border-width: 0 6px 6px; + border-style: solid; + left: -6px; + bottom: -7px; +} +.flat .dijitTooltipDialog.dijitTooltipLeft .dijitTooltipConnector { + border-color: transparent transparent transparent #ccc; + border-width: 7px 0 7px 7px; + border-style: solid; +} +.flat .dijitTooltipDialog.dijitTooltipLeft .dijitTooltipConnector:after { + border-color: transparent transparent transparent #fff; + border-width: 6px 0 6px 6px; + border-style: solid; + top: -6px; + left: -7px; +} +.flat .dijitTooltipDialog.dijitTooltipRight .dijitTooltipConnector { + border-color: transparent #ccc transparent transparent; + border-width: 7px 7px 7px 0; + border-style: solid; +} +.flat .dijitTooltipDialog.dijitTooltipRight .dijitTooltipConnector:after { + border-color: transparent #fff transparent transparent; + border-width: 6px 6px 6px 0; + border-style: solid; + top: -6px; + right: -7px; +} +/* Tree + * + * Styling Tree mostly means styling the TreeRow (dijitTreeRow) + * There are 4 basic states to style: + * + * Tree Row: + * 1. tree row (default styling): + * .dijitTreeRow - styles for each row of the tree + * + * 2. hovered tree row (mouse hover on a tree row) + * .dijitTreeRowHover - styles when mouse over on one row + * + * 3. active tree row (mouse down on a tree row) + * .dijitTreeRowActive - styles when mouse down on one row + * + * 4. selected tree row + * dijitTreeRowSelected - style when the row has been selected + * + * Tree Expando: + * dijitTreeExpando - the expando at the left of the text of each tree row + * + */ +.flat .dijitTreeIsRoot { + background-color: transparent; +} +.flat .dijitTreeRow, +.flat .dijitTreeNode .dojoDndItemBefore, +.flat .dijitTreeNode .dojoDndItemAfter { + padding: 8px 0; + border: 0 transparent; + line-height: 20px; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -o-transition-property: background-color; + -ms-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.15s; + -moz-transition-duration: 0.15s; + -o-transition-duration: 0.15s; + -ms-transition-duration: 0.15s; + transition-duration: 0.15s; + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + -ms-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.flat .dijitTreeRowHover { + background-color: #f2f2f2; + border-color: transparent; + -webkit-transition-duration: 0.15s; + -moz-transition-duration: 0.15s; + -o-transition-duration: 0.15s; + -ms-transition-duration: 0.15s; + transition-duration: 0.15s; +} +.flat .dijitTreeRowActive { + background-color: #f2f2f2; + border-color: transparent; +} +.flat .dijitTreeRowSelected, +.flat .dijitTreeRowHover.dijitTreeRowSelected, +.flat .dijitTreeRowActive.dijitTreeRowSelected { + color: #fff; + background-color: #257aa7; + border-color: transparent; +} +.flat .dijitTreeRowSelected .dijitTreeExpando, +.flat .dijitTreeRowHover.dijitTreeRowSelected .dijitTreeExpando, +.flat .dijitTreeRowActive.dijitTreeRowSelected .dijitTreeExpando { + color: #fff; +} +.flat .dijitTreeExpando { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + width: 14px; + height: 14px; + line-height: 14px; + text-align: center; + margin-left: 4px; + margin-right: 4px; + color: #257aa7; + vertical-align: middle; +} +.flat .dijitTreeExpandoOpened:before { + content: "\f012"; + cursor: pointer; +} +.flat .dijitTreeExpandoClosed:before { + content: "\f011"; +} +.flat .dijitTreeExpandoLoading { + -webkit-animation: spinning 2s linear infinite; + -moz-animation: spinning 2s linear infinite; + -o-animation: spinning 2s linear infinite; + -ms-animation: spinning 2s linear infinite; + animation: spinning 2s linear infinite; +} +.flat .dijitTreeExpandoLoading:before { + content: "\f01d"; +} +.dj_ie8 .dijitTreeExpandoLoading, +.dj_ie9 .dijitTreeExpandoLoading { + background: url("images/loadingAnimation.gif") no-repeat; +} +.dj_ie8 .dijitTreeExpandoLoading:before, +.dj_ie9 .dijitTreeExpandoLoading:before { + content: ""; +} +@-moz-keyframes spinning { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(-360deg); + -moz-transform: rotate(-360deg); + -o-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); + } +} +@-webkit-keyframes spinning { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(-360deg); + -moz-transform: rotate(-360deg); + -o-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); + } +} +@-o-keyframes spinning { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(-360deg); + -moz-transform: rotate(-360deg); + -o-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); + } +} +@keyframes spinning { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(-360deg); + -moz-transform: rotate(-360deg); + -o-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); + } +} +/* ColorPalette + * + * Styling of the ColorPalette consists of the following: + * + * 1. the whole color palette + * .dijitColorPalette - for outline, border, and background color of the whole color palette + * Note: outline does not work for IE + * + * 2. the color swatch + * .dijitColorPalette .dijitPaletteImg + * transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch. + * displays border around a color swatch + * + * 3. hovered swatch + * .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg + * the hovered state of the color swatch - adds border + * + * 4. active and selected swatch + * .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg + * .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg + * adds border for active or selected state + */ +.flat .dijitColorPalette { + border: 1px solid #ccc; + background-color: #fff; + border-radius: 4px; +/* swatch */ +} +.flat .dijitColorPalette .dijitPaletteTable { + padding: 4px; +} +.flat .dijitColorPalette .dijitColorPaletteSwatch { + height: 15px; + width: 15px; + border-radius: 2px; +} +.flat .dijitColorPalette .dijitPaletteImg { +/* transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch. + * displays border around a color swatch + * overrides border color in dijit.css */ + border: 1px solid transparent; + line-height: normal; +} +.flat .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg { + border-color: #ccc; + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 2px; + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + -o-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); +} +.flat .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg, +.flat .dijitColorPalette .dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg { + border: 1px solid #257aa7; + -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); + box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); + border-radius: 2px; + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + -o-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); +} +/* Editor + * + * Styling Editor means styling the Editor inside iframe container (dijitEditorIFrameContainer) + * + * 1. Editor iframe container (default styling): + * .dijitEditorIFrameContainer - normal state styles: background-color, border, padding + * + * 2. hovered Editor iframe container (ie, mouse hover on editor) + * .dijitEditorHover .dijitEditorIFrameContainer/dijitEditorIFrame - styles when mouse hover on the container + * + * 3. focused Editor iframe container (ie, mouse focus on the editor pane) + * .dijitEditorFocused .dijitEditorIFrameContainer/dijitEditorIFrame - styles when container focused + * + * 3. disabled Editor iframe container + * .dijitEditorDisabled - editor's inner iframe container disable status styles: background, border + */ +.flat .dijitEditor { + background-color: #fff; + border: 1px solid #ccc; + border-radius: 4px; +} +.flat .dijitEditor .dijitEditorIFrameContainer { + border: 1px solid transparent; + border-top: 1px solid #ccc; + padding: 4px 8px; + -webkit-transition: border 0.2s linear 0s; + -moz-transition: border 0.2s linear 0s; + -o-transition: border 0.2s linear 0s; + -ms-transition: border 0.2s linear 0s; + transition: border 0.2s linear 0s; +} +.flat .dijitEditorHover .dijitEditorIFrameContainer, +.flat .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame { + border: 1px solid #257aa7; +} +.flat .dijitEditorFocused .dijitEditorIFrameContainer { + border: 1px solid #257aa7; +} +.flat .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame { + border: 1px solid #257aa7; +} +.flat .dijitEditorDisabled { + border: 1px solid #ccc; + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitEditorDisabled .dijitEditorIFrame, +.flat .dijitEditorDisabled .dijitEditorIFrameContainer, +.flat .dijitEditorDisabled .dijitEditorIFrameContainer .dijitEditorIFrame { + background-color: #f5f5f5; + border: 1px solid transparent; +} +/* + * font generated with https://icomoon.io/app + * + * all icons are Material Design icons by Google + * https://github.com/google/material-design-icons/blob/master/LICENSE + * + * see README for more about flat theme icons + */ +@font-face { + font-family: 'flat-icon'; + src: url("fonts/flat-icon.eot?90nq1s"); + src: url("fonts/flat-icon.eot?#iefix90nq1s") format('embedded-opentype'), url("fonts/flat-icon.ttf?90nq1s") format('truetype'), url("fonts/flat-icon.woff?90nq1s") format('woff'), url("fonts/flat-icon.svg?90nq1s#flat-icon") format('svg'); + font-weight: normal; + font-style: normal; +} +[class^="flat-"], +[class*=" flat-"] { + font-family: 'flat-icon'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.dijitIcon, +.dijitEditorIcon { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 16px; + width: 16px; + height: 16px; +} +.flat-drop-left:before { + content: "\f000"; +} +.flat-drop-right:before { + content: "\f001"; +} +.flat-drop-down:before { + content: "\f002"; +} +.flat-drop-up:before { + content: "\f003"; +} +.flat-chevron-left:before { + content: "\f004"; +} +.flat-chevron-right:before { + content: "\f005"; +} +.flat-chevron-down:before { + content: "\f006"; +} +.flat-chevron-up:before { + content: "\f007"; +} +.flat-arrow-left:before { + content: "\f008"; +} +.flat-arrow-right:before { + content: "\f009"; +} +.flat-arrow-down:before { + content: "\f00a"; +} +.flat-arrow-up:before { + content: "\f00b"; +} +.flat-check:before { + content: "\f00c"; +} +.flat-check-circle:before { + content: "\f00d"; +} +.flat-close:before { + content: "\f00e"; +} +.dijitIconClear:before, +.flat-close-circle:before { + content: "\f00f"; +} +.dijitEditorIconCancel:before, +.flat-close-circle-o:before { + content: "\f010"; +} +.flat-add:before { + content: "\f011"; +} +.flat-remove:before { + content: "\f012"; +} +.flat-add-circle:before { + content: "\f013"; +} +.flat-remove-circle:before { + content: "\f014"; +} +.flat-add-circle-o:before { + content: "\f015"; +} +.flat-remove-circle-o:before { + content: "\f016"; +} +.dijitIconError:before, +.flat-error:before { + content: "\f017"; +} +.flat-error-o:before { + content: "\f018"; +} +.flat-warning:before { + content: "\f019"; +} +.flat-report:before { + content: "\f01a"; +} +.flat-help:before { + content: "\f01b"; +} +.flat-no-symbol:before { + content: "\f01c"; +} +.flat-update:before { + content: "\f01d"; +} +.flat-calendar:before { + content: "\f01e"; +} +.flat-clock:before { + content: "\f01f"; +} +.dijitFolderClosed:before, +.dijitIconFolderClosed:before, +.flat-folder:before { + content: "\f020"; +} +.dijitFolderOpened:before, +.dijitIconFolderOpen:before, +.flat-folder-open:before { + content: "\f021"; +} +.dijitIconEdit:before, +.flat-edit:before { + content: "\f022"; +} +.dijitIconSave:before, +.dijitEditorIconSave:before, +.flat-save:before { + content: "\f023"; +} +.dijitIconPrint:before, +.dijitEditorIconPrint:before, +.flat-print:before { + content: "\f024"; +} +.dijitIconDelete:before, +.dijitEditorIconDelete:before, +.flat-delete:before { + content: "\f025"; +} +.dijitLeaf:before, +.flat-page:before { + content: "\f026"; +} +.flat-page-o:before { + content: "\f027"; +} +.flat-page-add:before { + content: "\f028"; +} +.flat-page-remove:before { + content: "\f029"; +} +.flat-page-add-o:before { + content: "\f02a"; +} +.flat-page-remove-o:before { + content: "\f02b"; +} +.dijitIconFile:before, +.flat-file:before { + content: "\f02c"; +} +.dijitIconMail:before, +.flat-mail:before { + content: "\f02d"; +} +.dijitIconDatabase:before, +.flat-storage:before { + content: "\f02e"; +} +.dijitIconConfigure:before, +.flat-settings:before { + content: "\f02f"; +} +.dijitIconSearch:before, +.flat-search:before { + content: "\f030"; +} +.dijitIconBookmark:before, +.flat-bookmark:before { + content: "\f031"; +} +.flat-menu:before { + content: "\f032"; +} +.dijitIconApplication:before, +.flat-application:before { + content: "\f033"; +} +.dijitIconKey:before, +.flat-key:before { + content: "\f034"; +} +.dijitIconTable:before, +.dijitEditorIconInsertTable:before, +.flat-table:before { + content: "\f035"; +} +.flat-grid:before { + content: "\f036"; +} +.dijitIconChart:before, +.flat-chart:before { + content: "\f037"; +} +.dijitIconFilter:before, +.flat-filter:before { + content: "\f038"; +} +.dijitIconFunction:before, +.flat-function:before { + content: "\f039"; +} +.flat-user:before { + content: "\f03a"; +} +.dijitIconUsers:before, +.flat-users:before { + content: "\f03b"; +} +.dijitIconConnector:before, +.flat-connector:before { + content: "\f03c"; +} +.dijitIconDocuments:before, +.flat-documents:before { + content: "\f03d"; +} +.dijitIconEditProperty:before, +.flat-edit-property:before { + content: "\f03e"; +} +.dijitIconTask:before, +.flat-task:before { + content: "\f03f"; +} +.dijitIconNewTask:before, +.flat-task-new:before { + content: "\f040"; +} +.dijitIconEditTask:before, +.flat-task-edit:before { + content: "\f041"; +} +.dijitIconSample:before, +.flat-sample:before { + content: "\f042"; +} +.dijitIconPackage:before, +.flat-package:before { + content: "\f043"; +} +.dijitEditorIconUndo:before, +.flat-undo:before { + content: "\f044"; +} +.dijitEditorIconRedo:before, +.flat-redo:before { + content: "\f045"; +} +.dijitIconCopy:before, +.dijitEditorIconCopy:before, +.flat-copy:before { + content: "\f046"; +} +.dijitIconCut:before, +.dijitEditorIconCut:before, +.flat-cut:before { + content: "\f047"; +} +.dijitEditorIconPaste:before, +.flat-paste:before { + content: "\f048"; +} +.dijitEditorIconBold:before, +.flat-bold:before { + content: "\f049"; +} +.dijitEditorIconItalic:before, +.flat-italic:before { + content: "\f04a"; +} +.dijitEditorIconUnderline:before, +.flat-underline:before { + content: "\f04b"; +} +.dijitEditorIconStrikethrough:before, +.flat-strikethrough:before { + content: "\f04c"; +} +.dijitEditorIconRemoveFormat:before, +.flat-clear-format:before { + content: "\f04d"; +} +.flat-quote:before { + content: "\f04e"; +} +.dijitEditorIconSuperscript:before, +.flat-superscript:before { + content: "\f04f"; +} +.dijitEditorIconSubscript:before, +.flat-subscript:before { + content: "\f050"; +} +.dijitEditorIconForeColor:before, +.flat-color-text:before { + content: "\f051"; +} +.dijitEditorIconBackColor:before, +.flat-color-fill:before { + content: "\f052"; +} +.dijitEditorIconHiliteColor:before, +.flat-color-highlight:before { + content: "\f053"; +} +.flat-font-size:before { + content: "\f054"; +} +.dijitEditorIconJustifyCenter:before, +.flat-align-center:before { + content: "\f055"; +} +.dijitEditorIconJustifyFull:before, +.flat-align-justify:before { + content: "\f056"; +} +.dijitEditorIconJustifyLeft:before, +.flat-align-left:before { + content: "\f057"; +} +.dijitEditorIconJustifyRight:before, +.flat-align-right:before { + content: "\f058"; +} +.dijitEditorIconIndent:before, +.flat-indent:before { + content: "\f059"; +} +.dijitEditorIconOutdent:before, +.flat-outdent:before { + content: "\f05a"; +} +.flat-sort:before { + content: "\f05b"; +} +.dijitEditorIconSpace:before, +.flat-keyboard-space:before { + content: "\f05c"; +} +.dijitEditorIconTabIndent:before, +.flat-keyboard-tab:before { + content: "\f05d"; +} +.dijitEditorIconInsertUnorderedList:before, +.flat-list-bullet:before { + content: "\f05e"; +} +.dijitEditorIconInsertOrderedList:before, +.flat-list-number:before { + content: "\f05f"; +} +.dijitEditorIconListBulletIndent:before, +.flat-list-bullet-indent:before { + content: "\f060"; +} +.dijitEditorIconListBulletOutdent:before, +.flat-list-bullet-outdent:before { + content: "\f061"; +} +.dijitEditorIconListNumIndent:before, +.flat-list-number-indent:before { + content: "\f062"; +} +.dijitEditorIconListNumOutdent:before, +.flat-list-number-outdent:before { + content: "\f063"; +} +.dijitEditorIconViewSource:before, +.flat-code:before { + content: "\f064"; +} +.dijitEditorIconCreateLink:before, +.flat-link:before { + content: "\f065"; +} +.dijitEditorIconUnlink:before, +.flat-unlink:before { + content: "\f066"; +} +.dijitEditorIconFullScreen:before, +.flat-fullscreen:before { + content: "\f067"; +} +.flat-fullscreen-exit:before { + content: "\f068"; +} +.dijitEditorIconInsertImage:before, +.flat-image:before { + content: "\f069"; +} +.dijitEditorIconNewPage:before, +.flat-page-new:before { + content: "\f06a"; +} +.dijitEditorIconToggleDir:before, +.flat-toggle-dir:before { + content: "\f06b"; +} +.dijitEditorIconLeftToRight:before, +.flat-left-to-right:before { + content: "\f06c"; +} +.dijitEditorIconRightToLeft:before, +.flat-right-to-left:before { + content: "\f06d"; +} +.dijitEditorIconSelectAll:before, +.flat-select-all:before { + content: "\f06e"; +} +.dijitEditorIconWikiword:before, +.flat-wikiword:before { + content: "\f06f"; +} +.icon-spin { + -webkit-animation: spin-right 2s infinite linear; + -moz-animation: spin-right 2s infinite linear; + -o-animation: spin-right 2s infinite linear; + -ms-animation: spin-right 2s infinite linear; + animation: spin-right 2s infinite linear; +} +.dijitIconLoading { + font-size: 24px; +} +.dijitIconLoading:before { + content: "\f01d"; + -webkit-animation: spin-left 2s linear infinite; + -moz-animation: spin-left 2s linear infinite; + -o-animation: spin-left 2s linear infinite; + -ms-animation: spin-left 2s linear infinite; + animation: spin-left 2s linear infinite; +} +.dj_ie8 .dijitIconLoading, +.dj_ie9 .dijitIconLoading { + background: url("images/loadingAnimation.gif") no-repeat; + height: 20px; + width: 20px; +} +.dj_ie8 .dijitIconLoading:before, +.dj_ie9 .dijitIconLoading:before { + content: ""; +} +.dijitRtl .dijitEditorIconUndo:before { + content: "\f044"; +} +.dijitRtl .dijitEditorIconRedo:before { + content: "\f044"; +} +.dijitRtl .dijitEditorIconTabIndent:before { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -o-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.dijitRtl .dijitEditorIconInsertUnorderedList, +.dijitRtl .dijitEditorIconInsertOrderedList { + -webkit-transform: scale(-1, 1); + -moz-transform: scale(-1, 1); + -o-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} +:root .dijitRtl .dijitEditorIconInsertUnorderedList, +:root .dijitRtl .dijitEditorIconInsertOrderedList { + filter: none; +} +@-moz-keyframes spin-right { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-webkit-keyframes spin-right { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-o-keyframes spin-right { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes spin-right { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-moz-keyframes spin-left { + from { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + to { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } +} +@-webkit-keyframes spin-left { + from { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + to { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } +} +@-o-keyframes spin-left { + from { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + to { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } +} +@keyframes spin-left { + from { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + to { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } +} +/* RTL files */ + +/* dijit */ + +/* layout */ + +/* dijit */ + +/* not in flat theme */ +/* dijit base */ + +/* dijit */ + +/* layout */ + +/* form */ + +/* icons */ + +/* rtl */ +.flat .dijitToolbar .dijitToggleButtonRtl, +.flat .dijitToolbar .dijitButtonRtl, +.flat .dijitToolbar .dijitDropDownButtonRtl, +.flat .dijitToolbar .dijitComboButtonRtl { + margin-left: 4px; + margin-right: auto; +} +.flat .dijitToolbar .dijitDropDownButtonRtl .dijitArrowButtonInner { + margin-left: auto; + margin-right: 4px; +} +.flat .dijitTabContainerTop-tabs .dijitTabRtl, +.flat .dijitTabContainerBottom-tabs .dijitTabRtl { + margin-right: 0; + margin-left: -1px; +} +.flat .dijitTabControllerRtl, +.flat .dijitTabControllerRtl .nowrapTabStrip { + text-align: right; +} +.flat .dijitTabRtl .dijitTabCloseButton { + margin-left: 0; + margin-right: 4px; +} +/* BorderContainer + +Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable. + +Styling the BorderContainer widget consists of the following: + +.dijitBorderContainer - for border and padding of the entire border container + +.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer. + +.dijitBorderContainer-dijitTabContainerTop, +.dijitBorderContainer-dijitTabContainerBottom, +.dijitBorderContainer-dijitTabContainerLeft, +.dijitBorderContainer-dijitTabContainerRight, +.dijitBorderContainer-dijitAccordionContainer -for border of the border containers within TabContainer or AccordionContainer widget + +.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers + +Splitters and gutters: + +.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter +.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter +.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter +.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter +.dijitSplitterHHover - for background-color of a hovered horizontal splitter +.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter +.dijitSplitterVHover - for background-color of a hovered vertical splitter +.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter +.dijitSplitterHActive - for background-color of an active horizontal splitter +.dijitSplitterVActive - for background-color of an active horizontal splitter +*/ +.flat .dijitBorderContainer { +/* matches the width of the splitters between panes */ + padding: 5px; +} +.flat .dijitSplitContainer-child, +.flat .dijitBorderContainer-child { + border: 1px solid #ccc; +} +.flat .dijitBorderContainer-dijitTabContainerTop, +.flat .dijitBorderContainer-dijitTabContainerBottom, +.flat .dijitBorderContainer-dijitTabContainerLeft, +.flat .dijitBorderContainer-dijitTabContainerRight, +.flat .dijitBorderContainer-dijitAccordionContainer { +/* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper), + * so override rule setting border on domNode + */ + border: none; +} +.flat .dijitBorderContainer-dijitBorderContainer { + border: 0; + padding: 0; +} +.flat .dijitSplitterH, +.flat .dijitGutterH { + background: none; + border: 0; + height: 5px; +} +.flat .dijitSplitterH .dijitSplitterThumb { + background: #ccc; + height: 1px; + top: 2px; + width: 19px; +} +.flat .dijitSplitterV, +.flat .dijitGutterV { + background: none; + border: 0; + width: 5px; + margin: 0; +} +.flat .dijitSplitterV .dijitSplitterThumb { + background: #ccc; + height: 19px; + left: 2px; + width: 1px; + margin: 0; +} +.flat .dijitSplitterHHover, +.flat .dijitSplitterVHover { + font-size: 1px; + background: #f2f2f2; +} +.flat .dijitSplitterHHover .dijitSplitterThumb, +.flat .dijitSplitterVHover .dijitSplitterThumb { + background: #999; +} +.flat .dijitSplitterHActive, +.flat .dijitSplitterVActive { + font-size: 1px; + background: #f2f2f2; +} +.flat .dijitSplitterHActive .dijitSplitterThumb, +.flat .dijitSplitterVActive .dijitSplitterThumb { + background: #999; +} +/* TabContainer + * + * Styling TabContainer means styling the TabList and Its content container (dijitTitlePane) + * + * Tab List: (including 4 kinds of tab location) + * .dijitTabContainerTop-tabs - tablist container at top + * .dijitTabContainerBottom-tabs - tablist container at bottom + * .dijitTabContainerLeft-tabs - tablist container at left + * .dijitTabContainerRight-tabs - tablist container at right + * + * Tab Strip Button: + * .dijitTabStripIcon - tab strip button icon + * .dijitTabStripMenuIcon - down arrow icon position + * .dijitTabStripSlideLeftIcon - left arrow icon position + * .dijitTabStripSlideRightIcon - right arrow icon position + * + * .tabStripButtonDisabled - styles for disabled tab strip buttons + * + * Tab Button: + * .dijitTabContainerTop-tabs .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 .dijitTab + * - styles for selected status of top tab button + * same to Bottom, Left, Right Tabs + * + * .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 + * .dijitTabCloseButtonActive - styles when mouse down on close action button + * + * Tab Button: (checked status) + * + * Tab Content Container: + * .dijitTabContainerTop-dijitContentPane + * .dijitTabContainerBottom-dijitContentPane + * .dijitTabContainerLeft-dijitContentPane + * .dijitTabContainerRight-dijitContentPane - for background and padding + * + * Nested Tabs: + * .dijitTabContainerNested - Container for nested tabs + * .dijitTabContainerTabListNested - tab list container for nested tabs + */ +.flat .dijitTabContainer { + border-radius: 4px; +} +.flat .dijitTabPaneWrapper { + background: #fff; + border: 1px solid #ccc; + margin: 0; + padding: 0; + border-radius: 0 0 4px 4px; +} +.flat .dijitTabContainerTop-tabs, +.flat .dijitTabContainerBottom-tabs, +.flat .dijitTabContainerLeft-tabs, +.flat .dijitTabContainerRight-tabs { + border: none; +} +.flat .dijitTabSpacer { + display: none; +} +.flat .dijitTab { + border: 1px solid transparent; + background-color: #fff; + text-align: center; + -webkit-transition-property: background, padding, margin; + -moz-transition-property: background, padding, margin; + -o-transition-property: background, padding, margin; + -ms-transition-property: background, padding, margin; + transition-property: background, padding, margin; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + -o-transition-duration: 0.2s; + -ms-transition-duration: 0.2s; + transition-duration: 0.2s; + -webkit-transition-timing-function: ease; + -moz-transition-timing-function: ease; + -o-transition-timing-function: ease; + -ms-transition-timing-function: ease; + transition-timing-function: ease; + position: relative; + z-index: 0; +} +.flat .dijitTab:before { + content: ""; + display: block; + position: absolute; +} +.flat .dijitTabHover { + background-color: #f2f2f2; +} +.flat .dijitTabActive { + background-color: #e6e6e6; +} +.flat .dijitTabChecked { + border: 1px solid #ccc; + z-index: 1; +} +.flat .dijitTabChecked.dijitTabHover, +.flat .dijitTabChecked.dijitTabActive { + border: 1px solid #ccc; + background-color: #fff; + color: #424242; +} +.flat .dijitTabDisabled { + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .tabStripButton { + background-color: transparent; + border: none; +} +.flat .dijitTabCloseButton { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: 1; + font-size: 1em; + vertical-align: middle; + margin-left: 4px; + opacity: 0.35; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)"; + filter: alpha(opacity=35); +} +.flat .dijitTabCloseButton:before { + content: "\f00e"; +} +.flat .dijitTabCloseButtonHover { + opacity: 0.75; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; + filter: alpha(opacity=75); +} +.flat .dijitTabCloseButtonActive { + opacity: 1; + -ms-filter: none; + filter: none; +} +.flat .dijitTabContainerTop-tabs .dijitTab { + margin-right: 0; + padding: 6px 16px; + border-bottom-color: #ccc; + border-left: none; + border-right: none; +} +.flat .dijitTabContainerTop-tabs .dijitTabChecked { + border-bottom: 1px solid #fff; + border-left: 1px solid #ccc; + border-right: 1px solid #ccc; +} +.flat .dijitTabContainerTop-tabs .dijitTabChecked:before { + height: 3px; + background: #257aa7; + top: -1px; + left: -1px; + right: -1px; +} +.flat .dijitTabListContainer-top { + margin-top: 1px; +} +.flat .dijitTabListContainer-top .dijitTab { + top: 0; +} +.flat .dijitTabPaneWrapper.dijitTabContainerBottom-container { + border-radius: 4px 4px 0 0; +} +.flat .dijitTabContainerBottom-tabs .dijitTab { + margin-right: 0; + padding: 6px 16px; + border-top-color: #ccc; + border-left: none; + border-right: none; +} +.flat .dijitTabContainerBottom-tabs .dijitTabChecked { + border-top: 1px solid #fff; + border-left: 1px solid #ccc; + border-right: 1px solid #ccc; +} +.flat .dijitTabContainerBottom-tabs .dijitTabChecked:before { + height: 3px; + background: #257aa7; + bottom: -1px; + left: -1px; + right: -1px; +} +.flat .dijitTabListContainer-bottom { + margin-top: -1px; +} +.flat .dijitTabListContainer-bottom .dijitTab { + top: 0; +} +.flat .dijitTabPaneWrapper.dijitTabContainerLeft-container { + border-radius: 0 4px 4px 0; +} +.flat .dijitTabContainerLeft-tabs .dijitTab { + margin-bottom: 0; + padding: 8px 12px; + border-right-color: #ccc; + border-top: none; + border-bottom: none; +} +.flat .dijitTabContainerLeft-tabs .dijitTabChecked { + border-right: 1px solid #fff; + border-top: 1px solid #ccc; + border-bottom: 1px solid #ccc; +} +.flat .dijitTabContainerLeft-tabs .dijitTabChecked:before { + width: 3px; + background: #257aa7; + bottom: -1px; + left: -1px; + top: -1px; +} +.flat .dijitTabPaneWrapper.dijitTabContainerRight-container { + border-radius: 4px 0 0 4px; +} +.flat .dijitTabContainerRight-tabs .dijitTab { + margin-bottom: 0; + padding: 8px 12px; + border-left-color: #ccc; + border-top: none; + border-bottom: none; +} +.flat .dijitTabContainerRight-tabs .dijitTabChecked { + border-left: 1px solid #fff; + border-top: 1px solid #ccc; + border-bottom: 1px solid #ccc; +} +.flat .dijitTabContainerRight-tabs .dijitTabChecked:before { + width: 3px; + background: #257aa7; + bottom: -1px; + right: -1px; + top: -1px; +} +.flat .tabStripButton { + background-color: #fff; + border: 1px solid transparent; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -o-transition-property: background-color; + -ms-transition-property: background-color; + transition-property: background-color; +} +.flat .dijitTabListContainer-top .tabStripButton, +.flat .dijitTabListContainer-bottom .tabStripButton { + padding: 4px 8px; + margin-left: 0; + margin-right: 0; +} +.flat .dijitTabListContainer-top .tabStripButton { + margin-bottom: 1px; +} +.flat .dijitTabListContainer-bottom .tabStripButton { + margin-top: 1px; +} +.flat .tabStripButtonHover { + background-color: #f2f2f2; +} +.flat .tabStripButtonActive { + background-color: #e6e6e6; +} +.flat .dijitTabStripIcon { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: #257aa7; + vertical-align: middle; +} +.flat .dijitTabStripIcon:before { + content: "\f004"; +} +.flat .dijitTabStripSlideRightIcon:before { + content: "\f005"; +} +.flat .dijitTabStripMenuIcon:before { + content: "\f006"; +} +.flat .dijitTabListContainer-top .tabStripButtonDisabled, +.flat .dijitTabListContainer-bottom .tabStripButtonDisabled { + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitTabContainerNested .dijitTabListWrapper { + height: auto; +} +.flat .dijitTabContainerTabListNested .dijitTab { + color: #257aa7; + margin: 4px; + padding: 4px 8px; + border: 1px solid transparent; + border-radius: 4px; + -webkit-transition-property: background-color, border-color; + -moz-transition-property: background-color, border-color; + -o-transition-property: background-color, border-color; + -ms-transition-property: background-color, border-color; + transition-property: background-color, border-color; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + -o-transition-duration: 0.3s; + -ms-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.flat .dijitTabContainerTabListNested .dijitTabHover { + background-color: #f2f2f2; +} +.flat .dijitTabContainerTabListNested .dijitTabActive { + color: #257aa7; + background-color: #e6e6e6; +} +.flat .dijitTabContainerTabListNested .dijitTabChecked, +.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabHover, +.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabActive { + color: #fff; + background-color: #257aa7; +} +.flat .dijitTabContainerTabListNested .dijitTabChecked:before, +.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabHover:before, +.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabActive:before { + display: none; +} +.flat .dijitTabContainerTabListNested.dijitTabContainerTop-tabs .dijitTab { + margin-right: 4px; +} +.flat .dijitTabContainerTabListNested.dijitTabContainerBottom-tabs .dijitTab { + margin-right: 4px; +} +.flat .dijitTabContainerTabListNested.dijitTabContainerLeft-tabs .dijitTab { + margin-bottom: 4px; +} +.flat .dijitTabContainerTabListNested.dijitTabContainerRight-tabs .dijitTab { + margin-bottom: 4px; +} +.flat .dijitTabPaneWrapperNested { + border: none; /* prevent double border */ + -webkit-box-shadow: none; + box-shadow: none; +} +/* ContentPane + * + * .dijitContentPane + * set padding for basic content pane + * + * Nested layouts: + * + * .dijitTabContainerTop-dijitContentPane, + * .dijitTabContainerLeft-dijitContentPane, + * .dijitTabContainerBottom-dijitContentPane, + * .dijitTabContainerRight-dijitContentPane + * set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container + * + * .dijitAccordionContainer-dijitContentPane + * set background-color and padding of ContentPane nested within Accordion + * + * .dijitSplitContainer-dijitContentPane, + * set background-color and padding of ContentPane nested within a SplitContainer + * + * .dijitBorderContainer-dijitContentPane + * set background-color and padding of ContentPane nested within a BorderContainer + */ +.flat .dijitContentPane { + background-color: #fff; + padding: 8px; +} +.flat .dijitTabContainerTop-dijitContentPane, +.flat .dijitTabContainerLeft-dijitContentPane, +.flat .dijitTabContainerBottom-dijitContentPane, +.flat .dijitTabContainerRight-dijitContentPane, +.flat .dijitAccordionContainer-dijitContentPane { + background-color: #fff; + padding: 8px; + left: 0 !important; + top: 0 !important; +} +.flat .dijitAccordionTitle .arrowTextUp, +.flat .dijitAccordionTitle .arrowTextDown { + float: left; +} +/* Accordion + * + * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer) + * and the title inside of it (dijitAccordionTitle). There are 4 basic states to style: + * + * 1. closed pane (and default styling): + * .dijitAccordionInnerContainer - container for each accordion child + * .dijitAccordionTitle - title for each accordion child + * + * 2. active closed pane (ie, mouse down on a title bar) + * .dijitAccordionInnerContainerActive - for background-color, border + * .dijitAccordionInnerContainerActive dijitAccordionTitle - for text color + * + * 3. open pane (expanded child) + * .dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane) + * setting a margin so that there's blue trim all the way around the child + * + * These rules need to override the closed pane active: + * + * .dijitAccordionInnerContainerSelected - for background-color, border + * .dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color + * + * 4. hovered pane, open or closed + * The selectors below affect hovering over both a closed pane (ie, hovering a title bar), + * and hovering over an open pane. Also, treat mouse down on an open pane as a hover: + * + * .dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border + * .dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color + */ +.flat .dijitAccordionContainer { + border: 0 none; + border-radius: 4px; +} +.flat .dijitAccordionInnerContainer { + background-color: #fff; + border: 1px solid #ccc; + border-radius: 4px; + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + -o-transition-property: background-color, border; + -ms-transition-property: background-color, border; + transition-property: background-color, border; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + -o-transition-duration: 0.3s; + -ms-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -o-transition-timing-function: linear; + -ms-transition-timing-function: linear; + transition-timing-function: linear; +} +.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainer { + margin-top: 0; + position: relative; +} +.flat .dijitAccordionTitle { + border-style: solid; + border-width: 1px; + border-color: #ccc; + padding: 4px; + border-radius: 4px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + border: 0 none; + border-radius: 4px; +} +.flat .dijitAccordionTitle .arrowTextUp, +.flat .dijitAccordionTitle .arrowTextDown { + display: none; + float: right; + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-align: center; + font-size: 0px; +} +.flat .dijitAccordionTitle .arrowTextUp:before, +.flat .dijitAccordionTitle .arrowTextDown:before { + content: "\f007"; + font-size: 18px; +} +.flat .dijitAccordionTitle .arrowTextUp { + display: block; +} +.flat .dijitAccordionTitle .arrowTextUp:before { + content: "\f006"; +} +.flat .dijitAccordionInnerContainerHover .dijitAccordionTitle { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitAccordionInnerContainerActive .dijitAccordionTitle { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitAccordionInnerContainerSelected { + border: 0 none; +} +.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle { + color: #fff; + background-color: #257aa7; + border-radius: 4px 4px 0 0; +} +.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextUp { + display: none; +} +.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextDown { + display: block; +} +.flat .dijitAccordionContainer .dijitAccordionChildWrapper { + background-color: #fff; + border: 1px solid #ccc; + border-top: 0 none; + position: relative; + z-index: 1; + clear: both; + border-radius: 0 0 4px 4px; +} +.flat .dijitAccordionInnerContainer { + border-radius: 0; +} +.flat .dijitAccordionInnerContainer .dijitAccordionTitle { + border-radius: 0; +} +.flat .dijitAccordionInnerContainer:not(:last-child) .dijitAccordionChildWrapper { + border-radius: 0; +} +.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainer { + border-top: 0 none; +} +.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainerSelected:last-child .dijitAccordionTitle { + border-radius: 0; +} +.flat .dijitAccordionInnerContainer:first-child, +.flat .dijitAccordionInnerContainer:first-child .dijitAccordionTitle { + border-radius: 4px 4px 0 0; +} +.flat .dijitAccordionInnerContainer:last-child, +.flat .dijitAccordionInnerContainer:last-child .dijitAccordionTitle { + border-radius: 0 0 4px 4px; +} +/* TitlePane */ +.flat .dijitTitlePaneRtl .dijitTitlePaneTitle { + text-align: right; +} +.flat .dijitTitlePaneRtl .dijitClosed .dijitArrowNode:before { + content: "\f006"; +} +.flat .dijitColorPaletteRtl .dijitColorPaletteUnder { + left: auto; + right: 0; +} +.dijitPopup { + border-radius: 4px; +} +/* ----- Drag and Drop ----- */ +.dojoDndItem { + border: 1px solid transparent; + cursor: pointer; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -ms-transition-duration: 0.25s; + transition-duration: 0.25s; + -webkit-transition-property: background-color, border-color, opacity; + -moz-transition-property: background-color, border-color, opacity; + -o-transition-property: background-color, border-color, opacity; + -ms-transition-property: background-color, border-color, opacity; + transition-property: background-color, border-color, opacity; +} +/* hover */ +.dojoDndItemOver { + background-color: #f5f5f5; + border-radius: 4px; +} +.dojoDndItemAnchor { + background-color: transparent; + border: 1px dashed #257aa7; + border-radius: 4px; +} +/* selected */ +.dojoDndItemBefore { + background: transparent; + padding-top: 2px; + border-top: 1px solid #257aa7; +} +.dojoDndItemAfter { + background: transparent; + padding-bottom: 2px; + border-bottom: 1px solid #257aa7; +} +/* Avatar */ +table.dojoDndAvatar { + display: block; +} +.dojoDndAvatarHeader td { + display: none; +} +.dojoDndAvatarHeader:before { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + display: table-cell; +} +/* cannot drop */ +.dojoDndMove .dojoDndAvatarHeader:before { + color: #dd2c00; + content: "\f01c"; +} +.dojoDndCopy .dojoDndAvatarHeader:before { + color: #dd2c00; + content: "\f01c"; +} +/* can drop */ +.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader:before { + color: #43a047; + content: "\f008"; +} +.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader:before { + color: #43a047; + content: "\f008"; +} +.dojoDndAvatarItem { + border-radius: 4px; +} +.dojoDndAvatarItem td > * { + padding: 4px 8px; + list-style-type: none; + background-color: #fff; + -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); + box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); +} +/* Calendar + * + * Styling Calendar mainly includes: + * + * 1. Calendar container + * .dijitCalendar - main container + * .dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active + * + * 2. Month + * .dijitCalendarMonthContainer + * .dijitCalendarMonthLabel + * .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month + * .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active + * + * 3. Date + * .dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S + * .dijitCalendarDateTemplate - date label wrapper + * .dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month + * .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date + * .dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date + * .dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active + * + * 4. Year + * .dijitCalendarYearContainer + * .dijitCalendarYearLabel + * .dijitCalendarPreviousYear /.dijitCalendarNextYear + * .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active + * + * 5. Dropdown Month Menu + * .dijitCalendarMonthMenu - menu container + * .dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item + * .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state + */ +.flat .dijitCalendar { + background-color: #fff; + text-align: center; + padding: 4px; + border: 1px solid #ccc; + border-collapse: separate; + border-radius: 4px; + -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); + box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); +} +.flat .dijitCalendarMonthContainer th { + text-align: center; + line-height: 20px; + vertical-align: middle; + margin: 4px 0; +} +.flat .dijitCalendarArrow { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + cursor: pointer; + font-size: 24px; + border: 1px solid transparent; + padding: 4px; +} +.flat .dijitCalendarDecrease, +.flat .dijitCalendarIncrease { + display: none; +} +.flat .dijitCalendarDecrementArrow { + float: left; + padding-left: 2px; +} +.flat .dijitCalendarDecrementArrow:before { + content: "\f000"; +} +.flat .dijitCalendarIncrementArrow { + float: right; + padding-right: 2px; +} +.flat .dijitCalendarIncrementArrow:before { + content: "\f001"; +} +.flat .dijitCalendarArrowHover .dijitCalendarIncrementControl, +.flat .dijitCalendarArrow:hover .dijitCalendarIncrementControl, +.flat .dijitCalendarNextYearHover, +.flat .dijitCalendarNextYear:hover, +.flat .dijitCalendarPreviousYearHover, +.flat .dijitCalendarPreviousYear:hover { + border-style: solid; + border-width: 1px; + border-color: #ccc; + padding: 4px; + border-radius: 4px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + padding: 4px; +} +.flat .dijitCalendarArrowActive .dijitCalendarIncrementControl, +.flat .dijitCalendarArrow:active .dijitCalendarIncrementControl, +.flat .dijitCalendarNextYearActive, +.flat .dijitCalendarNextYear:active, +.flat .dijitCalendarPreviousYearActive, +.flat .dijitCalendarPreviousYear:active { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitA11ySideArrow { +/* text +/- labels instead of arrow icons, for high contrast mode */ + display: none; +} +.flat .dijitCalendarContainer th, +.flat .dijitCalendarContainer td { + padding: 4px; +} +.flat .dijitCalendarDayLabelTemplate { + text-align: center; + border-bottom: #ccc; +} +.flat .dijitCalendarDayLabel { + font-weight: bold; + text-align: center; +} +.flat .dijitCalendarDateTemplate { + font-size: 0.9em; + letter-spacing: 0.05em; + text-align: center; +} +.flat .dijitCalendarDateTemplate .dijitCalendarDateLabel { + text-decoration: none; + display: block; + padding: 2px 4px; + border: 0 none; + border-radius: 50%; +} +.flat .dijitCalendarPreviousMonth .dijitCalendarDateLabel, +.flat .dijitCalendarNextMonth .dijitCalendarDateLabel { + color: #c2c2c2; +} +.flat .dijitCalendarCurrentDate .dijitCalendarDateLabel { + border-color: #257aa7; +} +.flat .dijitCalendarHoveredDate .dijitCalendarDateLabel, +.flat .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel { + background-color: #f2f2f2; +} +.flat .dijitCalendarActiveDate .dijitCalendarDateLabel, +.flat .dijitCalendarEnabledDate:active .dijitCalendarDateLabel { + background-color: #e6e6e6; +} +.flat .dijitCalendarSelectedDate .dijitCalendarDateLabel, +.flat .dijitCalendarSelectedDate.dijitCalendarHoveredDate .dijitCalendarDateLabel { + color: #fff; + background-color: #257aa7; +} +.flat .dijitCalendarDisabledDate .dijitCalendarDateLabel { + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitCalendarYearContainer { + vertical-align: middle; +} +.flat .dijitCalendarYearLabel { + padding: 4px 0 0 0; + margin: 0; + font-size: 1.15em; +} +.flat .dijitCalendarYearLabel span { + vertical-align: middle; +} +.flat .dijitCalendarSelectedYear, +.flat .dijitCalendarNextYear, +.flat .dijitCalendarPreviousYear { + padding: 4px; +} +.flat .dijitCalendarSelectedYear { + color: #257aa7; +} +.flat .dijitCalendarNextYear, +.flat .dijitCalendarPreviousYear { + color: #257aa7; + font-size: 0.9em; + line-height: 20px; + border: 1px solid transparent; +} +.flat .dijitCalendarSelectedYear { + padding: 0 4px; +} +.flat .dijitCalendar .dijitDropDownButton { + margin: 0; +} +.flat .dijitCalendarMonthMenu { + padding: 8px 0; +} +.flat .dijitCalendarMonthMenu .dijitCalendarMonthLabel { + padding: 4px; +} +.flat .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover { + color: #fff; + background-color: #257aa7; +} +/* Menu + +There are three areas of styling for the Menu: + + 1. The menu + There are three types of menus: + i) Context Menu + ii) Drop down Menu + iii) Navigation Menu + All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border + .dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect + .dijitMenuTable - for padding - also affects Select widget + + 2. The menu bar + .dijitMenuBar - for border, margins, padding, background-color of the menu bar + .dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) + + 3. Menu items - items in the menu. + .dijitMenuItem - for color + .dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected + .dijitMenuItemActive - for background-color of an active (mousedown) menu item + td.dijitMenuItemIconCell - for padding around a menu item's icon + td.dijitMenuItemLabel - for padding around a menu item's label + .dijitMenuSeparatorTop - for border, top border, of the separator + .dijitMenuSeparatorBottom - for bottom margin of the separator + + Styles specific to ComboBox and FilteringSelect widgets: + .dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu + .dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu + +*/ +.flat .dijitMenu { + background: #fff; + border: 1px solid #ccc; + border-radius: 4px; + margin: 0; + -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); + box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); +} +.flat .dijitMenuTable, +.flat .dijitComboBoxMenu { + padding: 8px 0; +} +.flat .dijitComboBoxMenu { + margin-left: 0; + background-image: none; +} +.flat .dijitMenuTable { +/* this prevents jiggling upon hover of a menu item */ + border-collapse: separate; + border-spacing: 0 0; +} +.flat .dijitMenuItem, +.flat .dijitMenuItem td { + line-height: 20px; + padding: 8px; + white-space: nowrap; +} +.flat .dijitMenuItemHover td, +.flat .dijitMenuItemHover { + color: #fff; + background-color: #257aa7; +} +.flat .dijitMenuItemActive td, +.flat .dijitMenuItemActive { + color: #fff; + background-color: #257aa7; +} +.flat .dijitMenuItemSelected td, +.flat .dijitMenuItemSelected { + color: #fff; + background-color: #257aa7; +} +.flat .dijitMenuItemDisabled { + color: #9e9e9e; +} +.flat .dijitMenuItemDisabled.dijitMenuItemSelected td, +.flat .dijitMenuItemDisabled.dijitMenuItemSelected { + color: #f2f2f2; + background: #5cafdb; +} +.flat .dijitMenuSeparatorTop { + height: auto; + margin-top: 1px; /* prevents spacing above/below separator */ + border-bottom: 1px solid #ccc; +} +.flat .dijitMenuSeparatorBottom { + height: auto; + margin-bottom: 1px; + border-top: 1px solid transparent; +} +.flat td.dijitMenuItemIconCell { + padding: 4px; + margin: 0 0 0 4px; + text-align: center; +} +.flat .dijitMenuExpand { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.flat .dijitMenuExpand:before { + content: "\f001"; +} +.flat .dijitCheckedMenuItemIconChar { + display: none; +} +.flat .dijitMenuPreviousButton, +.flat .dijitMenuNextButton { + font-style: italic; +} +.flat .dijitMenuBar { + margin: 0; + padding: 0; + background-color: #f5f5f5; +} +.flat .dijitMenuBar .dijitMenuItem { + padding: 8px 12px; + margin: 0; +} +.flat .dijitMenuBar .dijitMenuItemHover { + color: #fff; + background-color: #257aa7; +} +.flat .dijitMenuBar .dijitMenuItemActive { + color: #fff; + background-color: #257aa7; +} +.flat .dijitMenuBar .dijitMenuItemSelected, +.flat .dijitMenuBar .dijitMenuItemHover.dijitMenuItemSelected, +.flat .dijitMenuBar .dijitMenuItemActive.dijitMenuItemSelected { + color: #fff; + background-color: #257aa7; +} +.flat .dijitMenuBar .dijitMenuItemDisabled.dijitMenuItemSelected { + color: #f2f2f2; + background: #5cafdb; +} +.flat .dijitMenuPopup { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.flat .dijitMenuPopup .dijitMenu { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.flat .dijitMenuPopup .dijitMenuItem, +.flat .dijitMenuPopup .dijitMenuItem td { + padding: 8px; +} +.flat .dijitDialogRtl .dijitDialogCloseIcon { + right: auto; + left: 12px; +} +.flat .dijitDialogRtl .dijitDialogPaneActionBar, +.flat .dijitTooltipDialogRtl .dijitDialogPaneActionBar { + text-align: left; +} +.flat .dijitSliderRtl .dijitSliderProgressBarH { + float: right; + right: 0; + left: auto; +} +.flat .dijitSliderRtl .dijitSliderLeftBumper { + border-left-width: 0; + border-right-width: 1px; + margin-left: 0; + margin-right: 4px; + border-radius: 0 1.5px 1.5px 0; +} +.flat .dijitSliderRtl .dijitSliderRightBumper { + border-left-width: 1px; + border-right-width: 0; + margin-left: 4px; + margin-right: -2px; + border-radius: 1.5px 0 0 1.5px; +} +.flat .dijitSliderRtl .dijitSliderMoveableH { + right: auto; + left: 0; +} +.flat .dijitSliderRtl .dijitSliderImageHandleV { + left: auto; +} +.flat .dijitSliderRtl .dijitSliderImageHandleH { + left: -50%; +} +.flat .dijitSliderRtl .dijitRuleContainerV { + float: right; +} +/* Slider + * + * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar) + * + * Slider progress bar: + * 1. Slider progress bar (default styling): + * .dijitSliderProgressBarH - progress bar at the middle of horizontal slider + * .dijitSliderLeftBumper - bar at the left of horizontal slider + * .dijitSliderRightBumper - bar at the right of horizontal slider + * .dijitSliderProgressBarV - progress bar at the middle of vertical slider + * .dijitSliderTopBumper - bar at the top of vertical slider + * .dijitSliderBottomtBumper - bar at the bottom of vertical slider + * + * 2. hovered Slider progress bar (ie, mouse hover on progress bar) + * .dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border + * + * 3. focused Slider progress bar (ie, mouse focused on progress bar) + * .dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border + * + * 4. disabled/read-only Slider progress bar + * .dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled + * + * + * Slider Thumbs: + * 1. Slider Thumbs (default styling): + * .dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar + * + * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs) + * .dijitSliderHover .dijitSliderImageHandleH - hovered controller style + * + * 3. focused Slider progress bar (ie, mouse focused on slider thumbs) + * .dijitSliderFocused .dijitSliderImageHandleV - focused controller style + * + * + * Slider Increment/Decrement Buttons: + * 1. Slider Increment/Decrement Buttons (default styling): + * .dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider + * .dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider + * .dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider + * .dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider + * + * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons) + * .dijitSliderHover .dijitSliderDecrementIconH - for background, border + * + * 3. active Slider Increment/Decrement Buttons (mouse down on the icons) + * .dijitSliderActive .dijitSliderIncrementIconV - for background, border + * + * 4. disabled/read-only Slider Increment/Decrement Buttons + * .dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider + * .dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider + */ +.flat .dijitSliderBar { + border-style: solid; + outline: 1px; +} +.flat .dijitRuleLabelsContainer { + color: #424242; + font-size: smaller; +} +.flat .dijitSliderDisabled { + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitRuleLabelsContainerH { + padding: 0; +} +.flat .dijitSliderBarH, +.flat .dijitSliderBumperH { + height: 3px; +} +.flat .dijitSlider .dijitSliderLeftBumper { + border-radius: 1.5px 0 0 1.5px; + border: 0 none; + margin-left: 4px; +} +.flat .dijitSlider .dijitSliderRightBumper { + border-radius: 0 1.5px 1.5px 0; + border: 0 none; + margin-left: -2px; + margin-right: 4px; +} +.flat .dijitSlider .dijitSliderProgressBarH, +.flat .dijitSlider .dijitSliderLeftBumper { + border: 0 none; + background-color: #257aa7; + background-image: none; +} +.flat .dijitSlider .dijitSliderRemainingBarH, +.flat .dijitSlider .dijitSliderRightBumper { + border: 0 none; + background-color: #ccc; +} +.flat .dijitSliderHover .dijitSliderProgressBarH, +.flat .dijitSliderHover .dijitSliderLeftBumper { + background-color: #22709a; + background-image: none; +} +.flat .dijitSliderFocused .dijitSliderProgressBarH, +.flat .dijitSliderFocused .dijitSliderLeftBumper { + -webkit-box-shadow: none; + box-shadow: none; +} +.flat .dijitSliderFocused .dijitSliderRemainingBarH, +.flat .dijitSliderFocused .dijitSliderRightBumper { + -webkit-box-shadow: none; + box-shadow: none; +} +.flat .dijitRuleLabelsContainerV { + padding: 0; +} +.flat .dijitSliderBarV, +.flat .dijitSliderBumperV { + width: 3px; +} +.flat .dijitSlider .dijitSliderTopBumper { + border-radius: 1.5px 1.5px 0 0; + border: 0 none; + margin-top: 4px; + margin-bottom: -2px; +} +.flat .dijitSlider .dijitSliderBottomBumper { + border-radius: 0 0 1.5px 1.5px; + border: 0 none; + margin-bottom: 4px; +} +.flat .dijitSlider .dijitSliderProgressBarV, +.flat .dijitSlider .dijitSliderBottomBumper { + border: 0 none; + background-color: #257aa7; + background-image: none; +} +.flat .dijitSlider .dijitSliderRemainingBarV, +.flat .dijitSlider .dijitSliderTopBumper { + border: 0 none; + background-color: #ccc; +} +.flat .dijitSliderHover .dijitSliderProgressBarV, +.flat .dijitSliderHover .dijitSliderBottomBumper { + background-color: #22709a; + background-image: none; +} +.flat .dijitSliderFocused .dijitSliderProgressBarV, +.flat .dijitSliderFocused .dijitSliderBottomBumper { + -webkit-box-shadow: none; + box-shadow: none; +} +.flat .dijitSliderFocused .dijitSliderRemainingBarV, +.flat .dijitSliderFocused .dijitSliderTopBumper { + -webkit-box-shadow: none; + box-shadow: none; +} +.flat .dijitSliderImageHandle { + background: #fff; + -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); + box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); + border-radius: 50%; + border: 1px solid #257aa7; + width: 16px; + height: 16px; + margin-top: -2px; + position: absolute; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.flat .dijitSliderImageHandle:after { + content: ""; + display: block; + background: #257aa7; + border-radius: 50%; + height: 10px; + width: 10px; + left: 2px; + top: 2px; + position: absolute; +} +.flat .dijitSliderImageHandleV { + margin-top: 0; +} +.flat .dijitSliderHover .dijitSliderImageHandle, +.flat .dijitSliderFocused .dijitSliderImageHandle { + -webkit-box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.2); + box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.2); +} +.flat .dijitSliderDisabled.dijitSliderFocused .dijitSliderImageHandle:after { + display: none; +} +.flat .dijitSliderDecrementIconH, +.flat .dijitSliderIncrementIconH, +.flat .dijitSliderDecrementIconV, +.flat .dijitSliderIncrementIconV { + border-style: solid; + border-width: 1px; + border-color: #ccc; + padding: 4px; + border-radius: 4px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + height: 20px; + width: 20px; + cursor: pointer; + color: #257aa7; + padding: 0; +} +.flat .dijitSliderDecrementIconH:hover, +.flat .dijitSliderIncrementIconH:hover, +.flat .dijitSliderDecrementIconV:hover, +.flat .dijitSliderIncrementIconV:hover { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitSliderDecrementIconH:active, +.flat .dijitSliderIncrementIconH:active, +.flat .dijitSliderDecrementIconV:active, +.flat .dijitSliderIncrementIconV:active { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitSliderReadOnly .dijitSliderDecrementIconH, +.flat .dijitSliderDisabled .dijitSliderDecrementIconH, +.flat .dijitSliderReadOnly .dijitSliderDecrementIconV, +.flat .dijitSliderDisabled .dijitSliderDecrementIconV, +.flat .dijitSliderReadOnly .dijitSliderIncrementIconH, +.flat .dijitSliderDisabled .dijitSliderIncrementIconH, +.flat .dijitSliderReadOnly .dijitSliderIncrementIconV, +.flat .dijitSliderDisabled .dijitSliderIncrementIconV { + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitSliderIncrementIconH, +.flat .dijitSliderIncrementIconV, +.flat .dijitSliderDecrementIconH, +.flat .dijitSliderDecrementIconV { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.flat .dijitSliderIncrementIconH:before, +.flat .dijitSliderIncrementIconV:before, +.flat .dijitSliderDecrementIconH:before, +.flat .dijitSliderDecrementIconV:before { + content: "\f011"; + top: 0; + line-height: 20px; +} +.flat .dijitSliderIncrementIconH .dijitSliderButtonInner, +.flat .dijitSliderIncrementIconV .dijitSliderButtonInner, +.flat .dijitSliderDecrementIconH .dijitSliderButtonInner, +.flat .dijitSliderDecrementIconV .dijitSliderButtonInner { + display: none; +} +.flat .dijitSliderDecrementIconH:before, +.flat .dijitSliderDecrementIconV:before { + content: "\f012"; +} +.flat .dijitRuleMark { + border: 0 none; +} +.flat .dijitRuleMarkH { + border-right: 1px solid #e0e0e0; +} +.flat .dijitRuleMarkV { + border-bottom: 1px solid #e0e0e0; +} +.flat .dijitRuleLabelContainerH { + margin-top: 2px; + margin-bottom: 2px; +} +.flat .dijitRuleLabelContainerV { + margin-left: 2px; + margin-right: 2px; +} +.flat .dijitSelectRtl .dijitButtonText { + float: right; + padding: 0 12px 0 0; +} +.flat .dijitSelectRtl .dijitButtonContents { + border-style: none none none solid; + text-align: right; +} +.flat .dijitComboBoxRtl .dijitButtonNode.dijitArrowButtonContainer { + border-radius: 4px 0 0 4px; +} +.flat .dijitComboBoxRtl .dijitArrowButtonContainer { + border-right-width: 1px !important; + border-left-width: 0 !important; +} +.flat .dijitTextBoxRtl .dijitValidationContainer, +.flat .dijitTextBoxRtl .dijitSpinnerButtonContainer { + border-right-width: 1px !important; + border-left-width: 0 !important; +} +.flat .dijitTextBoxRtlError .dijitValidationContainer { + border-left-width: 0; + border-right-width: 1px; +} +.flat .dijitRtl .dijitPlaceHolder { + left: auto; + right: 0; +} +.flat .dijitTextBoxRtl .dijitSpinnerButtonContainer, +.flat .dijitValidationTextBoxRtl .dijitValidationContainer, +.flat .dijitTextBoxRtl .dijitArrowButtonContainer { + float: left; +} +.flat div.dijitNumberTextBoxRtl { + text-align: right; +} +/* RadioButton + * + * Styling RadioButton mainly includes: + * + * 1. Containers + * .dijitRadio|.dijitRadioIcon + * + * 2. RadioButton within ToggleButton + * .dijitToggleButton|.dijitToggleButtonChecked + * + * 3. Checked state + * .dijitRadioChecked + * .dijitToggleButtonChecked + * + * 4. Hover state + * .dijitRadioHover|.dijitRadioCheckedHover + * + * 5. Disabled state + * .dijitRadioDisabled|.dijitRadioCheckedDisabled + */ +.flat .dijitRadio, +.flat .dijitRadioIcon { +/* inside a toggle button */ + width: 16px; + height: 16px; + background: #fff; + border: 1px solid #257aa7; + border-radius: 50%; + position: relative; + overflow: visible; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.flat .dijitRadio:after, +.flat .dijitRadioIcon:after { + content: " "; + display: block; + width: 0; + height: 0; + background-color: #257aa7; + border-radius: 50%; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + margin: 8px; + position: absolute; + top: 0; + left: 0; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; +} +.flat .dijitRadioHover { + border-color: #43a3d5; +} +.flat .dijitRadioChecked:after, +.flat .dijitChecked .dijitRadioIcon:after { + width: 8px; + height: 8px; + margin: 3px; + opacity: 1; + -ms-filter: none; + filter: none; +} +.flat .alt-primary .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-primary .dijitRadioIcon:after { + background-color: #fff; +} +.flat .alt-success .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-success .dijitRadioIcon:after { + background-color: #fff; +} +.flat .alt-info .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-info .dijitRadioIcon:after { + background-color: #fff; +} +.flat .alt-warning .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-warning .dijitRadioIcon:after { + background-color: #fff; +} +.flat .alt-danger .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-danger .dijitRadioIcon:after { + background-color: #fff; +} +.flat .alt-inverse .dijitRadioIcon { + border-color: #fff; +} +.flat .alt-inverse .dijitRadioIcon:after { + background-color: #fff; +} +.flat .dijitRadioDisabled { + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitRadioCheckedDisabled { + background-color: #f5f5f5; + border-color: #5cafdb; +} +.flat .dijitRadioCheckedDisabled:after { + background-color: #5cafdb; +} +.flat .dijitRadioMenuItem .dijitCheckedMenuItemIcon { + width: 16px; + height: 16px; + background: #fff; + border: 1px solid #ccc; + border-radius: 50%; + position: relative; + overflow: visible; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.flat .dijitRadioMenuItem .dijitCheckedMenuItemIcon:after { + content: " "; + display: block; + width: 0; + height: 0; + background-color: #257aa7; + border-radius: 50%; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + margin: 8px; + position: absolute; + top: 0; + left: 0; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + -ms-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; +} +.flat .dijitRadioMenuItemChecked .dijitCheckedMenuItemIcon { + border-color: #ccc; +} +.flat .dijitRadioMenuItemChecked .dijitCheckedMenuItemIcon:after { + width: 8px; + height: 8px; + margin: 3px; + opacity: 1; + -ms-filter: none; + filter: none; +} +/* CheckBox + * + * Styling CheckBox mainly includes: + * + * 1. Containers + * .dijitCheckBox + * + * 2. CheckBox within ToggleButton + * .dijitCheckBoxIcon + * + * 3. States - Checked, Hover, Disabled. + * .dijitCheckBoxChecked + * .dijitCheckBoxHover + * .dijitCheckBoxCheckedHover + * .dijitCheckBoxDisabled + * .dijitCheckBoxCheckedDisabled + */ +.flat .dijitCheckBox { + background-color: #fff; + border: 1px solid #ccc; + width: 16px; + height: 16px; + line-height: 1; + padding: 0; + border-radius: 2px; + text-align: center; + position: relative; + overflow: visible; + -webkit-transition: all 0.1s linear; + -moz-transition: all 0.1s linear; + -o-transition: all 0.1s linear; + -ms-transition: all 0.1s linear; + transition: all 0.1s linear; +} +.flat .dijitCheckBox input { + position: absolute; + top: 0; +} +.flat .dijitCheckBoxIcon:before, +.flat .dijitCheckBoxChecked:before, +.flat .dijitCheckBoxCheckedDisabled:before { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + content: "\f00c"; + color: #fff; +} +.flat .dijitCheckBoxIcon { + padding: 0; +} +.flat .dijitCheckBoxIcon:before { + color: #257aa7; +} +.flat .alt-primary .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .alt-success .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .alt-info .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .alt-warning .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .alt-danger .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .alt-inverse .dijitCheckBoxIcon:before { + color: #fff; +} +.flat .dijitCheckBoxChecked { + background-color: #257aa7; + border-color: #257aa7; +} +.flat .dijitCheckBoxHover { + background-color: #fff; + border: 1px solid #257aa7; +} +.flat .dijitCheckBoxCheckedHover { + background-color: #2d95cd; + border: 1px solid #257aa7; +} +.flat .dijitCheckBoxDisabled { + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitCheckBoxCheckedDisabled { + color: #a6a6a6; + background-color: #5cafdb; + border-color: #5cafdb; +} +.flat .dijitCheckedMenuItem .dijitCheckedMenuItemIcon { + background-color: #fff; + border: 1px solid #ccc; + width: 16px; + height: 16px; + line-height: 1; + padding: 0; + border-radius: 2px; + text-align: center; + position: relative; + overflow: visible; + -webkit-transition: all 0.1s linear; + -moz-transition: all 0.1s linear; + -o-transition: all 0.1s linear; + -ms-transition: all 0.1s linear; + transition: all 0.1s linear; +} +.flat .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon:before { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + content: "\f00c"; + color: #257aa7; +} +/* Text Inputs: [TextBox | DateTextBox | CurrencyTextBox | ValidationTextBox | ...] | TextArea + * Mainly includes: + * + * 1. Containers + * .dijitTextBox + * .dijitInputField - container that wraps "dijitInputInner" or "dijitPlaceHolder" + * + * 2. Textbox input + * .dijitInputInner + * .dijitPlaceHolder + * + * 3. States - Hover, Focused, Disabled, Error, Error while Focused e.g. + * .dijitTextBoxHover + * .dijitTextBoxFocused + * .dijitTextBoxDisabled + * .dijitTextBoxError + * .dijitTextBoxErrorFocused + * +*/ +.flat .dijitTextBox, +.flat .dijitInputInner { + line-height: 20px; +} +.flat .dijitTextBox { + background: #fff; + border: 1px solid #ccc; + border-radius: 4px; + -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; + -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; + -o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; + -ms-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; + transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; +} +.flat .dijitTextArea { + padding: 4px 6px; +} +.flat .dijitTextBox .dijitInputField { + padding: 0 4px; + margin: 0 2px; +} +.flat .dijitSelect.alt-primary, +.flat .dijitComboBox.alt-primary, +.flat .dijitSpinner.alt-primary { + border-color: #1e88e5; +} +.flat .dijitSelect.alt-success, +.flat .dijitComboBox.alt-success, +.flat .dijitSpinner.alt-success { + border-color: #43a047; +} +.flat .dijitSelect.alt-info, +.flat .dijitComboBox.alt-info, +.flat .dijitSpinner.alt-info { + border-color: #03a9f4; +} +.flat .dijitSelect.alt-warning, +.flat .dijitComboBox.alt-warning, +.flat .dijitSpinner.alt-warning { + border-color: #fb8c00; +} +.flat .dijitSelect.alt-danger, +.flat .dijitComboBox.alt-danger, +.flat .dijitSpinner.alt-danger { + border-color: #e53935; +} +.flat .dijitSelect.alt-inverse, +.flat .dijitComboBox.alt-inverse, +.flat .dijitSpinner.alt-inverse { + border-color: #616161; +} +.flat .dijitTextBox .dijitInputInner, +.flat .dijitValidationTextBox .dijitValidationContainer, +.flat .dijitTextBox .dijitInputField .dijitPlaceHolder { + padding: 4px; +} +.flat .dijitTextBoxHover { + border-color: #257aa7; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -ms-transition-duration: 0.25s; + transition-duration: 0.25s; +} +.flat .dijitTextBoxFocused { + border-color: #257aa7; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + -o-transition-duration: 0.1s; + -ms-transition-duration: 0.1s; + transition-duration: 0.1s; +} +.flat .dijitTextBoxDisabled { + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitComboBoxDisabled.alt-primary, +.flat .dijitSpinnerDisabled.alt-primary { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #6db2ee; +} +.flat .dijitComboBoxDisabled.alt-primary .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-primary .dijitButtonNode { + background: #6db2ee; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-primary .dijitSpinnerButtonContainer { + border-left-color: #6db2ee; +} +.flat .dijitSpinnerRtlDisabled.alt-primary .dijitSpinnerButtonContainer { + border-right-color: #6db2ee; +} +.flat .dijitSelectDisabled.alt-primary { + border-color: #6db2ee; +} +.flat .dijitSelectDisabled.alt-primary .dijitStretch, +.flat .dijitSelectDisabled.alt-primary .dijitButtonNode { + background: #6db2ee; + color: #f2f2f2; +} +.flat .dijitComboBoxDisabled.alt-success, +.flat .dijitSpinnerDisabled.alt-success { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #7dc981; +} +.flat .dijitComboBoxDisabled.alt-success .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-success .dijitButtonNode { + background: #7dc981; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-success .dijitSpinnerButtonContainer { + border-left-color: #7dc981; +} +.flat .dijitSpinnerRtlDisabled.alt-success .dijitSpinnerButtonContainer { + border-right-color: #7dc981; +} +.flat .dijitSelectDisabled.alt-success { + border-color: #7dc981; +} +.flat .dijitSelectDisabled.alt-success .dijitStretch, +.flat .dijitSelectDisabled.alt-success .dijitButtonNode { + background: #7dc981; + color: #f2f2f2; +} +.flat .dijitComboBoxDisabled.alt-info, +.flat .dijitSpinnerDisabled.alt-info { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #56c9fd; +} +.flat .dijitComboBoxDisabled.alt-info .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-info .dijitButtonNode { + background: #56c9fd; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-info .dijitSpinnerButtonContainer { + border-left-color: #56c9fd; +} +.flat .dijitSpinnerRtlDisabled.alt-info .dijitSpinnerButtonContainer { + border-right-color: #56c9fd; +} +.flat .dijitSelectDisabled.alt-info { + border-color: #56c9fd; +} +.flat .dijitSelectDisabled.alt-info .dijitStretch, +.flat .dijitSelectDisabled.alt-info .dijitButtonNode { + background: #56c9fd; + color: #f2f2f2; +} +.flat .dijitComboBoxDisabled.alt-warning, +.flat .dijitSpinnerDisabled.alt-warning { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #ffb557; +} +.flat .dijitComboBoxDisabled.alt-warning .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-warning .dijitButtonNode { + background: #ffb557; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-warning .dijitSpinnerButtonContainer { + border-left-color: #ffb557; +} +.flat .dijitSpinnerRtlDisabled.alt-warning .dijitSpinnerButtonContainer { + border-right-color: #ffb557; +} +.flat .dijitSelectDisabled.alt-warning { + border-color: #ffb557; +} +.flat .dijitSelectDisabled.alt-warning .dijitStretch, +.flat .dijitSelectDisabled.alt-warning .dijitButtonNode { + background: #ffb557; + color: #f2f2f2; +} +.flat .dijitComboBoxDisabled.alt-danger, +.flat .dijitSpinnerDisabled.alt-danger { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #ee7e7c; +} +.flat .dijitComboBoxDisabled.alt-danger .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-danger .dijitButtonNode { + background: #ee7e7c; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-danger .dijitSpinnerButtonContainer { + border-left-color: #ee7e7c; +} +.flat .dijitSpinnerRtlDisabled.alt-danger .dijitSpinnerButtonContainer { + border-right-color: #ee7e7c; +} +.flat .dijitSelectDisabled.alt-danger { + border-color: #ee7e7c; +} +.flat .dijitSelectDisabled.alt-danger .dijitStretch, +.flat .dijitSelectDisabled.alt-danger .dijitButtonNode { + background: #ee7e7c; + color: #f2f2f2; +} +.flat .dijitComboBoxDisabled.alt-inverse, +.flat .dijitSpinnerDisabled.alt-inverse { + background: #f5f5f5; + color: #9e9e9e; + border: 1px solid #989898; +} +.flat .dijitComboBoxDisabled.alt-inverse .dijitButtonNode, +.flat .dijitSpinnerDisabled.alt-inverse .dijitButtonNode { + background: #989898; + color: #f2f2f2; +} +.flat .dijitSpinnerDisabled.alt-inverse .dijitSpinnerButtonContainer { + border-left-color: #989898; +} +.flat .dijitSpinnerRtlDisabled.alt-inverse .dijitSpinnerButtonContainer { + border-right-color: #989898; +} +.flat .dijitSelectDisabled.alt-inverse { + border-color: #989898; +} +.flat .dijitSelectDisabled.alt-inverse .dijitStretch, +.flat .dijitSelectDisabled.alt-inverse .dijitButtonNode { + background: #989898; + color: #f2f2f2; +} +.flat .dijitTextBoxError, +.flat .dijitTextBoxError .dijitButtonNode { + border-color: #dd2c00; +} +.flat .dijitTextBoxErrorFocused, +.flat .dijitTextBoxErrorFocused .dijitButtonNode { + border: 1px solid #bc2500; +} +.flat .dijitValidationTextBoxError .dijitValidationContainer { + color: #dd2c00; + width: 18px; + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 18px; +} +.flat .dijitValidationTextBoxError .dijitValidationContainer:before { + content: "\f017"; +} +.flat .dijitValidationTextBoxError .dijitValidationIcon { + display: none; +} +.flat table.dijitComboButtonRtl .dijitStretch { + border-radius: 0 4px 4px 0; +} +.flat table.dijitComboButtonRtl .dijitArrowButton { + border-radius: 4px 0 0 4px; + border-left-width: 1px; + border-right-width: 0; +} +.flat .dijitDropDownButtonRtl .dijitButtonNode { + padding-left: 8px; +} +.flat .dijitDropDownButtonRtl .dijitArrowButtonInner { + margin-left: 0; + margin-right: 12px; +} +/* Select | Combobox + * And minor style for DateTextBox | MultiSelect + * + * Styling Select mainly includes: + * + * 1. Containers + * Select: + * .dijitSelect + * .dijitButtonContents + * Combobox: + * .dijitComboBox + * + * 2. Arrow Button + * .dijitArrowButton + * .dijitArrowButtonInner + * .dijitComboBox .dijitButtonNode + * + * 3. Menu + * .dijitSelectMenu + * + * 4. States - Hover, Active, Focused, Disabled, e.g. + * + * Select: Hover, Active, Focused, Disabled + * .dijitSelectHover + * .dijitSelectFocused + * .dijitSelectDisabled + * + * Combobox: Hover, Focused (Open), Disabled + * .dijitComboBox .dijitDownArrowButtonHover + * .dijitComboBoxOpenHover .dijitButtonNode + * .dijitComboBoxDisabled .dijitButtonNode + * + */ +.flat .dijitSelect .dijitArrowButtonInner, +.flat .dijitComboBox .dijitArrowButtonInner { + margin: 0; + width: 0; + height: 0; +} +.flat .dijitSelect { + border-style: solid; + border-width: 1px; + border-color: #ccc; + padding: 4px; + border-radius: 4px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + table-layout: fixed; +} +.flat .dijitSelect .dijitButtonContents, +.flat .dijitSelect .dijitArrowButton { + line-height: 20px; + padding: 4px 12px; + border: 0; + border-radius: 0 2.666666666666668px 2.666666666666668px 0; +} +.flat .dijitSelect .dijitButtonContents { + padding: 0; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + border-radius: 2.666666666666668px 0 0 2.666666666666668px; +} +.flat .dijitSelect .dijitInputField { + padding: 0 0 0 12px; +} +.flat .dijitSelect .dijitArrowButton { + width: 20px; + padding: 4px; +} +.flat .dijitSelectHover { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitSelectActive { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitSelectFocused { + border: 1px solid #ccc; +} +.flat .dijitSelectDisabled { + cursor: default; + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitComboBox .dijitButtonNode { + border-style: solid; + border-width: 1px; + border-color: #ccc; + padding: 4px; + border-radius: 4px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + border-radius: 0 2.666666666666668px 2.666666666666668px 0; +} +.flat .dijitComboBoxOpenHover .dijitButtonNode, +.flat .dijitComboBox .dijitDownArrowButtonHover { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; + -webkit-box-shadow: none; + box-shadow: none; +} +.flat .dijitComboBoxDisabled .dijitButtonNode { + cursor: default; + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitComboBox .dijitArrowButton { + width: 20px; + padding: 4px; +} +.flat .dijitToolbar .dijitComboBox .dijitArrowButtonInner { + border: none; +} +.flat .dijitDateTextBox .dijitArrowButton:before { + content: "\f01e"; +} +.flat .dijitTimeTextBox .dijitArrowButton:before { + content: "\f01f"; +} +.flat select { + padding: 4px 0; + border: 1px solid #ccc; + -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); + box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); +} +.flat select option { + padding: 4px 8px; +} +.flat .dijitSelectMenu td.dijitMenuItemIconCell, +.flat .dijitSelectMenu td.dijitMenuArrowCell { +/* so that arrow and icon cells from MenuItem are not displayed */ + display: none; +} +.flat .dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton { + right: 0; + left: auto; +} +/* NumberSpinner - namespace "dijitSpinner" + * + * Styling NumberSpinner mainly includes: + * + * 1. Arrows + * Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner - for border, padding and position + * Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton + * Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image + * + * 2. Hover state + * .dijitUpArrowButtonHover|.dijitDownArrowButtonHover .* - for background color|image + * + * 3. Active state + * .dijitUpArrowButtonActive|.dijitDownArrowButtonActive .* - for border, padding, margin and background color|image + * + * 4. Focused state + * .dijitSpinnerFocused .* - for background color|image + * + * 5. Disabled state + * .dijitSpinnerDisabled .* - for background color|image + */ +.flat .dijitSpinner .dijitSpinnerButtonContainer { + overflow: hidden; + position: relative; + width: auto; + padding: 0; + border: 1px solid #ccc; +} +.flat .dijitSpinner .dijitSpinnerButtonInner { + width: 30px; + padding: 4px 0 !important; + margin: 0; +} +.flat .dijitSpinner .dijitArrowButton { + border-style: solid; + border-width: 1px; + border-color: #ccc; + padding: 4px; + border-radius: 4px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + border-radius: 0; + border: 0; + width: auto; + overflow: hidden; + left: 0; + right: 0; + padding: 0; +} +.flat .dijitSpinner .dijitArrowButton:before { + content: none; +} +.flat .dijitSpinner .dijitUpArrowButton { + border-top-right-radius: 2.666666666666668px; +} +.flat .dijitSpinner .dijitDownArrowButton { + border-bottom-right-radius: 2.666666666666668px; +} +.flat .dijitSpinner .dijitUpArrowButtonHover, +.flat .dijitSpinner .dijitDownArrowButtonHover { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitSpinner .dijitDownArrowButtonActive, +.flat .dijitSpinner .dijitUpArrowButtonActive { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitSpinner .dijitArrowButtonInner { + line-height: 14px; + display: block; +} +.flat .dijitSpinner .dijitArrowButtonInner .dijitInputField { + padding: 0; +} +.flat .dijitSpinner .dijitArrowButtonInner:before { + content: "\f003"; +} +.flat .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner:before { + content: "\f002"; +} +.flat .dijitSpinnerDisabled .dijitDownArrowButton, +.flat .dijitSpinnerDisabled .dijitUpArrowButton { + cursor: default; + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .alt-primary .dijitSpinnerButtonContainer { + border-color: #1e88e5; +} +.flat .alt-success .dijitSpinnerButtonContainer { + border-color: #43a047; +} +.flat .alt-info .dijitSpinnerButtonContainer { + border-color: #03a9f4; +} +.flat .alt-warning .dijitSpinnerButtonContainer { + border-color: #fb8c00; +} +.flat .alt-danger .dijitSpinnerButtonContainer { + border-color: #e53935; +} +.flat .alt-inverse .dijitSpinnerButtonContainer { + border-color: #616161; +} +/* Button | DropDownButton | ComboButton | ToggleButton + * + * Styling Buttons mainly includes: + * + * 1. Containers + * .dijitButton + * .dijitDropDownButton + * .dijitComboButton + * .dijitButtonNode - common button/arrow wrapper shared across all three button types + * + * 2. Button text + * .dijitButtonText + * + * 3. Arrows - only for DropDownButton and ComboButton + * There are total four directions arrows - down, left, right, up: + * .dijitArrowButtonInner - down arrow by default + * .dijitLeftArrowButton .dijitArrowButtonInner - left arrow + * .dijitRightArrowButton .dijitArrowButtonInner - right arrow + * .dijitUpArrowButton .dijitArrowButtonInner - up arrow + * + * 4. States - Hover, Active, Disabled, e.g. + * .dijitButtonHover .dijitButtonNode + * .dijitButtonActive .dijitButtonNode + * .dijitButtonDisabled .dijitButtonNode + * + * .dijitDisabled .dijitArrowButtonInner - disabled arrow states + */ +.flat .dijitButtonText { + padding: 0 4px; + text-align: center; +} +.flat .dijitButton .dijitButtonNode, +.flat .dijitDropDownButton .dijitButtonNode, +.flat .dijitComboButton .dijitButtonNode, +.flat .dijitToggleButton .dijitButtonNode { + border-style: solid; + border-width: 1px; + border-color: #ccc; + padding: 4px; + border-radius: 4px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; +} +.flat .dijitButton.alt-primary .dijitButtonNode, +.flat .dijitDropDownButton.alt-primary .dijitButtonNode, +.flat .dijitComboButton.alt-primary .dijitButtonNode, +.flat .dijitToggleButton.alt-primary .dijitButtonNode, +.flat .dijitComboBox.alt-primary .dijitButtonNode, +.flat .dijitSelect.alt-primary .dijitButtonContents, +.flat .dijitSelect.alt-primary .dijitButtonNode, +.flat .dijitSpinner.alt-primary .dijitArrowButton { + background: #1e88e5; + color: #fff; + border-color: #166fbd; +} +.flat .dijitComboButton.alt-primary .dijitStretch { + border-right-color: #166fbd; +} +.flat .dijitComboButtonRtl.alt-primary .dijitStretch { + border-left-color: #166fbd; +} +.flat .dijitButton.alt-success .dijitButtonNode, +.flat .dijitDropDownButton.alt-success .dijitButtonNode, +.flat .dijitComboButton.alt-success .dijitButtonNode, +.flat .dijitToggleButton.alt-success .dijitButtonNode, +.flat .dijitComboBox.alt-success .dijitButtonNode, +.flat .dijitSelect.alt-success .dijitButtonContents, +.flat .dijitSelect.alt-success .dijitButtonNode, +.flat .dijitSpinner.alt-success .dijitArrowButton { + background: #43a047; + color: #fff; + border-color: #37823a; +} +.flat .dijitComboButton.alt-success .dijitStretch { + border-right-color: #37823a; +} +.flat .dijitComboButtonRtl.alt-success .dijitStretch { + border-left-color: #37823a; +} +.flat .dijitButton.alt-info .dijitButtonNode, +.flat .dijitDropDownButton.alt-info .dijitButtonNode, +.flat .dijitComboButton.alt-info .dijitButtonNode, +.flat .dijitToggleButton.alt-info .dijitButtonNode, +.flat .dijitComboBox.alt-info .dijitButtonNode, +.flat .dijitSelect.alt-info .dijitButtonContents, +.flat .dijitSelect.alt-info .dijitButtonNode, +.flat .dijitSpinner.alt-info .dijitArrowButton { + background: #03a9f4; + color: #fff; + border-color: #028ac7; +} +.flat .dijitComboButton.alt-info .dijitStretch { + border-right-color: #028ac7; +} +.flat .dijitComboButtonRtl.alt-info .dijitStretch { + border-left-color: #028ac7; +} +.flat .dijitButton.alt-warning .dijitButtonNode, +.flat .dijitDropDownButton.alt-warning .dijitButtonNode, +.flat .dijitComboButton.alt-warning .dijitButtonNode, +.flat .dijitToggleButton.alt-warning .dijitButtonNode, +.flat .dijitComboBox.alt-warning .dijitButtonNode, +.flat .dijitSelect.alt-warning .dijitButtonContents, +.flat .dijitSelect.alt-warning .dijitButtonNode, +.flat .dijitSpinner.alt-warning .dijitArrowButton { + background: #fb8c00; + color: #fff; + border-color: #cd7200; +} +.flat .dijitComboButton.alt-warning .dijitStretch { + border-right-color: #cd7200; +} +.flat .dijitComboButtonRtl.alt-warning .dijitStretch { + border-left-color: #cd7200; +} +.flat .dijitButton.alt-danger .dijitButtonNode, +.flat .dijitDropDownButton.alt-danger .dijitButtonNode, +.flat .dijitComboButton.alt-danger .dijitButtonNode, +.flat .dijitToggleButton.alt-danger .dijitButtonNode, +.flat .dijitComboBox.alt-danger .dijitButtonNode, +.flat .dijitSelect.alt-danger .dijitButtonContents, +.flat .dijitSelect.alt-danger .dijitButtonNode, +.flat .dijitSpinner.alt-danger .dijitArrowButton { + background: #e53935; + color: #fff; + border-color: #cc1e1a; +} +.flat .dijitComboButton.alt-danger .dijitStretch { + border-right-color: #cc1e1a; +} +.flat .dijitComboButtonRtl.alt-danger .dijitStretch { + border-left-color: #cc1e1a; +} +.flat .dijitButton.alt-inverse .dijitButtonNode, +.flat .dijitDropDownButton.alt-inverse .dijitButtonNode, +.flat .dijitComboButton.alt-inverse .dijitButtonNode, +.flat .dijitToggleButton.alt-inverse .dijitButtonNode, +.flat .dijitComboBox.alt-inverse .dijitButtonNode, +.flat .dijitSelect.alt-inverse .dijitButtonContents, +.flat .dijitSelect.alt-inverse .dijitButtonNode, +.flat .dijitSpinner.alt-inverse .dijitArrowButton { + background: #616161; + color: #fff; + border-color: #4f4f4f; +} +.flat .dijitComboButton.alt-inverse .dijitStretch { + border-right-color: #4f4f4f; +} +.flat .dijitComboButtonRtl.alt-inverse .dijitStretch { + border-left-color: #4f4f4f; +} +.flat .dijitButtonHover .dijitButtonNode, +.flat .dijitDropDownButtonHover .dijitButtonNode, +.flat .dijitToggleButtonHover .dijitButtonNode { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitComboButton .dijitButtonNodeHover, +.flat .dijitComboButton .dijitDownArrowButtonHover { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitButtonHover.alt-primary .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-primary .dijitButtonNode, +.flat .dijitComboButton.alt-primary .dijitButtonNodeHover, +.flat .dijitComboButton.alt-primary .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-primary .dijitButtonNode, +.flat .dijitComboBoxHover.alt-primary .dijitButtonNode, +.flat .dijitSelectHover.alt-primary .dijitButtonContents, +.flat .dijitSelectHover.alt-primary .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitArrowButton, +.flat .dijitSpinner.alt-primary .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-primary .dijitDownArrowButtonHover { + background: #1981dd; + border-color: #1774c5; +} +.flat .dijitButtonHover.alt-success .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-success .dijitButtonNode, +.flat .dijitComboButton.alt-success .dijitButtonNodeHover, +.flat .dijitComboButton.alt-success .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-success .dijitButtonNode, +.flat .dijitComboBoxHover.alt-success .dijitButtonNode, +.flat .dijitSelectHover.alt-success .dijitButtonContents, +.flat .dijitSelectHover.alt-success .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-success .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-success .dijitArrowButton, +.flat .dijitSpinner.alt-success .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-success .dijitDownArrowButtonHover { + background: #409843; + border-color: #39883c; +} +.flat .dijitButtonHover.alt-info .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-info .dijitButtonNode, +.flat .dijitComboButton.alt-info .dijitButtonNodeHover, +.flat .dijitComboButton.alt-info .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-info .dijitButtonNode, +.flat .dijitComboBoxHover.alt-info .dijitButtonNode, +.flat .dijitSelectHover.alt-info .dijitButtonContents, +.flat .dijitSelectHover.alt-info .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-info .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-info .dijitArrowButton, +.flat .dijitSpinner.alt-info .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-info .dijitDownArrowButtonHover { + background: #03a1e8; + border-color: #0390cf; +} +.flat .dijitButtonHover.alt-warning .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-warning .dijitButtonNode, +.flat .dijitComboButton.alt-warning .dijitButtonNodeHover, +.flat .dijitComboButton.alt-warning .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-warning .dijitButtonNode, +.flat .dijitComboBoxHover.alt-warning .dijitButtonNode, +.flat .dijitSelectHover.alt-warning .dijitButtonContents, +.flat .dijitSelectHover.alt-warning .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitArrowButton, +.flat .dijitSpinner.alt-warning .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-warning .dijitDownArrowButtonHover { + background: #ee8500; + border-color: #d57700; +} +.flat .dijitButtonHover.alt-danger .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-danger .dijitButtonNode, +.flat .dijitComboButton.alt-danger .dijitButtonNodeHover, +.flat .dijitComboButton.alt-danger .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-danger .dijitButtonNode, +.flat .dijitComboBoxHover.alt-danger .dijitButtonNode, +.flat .dijitSelectHover.alt-danger .dijitButtonContents, +.flat .dijitSelectHover.alt-danger .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitArrowButton, +.flat .dijitSpinner.alt-danger .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-danger .dijitDownArrowButtonHover { + background: #e32d29; + border-color: #d4201b; +} +.flat .dijitButtonHover.alt-inverse .dijitButtonNode, +.flat .dijitDropDownButtonHover.alt-inverse .dijitButtonNode, +.flat .dijitComboButton.alt-inverse .dijitButtonNodeHover, +.flat .dijitComboButton.alt-inverse .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover.alt-inverse .dijitButtonNode, +.flat .dijitComboBoxHover.alt-inverse .dijitButtonNode, +.flat .dijitSelectHover.alt-inverse .dijitButtonContents, +.flat .dijitSelectHover.alt-inverse .dijitButtonNode, +.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitArrowButton, +.flat .dijitSpinner.alt-inverse .dijitUpArrowButtonHover, +.flat .dijitSpinner.alt-inverse .dijitDownArrowButtonHover { + background: #5c5c5c; + border-color: #525252; +} +.flat .dijitButtonActive .dijitButtonNode, +.flat .dijitDropDownButtonActive .dijitButtonNode, +.flat .dijitToggleButtonActive .dijitButtonNode, +.flat .dijitToggleButtonChecked .dijitButtonNode { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitComboButton .dijitButtonNodeActive, +.flat .dijitComboButton .dijitDownArrowButtonActive { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitButtonActive.alt-primary .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-primary .dijitButtonNode, +.flat .dijitComboButton.alt-primary .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-primary .dijitButtonNode, +.flat .dijitComboBoxActive.alt-primary .dijitButtonNode, +.flat .dijitSelectActive.alt-primary .dijitButtonContents, +.flat .dijitSelectActive.alt-primary .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitArrowButton, +.flat .dijitComboBox.alt-primary .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-primary .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-primary .dijitDownArrowButtonActive { + background: #1878cc; + border-color: #135fa3; +} +.flat .dijitButtonActive.alt-success .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-success .dijitButtonNode, +.flat .dijitComboButton.alt-success .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-success .dijitButtonNode, +.flat .dijitComboBoxActive.alt-success .dijitButtonNode, +.flat .dijitSelectActive.alt-success .dijitButtonContents, +.flat .dijitSelectActive.alt-success .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-success .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-success .dijitArrowButton, +.flat .dijitComboBox.alt-success .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-success .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-success .dijitDownArrowButtonActive { + background: #3b8d3e; + border-color: #2f7032; +} +.flat .dijitButtonActive.alt-info .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-info .dijitButtonNode, +.flat .dijitComboButton.alt-info .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-info .dijitButtonNode, +.flat .dijitComboBoxActive.alt-info .dijitButtonNode, +.flat .dijitSelectActive.alt-info .dijitButtonContents, +.flat .dijitSelectActive.alt-info .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-info .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-info .dijitArrowButton, +.flat .dijitComboBox.alt-info .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-info .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-info .dijitDownArrowButtonActive { + background: #0395d7; + border-color: #0276ab; +} +.flat .dijitButtonActive.alt-warning .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-warning .dijitButtonNode, +.flat .dijitComboButton.alt-warning .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-warning .dijitButtonNode, +.flat .dijitComboBoxActive.alt-warning .dijitButtonNode, +.flat .dijitSelectActive.alt-warning .dijitButtonContents, +.flat .dijitSelectActive.alt-warning .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitArrowButton, +.flat .dijitComboBox.alt-warning .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-warning .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-warning .dijitDownArrowButtonActive { + background: #dd7b00; + border-color: #b06200; +} +.flat .dijitButtonActive.alt-danger .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-danger .dijitButtonNode, +.flat .dijitComboButton.alt-danger .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-danger .dijitButtonNode, +.flat .dijitComboBoxActive.alt-danger .dijitButtonNode, +.flat .dijitSelectActive.alt-danger .dijitButtonContents, +.flat .dijitSelectActive.alt-danger .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitArrowButton, +.flat .dijitComboBox.alt-danger .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-danger .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-danger .dijitDownArrowButtonActive { + background: #dc211c; + border-color: #af1a17; +} +.flat .dijitButtonActive.alt-inverse .dijitButtonNode, +.flat .dijitDropDownButtonActive.alt-inverse .dijitButtonNode, +.flat .dijitComboButton.alt-inverse .dijitButtonNodeActive, +.flat .dijitToggleButtonActive.alt-inverse .dijitButtonNode, +.flat .dijitComboBoxActive.alt-inverse .dijitButtonNode, +.flat .dijitSelectActive.alt-inverse .dijitButtonContents, +.flat .dijitSelectActive.alt-inverse .dijitArrowButton, +.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitButtonContents, +.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitArrowButton, +.flat .dijitComboBox.alt-inverse .dijitButtonNode.dijitHasDropDownOpen, +.flat .dijitSpinner.alt-inverse .dijitUpArrowButtonActive, +.flat .dijitSpinner.alt-inverse .dijitDownArrowButtonActive { + background: #555; + border-color: #444; +} +.flat .dijitButtonDisabled, +.flat .dijitDropDownButtonDisabled, +.flat .dijitComboButtonDisabled, +.flat .dijitToggleButtonDisabled { + outline: none; +} +.flat .dijitButtonDisabled .dijitButtonNode, +.flat .dijitDropDownButtonDisabled .dijitButtonNode, +.flat .dijitComboButtonDisabled .dijitButtonNode, +.flat .dijitToggleButtonDisabled .dijitButtonNode { + cursor: default; + color: #9e9e9e; + background-color: #f5f5f5; + border-color: #e3e3e3; +} +.flat .dijitButtonDisabled.alt-primary .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-primary .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-primary .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-primary .dijitButtonNode { + background: #6db2ee; + border-color: #50a2eb; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-primary .dijitStretch { + border-right-color: #50a2eb; +} +.flat .dijitComboButtonRtlDisabled.alt-primary .dijitStretch { + border-left-color: #50a2eb; +} +.flat .dijitComboBoxDisabled.alt-primary .dijitButtonNode { + border-left-color: #50a2eb; +} +.flat .dijitComboBoxRtlDisabled.alt-primary .dijitButtonNode { + border-right-color: #50a2eb; +} +.flat .dijitTimeTextBoxDisabled.alt-primary .dijitButtonNode { + border-left-color: #50a2eb; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-primary .dijitButtonNode { + border-right-color: #50a2eb; +} +.flat .dijitDateTextBoxDisabled.alt-primary .dijitButtonNode { + border-left-color: #50a2eb; +} +.flat .dijitDateTextBoxRtlDisabled.alt-primary .dijitButtonNode { + border-right-color: #50a2eb; +} +.flat .dijitButtonDisabled.alt-success .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-success .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-success .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-success .dijitButtonNode { + background: #7dc981; + border-color: #63be67; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-success .dijitStretch { + border-right-color: #63be67; +} +.flat .dijitComboButtonRtlDisabled.alt-success .dijitStretch { + border-left-color: #63be67; +} +.flat .dijitComboBoxDisabled.alt-success .dijitButtonNode { + border-left-color: #63be67; +} +.flat .dijitComboBoxRtlDisabled.alt-success .dijitButtonNode { + border-right-color: #63be67; +} +.flat .dijitTimeTextBoxDisabled.alt-success .dijitButtonNode { + border-left-color: #63be67; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-success .dijitButtonNode { + border-right-color: #63be67; +} +.flat .dijitDateTextBoxDisabled.alt-success .dijitButtonNode { + border-left-color: #63be67; +} +.flat .dijitDateTextBoxRtlDisabled.alt-success .dijitButtonNode { + border-right-color: #63be67; +} +.flat .dijitButtonDisabled.alt-info .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-info .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-info .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-info .dijitButtonNode { + background: #56c9fd; + border-color: #34befd; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-info .dijitStretch { + border-right-color: #34befd; +} +.flat .dijitComboButtonRtlDisabled.alt-info .dijitStretch { + border-left-color: #34befd; +} +.flat .dijitComboBoxDisabled.alt-info .dijitButtonNode { + border-left-color: #34befd; +} +.flat .dijitComboBoxRtlDisabled.alt-info .dijitButtonNode { + border-right-color: #34befd; +} +.flat .dijitTimeTextBoxDisabled.alt-info .dijitButtonNode { + border-left-color: #34befd; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-info .dijitButtonNode { + border-right-color: #34befd; +} +.flat .dijitDateTextBoxDisabled.alt-info .dijitButtonNode { + border-left-color: #34befd; +} +.flat .dijitDateTextBoxRtlDisabled.alt-info .dijitButtonNode { + border-right-color: #34befd; +} +.flat .dijitButtonDisabled.alt-warning .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-warning .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-warning .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-warning .dijitButtonNode { + background: #ffb557; + border-color: #ffa635; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-warning .dijitStretch { + border-right-color: #ffa635; +} +.flat .dijitComboButtonRtlDisabled.alt-warning .dijitStretch { + border-left-color: #ffa635; +} +.flat .dijitComboBoxDisabled.alt-warning .dijitButtonNode { + border-left-color: #ffa635; +} +.flat .dijitComboBoxRtlDisabled.alt-warning .dijitButtonNode { + border-right-color: #ffa635; +} +.flat .dijitTimeTextBoxDisabled.alt-warning .dijitButtonNode { + border-left-color: #ffa635; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-warning .dijitButtonNode { + border-right-color: #ffa635; +} +.flat .dijitDateTextBoxDisabled.alt-warning .dijitButtonNode { + border-left-color: #ffa635; +} +.flat .dijitDateTextBoxRtlDisabled.alt-warning .dijitButtonNode { + border-right-color: #ffa635; +} +.flat .dijitButtonDisabled.alt-danger .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-danger .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-danger .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-danger .dijitButtonNode { + background: #ee7e7c; + border-color: #eb6561; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-danger .dijitStretch { + border-right-color: #eb6561; +} +.flat .dijitComboButtonRtlDisabled.alt-danger .dijitStretch { + border-left-color: #eb6561; +} +.flat .dijitComboBoxDisabled.alt-danger .dijitButtonNode { + border-left-color: #eb6561; +} +.flat .dijitComboBoxRtlDisabled.alt-danger .dijitButtonNode { + border-right-color: #eb6561; +} +.flat .dijitTimeTextBoxDisabled.alt-danger .dijitButtonNode { + border-left-color: #eb6561; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-danger .dijitButtonNode { + border-right-color: #eb6561; +} +.flat .dijitDateTextBoxDisabled.alt-danger .dijitButtonNode { + border-left-color: #eb6561; +} +.flat .dijitDateTextBoxRtlDisabled.alt-danger .dijitButtonNode { + border-right-color: #eb6561; +} +.flat .dijitButtonDisabled.alt-inverse .dijitButtonNode, +.flat .dijitDropDownButtonDisabled.alt-inverse .dijitButtonNode, +.flat .dijitComboButtonDisabled.alt-inverse .dijitButtonNode, +.flat .dijitToggleButtonDisabled.alt-inverse .dijitButtonNode { + background: #989898; + border-color: #848484; + color: #f2f2f2; +} +.flat .dijitComboButtonDisabled.alt-inverse .dijitStretch { + border-right-color: #848484; +} +.flat .dijitComboButtonRtlDisabled.alt-inverse .dijitStretch { + border-left-color: #848484; +} +.flat .dijitComboBoxDisabled.alt-inverse .dijitButtonNode { + border-left-color: #848484; +} +.flat .dijitComboBoxRtlDisabled.alt-inverse .dijitButtonNode { + border-right-color: #848484; +} +.flat .dijitTimeTextBoxDisabled.alt-inverse .dijitButtonNode { + border-left-color: #848484; +} +.flat .dijitTimeTextBoxRtlDisabled.alt-inverse .dijitButtonNode { + border-right-color: #848484; +} +.flat .dijitDateTextBoxDisabled.alt-inverse .dijitButtonNode { + border-left-color: #848484; +} +.flat .dijitDateTextBoxRtlDisabled.alt-inverse .dijitButtonNode { + border-right-color: #848484; +} +.flat .dijitComboButtonDisabled .dijitArrowButton { + border-left-width: 0; +} +.flat .dijitDropDownButton .dijitButtonNode { + padding-right: 8px; +} +.flat table.dijitComboButton { + border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */ +} +.flat table.dijitComboButton .dijitStretch { + border-radius: 4px 0 0 4px; +} +.flat table.dijitComboButton .dijitArrowButton { + padding: 4px; + width: 20px; + border-radius: 0 4px 4px 0; + border-left-width: 0; +} +.flat .dijitToggleButton .dijitCheckBoxIcon { + display: none; +} +.flat .dijitToggleButtonChecked .dijitIcon { + display: inline-block; +} +.flat .dijitDropDownButton .dijitArrowButtonInner { + margin-left: 3px; +} +.flat .dijitDropDownButton .dijitArrowButtonInner, +.flat .dijitArrowButton { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.flat .dijitDropDownButton .dijitArrowButtonInner:before, +.flat .dijitArrowButton:before { + content: "\f002"; +} +.flat .dijitLeftArrowButton:before { + content: "\f000"; +} +.flat .dijitRightArrowButton:before { + content: "\f001"; +} +.flat .dijitUpArrowButton:before { + content: "\f003"; +} +/* Toolbar + * + * Styling Toolbar means styling the toolbar container and the widget inside toolbar (dijitToolbar) + * + * 1. toolbar (default styling): + * .dijitToolbar - styles for outer container + * + * 2. widget inside toolbar + * .dijitToolbar .dijitButtonNode - Button widget + * .dijitComboButton - ComboButton widget + * .dijitDropDownButton - DropDownButton widget + * .dijitToggleButton - ToggleButton widget + * + * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside) + * .dijitToolbar .dijitButtonNodeHover - styles for hovered Button widget + * + * 4. actived widget inside toolbar (ie, mouse down on the widget inside) + * .dijitToolbar .dijitButtonNodeActive - mouse down on Button widget + */ +.flat .dijitToolbar { + background-color: #f5f5f5; + padding: 4px; + zoom: 1; +/* Override default button styles */ +/* Hover */ +/* + .dijitComboButtonHover { + .dijitButtonNode, + .dijitDownArrowButton { + } + + .dijitButtonNodeHover, + .dijitDownArrowButtonHover { + } + } + */ +/* Active */ +/* Toggle button checked status */ +} +.flat .dijitToolbar label { + padding: 8px; +} +.flat .dijitToolbar .dijitToggleButton, +.flat .dijitToolbar .dijitButton, +.flat .dijitToolbar .dijitDropDownButton, +.flat .dijitToolbar .dijitComboButton { + margin-right: 4px; +} +.flat .dijitToolbar .dijitButton .dijitButtonNode, +.flat .dijitToolbar .dijitDropDownButton .dijitButtonNode, +.flat .dijitToolbar .dijitComboButton .dijitButtonNode, +.flat .dijitToolbar .dijitToggleButton .dijitButtonNode, +.flat .dijitToolbar .dijitComboBox .dijitButtonNode { + border-color: transparent; + padding: 4px; + background-color: transparent; + border-radius: 4px; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -o-transition-property: background-color; + -ms-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + -o-transition-duration: 0.3s; + -ms-transition-duration: 0.3s; + transition-duration: 0.3s; +} +.flat .dijitToolbar .dijitComboButton .dijitStretch { +/* no rounded border on side adjacent to arrow */ + border-radius: 4px 0 0 4px; +} +.flat .dijitToolbar .dijitComboButton .dijitArrowButton { +/* no rounded border on side adjacent to button */ + border-radius: 0 4px 4px 0; +} +.flat .dijitToolbar .dijitComboBox .dijitButtonNode { + padding: 0 8px; +} +.flat .dijitToolbar .dijitComboBox .dijitInputInner { + padding: 0; +} +.flat .dijitToolbar .dijitDropDownButton .dijitArrowButtonInner { + margin-left: 4px; +} +.flat .dijitToolbar .dijitButtonHover .dijitButtonNode, +.flat .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, +.flat .dijitToolbar .dijitToggleButtonHover .dijitButtonNode, +.flat .dijitToolbar .dijitComboButtonHover .dijitButtonNode { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; + border: 1px solid #ccc; +} +.flat .dijitToolbar .dijitButtonActive .dijitButtonNode, +.flat .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, +.flat .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; + border: 1px solid #ccc; +} +.flat .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; + border: 1px solid #ccc; +} +.flat .dijitToolbarSeparator { + width: 1px; + height: 20px; + background-color: #ccc; + padding: 0; + margin: 0 4px; +} +.flat .dijitDisabled .dijitToolbar { + background-color: #f5f5f5; + border-bottom: 1px solid #ccc; +} +/* ProgressBar + * + * Styling of the ProgressBar consists of the following: + * + * 1. the base progress bar + * .dijitProgressBar - sets margins for the progress bar + * + * 2. the empty bar + * .dijitProgressBarEmpty - sets background img and color for bar or parts of bar that are not finished yet + * Also sets border color for whole bar + * + * 3. tile mode + * .dijitProgressBarTile + * inner container for finished portion when in 'tile' (image) mode + * + * 4. full bar mode + * .dijitProgressBarFull + * adds border to right side of the filled portion of bar + * + * 5. text for label of bar + * .dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts. + * + * 6. indeterminate mode + * .dijitProgressBarIndeterminate .dijitProgressBarTile + * sets animated gif for the progress bar in 'indeterminate' mode + */ +.flat .dijitProgressBar { + background-color: #e0e0e0; + border: 0 none; + border-radius: 4px; +} +.flat .dijitProgressBarTile { + background: url("images/progressBarStrips.png") repeat-x top; + -webkit-animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; + -ms-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} +.flat .dijitProgressBarFull { + background-color: #257aa7; + -webkit-transition-property: width; + -moz-transition-property: width; + -o-transition-property: width; + -ms-transition-property: width; + transition-property: width; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -ms-transition-duration: 0.25s; + transition-duration: 0.25s; + height: 100%; +} +.flat .dijitProgressBar.alt-primary .dijitProgressBarFull { + background-color: #1e88e5; +} +.flat .dijitProgressBar.alt-success .dijitProgressBarFull { + background-color: #43a047; +} +.flat .dijitProgressBar.alt-info .dijitProgressBarFull { + background-color: #03a9f4; +} +.flat .dijitProgressBar.alt-warning .dijitProgressBarFull { + background-color: #fb8c00; +} +.flat .dijitProgressBar.alt-danger .dijitProgressBarFull { + background-color: #e53935; +} +.flat .dijitProgressBar.alt-inverse .dijitProgressBarFull { + background-color: #616161; +} +.flat .dijitProgressBarLabel { + margin-top: 0.2em; + margin-bottom: 0.2em; + color: #fff; + font-size: 1em; + text-shadow: 0.1em 0.1em 1px #424242; +} +@-moz-keyframes progress-bar-stripes { + from { + background-position: 75px 0; + } + to { + background-position: 0 0; + } +} +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 75px 0; + } + to { + background-position: 0 0; + } +} +@-o-keyframes progress-bar-stripes { + from { + background-position: 75px 0; + } + to { + background-position: 0 0; + } +} +@keyframes progress-bar-stripes { + from { + background-position: 75px 0; + } + to { + background-position: 0 0; + } +} +.flat .dijitTreeRtl { + text-align: right; +} +.flat .dijitTreeRtl .dijitTreeContainer { + float: right; +} +.flat .dijitTreeRtl .dijitTreeExpandoClosed:before { + content: "\e60b"; +} +/* TitlePane and Fieldset + * + * Styling TitlePane means styling the TitlePane title and its content container (dijitTitlePane) + * + * TitlePane title: + * 1. TitlePane title (default styling): + * .dijitTitlePaneTitle - TitlePane's title div style: background-color, border + * + * 2. hovered TitlePane title (ie, mouse hover on a title bar) + * .dijitTitlePaneTitleHover - styles when mouse hover on the title div + * + * 3. active TitlePane title (ie, mouse down on a title bar) + * .dijitTitlePaneTitleActive - styles when mouse down on the title div + * + * + * TitlePane Content Container: + * 1. outer/inner container: + * .dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div + */ +.flat .dijitTitlePaneTitle { + border-style: solid; + border-width: 1px; + border-color: #ccc; + padding: 4px; + border-radius: 4px; + line-height: 20px; + cursor: pointer; + -webkit-transition: all 0.05s linear; + -moz-transition: all 0.05s linear; + -o-transition: all 0.05s linear; + -ms-transition: all 0.05s linear; + transition: all 0.05s linear; + background: #fff; + border-radius: 4px 4px 0 0; +} +.flat .dijitTitlePaneTitleHover, +.flat .dijitFieldsetTitleHover { + -webkit-transition: all 0.1s; + -moz-transition: all 0.1s; + -o-transition: all 0.1s; + -ms-transition: all 0.1s; + transition: all 0.1s; + background: #f2f2f2; + border-color: #d9d9d9; +} +.flat .dijitTitlePaneTitleActive, +.flat .dijitFieldsetTitleActive { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + -ms-transition: none; + transition: none; + outline: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); + background: #e0e0e0; + border-color: #b3b3b3; +} +.flat .dijitFieldset { + border-radius: 4px 4px 0 0; +} +.flat .dijitFieldset .dijitArrowNodeInner { + display: none; +} +.flat .dijitFieldset .dijitFieldsetTitleClosed .dijitArrowNode:before { + content: "\f006"; +} +.flat .dijitTitlePane .dijitArrowNode, +.flat .dijitFieldset .dijitArrowNode { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 18px; + text-align: center; +} +.flat .dijitTitlePane .dijitArrowNode:before, +.flat .dijitFieldset .dijitArrowNode:before { + content: "\f007"; +} +.flat .dijitTitlePane .dijitClosed, +.flat .dijitFieldset .dijitClosed { + border-radius: 4px; +} +.flat .dijitTitlePane .dijitClosed .dijitArrowNode:before, +.flat .dijitFieldset .dijitClosed .dijitArrowNode:before { + content: "\f006"; +} +.flat .dijitTitlePaneContentOuter { + background-color: #fff; + border: 1px solid #ccc; + border-top: none; + border-radius: 0 0 4px 4px; +} +.flat .dijitFieldset { + background-color: #fff; + border: 1px solid #ccc; + border-radius: 4px; +} +.flat .dijitTitlePaneContentInner, +.flat .dijitFieldsetContentInner { + padding: 8px; +} +.flat .dijitTitlePaneTextNode, +.flat .dijitFieldsetLegendNode { + margin-left: 8px; + margin-right: 8px; + vertical-align: text-top; +} +.flat .dijitFieldsetLegendNode { + cursor: default; +} +/* Time Picker + * + * Styling the Time Picker consists of the following: + * + * 1. minor time values + * .dijitTimePickerTick - set text color, size, background color of minor values + * .dijitTimePickerTickHover - set hover style of minor time values + * dijitTimePickerTickSelected - set selected style of minor time values + * + * 2. major time values - 1:00, 2:00, times on the hour + * set text color, size, background color, left/right margins for "zoom" affect + * .dijitTimePickerMarkerHover - to set hover style of major time values + * .dijitTimePickerMarkerSelected - set selected style of major time values + * + * 3. up and down arrow buttons + * .dijitTimePicker .dijitButtonNode - background-color, border + * .dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state + * + * Other classes provide the fundamental structure of the TimePicker and should not be modified. + */ +.dijitTimePickerPopup { + -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); + box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); + height: 200px; +} +.dijitTimePicker { + background-color: #fff; + padding: 4px 0; + border: 1px solid #ccc; + border-radius: 4px; +} +.dijitTimePickerItem { + margin: 0; +} +.dijitTimePickerTick { +/* minor value */ + color: #9e9e9e; + border: 0 none; +} +.dijitTimePickerMarker { +/* major value - 1:00, 2:00, times on the hour */ + background-color: transparent; + white-space: nowrap; + border: 0 none; +} +.dijitTimePickerTickHover, +.dijitTimePickerMarkerHover { + background: #f2f2f2; + color: #424242; +} +.dijitTimePickerMarkerSelected, +.dijitTimePickerTickSelected { + background: #f2f2f2; + color: #424242; +} +.dijitTimePickerTick .dijitTimePickerItemInner, +.dijitTimePickerMarker .dijitTimePickerItemInner { + padding: 8px; + margin: 0; +} +.flat .dijitCalendarRtl .dijitCalendarDecrease:before { + content: "\f001"; +} +.flat .dijitCalendarRtl .dijitCalendarIncrease:before { + content: "\f000"; +} +/* InlineEditBox + * + * Styling InlineEditBox mainly includes: + * + * 1. Normal state + * .dijitInlineEditBoxDisplayMode - for border + * + * 2. Hover state + * .dijitInlineEditBoxDisplayModeHover - for border and background color + */ +.flat .dijitInlineEditBoxDisplayMode { + border: 1px dashed transparent; + padding: 4px 6px; +} +.flat .dijitInlineEditBoxDisplayModeHover { + background-color: transparent; + border: 1px dashed #257aa7; +} +.flat .dijitInlineEditBoxDisplayModeDisabled { + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitMenuBarRtl { + text-align: right; +} +.flat .dijitMenuItemRtl { + text-align: right; +} +.flat .dijitMenuItemRtl .dijitMenuExpand:before { + content: "\f000"; +} +/* Dialog + * + * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog + * + * Dialog: + * 1. Dialog (default styling): + * .dijitDialog - styles for dialog's bounding box + * + * 2. Dialog title + * .dijitDialogTitleBar - styles for the title container at the top of dialog + * .dijitDialogTitle - the text container in dialog title + * + * 3. Dialog content + * .dijitDialogPaneContent - main container for content area and action bar + * .dijitDialogPaneContentArea - styles for content container + * + * 4. Dialog action bar + * .dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content + * + * 5. Dialog underlay + * .dijitDialogUnderlay - div under the dialog which used for separate dialog and page content + * + * + * Tooltip & TooltipDialog: + * 1. tooltip content container: + * .dijitTooltipContainer - tooltip content container + * + * 2. tooltip connector: + * .dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right) + */ +.flat .dijitDialog { + background-color: #fff; + border: 1px solid #ccc; + border-radius: 4px; + -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); + box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); +} +.flat .dijitDialogPaneContent { + background-color: #fff; + border-radius: 0 0 4px 4px; + padding: 8px; + position: relative; +} +.flat .dijitDialogPaneActionBar { +/* the bar at bottom with OK/Cancel buttons */ + padding-top: 8px; + text-align: right; + position: relative; +} +.flat .dijitDialogPaneActionBar .dijitButton { + float: none; +} +.flat .dijitTooltipDialog .dijitDialogPaneActionBar { + border-radius: 0 0 4px 4px; + margin: 8px 0 0; +} +.flat .dijitDialogTitleBar { +/* outer container for the titlebar of the dialog */ + line-height: 20px; + border-bottom: 1px solid #e0e0e0; + padding: 8px 12px; + border-radius: 4px 4px 0 0; +} +.flat .dijitDialogTitle { +/* typography and styling of the dialog title */ + font-size: 1.1em; + font-weight: bold; +} +.flat .dijitDialogCloseIcon { +/* the default close icon for the dialog */ + width: 20px; + height: 20px; + line-height: 20px; + text-align: center; + position: absolute; + top: 8px; + right: 12px; + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitDialogCloseIcon:before { + content: "\f00e"; + font-size: 20px; +} +.flat .dijitDialogCloseIcon .closeText { + display: none; +} +.flat .dijitDialogCloseIconHover, +.flat .dijitDialogCloseIconActive { + opacity: 1; + -ms-filter: none; + filter: none; +} +.flat .dijitDialogUnderlay { + background: #000; + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitTooltip, +.flat .dijitTooltipDialog { +/* the outermost dom node, holding the connector and container */ + background: transparent; /* make the area on the sides of the arrow transparent */ +} +.flat .dijitTooltipContainer { + background-color: #424242; + opacity: 1; + -ms-filter: none; + filter: none; + padding: 4px 8px; + border-radius: 4px; +} +.flat .dijitTooltip .dijitTooltipContainer { + color: #fff; + border: 0 none; +} +.flat .dijitTooltipConnector { +/* the arrow */ + z-index: 2; + width: auto; + height: auto; + opacity: 1; + -ms-filter: none; + filter: none; +} +.flat .dijitTooltipABRight .dijitTooltipConnector { +/* above or below tooltip, but the arrow appears on the right, + and the right edges of target and tooltip are aligned rather than the left */ + left: auto !important; + right: 8px; +} +.flat .dijitTooltipBelow { +/* leave room for arrow above content */ + padding-top: 4px; +} +.flat .dijitTooltipBelow .dijitTooltipConnector { +/* the arrow piece for tooltips below an element */ + top: 0; + left: 8px; + border-bottom: 4px solid #424242; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 0; +} +.flat .dijitTooltipAbove { +/* leave room for arrow below content */ + padding-bottom: 4px; +} +.flat .dijitTooltipAbove .dijitTooltipConnector { +/* the arrow piece for tooltips above an element */ + bottom: 0; + left: 8px; + border-top: 4px solid #424242; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-bottom: 0; +} +.flat .dijitTooltipLeft { + padding-right: 4px; +} +.flat .dijitTooltipLeft .dijitTooltipConnector { +/* the arrow piece for tooltips to the left of an element, bottom borders aligned */ + right: 0; + border-left: 4px solid #424242; + border-bottom: 4px solid transparent; + border-top: 4px solid transparent; + border-right: 0; +} +.flat .dijitTooltipRight { + padding-left: 4px; +} +.flat .dijitTooltipRight .dijitTooltipConnector { +/* the arrow piece for tooltips to the right of an element, bottom borders aligned */ + left: 0; + border-bottom: 4px solid transparent; + border-top: 4px solid transparent; + border-right: 4px solid #424242; +} +.flat .dijitTooltipDialog .dijitTooltipContainer { + background: #fff; + border: 1px solid #ccc; + border-radius: 4px; + -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); + box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); + opacity: 1; + -ms-filter: none; + filter: none; +} +.flat .dijitTooltipDialog.dijitTooltipBelow { + padding-top: 6px; +} +.flat .dijitTooltipDialog.dijitTooltipAbove { + padding-bottom: 6px; +} +.flat .dijitTooltipDialog.dijitTooltipLeft { + padding-right: 6px; +} +.flat .dijitTooltipDialog.dijitTooltipRight { + padding-left: 6px; +} +.flat .dijitTooltipDialog .dijitTooltipConnector { + height: 0; + width: 0; + position: absolute; + z-index: 2; + opacity: 1; + -ms-filter: none; + filter: none; +} +.flat .dijitTooltipDialog .dijitTooltipConnector:after { + content: ""; + height: 0; + width: 0; + position: absolute; +} +.flat .dijitTooltipDialog.dijitTooltipAbove .dijitTooltipConnector { + border-color: #ccc transparent transparent; + border-width: 7px 7px 0; /* one extra pixel is added as the border of the arrows */ + border-style: solid; +} +.flat .dijitTooltipDialog.dijitTooltipAbove .dijitTooltipConnector:after { + border-color: #fff transparent transparent; + border-width: 6px 6px 0; + border-style: solid; + left: -6px; + top: -7px; +} +.flat .dijitTooltipDialog.dijitTooltipBelow .dijitTooltipConnector { + border-color: transparent transparent #ccc; + border-width: 0 7px 7px; + border-style: solid; +} +.flat .dijitTooltipDialog.dijitTooltipBelow .dijitTooltipConnector:after { + border-color: transparent transparent #fff; + border-width: 0 6px 6px; + border-style: solid; + left: -6px; + bottom: -7px; +} +.flat .dijitTooltipDialog.dijitTooltipLeft .dijitTooltipConnector { + border-color: transparent transparent transparent #ccc; + border-width: 7px 0 7px 7px; + border-style: solid; +} +.flat .dijitTooltipDialog.dijitTooltipLeft .dijitTooltipConnector:after { + border-color: transparent transparent transparent #fff; + border-width: 6px 0 6px 6px; + border-style: solid; + top: -6px; + left: -7px; +} +.flat .dijitTooltipDialog.dijitTooltipRight .dijitTooltipConnector { + border-color: transparent #ccc transparent transparent; + border-width: 7px 7px 7px 0; + border-style: solid; +} +.flat .dijitTooltipDialog.dijitTooltipRight .dijitTooltipConnector:after { + border-color: transparent #fff transparent transparent; + border-width: 6px 6px 6px 0; + border-style: solid; + top: -6px; + right: -7px; +} +/* Tree + * + * Styling Tree mostly means styling the TreeRow (dijitTreeRow) + * There are 4 basic states to style: + * + * Tree Row: + * 1. tree row (default styling): + * .dijitTreeRow - styles for each row of the tree + * + * 2. hovered tree row (mouse hover on a tree row) + * .dijitTreeRowHover - styles when mouse over on one row + * + * 3. active tree row (mouse down on a tree row) + * .dijitTreeRowActive - styles when mouse down on one row + * + * 4. selected tree row + * dijitTreeRowSelected - style when the row has been selected + * + * Tree Expando: + * dijitTreeExpando - the expando at the left of the text of each tree row + * + */ +.flat .dijitTreeIsRoot { + background-color: transparent; +} +.flat .dijitTreeRow, +.flat .dijitTreeNode .dojoDndItemBefore, +.flat .dijitTreeNode .dojoDndItemAfter { + padding: 8px 0; + border: 0 transparent; + line-height: 20px; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -o-transition-property: background-color; + -ms-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.15s; + -moz-transition-duration: 0.15s; + -o-transition-duration: 0.15s; + -ms-transition-duration: 0.15s; + transition-duration: 0.15s; + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + -ms-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.flat .dijitTreeRowHover { + background-color: #f2f2f2; + border-color: transparent; + -webkit-transition-duration: 0.15s; + -moz-transition-duration: 0.15s; + -o-transition-duration: 0.15s; + -ms-transition-duration: 0.15s; + transition-duration: 0.15s; +} +.flat .dijitTreeRowActive { + background-color: #f2f2f2; + border-color: transparent; +} +.flat .dijitTreeRowSelected, +.flat .dijitTreeRowHover.dijitTreeRowSelected, +.flat .dijitTreeRowActive.dijitTreeRowSelected { + color: #fff; + background-color: #257aa7; + border-color: transparent; +} +.flat .dijitTreeRowSelected .dijitTreeExpando, +.flat .dijitTreeRowHover.dijitTreeRowSelected .dijitTreeExpando, +.flat .dijitTreeRowActive.dijitTreeRowSelected .dijitTreeExpando { + color: #fff; +} +.flat .dijitTreeExpando { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + width: 14px; + height: 14px; + line-height: 14px; + text-align: center; + margin-left: 4px; + margin-right: 4px; + color: #257aa7; + vertical-align: middle; +} +.flat .dijitTreeExpandoOpened:before { + content: "\f012"; + cursor: pointer; +} +.flat .dijitTreeExpandoClosed:before { + content: "\f011"; +} +.flat .dijitTreeExpandoLoading { + -webkit-animation: spinning 2s linear infinite; + -moz-animation: spinning 2s linear infinite; + -o-animation: spinning 2s linear infinite; + -ms-animation: spinning 2s linear infinite; + animation: spinning 2s linear infinite; +} +.flat .dijitTreeExpandoLoading:before { + content: "\f01d"; +} +.dj_ie8 .dijitTreeExpandoLoading, +.dj_ie9 .dijitTreeExpandoLoading { + background: url("images/loadingAnimation.gif") no-repeat; +} +.dj_ie8 .dijitTreeExpandoLoading:before, +.dj_ie9 .dijitTreeExpandoLoading:before { + content: ""; +} +@-moz-keyframes spinning { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(-360deg); + -moz-transform: rotate(-360deg); + -o-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); + } +} +@-webkit-keyframes spinning { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(-360deg); + -moz-transform: rotate(-360deg); + -o-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); + } +} +@-o-keyframes spinning { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(-360deg); + -moz-transform: rotate(-360deg); + -o-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); + } +} +@keyframes spinning { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(-360deg); + -moz-transform: rotate(-360deg); + -o-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); + } +} +/* ColorPalette + * + * Styling of the ColorPalette consists of the following: + * + * 1. the whole color palette + * .dijitColorPalette - for outline, border, and background color of the whole color palette + * Note: outline does not work for IE + * + * 2. the color swatch + * .dijitColorPalette .dijitPaletteImg + * transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch. + * displays border around a color swatch + * + * 3. hovered swatch + * .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg + * the hovered state of the color swatch - adds border + * + * 4. active and selected swatch + * .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg + * .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg + * adds border for active or selected state + */ +.flat .dijitColorPalette { + border: 1px solid #ccc; + background-color: #fff; + border-radius: 4px; +/* swatch */ +} +.flat .dijitColorPalette .dijitPaletteTable { + padding: 4px; +} +.flat .dijitColorPalette .dijitColorPaletteSwatch { + height: 15px; + width: 15px; + border-radius: 2px; +} +.flat .dijitColorPalette .dijitPaletteImg { +/* transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch. + * displays border around a color swatch + * overrides border color in dijit.css */ + border: 1px solid transparent; + line-height: normal; +} +.flat .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg { + border-color: #ccc; + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 2px; + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + -o-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); +} +.flat .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg, +.flat .dijitColorPalette .dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg { + border: 1px solid #257aa7; + -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); + box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); + border-radius: 2px; + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + -o-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); +} +/* Editor + * + * Styling Editor means styling the Editor inside iframe container (dijitEditorIFrameContainer) + * + * 1. Editor iframe container (default styling): + * .dijitEditorIFrameContainer - normal state styles: background-color, border, padding + * + * 2. hovered Editor iframe container (ie, mouse hover on editor) + * .dijitEditorHover .dijitEditorIFrameContainer/dijitEditorIFrame - styles when mouse hover on the container + * + * 3. focused Editor iframe container (ie, mouse focus on the editor pane) + * .dijitEditorFocused .dijitEditorIFrameContainer/dijitEditorIFrame - styles when container focused + * + * 3. disabled Editor iframe container + * .dijitEditorDisabled - editor's inner iframe container disable status styles: background, border + */ +.flat .dijitEditor { + background-color: #fff; + border: 1px solid #ccc; + border-radius: 4px; +} +.flat .dijitEditor .dijitEditorIFrameContainer { + border: 1px solid transparent; + border-top: 1px solid #ccc; + padding: 4px 8px; + -webkit-transition: border 0.2s linear 0s; + -moz-transition: border 0.2s linear 0s; + -o-transition: border 0.2s linear 0s; + -ms-transition: border 0.2s linear 0s; + transition: border 0.2s linear 0s; +} +.flat .dijitEditorHover .dijitEditorIFrameContainer, +.flat .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame { + border: 1px solid #257aa7; +} +.flat .dijitEditorFocused .dijitEditorIFrameContainer { + border: 1px solid #257aa7; +} +.flat .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame { + border: 1px solid #257aa7; +} +.flat .dijitEditorDisabled { + border: 1px solid #ccc; + opacity: 0.65; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; + filter: alpha(opacity=65); +} +.flat .dijitEditorDisabled .dijitEditorIFrame, +.flat .dijitEditorDisabled .dijitEditorIFrameContainer, +.flat .dijitEditorDisabled .dijitEditorIFrameContainer .dijitEditorIFrame { + background-color: #f5f5f5; + border: 1px solid transparent; +} +/* + * font generated with https://icomoon.io/app + * + * all icons are Material Design icons by Google + * https://github.com/google/material-design-icons/blob/master/LICENSE + * + * see README for more about flat theme icons + */ +@font-face { + font-family: 'flat-icon'; + src: url("fonts/flat-icon.eot?90nq1s"); + src: url("fonts/flat-icon.eot?#iefix90nq1s") format('embedded-opentype'), url("fonts/flat-icon.ttf?90nq1s") format('truetype'), url("fonts/flat-icon.woff?90nq1s") format('woff'), url("fonts/flat-icon.svg?90nq1s#flat-icon") format('svg'); + font-weight: normal; + font-style: normal; +} +[class^="flat-"], +[class*=" flat-"] { + font-family: 'flat-icon'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.dijitIcon, +.dijitEditorIcon { + font-family: "flat-icon"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 14px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 16px; + width: 16px; + height: 16px; +} +.flat-drop-left:before { + content: "\f000"; +} +.flat-drop-right:before { + content: "\f001"; +} +.flat-drop-down:before { + content: "\f002"; +} +.flat-drop-up:before { + content: "\f003"; +} +.flat-chevron-left:before { + content: "\f004"; +} +.flat-chevron-right:before { + content: "\f005"; +} +.flat-chevron-down:before { + content: "\f006"; +} +.flat-chevron-up:before { + content: "\f007"; +} +.flat-arrow-left:before { + content: "\f008"; +} +.flat-arrow-right:before { + content: "\f009"; +} +.flat-arrow-down:before { + content: "\f00a"; +} +.flat-arrow-up:before { + content: "\f00b"; +} +.flat-check:before { + content: "\f00c"; +} +.flat-check-circle:before { + content: "\f00d"; +} +.flat-close:before { + content: "\f00e"; +} +.dijitIconClear:before, +.flat-close-circle:before { + content: "\f00f"; +} +.dijitEditorIconCancel:before, +.flat-close-circle-o:before { + content: "\f010"; +} +.flat-add:before { + content: "\f011"; +} +.flat-remove:before { + content: "\f012"; +} +.flat-add-circle:before { + content: "\f013"; +} +.flat-remove-circle:before { + content: "\f014"; +} +.flat-add-circle-o:before { + content: "\f015"; +} +.flat-remove-circle-o:before { + content: "\f016"; +} +.dijitIconError:before, +.flat-error:before { + content: "\f017"; +} +.flat-error-o:before { + content: "\f018"; +} +.flat-warning:before { + content: "\f019"; +} +.flat-report:before { + content: "\f01a"; +} +.flat-help:before { + content: "\f01b"; +} +.flat-no-symbol:before { + content: "\f01c"; +} +.flat-update:before { + content: "\f01d"; +} +.flat-calendar:before { + content: "\f01e"; +} +.flat-clock:before { + content: "\f01f"; +} +.dijitFolderClosed:before, +.dijitIconFolderClosed:before, +.flat-folder:before { + content: "\f020"; +} +.dijitFolderOpened:before, +.dijitIconFolderOpen:before, +.flat-folder-open:before { + content: "\f021"; +} +.dijitIconEdit:before, +.flat-edit:before { + content: "\f022"; +} +.dijitIconSave:before, +.dijitEditorIconSave:before, +.flat-save:before { + content: "\f023"; +} +.dijitIconPrint:before, +.dijitEditorIconPrint:before, +.flat-print:before { + content: "\f024"; +} +.dijitIconDelete:before, +.dijitEditorIconDelete:before, +.flat-delete:before { + content: "\f025"; +} +.dijitLeaf:before, +.flat-page:before { + content: "\f026"; +} +.flat-page-o:before { + content: "\f027"; +} +.flat-page-add:before { + content: "\f028"; +} +.flat-page-remove:before { + content: "\f029"; +} +.flat-page-add-o:before { + content: "\f02a"; +} +.flat-page-remove-o:before { + content: "\f02b"; +} +.dijitIconFile:before, +.flat-file:before { + content: "\f02c"; +} +.dijitIconMail:before, +.flat-mail:before { + content: "\f02d"; +} +.dijitIconDatabase:before, +.flat-storage:before { + content: "\f02e"; +} +.dijitIconConfigure:before, +.flat-settings:before { + content: "\f02f"; +} +.dijitIconSearch:before, +.flat-search:before { + content: "\f030"; +} +.dijitIconBookmark:before, +.flat-bookmark:before { + content: "\f031"; +} +.flat-menu:before { + content: "\f032"; +} +.dijitIconApplication:before, +.flat-application:before { + content: "\f033"; +} +.dijitIconKey:before, +.flat-key:before { + content: "\f034"; +} +.dijitIconTable:before, +.dijitEditorIconInsertTable:before, +.flat-table:before { + content: "\f035"; +} +.flat-grid:before { + content: "\f036"; +} +.dijitIconChart:before, +.flat-chart:before { + content: "\f037"; +} +.dijitIconFilter:before, +.flat-filter:before { + content: "\f038"; +} +.dijitIconFunction:before, +.flat-function:before { + content: "\f039"; +} +.flat-user:before { + content: "\f03a"; +} +.dijitIconUsers:before, +.flat-users:before { + content: "\f03b"; +} +.dijitIconConnector:before, +.flat-connector:before { + content: "\f03c"; +} +.dijitIconDocuments:before, +.flat-documents:before { + content: "\f03d"; +} +.dijitIconEditProperty:before, +.flat-edit-property:before { + content: "\f03e"; +} +.dijitIconTask:before, +.flat-task:before { + content: "\f03f"; +} +.dijitIconNewTask:before, +.flat-task-new:before { + content: "\f040"; +} +.dijitIconEditTask:before, +.flat-task-edit:before { + content: "\f041"; +} +.dijitIconSample:before, +.flat-sample:before { + content: "\f042"; +} +.dijitIconPackage:before, +.flat-package:before { + content: "\f043"; +} +.dijitEditorIconUndo:before, +.flat-undo:before { + content: "\f044"; +} +.dijitEditorIconRedo:before, +.flat-redo:before { + content: "\f045"; +} +.dijitIconCopy:before, +.dijitEditorIconCopy:before, +.flat-copy:before { + content: "\f046"; +} +.dijitIconCut:before, +.dijitEditorIconCut:before, +.flat-cut:before { + content: "\f047"; +} +.dijitEditorIconPaste:before, +.flat-paste:before { + content: "\f048"; +} +.dijitEditorIconBold:before, +.flat-bold:before { + content: "\f049"; +} +.dijitEditorIconItalic:before, +.flat-italic:before { + content: "\f04a"; +} +.dijitEditorIconUnderline:before, +.flat-underline:before { + content: "\f04b"; +} +.dijitEditorIconStrikethrough:before, +.flat-strikethrough:before { + content: "\f04c"; +} +.dijitEditorIconRemoveFormat:before, +.flat-clear-format:before { + content: "\f04d"; +} +.flat-quote:before { + content: "\f04e"; +} +.dijitEditorIconSuperscript:before, +.flat-superscript:before { + content: "\f04f"; +} +.dijitEditorIconSubscript:before, +.flat-subscript:before { + content: "\f050"; +} +.dijitEditorIconForeColor:before, +.flat-color-text:before { + content: "\f051"; +} +.dijitEditorIconBackColor:before, +.flat-color-fill:before { + content: "\f052"; +} +.dijitEditorIconHiliteColor:before, +.flat-color-highlight:before { + content: "\f053"; +} +.flat-font-size:before { + content: "\f054"; +} +.dijitEditorIconJustifyCenter:before, +.flat-align-center:before { + content: "\f055"; +} +.dijitEditorIconJustifyFull:before, +.flat-align-justify:before { + content: "\f056"; +} +.dijitEditorIconJustifyLeft:before, +.flat-align-left:before { + content: "\f057"; +} +.dijitEditorIconJustifyRight:before, +.flat-align-right:before { + content: "\f058"; +} +.dijitEditorIconIndent:before, +.flat-indent:before { + content: "\f059"; +} +.dijitEditorIconOutdent:before, +.flat-outdent:before { + content: "\f05a"; +} +.flat-sort:before { + content: "\f05b"; +} +.dijitEditorIconSpace:before, +.flat-keyboard-space:before { + content: "\f05c"; +} +.dijitEditorIconTabIndent:before, +.flat-keyboard-tab:before { + content: "\f05d"; +} +.dijitEditorIconInsertUnorderedList:before, +.flat-list-bullet:before { + content: "\f05e"; +} +.dijitEditorIconInsertOrderedList:before, +.flat-list-number:before { + content: "\f05f"; +} +.dijitEditorIconListBulletIndent:before, +.flat-list-bullet-indent:before { + content: "\f060"; +} +.dijitEditorIconListBulletOutdent:before, +.flat-list-bullet-outdent:before { + content: "\f061"; +} +.dijitEditorIconListNumIndent:before, +.flat-list-number-indent:before { + content: "\f062"; +} +.dijitEditorIconListNumOutdent:before, +.flat-list-number-outdent:before { + content: "\f063"; +} +.dijitEditorIconViewSource:before, +.flat-code:before { + content: "\f064"; +} +.dijitEditorIconCreateLink:before, +.flat-link:before { + content: "\f065"; +} +.dijitEditorIconUnlink:before, +.flat-unlink:before { + content: "\f066"; +} +.dijitEditorIconFullScreen:before, +.flat-fullscreen:before { + content: "\f067"; +} +.flat-fullscreen-exit:before { + content: "\f068"; +} +.dijitEditorIconInsertImage:before, +.flat-image:before { + content: "\f069"; +} +.dijitEditorIconNewPage:before, +.flat-page-new:before { + content: "\f06a"; +} +.dijitEditorIconToggleDir:before, +.flat-toggle-dir:before { + content: "\f06b"; +} +.dijitEditorIconLeftToRight:before, +.flat-left-to-right:before { + content: "\f06c"; +} +.dijitEditorIconRightToLeft:before, +.flat-right-to-left:before { + content: "\f06d"; +} +.dijitEditorIconSelectAll:before, +.flat-select-all:before { + content: "\f06e"; +} +.dijitEditorIconWikiword:before, +.flat-wikiword:before { + content: "\f06f"; +} +.icon-spin { + -webkit-animation: spin-right 2s infinite linear; + -moz-animation: spin-right 2s infinite linear; + -o-animation: spin-right 2s infinite linear; + -ms-animation: spin-right 2s infinite linear; + animation: spin-right 2s infinite linear; +} +.dijitIconLoading { + font-size: 24px; +} +.dijitIconLoading:before { + content: "\f01d"; + -webkit-animation: spin-left 2s linear infinite; + -moz-animation: spin-left 2s linear infinite; + -o-animation: spin-left 2s linear infinite; + -ms-animation: spin-left 2s linear infinite; + animation: spin-left 2s linear infinite; +} +.dj_ie8 .dijitIconLoading, +.dj_ie9 .dijitIconLoading { + background: url("images/loadingAnimation.gif") no-repeat; + height: 20px; + width: 20px; +} +.dj_ie8 .dijitIconLoading:before, +.dj_ie9 .dijitIconLoading:before { + content: ""; +} +.dijitRtl .dijitEditorIconUndo:before { + content: "\f044"; +} +.dijitRtl .dijitEditorIconRedo:before { + content: "\f044"; +} +.dijitRtl .dijitEditorIconTabIndent:before { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -o-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.dijitRtl .dijitEditorIconInsertUnorderedList, +.dijitRtl .dijitEditorIconInsertOrderedList { + -webkit-transform: scale(-1, 1); + -moz-transform: scale(-1, 1); + -o-transform: scale(-1, 1); + -ms-transform: scale(-1, 1); + transform: scale(-1, 1); +} +:root .dijitRtl .dijitEditorIconInsertUnorderedList, +:root .dijitRtl .dijitEditorIconInsertOrderedList { + filter: none; +} +@-moz-keyframes spin-right { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-webkit-keyframes spin-right { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-o-keyframes spin-right { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes spin-right { + from { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-moz-keyframes spin-left { + from { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + to { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } +} +@-webkit-keyframes spin-left { + from { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + to { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } +} +@-o-keyframes spin-left { + from { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + to { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } +} +@keyframes spin-left { + from { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -o-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } + to { + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -o-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); + } +} +.dijitReset { + margin:0; + border:0; + padding:0; + font: inherit; + /*line-height:normal;*/ + color: inherit; +} +.dj_a11y .dijitReset { + -moz-appearance: none; +} +.dijitInline { + display:inline-block; + #zoom: 1; + #display:inline; + border:0; + padding:0; + vertical-align:middle; + #vertical-align: auto; +} +table.dijitInline { + display:inline-table; + box-sizing: content-box; -moz-box-sizing: content-box; +} +.dijitHidden { + display: none !important; +} +.dijitVisible { + display: block !important; + position: relative; +} +.dj_ie6 .dijitComboBox .dijitInputContainer, +.dijitInputContainer { + #zoom: 1; + overflow: hidden; + float: none !important; + position: relative; +} +.dj_ie7 .dijitInputContainer { + float: left !important; + clear: left; + display: inline-block !important; +} +.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; +} +.dijitTextBox .dijitSpinnerButtonContainer, +.dijitTextBox .dijitArrowButtonContainer, +.dijitValidationTextBox .dijitValidationContainer { + float: right; + text-align: center; +} +.dijitSelect input.dijitInputField, +.dijitTextBox input.dijitInputField { + + padding-left: 0 !important; + padding-right: 0 !important; +} +.dijitValidationTextBox .dijitValidationContainer { + display: none; +} +.dijitTeeny { + font-size:1px; + line-height:1px; +} +.dijitOffScreen { + position: absolute !important; + left: 50% !important; + top: -10000px !important; +} +.dijitPopup { + position: absolute; + background-color: transparent; + margin: 0; + border: 0; + padding: 0; +} +.dijitPositionOnly { + padding: 0 !important; + border: 0 !important; + background-color: transparent !important; + background-image: none !important; + height: auto !important; + width: auto !important; +} +.dijitNonPositionOnly { + float: none !important; + position: static !important; + margin: 0 0 0 0 !important; + vertical-align: middle !important; +} +.dijitBackgroundIframe { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: -1; + border: 0; + padding: 0; + margin: 0; +} +.dijitDisplayNone { + display:none !important; +} +.dijitContainer { + overflow: hidden; +} +.dj_a11y .dijitIcon, +.dj_a11y div.dijitArrowButtonInner, +.dj_a11y span.dijitArrowButtonInner, +.dj_a11y img.dijitArrowButtonInner, +.dj_a11y .dijitCalendarIncrementControl, +.dj_a11y .dijitTreeExpando { + display: none; +} +.dijitSpinner div.dijitArrowButtonInner { + display: block; +} +.dj_a11y .dijitA11ySideArrow { + display: inline !important; + cursor: pointer; +} +.dj_a11y .dijitCalendarDateLabel { + padding: 1px; + border: 0px !important; +} +.dj_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel { + border-style: solid !important; + border-width: 1px !important; + padding: 0; +} +.dj_a11y .dijitCalendarDateTemplate { + padding-bottom: 0.1em !important; + border: 0px !important; +} +.dj_a11y .dijitButtonNode { + border: black outset medium !important; + + padding: 0 !important; +} +.dj_a11y .dijitArrowButton { + padding: 0 !important; +} +.dj_a11y .dijitButtonContents { + margin: 0.15em; +} +.dj_a11y .dijitTextBoxReadOnly .dijitInputField, +.dj_a11y .dijitTextBoxReadOnly .dijitButtonNode { + border-style: outset!important; + border-width: medium!important; + border-color: #999 !important; + color:#999 !important; +} +.dijitButtonNode * { + vertical-align: middle; + /*vertical-align: baseline;*/ +} +.dijitSelect .dijitArrowButtonInner, +.dijitButtonNode .dijitArrowButtonInner { + background: no-repeat center; + direction: ltr; +} +.dijitLeft { + background-position:left top; + background-repeat:no-repeat; +} +.dijitStretch { + white-space:nowrap; + background-repeat:repeat-x; +} +.dijitRight { + #display:inline; + background-position:right top; + background-repeat:no-repeat; +} +.dj_gecko .dj_a11y .dijitButtonDisabled .dijitButtonNode { + opacity: 0.5; +} +.dijitToggleButton, +.dijitButton, +.dijitDropDownButton, +.dijitComboButton { + margin: 0.2em; + vertical-align: middle; +} +.dijitButtonContents { + display: block; +} +td.dijitButtonContents { + display: table-cell; +} +.dijitButtonNode img { + vertical-align:middle; +} +.dijitToolbar .dijitComboButton { + border-collapse: separate; +} +.dijitToolbar .dijitToggleButton, +.dijitToolbar .dijitButton, +.dijitToolbar .dijitDropDownButton, +.dijitToolbar .dijitComboButton { + margin: 0; +} +.dijitToolbar .dijitButtonContents { + padding: 1px 2px; +} +.dj_webkit .dijitToolbar .dijitDropDownButton { + /*padding-left: 0.3em;*/ +} +.dj_gecko .dijitToolbar .dijitButtonNode::-moz-focus-inner { + padding:0; +} +.dijitSelect { + border:1px solid gray; +} +.dijitButtonNode { + border:1px solid gray; + margin:0; + line-height:20px; + vertical-align: middle; + #vertical-align: auto; + text-align:center; + white-space: nowrap; +} +.dj_webkit .dijitSpinner .dijitSpinnerButtonContainer { + line-height:inherit; +} +.dijitTextBox .dijitButtonNode { + border-width: 0; +} +.dijitSelect, +.dijitSelect *, +.dijitButtonNode, +.dijitButtonNode * { + cursor: pointer; +} +.dj_ie .dijitButtonNode { + zoom: 1; +} +.dj_ie .dijitButtonNode button { + overflow: visible; +} +div.dijitArrowButton { + float: right; +} +.dijitTextBox { + border: solid black 1px; + #overflow: hidden; + width: 15em; + vertical-align: middle; +} +.dijitTextBoxReadOnly, +.dijitTextBoxDisabled { + color: gray; +} +.dj_safari .dijitTextBoxDisabled input { + color: #B0B0B0; +} +.dj_safari textarea.dijitTextAreaDisabled { + color: #333; +} +.dj_gecko .dijitTextBoxReadOnly input.dijitInputField, +.dj_gecko .dijitTextBoxDisabled input { + -moz-user-input: none; +} +.dijitPlaceHolder { + color: #999; + /*font-style: italic;*/ + position: absolute; + top: 0; + left: 0; + #filter: ""; +} +.dijitTimeTextBox { + width: 8em; +} +.dijitTextBox input:focus { + outline: none; +} +.dijitTextBoxFocused { + outline: 5px -webkit-focus-ring-color; +} +.dijitSelect input, +.dijitTextBox input { + float: left; +} +.dj_ie6 input.dijitTextBox, +.dj_ie6 .dijitTextBox input { + float: none; +} +.dijitInputInner { + border:0 !important; + background-color:transparent !important; + width:100% !important; + box-shadow: none !important; + padding-left: 0 !important; + padding-right: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; +} +.dj_a11y .dijitTextBox input { + margin: 0 !important; +} +.dijitValidationTextBoxError input.dijitValidationInner, +.dijitSelect input, +.dijitTextBox input.dijitArrowButtonInner { + text-indent: -2em !important; + direction: ltr !important; + text-align: left !important; + /*height: auto !important;*/ + #text-indent: 0 !important; + #letter-spacing: -5em !important; + #text-align: right !important; +} +.dj_ie .dijitSelect input, +.dj_ie .dijitTextBox input, +.dj_ie input.dijitTextBox { + overflow-y: visible; + line-height: 20px; + height: 20px; +} +.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, +.dj_iequirks .dijitTextBox input.dijitArrowButtonInner, +.dj_iequirks .dijitTextBox input.dijitSpinnerButtonInner, +.dj_iequirks .dijitTextBox input.dijitInputInner, +.dj_iequirks input.dijitTextBox { + line-height: 100%; +} +.dj_a11y input.dijitValidationInner, +.dj_a11y input.dijitArrowButtonInner { + text-indent: 0 !important; + width: 1em !important; + text-align: left !important; + color: black !important; +} +.dijitValidationTextBoxError .dijitValidationContainer { + display: inline; + cursor: default; +} +.dijitSpinner .dijitSpinnerButtonContainer, +.dijitComboBox .dijitArrowButtonContainer, +.bootstrap .dijitSelect .dijitArrowButton { + border-width: 0 0 0 1px !important; +} +.dj_a11y .dijitSelect .dijitArrowButtonContainer, +.dijitToolbar .dijitComboBox .dijitArrowButtonContainer { + border-width: 0 !important; +} +.dijitComboBoxMenu { + list-style-type: none; +} +.dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode { + border-width: 0; +} +.dj_ie .dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode { + clear: both; +} +.dj_ie .dijitToolbar .dijitComboBox { + vertical-align: middle; +} +.dijitTextBox .dijitSpinnerButtonContainer { + width: 1em; + position: relative !important; + overflow: hidden; +} +.dijitSpinner .dijitSpinnerButtonInner { + width:1em; + visibility:hidden !important; + overflow-x:hidden; +} +.dijitComboBox .dijitButtonNode, +.dijitSpinnerButtonContainer .dijitButtonNode { + border-width: 0; +} +.dj_a11y .dijitSpinnerButtonContainer .dijitButtonNode { + border-width: 0px !important; + border-style: solid !important; +} +.dj_a11y .dijitTextBox .dijitSpinnerButtonContainer, +.dj_a11y .dijitSpinner .dijitArrowButtonInner, +.dj_a11y .dijitSpinnerButtonContainer input { + width: 1em !important; +} +.dj_a11y .dijitSpinner .dijitArrowButtonInner { + margin: 0 auto !important; +} +.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 .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { + padding-left: 0 !important; + padding-right: 0 !important; + width: 1em !important; +} +.dj_ie6 .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { + margin-left: 0.1em !important; + margin-right: 0.1em !important; + width: 1em !important; +} +.dj_iequirks .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { + margin-left: 0 !important; + margin-right: 0 !important; + width: 2em !important; +} +.dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { + padding: 0; + position: absolute !important; + right: 0; + float: none; + height: 50%; + width: 100%; + bottom: auto; + left: 0; + right: auto; +} +.dj_iequirks .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { + width: auto; +} +.dj_a11y .dijitSpinnerButtonContainer .dijitArrowButton { + overflow: visible !important; +} +.dijitSpinner .dijitSpinnerButtonContainer .dijitDownArrowButton { + top: 50%; + border-top-width: 1px !important; +} +.dijitSpinner .dijitSpinnerButtonContainer .dijitUpArrowButton { + #bottom: 50%; + top: 0; +} +.dijitSpinner .dijitArrowButtonInner { + margin: auto; + overflow-x: hidden; + /*height: 100% !important;*/ +} +.dj_iequirks .dijitSpinner .dijitArrowButtonInner { + height: auto !important; +} +.dijitSpinner .dijitArrowButtonInner .dijitInputField { + -moz-transform: scale(0.5); + -moz-transform-origin: center top; + -webkit-transform: scale(0.5); + -webkit-transform-origin: center top; + -o-transform: scale(0.5); + -o-transform-origin: center top; + transform: scale(0.5); + transform-origin: left top; + padding-top: 0; + padding-bottom: 0; + padding-left: 0 !important; + padding-right: 0 !important; + width: 100%; + visibility: hidden; +} +.dj_ie .dijitSpinner .dijitArrowButtonInner .dijitInputField { + /*zoom: 50%;*/ + display: none; +} +.dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButtonInner { + overflow: hidden; +} +.dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { + width: 100%; +} +.dj_iequirks .dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { + width: 1em; +} +.dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { + vertical-align:top; + visibility: visible; +} +.dj_a11y .dijitSpinnerButtonContainer { + width: 1em; +} +.dijitCheckBox, +.dijitRadio, +.dijitCheckBoxInput { + padding: 0; + border: 0; + width: 20px; + height: 20px; + background-position:center center; + background-repeat:no-repeat; + overflow: hidden; + cursor: pointer; +} +.dijitCheckBox input, +.dijitRadio input { + margin: 0; + padding: 0; + display: block; +} +.dijitCheckBoxInput { + opacity: 0.01; +} +.dj_ie .dijitCheckBoxInput { + filter: alpha(opacity=0); +} +.dj_a11y .dijitCheckBox, +.dj_a11y .dijitRadio { + width: auto !important; + height: auto !important; +} +.dj_a11y .dijitCheckBoxInput { + opacity: 1; + filter: none; + width: auto; + height: auto; +} +.dj_a11y .dijitFocusedLabel { + border: 1px dotted; + outline: 0px !important; +} +.dijitProgressBar { + z-index: 0; +} +.dijitProgressBarEmpty { + position:relative;overflow:hidden; + border:1px solid black; + z-index:0; +} +.dijitProgressBarFull { + position:absolute; + overflow:hidden; + z-index:-1; + top:0; + width:100%; +} +.dj_ie6 .dijitProgressBarFull { + height:1.6em; +} +.dijitProgressBarTile { + position:absolute; + overflow:hidden; + top:0; + left:0; + bottom:0; + right:0; + margin:0; + padding:0; + width: 100%; + height:auto; + background-color:#aaa; + /*background-attachment: fixed;*/ +} +.dj_a11y .dijitProgressBarTile { + border-width:2px; + border-style:solid; + background-color:transparent !important; +} +.dj_ie6 .dijitProgressBarTile { + position:static; + height:1.6em; +} +.dijitProgressBarIndeterminate .dijitProgressBarTile { + +} +.dijitProgressBarIndeterminateHighContrastImage { + display:none; +} +.dj_a11y .dijitProgressBarIndeterminate .dijitProgressBarIndeterminateHighContrastImage { + display:block; + position:absolute; + top:0; + bottom:0; + margin:0; + padding:0; + width:100%; + height:auto; +} +.dijitProgressBarLabel { + display:block; + position:static; + width:100%; + text-align:center; + background-color:transparent !important; +} +.dijitTooltip { + position: absolute; + z-index: 2000; + display: block; + + 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; +} +.dj_a11y .dijitTooltipConnector { + display: none; +} +.dijitTooltipData { + display:none; +} +.dijitLayoutContainer { + position: relative; + display: block; + overflow: hidden; +} +.dijitAlignTop, +.dijitAlignBottom, +.dijitAlignLeft, +.dijitAlignRight { + position: absolute; + overflow: hidden; +} +body .dijitAlignClient { position: absolute; } +.dijitBorderContainer, .dijitBorderContainerNoGutter { + position:relative; + overflow: hidden; + z-index: 0; +} +.dijitBorderContainerPane, +.dijitBorderContainerNoGutterPane { + position: absolute !important; + z-index: 2; +} +.dijitBorderContainer > .dijitTextArea { + resize: none; +} +.dijitGutter { + position: absolute; + font-size: 1px; +} +.dijitSplitter { + position: absolute; + overflow: hidden; + z-index: 10; + background-color: #fff; + border-color: gray; + border-style: solid; + border-width: 0; +} +.dj_ie .dijitSplitter { + z-index: 1; +} +.dijitSplitterActive { + z-index: 11 !important; +} +.dijitSplitterCover { + position:absolute; + z-index:-1; + top:0; + left:0; + width:100%; + height:100%; +} +.dijitSplitterCoverActive { + z-index:3 !important; +} +.dj_ie .dijitSplitterCover { + background: white; + filter: alpha(opacity=0); +} +.dijitSplitterH { + height: 7px; + border-top:1px; + border-bottom:1px; + cursor: row-resize; +} +.dijitSplitterV { + width: 7px; + border-left:1px; + border-right:1px; + cursor: col-resize; +} +.dijitSplitContainer { + position: relative; + overflow: hidden; + display: block; +} +.dijitSplitPane { + position: absolute; +} +.dijitSplitContainerSizerH, +.dijitSplitContainerSizerV { + position:absolute; + font-size: 1px; + background-color: ThreeDFace; + border: 1px solid; + 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 { + font-size: 1px; + background-color: ThreeDShadow; + -moz-opacity: 0.5; + opacity: 0.5; + filter: Alpha(Opacity=50); + margin: 0; +} +.dijitSplitContainerSizerH, .dijitSplitContainerVirtualSizerH { + cursor: col-resize; +} +.dijitSplitContainerSizerV, .dijitSplitContainerVirtualSizerV { + cursor: row-resize; +} +.dj_a11y .dijitSplitterH { + border-top:1px solid #d3d3d3 !important; + border-bottom:1px solid #d3d3d3 !important; +} +.dj_a11y .dijitSplitterV { + border-left:1px solid #d3d3d3 !important; + border-right:1px solid #d3d3d3 !important; +} +.dijitContentPane { + display: block; + overflow: auto; +} +.dijitContentPaneSingleChild { + overflow: hidden; +} +.dijitContentPaneLoading .dijitIconLoading, +.dijitContentPaneError .dijitIconError { + margin-right: 9px; +} +.dijitTitlePane { + display: block; + overflow: hidden; +} +.dijitTitlePaneTitle { + cursor: pointer; +} +.dijitFixedOpen, .dijitFixedClosed { + cursor: default; +} +.dijitFixedOpen .dijitArrowNode, .dijitFixedOpen .dijitArrowNodeInner, +.dijitFixedClosed .dijitArrowNode, .dijitFixedClosed .dijitArrowNodeInner{ + display: none; +} +.dijitTitlePaneTitle * { + vertical-align: middle; +} +.dijitTitlePane .dijitArrowNodeInner { + display: none; +} +.dj_a11y .dijitTitlePane .dijitArrowNodeInner { + display:inline !important; + font-family: monospace; +} +.dj_a11y .dijitTitlePane .dijitArrowNode { + display:none; +} +.dj_ie6 .dijitTitlePaneContentOuter, +.dj_ie6 .dijitTitlePane .dijitTitlePaneTitle { + zoom: 1; +} +.dijitColorPalette { + border: 1px solid #999; + background: #fff; + position: relative; +} +.dijitColorPalette .dijitPaletteTable { + padding: 2px 3px 3px 3px; + position: relative; + overflow: hidden; + outline: 0; + border-collapse: separate; +} +.dj_ie6 .dijitColorPalette .dijitPaletteTable, +.dj_ie7 .dijitColorPalette .dijitPaletteTable, +.dj_iequirks .dijitColorPalette .dijitPaletteTable { + padding: 0; + margin: 2px 3px 3px 3px; +} +.dijitColorPalette .dijitPaletteCell { + font-size: 1px; + vertical-align: middle; + text-align: center; + background: none; +} +.dijitColorPalette .dijitPaletteImg { + padding: 1px; + border: 1px solid #999; + margin: 2px 1px; + cursor: default; + font-size: 1px; +} +.dj_gecko .dijitColorPalette .dijitPaletteImg { + padding-bottom: 0; +} +.dijitColorPalette .dijitColorPaletteSwatch { + width: 14px; + height: 12px; +} +.dijitPaletteTable td { + padding: 0; +} +.dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg { + border: 1px solid #000; +} +.dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg, +.dijitColorPalette .dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg { + border: 2px solid #000; + margin: 1px 0; +} +.dj_a11y .dijitColorPalette .dijitPaletteTable, +.dj_a11y .dijitColorPalette .dijitPaletteTable * { + background-color: transparent !important; +} +.dijitAccordionContainer { + border:1px solid #b7b7b7; + border-top:0 !important; +} +.dijitAccordionTitle { + cursor: pointer; +} +.dijitAccordionTitleSelected { + cursor: default; +} +.dijitAccordionTitle .arrowTextUp, +.dijitAccordionTitle .arrowTextDown { + display: none; +} +.dj_a11y .dijitAccordionTitle .arrowTextUp, +.dj_a11y .dijitAccordionTitleSelected .arrowTextDown { + display: inline; +} +.dj_a11y .dijitAccordionTitleSelected .arrowTextUp { + display: none; +} +.dijitAccordionChildWrapper { + overflow: hidden; +} +.dijitCalendarContainer { + width: auto; +} +.dijitCalendarContainer th, .dijitCalendarContainer td { + padding: 1px 2px 2px; + vertical-align: middle; +} +.dijitCalendarYearLabel { + white-space: nowrap; +} +.dijitCalendarNextYear { + margin:0 0 0 0.55em; +} +.dijitCalendarPreviousYear { + margin:0 0.55em 0 0; +} +.dijitCalendarIncrementControl { + vertical-align: middle; +} +.dijitCalendarIncrementControl, +.dijitCalendarDateTemplate, +.dijitCalendarMonthLabel, +.dijitCalendarPreviousYear, +.dijitCalendarNextYear { + cursor: pointer; +} +.dijitCalendarDisabledDate { + color: gray; + text-decoration: line-through; + cursor: default; +} +.dijitSpacer { + position: relative; + height: 1px; + overflow: hidden; + visibility: hidden; +} +.dijitCalendarMonthMenu .dijitCalendarMonthLabel { + text-align:center; +} +.dijitMenu { + border:1px solid black; + background-color:white; +} +.dijitMenuTable { + border-collapse:collapse; + border-width:0; + background-color:white; +} +.dj_webkit .dijitMenuTable td[colspan="2"]{ + border-right:hidden; +} +.dijitMenuItem { + text-align: left; + white-space: nowrap; + padding:.1em .2em; + cursor:pointer; +} +.dijitMenuItem:focus { + outline: none +} +.dijitMenuPassive .dijitMenuItemHover, +.dijitMenuItemSelected { + background-color:black; + color:white; +} +.dijitMenuItemIcon, .dijitMenuExpand { + background-repeat: no-repeat; +} +.dijitMenuItemDisabled * { + /* flat theme styles disabled menu items */ + /*opacity:0.5;*/ + cursor:default; +} +.dj_ie .dj_a11y .dijitMenuItemDisabled, +.dj_ie .dj_a11y .dijitMenuItemDisabled *, +.dj_ie .dijitMenuItemDisabled * { + color: gray; + filter: alpha(opacity=35); +} +.dijitMenuItemLabel { + position: relative; + vertical-align: middle; +} +.dj_a11y .dijitMenuItemSelected { + border: 1px dotted black !important; +} +.dj_a11y .dijitMenuItemSelected .dijitMenuItemLabel { + border-width: 1px; + border-style: solid; +} +.dj_ie8 .dj_a11y .dijitMenuItemLabel { + position:static; +} +.dijitMenuExpandA11y { + display: none; +} +.dj_a11y .dijitMenuExpandA11y { + display: inline; +} +.dijitMenuSeparator td { + border: 0; + padding: 0; +} +.dijitMenuSeparatorTop { + height: 50%; + margin: 0; + margin-top:3px; + font-size: 1px; +} +.dijitMenuSeparatorBottom { + height: 50%; + margin: 0; + margin-bottom:3px; + font-size: 1px; +} +.dijitCheckedMenuItemIconChar { + vertical-align: middle; + visibility:hidden; +} +.dijitCheckedMenuItemChecked .dijitCheckedMenuItemIconChar { + visibility: visible; +} +.dj_a11y .dijitCheckedMenuItemIconChar { + display:inline !important; +} +.dj_a11y .dijitCheckedMenuItemIcon { + display: none; +} +.dj_ie .dj_a11y .dijitMenuBar .dijitMenuItem { + + margin: 0; +} +.dijitStackController .dijitToggleButtonChecked * { + cursor: default; +} +.dijitTabContainer { + z-index: 0; + overflow: visible; +} +.dj_ie6 .dijitTabContainer { + overflow: hidden; +} +.dijitTabContainerNoLayout { + width: 100%; +} +.dijitTabContainerBottom-tabs, +.dijitTabContainerTop-tabs, +.dijitTabContainerLeft-tabs, +.dijitTabContainerRight-tabs { + z-index: 1; + overflow: visible !important; +} +.dijitTabController { + z-index: 1; +} +.dijitTabContainerBottom-container, +.dijitTabContainerTop-container, +.dijitTabContainerLeft-container, +.dijitTabContainerRight-container { + z-index:0; + overflow: hidden; + border: 1px solid black; +} +.nowrapTabStrip { + width: 50000px; + display: block; + position: relative; + text-align: left; + z-index: 1; +} +.dijitTabListWrapper { + overflow: hidden; + z-index: 1; +} +.dj_a11y .tabStripButton img { + display: none; +} +.dijitTabContainerTop-tabs { + border-bottom: 1px solid black; +} +.dijitTabContainerTop-container { + border-top: 0; +} +.dijitTabContainerLeft-tabs { + border-right: 1px solid black; + float: left; +} +.dijitTabContainerLeft-container { + border-left: 0; +} +.dijitTabContainerBottom-tabs { + border-top: 1px solid black; +} +.dijitTabContainerBottom-container { + border-bottom: 0; +} +.dijitTabContainerRight-tabs { + border-left: 1px solid black; + float: left; +} +.dijitTabContainerRight-container { + border-right: 0; +} +div.dijitTabDisabled, .dj_ie div.dijitTabDisabled { + cursor: auto; +} +.dijitTab { + position:relative; + cursor:pointer; + white-space:nowrap; + z-index:3; +} +.dijitTab * { + vertical-align: middle; +} +.dijitTabChecked { + cursor: default; +} +.dijitTabContainerTop-tabs .dijitTab { + top: 1px; +} +.dijitTabContainerBottom-tabs .dijitTab { + top: -1px; +} +.dijitTabContainerLeft-tabs .dijitTab { + left: 1px; +} +.dijitTabContainerRight-tabs .dijitTab { + left: -1px; +} +.dijitTabContainerTop-tabs .dijitTab, +.dijitTabContainerBottom-tabs .dijitTab { + display:inline-block; + #zoom: 1; + #display:inline; +} +.tabStripButton { + z-index: 12; +} +.dijitTabButtonDisabled .tabStripButton { + display: none; +} +.dijitTabCloseButton { + margin-left: 1em; +} +.dijitTabCloseText { + display:none; +} +.dijitTab .tabLabel { + /*min-height: 16px;*/ + display: inline-block; +} +.dijitNoIcon { + display: none; +} +.dj_ie6 .dijitTab .dijitNoIcon { + display: inline; + height: 15px; + width: 1px; +} +.dj_a11y .dijitTabCloseButton { + background-image: none !important; + width: auto !important; + height: auto !important; +} +.dj_a11y .dijitTabCloseText { + display: inline; +} +.dijitTabPane, +.dijitStackContainer-child, +.dijitAccordionContainer-child { + border: none !important; +} +.dijitInlineEditBoxDisplayMode { + border: 1px solid transparent; + cursor: text; +} +.dj_a11y .dijitInlineEditBoxDisplayMode, +.dj_ie6 .dijitInlineEditBoxDisplayMode { + border: none; +} +.dijitInlineEditBoxDisplayModeHover, +.dj_a11y .dijitInlineEditBoxDisplayModeHover, +.dj_ie6 .dijitInlineEditBoxDisplayModeHover { + background-color: #e2ebf2; + border: solid 1px black; +} +.dijitInlineEditBoxDisplayModeDisabled { + cursor: default; +} +.dijitTree { + overflow: auto; +} +.dijitTreeContainer { + float: left; +} +.dijitTreeIndent { + width: 19px; +} +.dijitTreeRow, .dijitTreeContent { + white-space: nowrap; +} +.dj_ie .dijitTreeLabel:focus { + outline: 1px dotted black; +} +.dijitTreeRow img { + vertical-align: middle; +} +.dijitTreeContent { + cursor: default; +} +.dijitExpandoText { + display: none; +} +.dj_a11y .dijitExpandoText { + display: inline; + padding-left: 10px; + padding-right: 10px; + font-family: monospace; + border-style: solid; + border-width: thin; + cursor: pointer; +} +.dijitTreeLabel { + margin: 0 4px; +} +.dijitDialog { + position: absolute; + z-index: 999; + overflow: hidden; +} +.dijitDialogTitleBar { + cursor: move; +} +.dijitDialogFixed .dijitDialogTitleBar { + cursor:default; +} +.dijitDialogCloseIcon { + cursor: pointer; +} +.dijitDialogPaneContent { + -webkit-overflow-scrolling: touch; +} +.dijitDialogUnderlayWrapper { + position: absolute; + left: 0; + top: 0; + z-index: 998; + display: none; + background: transparent !important; +} +.dijitDialogUnderlay { + background: #eee; + opacity: 0.5; +} +.dj_ie .dijitDialogUnderlay { + filter: alpha(opacity=50); +} +.dj_a11y .dijitSpinnerButtonContainer, +.dj_a11y .dijitDialog { + opacity: 1 !important; + background-color: white !important; +} +.dijitDialog .closeText { + /*display:none;*/ + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; + display: block; + color: #000000; + text-shadow: 0 1px 0 #FFFFFF; + position:absolute; +} +.dj_a11y .dijitDialog .closeText { + display:inline; +} +.dijitSliderMoveable { + z-index:99; + position:absolute !important; + display:block; + vertical-align:middle; +} +.dijitSliderMoveableH { + right:0; +} +.dijitSliderMoveableV { + right:50%; +} +.dj_a11y div.dijitSliderImageHandle, +.dijitSliderImageHandle { + margin:0; + padding:0; + position:relative !important; + border:8px solid gray; + width:0; + height:0; + cursor: pointer; +} +.dj_iequirks .dj_a11y .dijitSliderImageHandle { + font-size: 0; +} +.dj_ie7 .dijitSliderImageHandle { + overflow: hidden; +} +.dj_ie7 .dj_a11y .dijitSliderImageHandle { + overflow: visible; +} +.dj_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; + vertical-align:top; + text-align:left; +} +.dijitSliderProgressBarH { + position:absolute !important; + 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; +} +.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; +} +.dijitSliderDecorationC, +.dijitSliderDecorationV { + position: relative; +} +.dijitSliderDecorationH { + width: 100%; +} +.dijitSliderDecorationV { + height: 100%; + white-space: nowrap; +} +.dijitSliderButton { + font-family:monospace; + margin:0; + padding:0; + display:block; +} +.dj_a11y .dijitSliderButtonInner { + visibility:visible !important; +} +.dijitSliderButtonContainer { + text-align:center; + 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; +} +.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 { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.dijitRuleMarkV { + height:0; + border-right-width:0 !important; + /*border-bottom-width:0 !important;*/ + border-left-width:0 !important; + width:100%; + left:0; +} +.dj_ie .dijitRuleLabelContainerV { + margin-top:-.55em; +} +.dj_a11y .dijitSliderReadOnly, +.dj_a11y .dijitSliderDisabled { + opacity:0.6; +} +.dj_ie .dj_a11y .dijitSliderReadOnly .dijitSliderBar, +.dj_ie .dj_a11y .dijitSliderDisabled .dijitSliderBar { + filter: alpha(opacity=40); +} +.dj_a11y .dijitSlider .dijitSliderButtonContainer div { + font-family: monospace; + font-size: 1em; + line-height: 1em; + height: auto; + width: auto; + margin: 0 4px; +} +.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; +} +.dijitTextArea { + width:100%; + overflow-y: auto; +} +.dijitTextArea[cols] { + width:auto; +} +.dj_ie .dijitTextAreaCols { + width:auto; +} +.dijitExpandingTextArea { + + resize: none; +} +.dijitToolbarSeparator { + height: 18px; + width: 5px; + padding: 0 1px; + margin: 0; +} +.dijitIEFixedToolbar { + position:absolute; + top: expression(eval((document.documentElement||document.body).scrollTop)); +} +.dijitEditor { + display: block; +} +.dijitEditorDisabled, +.dijitEditorReadOnly { + color: gray; +} +.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; + cursor:pointer; +} +.dijitTimePickerItemDisabled { + color:gray; + text-decoration:line-through; +} +.dj_a11y .dijitTimePickerItemSelected .dijitTimePickerItemInner { + border: solid 4px black; +} +.dj_a11y .dijitTimePickerItemHover .dijitTimePickerItemInner { + border: dashed 4px black; +} +.dijitToggleButtonIconChar { + + display:none !important; +} +.dj_a11y .dijitToggleButton .dijitToggleButtonIconChar { + display:inline !important; + visibility:hidden; +} +.dj_ie6 .dijitToggleButtonIconChar, .dj_ie6 .tabStripButton .dijitButtonText { + font-family: "Arial Unicode MS"; +} +.dj_a11y .dijitToggleButtonChecked .dijitToggleButtonIconChar { + display: inline !important; + visibility:visible !important; +} +.dijitArrowButtonChar { + display:none !important; +} +.dj_a11y .dijitArrowButtonChar { + display:inline !important; +} +.dj_a11y .dijitDropDownButton .dijitArrowButtonInner, +.dj_a11y .dijitComboButton .dijitArrowButtonInner { + display:none !important; +} +.dj_a11y .dijitSelect { + border-collapse: separate !important; + border-width: 1px; + border-style: solid; +} +.dj_ie .dijitSelect { + vertical-align: middle; +} +.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; +} +.dijitToolbar .dijitSelect { + margin: 0; +} +.dj_webkit .dijitToolbar .dijitSelect { + padding-left: 0.3em; +} +.dijitSelect .dijitButtonContents { + padding: 0; + white-space: nowrap; + text-align: left; + border-style: none solid none none; + border-width: 0px; +} +.dijitSelectFixedWidth .dijitButtonContents { + width: 100%; +} +.dijitSelectMenu .dijitMenuItemIcon { + display:none; +} +.dj_ie6 .dijitSelectMenu .dijitMenuItemLabel, +.dj_ie7 .dijitSelectMenu .dijitMenuItemLabel { + position: static; +} +.dijitSelectLabel * +{ + vertical-align: baseline; +} +.dijitSelectSelectedOption * { + font-weight: normal; +} +.dijitSelectMenu { + border-width: 1px; +} +.dijitSelectMenu .dijitMenuTable { + margin: 0; + background-color: transparent; +} +.dijitForceStatic { + position: static !important; +} +.dijitReadOnly *, +.dijitDisabled *, +.dijitReadOnly, +.dijitDisabled { + cursor: default; +} +.dojoDndItem { + padding: 2px; + -webkit-touch-callout: none; + -webkit-user-select: none; +} +.dojoDndHorizontal .dojoDndItem { + #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; +} +.dijitFocused .dijitMenuItemShortcutKey { + text-decoration: underline; +} +.dijitRtl .dijitOffScreen { + /* align on the right side rather than the left so no horizontal scroll bar shown */ + left: auto !important; + right: -10000px !important; +} + +.dijitRtl .dijitPlaceHolder { + left: auto; + right: 0; +} + +/* Menu */ + +.dijitMenuItemRtl { + text-align: right; +} + +/* Button */ + +.dj_iequirks .dijitComboButtonRtl button { + /* workaround bug where label invisible (themeTesterQuirk.html?dir=rtl) */ + float:left; +} +.dj_ie .dijitTextBoxRtl .dijitInputContainer { + clear: right; +} + +/* TextBox, ComboBox, Spinner */ + +.dijitTextBoxRtl .dijitValidationContainer, +.dijitTextBoxRtl .dijitSpinnerButtonContainer, +.dijitComboBoxRtl .dijitArrowButtonContainer { + /* combobox and spinner: line between the input area and the drop down button */ + border-right-width: 1px !important; + border-left-width: 0 !important; +} + +.dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton { + right: 0; + left: auto; +} + +.dijitSelectRtl .dijitButtonText { + float: right; +} + +.dijitTextBoxRtl .dijitSpinnerButtonContainer, +.dijitValidationTextBoxRtl .dijitValidationContainer, +.dijitTextBoxRtl .dijitArrowButtonContainer { + float: left; +} + +div.dijitNumberTextBoxRtl { + text-align: right; +} + +/* Calendar */ + +.dijitCalendarRtl .dijitCalendarNextYear { + margin:0 0.55em 0 0; +} + +.dijitCalendarRtl .dijitCalendarPreviousYear { + margin:0 0 0 0.55em; +} + + +/* Slider */ + +.dijitSliderRtl .dijitSliderImageHandleV { + left:auto; +} + +.dijitSliderRtl .dijitSliderImageHandleH { + left:-50%; +} + +.dijitSliderRtl .dijitSliderMoveableH { + right:auto; + left:0; +} + +.dijitSliderRtl .dijitRuleContainerV { + float:right; +} + +.dj_ie .dijitSliderRtl .dijitRuleContainerV { + text-align:right; +} + +.dj_ie .dijitSliderRtl .dijitRuleLabelV { + text-align:left; +} + +.dj_ie .dijitSliderRtl .dijitRuleLabelH { + zoom:1; +} + +.dijitSliderRtl .dijitSliderProgressBarH { + /* workarounds for IE and FF */ + float:right; + right:0; + left:auto; +} + +/* ContentPane*/ + +.dijitRtl .dijitContentPaneLoading .dijitIconLoading, +.dijitRtl .dijitContentPaneError .dijitIconError { + margin-right: 0; + margin-left: 9px; +} + +/* TabContainer */ + +.dijitTabControllerRtl .nowrapTabStrip { + text-align: right; /* just in case ancestor has non-standard setting */ +} +.dijitTabRtl .dijitTabCloseButton { + margin-left: 0; + margin-right: 1em; +} +.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 { + width:100%; +} + + +/* ColorPalette */ +.dijitColorPaletteRtl .dijitColorPaletteUnder { + /* needed in RTL mode when DropDownButton expands the ColorPalette beyond it's natural width */ + left: auto; + right: 0; +} + +/* Select */ +.dijitSelectRtl .dijitButtonContents { + border-style: none none none solid; + text-align: right; +} + +/* Tree */ + +.dijitTreeRtl .dijitTreeContainer { + float: right; /* for correct highlighting during horizontal scroll, see #16132 */ +} + +/* 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; +} +.dijitReset { + margin:0; + border:0; + padding:0; + font: inherit; + /*line-height:normal;*/ + color: inherit; +} +.dj_a11y .dijitReset { + -moz-appearance: none; +} +.dijitInline { + display:inline-block; + #zoom: 1; + #display:inline; + border:0; + padding:0; + vertical-align:middle; + #vertical-align: auto; +} +table.dijitInline { + display:inline-table; + box-sizing: content-box; -moz-box-sizing: content-box; +} +.dijitHidden { + display: none !important; +} +.dijitVisible { + display: block !important; + position: relative; +} +.dj_ie6 .dijitComboBox .dijitInputContainer, +.dijitInputContainer { + #zoom: 1; + overflow: hidden; + float: none !important; + position: relative; +} +.dj_ie7 .dijitInputContainer { + float: left !important; + clear: left; + display: inline-block !important; +} +.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; +} +.dijitTextBox .dijitSpinnerButtonContainer, +.dijitTextBox .dijitArrowButtonContainer, +.dijitValidationTextBox .dijitValidationContainer { + float: right; + text-align: center; +} +.dijitSelect input.dijitInputField, +.dijitTextBox input.dijitInputField { + + padding-left: 0 !important; + padding-right: 0 !important; +} +.dijitValidationTextBox .dijitValidationContainer { + display: none; +} +.dijitTeeny { + font-size:1px; + line-height:1px; +} +.dijitOffScreen { + position: absolute !important; + left: 50% !important; + top: -10000px !important; +} +.dijitPopup { + position: absolute; + background-color: transparent; + margin: 0; + border: 0; + padding: 0; +} +.dijitPositionOnly { + padding: 0 !important; + border: 0 !important; + background-color: transparent !important; + background-image: none !important; + height: auto !important; + width: auto !important; +} +.dijitNonPositionOnly { + float: none !important; + position: static !important; + margin: 0 0 0 0 !important; + vertical-align: middle !important; +} +.dijitBackgroundIframe { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: -1; + border: 0; + padding: 0; + margin: 0; +} +.dijitDisplayNone { + display:none !important; +} +.dijitContainer { + overflow: hidden; +} +.dj_a11y .dijitIcon, +.dj_a11y div.dijitArrowButtonInner, +.dj_a11y span.dijitArrowButtonInner, +.dj_a11y img.dijitArrowButtonInner, +.dj_a11y .dijitCalendarIncrementControl, +.dj_a11y .dijitTreeExpando { + display: none; +} +.dijitSpinner div.dijitArrowButtonInner { + display: block; +} +.dj_a11y .dijitA11ySideArrow { + display: inline !important; + cursor: pointer; +} +.dj_a11y .dijitCalendarDateLabel { + padding: 1px; + border: 0px !important; +} +.dj_a11y .dijitCalendarSelectedDate .dijitCalendarDateLabel { + border-style: solid !important; + border-width: 1px !important; + padding: 0; +} +.dj_a11y .dijitCalendarDateTemplate { + padding-bottom: 0.1em !important; + border: 0px !important; +} +.dj_a11y .dijitButtonNode { + border: black outset medium !important; + + padding: 0 !important; +} +.dj_a11y .dijitArrowButton { + padding: 0 !important; +} +.dj_a11y .dijitButtonContents { + margin: 0.15em; +} +.dj_a11y .dijitTextBoxReadOnly .dijitInputField, +.dj_a11y .dijitTextBoxReadOnly .dijitButtonNode { + border-style: outset!important; + border-width: medium!important; + border-color: #999 !important; + color:#999 !important; +} +.dijitButtonNode * { + vertical-align: middle; + /*vertical-align: baseline;*/ +} +.dijitSelect .dijitArrowButtonInner, +.dijitButtonNode .dijitArrowButtonInner { + background: no-repeat center; + direction: ltr; +} +.dijitLeft { + background-position:left top; + background-repeat:no-repeat; +} +.dijitStretch { + white-space:nowrap; + background-repeat:repeat-x; +} +.dijitRight { + #display:inline; + background-position:right top; + background-repeat:no-repeat; +} +.dj_gecko .dj_a11y .dijitButtonDisabled .dijitButtonNode { + opacity: 0.5; +} +.dijitToggleButton, +.dijitButton, +.dijitDropDownButton, +.dijitComboButton { + margin: 0.2em; + vertical-align: middle; +} +.dijitButtonContents { + display: block; +} +td.dijitButtonContents { + display: table-cell; +} +.dijitButtonNode img { + vertical-align:middle; +} +.dijitToolbar .dijitComboButton { + border-collapse: separate; +} +.dijitToolbar .dijitToggleButton, +.dijitToolbar .dijitButton, +.dijitToolbar .dijitDropDownButton, +.dijitToolbar .dijitComboButton { + margin: 0; +} +.dijitToolbar .dijitButtonContents { + padding: 1px 2px; +} +.dj_webkit .dijitToolbar .dijitDropDownButton { + /*padding-left: 0.3em;*/ +} +.dj_gecko .dijitToolbar .dijitButtonNode::-moz-focus-inner { + padding:0; +} +.dijitSelect { + border:1px solid gray; +} +.dijitButtonNode { + border:1px solid gray; + margin:0; + line-height:20px; + vertical-align: middle; + #vertical-align: auto; + text-align:center; + white-space: nowrap; +} +.dj_webkit .dijitSpinner .dijitSpinnerButtonContainer { + line-height:inherit; +} +.dijitTextBox .dijitButtonNode { + border-width: 0; +} +.dijitSelect, +.dijitSelect *, +.dijitButtonNode, +.dijitButtonNode * { + cursor: pointer; +} +.dj_ie .dijitButtonNode { + zoom: 1; +} +.dj_ie .dijitButtonNode button { + overflow: visible; +} +div.dijitArrowButton { + float: right; +} +.dijitTextBox { + border: solid black 1px; + #overflow: hidden; + width: 15em; + vertical-align: middle; +} +.dijitTextBoxReadOnly, +.dijitTextBoxDisabled { + color: gray; +} +.dj_safari .dijitTextBoxDisabled input { + color: #B0B0B0; +} +.dj_safari textarea.dijitTextAreaDisabled { + color: #333; +} +.dj_gecko .dijitTextBoxReadOnly input.dijitInputField, +.dj_gecko .dijitTextBoxDisabled input { + -moz-user-input: none; +} +.dijitPlaceHolder { + color: #999; + /*font-style: italic;*/ + position: absolute; + top: 0; + left: 0; + #filter: ""; +} +.dijitTimeTextBox { + width: 8em; +} +.dijitTextBox input:focus { + outline: none; +} +.dijitTextBoxFocused { + outline: 5px -webkit-focus-ring-color; +} +.dijitSelect input, +.dijitTextBox input { + float: left; +} +.dj_ie6 input.dijitTextBox, +.dj_ie6 .dijitTextBox input { + float: none; +} +.dijitInputInner { + border:0 !important; + background-color:transparent !important; + width:100% !important; + box-shadow: none !important; + padding-left: 0 !important; + padding-right: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; +} +.dj_a11y .dijitTextBox input { + margin: 0 !important; +} +.dijitValidationTextBoxError input.dijitValidationInner, +.dijitSelect input, +.dijitTextBox input.dijitArrowButtonInner { + text-indent: -2em !important; + direction: ltr !important; + text-align: left !important; + /*height: auto !important;*/ + #text-indent: 0 !important; + #letter-spacing: -5em !important; + #text-align: right !important; +} +.dj_ie .dijitSelect input, +.dj_ie .dijitTextBox input, +.dj_ie input.dijitTextBox { + overflow-y: visible; + line-height: 20px; + height: 20px; +} +.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, +.dj_iequirks .dijitTextBox input.dijitArrowButtonInner, +.dj_iequirks .dijitTextBox input.dijitSpinnerButtonInner, +.dj_iequirks .dijitTextBox input.dijitInputInner, +.dj_iequirks input.dijitTextBox { + line-height: 100%; +} +.dj_a11y input.dijitValidationInner, +.dj_a11y input.dijitArrowButtonInner { + text-indent: 0 !important; + width: 1em !important; + text-align: left !important; + color: black !important; +} +.dijitValidationTextBoxError .dijitValidationContainer { + display: inline; + cursor: default; +} +.dijitSpinner .dijitSpinnerButtonContainer, +.dijitComboBox .dijitArrowButtonContainer, +.bootstrap .dijitSelect .dijitArrowButton { + border-width: 0 0 0 1px !important; +} +.dj_a11y .dijitSelect .dijitArrowButtonContainer, +.dijitToolbar .dijitComboBox .dijitArrowButtonContainer { + border-width: 0 !important; +} +.dijitComboBoxMenu { + list-style-type: none; +} +.dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode { + border-width: 0; +} +.dj_ie .dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitButtonNode { + clear: both; +} +.dj_ie .dijitToolbar .dijitComboBox { + vertical-align: middle; +} +.dijitTextBox .dijitSpinnerButtonContainer { + width: 1em; + position: relative !important; + overflow: hidden; +} +.dijitSpinner .dijitSpinnerButtonInner { + width:1em; + visibility:hidden !important; + overflow-x:hidden; +} +.dijitComboBox .dijitButtonNode, +.dijitSpinnerButtonContainer .dijitButtonNode { + border-width: 0; +} +.dj_a11y .dijitSpinnerButtonContainer .dijitButtonNode { + border-width: 0px !important; + border-style: solid !important; +} +.dj_a11y .dijitTextBox .dijitSpinnerButtonContainer, +.dj_a11y .dijitSpinner .dijitArrowButtonInner, +.dj_a11y .dijitSpinnerButtonContainer input { + width: 1em !important; +} +.dj_a11y .dijitSpinner .dijitArrowButtonInner { + margin: 0 auto !important; +} +.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 .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { + padding-left: 0 !important; + padding-right: 0 !important; + width: 1em !important; +} +.dj_ie6 .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { + margin-left: 0.1em !important; + margin-right: 0.1em !important; + width: 1em !important; +} +.dj_iequirks .dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { + margin-left: 0 !important; + margin-right: 0 !important; + width: 2em !important; +} +.dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { + padding: 0; + position: absolute !important; + right: 0; + float: none; + height: 50%; + width: 100%; + bottom: auto; + left: 0; + right: auto; +} +.dj_iequirks .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { + width: auto; +} +.dj_a11y .dijitSpinnerButtonContainer .dijitArrowButton { + overflow: visible !important; +} +.dijitSpinner .dijitSpinnerButtonContainer .dijitDownArrowButton { + top: 50%; + border-top-width: 1px !important; +} +.dijitSpinner .dijitSpinnerButtonContainer .dijitUpArrowButton { + #bottom: 50%; + top: 0; +} +.dijitSpinner .dijitArrowButtonInner { + margin: auto; + overflow-x: hidden; + /*height: 100% !important;*/ +} +.dj_iequirks .dijitSpinner .dijitArrowButtonInner { + height: auto !important; +} +.dijitSpinner .dijitArrowButtonInner .dijitInputField { + -moz-transform: scale(0.5); + -moz-transform-origin: center top; + -webkit-transform: scale(0.5); + -webkit-transform-origin: center top; + -o-transform: scale(0.5); + -o-transform-origin: center top; + transform: scale(0.5); + transform-origin: left top; + padding-top: 0; + padding-bottom: 0; + padding-left: 0 !important; + padding-right: 0 !important; + width: 100%; + visibility: hidden; +} +.dj_ie .dijitSpinner .dijitArrowButtonInner .dijitInputField { + /*zoom: 50%;*/ + display: none; +} +.dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButtonInner { + overflow: hidden; +} +.dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { + width: 100%; +} +.dj_iequirks .dj_a11y .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { + width: 1em; +} +.dj_a11y .dijitSpinner .dijitArrowButtonInner .dijitInputField { + vertical-align:top; + visibility: visible; +} +.dj_a11y .dijitSpinnerButtonContainer { + width: 1em; +} +.dijitCheckBox, +.dijitRadio, +.dijitCheckBoxInput { + padding: 0; + border: 0; + width: 20px; + height: 20px; + background-position:center center; + background-repeat:no-repeat; + overflow: hidden; + cursor: pointer; +} +.dijitCheckBox input, +.dijitRadio input { + margin: 0; + padding: 0; + display: block; +} +.dijitCheckBoxInput { + opacity: 0.01; +} +.dj_ie .dijitCheckBoxInput { + filter: alpha(opacity=0); +} +.dj_a11y .dijitCheckBox, +.dj_a11y .dijitRadio { + width: auto !important; + height: auto !important; +} +.dj_a11y .dijitCheckBoxInput { + opacity: 1; + filter: none; + width: auto; + height: auto; +} +.dj_a11y .dijitFocusedLabel { + border: 1px dotted; + outline: 0px !important; +} +.dijitProgressBar { + z-index: 0; +} +.dijitProgressBarEmpty { + position:relative;overflow:hidden; + border:1px solid black; + z-index:0; +} +.dijitProgressBarFull { + position:absolute; + overflow:hidden; + z-index:-1; + top:0; + width:100%; +} +.dj_ie6 .dijitProgressBarFull { + height:1.6em; +} +.dijitProgressBarTile { + position:absolute; + overflow:hidden; + top:0; + left:0; + bottom:0; + right:0; + margin:0; + padding:0; + width: 100%; + height:auto; + background-color:#aaa; + /*background-attachment: fixed;*/ +} +.dj_a11y .dijitProgressBarTile { + border-width:2px; + border-style:solid; + background-color:transparent !important; +} +.dj_ie6 .dijitProgressBarTile { + position:static; + height:1.6em; +} +.dijitProgressBarIndeterminate .dijitProgressBarTile { + +} +.dijitProgressBarIndeterminateHighContrastImage { + display:none; +} +.dj_a11y .dijitProgressBarIndeterminate .dijitProgressBarIndeterminateHighContrastImage { + display:block; + position:absolute; + top:0; + bottom:0; + margin:0; + padding:0; + width:100%; + height:auto; +} +.dijitProgressBarLabel { + display:block; + position:static; + width:100%; + text-align:center; + background-color:transparent !important; +} +.dijitTooltip { + position: absolute; + z-index: 2000; + display: block; + + 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; +} +.dj_a11y .dijitTooltipConnector { + display: none; +} +.dijitTooltipData { + display:none; +} +.dijitLayoutContainer { + position: relative; + display: block; + overflow: hidden; +} +.dijitAlignTop, +.dijitAlignBottom, +.dijitAlignLeft, +.dijitAlignRight { + position: absolute; + overflow: hidden; +} +body .dijitAlignClient { position: absolute; } +.dijitBorderContainer, .dijitBorderContainerNoGutter { + position:relative; + overflow: hidden; + z-index: 0; +} +.dijitBorderContainerPane, +.dijitBorderContainerNoGutterPane { + position: absolute !important; + z-index: 2; +} +.dijitBorderContainer > .dijitTextArea { + resize: none; +} +.dijitGutter { + position: absolute; + font-size: 1px; +} +.dijitSplitter { + position: absolute; + overflow: hidden; + z-index: 10; + background-color: #fff; + border-color: gray; + border-style: solid; + border-width: 0; +} +.dj_ie .dijitSplitter { + z-index: 1; +} +.dijitSplitterActive { + z-index: 11 !important; +} +.dijitSplitterCover { + position:absolute; + z-index:-1; + top:0; + left:0; + width:100%; + height:100%; +} +.dijitSplitterCoverActive { + z-index:3 !important; +} +.dj_ie .dijitSplitterCover { + background: white; + filter: alpha(opacity=0); +} +.dijitSplitterH { + height: 7px; + border-top:1px; + border-bottom:1px; + cursor: row-resize; +} +.dijitSplitterV { + width: 7px; + border-left:1px; + border-right:1px; + cursor: col-resize; +} +.dijitSplitContainer { + position: relative; + overflow: hidden; + display: block; +} +.dijitSplitPane { + position: absolute; +} +.dijitSplitContainerSizerH, +.dijitSplitContainerSizerV { + position:absolute; + font-size: 1px; + background-color: ThreeDFace; + border: 1px solid; + 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 { + font-size: 1px; + background-color: ThreeDShadow; + -moz-opacity: 0.5; + opacity: 0.5; + filter: Alpha(Opacity=50); + margin: 0; +} +.dijitSplitContainerSizerH, .dijitSplitContainerVirtualSizerH { + cursor: col-resize; +} +.dijitSplitContainerSizerV, .dijitSplitContainerVirtualSizerV { + cursor: row-resize; +} +.dj_a11y .dijitSplitterH { + border-top:1px solid #d3d3d3 !important; + border-bottom:1px solid #d3d3d3 !important; +} +.dj_a11y .dijitSplitterV { + border-left:1px solid #d3d3d3 !important; + border-right:1px solid #d3d3d3 !important; +} +.dijitContentPane { + display: block; + overflow: auto; +} +.dijitContentPaneSingleChild { + overflow: hidden; +} +.dijitContentPaneLoading .dijitIconLoading, +.dijitContentPaneError .dijitIconError { + margin-right: 9px; +} +.dijitTitlePane { + display: block; + overflow: hidden; +} +.dijitTitlePaneTitle { + cursor: pointer; +} +.dijitFixedOpen, .dijitFixedClosed { + cursor: default; +} +.dijitFixedOpen .dijitArrowNode, .dijitFixedOpen .dijitArrowNodeInner, +.dijitFixedClosed .dijitArrowNode, .dijitFixedClosed .dijitArrowNodeInner{ + display: none; +} +.dijitTitlePaneTitle * { + vertical-align: middle; +} +.dijitTitlePane .dijitArrowNodeInner { + display: none; +} +.dj_a11y .dijitTitlePane .dijitArrowNodeInner { + display:inline !important; + font-family: monospace; +} +.dj_a11y .dijitTitlePane .dijitArrowNode { + display:none; +} +.dj_ie6 .dijitTitlePaneContentOuter, +.dj_ie6 .dijitTitlePane .dijitTitlePaneTitle { + zoom: 1; +} +.dijitColorPalette { + border: 1px solid #999; + background: #fff; + position: relative; +} +.dijitColorPalette .dijitPaletteTable { + padding: 2px 3px 3px 3px; + position: relative; + overflow: hidden; + outline: 0; + border-collapse: separate; +} +.dj_ie6 .dijitColorPalette .dijitPaletteTable, +.dj_ie7 .dijitColorPalette .dijitPaletteTable, +.dj_iequirks .dijitColorPalette .dijitPaletteTable { + padding: 0; + margin: 2px 3px 3px 3px; +} +.dijitColorPalette .dijitPaletteCell { + font-size: 1px; + vertical-align: middle; + text-align: center; + background: none; +} +.dijitColorPalette .dijitPaletteImg { + padding: 1px; + border: 1px solid #999; + margin: 2px 1px; + cursor: default; + font-size: 1px; +} +.dj_gecko .dijitColorPalette .dijitPaletteImg { + padding-bottom: 0; +} +.dijitColorPalette .dijitColorPaletteSwatch { + width: 14px; + height: 12px; +} +.dijitPaletteTable td { + padding: 0; +} +.dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg { + border: 1px solid #000; +} +.dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg, +.dijitColorPalette .dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg { + border: 2px solid #000; + margin: 1px 0; +} +.dj_a11y .dijitColorPalette .dijitPaletteTable, +.dj_a11y .dijitColorPalette .dijitPaletteTable * { + background-color: transparent !important; +} +.dijitAccordionContainer { + border:1px solid #b7b7b7; + border-top:0 !important; +} +.dijitAccordionTitle { + cursor: pointer; +} +.dijitAccordionTitleSelected { + cursor: default; +} +.dijitAccordionTitle .arrowTextUp, +.dijitAccordionTitle .arrowTextDown { + display: none; +} +.dj_a11y .dijitAccordionTitle .arrowTextUp, +.dj_a11y .dijitAccordionTitleSelected .arrowTextDown { + display: inline; +} +.dj_a11y .dijitAccordionTitleSelected .arrowTextUp { + display: none; +} +.dijitAccordionChildWrapper { + overflow: hidden; +} +.dijitCalendarContainer { + width: auto; +} +.dijitCalendarContainer th, .dijitCalendarContainer td { + padding: 1px 2px 2px; + vertical-align: middle; +} +.dijitCalendarYearLabel { + white-space: nowrap; +} +.dijitCalendarNextYear { + margin:0 0 0 0.55em; +} +.dijitCalendarPreviousYear { + margin:0 0.55em 0 0; +} +.dijitCalendarIncrementControl { + vertical-align: middle; +} +.dijitCalendarIncrementControl, +.dijitCalendarDateTemplate, +.dijitCalendarMonthLabel, +.dijitCalendarPreviousYear, +.dijitCalendarNextYear { + cursor: pointer; +} +.dijitCalendarDisabledDate { + color: gray; + text-decoration: line-through; + cursor: default; +} +.dijitSpacer { + position: relative; + height: 1px; + overflow: hidden; + visibility: hidden; +} +.dijitCalendarMonthMenu .dijitCalendarMonthLabel { + text-align:center; +} +.dijitMenu { + border:1px solid black; + background-color:white; +} +.dijitMenuTable { + border-collapse:collapse; + border-width:0; + background-color:white; +} +.dj_webkit .dijitMenuTable td[colspan="2"]{ + border-right:hidden; +} +.dijitMenuItem { + text-align: left; + white-space: nowrap; + padding:.1em .2em; + cursor:pointer; +} +.dijitMenuItem:focus { + outline: none +} +.dijitMenuPassive .dijitMenuItemHover, +.dijitMenuItemSelected { + background-color:black; + color:white; +} +.dijitMenuItemIcon, .dijitMenuExpand { + background-repeat: no-repeat; +} +.dijitMenuItemDisabled * { + /* flat theme styles disabled menu items */ + /*opacity:0.5;*/ + cursor:default; +} +.dj_ie .dj_a11y .dijitMenuItemDisabled, +.dj_ie .dj_a11y .dijitMenuItemDisabled *, +.dj_ie .dijitMenuItemDisabled * { + color: gray; + filter: alpha(opacity=35); +} +.dijitMenuItemLabel { + position: relative; + vertical-align: middle; +} +.dj_a11y .dijitMenuItemSelected { + border: 1px dotted black !important; +} +.dj_a11y .dijitMenuItemSelected .dijitMenuItemLabel { + border-width: 1px; + border-style: solid; +} +.dj_ie8 .dj_a11y .dijitMenuItemLabel { + position:static; +} +.dijitMenuExpandA11y { + display: none; +} +.dj_a11y .dijitMenuExpandA11y { + display: inline; +} +.dijitMenuSeparator td { + border: 0; + padding: 0; +} +.dijitMenuSeparatorTop { + height: 50%; + margin: 0; + margin-top:3px; + font-size: 1px; +} +.dijitMenuSeparatorBottom { + height: 50%; + margin: 0; + margin-bottom:3px; + font-size: 1px; +} +.dijitCheckedMenuItemIconChar { + vertical-align: middle; + visibility:hidden; +} +.dijitCheckedMenuItemChecked .dijitCheckedMenuItemIconChar { + visibility: visible; +} +.dj_a11y .dijitCheckedMenuItemIconChar { + display:inline !important; +} +.dj_a11y .dijitCheckedMenuItemIcon { + display: none; +} +.dj_ie .dj_a11y .dijitMenuBar .dijitMenuItem { + + margin: 0; +} +.dijitStackController .dijitToggleButtonChecked * { + cursor: default; +} +.dijitTabContainer { + z-index: 0; + overflow: visible; +} +.dj_ie6 .dijitTabContainer { + overflow: hidden; +} +.dijitTabContainerNoLayout { + width: 100%; +} +.dijitTabContainerBottom-tabs, +.dijitTabContainerTop-tabs, +.dijitTabContainerLeft-tabs, +.dijitTabContainerRight-tabs { + z-index: 1; + overflow: visible !important; +} +.dijitTabController { + z-index: 1; +} +.dijitTabContainerBottom-container, +.dijitTabContainerTop-container, +.dijitTabContainerLeft-container, +.dijitTabContainerRight-container { + z-index:0; + overflow: hidden; + border: 1px solid black; +} +.nowrapTabStrip { + width: 50000px; + display: block; + position: relative; + text-align: left; + z-index: 1; +} +.dijitTabListWrapper { + overflow: hidden; + z-index: 1; +} +.dj_a11y .tabStripButton img { + display: none; +} +.dijitTabContainerTop-tabs { + border-bottom: 1px solid black; +} +.dijitTabContainerTop-container { + border-top: 0; +} +.dijitTabContainerLeft-tabs { + border-right: 1px solid black; + float: left; +} +.dijitTabContainerLeft-container { + border-left: 0; +} +.dijitTabContainerBottom-tabs { + border-top: 1px solid black; +} +.dijitTabContainerBottom-container { + border-bottom: 0; +} +.dijitTabContainerRight-tabs { + border-left: 1px solid black; + float: left; +} +.dijitTabContainerRight-container { + border-right: 0; +} +div.dijitTabDisabled, .dj_ie div.dijitTabDisabled { + cursor: auto; +} +.dijitTab { + position:relative; + cursor:pointer; + white-space:nowrap; + z-index:3; +} +.dijitTab * { + vertical-align: middle; +} +.dijitTabChecked { + cursor: default; +} +.dijitTabContainerTop-tabs .dijitTab { + top: 1px; +} +.dijitTabContainerBottom-tabs .dijitTab { + top: -1px; +} +.dijitTabContainerLeft-tabs .dijitTab { + left: 1px; +} +.dijitTabContainerRight-tabs .dijitTab { + left: -1px; +} +.dijitTabContainerTop-tabs .dijitTab, +.dijitTabContainerBottom-tabs .dijitTab { + display:inline-block; + #zoom: 1; + #display:inline; +} +.tabStripButton { + z-index: 12; +} +.dijitTabButtonDisabled .tabStripButton { + display: none; +} +.dijitTabCloseButton { + margin-left: 1em; +} +.dijitTabCloseText { + display:none; +} +.dijitTab .tabLabel { + /*min-height: 16px;*/ + display: inline-block; +} +.dijitNoIcon { + display: none; +} +.dj_ie6 .dijitTab .dijitNoIcon { + display: inline; + height: 15px; + width: 1px; +} +.dj_a11y .dijitTabCloseButton { + background-image: none !important; + width: auto !important; + height: auto !important; +} +.dj_a11y .dijitTabCloseText { + display: inline; +} +.dijitTabPane, +.dijitStackContainer-child, +.dijitAccordionContainer-child { + border: none !important; +} +.dijitInlineEditBoxDisplayMode { + border: 1px solid transparent; + cursor: text; +} +.dj_a11y .dijitInlineEditBoxDisplayMode, +.dj_ie6 .dijitInlineEditBoxDisplayMode { + border: none; +} +.dijitInlineEditBoxDisplayModeHover, +.dj_a11y .dijitInlineEditBoxDisplayModeHover, +.dj_ie6 .dijitInlineEditBoxDisplayModeHover { + background-color: #e2ebf2; + border: solid 1px black; +} +.dijitInlineEditBoxDisplayModeDisabled { + cursor: default; +} +.dijitTree { + overflow: auto; +} +.dijitTreeContainer { + float: left; +} +.dijitTreeIndent { + width: 19px; +} +.dijitTreeRow, .dijitTreeContent { + white-space: nowrap; +} +.dj_ie .dijitTreeLabel:focus { + outline: 1px dotted black; +} +.dijitTreeRow img { + vertical-align: middle; +} +.dijitTreeContent { + cursor: default; +} +.dijitExpandoText { + display: none; +} +.dj_a11y .dijitExpandoText { + display: inline; + padding-left: 10px; + padding-right: 10px; + font-family: monospace; + border-style: solid; + border-width: thin; + cursor: pointer; +} +.dijitTreeLabel { + margin: 0 4px; +} +.dijitDialog { + position: absolute; + z-index: 999; + overflow: hidden; +} +.dijitDialogTitleBar { + cursor: move; +} +.dijitDialogFixed .dijitDialogTitleBar { + cursor:default; +} +.dijitDialogCloseIcon { + cursor: pointer; +} +.dijitDialogPaneContent { + -webkit-overflow-scrolling: touch; +} +.dijitDialogUnderlayWrapper { + position: absolute; + left: 0; + top: 0; + z-index: 998; + display: none; + background: transparent !important; +} +.dijitDialogUnderlay { + background: #eee; + opacity: 0.5; +} +.dj_ie .dijitDialogUnderlay { + filter: alpha(opacity=50); +} +.dj_a11y .dijitSpinnerButtonContainer, +.dj_a11y .dijitDialog { + opacity: 1 !important; + background-color: white !important; +} +.dijitDialog .closeText { + /*display:none;*/ + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; + display: block; + color: #000000; + text-shadow: 0 1px 0 #FFFFFF; + position:absolute; +} +.dj_a11y .dijitDialog .closeText { + display:inline; +} +.dijitSliderMoveable { + z-index:99; + position:absolute !important; + display:block; + vertical-align:middle; +} +.dijitSliderMoveableH { + right:0; +} +.dijitSliderMoveableV { + right:50%; +} +.dj_a11y div.dijitSliderImageHandle, +.dijitSliderImageHandle { + margin:0; + padding:0; + position:relative !important; + border:8px solid gray; + width:0; + height:0; + cursor: pointer; +} +.dj_iequirks .dj_a11y .dijitSliderImageHandle { + font-size: 0; +} +.dj_ie7 .dijitSliderImageHandle { + overflow: hidden; +} +.dj_ie7 .dj_a11y .dijitSliderImageHandle { + overflow: visible; +} +.dj_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; + vertical-align:top; + text-align:left; +} +.dijitSliderProgressBarH { + position:absolute !important; + 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; +} +.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; +} +.dijitSliderDecorationC, +.dijitSliderDecorationV { + position: relative; +} +.dijitSliderDecorationH { + width: 100%; +} +.dijitSliderDecorationV { + height: 100%; + white-space: nowrap; +} +.dijitSliderButton { + font-family:monospace; + margin:0; + padding:0; + display:block; +} +.dj_a11y .dijitSliderButtonInner { + visibility:visible !important; +} +.dijitSliderButtonContainer { + text-align:center; + 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; +} +.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 { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.dijitRuleMarkV { + height:0; + border-right-width:0 !important; + /*border-bottom-width:0 !important;*/ + border-left-width:0 !important; + width:100%; + left:0; +} +.dj_ie .dijitRuleLabelContainerV { + margin-top:-.55em; +} +.dj_a11y .dijitSliderReadOnly, +.dj_a11y .dijitSliderDisabled { + opacity:0.6; +} +.dj_ie .dj_a11y .dijitSliderReadOnly .dijitSliderBar, +.dj_ie .dj_a11y .dijitSliderDisabled .dijitSliderBar { + filter: alpha(opacity=40); +} +.dj_a11y .dijitSlider .dijitSliderButtonContainer div { + font-family: monospace; + font-size: 1em; + line-height: 1em; + height: auto; + width: auto; + margin: 0 4px; +} +.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; +} +.dijitTextArea { + width:100%; + overflow-y: auto; +} +.dijitTextArea[cols] { + width:auto; +} +.dj_ie .dijitTextAreaCols { + width:auto; +} +.dijitExpandingTextArea { + + resize: none; +} +.dijitToolbarSeparator { + height: 18px; + width: 5px; + padding: 0 1px; + margin: 0; +} +.dijitIEFixedToolbar { + position:absolute; + top: expression(eval((document.documentElement||document.body).scrollTop)); +} +.dijitEditor { + display: block; +} +.dijitEditorDisabled, +.dijitEditorReadOnly { + color: gray; +} +.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; + cursor:pointer; +} +.dijitTimePickerItemDisabled { + color:gray; + text-decoration:line-through; +} +.dj_a11y .dijitTimePickerItemSelected .dijitTimePickerItemInner { + border: solid 4px black; +} +.dj_a11y .dijitTimePickerItemHover .dijitTimePickerItemInner { + border: dashed 4px black; +} +.dijitToggleButtonIconChar { + + display:none !important; +} +.dj_a11y .dijitToggleButton .dijitToggleButtonIconChar { + display:inline !important; + visibility:hidden; +} +.dj_ie6 .dijitToggleButtonIconChar, .dj_ie6 .tabStripButton .dijitButtonText { + font-family: "Arial Unicode MS"; +} +.dj_a11y .dijitToggleButtonChecked .dijitToggleButtonIconChar { + display: inline !important; + visibility:visible !important; +} +.dijitArrowButtonChar { + display:none !important; +} +.dj_a11y .dijitArrowButtonChar { + display:inline !important; +} +.dj_a11y .dijitDropDownButton .dijitArrowButtonInner, +.dj_a11y .dijitComboButton .dijitArrowButtonInner { + display:none !important; +} +.dj_a11y .dijitSelect { + border-collapse: separate !important; + border-width: 1px; + border-style: solid; +} +.dj_ie .dijitSelect { + vertical-align: middle; +} +.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; +} +.dijitToolbar .dijitSelect { + margin: 0; +} +.dj_webkit .dijitToolbar .dijitSelect { + padding-left: 0.3em; +} +.dijitSelect .dijitButtonContents { + padding: 0; + white-space: nowrap; + text-align: left; + border-style: none solid none none; + border-width: 0px; +} +.dijitSelectFixedWidth .dijitButtonContents { + width: 100%; +} +.dijitSelectMenu .dijitMenuItemIcon { + display:none; +} +.dj_ie6 .dijitSelectMenu .dijitMenuItemLabel, +.dj_ie7 .dijitSelectMenu .dijitMenuItemLabel { + position: static; +} +.dijitSelectLabel * +{ + vertical-align: baseline; +} +.dijitSelectSelectedOption * { + font-weight: normal; +} +.dijitSelectMenu { + border-width: 1px; +} +.dijitSelectMenu .dijitMenuTable { + margin: 0; + background-color: transparent; +} +.dijitForceStatic { + position: static !important; +} +.dijitReadOnly *, +.dijitDisabled *, +.dijitReadOnly, +.dijitDisabled { + cursor: default; +} +.dojoDndItem { + padding: 2px; + -webkit-touch-callout: none; + -webkit-user-select: none; +} +.dojoDndHorizontal .dojoDndItem { + #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; +} +.dijitFocused .dijitMenuItemShortcutKey { + text-decoration: underline; +} +.dijitRtl .dijitOffScreen { + /* align on the right side rather than the left so no horizontal scroll bar shown */ + left: auto !important; + right: -10000px !important; +} + +.dijitRtl .dijitPlaceHolder { + left: auto; + right: 0; +} + +/* Menu */ + +.dijitMenuItemRtl { + text-align: right; +} + +/* Button */ + +.dj_iequirks .dijitComboButtonRtl button { + /* workaround bug where label invisible (themeTesterQuirk.html?dir=rtl) */ + float:left; +} +.dj_ie .dijitTextBoxRtl .dijitInputContainer { + clear: right; +} + +/* TextBox, ComboBox, Spinner */ + +.dijitTextBoxRtl .dijitValidationContainer, +.dijitTextBoxRtl .dijitSpinnerButtonContainer, +.dijitComboBoxRtl .dijitArrowButtonContainer { + /* combobox and spinner: line between the input area and the drop down button */ + border-right-width: 1px !important; + border-left-width: 0 !important; +} + +.dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton { + right: 0; + left: auto; +} + +.dijitSelectRtl .dijitButtonText { + float: right; +} + +.dijitTextBoxRtl .dijitSpinnerButtonContainer, +.dijitValidationTextBoxRtl .dijitValidationContainer, +.dijitTextBoxRtl .dijitArrowButtonContainer { + float: left; +} + +div.dijitNumberTextBoxRtl { + text-align: right; +} + +/* Calendar */ + +.dijitCalendarRtl .dijitCalendarNextYear { + margin:0 0.55em 0 0; +} + +.dijitCalendarRtl .dijitCalendarPreviousYear { + margin:0 0 0 0.55em; +} + + +/* Slider */ + +.dijitSliderRtl .dijitSliderImageHandleV { + left:auto; +} + +.dijitSliderRtl .dijitSliderImageHandleH { + left:-50%; +} + +.dijitSliderRtl .dijitSliderMoveableH { + right:auto; + left:0; +} + +.dijitSliderRtl .dijitRuleContainerV { + float:right; +} + +.dj_ie .dijitSliderRtl .dijitRuleContainerV { + text-align:right; +} + +.dj_ie .dijitSliderRtl .dijitRuleLabelV { + text-align:left; +} + +.dj_ie .dijitSliderRtl .dijitRuleLabelH { + zoom:1; +} + +.dijitSliderRtl .dijitSliderProgressBarH { + /* workarounds for IE and FF */ + float:right; + right:0; + left:auto; +} + +/* ContentPane*/ + +.dijitRtl .dijitContentPaneLoading .dijitIconLoading, +.dijitRtl .dijitContentPaneError .dijitIconError { + margin-right: 0; + margin-left: 9px; +} + +/* TabContainer */ + +.dijitTabControllerRtl .nowrapTabStrip { + text-align: right; /* just in case ancestor has non-standard setting */ +} +.dijitTabRtl .dijitTabCloseButton { + margin-left: 0; + margin-right: 1em; +} +.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 { + width:100%; +} + + +/* ColorPalette */ +.dijitColorPaletteRtl .dijitColorPaletteUnder { + /* needed in RTL mode when DropDownButton expands the ColorPalette beyond it's natural width */ + left: auto; + right: 0; +} + +/* Select */ +.dijitSelectRtl .dijitButtonContents { + border-style: none none none solid; + text-align: right; +} + +/* Tree */ + +.dijitTreeRtl .dijitTreeContainer { + float: right; /* for correct highlighting during horizontal scroll, see #16132 */ +} + +/* 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; +} |