ext/afform/admin/ang/afGuiEditor.css

   1 #afGuiEditor #afGuiEditor-palette {
   2   margin-right: 5px;
   3   height: 100%;
   4 }
   5
   6 #afGuiEditor #afGuiEditor-canvas {
   7   margin-left: 5px;
   8   height: 100%;
   9 }
  10
  11 #afGuiEditor fieldset legend {
  12   padding-top: 5px;
  13   font-size: 16px;
  14   margin-bottom: 5px !important;
  15 }
  16
  17 #afGuiEditor-palette fieldset legend {
  18   height: 30px;
  19 }
  20
  21 #afGuiEditor hr {
  22   margin-top: 15px;
  23   margin-bottom: 10px;
  24 }
  25
  26 #afGuiEditor .panel {
  27   height: 100%;
  28 }
  29 #afGuiEditor .panel-heading {
  30   height: 44px;
  31   padding: 10px;
  32 }
  33 #afGuiEditor .panel-heading ul.nav-tabs {
  34   border-bottom: 0 none;
  35 }
  36 #afGuiEditor .panel-heading ul.nav-tabs li {
  37   top: 1px;
  38 }
  39 #afGuiEditor .panel-heading ul.nav-tabs li.fluid-width-tab {
  40   white-space: nowrap;
  41   overflow: hidden;
  42 }
  43 #afGuiEditor .panel-heading ul.nav-tabs li.active {
  44   max-width: 50%;
  45 }
  46 #afGuiEditor .panel-heading ul.nav-tabs li > a {
  47   padding: 5px 3px 5px 8px;
  48   height: 33px;
  49   font-size: 12px;
  50   margin: 0;
  51 }
  52
  53 #afGuiEditor .panel-body {
  54   padding: 5px 12px;
  55   position: relative;
  56   height: calc(100% - 44px);
  57   overflow-y: scroll;
  58   overflow-x: hidden;
  59 }
  60
  61 #afGuiEditor .af-gui-columns {
  62   position: relative;
  63 }
  64 #afGuiEditor .af-gui-columns > * {
  65   min-width: 200px;
  66 }
  67
  68 #afGuiEditor .af-gui-remove-entity {
  69   position: absolute;
  70   right: 3px;
  71   top: 3px;
  72 }
  73
  74 #afGuiEditor .crm-editable-enabled,
  75 #afGuiEditor .panel-heading ul.nav-tabs li > a > span {
  76   display: inline-block;
  77   padding: 0 4px !important;
  78   border: 2px solid transparent !important;
  79   min-width: 21px;
  80 }
  81 #afGuiEditor .crm-editable-enabled:hover:not(:focus) {
  82   border: 2px dashed grey !important;
  83 }
  84 #afGuiEditor .crm-editable-enabled:before,
  85 #afGuiEditor .crm-editable-enabled:after {
  86   content: '';
  87   display: none;
  88 }
  89
  90 #afGuiEditor-palette-config .af-gui-entity-values .form-inline {
  91   margin-bottom: 10px;
  92 }
  93
  94 #afGuiEditor-palette-config .form-inline label {
  95   min-width: 110px;
  96 }
  97
  98 #afGuiEditor-palette-config .af-gui-entity-palette [type=search] {
  99   width: 120px;
 100   padding: 3px 3px 3px 5px;
 101   height: 25px;
 102   font-weight: normal;
 103   position: relative;
 104   top: -3px;
 105   font-size: 12px;
 106 }
 107
 108 #bootstrap-theme input[type=search]::placeholder {
 109   font-family: FontAwesome;
 110   text-align: right;
 111 }
 112 #bootstrap-theme input[type=search]:-ms-input-placeholder {
 113   font-family: FontAwesome;
 114   text-align: right;
 115 }
 116 #bootstrap-theme input[type=search]::-ms-input-placeholder {
 117   font-family: FontAwesome;
 118   text-align: right;
 119 }
 120
 121 #afGuiEditor .af-gui-bar {
 122   height: 22px;
 123   width: 100%;
 124   opacity: 0;
 125   transition: opacity .2s;
 126   position:relative;
 127   font-family: "Courier New", Courier, monospace;
 128   font-size: 12px;
 129 }
 130 #afGuiEditor [ui-sortable] .af-gui-bar {
 131   cursor: move;
 132   background-color: #f2f2f2;
 133   position: absolute;
 134   top: 0;
 135   left: 0;
 136   padding-left: 15px;
 137 }
 138 #afGuiEditor:not(.af-gui-dragging *) #afGuiEditor-canvas:hover .af-gui-bar {
 139   opacity: 1;
 140   transition: opacity .2s;
 141 }
 142 #afGuiEditor-canvas .af-gui-dragtarget > .af-gui-bar {
 143   background-color: #d7e6ff;
 144   opacity: 1;
 145   transition: opacity .1s;
 146 }
 147
 148 /* Disable menu while dragging */
 149 body.af-gui-dragging #civicrm-menu {
 150   pointer-events: none;
 151 }
 152 /* Disable scrollbars while dragging */
 153 body.af-gui-dragging {
 154   overflow-x: hidden;
 155   overflow-y: hidden;
 156 }
 157
 158 #afGuiEditor .af-gui-bar .btn.active {
 159   background-color: #b3b3b3;
 160 }
 161
 162 #afGuiEditor .af-gui-bar > .form-inline > span {
 163   color: #696969;
 164   font-style: italic;
 165 }
 166
 167 #afGuiEditor .af-gui-element {
 168   position: relative;
 169   padding: 0 3px 3px;
 170   display: block;
 171 }
 172
 173 #afGuiEditor .af-gui-container {
 174   border: 2px dashed transparent;
 175   position: relative;
 176   padding: 22px 3px 3px;
 177   min-height: 40px;
 178   margin-bottom: 10px;
 179   margin-top: 10px;
 180 }
 181
 182 #afGuiEditor af-gui-container,
 183 #afGuiEditor af-gui-markup,
 184 #afGuiEditor af-gui-field,
 185 #afGuiEditor af-gui-edit-options {
 186   display: block;
 187 }
 188
 189 #afGuiEditor .af-gui-search-display {
 190   border: 1px dotted gray;
 191   color: gray;
 192   padding: 3em;
 193   background-color: #f9f9f9;
 194 }
 195
 196 #afGuiEditor .af-gui-container-type-fieldset {
 197   box-shadow: 0 0 5px #bbbbbb;
 198   margin-top: 20px;
 199   margin-bottom: 20px;
 200 }
 201
 202 #afGuiEditor .af-gui-container:hover,
 203 .af-gui-dragging #afGuiEditor .af-gui-container {
 204   border: 2px dashed #757575;
 205 }
 206 #afGuiEditor .af-gui-container.af-gui-dragtarget {
 207   border: 2px solid #0071bd;
 208   box-shadow: 0 0 5px #0071bd;
 209 }
 210
 211 #afGuiEditor .af-gui-markup {
 212   padding: 22px 3px 3px;
 213   position: relative;
 214 }
 215
 216 #afGuiEditor div.af-gui-markup-content {
 217   display: block;
 218   position: relative;
 219   padding: 0 !important;
 220 }
 221
 222 #afGuiEditor .af-gui-markup-content-overlay {
 223   position: absolute;
 224   top: 0;
 225   left: 0;
 226   width: 100%;
 227   height: 100%;
 228 }
 229
 230 #afGuiEditor .af-gui-markup-content:hover .af-gui-markup-content-overlay {
 231   background-color: rgba(255, 255, 255, .2);
 232 }
 233
 234 #afGuiEditor #afGuiEditor-canvas .af-entity-selected {
 235   border: 2px dashed #0071bd;
 236 }
 237 #afGuiEditor #afGuiEditor-canvas .af-entity-selected > .af-gui-bar {
 238   background-color: #0071bd;
 239   opacity: 1;
 240   transition: opacity 0s;
 241 }
 242 #afGuiEditor #afGuiEditor-canvas .af-entity-selected > .af-gui-bar > .form-inline > button > span,
 243 #afGuiEditor #afGuiEditor-canvas .af-entity-selected > .af-gui-bar > .form-inline > span {
 244   color: white;
 245 }
 246 #afGuiEditor #afGuiEditor-canvas .af-entity-selected > .af-gui-bar > .form-inline > button:hover > span,
 247 #afGuiEditor #afGuiEditor-canvas .af-entity-selected > .af-gui-bar > .open > button > span,
 248 #afGuiEditor #afGuiEditor-canvas .af-entity-selected > .af-gui-bar > .form-inline > button:focus > span {
 249   color: #0071bd;
 250 }
 251
 252 #afGuiEditor [ui-sortable] {
 253   min-height: 60px;
 254   margin-top: 10px;
 255 }
 256
 257 #afGuiEditor .ui-sortable-helper {
 258   height: 20px !important;
 259   opacity: .5;
 260   overflow: visible;
 261 }
 262 #afGuiEditor .ui-sortable-helper > * {
 263   background-color: #d5d5d5;
 264 }
 265 #afGuiEditor .ui-sortable-helper .af-gui-palette-item {
 266   height: 30px;
 267   width: 300px;
 268   border: 2px dashed #0071bd;
 269 }
 270
 271 #afGuiEditor .af-gui-entity-palette-select-list {
 272   max-height: 400px;
 273   overflow-y: auto;
 274 }
 275
 276 #afGuiEditor .af-gui-entity-palette-select-list [ui-sortable] > div {
 277   cursor: move;
 278   padding-left: 10px;
 279   position: relative;
 280 }
 281 #afGuiEditor .af-gui-entity-palette-select-list [ui-sortable] > div.disabled {
 282   cursor: auto;
 283 }
 284 #afGuiEditor .af-gui-entity-palette-select-list [ui-sortable] > div:not(.disabled):hover {
 285   background-color: #efefef;
 286 }
 287 /* grip handle */
 288 #afGuiEditor [ui-sortable] .af-gui-bar:before,
 289 #afGuiEditor .af-gui-entity-palette-select-list [ui-sortable] > div:not(.disabled):hover:before,
 290 #afGuiEditor af-gui-edit-options.af-gui-content-editing-area [ui-sortable] li:before {
 291   background-size: cover;
 292   background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSIjODg4Ij48L3JlY3Q+Cjwvc3ZnPg==");
 293   width: 10px;
 294   height: 15px;
 295   content: ' ';
 296   display: block;
 297   position: absolute;
 298   left: 4px;
 299   top: 5px;
 300 }
 301 #afGuiEditor .af-gui-add-element-button {
 302   background-color: transparent;
 303 }
 304 #afGuiEditor .af-gui-add-element-button span {
 305   display: inline-block;
 306   width: 18px;
 307   height: 18px;
 308   color: #0071bd;
 309 }
 310
 311 #afGuiEditor .af-gui-layout-icon {
 312   width: 12px;
 313   height: 11px;
 314   display: block;
 315   background-image: url('../images/icons.png');
 316   background-repeat: no-repeat;
 317   margin: 4px 1px;
 318 }
 319 #afGuiEditor .af-gui-layout-icon.af-layout-cols {
 320   background-position: -12px 0;
 321 }
 322 #afGuiEditor .af-gui-layout-icon.af-layout-rows {
 323   background-position: -24px 0;
 324 }
 325
 326 #afGuiEditor .af-gui-layout.af-layout-cols {
 327   display: flex;
 328 }
 329 #afGuiEditor .af-gui-layout.af-layout-cols > div {
 330   flex: 1;
 331 }
 332 #afGuiEditor .af-gui-layout.af-layout-inline > div {
 333   display: inline-block;
 334   width: 300px;
 335   vertical-align: top;
 336 }
 337
 338 #afGuiEditor .af-gui-button {
 339   padding-left: 15px;
 340 }
 341
 342 #afGuiEditor #afGuiEditor-canvas-body .btn[disabled] {
 343   cursor: default;
 344   color: white;
 345 }
 346 #afGuiEditor .af-gui-button > .btn.disabled .crm-editable-enabled:hover:not(:focus) {
 347   border-color: #f4f4f4 !important;
 348 }
 349
 350 #afGuiEditor .af-gui-button > .btn-default.disabled {
 351   background-color: lightgrey !important;
 352 }
 353
 354 #afGuiEditor .af-gui-node-title {
 355   margin-left: 5px;
 356   margin-right: 20px;
 357   position: relative;
 358 }
 359
 360 #afGuiEditor .af-gui-field-required:after {
 361   content: '*';
 362   color: #cf3458;
 363   position: relative;
 364   left: -4px;
 365 }
 366
 367 #afGuiEditor .dropdown-menu li {
 368   cursor: default;
 369 }
 370
 371 #afGuiEditor .dropdown-menu li .af-gui-field-select-in-dropdown {
 372   padding: 2px 19px 2px 21px;
 373   clear: both;
 374   font-weight: 400;
 375   line-height: 1.5384615385;
 376   color: #4d4d69;
 377   white-space: nowrap;
 378 }
 379
 380 #afGuiEditor .dropdown-menu li > * > label {
 381   font-weight: normal;
 382   cursor: pointer;
 383 }
 384
 385 #afGuiEditor .dropdown-menu li .af-gui-field-select-in-dropdown > select {
 386   max-width: 120px;
 387   padding-left: 5px;
 388   padding-right: 5px;
 389 }
 390
 391 #afGuiEditor li .af-gui-field-select-in-dropdown input[type=color] {
 392   width: 30px;
 393   padding: 2px 4px;
 394 }
 395
 396 #afGuiEditor li .af-gui-field-select-in-dropdown input[type=number] {
 397   width: 50px;
 398   padding-right: 0;
 399 }
 400
 401 /* For editing field placeholder text */
 402 #afGuiEditor .af-gui-field-input input[type=text].form-control {
 403   color: #9a9a9a;
 404 }
 405
 406 #afGuiEditor .af-gui-field-input-type-number input[type=text].form-control {
 407   background-image: url('../images/number.png');
 408   background-repeat: no-repeat;
 409   background-position: center right 6px;
 410 }
 411
 412 #afGuiEditor .af-gui-field-input input.crm-form-date {
 413   width: 140px;
 414   margin-right: -2px;
 415 }
 416 #afGuiEditor .af-gui-field-input input.crm-form-time {
 417   width: 80px;
 418 }
 419
 420 #afGuiEditor .af-gui-field-input-type-radio label.radio {
 421   font-weight: normal;
 422   margin-right: 10px;
 423 }
 424 #afGuiEditor .af-gui-field-input-type-radio label.radio input[type=radio] {
 425   margin: 0;
 426 }
 427 #afGuiEditor .af-gui-field-input-type-select .input-group-btn {
 428   position: initial;
 429 }
 430 #afGuiEditor .af-gui-field-input-type-chainselect .input-group .dropdown-toggle,
 431 #afGuiEditor .af-gui-field-input-type-select .input-group .dropdown-toggle {
 432   padding: 3px 11px;
 433 }
 434 #afGuiEditor .af-gui-field-input-type-select .input-group .dropdown-menu {
 435   width: 100%;
 436   right: 0;
 437 }
 438 #afGuiEditor .af-gui-field-input-type-select .input-group .dropdown-menu a {
 439   cursor: default;
 440 }
 441
 442 #afGuiEditor .af-gui-text-h1 {
 443   font-weight: bolder;
 444   font-size: 16px;
 445 }
 446
 447 #afGuiEditor .af-gui-text-h2 {
 448   font-weight: bold;
 449   font-size: 15px;
 450 }
 451
 452 #afGuiEditor .af-gui-text-legend,
 453 #afGuiEditor .af-gui-text-h3 {
 454   font-weight: bold;
 455   font-size: 14px;
 456 }
 457
 458 #afGuiEditor .af-gui-text-legend {
 459   text-decoration: underline;
 460 }
 461
 462 #afGuiEditor .af-gui-text-h4 {
 463   font-weight: bold;
 464 }
 465
 466 #afGuiEditor .af-gui-text-h5 {
 467   font-weight: 600;
 468 }
 469
 470 #afGuiEditor .af-gui-text-h6 {
 471   font-weight: 500;
 472 }
 473
 474 #afGuiEditor .af-gui-field-help {
 475   font-style: italic;
 476 }
 477
 478 #afGuiEditor.af-gui-editing-content {
 479   pointer-events: none;
 480   cursor: default;
 481 }
 482 #afGuiEditor.af-gui-editing-content .panel-heading,
 483 #afGuiEditor.af-gui-editing-content .af-gui-element,
 484 #afGuiEditor.af-gui-editing-content .af-gui-markup-content,
 485 .af-gui-editing-content #afGuiEditor-palette .panel-body > * {
 486   opacity: .5;
 487 }
 488 #afGuiEditor.af-gui-editing-content .af-gui-container {
 489   border: 2px solid transparent;
 490 }
 491 #afGuiEditor.af-gui-editing-content .af-gui-bar {
 492   visibility: hidden;
 493 }
 494 #afGuiEditor.af-gui-editing-content .af-gui-bar:before {
 495   background: none;
 496 }
 497
 498 #afGuiEditor .af-gui-content-editing-area {
 499   pointer-events: auto;
 500   cursor: auto;
 501   padding-top: 35px;
 502   position: relative;
 503 }
 504
 505 #afGuiEditor af-gui-edit-options.af-gui-content-editing-area {
 506   border: 2px solid #0071bd;
 507 }
 508
 509 #afGuiEditor .af-gui-content-editing-area .af-gui-edit-options-bar {
 510   height: 30px;
 511   font-family: "Courier New", Courier, monospace;
 512   font-size: 12px;
 513   width: 100%;
 514   background-color: #f2f2f2;
 515   position: absolute;
 516   top: 0;
 517   left: 0;
 518   padding-left: 15px;
 519 }
 520 #afGuiEditor .af-gui-edit-options-bar .btn-group-sm {
 521   position: absolute;
 522   top: 0;
 523   right: 0;
 524 }
 525 #afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] {
 526   padding: 5px 20px 0;
 527 }
 528 #afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] li {
 529   list-style: none;
 530   padding-left: 15px;
 531   position: relative;
 532   background-color:#e7ecf1;
 533   cursor: move;
 534 }
 535 #afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] li:nth-child(even) {
 536   background-color:#f2f2f2;
 537 }
 538 #afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] li > div {
 539   width: calc(100% - 30px);
 540   display: inline-block;
 541 }
 542 #afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul.af-gui-edit-options-deleted li > div {
 543   text-decoration: line-through;
 544 }
 545 #afGuiEditor af-gui-edit-options.af-gui-content-editing-area ul[ui-sortable] li .btn-xs {
 546   border: 0 none;
 547 }
 548 #afGuiEditor af-gui-edit-options.af-gui-content-editing-area h5 {
 549   margin-left: 20px;
 550 }
 551
 552 #afGuiEditor .af-gui-dropzone {
 553   background-color: #e9eeff;
 554   border: 2px solid #0071bd;
 555   min-height: 30px;
 556 }