Skip to main content
MindTouch Success Center

Dialog variables

Dialogs are accessible by Pro Members only. They provide additional controls for features such as content management, link pickers, attaching images, etc.

Branding dialogs

dialog-import.png

dialog-move.png

Variables

@dialog-border-color
Default value: @highlight-color  
Definition: The border color of the dialog container.
Dialog1.png
 
@dialog-border-radius
Default value: .5em
Definition: The rounded corners of the dialog container.
Dialog2.png
 
@dialog-box-shadow
Default value: 0 0 1em fade(@default-button-border-color-hover, 25%)  
Definition: The glow that surrounds the outside of the dialog container. It is based off the site's highlight color.
Dialog3.png

Mixin

.dialog-style {
    border: 1px solid @dialog-border-color;
    border-radius: @dialog-border-radius;
    box-shadow: @dialog-box-shadow;
    box-sizing: border-box;
}

CSS

Here is an example of how the mixin is used in a rule set.

.ui-dialog {
    .dialog-style;
    background: @background;
    font-size: 95%;
    padding: 0;
}
  • Was this article helpful?