RubyGems - cable - Versions diffs - 0.8.6 → 0.9.0 - Mend

cable 0.8.6 → 0.9.0

Files changed (94) hide show

data/VERSION CHANGED Viewed

	@@ -1 +1 @@
1	- 0.8.6
1	+ 0.9.0

data/app/views/layouts/_breadcrumb.html.erb ADDED Viewed

	@@ -0,0 +1 @@
1	+ <div id="breadcrumb"><%= render_navigation :renderer => :breadcrumbs, :join_with => " » " %></div>

data/app/views/layouts/_messages.html.erb CHANGED Viewed

@@ -1,12 +1,12 @@
 <% flash.each do |key, message| %>
-  <div id="messages" class="box">
+  <div class="messages box flash">
     <div class="flash-<%= key %>">
       <%= message %>
     </div>
   </div>
 <% end %>
 <% unless @content_for_form_errors.blank? %>
-  <div id="messages" class="box error">
+  <div class="messages box error">
       <%= yield :form_errors %>
   </div>
-<% end %>
+<% end %>

data/app/views/layouts/admin.html.erb CHANGED Viewed

@@ -1,51 +1,46 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-  <title><%= @page_title || Cable::Setting.last.site_title %> |  Administration Portal </title>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title><%= @page_title || Cable::Setting.last.site_title %> |  Administration Portal </title>
     <%= csrf_meta_tag %>
     <%= stylesheet_link_tag 'cable/blueprint/screen' %>
-    <%= formtastic_stylesheet_link_tag %>
-    <%= stylesheet_link_tag 'cable', 'columnview' %>
-    <%= stylesheet_link_tag 'iphone_checkboxes.css' %>
-    <%= javascript_include_tag 'jquery' , 'jquery-ui', 'rails' %>
-    <%= javascript_include_tag 'tinymce/jquery.tinymce.js' %>
-    <%= javascript_include_tag 'jquery.tablesorter.min.js' %>
-    <%= javascript_include_tag 'admin.js' %>
+    <%= stylesheet_link_tag 'cable' %>
+    <%= stylesheet_link_tag 'cable/formtastic' %>
+    <%= stylesheet_link_tag 'cable/formtastic_changes' %>
+    <%= stylesheet_link_tag 'jquery/ui/jquery-ui-1.8.7.custom.css' %>
+    <%= javascript_include_tag 'jquery' , 'jquery-ui', 'rails','tinymce/jquery.tinymce.js', 'jquery.tablesorter.min.js', 'admin.js' %>
     <%= yield :scripts %>
   </head>
-  <body class="<%= @current_controller %>-controller <%= @current_action %>-action">
-    <div class="header-wrapper">
+  <body>
+    <div id="header">
       <div class="container">
-        <div id="header">
-          <div class="span-12"><h1><%= Cable::Setting.last.site_title %></h1></div>
-          <div class="span-12 last"><%= yield(:admin_login , admin_user_login) %></div>
-        </div>
+        <div class="span-16"><h1><%= Cable::Setting.last.site_title %></h1></div>
+        <div class="span-8 last"><%= yield(:admin_login , admin_user_login) %></div>
         <div id="main-navigation" class="span-24"><%= render_navigation(:level => 1, :context => :admin) %></div>
       </div>
     </div>
-    <div id="content-wrapper">
+    <div id="main-wrapper">
       <div class="container">
         <div id="right-col" class="span-4">
-          <div id="secondary-navigation"><%= render_navigation(:level => 2..5, :context => :admin) %></div>
+          <div id="secondary-navigation" class="box shadow"><%= render_navigation(:level => 2..5, :context => :admin) %></div>
           <%= yield :sidebar %>
         </div>
         <div id="main" class="span-20 last">
-          <div id="main-box" class="box">
-            <h2><%= @page_title %></h2>
-            <div id="breadcrumb"><%= render_navigation :renderer => :breadcrumbs, :join_with => " &raquo; " %></div>
+          <div class="box shadow">
+            <h2 id="title"><%= @page_title %></h2>
+            <div id="help"><%= yield :help %><a class="button">Help</a></div>
+            <%= render :partial => 'layouts/breadcrumb' %>
             <%= yield :page_menu %>
