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

   1 .asdcs-control {
   2
   3     .asdcs-editor-designer {
   4
   5         overflow: hidden;
   6         table {
   7             border-spacing: 2px;
   8         }
   9
  10         $asdcsActiveBorderWidth: 1px;
  11         $asdcsActiveBorderColor: $asdcsColorEmphasis;
  12         .asdcs-designer-accordion {
  13             display: flex;
  14             flex-direction: column;
  15         }
  16
  17         .asdcs-designer-metadata {
  18             height: 70px;
  19             display: table-cell;
  20             padding: 0 15px;
  21             text-align: left;
  22             vertical-align: middle;
  23             font-size: 16px;
  24             color: $asdcsTextColor;
  25             @include noselect();
  26         }
  27
  28         .asdcs-designer-lifelines-container,
  29         .asdcs-designer-steps-container {
  30             flex: 1;
  31             div,span {
  32                 @include noselect();
  33             }
  34             // overflow: hidden;
  35             overflow: auto;
  36         }
  37
  38         .asdcs-designer-lifelines-container {
  39             padding: 0;
  40             margin: 0;
  41             .asdcs-designer-lifelines {
  42                 padding: 0;
  43                 .asdcs-designer-lifeline {
  44                     background-color: $asdcsColorWhite;
  45                     border: $asdcsActiveBorderWidth solid transparent; //$asdcsColorWhite;
  46                     border-bottom: $asdcsActiveBorderWidth solid $asdcsColorOne;
  47                     .asdcs-designer-lifeline-new {
  48                         background-color: $asdcsColorOneLight;
  49                     }
  50                     &.asdcs-active {
  51                         border: $asdcsActiveBorderWidth solid $asdcsColorEmphasis;
  52                     }
  53                 }
  54             }
  55         }
  56
  57         .asdcs-designer-steps-container {
  58             padding: 0;
  59             margin: 0;
  60             .asdcs-designer-steps {
  61                 padding: 0;
  62                 .asdcs-designer-message {
  63                     border: $asdcsActiveBorderWidth solid $asdcsColorWhite;
  64                     border-bottom: $asdcsActiveBorderWidth solid $asdcsColorOne;
  65                     background-color: $asdcsColorWhite;
  66                     .asdcs-designer-message-new {
  67                         background-color: $asdcsColorOneLight;
  68                     }
  69                     &.asdcs-active {
  70                         border: $asdcsActiveBorderWidth solid $asdcsColorEmphasis;
  71                     }
  72                     select {
  73                         height: 30px;
  74                         width: 100%;
  75                         background-color: $asdcsColorWhite;
  76                         border-radius: $asdcsInputSelectBorderRadius;
  77                         border: 1px solid $asdcsInputSelectBorderColor;
  78                         -moz-appearance: none; // Just FF.
  79                         option {
  80                             padding: 10px 0;
  81                             font-size: $asdcsFontSize + 2;
  82                         }
  83                         &.asdcs-designer-select-message-type {
  84                             option {
  85                                 font-size: $asdcsFontSize + 5;
  86                             }
  87                         }
  88                     }
  89                 }
  90             }
  91         }
  92
  93         .asdcs-designer-lifelines-container,
  94         .asdcs-designer-steps-container {
  95             table.asdcs-designer-layout {
  96                 width: 100%;
  97                 padding: 8px;
  98                 tbody, tr {
  99                     width: 100%;
 100                 }
 101                 td {
 102                     text-align: center;
 103                     vertical-align: middle;
 104                 }
 105                 &.asdcs-designer-message-row1 {
 106                     padding-bottom: 4px;
 107                     td:nth-child(3) {
 108                         width: 99%;
 109                     }
 110                 }
 111                 &.asdcs-designer-message-row2 {
 112                     padding-top: 0;
 113                     tr {
 114                         td:nth-child(1), td:nth-child(3) {
 115                             width: 45%;
 116                         }
 117                         td:nth-child(2) {
 118                             min-width: 70px;
 119                             width: 70px;
 120                         }
 121                         svg {
 122                             fill: $asdcsColorOneDark;
 123                         }
 124                     }
 125                 }
 126                 &.asdcs-designer-message-new {
 127                     tr {
 128                         td:nth-child(2) div {
 129                             white-space: nowrap;
 130                             color: $asdcsColorEmphasis;
 131                             cursor: pointer;
 132                             &:hover {
 133                                 color: $asdcsColorEmphasisHover;
 134                             }
 135                         }
 136                         td:nth-child(3) div {
 137                             fill: $asdcsColorEmphasis;
 138                             cursor: pointer;
 139                             &:hover {
 140                                 fill: $asdcsColorEmphasisHover;
 141                             }
 142                         }
 143                         td:nth-child(4) {
 144                             width: 99%;
 145                         }
 146                     }
 147                 }
 148                 &.asdcs-designer-lifeline-row1 {
 149                     tr {
 150                         td:nth-child(3) {
 151                             width: 99%;
 152                         }
 153                     }
 154                 }
 155                 &.asdcs-designer-lifeline-new {
 156                     tr {
 157                         td:nth-child(2) div {
 158                             white-space: nowrap;
 159                             color: $asdcsColorEmphasis;
 160                             cursor: pointer;
 161                             &:hover {
 162                                 color: $asdcsColorEmphasisHover;
 163                             }
 164                         }
 165                         td:nth-child(3) div {
 166                             fill: $asdcsColorEmphasis;
 167                             &:hover {
 168                                 fill: $asdcsColorEmphasisHover;
 169                             }
 170                         }
 171                         td:nth-child(4) {
 172                             width: 99%;
 173                         }
 174                     }
 175                 }
 176             }
 177         }
 178
 179         .asdcs-designer-placeholder {
 180             padding: 8px;
 181             background-color: $asdcsColorOneLight;
 182         }
 183
 184         .asdcs-designer-icon {
 185             display: table-cell;
 186             text-align: right;
 187             vertical-align: middle;
 188             cursor: pointer;
 189             fill: $asdcsColorDarkGrey;
 190             min-width: $asdcsSmallIconSize;
 191             width: $asdcsSmallIconSize;
 192             height: $asdcsSmallIconSize;
 193             &.asdcs-active {
 194                 fill: $asdcsColorEmphasis;
 195             }
 196             &:hover {
 197                 fill: $asdcsColorEmphasisHover;
 198                 @include transition(fill $asdcsTransitionTime ease);
 199             }
 200             svg {
 201                 pointer-events: none;
 202                 width: $asdcsSmallIconSize;
 203                 height: $asdcsSmallIconSize;
 204             }
 205         }
 206
 207         .asdcs-designer-sort {
 208             text-align: center;
 209             cursor: move;
 210             display: table-cell;
 211         }
 212
 213         .asdcs-designer-lifeline-index,
 214         .asdcs-designer-message-index{
 215             color: $asdcsTextColor;
 216         }
 217
 218         button.asdcs-designer-new {
 219             padding: 0 4px;
 220             svg {
 221                 width: $asdcsSmallIconSize;
 222                 height: $asdcsSmallIconSize;
 223             }
 224             fill: $asdcsColorWhitish;
 225             &:hover {
 226                 background-color: $asdcsColorEmphasis;
 227                 @include transition(background-color $asdcsTransitionTime ease);
 228             }
 229         }
 230
 231         h3 {
 232             margin: 0;
 233             font-size: 14px;
 234             line-height: 40px;
 235             vertical-align: middle;
 236             height: 40px;
 237             padding: 0 10px 0 15px;
 238             background-color: $asdcsColorOne;
 239             border-bottom: 1px solid $asdcsColorOneLight;
 240             color: $asdcsColorOneDark;
 241             text-transform: uppercase;
 242             cursor: pointer;
 243             div.asdcs-designer-icon {
 244                 padding-top: 7px;
 245                 display: inline;
 246                 float: right;
 247                 fill: $asdcsColorDarkGrey;
 248                 &:hover {
 249                     fill: $asdcsColorGrey;
 250                     @include transition(fill $asdcsTransitionTime ease);
 251                 }
 252             }
 253             @include noselect();
 254         }
 255     }
 256 }