dox-sequence-diagram-ui/src/main/webapp/res/ecomp/asdc/sequencer/sequencer-diagram.scss

   1 .asdcs-control {
   2
   3     div.asdcs-diagram {
   4
   5         width: auto;
   6         height: 100%;
   7         overflow: hidden;
   8
   9         @include noselect();
  10
  11         div.asdcs-diagram-name {
  12             height: 40px;
  13             line-height: 40px;
  14             font-size: 24px;
  15             text-align: center;
  16             background-color: $asdcsColorOneLight;
  17             @include noselect();
  18         }
  19
  20         div.asdcs-diagram-svg {
  21             height: 100%;
  22         }
  23
  24         div.asdcs-diagram-popup {
  25
  26             @include drop-shadow();
  27
  28             $asdcsDiagramPopupIconPaneSize: 80px;
  29             $asdcsDiagramPopupHeaderHeight: 40px;
  30             $asdcsDiagramPopupFooterHeight: $asdcsDiagramPopupHeaderHeight;
  31             $asdcsDiagramPopupHeight: 200px;
  32             $asdcsDiagramPopupWidth: 320px;
  33             $asdcsDiagramPopupBodyHeight: $asdcsDiagramPopupHeight - ($asdcsDiagramPopupHeaderHeight + $asdcsDiagramPopupFooterHeight);
  34             $asdcsDiagramPopupNotesIconSize: 64px;
  35
  36             position: absolute;
  37             height: $asdcsDiagramPopupHeight;
  38             width: $asdcsDiagramPopupWidth;
  39             text-overflow: ellipsis;
  40             background: $asdcsColorOneLight;
  41             border: 1px solid $asdcsColorWhitish;
  42             border-radius: $asdcsPopupBorderRadius;
  43
  44             .asdcs-diagram-popup-header {
  45                 font-weight: bold;
  46                 font-size: 120%;
  47                 padding: 4px 10px;
  48                 height: $asdcsDiagramPopupHeaderHeight;
  49                 line-height: $asdcsDiagramPopupHeaderHeight;
  50             }
  51
  52             .asdcs-diagram-popup-body {
  53
  54                 height: $asdcsDiagramPopupBodyHeight;
  55                 overflow: hidden;
  56
  57                 .asdcs-icon-popup {
  58                     display: table-cell;
  59                     text-align: center;
  60                     vertical-align: middle;
  61                     height: $asdcsDiagramPopupBodyHeight;
  62                     width: $asdcsDiagramPopupIconPaneSize;
  63                     min-width: $asdcsDiagramPopupIconPaneSize;
  64                     svg {
  65                         height: $asdcsDiagramPopupNotesIconSize;
  66                         width: $asdcsDiagramPopupNotesIconSize;
  67                         .asdcs-icon {
  68                             fill: $asdcsColorOneDark;
  69                         }
  70                     }
  71                 }
  72
  73                 .asdcs-diagram-notes {
  74                     display: table-cell;
  75                     width: 100%;
  76                     vertical-align: middle;
  77                     overflow: hidden;
  78                     text-align: left;
  79                     padding: 0 15px 5px 0;
  80                     margin-right: 10px;
  81                 }
  82             }
  83
  84             .asdcs-diagram-popup-footer {
  85                 height: 0;
  86             }
  87
  88             $asdcsPopupBorderColor1: rgba(242, 242, 242, 0);
  89             $asdcsPopupBorderColor2: rgba(211, 211, 211, 0);
  90
  91             &.asdcs-diagram-popup-topleft {
  92
  93                 &:after, &:before {
  94                     border: solid transparent;
  95                     content: " ";
  96                     height: 0;
  97                     width: 0;
  98                     position: absolute;
  99                     pointer-events: none;
 100                     bottom: 100%;
 101                     left: 50px;
 102                 }
 103
 104                 &:after {
 105                     border-color: $asdcsPopupBorderColor1;
 106                     border-width: 6px;
 107                     border-bottom-color: $asdcsColorOneLight;
 108                     margin-left: -6px;
 109                 }
 110
 111                 &:before {
 112                     border-color: $asdcsPopupBorderColor2;
 113                     border-width: 7px;
 114                     border-bottom-color: $asdcsColorOneLight;
 115                     margin-left: -7px;
 116                 }
 117             }
 118
 119             &.asdcs-diagram-popup-topright {
 120
 121                 &:after, &:before {
 122                     border: solid transparent;
 123                     content: " ";
 124                     height: 0;
 125                     width: 0;
 126                     position: absolute;
 127                     pointer-events: none;
 128                     bottom: 100%;
 129                     right: 50px;
 130                 }
 131
 132                 &:after {
 133                     border-color: $asdcsPopupBorderColor1;
 134                     border-width: 6px;
 135                     border-bottom-color: $asdcsColorOneLight;
 136                     margin-left: -6px;
 137                 }
 138
 139                 &:before {
 140                     border-color: $asdcsPopupBorderColor2;
 141                     border-width: 7px;
 142                     border-bottom-color: $asdcsColorOneLight;
 143                     margin-left: -7px;
 144                 }
 145             }
 146
 147             &.asdcs-diagram-popup-bottomleft {
 148
 149                 &:after, &:before {
 150                     border: solid transparent;
 151                     content: " ";
 152                     height: 0;
 153                     width: 0;
 154                     position: absolute;
 155                     pointer-events: none;
 156                     top: 100%;
 157                     left: 50px;
 158                 }
 159
 160                 &:after {
 161                     border-color: $asdcsPopupBorderColor1;
 162                     border-width: 6px;
 163                     border-top-color: $asdcsColorOneLight;
 164                     margin-left: -6px;
 165                 }
 166
 167                 &:before {
 168                     border-color: $asdcsPopupBorderColor2;
 169                     border-width: 7px;
 170                     border-top-color: $asdcsColorOneLight;
 171                     margin-left: -7px;
 172                 }
 173             }
 174
 175             &.asdcs-diagram-popup-bottomright {
 176
 177                 &:after, &:before {
 178                     border: solid transparent;
 179                     content: " ";
 180                     height: 0;
 181                     width: 0;
 182                     position: absolute;
 183                     pointer-events: none;
 184                     top: 100%;
 185                     right: 50px;
 186                 }
 187
 188                 &:after {
 189                     border-color: rgba(242, 242, 242, 0);
 190                     border-width: 6px;
 191                     border-top-color: $asdcsColorOneLight;
 192                     margin-left: -6px;
 193                 }
 194
 195                 &:before {
 196                     border-color: rgba(211, 211, 211, 0);
 197                     border-width: 7px;
 198                     border-top-color: $asdcsColorOneLight;
 199                     margin-left: -7px;
 200                 }
 201             }
 202         }
 203
 204         @import 'sequencer-diagram-svg.scss';
 205     }
 206 }