From 2f01fe57a8d37767827d6db42850aef86a767c53 Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Mon, 15 Nov 2010 10:39:52 +0300 Subject: add dijit/dojo stuff; initial ui mockup --- lib/dijit/themes/claro/layout/TabContainer.css | 348 +++++++++++++++++++++++++ 1 file changed, 348 insertions(+) create mode 100644 lib/dijit/themes/claro/layout/TabContainer.css (limited to 'lib/dijit/themes/claro/layout/TabContainer.css') diff --git a/lib/dijit/themes/claro/layout/TabContainer.css b/lib/dijit/themes/claro/layout/TabContainer.css new file mode 100644 index 000000000..95fe2c262 --- /dev/null +++ b/lib/dijit/themes/claro/layout/TabContainer.css @@ -0,0 +1,348 @@ + +.claro .dijitTabPaneWrapper { + background:#fff; +} +.claro .dijitTabPaneWrapper, +.claro .dijitTabContainerTop-tabs, +.claro .dijitTabContainerBottom-tabs, +.claro .dijitTabContainerLeft-tabs, +.claro .dijitTabContainerRight-tabs { + + border-color: #b5bcc7; +} +.claro .dijitTabCloseButton { + background: url("images/tabClose.png") no-repeat; + width: 14px; + height: 14px; + margin-left: 5px; + margin-right:-3px; +} +.claro .dijitTabCloseButtonHover { + background-position:-14px; +} +.claro .dijitTabCloseButtonActive { + background-position:-28px; +} +.claro .dijitTabSpacer { + + display: none; +} +.claro .dijitTabInnerDiv { + background-color:#e6e6e7; + -webkit-transition-property:background-color, border; + -webkit-transition-duration:.35s; + color:#4a4a4a; +} +.claro .dijitTabHover .dijitTabInnerDiv { + background-color:#a9d6ff; + -webkit-transition-duration:.25s; + color:#000; +} +.claro .dijitTabActive .dijitTabInnerDiv { + background-color:#8bc4f9; + color:#000; + -webkit-transition-duration:.1s; +} +.claro .dijitTabChecked .dijitTabInnerDiv { + background-color:#b2d4f3; + color:#000; +} +.claro .dijitTabContent { + border: 1px solid #b5bcc7; +} +.claro .dijitTabHover .dijitTabContent, +.claro .dijitTabActive .dijitTabContent { + border-color: #769dc0; +} +.claro .dijitTabChecked .dijitTabContent { + color:#000; + border-color: #b5bcc7; +} +.claro .tabStripButton .dijitTabInnerDiv { + background-color: transparent; +} +.claro .tabStripButton .dijitTabContent { + border: none; +} +.claro .dijitTabContainerTop-tabs .dijitTab { + top: 1px; + margin-right: 1px; + padding-top: 3px; +} +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab { + top: 3px; +} +.claro .dijitTabContainerTop-tabs .dijitTabContent { + padding:3px 8px 3px 4px; + border-bottom: 1px; + background-image:url("images/tabTop.png"); + background-position:0px 0px; + background-repeat:repeat-x; + min-width: 60px; + text-align: center; +} +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { + padding-bottom: 4px; + padding-top: 6px; +} +.dj_ie .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { + border-bottom: none; +} +.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv { + background-image:url("images/tabTop.png"); + background-position:0px -248px; + background-position:bottom; + background-repeat:repeat-x; + box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); + -webkit-box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); + -moz-box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); +} +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { + background-image:none; + box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); + -webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); +} +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { + background-position:0px -102px; + background-repeat:repeat-x; +} +.claro .dijitTabContainerBottom-tabs .dijitTab { + top: -1px; + margin-right: 1px; +} +.claro .dijitTabContainerBottom-tabs .dijitTabContent { + padding:3px 8px 4px 4px; + border-top: none; + background-image: url("images/tabBottom.png"); + background-position:0px -249px; + background-repeat: repeat-x; + background-position:bottom; + min-width: 60px; + text-align: center; +} +.claro .dijitTabContainerBottom-tabs .dijitTab { + padding-bottom: 3px; +} +.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv { + background-image: url("images/tabBottom.png"); + background-position: top; + background-repeat: repeat-x; + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); + -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); + -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); + +} +.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent { + padding-bottom: 7px; + padding-top: 4px; + background-position:0px -119px; +} +.claro .dijitTabContainerBottom-tabs .dijitTabChecked { + padding-bottom: 0; +} +.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv { + background-image:none; + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); + -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); +} +.claro .dijitTabContainerLeft-tabs .dijitTab { + left: 1px; + margin-bottom: 1px; +} +.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv { + background-image: url("images/tabLeft.png"); + background-position: -347px -340px; + background-repeat: repeat-y; +} +.claro .dijitTabContainerLeft-tabs .dijitTabContent { + padding:3px 8px 4px 4px; + background-image: url("images/tabLeft.png"); + background-repeat: repeat-y; + background-position:0px 0px; +} +.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent { + padding-right: 9px; + border-right: none; + background-image: none; +} +.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv { + background-position:0px -179px; + background-repeat:repeat-y; + box-shadow: -1px 0px 2px rgba(0, 0, 0, .05); + -webkit-box-shadow: -1px 0px 2px rgba(0, 0, 0, .05); + -moz-box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.05); +} +.claro .dijitTabContainerRight-tabs .dijitTab { + left: -1px; + margin-bottom: 1px; +} +.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv { + background-image: url("images/tabRight.png"); + background-repeat: repeat-y; + background-position: -1px -347px; +} +.claro .dijitTabContainerRight-tabs .dijitTabContent { + padding:3px 8px 4px 4px; + background-image: url("images/tabRight.png"); + background-position:right top; + background-repeat: repeat-y; +} +.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent { + padding-left: 5px; + border-left: none; + background-image: none; +} +.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv { + background-position:-348px -179px; + box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); + -webkit-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); + -moz-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); +} +.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerTop-tabs .dijitTabContent { + border-radius: 2px 2px 0px 0px; + -moz-border-radius: 2px 2px 0px 0px; + -webkit-border-top-left-radius:2px; + -webkit-border-top-right-radius:2px; +} +.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerBottom-tabs .dijitTabContent{ + border-radius: 0px 0px 2px 2px; + -moz-border-radius: 0px 0px 2px 2px; + -webkit-border-bottom-right-radius:2px; + -webkit-border-bottom-left-radius:2px; +} +.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerLeft-tabs .dijitTabContent{ + border-radius: 2px 0px 0px 2px; + -moz-border-radius: 2px 0px 0px 2px; + -webkit-border-top-left-radius:2px; + -webkit-border-bottom-left-radius:2px; +} +.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerRight-tabs .dijitTabContent{ + border-radius: 0px 2px 2px 0px; + -moz-border-radius: 0px 2px 2px 0px; + -webkit-border-top-right-radius:2px; + -webkit-border-bottom-right-radius:2px; +} +.claro .tabStripButton { + background-color:#deecf9; + border: 1px solid #b5bcc7; +} +.claro .dijitTabListContainer-top .tabStripButton { + padding: 4px 3px; + margin-top:7px; + background-image: url("images/tabTop.png"); + background-position:0px 0px; +} +.claro .dijitTabListContainer-bottom .tabStripButton { + padding:5px 3px; + margin-bottom:4px; + background-image: url("images/tabTop.png"); + background-position:0px -248px; + background-position:bottom; +} +.claro .tabStripButtonHover { + background-color:#a6d2fb; +} +.claro .tabStripButtonActive { + background-color:#7dbefa; +} +.claro .dijitTabStripIcon { + height:15px; + width:15px; + margin: 0 auto; + background:url("../form/images/buttonArrows.png") no-repeat -75px 50%; + background-color: transparent; +} +.claro .dijitTabStripSlideRightIcon{ + background-position: -24px 50%; +} +.claro .dijitTabStripMenuIcon { + background-position: -51px 50%; +} +.claro .dijitTabListContainer-top .tabStripButtonDisabled, +.claro .dijitTabListContainer-bottom .tabStripButtonDisabled { + background-color:#dddddd; + border:1px solid #c9c9c9; +} +.claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon { + background-position:-175px 50%; +} +.claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon { + background-position: -124px 50%; +} +.claro .tabStripButtonDisabled .dijitTabStripMenuIcon { + background-position: -151px 50%; +} +.claro .dijitTabContainerNested .dijitTabListWrapper { + height: auto; +} +.claro .dijitTabContainerNested .dijitTabContainerTop-tabs { + border-bottom:solid 1px #b5bcc7; + padding:1px 2px 4px; + margin-top:-2px; +} +.claro .dijitTabContainerTabListNested .dijitTabContent { + background:rgba(255, 255, 255, 0) none repeat scroll 0 0; + border: none; + padding: 4px; + border-color: rgba(118,157,192,0); + -webkit-transition-property:background-color, border-color; + -webkit-transition-duration:.3s; +} +.claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv { + + background: none; + border: none; + top: 0px; + box-shadow: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; +} +.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent { + background-color:#eaf4fc; + border-radius: 2px 2px 2px 2px; + -moz-border-radius: 2px 2px 2px 2px; + -webkit-border-radius:2px; + border:solid 1px #c8dff3; + padding: 3px; + webkit-transition-duration:.2s; +} +.claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel { + text-decoration: none; +} +.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent { + border-radius: 2px 2px 2px 2px; + -moz-border-radius: 2px 2px 2px 2px; + -webkit-border-radius:2px; + border:solid 1px #a8c7e2; + padding: 3px; + background:#b9d9f5 url("images/tabNested.png") repeat-x; + -webkit-transition-duration:.1s; +} +.claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent { + border-radius: 2px 2px 2px 2px; + -moz-border-radius: 2px 2px 2px 2px; + -webkit-border-radius:2px; + padding: 3px; + border:solid 1px #a8c7e2; + background-position: 0px 105px; + background-color:#d4e8f9; +} +.claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel { + text-decoration: none; + background-image:none; +} +.claro .dijitTabPaneWrapperNested { + border: none; +} +.dj_ie6 .claro .dijitTabContent, +.dj_ie6 .claro .dijitTabInnerDiv, +.dj_ie6 .dijitTabListContainer-top .tabStripButton, +.dj_ie6 .dijitTabListContainer-bottom .tabStripButton{ + background-image: none; +} -- cgit v1.2.3