# 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 do
      color    0x000000
      image    "default_background.png"
      size     :cover
    end

    # or
    # 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(:press) do |b|
  calculate
end

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