-            <div id="messages_container"><%= render :partial => 'layouts/messages' %></div>
+            <%= render :partial => 'layouts/messages' %>
             <%= yield %>
-          </div>
+          </div>
         </div>
       </div>
     </div>
-    <div class="footer-wrapper">
+    <div class="footer">
       <div class="container">
         <div id="powered-by-cable">Powered by: Cable | V.<%= Cable::Base.version %></div>
       </div>

data/lib/generators/cable/menu/templates/erb/menus/_menu_children_table.html.erb CHANGED Viewed

@@ -32,7 +32,7 @@
           <th>Title</th>
           <th>Children</th>
           <th>Resource Type</th>
-          <th class="action">Actions</th>
+          <th class="actions">Actions</th>
         </tr>
       </thead>
       <tbody class="sortable">

data/lib/generators/cable/menu/templates/erb/menus/move.html.erb CHANGED Viewed

@@ -1,19 +1,3 @@
-<%% content_for :scripts do %>
-<%%= javascript_include_tag 'jquery.clickmenu' %>
-<script>
-$(document).ready(function(){
-  $('#menu-tree-list').clickMenu({arrowSrc:'/images/arrow-head.png', onClick:function(){
-    var id = $(this).attr("id").replace("menu_", "");
-    $("#parent").html("Moving to: "+$(this).attr("title"));
-    $("#menu_parent_id").val(id);
-    $('#menu-tree-list').trigger('closemenu');
-    return false;
-  }});
-});
-</script>
-<%% end %>
 <h2>Move Menu</h2>
 <div id="parent">Select a parent</div><br />
 <%%= semantic_form_for [:admin, @<%= singular_table_name %>] do |f| %>

data/lib/generators/cable/menu/templates/migration.rb CHANGED Viewed

@@ -14,6 +14,7 @@ class Create<%= table_name.camelize %> < ActiveRecord::Migration
     # add_index :<%= table_name %>, :rgt
     # add_index :<%= table_name %>, :parent_id
     add_index :<%= table_name %>, :url
+    add_index :<%= table_name %>, :marketable_url
     # add_index :<%= table_name %>, :cable_menuable_id
   end

data/lib/generators/cable/resource/templates/erb/scaffold/_form.html.erb CHANGED Viewed

@@ -1,30 +1,23 @@
 <%%= semantic_form_for([:admin,@<%= singular_table_name %>], :html => {:multipart => true}) do |f| %>
-    <%% if @<%= singular_table_name %>.errors.any? %>
-        <div id="error_explanation">
-          <h2><%%= pluralize(@<%= singular_table_name %>.errors.count, "error") %> prohibited this <%= singular_table_name %> from being saved:</h2>
+  <%% if @<%= singular_table_name %>.errors.any? %>
+    <div id="error_explanation">
+      <h2><%%= pluralize(@<%= singular_table_name %>.errors.count, "error") %> prohibited this <%= singular_table_name %> from being saved:</h2>
-          <ul>
-          <%%= @<%= singular_table_name %>.errors.full_messages.each do |msg| %>
-            <li><%%= msg %></li>
-          <%% end %>
-          </ul>
-        </div>
-    <%% end %>
-    <%%= f.inputs do %>
-        <% for attribute in attributes -%>
-            <% unless attribute.type == :text %>
+      <ul>
+        <%%= @<%= singular_table_name %>.errors.full_messages.each do |msg| %>
+          <li><%%= msg %></li>
+        <%% end %>
+      </ul>
+    </div>
+  <%% end %>
+  <%%= f.inputs do %>
+    <% for attribute in attributes -%>
+      <% unless attribute.type == :text %>
         <%%= f.input :<%= attribute.name %>, :label => '<%= attribute.name %>' %>
-            <% else %>
+      <% else %>
         <%%= f.input :<%= attribute.name %>, :label => '<%= attribute.name %>', :input_html => {:class => 'html_editor'} %>
-            <% end -%>
-        <% end %>
-    <%% end %>
-  <hr />
-  <div class="submit">
-    <%%= f.buttons do %>
-        <%%= f.commit_button 'Submit',  :button_html => {:class => 'submit_button'} %>
-    <%% end %>
-  </div>
+      <% end -%>
+    <% end %>
+  <%% end %>
+  <%%= f.buttons %>
 <%% end %>

