3 * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog
6 * 1. Dialog (default styling):
7 * .dijitDialog - styles for dialog's bounding box
10 * .dijitDialogTitleBar - styles for the title container at the top of dialog
11 * .dijitDialogTitle - the text container in dialog title
14 * .dijitDialogPaneContent - main container for content area and action bar
15 * .dijitDialogPaneContentArea - styles for content container
17 * 4. Dialog action bar
18 * .dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content
21 * .dijitDialogUnderlay - div under the dialog which used for separate dialog and page content
24 * Tooltip & TooltipDialog:
25 * 1. tooltip content container:
26 * .dijitTooltipContainer - tooltip content container
28 * 2. tooltip connector:
29 * .dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right)
35 border: 1px solid @popup-border-color;
36 .box-shadow(0 1px 5px rgba(0,0,0,0.25));
39 .claro .dijitDialogPaneContent {
40 background: @pane-background-color repeat-x top left;
41 border-top: 1px solid @popup-border-color;
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
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;
59 border-top: 1px solid @minor-border-color;
60 margin: 10px -8px -10px;
62 .claro .dijitTooltipDialog .dijitDialogPaneActionBar {
63 -webkit-border-bottom-right-radius: 4px;
64 -webkit-border-bottom-left-radius: 4px;
65 border-bottom-right-radius: 4px;
66 border-bottom-left-radius: 4px;
67 -moz-border-radius-bottomright: 4px;
68 -moz-border-radius-bottomleft: 4px;
69 margin: 10px -10px -8px;
71 .claro .dijitDialogPaneActionBar .dijitButton {
75 .claro .dijitDialogTitleBar {
76 /* outer container for the titlebar of the dialog */
77 border: 1px solid @dialog-titlebar-border-color;
79 background-color: @dialog-titlebar-background-color;
81 padding: 5px 7px 4px 7px;
84 .claro .dijitDialogTitle {
85 /* typography and styling of the dialog title */
91 .claro .dijitDialogCloseIcon {
92 /* the default close icon for the dialog */
93 background: url(@image-dialog-close);
94 background-repeat:no-repeat;
100 .dj_ie6 .claro .dijitDialogCloseIcon {
101 background-image: url(@image-dialog-close-ie6);
103 .claro .dijitDialogCloseIconHover {
104 background-position:-21px;
106 .claro .dijitDialogCloseIconActive {
107 background-position:-42px;
110 /* Tooltip and TooltipDialog */
112 .claro .dijitTooltip,
113 .claro .dijitTooltipDialog {
114 /* the outermost dom node, holding the connector and container */
115 background: transparent; /* make the area on the sides of the arrow transparent */
118 /* leave room for arrow above content */
125 /* leave room for arrow below content */
126 padding-bottom: 13px;
131 .claro .dijitTooltipContainer {
132 /* the part with the text */
133 background-color:@popup-background-color;
134 .linear-gradient(bottom, @tooltip-gradient-color 0px, @popup-background-color 10px);
135 background-position:bottom;
136 border:1px solid @popup-border-color;
139 .box-shadow(0 1px 3px rgba(0,0,0,0.25));
144 .claro .dijitTooltipConnector {
145 /* the arrow piece */
148 background-image:url(@image-tooltip);
149 background-repeat:no-repeat;
153 .dj_ie6 .claro .dijitTooltipConnector {
154 background-image:url(@image-tooltip-ie6);
156 .claro .dijitTooltipABRight .dijitTooltipConnector {
157 /* above or below tooltip, but the arrow appears on the right,
158 and the right edges of target and tooltip are aligned rather than the left */
159 left: auto !important;
163 .claro .dijitTooltipBelow .dijitTooltipConnector {
164 /* the arrow piece for tooltips below an element */
167 background-position:-31px 0;
172 .claro .dijitTooltipAbove .dijitTooltipConnector {
173 /* the arrow piece for tooltips above an element */
176 background-position:-15px 0;
180 .dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector,
181 .dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector {
185 .claro .dijitTooltipLeft {
188 .claro .dijitTooltipLeft .dijitTooltipConnector {
189 /* the arrow piece for tooltips to the left of an element, bottom borders aligned */
191 background-position:0 0;
196 .claro .dijitTooltipRight {
199 .claro .dijitTooltipRight .dijitTooltipConnector {
200 /* the arrow piece for tooltips to the right of an element, bottom borders aligned */
202 background-position:-48px 0;
207 .claro .dijitDialogUnderlay {
208 background: @dialog-underlay-color;