@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