ext/afform/admin/ang/afGuiEditor.css

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