ext/afform/gui/ang/afGuiEditor.css

   1 #afGuiEditor {
   2   display: flex;
   3 }
   4
   5 #afGuiEditor #afGuiEditor-palette {
   6   flex: 1;
   7   margin-right: 5px;
   8 }
   9
  10 #afGuiEditor #afGuiEditor-canvas {
  11   flex: 1.5;
  12   margin-left: 5px;
  13 }
  14
  15 #afGuiEditor .panel-body {
  16   padding: 5px 12px;
  17   position: relative;
  18 }
  19
  20 #afGuiEditor fieldset legend {
  21   padding-top: 5px;
  22   font-size: 16px;
  23   margin-bottom: 5px !important;
  24 }
  25
  26 #afGuiEditor hr {
  27   margin-top: 15px;
  28   margin-bottom: 10px;
  29 }
  30
  31 #afGuiEditor #afGuiEditor-palette-tabs li {
  32   top: 1px;
  33 }
  34
  35 #afGuiEditor #afGuiEditor-palette-tabs li > a {
  36   padding: 10px 15px;
  37   font-size: 12px;
  38 }
  39
  40 #afGuiEditor .af-gui-columns {
  41   display: flex;
  42   position: relative;
  43   flex-wrap: wrap;
  44 }
  45 #afGuiEditor .af-gui-columns > * {
  46   flex: 1;
  47   min-width: 200px;
  48 }
  49
  50 #afGuiEditor .af-gui-remove-entity {
  51   position: absolute;
  52   right: 3px;
  53   top: 3px;
  54 }
  55
  56 #afGuiEditor .crm-editable-enabled,
  57 #afGuiEditor-palette-tabs > li > a > span {
  58   display: inline-block;
  59   padding: 0 4px !important;
  60   border: 2px solid transparent !important;
  61 }
  62 #afGuiEditor .crm-editable-enabled:hover:not(:focus) {
  63   border: 2px dashed grey !important;
  64 }
  65 #afGuiEditor .crm-editable-enabled:before,
  66 #afGuiEditor .crm-editable-enabled:after {
  67   content: '';
  68   display: none;
  69 }
  70
  71 #afGuiEditor-palette-config .af-gui-entity-values .form-inline {
  72   margin-bottom: 10px;
  73 }
  74
  75 #afGuiEditor-palette-config .form-inline label {
  76   min-width: 110px;
  77 }
  78
  79 #afGuiEditor input[type=search]::placeholder {
  80   font-family: FontAwesome;
  81   text-align: right;
  82 }
  83 #afGuiEditor input[type=search]:-ms-input-placeholder {
  84   font-family: FontAwesome;
  85   text-align: right;
  86 }
  87 #afGuiEditor input[type=search]::-ms-input-placeholder {
  88   font-family: FontAwesome;
  89   text-align: right;
  90 }
  91
  92 #afGuiEditor .af-gui-bar {
  93   height: 22px;
  94   width: 100%;
  95   opacity: 0;
  96   transition: opacity 1s 2s;
  97   position:relative;
  98   font-family: "Courier New", Courier, monospace;
  99   font-size: 12px;
 100 }
 101 #afGuiEditor [ui-sortable] .af-gui-bar {
 102   cursor: move;
 103   background-color: #f2f2f2;
 104   position: absolute;
 105   top: 0;
 106   left: 0;
 107   padding-left: 15px;
 108 }
 109 #afGuiEditor-canvas:hover .af-gui-bar {
 110   opacity: 1;
 111   transition: opacity .2s;
 112 }
 113 #afGuiEditor-canvas .panel-body > div > .af-gui-bar {
 114   top: -5px;
 115 }
 116
 117 #afGuiEditor .af-gui-bar .btn.active {
 118   background-color: #b3b3b3;
 119 }
 120
 121 #afGuiEditor .af-gui-element {
 122   position: relative;
 123   padding: 0 3px 3px;
 124 }
 125
 126 #afGuiEditor .af-gui-block {
 127   border: 2px dashed transparent;
 128   position: relative;
 129   padding: 22px 3px 3px;
 130   min-height: 40px;
 131 }
 132
 133 #afGuiEditor .af-gui-block-type-fieldset {
 134   box-shadow: 0 0 5px #bbbbbb;
 135 }
 136
 137 #afGuiEditor .af-gui-block:hover {
 138   border: 2px dashed #757575;
 139 }
 140
 141 #afGuiEditor #afGuiEditor-canvas .af-entity-selected {
 142   border: 2px dashed #0071bd;
 143 }
 144 #afGuiEditor #afGuiEditor-canvas .af-entity-selected > .af-gui-bar {
 145   background-color: #0071bd;
 146   opacity: 1;
 147   transition: opacity 0s;
 148 }
 149 #afGuiEditor #afGuiEditor-canvas .af-entity-selected > .af-gui-bar > span {
 150   color: white;
 151 }
 152
 153 #afGuiEditor [ui-sortable] {
 154   min-height: 25px;
 155 }
 156
 157 #afGuiEditor .af-gui-field-select-list {
 158   max-height: 280px;
 159   overflow-y: auto;
 160 }
 161
 162 #afGuiEditor .af-gui-field-select-list > div {
 163   cursor: move;
 164   padding-left:15px;
 165   position: relative;
 166 }
 167 #afGuiEditor .af-gui-field-select-list > div.disabled {
 168   cursor: auto;
 169 }
 170 #afGuiEditor .af-gui-field-select-list > div:not(.disabled):hover {
 171   background-color: #efefef;
 172 }
 173 /* grip handle */
 174 #afGuiEditor [ui-sortable] .af-gui-bar:before,
 175 #afGuiEditor .af-gui-field-select-list > div:not(.disabled):hover:before,
 176 #afGuiEditor [af-gui-edit-options] [ui-sortable] li:before {
 177   background-size: cover;
 178   background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjODg4Ij48L3JlY3Q+Cjwvc3ZnPg==");
 179   width: 10px;
 180   height: 15px;
 181   content: ' ';
 182   display: block;
 183   position: absolute;
 184   left: 4px;
 185   top: 5px;
 186 }
 187 #afGuiEditor #afGuiEditor-canvas .af-gui-add-canvas-button {
 188   border: 2px dashed #0071bd;
 189   color: #0071bd;
 190   padding-top: 2px;
 191   padding-bottom: 2px;
 192 }
 193 #afGuiEditor .af-gui-add-block-button span {
 194   display: inline-block;
 195   width: 18px;
 196   height: 18px;
 197   border: 2px dashed #0071bd;
 198   color: #0071bd;
 199 }
 200 #afGuiEditor .af-gui-add-block-button span i {
 201   position: relative;
 202   top: -3px;
 203 }
 204
 205 #afGuiEditor .af-gui-layout-icon {
 206   width: 12px;
 207   height: 11px;
 208   display: block;
 209   background-image: url('../images/icons.png');
 210   background-repeat: no-repeat;
 211   margin: 4px 1px;
 212 }
 213 #afGuiEditor .af-gui-layout-icon.af-layout-cols {
 214   background-position: -12px 0;
 215 }
 216 #afGuiEditor .af-gui-layout-icon.af-layout-rows {
 217   background-position: -24px 0;
 218 }
 219
 220 #afGuiEditor .af-gui-layout.af-layout-cols {
 221   display: flex;
 222 }
 223 #afGuiEditor .af-gui-layout.af-layout-cols > div {
 224   flex: 1;
 225 }
 226 #afGuiEditor .af-gui-layout.af-layout-inline > div {
 227   display: inline-block;
 228   width: 300px;
 229 }
 230
 231 #afGuiEditor-canvas .panel-heading .btn-group {
 232   position: relative;
 233   top: -8px;
 234 }
 235
 236 #afGuiEditor .af-gui-button {
 237   padding-left: 15px;
 238 }
 239
 240 #afGuiEditor .af-gui-button > .btn.disabled {
 241   cursor: default !important;
 242   color: white !important;
 243 }
 244 #afGuiEditor .af-gui-button > .btn.disabled .crm-editable-enabled:hover:not(:focus) {
 245   border-color: #f4f4f4 !important;
 246 }
 247
 248 #afGuiEditor .af-gui-button > .btn-default.disabled {
 249   background-color: lightgrey !important;
 250 }
 251
 252 #afGuiEditor .af-gui-node-title {
 253   margin-left: 5px;
 254   margin-right: 20px;
 255   position: relative;
 256 }
 257
 258 #afGuiEditor .af-gui-field-required:after {
 259   content: '*';
 260   color: #cf3458;
 261   position: relative;
 262   left: -4px;
 263 }
 264
 265 #afGuiEditor li a.af-gui-field-select-in-dropdown {
 266   padding-top: 2px;
 267   padding-bottom: 2px;
 268   background-color: white !important;
 269   cursor: default;
 270 }
 271
 272 #afGuiEditor .af-gui-field-input input[type=text].form-control {
 273   color: #9a9a9a;
 274 }
 275
 276 #afGuiEditor .af-gui-field-input-type-number input[type=text].form-control {
 277   background-image: url('../images/number.png');
 278   background-repeat: no-repeat;
 279   background-position: center right 6px;
 280 }
 281
 282 #afGuiEditor .af-gui-field-input input.crm-form-date {
 283   width: 140px;
 284   margin-right: -2px;
 285 }
 286 #afGuiEditor .af-gui-field-input input.crm-form-time {
 287   width: 80px;
 288 }
 289
 290 #afGuiEditor .af-gui-field-input-type-radio label.radio {
 291   font-weight: normal;
 292   margin-right: 10px;
 293 }
 294 #afGuiEditor .af-gui-field-input-type-radio label.radio input[type=radio] {
 295   margin: 0;
 296
 297 }
 298
 299 #afGuiEditor .af-gui-text-h1 {
 300   font-weight: bolder;
 301   font-size: 16px;
 302 }
 303
 304 #afGuiEditor .af-gui-text-h2 {
 305   font-weight: bold;
 306   font-size: 15px;
 307 }
 308
 309 #afGuiEditor .af-gui-text-legend,
 310 #afGuiEditor .af-gui-text-h3 {
 311   font-weight: bold;
 312   font-size: 14px;
 313 }
 314
 315 #afGuiEditor .af-gui-text-legend {
 316   text-decoration: underline;
 317 }
 318
 319 #afGuiEditor .af-gui-text-h4 {
 320   font-weight: bold;
 321 }
 322
 323 #afGuiEditor .af-gui-text-h5 {
 324   font-weight: 600;
 325 }
 326
 327 #afGuiEditor .af-gui-text-h6 {
 328   font-weight: 500;
 329 }
 330
 331 #afGuiEditor .af-gui-field-help {
 332   font-style: italic;
 333 }
 334
 335
 336 #afGuiEditor.af-gui-editing-options {
 337   pointer-events: none;
 338   cursor: default;
 339 }
 340 #afGuiEditor.af-gui-editing-options .panel-heading,
 341 #afGuiEditor.af-gui-editing-options .af-gui-element,
 342 .af-gui-editing-options #afGuiEditor-palette .panel-body > * {
 343   opacity: .5;
 344 }
 345 #afGuiEditor.af-gui-editing-options .af-gui-block {
 346   border: 2px solid transparent;
 347 }
 348 #afGuiEditor.af-gui-editing-options .af-gui-bar:not(.af-gui-edit-options-bar) {
 349   visibility: hidden;
 350 }
 351 #afGuiEditor.af-gui-editing-options .af-gui-bar:before {
 352   background: none;
 353 }
 354
 355 #afGuiEditor [af-gui-edit-options] {
 356   border: 2px solid #0071bd;
 357   pointer-events: auto;
 358   cursor: auto;
 359   padding-top: 35px;
 360   position: relative;
 361 }
 362
 363 #afGuiEditor [af-gui-edit-options] .af-gui-edit-options-bar {
 364   height: 30px;
 365   font-family: "Courier New", Courier, monospace;
 366   font-size: 12px;
 367   width: 100%;
 368   background-color: #f2f2f2;
 369   position: absolute;
 370   top: 0;
 371   left: 0;
 372   padding-left: 15px;
 373 }
 374 #afGuiEditor [af-gui-edit-options] ul[ui-sortable] {
 375   padding: 5px 20px 0;
 376 }
 377 #afGuiEditor [af-gui-edit-options] ul[ui-sortable] li {
 378   list-style: none;
 379   padding-left: 15px;
 380   position: relative;
 381   background-color:#e7ecf1;
 382   cursor: move;
 383 }
 384 #afGuiEditor [af-gui-edit-options] ul[ui-sortable] li:nth-child(even) {
 385   background-color:#f2f2f2;
 386 }
 387 #afGuiEditor [af-gui-edit-options] ul[ui-sortable] li > div {
 388   width: calc(100% - 30px);
 389   display: inline-block;
 390 }
 391 #afGuiEditor [af-gui-edit-options] ul.af-gui-edit-options-deleted li > div {
 392   text-decoration: line-through;
 393 }
 394 #afGuiEditor [af-gui-edit-options] ul[ui-sortable] li .btn-xs {
 395   border: 0 none;
 396 }
 397 #afGuiEditor [af-gui-edit-options] h5 {
 398   margin-left: 20px;
 399 }