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