summaryrefslogtreecommitdiff
path: root/lib/viewers/odf/editor/dijit/themes/claro/Dialog.less
diff options
context:
space:
mode:
Diffstat (limited to 'lib/viewers/odf/editor/dijit/themes/claro/Dialog.less')
-rw-r--r--lib/viewers/odf/editor/dijit/themes/claro/Dialog.less209
1 files changed, 209 insertions, 0 deletions
diff --git a/lib/viewers/odf/editor/dijit/themes/claro/Dialog.less b/lib/viewers/odf/editor/dijit/themes/claro/Dialog.less
new file mode 100644
index 0000000..8b5b386
--- /dev/null
+++ b/lib/viewers/odf/editor/dijit/themes/claro/Dialog.less
@@ -0,0 +1,209 @@
+/* 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;
+}