[#665] Add and use a modal component

* takes care of including the close modal button and the bits of code
  needed to make reveal.js recognize this as a modal (the data-reveal)

* accepts id / class arguments

* tweaks the appearance of the close button so it's not as prominent

* some refactoring to make sure the styling is only done in one location

htdocs/scss/components/foundation-custom/_reveal.scss

@@ -0,0 +1,7 @@
+.close-reveal-modal {
+    text-decoration: none;
+
+    &:hover, &:focus {
+        color: $primary-color;
+    }
+}

htdocs/scss/foundation/foundation.scss

@@ -56,4 +56,6 @@
 @import
   "components/foundation-custom/buttons",
   "components/foundation-custom/pagination",
-  "components/foundation-custom/tables";
+  "components/foundation-custom/tables",
+  "components/foundation-custom/reveal";
+

htdocs/scss/skins/_nav.scss

@@ -73,12 +73,6 @@ $nav-small-screen-header-height: 3em;
               $top-offset:$reveal-position-top
             );
 
-            .close-reveal-modal {
-              @include reveal-close(
-                $color:$reveal-close-color
-              );
-            }
-
             .logout.button { display: block; margin-top: .5em; }
             ul { list-style: none; margin-left: 0; }
         }

htdocs/scss/skins/celerity.scss

@@ -90,7 +90,6 @@ $panel-bg:                              darken( $body-bg, 5% );
 // reveal modal
 $reveal-modal-bg:                       $panel-bg;
 $reveal-border-color:                   $form-border-color;
-$reveal-close-color:                    $link-color;
 
 // sub-nav
 $sub-nav-font-color:	$inactive-color;

htdocs/scss/skins/gradation/_gradation-base.scss

@@ -72,7 +72,6 @@ $panel-bg:                              lighten( $background-color, 20% );
 // reveal modal
 $reveal-modal-bg:                       $panel-bg;
 $reveal-border-color:                   $form-border-color;
-$reveal-close-color:                    $link-color;
 
 // tables
 $table-bg:                              $form-bg-color;

views/components/icon-browser.tt

@@ -18,7 +18,7 @@ the same terms as Perl itself.  For a copy of the license, please reference
         "stc/css/components/icon-browser.css"
     ); -%]
 
-<div id="js-icon-browser" class="reveal-modal icon-browser" data-reveal>
+    [%- WRAPPER components/modal.tt id="js-icon-browser" class="icon-browser" -%]
     <div class="row">
         <div class="columns medium-2 large-1">
             <label class='inline' for='js-icon-browser-search'>Search:</label>
@@ -54,6 +54,5 @@ the same terms as Perl itself.  For a copy of the license, please reference
             <ul></ul>
         </div>
     </div></div>
-    <a href="#0" class="close-reveal-modal" title="Close">&#215;</a>
-</div>
+    [%- END -%]
 [%- END -%]

views/components/modal.tt

@@ -0,0 +1,16 @@
+[%# components/modal.tt
+
+Wrapper block for modals
+
+Authors:
+    Afuna <coder.dw@afunamatata.com>
+
+This program is free software; you may redistribute it and/or modify it under
+the same terms as Perl itself.  For a copy of the license, please reference
+'perldoc perlartistic' or 'perldoc perlgpl'.
+%]
+
+<div id="[%- id -%]" class="reveal-modal [%- class.join(" ") -%]" data-reveal>
+[%- content -%]
+<a href="#0" class="close-reveal-modal" title="Close">&#215;</a>
+</div>

views/entry/module-access.tt

@@ -15,8 +15,8 @@ the same terms as Perl itself.  For a copy of the license, please reference
 <fieldset>
 <div class="inner">
     [% IF customgroups.size > 0 %]
-    <div id="js-custom-groups" class="reveal-modal custom-groups" data-reveal>
 
+    [%- WRAPPER components/modal.tt id="js-custom-groups" class="custom-groups" -%]
     <fieldset class="row"><div class="columns">
       <legend>[% ".header.custom" | ml %]</legend>
       <ul class="no-bullet">
@@ -36,9 +36,7 @@ the same terms as Perl itself.  For a copy of the license, please reference
       <ul class="no-bullet" id="js-custom-group-members">
       </ul>
     </div></fieldset>
-
-    <a href="#0" class="close-reveal-modal" title="Close">x</a>
-    </div>
+    [% END %]
 
     [% END %]