# Inline styles
@calculate_button = UIButton.named(I18n.t(:calculate_button)).style(color: 0xFFFFFF, align: :center, vertical_align: :center, top: 10, left: 30, width: 120, height: 40)


# External styles
# /app/stylesheets/application.rb
class ApplicationStylesheet < Stylesheets::Base

  # Stylesheets for UI-Elements
  # usage: @element.outfit(:awesome_default)

  outfit :description_label do
    color  = 0xFFFFFF
    align  = :center
    width  = 400
    height = 300
    top    = 40
    left   = 60
  end

  outfit :awesome_default do
    color            = 0xFFFFFF
    align            = :center
    top              = 40
    left             = 60
    background_color = 0x000000
    background_image = "default_background.png"
    background_size  = :cover

    # Set "label.png" as background image only if it's an UITextField-Element
    context UITextfield do |c|
      c.background_image = "textfield.png"
    end


    # Set "label.png" as background image only
    # if it's an UILabel-Element and device orientation is landscape
    context UILabel, :landscape do |c|
      c.background_image = "label_landscape.png"
    end

    # Set "label.png" as background image only
    # if it's an UILabel-Element and device orientation is portrait
    context UILabel, :portrait do |c|
      c.background_image = "label_portrait.png"
    end

  end

end

# /app/stylesheets/application.pad.rb
# Additional outfit for iPad devices
class Application < Stylesheets::Pad

  outfit :awesome_default do
    width  = 400
    height = 300
  end

end

# /app/stylesheets/application.phone.rb
# Additional outfit for iPhone and iPod touch devices
class Application < Stylesheets::Phone

  outfit :awesome_default do
    width  = 200
    height = 100
  end

end


# /app/somewhere_else.rb

@calculate_button = button.named("calculate").outfit(:awesome_default)

@calculate_button.on(:touch) do |b|
  calculate
end

@calculate_button.on(:swipe_left) do |b|
  calculate_with_awesome_effect
end