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