You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
308 lines
8.6 KiB
308 lines
8.6 KiB
/* 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 'dijit_variables'; |
|
|
|
.{$theme-name} { |
|
|
|
/* ----- Dialog ----- */ |
|
|
|
.dijitDialog { |
|
background-color: $dialog-background-color; |
|
border: 1px solid $dialog-border-color; |
|
border-radius: $dialog-border-radius; |
|
box-shadow: $dialog-box-shadow; |
|
} |
|
|
|
/* content pane */ |
|
|
|
.dijitDialogPaneContent { |
|
background-color: $dialog-content-bg-color; |
|
border-radius: 0 0 $dialog-border-radius $dialog-border-radius; |
|
padding: $dialog-padding; |
|
position: relative; |
|
} |
|
|
|
/* action bar */ |
|
|
|
.dijitDialogPaneActionBar { |
|
/* the bar at bottom with OK/Cancel buttons */ |
|
padding-top: $dialog-padding; |
|
text-align: right; |
|
position: relative; |
|
.dijitButton { |
|
float: none; |
|
} |
|
} |
|
|
|
/* action bar within a TooltipDialog */ |
|
.dijitTooltipDialog .dijitDialogPaneActionBar { |
|
border-radius: 0 0 $dialog-border-radius $dialog-border-radius |
|
margin: $dialog-padding 0 0; |
|
} |
|
|
|
/* title bar */ |
|
|
|
.dijitDialogTitleBar { |
|
/* outer container for the titlebar of the dialog */ |
|
line-height: $line-height; |
|
border-bottom: 1px solid $dialog-titlebar-border-color; |
|
padding: $dialog-padding $dialog-padding * 1.5; |
|
border-radius: $dialog-border-radius $dialog-border-radius 0 0; |
|
} |
|
|
|
.dijitDialogTitle { |
|
/* typography and styling of the dialog title */ |
|
font-size: $dialog-titlebar-font-size; |
|
font-weight: bold; |
|
} |
|
|
|
/* close button */ |
|
|
|
.dijitDialogCloseIcon { |
|
/* the default close icon for the dialog */ |
|
width: $dialog-close-icon-size; |
|
height: @width; |
|
line-height: @height; |
|
text-align: center; |
|
position: absolute; |
|
top: ($line-height + $dialog-padding * 2 - 20px ) * 0.5; |
|
right: $dialog-padding * 1.5; |
|
_icon-core-style(); |
|
opacity: 0.65; |
|
|
|
&:before { |
|
content: $dialog-close-icon; |
|
font-size: $dialog-close-icon-size; |
|
} |
|
|
|
.closeText { |
|
display: none; |
|
} |
|
} |
|
|
|
.dijitDialogCloseIconHover, |
|
.dijitDialogCloseIconActive { |
|
opacity: 1; |
|
} |
|
|
|
/* underlay */ |
|
|
|
.dijitDialogUnderlay { |
|
background: $dialog-underlay-color; |
|
opacity: $dialog-underlay-opacity; |
|
} |
|
|
|
/* ----- Tooltip and TooltipDialog ----- */ |
|
|
|
.dijitTooltip, |
|
.dijitTooltipDialog { |
|
/* the outermost dom node, holding the connector and container */ |
|
background: transparent; /* make the area on the sides of the arrow transparent */ |
|
} |
|
|
|
.dijitTooltipContainer { |
|
background-color: $tooltip-background-color; |
|
opacity: $tooltip-opacity; |
|
padding: $tooltip-padding $tooltip-padding * 2; |
|
border-radius: $tooltip-border-radius; |
|
} |
|
|
|
.dijitTooltip .dijitTooltipContainer { |
|
color: $tooltip-text-color; |
|
border: $tooltip-border; |
|
} |
|
|
|
.dijitTooltipConnector { |
|
/* the arrow */ |
|
z-index: 2; |
|
width:auto; |
|
height:auto; |
|
opacity: $tooltip-opacity; |
|
} |
|
|
|
.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: $tooltip-padding * 2; |
|
} |
|
|
|
.dijitTooltipBelow { |
|
/* leave room for arrow above content */ |
|
padding-top: $tooltip-arrow-thickness; |
|
|
|
.dijitTooltipConnector { |
|
/* the arrow piece for tooltips below an element */ |
|
top: 0; |
|
left: $tooltip-padding * 2; |
|
border-bottom: $tooltip-arrow-thickness solid $tooltip-arrow-color; |
|
border-left: $tooltip-arrow-thickness solid transparent; |
|
border-right: $tooltip-arrow-thickness solid transparent; |
|
border-top: 0; |
|
} |
|
} |
|
|
|
.dijitTooltipAbove { |
|
/* leave room for arrow below content */ |
|
padding-bottom: $tooltip-arrow-thickness; |
|
|
|
.dijitTooltipConnector { |
|
/* the arrow piece for tooltips above an element */ |
|
bottom: 0; |
|
left: $tooltip-padding * 2; |
|
border-top: $tooltip-arrow-thickness solid $tooltip-arrow-color; |
|
border-left: $tooltip-arrow-thickness solid transparent; |
|
border-right: $tooltip-arrow-thickness solid transparent; |
|
border-bottom: 0; |
|
} |
|
} |
|
|
|
.dijitTooltipLeft { |
|
padding-right: $tooltip-arrow-thickness; |
|
|
|
.dijitTooltipConnector { |
|
/* the arrow piece for tooltips to the left of an element, bottom borders aligned */ |
|
right: 0; |
|
border-left: $tooltip-arrow-thickness solid $tooltip-arrow-color; |
|
border-bottom: $tooltip-arrow-thickness solid transparent; |
|
border-top: $tooltip-arrow-thickness solid transparent; |
|
border-right: 0; |
|
} |
|
} |
|
|
|
.dijitTooltipRight { |
|
padding-left: $tooltip-arrow-thickness; |
|
|
|
.dijitTooltipConnector { |
|
/* the arrow piece for tooltips to the right of an element, bottom borders aligned */ |
|
left: 0; |
|
border-bottom: $tooltip-arrow-thickness solid transparent; |
|
border-top: $tooltip-arrow-thickness solid transparent; |
|
border-right: $tooltip-arrow-thickness solid $tooltip-arrow-color; |
|
} |
|
} |
|
|
|
/* ----- TooltipDialog ----- */ |
|
|
|
.dijitTooltipDialog { |
|
.dijitTooltipContainer { |
|
background: $dialog-background-color; |
|
border: 1px solid $dialog-border-color; |
|
border-radius: $dialog-border-radius; |
|
box-shadow: $dialog-box-shadow; |
|
opacity:1; |
|
} |
|
&.dijitTooltipBelow { |
|
padding-top: $dialog-arrow-thickness; |
|
} |
|
&.dijitTooltipAbove { |
|
padding-bottom: $dialog-arrow-thickness; |
|
} |
|
&.dijitTooltipLeft { |
|
padding-right: $dialog-arrow-thickness; |
|
} |
|
&.dijitTooltipRight { |
|
padding-left: $dialog-arrow-thickness; |
|
} |
|
|
|
/* The tooltip dialog's connector itself serves as the "border" of the arrows,*/ |
|
/* then using :after to overlay the connector to "fill" the arrows with the same color as the container. */ |
|
.dijitTooltipConnector { |
|
height: 0; |
|
width: 0; |
|
position: absolute; |
|
z-index: 2; |
|
opacity: 1; |
|
|
|
&:after { |
|
content: ""; |
|
height: 0; |
|
width: 0; |
|
position: absolute; |
|
} |
|
} |
|
|
|
&.dijitTooltipAbove .dijitTooltipConnector { |
|
border-color: $dialog-arrow-border-color transparent transparent; |
|
border-width: $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px 0; /* one extra pixel is added as the border of the arrows */; |
|
border-style: solid; |
|
|
|
&:after { |
|
border-color: $dialog-arrow-background-color transparent transparent; |
|
border-width: $dialog-arrow-thickness $dialog-arrow-thickness 0; |
|
border-style: solid; |
|
left: - $dialog-arrow-thickness; |
|
top: - $dialog-arrow-thickness - 1px; |
|
} |
|
} |
|
&.dijitTooltipBelow .dijitTooltipConnector { |
|
border-color: transparent transparent $dialog-arrow-border-color; |
|
border-width: 0 $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px; |
|
border-style: solid; |
|
|
|
&:after { |
|
border-color: transparent transparent $dialog-arrow-background-color; |
|
border-width: 0 $dialog-arrow-thickness $dialog-arrow-thickness; |
|
border-style: solid; |
|
left: - $dialog-arrow-thickness; |
|
bottom: - $dialog-arrow-thickness - 1px; |
|
} |
|
} |
|
&.dijitTooltipLeft .dijitTooltipConnector { |
|
border-color: transparent transparent transparent $dialog-arrow-border-color; |
|
border-width: $dialog-arrow-thickness + 1px 0 $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px; |
|
border-style: solid; |
|
|
|
&:after { |
|
border-color: transparent transparent transparent $dialog-arrow-background-color; |
|
border-width: $dialog-arrow-thickness 0 $dialog-arrow-thickness $dialog-arrow-thickness; |
|
border-style: solid; |
|
top: - $dialog-arrow-thickness; |
|
left: - $dialog-arrow-thickness - 1px; |
|
} |
|
} |
|
&.dijitTooltipRight .dijitTooltipConnector { |
|
border-color: transparent $dialog-arrow-border-color transparent transparent; |
|
border-width: $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px 0; |
|
border-style: solid; |
|
|
|
&:after { |
|
border-color: transparent $dialog-arrow-background-color transparent transparent; |
|
border-width: $dialog-arrow-thickness $dialog-arrow-thickness $dialog-arrow-thickness 0; |
|
border-style: solid; |
|
top: - $dialog-arrow-thickness; |
|
right: - $dialog-arrow-thickness - 1px; |
|
} |
|
} |
|
} |
|
|
|
} |