diff options
Diffstat (limited to 'js/dojo/dijit/themes/claro/Dialog.css')
| -rw-r--r-- | js/dojo/dijit/themes/claro/Dialog.css | 205 |
1 files changed, 205 insertions, 0 deletions
diff --git a/js/dojo/dijit/themes/claro/Dialog.css b/js/dojo/dijit/themes/claro/Dialog.css new file mode 100644 index 0000000..ae0b18d --- /dev/null +++ b/js/dojo/dijit/themes/claro/Dialog.css @@ -0,0 +1,205 @@ +/* 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 #759dc0; + -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: #ffffff repeat-x top left; + border-top: 1px solid #759dc0; + padding: 10px 8px; + position: relative; +} +.claro .dijitDialogPaneContentArea { + /* 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 { + /* 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; +} +.claro .dijitDialogTitleBar { + /* 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 { + /* typography and styling of the dialog title */ + + padding: 0 1px; + font-size: 1.091em; + color: #000000; +} +.claro .dijitDialogCloseIcon { + /* 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"); +} +.claro .dijitDialogCloseIconHover { + background-position: -21px; +} +.claro .dijitDialogCloseIconActive { + background-position: -42px; +} +/* 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 { + /* leave room for arrow above content */ + + padding-top: 13px; + padding-left: 3px; + padding-right: 3px; +} +.dijitTooltipAbove { + /* leave room for arrow below content */ + + padding-bottom: 13px; + padding-left: 3px; + padding-right: 3px; +} +.claro .dijitTooltipContainer { + /* the part with the text */ + + background-color: #ffffff; + background-image: url("images/tooltipGradient.png"); + background-repeat: repeat-x; + background-position: bottom; + border: 1px solid #759dc0; + 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; + color: #000000; +} +.dj_ie6 .claro .dijitTooltipContainer { + background-image: none; +} +.claro .dijitTooltipConnector { + /* 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"); +} +.claro .dijitTooltipABRight .dijitTooltipConnector { + /* 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 { + /* the arrow piece for tooltips below an element */ + + top: 0; + left: 3px; + background-position: -31px 0; + width: 16px; + height: 14px; +} +.claro .dijitTooltipAbove .dijitTooltipConnector { + /* 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; +} +.claro .dijitTooltipLeft { + padding-right: 14px; +} +.claro .dijitTooltipLeft .dijitTooltipConnector { + /* 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; +} +.claro .dijitTooltipRight .dijitTooltipConnector { + /* 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: #ffffff; +} |
