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