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

   1 /*
   2 <div class="asdcs-dialog">
   3 <div class="asdcs-dialog-overlay"></div>
   4 <div class="asdcs-dialog-header"></div>
   5 <div class="asdcs-dialog-body"></div>
   6 <div class="asdcs-dialog-buttonbar">
   7 <button class="asdcs-dialog-button-cancel">Cancel</button>
   8 <button class="asdcs-dialog-button-ok">OK</button>
   9 </div>
  10 </div>
  11 */
  12
  13 .asdcs-control {
  14
  15     $asdcsDialogIconSize: 70px;
  16     $asdcsDialogWidth: 400px;
  17
  18     .asdcs-overlay {
  19         display: none;
  20         position: fixed;
  21         top: 0;
  22         left: 0;
  23         height: 100%;
  24         width: 100%;
  25         z-index: 5;
  26         background-color: white;
  27         opacity: 0.25;
  28         pointer-events: all;
  29     }
  30
  31     .asdcs-dialog {
  32
  33         position: fixed;
  34         top: 50%;
  35         left: 50%;
  36         width: $asdcsDialogWidth;
  37         margin-left: -($asdcsDialogWidth/2);
  38         height: 300px;
  39         margin-top: -150px;
  40         background: $asdcsColorOneLight;
  41         border: 1px solid $asdcsColorWhitish;
  42         border-radius: $asdcsPopupBorderRadius;
  43         z-index: 10;
  44
  45         @include drop-shadow();
  46
  47         .asdcs-dialog-header {
  48             position: absolute;
  49             height: 60px;
  50             line-height: 40px;
  51             width: 100%;
  52             box-sizing: border-box;
  53             font-size: 14px;
  54             font-weight: bold;
  55             padding: 10px 15px;
  56         }
  57
  58         .asdcs-dialog-close {
  59             position: absolute;
  60             top: 15px;
  61             right: 15px;
  62             height: $asdcsSmallIconSize;
  63             width: $asdcsSmallIconSize;
  64             fill: $asdcsColorGrey;
  65             cursor: pointer;
  66             &:hover {
  67                 fill: $asdcsColorEmphasis;
  68             }
  69         }
  70
  71         .asdcs-dialog-buttonbar {
  72
  73             position: absolute;
  74             height: 50px;
  75             width: 100%;
  76             bottom: 0;
  77             //background-color: $asdcsColorOne;
  78             text-align: right;
  79
  80             button {
  81                 width: 75px;
  82                 border-radius: 4px;
  83                 border: none;
  84                 background-color: $asdcsColorTwo;
  85                 color: $asdcsColorWhite;
  86                 padding: 7px 10px;
  87                 margin: 10px 10px 10px 0px;
  88                 &:hover {
  89                     background-color: $asdcsColorTwoLight;
  90                 }
  91             }
  92         }
  93
  94         .asdcs-dialog-icon {
  95             position: absolute;
  96             top: 80px;
  97             left: 20px;
  98             height: $asdcsDialogIconSize;
  99             width: $asdcsDialogIconSize;
 100             pointer-events: none;
 101             fill: $asdcsColorOneDark;
 102
 103             svg {
 104                 display: none;
 105             }
 106
 107             &.asdcs-icon-question {
 108                 svg.asdcs-icon-question {
 109                     display: block;
 110                 }
 111             }
 112
 113             &.asdcs-icon-exclaim {
 114                 svg.asdcs-icon-exclaim {
 115                     display: block;
 116                 }
 117             }
 118
 119             &.asdcs-icon-info {
 120                 svg.asdcs-icon-info {
 121                     display: block;
 122                 }
 123             }
 124
 125             &.asdcs-icon-edit {
 126                 svg.asdcs-icon-edit {
 127                     display: block;
 128                 }
 129             }
 130         }
 131
 132         .asdcs-dialog-message {
 133             position: absolute;
 134             padding: 10px;
 135             top: 90px;
 136             height: 100px;
 137             left: 100px;
 138             width: $asdcsDialogWidth - 120px;
 139             display: table-cell;
 140             vertical-align: middle;
 141             word-wrap: break-word;
 142             text-overflow: ellipsis;
 143         }
 144
 145         .asdcs-dialog-text {
 146             position:absolute;
 147             padding: 10px;
 148             top:60px;
 149             height: 150px;
 150             left:100px;
 151             width: $asdcsDialogWidth - 130px;
 152             textarea {
 153                 height:100%;
 154                 width:100%;
 155                 resize: none;
 156             }
 157         }
 158     }
 159 }