/* 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; }