diff options
Diffstat (limited to 'lib/dijit/themes/claro/Dialog.css')
| -rw-r--r-- | lib/dijit/themes/claro/Dialog.css | 265 |
1 files changed, 153 insertions, 112 deletions
diff --git a/lib/dijit/themes/claro/Dialog.css b/lib/dijit/themes/claro/Dialog.css index 10b513485..119900eca 100644 --- a/lib/dijit/themes/claro/Dialog.css +++ b/lib/dijit/themes/claro/Dialog.css @@ -1,162 +1,203 @@ - +/* Dialog + * + * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog + * + * Dialog: + * 1. Dialog (default styling): + * .dijitDialog - styles for dialog's bounding box + * + * 2. Dialog title + * .dijitDialogTitleBar - styles for the title container at the top of dialog + * .dijitDialogTitle - the text container in dialog title + * + * 3. Dialog content + * .dijitDialogPaneContent - main container for content area and action bar + * .dijitDialogPaneContentArea - styles for content container + * + * 4. Dialog action bar + * .dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content + * + * 5. Dialog underlay + * .dijitDialogUnderlay - div under the dialog which used for separate dialog and page content + * + * + * Tooltip & TooltipDialog: + * 1. tooltip content container: + * .dijitTooltipContainer - tooltip content container + * + * 2. tooltip connector: + * .dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right) + */ .claro .dijitDialog { - border: 1px solid #769dc0; - box-shadow:0px 1px 5px rgba(0,0,0,0.25); - -webkit-box-shadow:0px 1px 5px rgba(0,0,0,0.25); - -moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.25); -} + border: 1px solid #769dc0; + -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); +} .claro .dijitDialogPaneContent { - background: #fff repeat-x top left; - border-top: 1px solid #769dc0; - padding:10px 8px; - position: relative; + background: #ffffff repeat-x top left; + border-top: 1px solid #769dc0; + padding: 10px 8px; + position: relative; } .claro .dijitDialogPaneContentArea { - - margin: -10px -8px; - padding: 10px 8px; + /* trick to get action bar (gray bar at bottom with OK/cancel buttons) to span from + * left to right but still indent dialog content + */ + margin: -10px -8px; + padding: 10px 8px; } .claro .dijitDialogPaneActionBar { - - background-color: #f2f2f2; - padding: 3px 5px 2px 7px; - text-align: right; - border-top: 1px solid #cdcdcd; - margin: 10px -8px -10px; + /* gray bar at bottom of dialog with OK/Cancel buttons */ + + background-color: #efefef; + padding: 3px 5px 2px 7px; + text-align: right; + border-top: 1px solid #d3d3d3; + margin: 10px -8px -10px; } .claro .dijitDialogPaneActionBar .dijitButton { - float: none; + float: none; } .claro .dijitDialogTitleBar { - - border: 1px solid #fff; - border-top:none; - background-color: #abd6ff; - background-image: url("images/titlebar.png"); - background-repeat:repeat-x; - padding: 5px 7px 4px 7px; + /* outer container for the titlebar of the dialog */ + + border: 1px solid #ffffff; + border-top: none; + background-color: #abd6ff; + background-image: url("images/titlebar.png"); + background-repeat: repeat-x; + padding: 5px 7px 4px 7px; } .claro .dijitDialogTitle { - - padding: 0px 1px; - font-size:1.091em; + /* typography and styling of the dialog title */ + + padding: 0 1px; + font-size: 1.091em; } .claro .dijitDialogCloseIcon { - - background: url("images/dialogCloseIcon.png"); - background-repeat:no-repeat; - position: absolute; - right: 5px; - height: 15px; - width: 21px; + /* the default close icon for the dialog */ + + background: url("images/dialogCloseIcon.png"); + background-repeat: no-repeat; + position: absolute; + right: 5px; + height: 15px; + width: 21px; } .dj_ie6 .claro .dijitDialogCloseIcon { - background-image: url("images/dialogCloseIcon8bit.png"); + background-image: url("images/dialogCloseIcon8bit.png"); } .claro .dijitDialogCloseIconHover { - background-position:-21px; + background-position: -21px; } .claro .dijitDialogCloseIconActive { - background-position:-42px; + background-position: -42px; } -.claro .dijitTooltip, -.claro .dijitTooltipDialog { - - background: transparent; +/* Tooltip and TooltipDialog */ +.claro .dijitTooltip, .claro .dijitTooltipDialog { + /* the outermost dom node, holding the connector and container */ + + background: transparent; + /* make the area on the sides of the arrow transparent */ + } .dijitTooltipBelow { - - padding-top: 13px; - padding-left:3px; - padding-right:3px; + /* leave room for arrow above content */ + + padding-top: 13px; + padding-left: 3px; + padding-right: 3px; } .dijitTooltipAbove { - - padding-bottom: 13px; - padding-left:3px; - padding-right:3px; + /* leave room for arrow below content */ + + padding-bottom: 13px; + padding-left: 3px; + padding-right: 3px; } .claro .dijitTooltipContainer { - - background-color:#fff; - background-image:url("images/tooltip.png"); - background-repeat:repeat-x; - background-position:-575px 100%; - border:1px solid #769DC0; - padding:6px 8px; - border-radius: 4px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - box-shadow:0px 1px 3px rgba(0,0,0,0.25); - -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.25); - -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25); - font-size: 1em; -} + /* the part with the text */ + + background-color: #ffffff; + background-image: url("images/tooltipGradient.png"); + background-repeat: repeat-x; + background-position: bottom; + border: 1px solid #769dc0; + padding: 6px 8px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + font-size: 1em; +} .dj_ie6 .claro .dijitTooltipContainer { - background-image: none; + background-image: none; } .claro .dijitTooltipConnector { - - border: 0px; - z-index: 2; - background-image:url("images/tooltip.png"); - background-repeat:no-repeat; - width:16px; - height:14px; + /* the arrow piece */ + + border: 0; + z-index: 2; + background-image: url("images/tooltip.png"); + background-repeat: no-repeat; + width: 16px; + height: 14px; } .dj_ie6 .claro .dijitTooltipConnector { - background-image:url("images/tooltip8bit.png"); + background-image: url("images/tooltip8bit.png"); } .claro .dijitTooltipABRight .dijitTooltipConnector { - - left: auto !important; - right: 3px; + /* above or below tooltip, but the arrow appears on the right, + and the right edges of target and tooltip are aligned rather than the left */ + + left: auto !important; + right: 3px; } .claro .dijitTooltipBelow .dijitTooltipConnector { - - top: 0px; - left: 3px; - background-position:-31px 0%; - width:16px; - height:14px; + /* the arrow piece for tooltips below an element */ + + top: 0; + left: 3px; + background-position: -31px 0; + width: 16px; + height: 14px; } .claro .dijitTooltipAbove .dijitTooltipConnector { - - bottom: 0px; - left: 3px; - background-position:-15px 0%; - width:16px; - height:14px; + /* the arrow piece for tooltips above an element */ + + bottom: 0; + left: 3px; + background-position: -15px 0; + width: 16px; + height: 14px; } -.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector, -.dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector { - bottom: -1px; +.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector, .dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector { + bottom: -1px; } .claro .dijitTooltipLeft { - padding-right: 14px; -} -.dj_ie6 .claro .dijitTooltipLeft { - padding-left: 15px; + padding-right: 14px; } .claro .dijitTooltipLeft .dijitTooltipConnector { - - right: 0px; - bottom: 3px; - background-position:0px 0%; - width:16px; - height:14px; + /* the arrow piece for tooltips to the left of an element, bottom borders aligned */ + + right: 0; + background-position: 0 0; + width: 16px; + height: 14px; } .claro .dijitTooltipRight { - padding-left: 14px; + padding-left: 14px; } .claro .dijitTooltipRight .dijitTooltipConnector { - - left: 0px; - bottom: 3px; - background-position:-48px 0%; - width:16px; - height:14px; + /* the arrow piece for tooltips to the right of an element, bottom borders aligned */ + + left: 0; + background-position: -48px 0; + width: 16px; + height: 14px; } .claro .dijitDialogUnderlay { - background: #fff; + background: #ffffff; } |