data/lib/generators/cable/resource/templates/erb/scaffold/index.html.erb CHANGED Viewed

@@ -1,43 +1,48 @@
 <table>
-  <tr>
-    <th>Page</th>
-    <th>Template</th>
-    <th></th>
-  </tr>
-<%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
-  <tr>
-    <td><strong><%%= link_to <%= singular_table_name %>.title, [:admin, <%= singular_table_name %>], :target => "_blank" %></strong></td>
-    <td style="text-align:right;"><%%= link_to 'Edit', edit_admin_<%= singular_table_name %>_path(<%= singular_table_name %>), :class=>"button" %> <%%= link_to 'Destroy', [:admin, <%= singular_table_name %>], :confirm => 'Are you sure?', :method => :delete, :class=>"button" %></td>
-  </tr>
-  <%% unless <%= singular_table_name %>.menu.blank? %>
-  <tr>
-    <td><strong>Template:</strong>
-    <td><%%= <%= singular_table_name %>.menu.template.titleize unless <%= singular_table_name %>.menu.blank? %></td>
-  </tr>
-  <%% end %>
-  <%% if <%= singular_table_name %>.respond_to?(:blocks) %>
-  <tr>
-    <td colspan=1>
-      <strong>Blocks:</strong>
-    </td>
-    <td>
-      <%% unless <%= singular_table_name %>.blocks.empty? %>
-      <%%= <%= singular_table_name %>.blocks.each do |block| %>
-        <strong><%%= link_to block.title, [:admin, block] %></strong> => <%%= block.region.titleize %><br />
-        <%% end %>
-      <%% end %>
-    </td>
-  </tr>
-  <%% end %>
-  <%% if <%= singular_table_name %>.respond_to?(:teaser) %>
-  <tr>
-    <td><strong>Teaser:</strong></td>
-    <td><%%= <%= singular_table_name %>.teaser unless <%= singular_table_name %>.teaser.blank? %></td>
-  </tr>
-  <%% end %>
-  <%% unless <%= singular_table_name %>.menu.blank? %>
+  <thead>
+    <tr>
+      <th>Page</th>
+      <th>Template</th>
+      <th class="actions">Actions</th>
+    </tr>
+  </thead>
+  <tbody>
+    <%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
+      <tr>
+        <td><strong><%%= link_to <%= singular_table_name %>.title, [:admin, <%= singular_table_name %>], :target => "_blank" %></strong></td>
+        <td style="text-align:right;"><%%= link_to 'Edit', edit_admin_<%= singular_table_name %>_path(<%= singular_table_name %>) %> <%%= link_to 'Destroy', [:admin, <%= singular_table_name %>], :confirm => 'Are you sure?', :method => :delete %></td>
+      </tr>
+      <%% unless <%= singular_table_name %>.menu.blank? %>
+      <tr>
+        <td><strong>Template:</strong>
+        <td><%%= <%= singular_table_name %>.menu.template.titleize unless <%= singular_table_name %>.menu.blank? %></td>
+      </tr>
+    <%% end %>
+    <%% if <%= singular_table_name %>.respond_to?(:blocks) %>
+      <tr>
+        <td colspan=1>
+          <strong>Blocks:</strong>
+        </td>
+        <td>
+          <%% unless <%= singular_table_name %>.blocks.empty? %>
+            <%%= <%= singular_table_name %>.blocks.each do |block| %>
+              <strong><%%= link_to block.title, [:admin, block] %></strong> => <%%= block.region.titleize %><br />
+          <%% end %>
+          <%% end %>
+        </td>
+      </tr>
+    <%% end %>
+    <%% if <%= singular_table_name %>.respond_to?(:teaser) %>
+      <tr>
+        <td><strong>Teaser:</strong></td>
+        <td><%%= <%= singular_table_name %>.teaser unless <%= singular_table_name %>.teaser.blank? %></td>
+      </tr>
+    <%% end %>
+    <%% unless <%= singular_table_name %>.menu.blank? %>
       <tr>
         <td style="border-bottom:2px solid #333;">
           <strong>URL:</strong>
