lib/dijit/themes/claro/Dialog.less

   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 }