diff options
Diffstat (limited to 'lib/dijit/themes/claro/Dialog.less')
| -rw-r--r-- | lib/dijit/themes/claro/Dialog.less | 203 |
1 files changed, 203 insertions, 0 deletions
diff --git a/lib/dijit/themes/claro/Dialog.less b/lib/dijit/themes/claro/Dialog.less new file mode 100644 index 000000000..ff5c1e656 --- /dev/null +++ b/lib/dijit/themes/claro/Dialog.less @@ -0,0 +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) + */ + +@import "variables"; + +.claro .dijitDialog { + border: 1px solid @popup-border-color; + .box-shadow(0 1px 5px rgba(0,0,0,0.25)); +} + +.claro .dijitDialogPaneContent { + background: @pane-background-color repeat-x top left; + border-top: 1px solid @popup-border-color; + 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: @bar-background-color; + padding: 3px 5px 2px 7px; + text-align: right; + border-top: 1px solid @minor-border-color; + margin: 10px -8px -10px; +} +.claro .dijitDialogPaneActionBar .dijitButton { + float: none; +} + +.claro .dijitDialogTitleBar { + /* outer container for the titlebar of the dialog */ + border: 1px solid @dialog-titlebar-border-color; + border-top:none; + background-color: @dialog-titlebar-background-color; + 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; +} + +.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:@popup-background-color; + background-image:url("images/tooltipGradient.png"); + background-repeat:repeat-x; + background-position:bottom; + border:1px solid @popup-border-color; + padding:6px 8px; + .border-radius(4px); + .box-shadow(0 1px 3px rgba(0,0,0,0.25)); + font-size: 1em; +} + +.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: @dialog-underlay-color; +} |