- Author:
- David Nickerson <nickerso@users.sourceforge.net>
- Date:
- 2009-07-16 02:00:03+12:00
- Desc:
- the starting point for the HH tutorial example
- Permanent Source URI:
- https://models.fieldml.org/workspace/a1/rawfile/f6a8f90307388eb4b040ee3566b84d88b59247f7/dojo-presentation/js/dojo/dijit/themes/soria/layout/TabContainer.css
/**
* dijit.layout.TabContainer
*
* To style TabContainer with rounded corners
* you can use these classes: .dijitTab (left), .dijitTabContent (center), dijitTabInnerDiv (right)
* For tabs aligned to top you can style a stripe div right underneath the tabs using .dijitTabStripe
*/
/* Classes for all types of tabs (top/bottom/left/right) */
/* Tabs, shared classes */
.soria .dijitTabPaneWrapper {
background:#fff;
border:1px solid #B1BADF;
margin: 0;
padding-left: 0px;
}
.soria .dijitTabInnerDiv {
padding:0px 3px 0px 0px;
margin: 0 0 0 4px;
background: url("../images/tabContainerSprite.gif") no-repeat;
background-position: right -400px;
}
.soria .dijitTab {
line-height:normal;
margin:0 2px 0 0; /* space between one tab and the next in top/bottom mode */
padding:0px;
background: url("../images/tabContainerSprite.gif") no-repeat 0 -300px;
color: #243C5F;
border-bottom: 1px #B1BADF solid;
}
.soria .dijitTabInnerDiv .dijitTabContent {
padding:5px 3px 4px 4px;
background: url("../images/tabContainerSprite.gif") repeat-x 0 -350px;
position: relative;
}
.dijitTabSpacer {
font-size: 1px;
}
/* hovered tab */
.soria .dijitTabHover,
.soria .dijitTabCloseButtonHover {
color: #243C5F;
background: url("../images/tabContainerSprite.gif") no-repeat 0px -150px;
}
.soria .dijitTabHover .dijitTabInnerDiv,
.soria .dijitTabCloseButtonHover .dijitTabInnerDiv {
background: url("../images/tabContainerSprite.gif") no-repeat right -250px;
}
.soria .dijitTabHover .dijitTabInnerDiv .dijitTabContent,
.soria .dijitTabCloseButtonHover .dijitTabInnerDiv .dijitTabContent {
background: url("../images/tabContainerSprite.gif") repeat-x 0 -200px;
}
/* checked tab*/
.soria .dijitTabChecked,
.soria .dijitTabCloseButtonChecked
{
/* the selected tab (with or without hover) */
background: url("../images/tabContainerSprite.gif") no-repeat 0px -0px;
}
.soria .dijitTabChecked .dijitTabInnerDiv {
background: url("../images/tabContainerSprite.gif") no-repeat right -100px;
}
.soria .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
background: url("../images/tabContainerSprite.gif") repeat-x 0 -50px;
color: #243C5F !important;
}
.soria .dijitTab .dijitClosable .closeImage {
/* Inline-block */
display:-moz-inline-box; /* FF2 */
display:inline-block; /* webkit and FF3 */
#zoom: 1; /* set hasLayout:true to mimic inline-block */
#display:inline; /* don't use .dj_ie since that increases the priority */
vertical-align:top;
width: 15px;
height: 15px;
padding: 0;
margin: 0;
background: url("../images/spriteRoundedIconsSmall.png") no-repeat -60px top;
}
.dj_ie6 .dijitTab .dijitClosable .closeImage {
background: url("../images/spriteRoundedIconsSmall.gif") no-repeat -60px top;
}
.soria .dijitTabCloseButton .dijitClosable .closeImage {
background: url("../images/spriteRoundedIconsSmall.png") no-repeat -60px top;
}
.dj_ie6 .soria .dijitTabCloseButton .dijitClosable .closeImage {
background: url("../images/spriteRoundedIconsSmall.gif") no-repeat -60px top;
}
.soria .dijitTabCloseButtonHover .dijitClosable .closeImage {
background: url("../images/spriteRoundedIconsSmall.png") no-repeat -60px top;
}
.dj_ie6 .soria .dijitTabCloseButtonHover .dijitClosable .closeImage {
background: url("../images/spriteRoundedIconsSmall.gif") no-repeat -60px top;
}
.soria .dijitTab .dijitTabButtonSpacer {
height: 15px;
width: 1px;
}
/* ================================ */
/* top tabs */
.soria .dijitTabContainerTop-tabs {
margin-bottom: -1px;
border-color: #ccc;
padding-left: 3px;
}
/* top container */
.soria .dijitTabContainerTop-container {
border-top: none;
}
/* checked tabs */
.soria .dijitTabContainerTop-tabs .dijitTabChecked {
border-bottom-color: #94b4e6;
}
/* strip */
.soria .dijitTabContainerTopStrip {
border: 1px solid #B1BADF;
padding-top: 2px;
padding-left: 3px;
}
.soria .dijitTabContainerTopStrip {
background: #F0F4FC;
}
/* ================================ */
/* bottom tabs */
.soria .dijitTabContainerBottom-tabs {
margin-top: -1px;
border-color: #ccc;
padding-left: 3px;
}
/* bottom container */
.soria .dijitTabContainerBottom-container {
border-bottom: none;
}
.soria .dijitTabContainerBottom-tabs .dijitTab {
border-bottom: none;
border-top: 1px solid #B1BADF;
background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom left;
}
/* checked tabs */
.soria .dijitTabContainerBottom-tabs .dijitTabChecked {
border-top-color:#94b4e6;
}
.soria .dijitTabContainerBottom-tabs .dijitTabInnerDiv .dijitTabContent {
padding-top: 4px;
padding-bottom: 5px;
background: url("../images/tabBottomEnabledC.gif") repeat-x bottom left;
}
.soria .dijitTabContainerBottom-tabs .dijitTabInnerDiv {
background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom right;
}
.soria .dijitTabContainerBottom-tabs .dijitTabHover,
.soria .dijitTabContainerBottom-tabs .dijitTabCloseButtonHover {
color: #243C5F;
background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom left;
}
.soria .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv,
.soria .dijitTabContainerBottom-tabs .dijitTabCloseButtonHover .dijitTabInnerDiv {
background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom right;
}
.soria .dijitTabContainerBottom-tabs .dijitTabHover .dijitTabInnerDiv .dijitTabContent,
.soria .dijitTabContainerBottom-tabs .dijitTabCloseButtonHover .dijitTabInnerDiv .dijitTabContent {
background: url("../images/tabBottomHoverC.gif") repeat-x bottom left;
}
.soria .dijitTabContainerBottom-tabs .dijitTabChecked,
.soria .dijitTabContainerBottom-tabs .dijitTabCloseButtonChecked
{
/* the selected tab (with or without hover) */
background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom left;
}
.soria .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv {
background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom right;
}
.soria .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv .dijitTabContent {
background: url("../images/tabBottomActiveC.gif") repeat-x bottom left;
}
/* strip */
.soria .dijitTabContainerBottomStrip {
padding-bottom: 2px;
padding-left: 3px;
border: 1px solid #B1BADF;
}
.soria .dijitTabContainerBottomStrip {
background: #F0F4FC;
}
/* top/bottom strip */
.soria .dijitTabContainerBottom-spacer,
.soria .dijitTabContainerTop-spacer {
height: 2px;
border: 1px solid #8ba0bd;
background: #94b4e6;
}
/* ================================ */
/* right tabs */
.soria .dijitTabContainerRight-tabs {
margin-left: -1px;
border-color: #ccc;
padding-top: 3px;
}
/* right container */
.soria .dijitTabContainerRight-container {
border-right: none;
}
.soria .dijitTabContainerRight-tabs .dijitTab {
border-bottom: none;
border-left: 1px solid #B1BADF;
border-bottom: 1px solid #B1BADF !important;
}
/* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
.dj_ie .soria .dijitTabContainerRight-tabs .dijitTabInnerDiv {
border-bottom: solid #fff 1px;
}
/* checked tabs */
.soria .dijitTabContainerRight-tabs .dijitTabChecked {
border-left-color: #94b4e6;
}
.soria .dijitTabContainerRight-tabs .dijitTabChecked {
background: url("../images/tabRightChecked.gif") no-repeat left top !important;
}
/* some odd ie bug when borders dissapear when setting a bottom margin, this sortof helps */
.dj_ie .soria .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv,
.dj_ie .soria .dijitTabContainerRight-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
border-bottom: solid #efefef 1px;
}
.soria .dijitTabContainerRight-tabs .dijitTab {
background: url("../images/tabContainerSprite.gif") no-repeat left -350px;
}
.soria .dijitTabContainerRight-tabs .dijitTabHover .dijitTab {
background: url("../images/tabContainerSprite.gif") no-repeat left -200px;
}
/* strip */
.soria .dijitTabContainerRightStrip {
padding-right: 2px;
padding-top: 3px;
border: 1px solid #B1BADF;
}
.soria .dijitTabContainerRightStrip {
background: #F0F4FC;
}
/* ================================ */
/* left tabs */
.soria .dijitTabContainerLeft-tabs {
margin-right: -1px;
border-color: #ccc;
padding-top: 3px;
}
/* left conatiner */
.soria .dijitTabContainerLeft-container {
border-left: none;
}
.soria .dijitTabContainerLeft-tabs .dijitTab {
border-right: 1px solid #B1BADF;
border-bottom: 1px solid #B1BADF;
}
/* checked tabs */
.soria .dijitTabContainerLeft-tabs .dijitTabChecked {
border-right: 1px solid #94b4e6;
}
.soria .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
background: url("../images/tabContainerSprite.gif") no-repeat right -350px;
}
.soria .dijitTabContainerLeft-tabs .dijitTabHover .dijitTabInnerDiv {
background: url("../images/tabContainerSprite.gif") no-repeat right -200px;
}
.soria .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
.soria .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
background: url("../images/tabLeftChecked.gif") no-repeat right top;
}
.dj_ie .soria .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv,
.dj_ie .soria .dijitTabContainerLeft-tabs .dijitTabCheckedHover .dijitTabInnerDiv {
border-bottom: solid #efefef 1px;
}
.dj_ie .soria .dijitTabContainerLeft-tabs .dijitTabInnerDiv {
border-bottom: solid #fff 1px;
}
/* strip */
.soria .dijitTabContainerLeftStrip {
padding-left: 2px;
padding-top: 3px;
border: 1px solid #B1BADF;
}
.soria .dijitTabContainerLeftStrip {
background: #F0F4FC;
}
/* ================================ */
/* left/right tabs */
.soria .dijitTabContainerLeft-tabs .dijitTab,
.soria .dijitTabContainerRight-tabs .dijitTab {
margin-right:auto;
margin-bottom:2px; /* space between one tab and the next in left/right mode */
}
/* left/right tabstrip */
.soria .dijitTabContainerLeft-spacer,
.soria .dijitTabContainerRight-spacer {
width: 2px;
border: 1px solid #8ba0bd;
background: #94b4e6;
}
/* ================================ */
/* this resets the tabcontainer stripe when within a contentpane */
.soria .dijitTabContainerTop-dijitContentPane .dijitTabContainerTop-tabs {
border-left: 0px solid #ccc;
border-top: 0px solid #ccc;
border-right: 0px solid #ccc;
padding-top: 0px;
padding-left: 0px;
}
