//- ====================================
//-  STYLING
//- ====================================
.sixteen.columns

  .section

    h3 Custom Styling Guide

    p
      | You can add your own styles to Notify.js with the
      code $.notify.addStyle 
      | method. See  
      a(data-highlight) API
      | .

    p Style definition objects are in the form:

    pre.prettyprint.
      {
        //required html representing each notification 
        html: "",
        //optional object to be converted to css
        classes: {
          <className>: {
            <propertyName>: <value> 
          },
          <className>: {
            ...
          },
          ...
        },
        //optional css to be inserted onto the page
        css: ""
      }

    p
      h5.inline html
      |  - If you only have HTML element that you need to modify per
      | notification then you should give this element an attribute of 
      code data-notify-text
      |  or 
      code data-notify-html
      | . Use 
      code data-notify-html
      |  if you wish to display arbitrary HTML inside the notification,
      |  otherwise, use 
      code data-notify-text
      |  as it is more secure.
      br
      |  Otherwise, if you wish to modify multiple HTML elements per
      | notification then you'll need to give each element one of the two
      | attributes above 
      b as well as a value
      | . For an example of this see the Advanced Example below.

    p
      h5.inline classes
      |  - This object will be used to construct css. It must be in the form described above and there is an example below.
    p
      h5.inline css
      |  - This string is simply raw css. Use this property if you want to keep your style definition inside
      |  your js files.


  .section
    h4 Class naming convention
    p.
      When each notification is constructed, it's container 
      (outer most element defined in your style html) will automatically 
      apply the class:
    p
      code notifyjs-<style name>-base
    p 
      | When you use the class name option (
      code className
      | ) the class:
    p
      code notifyjs-<style name>-<class name>
    p.
      will be applied. So if you define your styles in an external CSS file or in the style's css
      property, you must define your CSS rules using this naming convention.

  .section

    h4 Simple Example

    p If you were to define the style:
    pre.prettyprint.auto-run.happyblue-example.
      $.notify.addStyle('happyblue', {
        html: "<div>☺<span data-notify-text/>☺</div>",
        classes: {
          base: {
            "white-space": "nowrap",
            "background-color": "lightblue",
            "padding": "5px"
          },
          superblue: {
            "color": "white",
            "background-color": "blue"
          }
        }
      });

    p
      | Upon running this code, the 
      code classes
      |  object in this example will be converted the following css:
    pre.prettyprint.lang-css.
      .notifyjs-happyblue-base {
        white-space: nowrap;
        background-color: lightblue;
        padding: 5px;
      }
      .notifyjs-happyblue-superblue {
        color: white;
        background-color: blue;
      }
    p:i You can confirm this now by inspecting the DOM (look for the tagged style element in the head)

    p You can now use your new style with:
    pre.prettyprint.runnable.
      $.notify('hello !!', {
        style: 'happyblue'
      });

    p 
      | and you can use the 
      code superblue
      |  class with:
    pre.prettyprint.runnable.
      $.notify('HELLO !!!!', {
        style: 'happyblue',
        className: 'superblue'
      });

  .section

    h4 Advanced Example

    p Say you wanted to use buttons in your notifications then you could do something like:

    pre.prettyprint.auto-run.button-js-example.
      //add a new style 'foo'
      $.notify.addStyle('foo', {
        html: 
          "<div>" +
            "<div class='clearfix'>" +
              "<div class='title' data-notify-html='title'/>" +
              "<div class='buttons'>" +
                "<button class='no'>Cancel</button>" +
                "<button class='yes' data-notify-text='button'></button>" +
              "</div>" +
            "</div>" +
          "</div>"
      });

      //listen for click events from this style
      $(document).on('click', '.notifyjs-foo-base .no', function() {
        //programmatically trigger propogating hide event
        $(this).trigger('notify-hide');
      });
      $(document).on('click', '.notifyjs-foo-base .yes', function() {
        //show button text
        alert($(this).text() + " clicked!");
        //hide notification
        $(this).trigger('notify-hide');
      });

    p 
      | Notice there is no 
      code classes
      |  property defined above. Since the CSS in this example is non-trivial, we'll use an exteral CSS file instead:
    p.italic
      | Note: you could also convert this CSS code to a JavaScript string and use it with the 
      code css
      |  property. It's not very readable though it's better for distribution.

    pre.prettyprint.auto-add.foo-css-example.lang-css.

      .notifyjs-foo-base {
        opacity: 0.85;
        width: 200px;
        background: #F5F5F5;
        padding: 5px;
        border-radius: 10px;
      }

      .notifyjs-foo-base .title {
        width: 100px;
        float: left;
        margin: 10px 0 0 10px;
        text-align: right;
      }

      .notifyjs-foo-base .buttons {
        width: 70px;
        float: right;
        font-size: 9px;
        padding: 5px;
        margin: 2px;
      }

      .notifyjs-foo-base button {
        font-size: 9px;
        padding: 5px;
        margin: 2px;
        width: 60px;
      }

    p You can now use this style with:

    pre.prettyprint.runnable.
      $.notify({
        title: 'Would you like some Foo ?',
        button: 'Confirm'
      }, { 
        style: 'foo',
        autoHide: false,
        clickToHide: false
      });

  .section

    h4 Extra Example

    p.
      If using the above methods still don't provide you
      with what you need then you can, pass jQuery objects
      straight into the notification (provided that the
      element has the <code>data-notify-html</code> attribute):

    pre.prettyprint.runnable.

      var h5 = $("&lt;h5/&gt;").append("You MUST have some Foo !")

      $.notify({
        title: h5,
        button: 'YES !'
      }, { 
        style: 'foo',
        autoHide: false,
        clickToHide: false
      });

  .section

    h4 Style List

    p
      ul.square
        li: a(href="https://github.com/jpillora/notifyjs/tree/gh-pages/dist/styles/bootstrap", target="_blank") bootstrap
      ul.square
        li: a(href="https://github.com/jpillora/notifyjs/tree/gh-pages/dist/styles/metro", target="_blank") metro