Create alert/warning/note styles

[aik099]

Currently we only have .message class that shows basic message. I think that we also should have .alert, .note and .warning classes (like on Confluence) to show corresponding messages.

They can be used to notify the reader of important stuff on a page first.

[aik099]

@evangelion1204 can you please look if we can arrange something like that? Probably a balloon of with background and the icon. And the colors should be in tone with website color scheme.

[evangelion1204]

Sure, if you could provide me with at least an screenshot of the style in Confluence or how it could look like. The colors can be decided later.

[aik099]

Here you go:

I've looked at slice-up and they are DIVs with span inside that shows the icon (like you did for GitHub edit link in footer by the way). Problem with that is that on every page we'll use that we need to copy-paste that HTML, which isn't good.

I've tried to play with some Liquid syntax:

Define a block with name "block_name":
{{ capture 'block_name' }} block content goes here {{ endcapture }}  

Use a block:
{{ block_name }} or {{ block_name 'argument1' 'argument 2' }}

but I wasn't able to figure out how to get argument values passed to a block or if blocks defined in design will still be available in other templates where design is included.

[evangelion1204]

Just a proof of concept that it is possible with some simple markup and CSS using the default icon set of glyphicons, which are grayscale.
Should work in most modern browsers even IE8, but can only validate this tomorrow.

http://evangelion1204.kissr.com/

Colors and style are just placeholders. I think we need to make the border a little bit thicker and adjust colors and icons.

[aik099]

Looks good, but of course colors needs to be adjusted, because that blurry red doesn't look as scary as it should for a solid alert message.