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