1/* Dialog
2 *
3 * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog
4 *
5 * Dialog:
6 * 1. Dialog (default styling):
7 * 		.dijitDialog - styles for dialog's bounding box
8 *
9 * 2. Dialog title
10 * 		.dijitDialogTitleBar - styles for the title container at the top of dialog
11 * 		.dijitDialogTitle - the text container in dialog title
12 *
13 * 3. Dialog content
14 * 		.dijitDialogPaneContent - main container for content area and action bar
15 * 		.dijitDialogPaneContentArea - styles for content container
16 *
17 * 4. Dialog action bar
18 * 		.dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content
19 *
20 * 5. Dialog underlay
21 * 		.dijitDialogUnderlay - div under the dialog which used for separate dialog and page content
22 *
23 *
24 * Tooltip & TooltipDialog:
25 * 1. tooltip content container:
26 * 		.dijitTooltipContainer - tooltip content container
27 *
28 * 2. tooltip connector:
29 * 		.dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right)
30 */
31
32@import "variables";
33
34.claro .dijitDialog {
35	border: 1px solid @popup-border-color;
36	.box-shadow(0 1px 5px rgba(0,0,0,0.25));
37}
38
39.claro .dijitDialogPaneContent {
40	background: @pane-background-color repeat-x top left;
41	border-top: 1px solid @popup-border-color;
42	padding:10px 8px;
43	position: relative;
44}
45
46.claro .dijitDialogPaneContentArea {
47	/* trick to get action bar (gray bar at bottom with OK/cancel buttons) to span from
48	 * left to right but still indent dialog content
49	 */
50	margin: -10px -8px;
51	padding: 10px 8px;
52}
53
54.claro .dijitDialogPaneActionBar {
55	/* gray bar at bottom of dialog with OK/Cancel buttons */
56	background-color: @bar-background-color;
57	padding: 3px 5px 2px 7px;
58	text-align: right;
59	border-top: 1px solid @minor-border-color;
60}
61.claro .dijitDialogPaneContent .dijitDialogPaneActionBar {
62	margin: 10px -8px -10px;	// Offsets 10px padding on dijitDialogPaneContent
63}
64
65.claro .dijitTooltipDialog .dijitDialogPaneActionBar {
66  -webkit-border-bottom-right-radius: 4px;
67  -webkit-border-bottom-left-radius: 4px;
68  border-bottom-right-radius: 4px;
69  border-bottom-left-radius: 4px;
70  -moz-border-radius-bottomright: 4px;
71  -moz-border-radius-bottomleft: 4px;
72  margin: 10px -10px -8px;
73}
74.claro .dijitDialogPaneActionBar .dijitButton {
75	float: none;
76}
77
78.claro .dijitDialogTitleBar {
79	/* outer container for the titlebar of the dialog */
80	border: 1px solid @dialog-titlebar-border-color;
81	border-top:none;
82	background-color: @dialog-titlebar-background-color;
83	.standard-gradient;
84	padding: 5px 7px 4px 7px;
85}
86
87.claro .dijitDialogTitle {
88	/* typography and styling of the dialog title */
89	padding: 0 1px;
90	font-size:1.091em;
91	color: @text-color;
92}
93
94.claro .dijitDialogCloseIcon {
95	/* the default close icon for the dialog */
96	background: url(@image-dialog-close);
97	background-repeat:no-repeat;
98	position: absolute;
99	right: 5px;
100	height: 15px;
101	width: 21px;
102}
103.dj_ie6 .claro .dijitDialogCloseIcon {
104	background-image: url(@image-dialog-close-ie6);
105}
106.claro .dijitDialogCloseIconHover {
107	background-position:-21px;
108}
109.claro .dijitDialogCloseIcon:active {
110	background-position:-42px;
111}
112
113/* Tooltip and TooltipDialog */
114
115.claro .dijitTooltip,
116.claro .dijitTooltipDialog {
117	/* the outermost dom node, holding the connector and container */
118	background: transparent;	/* make the area on the sides of the arrow transparent */
119}
120.dijitTooltipBelow {
121	/* leave room for arrow above content */
122	padding-top: 13px;
123	padding-left:3px;
124	padding-right:3px;
125}
126
127.dijitTooltipAbove {
128	/* leave room for arrow below content */
129	padding-bottom: 13px;
130	padding-left:3px;
131	padding-right:3px;
132}
133
134.claro .dijitTooltipContainer {
135	/* the part with the text */
136	background-color:@popup-background-color;
137	.linear-gradient(bottom, @tooltip-gradient-color 0px, @popup-background-color 10px);
138	background-position:bottom;
139	border:1px solid @popup-border-color;
140	padding:6px 8px;
141	.border-radius(4px);
142	.box-shadow(0 1px 3px rgba(0,0,0,0.25));
143	font-size: 1em;
144	color: @text-color;
145}
146
147.claro .dijitTooltipConnector {
148	/* the arrow piece */
149	border: 0;
150	z-index: 2;
151	background-image:url(@image-tooltip);
152	background-repeat:no-repeat;
153	width:16px;
154	height:14px;
155}
156.dj_ie6 .claro .dijitTooltipConnector {
157	background-image:url(@image-tooltip-ie6);
158}
159
160.claro .dijitTooltipBelow .dijitTooltipConnector {
161	/* the arrow piece for tooltips below an element */
162	top: 0;
163	left: 3px;
164	background-position:-31px 0;
165	width:16px;
166	height:14px;
167}
168
169.claro .dijitTooltipAbove .dijitTooltipConnector {
170	/* the arrow piece for tooltips above an element */
171	bottom: 0;
172	left: 3px;
173	background-position:-15px 0;
174	width:16px;
175	height:14px;
176}
177.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector,
178.dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector {
179	bottom: -1px;
180}
181
182.claro .dijitTooltipABRight .dijitTooltipConnector {
183	/* above or below tooltip, but the arrow appears on the right,
184		and the right edges of target and tooltip are aligned rather than the left.
185		Override above rules for .dijitTooltipBelow, .dijitTooltipAbove */
186	left: auto;
187	right: 3px;
188}
189
190
191.claro .dijitTooltipLeft {
192	padding-right: 14px;
193}
194.claro .dijitTooltipLeft .dijitTooltipConnector {
195	/* the arrow piece for tooltips to the left of an element, bottom borders aligned */
196	right: 0;
197	background-position:0 0;
198	width:16px;
199	height:14px;
200}
201
202.claro .dijitTooltipRight {
203	padding-left: 14px;
204}
205.claro .dijitTooltipRight .dijitTooltipConnector {
206	/* the arrow piece for tooltips to the right of an element, bottom borders aligned */
207	left: 0;
208	background-position:-48px 0;
209	width:16px;
210	height:14px;
211}
212
213.claro .dijitDialogUnderlay {
214	background: @dialog-underlay-color;
215}
216