diff options
Diffstat (limited to 'dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-diagram.scss')
| -rw-r--r-- | dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-diagram.scss | 206 |
1 files changed, 206 insertions, 0 deletions
diff --git a/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-diagram.scss b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-diagram.scss new file mode 100644 index 0000000000..fe67c9059e --- /dev/null +++ b/dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-diagram.scss @@ -0,0 +1,206 @@ +.asdcs-control { + + div.asdcs-diagram { + + width: auto; + height: 100%; + overflow: hidden; + + @include noselect(); + + div.asdcs-diagram-name { + height: 40px; + line-height: 40px; + font-size: 24px; + text-align: center; + background-color: $asdcsColorOneLight; + @include noselect(); + } + + div.asdcs-diagram-svg { + height: 100%; + } + + div.asdcs-diagram-popup { + + @include drop-shadow(); + + $asdcsDiagramPopupIconPaneSize: 80px; + $asdcsDiagramPopupHeaderHeight: 40px; + $asdcsDiagramPopupFooterHeight: $asdcsDiagramPopupHeaderHeight; + $asdcsDiagramPopupHeight: 200px; + $asdcsDiagramPopupWidth: 320px; + $asdcsDiagramPopupBodyHeight: $asdcsDiagramPopupHeight - ($asdcsDiagramPopupHeaderHeight + $asdcsDiagramPopupFooterHeight); + $asdcsDiagramPopupNotesIconSize: 64px; + + position: absolute; + height: $asdcsDiagramPopupHeight; + width: $asdcsDiagramPopupWidth; + text-overflow: ellipsis; + background: $asdcsColorOneLight; + border: 1px solid $asdcsColorWhitish; + border-radius: $asdcsPopupBorderRadius; + + .asdcs-diagram-popup-header { + font-weight: bold; + font-size: 120%; + padding: 4px 10px; + height: $asdcsDiagramPopupHeaderHeight; + line-height: $asdcsDiagramPopupHeaderHeight; + } + + .asdcs-diagram-popup-body { + + height: $asdcsDiagramPopupBodyHeight; + overflow: hidden; + + .asdcs-icon-popup { + display: table-cell; + text-align: center; + vertical-align: middle; + height: $asdcsDiagramPopupBodyHeight; + width: $asdcsDiagramPopupIconPaneSize; + min-width: $asdcsDiagramPopupIconPaneSize; + svg { + height: $asdcsDiagramPopupNotesIconSize; + width: $asdcsDiagramPopupNotesIconSize; + .asdcs-icon { + fill: $asdcsColorOneDark; + } + } + } + + .asdcs-diagram-notes { + display: table-cell; + width: 100%; + vertical-align: middle; + overflow: hidden; + text-align: left; + padding: 0 15px 5px 0; + margin-right: 10px; + } + } + + .asdcs-diagram-popup-footer { + height: 0; + } + + $asdcsPopupBorderColor1: rgba(242, 242, 242, 0); + $asdcsPopupBorderColor2: rgba(211, 211, 211, 0); + + &.asdcs-diagram-popup-topleft { + + &:after, &:before { + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + bottom: 100%; + left: 50px; + } + + &:after { + border-color: $asdcsPopupBorderColor1; + border-width: 6px; + border-bottom-color: $asdcsColorOneLight; + margin-left: -6px; + } + + &:before { + border-color: $asdcsPopupBorderColor2; + border-width: 7px; + border-bottom-color: $asdcsColorOneLight; + margin-left: -7px; + } + } + + &.asdcs-diagram-popup-topright { + + &:after, &:before { + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + bottom: 100%; + right: 50px; + } + + &:after { + border-color: $asdcsPopupBorderColor1; + border-width: 6px; + border-bottom-color: $asdcsColorOneLight; + margin-left: -6px; + } + + &:before { + border-color: $asdcsPopupBorderColor2; + border-width: 7px; + border-bottom-color: $asdcsColorOneLight; + margin-left: -7px; + } + } + + &.asdcs-diagram-popup-bottomleft { + + &:after, &:before { + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + top: 100%; + left: 50px; + } + + &:after { + border-color: $asdcsPopupBorderColor1; + border-width: 6px; + border-top-color: $asdcsColorOneLight; + margin-left: -6px; + } + + &:before { + border-color: $asdcsPopupBorderColor2; + border-width: 7px; + border-top-color: $asdcsColorOneLight; + margin-left: -7px; + } + } + + &.asdcs-diagram-popup-bottomright { + + &:after, &:before { + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + top: 100%; + right: 50px; + } + + &:after { + border-color: rgba(242, 242, 242, 0); + border-width: 6px; + border-top-color: $asdcsColorOneLight; + margin-left: -6px; + } + + &:before { + border-color: rgba(211, 211, 211, 0); + border-width: 7px; + border-top-color: $asdcsColorOneLight; + margin-left: -7px; + } + } + } + + @import 'sequencer-diagram-svg.scss'; + } +} |