mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-12 17:50:42 +01:00
5917a70dcc
- Add wodocollabtexteditor library
210 lines
5.3 KiB
Plaintext
210 lines
5.3 KiB
Plaintext
/* 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 .dijitTooltipDialog .dijitDialogPaneActionBar {
|
|
-webkit-border-bottom-right-radius: 4px;
|
|
-webkit-border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
-moz-border-radius-bottomright: 4px;
|
|
-moz-border-radius-bottomleft: 4px;
|
|
margin: 10px -10px -8px;
|
|
}
|
|
.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;
|
|
.standard-gradient;
|
|
padding: 5px 7px 4px 7px;
|
|
}
|
|
|
|
.claro .dijitDialogTitle {
|
|
/* typography and styling of the dialog title */
|
|
padding: 0 1px;
|
|
font-size:1.091em;
|
|
color: @text-color;
|
|
}
|
|
|
|
.claro .dijitDialogCloseIcon {
|
|
/* the default close icon for the dialog */
|
|
background: url(@image-dialog-close);
|
|
background-repeat:no-repeat;
|
|
position: absolute;
|
|
right: 5px;
|
|
height: 15px;
|
|
width: 21px;
|
|
}
|
|
.dj_ie6 .claro .dijitDialogCloseIcon {
|
|
background-image: url(@image-dialog-close-ie6);
|
|
}
|
|
.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;
|
|
.linear-gradient(bottom, @tooltip-gradient-color 0px, @popup-background-color 10px);
|
|
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;
|
|
color: @text-color;
|
|
}
|
|
|
|
.claro .dijitTooltipConnector {
|
|
/* the arrow piece */
|
|
border: 0;
|
|
z-index: 2;
|
|
background-image:url(@image-tooltip);
|
|
background-repeat:no-repeat;
|
|
width:16px;
|
|
height:14px;
|
|
}
|
|
.dj_ie6 .claro .dijitTooltipConnector {
|
|
background-image:url(@image-tooltip-ie6);
|
|
}
|
|
.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;
|
|
}
|