@@ -46,9 +51,6 @@
           <%%= <%= singular_table_name %>.menu.url unless <%= singular_table_name %>.menu.blank? %></td>
         </td>
       </tr>
-  <%% end %>
-<%% end %>
-</table>
-<script>
-    $('.button').button();
-</script>
+    <%% end %>
+  </tbody>
+</table>

data/lib/generators/cable/resource/templates/erb/scaffold/show.html.erb CHANGED Viewed

@@ -8,5 +8,4 @@
 <% end %>
-<%%= link_to 'Edit', edit_admin_<%= singular_table_name %>_path(@<%= singular_table_name %>) %> |
-<%%= link_to 'Back', admin_<%= index_helper %>_path %>
+<%%= link_to 'Edit', edit_admin_<%= singular_table_name %>_path(@<%= singular_table_name %>) %> | <%%= link_to 'Back', admin_<%= index_helper %>_path %>

data/public/images/cable/add.png ADDED Viewed

Binary file

data/public/images/cable/children.png ADDED Viewed

Binary file

data/public/images/cable/empty-menu.png ADDED Viewed

Binary file

data/public/images/cable/header-background.jpg ADDED Viewed

Binary file

data/public/images/cable/help.png ADDED Viewed

Binary file

data/public/images/cable/loader.gif ADDED Viewed

Binary file

data/public/javascripts/cable_menu.js ADDED Viewed

