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	margin: 10px -8px -10px;
61}
62.claro .dijitDialogPaneActionBar .dijitButton {
63	float: none;
64}
65
66.claro .dijitDialogTitleBar {
67	/* outer container for the titlebar of the dialog */
68	border: 1px solid @dialog-titlebar-border-color;
69	border-top:none;
70	background-color: @dialog-titlebar-background-color;
71	background-image: url(@image-titlebar);
72	background-repeat:repeat-x;
73	padding: 5px 7px 4px 7px;
74}
75
76.claro .dijitDialogTitle {
77	/* typography and styling of the dialog title */
78	padding: 0 1px;
79	font-size:1.091em;
80	color: @text-color;
81}
82
83.claro .dijitDialogCloseIcon {
84	/* the default close icon for the dialog */
85	background: url(@image-dialog-close);
86	background-repeat:no-repeat;
87	position: absolute;
88	right: 5px;
89	height: 15px;
90	width: 21px;
91}
92.dj_ie6 .claro .dijitDialogCloseIcon {
93	background-image: url(@image-dialog-close-ie6);
94}
95.claro .dijitDialogCloseIconHover {
96	background-position:-21px;
97}
98.claro .dijitDialogCloseIconActive {
99	background-position:-42px;
100}
101
102/* Tooltip and TooltipDialog */
103
104.claro .dijitTooltip,
105.claro .dijitTooltipDialog {
106	/* the outermost dom node, holding the connector and container */
107	background: transparent;	/* make the area on the sides of the arrow transparent */
108}
109.dijitTooltipBelow {
110	/* leave room for arrow above content */
111	padding-top: 13px;
112	padding-left:3px;
113	padding-right:3px;
114}
115
116.dijitTooltipAbove {
117	/* leave room for arrow below content */
118	padding-bottom: 13px;
119	padding-left:3px;
120	padding-right:3px;
121}
122
123.claro .dijitTooltipContainer {
124	/* the part with the text */
125	background-color:@popup-background-color;
126	background-image:url(@image-tooltip-gradient);
127	background-repeat:repeat-x;
128	background-position:bottom;
129	border:1px solid @popup-border-color;
130	padding:6px 8px;
131	.border-radius(4px);
132	.box-shadow(0 1px 3px rgba(0,0,0,0.25));
133	font-size: 1em;
134	color: @text-color;
135}
136
137.dj_ie6 .claro .dijitTooltipContainer {
138	background-image: none;
139}
140.claro .dijitTooltipConnector {
141	/* the arrow piece */
142	border: 0;
143	z-index: 2;
144	background-image:url(@image-tooltip);
145	background-repeat:no-repeat;
146	width:16px;
147	height:14px;
148}
149.dj_ie6 .claro .dijitTooltipConnector {
150	background-image:url(@image-tooltip-ie6);
151}
152.claro .dijitTooltipABRight .dijitTooltipConnector {
153	/* above or below tooltip, but the arrow appears on the right,
154		and the right edges of target and tooltip are aligned rather than the left */
155	left: auto !important;
156	right: 3px;
157}
158
159.claro .dijitTooltipBelow .dijitTooltipConnector {
160	/* the arrow piece for tooltips below an element */
161	top: 0;
162	left: 3px;
163	background-position:-31px 0;
164	width:16px;
165	height:14px;
166}
167
168.claro .dijitTooltipAbove .dijitTooltipConnector {
169	/* the arrow piece for tooltips above an element */
170	bottom: 0;
171	left: 3px;
172	background-position:-15px 0;
173	width:16px;
174	height:14px;
175}
176.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector,
177.dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector {
178	bottom: -1px;
179}
180
181.claro .dijitTooltipLeft {
182	padding-right: 14px;
183}
184.claro .dijitTooltipLeft .dijitTooltipConnector {
185	/* the arrow piece for tooltips to the left of an element, bottom borders aligned */
186	right: 0;
187	background-position:0 0;
188	width:16px;
189	height:14px;
190}
191
192.claro .dijitTooltipRight {
193	padding-left: 14px;
194}
195.claro .dijitTooltipRight .dijitTooltipConnector {
196	/* the arrow piece for tooltips to the right of an element, bottom borders aligned */
197	left: 0;
198	background-position:-48px 0;
199	width:16px;
200	height:14px;
201}
202
203.claro .dijitDialogUnderlay {
204	background: @dialog-underlay-color;
205}
206