@val img200 = src:="http://placehold.it/200x200"
@val img250 = img(src:="http://placehold.it/250x250")
@val sasquatch = img(src:="http://dribbble.s3.amazonaws.com/users/4467/screenshots/661196/sasquatch-troop-full.jpg")

@div
  @h1
    Pure Extras
  @h2
    CSS styles for images, thumbnails, badges, contextual menus and alerts.
    Depends on Pure CSS.
  @p
    Pure-Scala 1:1 reimplementation of
    @a(href:="http://github.com/tilomitra/cssextras", "pure-extras").

  @h2
    Images
  @p
    Styling of three different types are available for images, eliptical,
    rounded, bordered. To use them, just add one of these classes to the
    @code(raw("<img>")) tag.

  @div(pure.g)
    @div(pure.u_1_3)
      @img(Extras.pure_img_elliptical, width:="200", height:="150",
        src:="http://dribbble.s3.amazonaws.com/users/9418/screenshots/928345/suhio_shoot.png")
    @div(pure.u_1_3)
      @img(Extras.pure_img_rounded, width:="200", height:="150",
        src:="http://dribbble.s3.amazonaws.com/users/9418/screenshots/928345/suhio_shoot.png")
    @div(pure.u_1_3)
      @img(Extras.pure_img_bordered, width:="200", height:="150",
        src:="http://dribbble.s3.amazonaws.com/users/9418/screenshots/928345/suhio_shoot.png")

  @p
    When using class @code("Extras.pure_img_elliptical"), if the width and
    height of the image are equal, it will appear as a circle. Otherwise, it
    will appear as an ellipse.
  @img(Extras.pure_img_elliptical, width:="200", height:="200", img200)

  @h2
    Thumbnails
  @p
    Add the class @code("Extras.pure_thumbnails") to the container
    @code(raw("<ul>")). Then add one of the classes,
    @code("Extras.pure_thumb_elliptical"), @code("Extras.pure_thumb_rounded"),
    or @code("Extras.pure_thumb_bordered"), to the @code(raw("<a>")).

  @ul(Extras.pure_thumbnails, pure.g)
    @li(pure.u_1_4)
      @a(Extras.pure_thumb, Extras.pure_thumb_elliptical, href:="#")
        @img250
    @li(pure.u_1_4)
      @a(Extras.pure_thumb, Extras.pure_thumb_rounded, href:="#")
        @img250
    @li(pure.u_1_4)
      @a(Extras.pure_thumb, Extras.pure_thumb_bordered, href:="#")
        @img250
    @li(pure.u_1_4)
      @a(Extras.pure_thumb, Extras.pure_thumb_bordered, href:="#")
        @img250
        @div(Extras.caption_)
          @h3(Extras.caption_head)
            Rocket – game concept
          @p
            This is a great shot from Jozef Mak from Dribbble.

  @p
    Adding a @code("div(Extras.caption_)") allows you to customize the
    thumbnail with additional content.

  @p
    If you have YUI grids on the page, add @code("pure_u_*") for multi-column
    thumbnails that scale to fit the columns.

  @ul(Extras.pure_thumbnails, pure.g)
    @li(pure.u_1_4)
      @a(Extras.pure_thumb, Extras.pure_thumb_elliptical, href:="#")
        @sasquatch
    @li(pure.u_1_4)
      @a(Extras.pure_thumb, Extras.pure_thumb_rounded, href:="#")
        @sasquatch
    @li(pure.u_1_4)
      @a(Extras.pure_thumb, href:="#")
        @sasquatch
    @li(pure.u_1_4)
      @a(Extras.pure_thumb, Extras.pure_thumb_bordered, href:="#")
        @sasquatch
        @div(Extras.caption_)
          @h3(Extras.caption_head)
            Thumbnail label
          @p
            Curabitur et sapien ac diam pharetra lacinia quis ac tortor.
            Suspendisse dictum fermentum dui at mollis. Nunc pulvinar blandit
            diam in vehicula.

  @h2
    Badges
  @p
    To create a badge, use a @code("span") tag, and add one of the badge
    classes as shown below.

  @span(Extras.pure_badge)
    A badge
  @span(Extras.pure_badge_success)
    Success badge
  @span(Extras.pure_badge_warning)
    Warning badge
  @span(Extras.pure_badge_error)
    Badges can have a bunch of content
  @span(Extras.pure_badge_info)
    Info badge
  @span(Extras.pure_badge_inverse)
    or not much at all.

  @h2
    Alerts
  @p
    Create alerts by adding a class to it's @code("div").

  @h3
    Default Alert
  @p
    The default alert can be set by adding the @code("Extras.pure_alert") class name.
  @div(Extras.pure_alert)
    @label
      Welcome back, Tilo.

  @h3
    Error Alert
  @p
    Alerts in red have the connotation of something going wrong. The error
    alert can be set by appending the @code("Extras.pure_alert_error") class name
    in addition to the @code("Extras.pure_alert").
  @div(Extras.pure_alert, Extras.pure_alert_error)
    @label(strong("Breaking News"))
    'Most' of Atlanic City Underwater. Atlantic City Boardwalk Destroyed by Sandy.

  @h3
    Warning Alert
  @p
    If you want to send a warning notification, use the warning alert. It can
    be set by appending the @code("Extras.pure_alert_warning") class name in
    addition to the @code("Extras.pure_alert").
  @div(Extras.pure_alert, Extras.pure_alert_warning)
    @label(strong("Update"))
    Looks like you like the Green Bay Packers so we added the team to your Sports App!

  @h3
    Success Alert
  @p
    Mission successful? Use the Success Alert! It can be set by appending the
    @code("Extras.pure_alert_success") in addition to the
    @code("Extras.pure_alert").
  @div(Extras.pure_alert, Extras.pure_alert_success)
    @label(strong("New Badge Unlocked!"))
    You unlocked the "Paradise" badge!

  @h2
    Contextual Modals

  @div(pure.g)
    @div(pure.u_1_2)
      @h3
        Bottom Arrow
      @div(Extras.pure_popover, Extras.pure_popover_bottom)
        @div
          @p
            You have no new notifications.
          @p
            Receive notifications when you comment or discuss content with
            friends on Yahoo!
          @p
            @a(pure.button, Extras.pure_button_block, href:="#")
              Learn More
        @div(Extras.pure_arrow_border)
        @div(Extras.pure_arrow)
    @div(pure.u_1_2)
      @h3
        Left Arrow
      @div(Extras.pure_popover, Extras.pure_popover_left)
        @div
          @p
            You have no new notifications.
          @p
            Receive notifications when you comment or discuss content with
            friends on Yahoo!
          @p
            @a(pure.button, Extras.pure_button_block, href:="#")
              Learn More
        @div(Extras.pure_arrow_border)
        @div(Extras.pure_arrow)

  @div(pure.g)
    @div(pure.u_1_2)
      @h3
        Top Arrow
      @div(Extras.pure_popover, Extras.pure_popover_top)
        @div
          @p
            You have no new notifications.
          @p
            Receive notifications when you comment or discuss content with
            friends on Yahoo!
          @p
            @a(pure.button, Extras.pure_button_block, href:="#")
              Learn More
        @div(Extras.pure_arrow_border)
        @div(Extras.pure_arrow)
    @div(pure.u_1_2)
      @h3
        Right Arrow
      @div(Extras.pure_popover, Extras.pure_popover_right)
        @div
          @p
            You have no new notifications.
          @p
            Receive notifications when you comment or discuss content with
            friends on Yahoo!
          @p
            @a(pure.button, Extras.pure_button_block, href:="#")
              Learn More
        @div(Extras.pure_arrow_border)
        @div(Extras.pure_arrow)

  @h2
    Contextual Modals with Grids
  @p
    You can use grids within these contextual menus for interesting effects.
  @div(pure.g)
    @div(pure.u_1)
      @h4
        You have mail.
      @div(Extras.pure_popover, Extras.pure_popover_bottom, width:="70%")
        @div(pure.g)
          @div(pure.u_1_5)
            @strong
              Yahoo! Mail
          @div(pure.u_3_5)
            You have 3 new messages.
          @div(pure.u_1_5, cls:="text-right")
            @a(pure.button, Extras.pure_button_small, href:="#")
              Read
        @div(Extras.pure_arrow_border)
        @div(Extras.pure_arrow)

  @h2
    Buttons
  @h3
    Button Types
  @p
    @a(pure.button)
      A regular button
    @a(pure.button, Extras.pure_button_selected)
      Selected
  @p
    @a(pure.button, Extras.pure_button_secondary)
      Secondary
    @a(pure.button, Extras.pure_button_error)
      Error
    @a(pure.button, Extras.pure_button_success)
      Success
    @a(pure.button, Extras.pure_button_warning)
      Warning
  @p
    @a(pure.button, Extras.pure_button_block)
      Block

  @h3
    Button Sizes
  @p
    Large buttons have twice the padding of regular buttons. Apply the
    @code("Extras.pure_button_large").
  @a(pure.button, Extras.pure_button_large)
    Big click target
  @a(pure.button, Extras.pure_button_success, Extras.pure_button_large)
    Big Success

  @p
    Small buttons have half the padding of regular buttons. Apply the
    @code("Extras.pure_button_small").
  @a(pure.button, Extras.pure_button_small)
    Smaller target
  @a(pure.button, Extras.pure_button_secondary, Extras.pure_button_small)
    Smaller Secondary Button
  @a(pure.button, Extras.pure_button_warning, Extras.pure_button_small)
    Smaller Warning Button
  @a(pure.button, Extras.pure_button_error, Extras.pure_button_small)
    Smaller Error Button

// vim: et ts=2 sw=2 syn=scala