--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/example/src/extras.scalatex Sun Dec 27 22:54:33 2020 +0100
@@ -0,0 +1,289 @@
+@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