CF7 Skins Ready Rules

Last Updated on October 18, 2018 by Neil Murray

CURRENT/PLANNED

Ready

Box - class="box" – displays enclosed elements in a surrounding box
      [x] LIST-OL only
Column - class="column" – displays enclosed elements in a vertical column
      [x] LIST-OL only
      [x] but not LIST-OL nested within LIST-OL class="column"
            i.e. no <ol class="column"> nested inside another <ol class="column">
Singleline - class="singleline" – displays enclosed elements on a single line
      [x] LIST-OL only
      [x] but no <ol class="singleline"> nested inside another <ol class="singleline">
Horizontal - class="horizontal" – displays checkboxes & radio buttons in horizontal line
      [x] LIST-LI only
           planned change form separate checkbox-horizontal & radio-horizontal

Grid

Grid - class="grid" - implements a strict form grid in the enclosed area
      [x] LIST-OL only
      [x] no <ol class="grid"> nested inside another <ol class="grid">
Grid Row - data-row-span="#" - Row Span
      [x] LIST-OL 1st level child of LIST-OL class="grid"
Grid Field - data-field-span="#" - Field Span
      [ ] LIST-LI 1st level child of LIST-OL data-row-span="#"
Grid Lined - class="grid-lined" - highlights each grid element
      [x] LIST-OL only
Grid Hover - class="grid-hover" - displays all grid elements in lined grid
      [x] LIST-OL only

MULTIPLE CLASSES

Box

[x] Column - OK
[x] Singleline - OK
[x] Horizontal - X
[x] Grid - X
[x] Grid Row - X
[x] Grid Field - X
[x] Grid Lined - X
[x] Grid Hover - X

Column

[x] Box - OK
[x] Singleline - X
[x] Horizontal - X
[x] Grid - X
[x] Grid Row - X
[x] Grid Field - X
[x] Grid Lined - X
[x] Grid Hover - X

Singleline

[x] Box - OK
[x] Column - X
[x] Horizontal - X
[x] Grid - X
[x] Grid Row - X
[x] Grid Field - X
[x] Grid Lined - X
[x] Grid Hover - X

Horizontal

[x] Box - X
[x] Column - X
[x] Singleline - X
[x] Grid - X
[x] Grid Row - X
[x] Grid Field - X
[x] Grid Lined - X
[x] Grid Hover - X

Grid

[x] Box - X
[x] Column - X
[x] Singleline - X
[x] Horizontal - X
[x] Grid Row - X
[x] Grid Field - X
[x] Grid Lined - OK
    [x] but available only after Grid selected on same item
[x] Grid Hover - OK
    [x] but available only after Grid selected on same item

Grid Row

[x] Box - X
[x] Column - X
[x] Singleline - X
[x] Horizontal - X
[x] Grid - X
[x] Grid Field - X
[x] Grid Lined - X
[x] Grid Hover - X

Grid Field

[x] Box - X
[x] Column - X
[x] Singleline - X
[x] Horizontal - X
[x] Grid - X
[x] Grid Field - X
[x] Grid Lined - X
[x] Grid Hover - X

Grid Lined

[x] Box - X
[x] Column - X
[x] Singleline - X
[x] Horizontal - X
[x] Grid - OK
[x] Grid Row - X
[x] Grid Field - X
[x] Grid Hover - OK
    [x] but available only after Grid selected on same item

Grid Hover

[x] Box - X
[x] Column - X
[x] Singleline - X
[x] Horizontal - X
[x] Grid - OK
[x] Grid Row - X
[x] Grid Field - X
[x] Grid Lined - OK
    [x] but available only after Grid selected on same item

Drop Rules

  • Start dragging, allow dragging handle while not moving to other place yet.
  • From Top level, allow but not for grid-row and grid-field.
  • To Top level, allow but not for grid-row and grid-field.
  • Nesting, disable drop to nextParent if has common classes.
  • Grid Row, disable drop if nextParent does not have grid class.
  • Grid Field, disable drop if nextParent does not have grid-row class.