ext/afform/admin/ang/afGuiEditor.css

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