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