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 .dijitTooltipDialog .dijitDialogPaneActionBar {
  63   -webkit-border-bottom-right-radius: 4px;
  64   -webkit-border-bottom-left-radius: 4px;
  65   border-bottom-right-radius: 4px;
  66   border-bottom-left-radius: 4px;
  67   -moz-border-radius-bottomright: 4px;
  68   -moz-border-radius-bottomleft: 4px;
  69   margin: 10px -10px -8px;
  70 }
  71 .claro .dijitDialogPaneActionBar .dijitButton {
  72         float: none;
  73 }
  74
  75 .claro .dijitDialogTitleBar {
  76         /* outer container for the titlebar of the dialog */
  77         border: 1px solid @dialog-titlebar-border-color;
  78         border-top:none;
  79         background-color: @dialog-titlebar-background-color;
  80         .standard-gradient;
  81         padding: 5px 7px 4px 7px;
  82 }
  83
  84 .claro .dijitDialogTitle {
  85         /* typography and styling of the dialog title */
  86         padding: 0 1px;
  87         font-size:1.091em;
  88         color: @text-color;
  89 }
  90
  91 .claro .dijitDialogCloseIcon {
  92         /* the default close icon for the dialog */
  93         background: url(@image-dialog-close);
  94         background-repeat:no-repeat;
  95         position: absolute;
  96         right: 5px;
  97         height: 15px;
  98         width: 21px;
  99 }
 100 .dj_ie6 .claro .dijitDialogCloseIcon {
 101         background-image: url(@image-dialog-close-ie6);
 102 }
 103 .claro .dijitDialogCloseIconHover {
 104         background-position:-21px;
 105 }
 106 .claro .dijitDialogCloseIconActive {
 107         background-position:-42px;
 108 }
 109
 110 /* Tooltip and TooltipDialog */
 111
 112 .claro .dijitTooltip,
 113 .claro .dijitTooltipDialog {
 114         /* the outermost dom node, holding the connector and container */
 115         background: transparent;        /* make the area on the sides of the arrow transparent */
 116 }
 117 .dijitTooltipBelow {
 118         /* leave room for arrow above content */
 119         padding-top: 13px;
 120         padding-left:3px;
 121         padding-right:3px;
 122 }
 123
 124 .dijitTooltipAbove {
 125         /* leave room for arrow below content */
 126         padding-bottom: 13px;
 127         padding-left:3px;
 128         padding-right:3px;
 129 }
 130
 131 .claro .dijitTooltipContainer {
 132         /* the part with the text */
 133         background-color:@popup-background-color;
 134         .linear-gradient(bottom, @tooltip-gradient-color 0px, @popup-background-color 10px);
 135         background-position:bottom;
 136         border:1px solid @popup-border-color;
 137         padding:6px 8px;
 138         .border-radius(4px);
 139         .box-shadow(0 1px 3px rgba(0,0,0,0.25));
 140         font-size: 1em;
 141         color: @text-color;
 142 }
 143
 144 .claro .dijitTooltipConnector {
 145         /* the arrow piece */
 146         border: 0;
 147         z-index: 2;
 148         background-image:url(@image-tooltip);
 149         background-repeat:no-repeat;
 150         width:16px;
 151         height:14px;
 152 }
 153 .dj_ie6 .claro .dijitTooltipConnector {
 154         background-image:url(@image-tooltip-ie6);
 155 }
 156 .claro .dijitTooltipABRight .dijitTooltipConnector {
 157         /* above or below tooltip, but the arrow appears on the right,
 158                 and the right edges of target and tooltip are aligned rather than the left */
 159         left: auto !important;
 160         right: 3px;
 161 }
 162
 163 .claro .dijitTooltipBelow .dijitTooltipConnector {
 164         /* the arrow piece for tooltips below an element */
 165         top: 0;
 166         left: 3px;
 167         background-position:-31px 0;
 168         width:16px;
 169         height:14px;
 170 }
 171
 172 .claro .dijitTooltipAbove .dijitTooltipConnector {
 173         /* the arrow piece for tooltips above an element */
 174         bottom: 0;
 175         left: 3px;
 176         background-position:-15px 0;
 177         width:16px;
 178         height:14px;
 179 }
 180 .dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector,
 181 .dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector {
 182         bottom: -1px;
 183 }
 184
 185 .claro .dijitTooltipLeft {
 186         padding-right: 14px;
 187 }
 188 .claro .dijitTooltipLeft .dijitTooltipConnector {
 189         /* the arrow piece for tooltips to the left of an element, bottom borders aligned */
 190         right: 0;
 191         background-position:0 0;
 192         width:16px;
 193         height:14px;
 194 }
 195
 196 .claro .dijitTooltipRight {
 197         padding-left: 14px;
 198 }
 199 .claro .dijitTooltipRight .dijitTooltipConnector {
 200         /* the arrow piece for tooltips to the right of an element, bottom borders aligned */
 201         left: 0;
 202         background-position:-48px 0;
 203         width:16px;
 204         height:14px;
 205 }
 206
 207 .claro .dijitDialogUnderlay {
 208         background: @dialog-underlay-color;
 209 }