1 files changed, 74 insertions, 0 deletions
diff --git a/lib/dijit/themes/claro/TitlePane.less b/lib/dijit/themes/claro/TitlePane.less
new file mode 100644
index 000000000..22bacca0f
--- /dev/null
+++ b/lib/dijit/themes/claro/TitlePane.less
@@ -0,0 +1,74 @@
+/* TitlePane 
+ * 
+ * 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
+ */
+
+@import "variables";
+
+.claro .dijitTitlePaneTitle {
+	background-color: @unselected-background-color;	// TODO: Mailed Jason, shouldn't this toggle to @selected-background-color when pane opened?
+	background-image: url("images/titlebar.png");
+	background-repeat:repeat-x;
+	border:1px solid @border-color;
+	padding: 0 7px 3px 7px;
+	min-height:17px;
+}
+.dj_ie6 .claro .dijitTitlePaneTitle {
+	background-image: none;
+}
+.claro .dijitTitlePaneTitleHover {
+	background-color: @hovered-background-color;
+	border-color: @hovered-border-color;
+}
+.claro .dijitTitlePaneTitleActive {
+	background-color: @pressed-background-color;
+	border-color: @pressed-border-color;
+	background-position:0 -136px;
+}
+.claro .dijitTitlePaneTitleFocus {
+	margin-top:3px;
+	padding-bottom:2px;
+}
+.claro .dijitTitlePane .dijitArrowNode {
+	background-image: url('images/spriteArrows.png');
+	background-repeat: no-repeat;
+	height: 8px;
+	width: 7px;
+}
+.claro .dijitTitlePane .dijitOpen .dijitArrowNode {
+	background-position: 0 0;
+}
+.claro .dijitTitlePane .dijitClosed .dijitArrowNode {
+	background-position: -14px 0;
+}
+.claro .dijitTitlePaneFocused .dijitTitlePaneTextNode {
+	color:@text-color;	/* TODO: do we need this?   we usually don't change text color on focus */
+}
+.claro .dijitTitlePaneContentOuter {
+	background: @pane-background-color;
+	border:1px solid @border-color;
+	border-top:none;
+}
+.claro .dijitTitlePaneContentInner {
+	padding:10px;
+}
+.claro .dijitTitlePaneTextNode {
+	margin-left: 4px;
+	margin-right: 4px;
+	vertical-align:text-top;
+}
+\ No newline at end of file