slug: section
name: Section
type: section
visibility:
  lg: true
  md: true
  sm: true
  xs: true
form:
  general:
    - name : layout_fields_group
      label: Layout
      type: fields-group
      status: open
      schema:
        - name: section_stretch
          label : Stretch Section
          type: switch

        - name : container_type
          label : Container Type
          help : Containers provide a means to center and horizontally pad your site’s contents.
          type: select
          value : boxed
          responsive: false
          options:
            boxed : Boxed
            fluid: Full Width
      
        - name : height
          type: select
          value: default
          options:
            default : Default
            full: Fit To Screen
            custom: Min Height
        
        - name : custom_height
          label: Minimum Height
          type : slider
          min: 0
          max: 1500
          suffix: px
          responsive: true
          depends : 
            height : 'custom'

        - name : v_align
          label: Column Poisition
          type : choose
          responsive : false
          depends:
            height: ['full', 'custom']
          options:
            qx-align-items-start :
              label: Top
              icon : qxicon-arrow-to-top
            qx-align-items-center :
              label : Middle
              icon : qxicon-minus
            qx-align-items-end : 
              label : Bottom
              icon : qxicon-arrow-to-bottom
        
        - name: html_tag
          label: HTML Tag
          type: select
          value: div
          options:
            section : Section
            header : Header
            footer : Footer
            aside : Aside
            article : Article
            nav : Nav 
            div : Div

  styles :
    - name : spacing_fields_group
      label: Spacing
      type: fields-group
      schema:
        - name: margin
          type: dimensions
          units: %, px, em, rem, vh

        - name: padding
          type: dimensions
          units: %, px, em, rem, vh
          value:
            top: 80
            bottom: 80
            left: 0
            right: 0
            tablet:
              top: 40
              bottom: 40
              left: 0
              right: 0
            phone:
              top: 20
              bottom: 20
              left: 0
              right: 0
        
        - name  : zindex
          label : Z-Index
          type  : slider
          units: %, px, rem, vh
          value : 0
          min   : 0
          max   : 999
          responsive : false
    
    - name : background_fields_group
      label: Background
      type: fields-group
      schema:
        - name: background
          type: background
          video: true
    
    - name : background_overlay_fields_group
      label: Background Overlay
      type: fields-group
      schema:
        - name: background_overlay
          type: background
          opacity: true
          parallax: false
    
    - name : border_fields_group
      label: Border & Box Shadow
      type: fields-group
      schema:
        - name: border
          type: border
   
    - name : divider_top_fields_group
      label: Divider Top
      type: fields-group
      schema:
        - name: top_divider_style
          label: Divider Style
          type: select
          value: none
          options: 
            none : None
            qx-tilt-opacity: Tilt Opacity
            qx-waves-shake: Waves Shake
            qx-triangle-wave: Triangle Wave
            qx-triangle-dobule-wave: Triangle Dobule Wave
            arrow: Arrow
            book: Book
            clouds: Clouds
            curve-asymmetrical: Curve Asymmetrical
            curve: Curve
            drops: Drops
            mountains: Mountains
            opacity-fan: Fan Opacity
            opacity-tilt: Tilt Opacity
            pyramids: Pyramids
            split: Split
            tilt: Tilt
            triangle-asymmetrical: Triangle Asymmetrical
            triangle: Triangle
            wave-brush: Waves Brush
            waves-pattern: Waves Pattern
            waves: Waves
            zigzag: Zigzag
        
        - name: top_divider_color
          label: Color
          type: color

        - name: top_divider_width
          label: Width
          type: slider
          min: 100
          max: 500
          value:
            desktop: 100
          depends:
            top_divider_style : ['qx-tilt-opacity', 'arrow', 'book', 'curve-asymmetrical', 'curve', 'mountains', 'opacity-fan', 'opacity-tilt', 'pyramids', 'split', 'triangle-asymmetrical', 'triangle', 'wave-brush', 'waves-pattern', 'waves', 'zigzag']
        
        - name: top_divider_height
          label: Height
          type: slider
          max: 700
          value:
            desktop: 100
            tablet : 100
            phone : 100
        
        - name: top_divider_flip
          label: Flip
          type: switch
        
        - name: top_divider_front
          label: Bring to Front
          type: switch
    
    - name : divider_bottom_fields_group
      label: Divider Bottom
      type: fields-group
      schema:
        - name: bottom_divider_style
          label: Divider Style
          type: select
          value: none
          options: 
            none : None
            qx-tilt-opacity: Tilt Opacity
            qx-waves-shake: Waves Shake
            qx-triangle-wave: Triangle Wave
            qx-triangle-dobule-wave: Triangle Dobule Wave
            arrow: Arrow
            book: Book
            clouds: Clouds
            curve-asymmetrical: Curve Asymmetrical
            curve: Curve
            drops: Drops
            mountains: Mountains
            opacity-fan: Fan Opacity
            opacity-tilt: Tilt Opacity
            pyramids: Pyramids
            split: Split
            tilt: Tilt
            triangle-asymmetrical: Triangle Asymmetrical
            triangle: Triangle
            wave-brush: Waves Brush
            waves-pattern: Waves Pattern
            waves: Waves
            zigzag: Zigzag
        
        - name: bottom_divider_color
          label: Color
          type: color

        - name: bottom_divider_width
          label: Width
          type: slider
          min: 100
          max: 500
          value:
            desktop: 100
          depends:
            bottom_divider_style : ['qx-tilt-opacity', 'arrow', 'book', 'curve-asymmetrical', 'curve', 'mountains', 'opacity-fan', 'opacity-tilt', 'pyramids', 'split', 'triangle-asymmetrical', 'triangle', 'wave-brush', 'waves-pattern', 'waves', 'zigzag']
        
        - name: bottom_divider_height
          label: Height
          type: slider
          max: 700
          value:
            desktop: 100
            tablet : 100
            phone : 100
        
        - name: bottom_divider_flip
          label: Flip
          type: switch
        
        - name: bottom_divider_front
          label: Bring to Front
          type: switch