From e44a7e37b6c7b5961adaffc62b9042b8d442938e Mon Sep 17 00:00:00 2001 From: mensonge Date: Thu, 13 Nov 2008 09:49:11 +0000 Subject: New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f --- .../soria/layout/TabContainer.css.commented.css | 372 +++++++++++++++++++++ 1 file changed, 372 insertions(+) create mode 100644 includes/js/dijit/themes/soria/layout/TabContainer.css.commented.css (limited to 'includes/js/dijit/themes/soria/layout/TabContainer.css.commented.css') diff --git a/includes/js/dijit/themes/soria/layout/TabContainer.css.commented.css b/includes/js/dijit/themes/soria/layout/TabContainer.css.commented.css new file mode 100644 index 0000000..c559cfc --- /dev/null +++ b/includes/js/dijit/themes/soria/layout/TabContainer.css.commented.css @@ -0,0 +1,372 @@ +/** + * 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) */ + +.soria .dijitTabPaneWrapper { /* Container for tab content */ + /* + overflow: hidden; + */ + background:#fff; + border:1px solid #b1badf; +} + +.soria .dijitTab { + line-height:normal; + margin-right:3px; /* space between one tab and the next in top/bottom mode */ + padding:0px; + background: url("../images/tabContainerSprite.gif") no-repeat 0 -300px; + font-size: 0.9em; + font-weight: bold; + color: #373941; + margin-bottom: -1px; +} + +.soria dijitTabChecked { + margin-bottom: -2px; +} + +.soria .dijitTabInnerDiv .dijitTabContent { + padding:8px 10px 4px 10px; + background: url("../images/tabContainerSprite.gif") repeat-x 0 -350px; +} + +.soria .dijitTabInnerDiv { + padding:0px 10px 0px 10px; + background: url("../images/tabContainerSprite.gif") no-repeat; + background-position: right -400px; + border: none; +} + +.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; + border: none; +} + +.soria .dijitTabHover .dijitTabInnerDiv .dijitTabContent, +.soria .dijitTabCloseButtonHover .dijitTabInnerDiv .dijitTabContent { + background: url("../images/tabContainerSprite.gif") repeat-x 0 -200px; + padding:8px 10px 4px 10px; +} + +.soria .dijitTabChecked, +.soria .dijitTabCloseButtonChecked +{ + /* the selected tab (with or without hover) */ + background: url("../images/tabContainerSprite.gif") no-repeat 0px -0px; +} + +.soria .dijitTabChecked .dijitTabInnerDiv { + padding:0px 10px 0px 10px; + background: url("../images/tabContainerSprite.gif") no-repeat right -100px; + border: none; +} + +.soria .dijitTabChecked .dijitTabInnerDiv .dijitTabContent { + background: url("../images/tabContainerSprite.gif") repeat-x 0 -50px; + padding:8px 10px 5px 10px; + color: #243C5F !important; +} + +/* top specific classes */ + +.soria .dijitTabLabels-top { + border-left: 1px solid #b1badf; + border-top: 1px solid #b1badf; + border-right: 1px solid #b1badf; + padding-top: 2px; + padding-left: 3px; + padding-right: 3px; + background: #F0F4FC url("../images/tabStripe.gif") repeat-x left bottom; + padding-bottom: 4px; +} +/* +.soria .dijitAlignTop .dijitTabStripe { + background: url("../images/tabStripe.gif") repeat-x left bottom; + padding-left: 2px; + padding-top: 0px; + height: 4px; + clear: both; + font-size: 1px; + margin-left: -3px; +} +*/ + +.soria .dijitAlignLeft .dijitTab, +.soria .dijitAlignRight .dijitTab { + margin-right:0px; + margin-bottom:5px; /* space between one tab and the next in left/right mode */ +} + +/* make the active tab white on the side next to the content pane */ +.soria .dijitAlignTop .dijitTabChecked, +.soria .dijitAlignTop .dijitTabCloseButtonChecked +{ + border-bottom-color:white; + vertical-align:bottom; +} + +.soria .dijitAlignBottom .dijitTabChecked, +.soria .dijitAlignBottom .dijitTabCloseButtonChecked +{ + border-top-color:white; + /*-moz-border-radius:2px 2px 0px 0px; eliminate some border detritrus on moz */ +} + +.soria .dijitAlignLeft .dijitTabChecked, +.soria .dijitAlignLeft .dijitTabCloseButtonChecked +{ + border-right-color:white; +} + +.soria .dijitAlignRight .dijitTabChecked, +.soria .dijitAlignRight .dijitTabCloseButtonChecked +{ + border-left-color:white; +} + +/* bottom specific classes */ + +.soria .dijitTabLabels-bottom { + padding-bottom: 2px; + padding-left: 3px; + background-color: #f0f4fc; + border-left: 1px solid #b1badf; + border-bottom: 1px solid #b1badf; + border-right: 1px solid #b1badf; + background: #F0F4FC url("../images/tabStripeBottom.gif") repeat-x left top; + padding-top: 3px; + padding-right: 3px; +} +/* +.soria .dijitAlignBottom .dijitTabStripe { + background: url("../images/tabStripe.gif") repeat-x left bottom; + padding-left: 2px; + padding-top: 0px; + height: 4px; + clear: both; + font-size: 1px; + margin-left: -3px; +} +*/ +.soria .dijitAlignBottom .dijitTab { + line-height:normal; + margin-right:3px; /* space between one tab and the next in top/bottom mode */ + padding:0px; + background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom left; + font-size: 0.9em; + font-weight: bold; + color: #373941; + margin-bottom: 0px; + margin-top: 1px; +} + +.soria .dijitAlignBottom .dijitTabChecked { + margin-bottom: 0px; + margin-top: 0px !important; +} + +.soria .dijitAlignBottom .dijitTabInnerDiv .dijitTabContent { + padding:6px 10px 6px 10px; + background: url("../images/tabBottomEnabledC.gif") repeat-x bottom left; +} + +.soria .dijitAlignBottom .dijitTabInnerDiv { + padding:0px 10px 0px 10px; + background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom right; + border: none; +} + +.soria .dijitAlignBottom .dijitTabHover, +.soria .dijitAlignBottom .dijitTabCloseButtonHover { + color: #243C5F; + background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom left; +} + +.soria .dijitAlignBottom .dijitTabHover .dijitTabInnerDiv, +.soria .dijitAlignBottom .dijitTabCloseButtonHover .dijitTabInnerDiv { + background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom right; + border: none; +} + +.soria .dijitAlignBottom .dijitTabHover .dijitTabInnerDiv .dijitTabContent, +.soria .dijitAlignBottom .dijitTabCloseButtonHover .dijitTabInnerDiv .dijitTabContent { + background: url("../images/tabBottomHoverC.gif") repeat-x bottom left; + padding:6px 10px 6px 10px; +} + +.dj_ie6 .soria .dijitAlignBottom .dijitTabHover, +.dj_ie6 .soria .dijitAlignBottom .dijitTabCloseButtonHover { + background-image: url("../images/tabHover.gif"); +} + +.soria .dijitAlignBottom .dijitTabChecked, +.soria .dijitAlignBottom .dijitTabCloseButtonChecked +{ + /* the selected tab (with or without hover) */ + background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom left; +} + +.soria .dijitAlignBottom .dijitTabChecked .dijitTabInnerDiv { + padding:0px 10px 0px 10px; + background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom right; + border: none; +} + +.soria .dijitAlignBottom .dijitTabChecked .dijitTabInnerDiv .dijitTabContent { + background: url("../images/tabBottomActiveC.gif") repeat-x bottom left; + padding:7px 10px 6px 10px; +} + +/* left specific classes */ +.soria .dijitAlignLeft .dijitTab { + margin-right: 1px !important; +} + +.soria .dijitAlignLeft .dijitTabChecked { + margin-right: 0px !important; +} + +.soria .dijitAlignLeft .dijitTabChecked .dijitTabInnerDiv { + background: url("../images/tabLeftChecked.gif") no-repeat right top !important; + padding-left: 10px; + border-bottom: 1px solid #8ba0bd !important; +} + +.soria .dijitAlignLeft .dijitTabInnerDiv { + background: url("../images/tabContainerSprite.gif") no-repeat right -350px; + padding-left: 10px; + border-bottom: 1px solid #b9bbdd; +} +.soria .dijitAlignLeft .dijitTabHover .dijitTabInnerDiv { + background: url("../images/tabContainerSprite.gif") no-repeat right -200px; + padding-left: 10px; + border-bottom: 1px solid #b9bbdd; +} + +.soria .dijitTabLabels-left-h { + padding-left: 2px; + padding-top: 3px; + background-color: #f0f4fc; + border-left: 1px solid #b1badf; + border-bottom: 1px solid #b1badf; + border-top: 1px solid #b1badf; + background: #F0F4FC url("../images/tabStripeLeft.gif") repeat-y right top; + padding-right: 3px; +} + +.soria .dijitAlignLeft .dijitTabInnerDiv .dijitTabContent { + padding:7px 10px 6px 10px !important; +} + +/* right specific classes */ +.soria .dijitTabLabels-right-h { + padding-right: 2px; + padding-top: 3px; + background-color: #f0f4fc; + border-right: 1px solid #b1badf; + border-bottom: 1px solid #b1badf; + border-top: 1px solid #b1badf; + background: #F0F4FC url("../images/tabStripeRight.gif") repeat-y left top; + padding-left: 3px; +} + +.soria .dijitAlignRight .dijitTab { + margin-left: 1px; +} + +.soria .dijitAlignRight .dijitTabChecked { + margin-left: 0px; +} + +.soria .dijitAlignRight .dijitTabChecked { + background: url("../images/tabRightChecked.gif") no-repeat left top !important; +} + +.soria .dijitAlignRight .dijitTab { + background: url("../images/tabContainerSprite.gif") no-repeat left -350px; +} +.soria .dijitAlignRight .dijitTabHover .dijitTab { + background: url("../images/tabContainerSprite.gif") no-repeat left -200px; +} +.soria .dijitAlignRight .dijitTabInnerDiv .dijitTabContent { + padding:7px 10px 6px 10px !important; +} + +.soria .dijitAlignRight .dijitTabChecked .dijitTabInnerDiv { + border-bottom: 1px solid #8ba0bd !important; +} + +.soria .dijitAlignRight .dijitTabInnerDiv { + border-bottom: 1px solid #b9bbdd; +} +.soria .dijitAlignRight .dijitTabHover .dijitTabInnerDiv { + border-bottom: 1px solid #b9bbdd; +} + +/* make space for a positioned close button */ +.soria .dijitTab .dijitClosable { + position: relative; + padding-left: 10px !important; + padding-right: 20px !important; +} + +.soria .dijitTab img { + padding: 0; + margin: 0; +} + +.soria .dijitTab .dijitClosable .closeImage { + position:absolute; + top: 5px; + right: 5px; + height: 15px; + width: 15px; + padding: 0; + margin: 0; + background: url("../images/spriteRoundedIconsSmallBl.png") no-repeat -60px top; +} +.dj_ie6 .dijitTab .dijitClosable .closeImage { + background:url("../images/spriteRoundedIconsSmallBl.gif") no-repeat -60px top; +} +.dj_ie6 .soria .dijitTabCloseButton .dijitClosable .closeImage { + background: url("../images/spriteRoundedIconsSmallBl.gif") no-repeat -60px top; +} + +.soria .dijitTabHover .dijitClosable .closeImage { + background: url("../images/spriteRoundedIconsSmallBl.png") no-repeat -60px -15px !important; +} +.dj_ie6 .soria .dijitTabHover .dijitClosable .closeImage { + background: url("../images/spriteRoundedIconsSmallBl.gif") no-repeat -60px -15px !important; +} + +/* correct for IE6. + We cant force hasLayout as that blows out the shrink wrapped tabs + ..so we shim in the closeImage position properties instead +*/ +.dj_ie6 .soria .dijitAlignLeft .dijitTab .dijitClosable .closeImage { + left:-20px; +} + +.soria .dijitAlignBottom .dijitTab .dijitClosable .closeImage { + top: auto; + bottom: 7px; + right: 3px; +} + +.soria .dijitAlignLeft .dijitTab .dijitClosable .closeImage { + top: 7px; + left: 3px; +} -- cgit v1.2.3