ext/afform/admin/ang/afGuiEditor.css

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