Styling Elements

// CSS rendering system from class-fl-builder-css.php
FLBuilderCSS::rule(array(
  'selector' => '.fl-node-{id}',
  'props'    => array(
    'color' => '#333333',
    'font-size' => '16px',
  )
));

/* Default (Desktop) */
.fl-node-abc123 {
  font-size: 24px;
}

/* Large Devices (max-width: 1200px) */
@media(max-width: 1200px) {
  .fl-node-abc123 {
    font-size: 22px;
  }
}

/* Medium Devices (max-width: 992px) */
@media(max-width: 992px) {
  .fl-node-abc123 {
    font-size: 20px;
  }
}

/* Small Devices (max-width: 768px) */
@media(max-width: 768px) {
  .fl-node-abc123 {
    font-size: 18px;
  }
}

FLBuilderCSS::responsive_rule(array(
  'settings'     => $settings,
  'setting_name' => 'font_size',
  'selector'     => '.fl-heading',
  'prop'         => 'font-size',
));

// Typography field structure
'typography' => array(
  'type'       => 'typography',
  'label'      => __( 'Typography', 'fl-builder' ),
  'responsive' => true,
  'preview'    => array(
    'type'     => 'css',
    'selector' => '.element',
  ),
)

// Font size with unit
'font_size' => array(
  'length' => '24',
  'unit'   => 'px',
)

// Line height configuration
'line_height' => array(
  'length' => '1.5',  // 1.5x the font size
  'unit'   => '',     // Unitless
)

'letter_spacing' => array(
  'length' => '0.5',
  'unit'   => 'px',
)

// Color field with alpha support
'text_color' => array(
  'type'        => 'color',
  'label'       => __( 'Text Color', 'fl-builder' ),
  'show_reset'  => true,
  'show_alpha'  => true,
  'responsive'  => true,
  'preview'     => array(
    'type'     => 'css',
    'selector' => '.element',
    'property' => 'color',
  ),
)

'bg_color' => array(
  'type'        => 'color',
  'label'       => __( 'Background Color', 'fl-builder' ),
  'show_reset'  => true,
  'show_alpha'  => true,
  'preview'     => array(
    'type' => 'refresh',
  ),
)

'bg_gradient' => array(
  'type'    => 'gradient',
  'label'   => __( 'Background Gradient', 'fl-builder' ),
  'preview' => array(
    'type' => 'refresh',
  ),
)

// Background image controls
'bg_image' => array(
  'type'        => 'photo',
  'show_remove' => true,
  'label'       => __( 'Photo', 'fl-builder' ),
  'responsive'  => true,
)

'background' => array(
  'type'       => 'background',
  'label'      => __( 'Background Layers', 'fl-builder' ),
  'responsive' => array(
    'default' => array(
      'default' => array(
        array(
          'type'  => 'color',
          'state' => array(
            'color' => '#ffffff',
          ),
        ),
      ),
    ),
  ),
)

FLBuilderCSS::border_field_rule(array(
  'settings'     => $settings,
  'setting_name' => 'border',
  'selector'     => '.element',
));

// Border field props from class-fl-builder-css.php
static public function border_field_props( $setting = array() ) {
  $props = array();
  
  if ( isset( $setting['style'] ) && ! empty( $setting['style'] ) ) {
    $props['border-style'] = $setting['style'];
    $props['border-width'] = '0';
  }
  
  if ( isset( $setting['color'] ) && ! empty( $setting['color'] ) ) {
    $props['border-color'] = $setting['color'];
  }
  
  // Width per side
  if ( isset( $setting['width'] ) && is_array( $setting['width'] ) ) {
    foreach ( array( 'top', 'right', 'bottom', 'left' ) as $side ) {
      if ( isset( $setting['width'][ $side ] ) ) {
        $props[ "border-$side-width" ] = $setting['width'][ $side ] . 'px';
      }
    }
  }
  
  return $props;
}

'shadow' => array(
  'horizontal' => '0',    // X offset
  'vertical'   => '0',    // Y offset  
  'blur'       => '10',   // Blur radius
  'spread'     => '0',    // Spread radius
  'color'      => 'rgba(0,0,0,0.2)',
  'inset'      => false,  // Inner shadow
)

FLBuilderCSS::dimension_field_rule(array(
  'settings'     => $settings,
  'setting_name' => 'padding',
  'selector'     => '.element',
  'unit'         => 'px',
  'props'        => array(
    'padding-top'    => 'padding_top',
    'padding-right'  => 'padding_right',
    'padding-bottom' => 'padding_bottom',
    'padding-left'   => 'padding_left',
  ),
));

'responsive' => array(
  'default_unit' => array(
    'default'    => 'px',
    'large'      => 'px',
    'medium'     => 'px',
    'responsive' => 'px',
  ),
  'placeholder' => array(
    'default' => array(
      'top'    => '20',
      'right'  => '20',
      'bottom' => '20',
      'left'   => '20',
    ),
  ),
)

/* Target your custom class */
.my-custom-class {
  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
  padding: 40px;
  border-radius: 8px;
}

/* Responsive custom styles */
@media (max-width: 768px) {
  .my-custom-class {
    padding: 20px;
  }
}

.my-button {
  background: #3490dc;
  transition: all 0.3s ease;
}

.my-button:hover {
  background: #2779bd;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated-element {
  animation: slideIn 0.5s ease-out;
}

:root {
  --primary-color: #3490dc;
  --secondary-color: #ffed4e;
  --spacing-unit: 20px;
}

.element {
  color: var(--primary-color);
  padding: var(--spacing-unit);
}