@@ -0,0 +1,316 @@
+(function($){
+  var xhr;
+  var sortable_options = {
+    items: "li:not(#add-menu)",
+    connectWith: '.cable_menu_wrapper ul',
+    appendTo: '.cable_menu_wrapper',
+    helper: 'clone',
+    placeholder: "ui-state-highlight",
+    delay: 100,
+    stop: function(event, ui){
+      $tree = $(".cable_menu_wrapper > ul");
+      update_tree($tree);
+      select_item(ui.item[0]);
+    },
+    update: function(event, ui) {
+    },
+    receive: function(event, ui) {
+      $target = $(event.target);
+      $item = $(ui.item[0]);
+      $children_of_item = $item.data("children");
+      $id_of_item = $item.attr("menu");
+      $id_of_target = $target.attr("menu");
+      var $test_for_children = $children_of_item.indexOf(parseInt($id_of_target));
+      if($test_for_children < 0){
+      }else{
+        $(ui.sender).sortable('cancel');
+      }
+      if($id_of_item == $id_of_target){
+        $(ui.sender).sortable('cancel');
+      }
+    }
+  };
+  function save_tree(){
+    $(".cable_menu_wrapper li").each(function() {
+      $li = $(this);
+      $ul = $("ul[menu="+$li.attr("menu")+"]");
+      $ul.removeAttr("id");
+      $li.append($ul);
+      $li.attr("id", "menu_"+$li.attr("menu"));
+    });
+    $(".cable_menu_wrapper").find("ul").unbind("mouseenter");
+    $(".cable_menu_wrapper").find("ul").unbind("mouseleave");
+    $('.cable_menu_wrapper > ul').removeAttr("id");
+    var the_menu = $('.cable_menu_wrapper > ul').serialize_list();
+    $(".cable_menu_wrapper").removeClass();
+    $.post("/admin/menus/sort", the_menu);
+  }
+  function show_add_menu(item){
+    $("#add-menu").remove();
+    var $add = $("<li id='add-menu'>Add Menu Item</li>").appendTo($(item));
+    // $add.css({"position":"absolute","bottom":"-40px"});
+    // $item.css({"padding-bottom":"40px","height":"300px"});
+    $add.click(function(){
+      var id = $(item).attr("menu");
+      $("#add-menu-form").html("<img src='/images/cable/loader.gif' />");
+      $("#add-menu-form").load("/admin/menus/new?parent_id="+id, function(){
+        $("#save-tree").hide();
+        $("#menu-details").hide();
+        $("<li class='commit'><input class='cancel' id='menu_cancel' name='cancel' type='button' value='Cancel' /></li>").insertBefore("ol li.commit").click(function(){
+          $("#add-menu-form").html("");
+          $("#save-tree").show();
+        });
+      });
+    })
+  }
+  function hide_add_menu(item){
+    // $item = $(item);
+    // $item.css({"padding-bottom":"0px","height":"340px"});
+    $("#add-menu").remove();
+  }
+  function update_parents(item){
+    var $li = $(item);
+    var $id = $li.attr("menu");
+    var $pli = $("li[menu="+$id+"]");
+    var $parents = [];
+    var $pid = $pli.parent().attr("menu");
+    $parents.push(parseInt($pid));
+    if($pid != 0){
+      var $arr = update_parents($pli.parent())
+      var len= $arr.length;
+      for(var i=0; i<len; i++) {
+        $parents.push(parseInt($arr[i]));
+      }
+    }
+    $li.data("parents",$parents);
+    return $parents;
+  }
+  function update_children(item){
+    var $li = $(item);
+    var $id = $li.attr("menu");
+    var $ul = $("ul[menu="+$id+"]");
+    if($ul.children().size() == 0){
+      $li.removeClass("has-children").addClass("empty");
+    }else{
+      $li.addClass("has-children");
+    }
+    var $children = [];
+    $ul.children().each(function(){
+      $cid = $(this).attr("menu");
+      $cul = $("ul[menu="+$cid+"]");
+      $children.push(parseInt($cid));
+      var $arr = update_children(this);
+      var len= $arr.length;
+      for(var i=0; i<len; i++) {
+        $children.push(parseInt($arr[i]));
+      }
+    })
+    $li.data("children",$children);
+    return $children;
+  }
+  function update_breadcrumb(){
+    var items = new Array();
+    $(".cable_menu_wrapper .selected").removeClass("last");
+    $(".cable_menu_wrapper .selected").each(function(){
+      items.push($(this).text());
+    });
+    $("#selection p").html(items.join(" &raquo; "));
+    $(".cable_menu_wrapper .selected").last().addClass("last");
+  }
+  function select_item(item,wrapper){
+    $item = $(item);
+    $id = $(item).attr("menu");
+    $wrapper = $(wrapper);
+    $child = $("ul[menu="+$id+"]");
+    if($child.children().size() > 0){
+      $child.css({ left: $item.parent().position().left + $item.parent().width()+3+$(".cable_menu_wrapper").scrollLeft(), top: 0}).show();
+    }else{
+      $("<ul class='cable_menu empty' menu="+$id+"/>").css({ left: $item.parent().position().left + $item.parent().width()+3+$(".cable_menu_wrapper").scrollLeft(), top: 0}).sortable(sortable_options).appendTo($wrapper).mouseenter(function() {
+        show_add_menu(this);
+       }).mouseleave(function(){
+        hide_add_menu(this);
+       });;
+    }
+    $item.addClass("selected");
+    $item.siblings('.selected').each(function(){
+      deselect(this);
+    });
+    $child.children().each(function(){
+      deselect(this);
+    });
+    $wrapper.append($item.parent());
+    last_width = $wrapper.attr("scrollWidth");
+    $wrapper.stop();
+    $wrapper.animate({ 'scrollLeft': $wrapper.attr("scrollWidth") }, 2000);
+    $("#add-menu-form").html("");
+    $("#save-tree").show();
+    $("#menu-details").html("<img src='/images/cable/loader.gif' />").show();
+    if(xhr != undefined) {
+      xhr.abort();
+    }
+    xhr = $.ajax({
+      url: "/admin/menus/"+$item.attr("menu"),
+      success: function(data) {
+        $("#menu-details").html(data);
+      }
+    });
+    update_breadcrumb();
+  }
+  function deselect(item) {
+    var $item = $(item);
+    $item.removeClass('selected');
+    $id = $item.attr("menu");
+    $child = $("ul[menu="+$id+"]");
+    $child.hide().find("li").each(function(){
+      deselect(this);
+    });
+  }
+  function update_tree(tree){
+    $tree = $(tree);
+    $tree.find("li").each(function(){
+     update_children(this);
+     update_parents(this);
+    });
+  }
+  function build_menu(ul, wrapper, id){
+    var $wrapper = $(wrapper);
+    var $ul = $(ul);
+    var $id = id;
+    var $new_menu = $("<ul class='cable_menu' menu="+$id+"/>").appendTo($wrapper);
+    if($id >= 1){
+      $new_menu.hide();
+    }
+    $ul.children().each(function(){
+      var $li = $(this);
+      var $cloned_li = $(this).clone();
+      if($cloned_li.children().size() > 0){
+        $cloned_li.addClass("has-children");
+        $cloned_li.children().each(function(){
+          var $id = $cloned_li.attr("id").replace("menu_","");
+          build_menu(this,$wrapper,$id);
+        });
+      }
+      $cloned_li.appendTo($new_menu);
+      $cloned_li.attr("menu",$cloned_li.attr("id").replace("menu_",""));
+      $cloned_li.removeAttr("id");
+      $cloned_li.find("ul").remove();
+    });
+  }
+  $.fn.serialize_list = function(options) {
+    var defaults = {
+      attributes: ['id'],
+      allow_nesting: true,
+      prepend: 'ul',
+      att_regex: false,
+      is_child: false
+    };
+    var opts = $.extend(defaults, options);
+    var serialized_string = '';
+    if(!opts.is_child){
+      opts.prepend = '&'+opts.prepend;
+    }
+    this.each(function() {
+      var li_count = 0;
+      $(this).children().each(function(){
+        if(opts.allow_nesting || opts.attributes.length > 1){
+          for(att in opts.attributes){
+            val = att_rep(opts.attributes[att], $(this).attr(opts.attributes[att]));
+            serialized_string += opts.prepend+'['+li_count+']['+opts.attributes[att]+']='+val;
+          }
+        } else {
+          val = att_rep(opts.attributes[0], $(this).attr(opts.attributes[0]));
+          serialized_string += opts.prepend+'['+li_count+']='+val;
+        }
+        if(opts.allow_nesting){
+          var child_base = opts.prepend+'['+li_count+'][children]';
+          $(this).children().each(function(){
+            if(this.tagName == 'UL' || this.tagName == 'OL'){
+              serialized_string += $(this).serialize_list({'prepend': child_base, 'is_child': true});
+            }
+          });
+        }
+        li_count++;
+      });
+      function att_rep (att, val){
+        if(opts.att_regex){
+          for(x in opts.att_regex){
+            if(opts.att_regex[x].att == att){
+              return val.replace(opts.att_regex[x].regex, '');
+            }
+          }
+        } else {
+          return val;
+        }
+      }
+    });
+    return(serialized_string);
+  };
+  $.fn.cable_menu = function(options){
+    var $tree = $(this);
+    var $wrapper = $("<div class='cable_menu_wrapper'></div>").insertAfter($tree);
+    build_menu($tree, $wrapper, 0);
+    $wrapper.find("li").click(function(){
+      select_item(this, $wrapper);
+    });
+    update_tree($wrapper);
+    $tree.remove();
+    $wrapper.find("ul").sortable(sortable_options);
+    $wrapper.find("ul").mouseenter(function() {
+      show_add_menu(this);
+     }).mouseleave(function(){
+      hide_add_menu(this);
+     });
+    var $current_selection = $("<div id='selection'><strong>Current Selection:</strong><p>&nbsp;</p></div>").insertBefore($wrapper);
+    var $save = $("<div id='save-tree' class='actions'><a>Save Tree</a></div>").insertAfter($wrapper);
+    var $form = $("<div id='add-menu-form' />").insertAfter($save);
+    var $menu_details = $("<div id='menu-details' />").insertAfter($save);
+    $save.click(function(){save_tree();});
+    $("<hr />").insertAfter($wrapper);
+  }
+})(jQuery);

data/public/stylesheets/cable/base.css ADDED Viewed

@@ -0,0 +1,25 @@
+/* @override http://localhost:3000/stylesheets/cable/base.css */
+body{
+	padding-bottom:5em;
+	background: #f2f2f2;
+}
+a{
+	text-decoration:none;
+	color: #2494fa;
+}
+a:hover{
+	text-decoration:underline;
+}
+.box{
+	background: white;
+	padding: 10px;
+}
+.box.shadow{
+	 -moz-box-shadow: 0px 2px 2px #ccc;
+  -webkit-box-shadow: 0px 2px 2px #ccc;
+          box-shadow: 0px 2px 2px #ccc;
+}