diff options
Diffstat (limited to 'lib/flat/dijit/Dialog.styl')
| -rwxr-xr-x | lib/flat/dijit/Dialog.styl | 308 |
1 files changed, 308 insertions, 0 deletions
diff --git a/lib/flat/dijit/Dialog.styl b/lib/flat/dijit/Dialog.styl new file mode 100755 index 000000000..2c869bda4 --- /dev/null +++ b/lib/flat/dijit/Dialog.styl @@ -0,0 +1,308 @@ +/* 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; + } + } + } + +}
\ No newline at end of file |