caboose-cms 0.8.65 → 0.8.66

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e6a4ba5943295734cab32b17d7fdbfa8dd72711d
-  data.tar.gz: 88ff9aec8169a808c90b0b9ed97e63816638be5e
+  metadata.gz: 3cf7c6d9e4fe07dff210a8f64d6bf724ccc1ba82
+  data.tar.gz: 851278533f71b16795b16a5e91fbab4d4d7e01c1
 SHA512:
-  metadata.gz: ec41548d7130692a7754d55d62703cf5d17266222a4b2215da0c4bdc5179f8f5722868ad7878d7340a3248de76cfb1c2839e9eed03e21fd12927fc85695d56d8
-  data.tar.gz: b50b104307b57b2839efbfc1460be7922d6967150c91e00daf2d455f4d1b27b0afcbf435ed17746094ec3362166f623931c915ed3ced32c5b38303dff4f64b57
+  metadata.gz: acaf605b67399fb28bbcdb482cc7d2f3fe3820a30575e92a5c110cb96416de6ad7f0972af1f6aca44eabefbba8b181bf3be615a6eb9979e557d8ffa2ff6c4f5b
+  data.tar.gz: 9aa7634f77a9d4754abc9c9fe24a606d594ba1ac7dc091ae965174b363c75cd412e91ae5048862ecdd6657dd8a4e0877f64389460dba62f7d91d1a4c015ccbce

data/app/assets/javascripts/caboose/admin_media_index.js

@@ -27,14 +27,12 @@ MediaController.prototype = {
     $("#uploader")
       .empty()
       .append($('<p/>')
-        .append($('<a/>').attr('href', '#').html('Upload').click(function(e) { e.preventDefault(); that.toggle_uploader(); }))
-        .append(' | ')
-        .append($('<a/>').attr('href', '#').html('Select All').click(function(e) { e.preventDefault(); that.select_all_media(); }))
-        .append(' | ')
-        .append($('<a/>').attr('href', '#').attr('id', 'sort-btn').html('Sort').click(function(e) { e.preventDefault(); that.sort_media(); }))
+        .append($('<a/>').addClass('caboose-btn').attr('href', '#').html('Upload').click(function(e) { e.preventDefault(); that.toggle_uploader(); }))
+        .append($('<a/>').addClass('caboose-btn').attr('href', '#').html('Select All').click(function(e) { e.preventDefault(); that.select_all_media(); }))
+        .append($('<a/>').addClass('caboose-btn').attr('href', '#').attr('id', 'sort-btn').html('Sort').click(function(e) { e.preventDefault(); that.sort_media(); }))
       )
       .append($('<div/>').attr('id', 'the_uploader'));          
-    that.refresh();        
+    that.refresh();   
   },    
   
   refresh: function()
@@ -221,9 +219,10 @@ MediaController.prototype = {
   {
     var that = this;
     var ul = $('<ul/>');
+    var product_cat_id = 0;
     if (that.categories.length > 0)
     {      
-      $.each(that.categories, function(i, cat) {        
+      $.each(that.categories, function(i, cat) {
         var li = $('<li/>')
           .addClass('category')
           .attr('id', 'cat' + cat.id)
@@ -231,6 +230,16 @@ MediaController.prototype = {
           .append($('<a/>').attr('href', '#').html(cat.name + ' (' + cat.media_count + ')').click(function(e) { e.preventDefault(); that.select_category($(this).parent().data('media_category_id')); }));
         if (cat.id == that.cat_id)
           li.addClass('selected');
+     //   console.dir(cat);
+        if (cat.name && cat.name.indexOf('Products') > -1 && product_cat_id == 0) {
+          li.addClass('products-li');
+          li.html('').append($('<a/>').attr('href', '#').html(cat.name).click(function(e) { e.preventDefault(); $(this).closest('#left_content').toggleClass('hide-products'); }));
+          product_cat_id = cat.id;
+        }
+        else if ( cat.parent_id == product_cat_id ) {
+          li.addClass('product-sub-li');
+          li.html('').append($('<a/>').attr('href', '#').html(cat.name + ' (' + cat.media_count + ')').click(function(e) { e.preventDefault(); that.select_category($(this).parent().data('media_category_id')); }));
+        }
         ul.append(li);
       });      
     }
@@ -313,26 +322,33 @@ MediaController.prototype = {
           processing = true
         var li = $('<li/>')
           .attr('id', 'media' + m.id)
-          .addClass('media')          
+          .addClass('media')
           .data('media_id', m.id)
           .click(function(e) { that.select_media($(this).data('media_id')); })
           .append($('<span/>').addClass('name').html(m.original_name).click(function(e) {
             e.stopPropagation();
             that.edit_media_description($(this).parent().data('media_id'));
           }));
+    //    console.dir(m);
+        if (m.original_name && m.original_name.indexOf('png') > 0) {
+          li.addClass("png");
+        }
         if (m.image_urls)
-          li.append($('<img/>').attr('src', m.image_urls.tiny_url).attr("id","image-" + m.id));  
+          li.append($("<div/>").addClass("table").append($("<div/>").addClass("table-cell").append($('<img/>').attr('src', m.image_urls.tiny_url).attr("id","image-" + m.id))));  
         else if (m.original_name) {
           var ext = m.original_name.match(/\.[0-9a-z]+$/i);
+          li.addClass('empty');
           if (ext && ext.length > 0)
             li.append($('<img/>').attr('src', '/assets/caboose/file_types/' + ext[0].replace(".","").toLowerCase() + '.png').addClass('file-icon').attr("width","80").attr("height","80"));
         }                                  
         if (that.selected_media.indexOf(m.id) > -1)
           li.addClass('selected ui-selected');
-        if (that.allow_edit && m.image_urls) li.append($("<a/>").html("Edit Image").click(function() { that.edit_image($(this).parent().data('media_id')); }));
-        else                                 li.append($("<a/>").attr('href', m.file_url).html("Direct URL"));
-        if ( m.image_urls )                  li.append($("<a/>").addClass("dl i").html("Download").click(function() { that.download_image($(this).parent().data('media_id')); }));
-        else                                 li.append($("<a/>").addClass("dl i").html("Download").click(function() { that.download_image($(this).parent().data('media_id')); }));
+        var btndiv = $("<div/>").addClass("buttons");
+        li.append(btndiv);
+        if (that.allow_edit && m.image_urls) btndiv.append($("<a/>").html("Edit Image").click(function() { that.edit_image($(this).parent().parent().data('media_id')); }));
+        else                                 btndiv.append($("<a/>").attr('href', m.file_url).html("Direct URL"));
+        if ( m.image_urls )                  btndiv.append($("<a/>").addClass("dl i").html("Download").click(function() { that.download_image($(this).parent().parent().data('media_id')); }));
+        else                                 btndiv.append($("<a/>").addClass("dl i").html("Download").click(function() { that.download_image($(this).parent().parent().data('media_id')); }));
         ul.append(li);
       });
     }

data/app/assets/javascripts/caboose/block_content_controller.js

@@ -86,7 +86,9 @@ BlockContentController.prototype = {
       authenticity_token: that.authenticity_token,
       parent_controller: this,      
       assets_path: that.assets_path,
-      new_block_on_init: true
+      new_block_on_init: true,
+      before_id: before_block_id,
+      after_id: after_block_id
     }
     if (that.page_id && that.page_id != null) options['page_id'] = that.page_id;
     else                                      options['post_id'] = that.post_id;
@@ -227,13 +229,13 @@ BlockContentController.prototype = {
   
   set_clickable_helper: function(b, parent_id, parent_allows_child_blocks, is_last_child)
   {    
-    var that = this;            
-    $('#block_' + b.id)      
+    var that = this;
+    $('#block_' + b.id + ' *').attr('onclick', '').unbind('click');
+    $('#block_' + b.id)
       .prepend($('<a/>').attr('id', 'block_' + b.id + '_select_handle'    ).addClass('select_handle'    ).append($('<span/>').addClass('ui-icon ui-icon-check'      )).click(function(e) { e.preventDefault(); e.stopPropagation(); that.select_block(b.id);    }))      
       .prepend($('<a/>').attr('id', 'block_' + b.id + '_move_up_handle'   ).addClass('move_up_handle'   ).append($('<span/>').addClass('ui-icon ui-icon-arrow-1-n'  )).click(function(e) { e.preventDefault(); e.stopPropagation(); that.move_block_up(b.id);   }))
       .prepend($('<a/>').attr('id', 'block_' + b.id + '_move_down_handle' ).addClass('move_down_handle' ).append($('<span/>').addClass('ui-icon ui-icon-arrow-1-s'  )).click(function(e) { e.preventDefault(); e.stopPropagation(); that.move_block_down(b.id); }))
       .prepend($('<a/>').attr('id', 'block_' + b.id + '_delete_handle'    ).addClass('delete_handle'    ).append($('<span/>').addClass('ui-icon ui-icon-close'      )).click(function(e) { e.preventDefault(); e.stopPropagation(); that.delete_block(b.id);    }));
-      
     if (parent_allows_child_blocks && (!b.name || b.name.length == 0))
     {            
       $('#block_' + b.id).before($('<div/>')          
@@ -244,7 +246,7 @@ BlockContentController.prototype = {
           .html("New Block")
           .click(function(e) { 
             e.preventDefault(); e.stopPropagation();            
-            that.new_block(parent_id, b.id);
+            that.new_block(parent_id, b.id, null);
           })
         )
         .mouseover(function(e) { $(this).removeClass('new_block_link').addClass('new_block_link_over'); e.stopPropagation(); })
@@ -268,15 +270,12 @@ BlockContentController.prototype = {
         );
       }
     }
-    
-    $('#block_' + b.id + ' *').attr('onclick', '').unbind('click');
     $('#block_' + b.id).attr('onclick','').unbind('click');
     $('#block_' + b.id).click(function(e) {      
       e.preventDefault();
       e.stopPropagation();      
       that.edit_block(b.id); 
     });
-     
     var show_mouseover = true;
     if (b.children && b.children.length > 0)
     {

data/app/assets/javascripts/caboose/block_modal_controllers/block_modal_controller.js

@@ -10,6 +10,8 @@ var BlockModalController = ModalController.extend({
   new_block_on_init: false,
   assets_path: false,
   block_types: false,
+  before_id: false,
+  after_id: false,
   complex_field_types: ['block', 'richtext', 'image', 'file'],
     
   init: function(params) 

data/app/assets/javascripts/caboose/block_modal_controllers/media_modal_controller.js

@@ -165,14 +165,33 @@ var MediaModalController = BlockModalController.extend({
       $.each(that.media, function(i, m) {
         if (m.media_type == 'image' && m.processed == false)
           processing = true
-        var li = $('<li/>')          
+        // var li = $('<li/>')          
+        //   .attr('id', 'media' + m.id)
+        //   .addClass('media')          
+        //   .data('media_id', m.id)
+        //   .click(function(e) { that.print_media_detail($(this).data('media_id')); })
+        //   .append($('<span/>').addClass('name').html(m.original_name));
+        // if (m.image_urls && m.image_urls != undefined)
+        //   li.append($('<img/>').attr('src', m.image_urls.tiny_url + '?' + d));
+
+        var li = $('<li/>')
           .attr('id', 'media' + m.id)
-          .addClass('media')          
+          .addClass('media')
           .data('media_id', m.id)
           .click(function(e) { that.print_media_detail($(this).data('media_id')); })
           .append($('<span/>').addClass('name').html(m.original_name));
+        if (m.original_name && m.original_name.indexOf('png') > 0) {
+          li.addClass("png");
+        }
         if (m.image_urls && m.image_urls != undefined)
-          li.append($('<img/>').attr('src', m.image_urls.tiny_url + '?' + d));
+          li.append($("<div/>").addClass("table").append($("<div/>").addClass("table-cell").append($('<img/>').attr('src', m.image_urls.tiny_url + '?' + d).attr("id","image-" + m.id))));  
+        else if (m.original_name) {
+          var ext = m.original_name.match(/\.[0-9a-z]+$/i);
+          li.addClass('empty');
+          if (ext && ext.length > 0)
+            li.append($('<img/>').attr('src', '/assets/caboose/file_types/' + ext[0].replace(".","").toLowerCase() + '.png').addClass('file-icon').attr("width","80").attr("height","80"));
+        }   
+
         //if (that.selected_media.indexOf(m.id) > -1)
         //  li.addClass('selected ui-selected');
         if (m.id == that.media_id)
@@ -182,7 +201,7 @@ var MediaModalController = BlockModalController.extend({
     }
     else
       ul = $('<p/>').html("This category is empty.");
-    $('#media').empty().append(ul);
+    $('#the_modal #media').empty().append(ul);
     if (that.refresh_unprocessed_images == true && processing)
       setTimeout(function() { that.refresh(); }, 2000);
     that.autosize();
@@ -219,7 +238,7 @@ var MediaModalController = BlockModalController.extend({
     }
     
     $('#top_controls').empty();
-    $('#media').empty()              
+    $('#the_modal #media').empty()              
       .append($('<img/>').attr('id', 'detail_image').attr('src', m.image_urls ? m.image_urls.thumb_url : '//placehold.it/250x250'))      
       .append($('<p/>').append($('<div/>').attr('id', 'media_' + media_id + '_media_category_id' ))) 
       .append($('<p/>').append($('<div/>').attr('id', 'media_' + media_id + '_name'              )))
@@ -227,13 +246,13 @@ var MediaModalController = BlockModalController.extend({
       .append(image_urls);
     $('#modal_controls').empty()
       .append($('<p/>').css('clear', 'both')
-        .append($('<input/>').attr('type', 'button').val('< Back'            ).click(function(e) { 
+        .append($('<input/>').attr('type', 'button').addClass('caboose-btn').val('< Back'            ).click(function(e) { 
           that.print_top_controls();
           that.print_media();
           that.print_controls();
         }))
-        .append($('<input/>').attr('type', 'button').val('Select this Image' ).click(function(e) { that.select_media(media_id)                           }))        
-        .append($('<input/>').attr('type', 'button').val('Close'             ).click(function(e) { that.parent_controller.render_blocks(); that.close(); }))
+        .append($('<input/>').attr('type', 'button').addClass('caboose-btn').val('Select this Image' ).click(function(e) { that.select_media(media_id)                           }))        
+        .append($('<input/>').attr('type', 'button').addClass('caboose-btn').val('Close'             ).click(function(e) { that.parent_controller.render_blocks(); that.close(); }))
       );
     
     var m = new ModelBinder({

data/app/assets/javascripts/caboose/block_modal_controllers/richtext_modal_controller.js

@@ -52,9 +52,9 @@ var RichtextModalController = BlockModalController.extend({
           height: 300,
           fixed_placeholder: false,
           after_update: function() {            
-            tinymce.EditorManager.execCommand('mceRemoveEditor', true, 'block_' + that.block_id + '_value');
+   //         tinymce.EditorManager.execCommand('mceRemoveEditor', true, 'block_' + that.block_id + '_value');
             that.parent_controller.render_blocks();
-            that.close(); 
+        //    that.close(); 
           },
           after_cancel: function() { that.parent_controller.render_blocks(); that.close(); }
         }]

data/app/assets/stylesheets/caboose/admin_block_edit_image.css.scss

@@ -5,106 +5,144 @@
   width: 370px;
 }
   
-#left_content {
-  width: 200px;
-  float: left; 
-}
+// #left_content {
+//   width: 200px;
+//   float: left; 
+// }
 
-#right_content {
-  margin-left: 220px;
-  max-height: 600px;
-  overflow-y: scroll;
-}
+// #right_content {
+//   margin-left: 220px;
+//   max-height: 600px;
+//   overflow-y: scroll;
+// }
 
-#categories {  
-  ul {
-    list-style: none; 
-    margin: 0; 
-    padding: 0;
+// #categories {  
+//   ul {
+//     list-style: none; 
+//     margin: 0; 
+//     padding: 0;
     
-    li {       
-      list-style: none; 
-      margin: 0;
-      padding: 0;
+//     li {       
+//       list-style: none; 
+//       margin: 0;
+//       padding: 0;
       
-      a {
-        display: block;
-        margin: 0 0 2px 0;
-        padding: 4px 8px;
-        background: #ddd;
-        border: #999 1px solid;
-        color: #000;
-        text-decoration: none;
+//       a {
+//         display: block;
+//         margin: 0 0 2px 0;
+//         padding: 4px 8px;
+//         background: #ddd;
+//         border: #999 1px solid;
+//         color: #000;
+//         text-decoration: none;
         
-        &:hover {
-          background-color: #fff799;        
-        }
-      }
+//         &:hover {
+//           background-color: #fff799;        
+//         }
+//       }
       
-      &.selected {
-        & > a {
-          font-weight: bold;
-          background-color: #90dbf9;
-        }
-      }
-      &.cat_hover {
-        a {
-          background-color: #fff799 !important;
-        }
-      }
-    }    
-  }
-}
+//       &.selected {
+//         & > a {
+//           font-weight: bold;
+//           background-color: #90dbf9;
+//         }
+//       }
+//       &.cat_hover {
+//         a {
+//           background-color: #fff799 !important;
+//         }
+//       }
+//     }    
+//   }
+// }
 
-#controls {
-  #delete {
-    p.delete_dropper {        
-      padding: 8px 8px;
-      background: #ddd;
-      border: #999 1px solid;
-      color: #000;
-      text-decoration: none;
-    }
-    &.hover {
-      p.delete_dropper {        
-        background-color: #fff799 !important;    
-      }
-    }
-  }
-}
+// #controls {
+//   #delete {
+//     p.delete_dropper {        
+//       padding: 8px 8px;
+//       background: #ddd;
+//       border: #999 1px solid;
+//       color: #000;
+//       text-decoration: none;
+//     }
+//     &.hover {
+//       p.delete_dropper {        
+//         background-color: #fff799 !important;    
+//       }
+//     }
+//   }
+// }
 
 #uploader {  
   margin-bottom: 20px;
 }
 
-#media {
+#cboxContent {
+  overflow-y: scroll;
+}
+
+// #media {
   
-  ul.thumbnail_view {
+//   ul.thumbnail_view {
+//     list-style: none; 
+//     margin: 0 0 20px 0; 
+//     padding: 0; 
+    
+//     li { 
+//       position: relative;
+//       list-style: none; 
+//       margin: 4px; 
+//       padding: 0;   
+//       display: inline-block;
+//       width: 150px;
+//       height: 150px;
+//       overflow: hidden;
+//       background-color: #666;
+//       background-position: center;
+//       background-size: contain; 
+//       background-repeat: no-repeat;
+//       border: #666 4px solid;
+        
+//       span.name { 
+//         display: block; 
+//         position: absolute; 
+//         bottom: 4px; 
+//         width: 150px; 
+//         text-align: center;        
+//         color: #fff; 
+//         text-decoration: none !important;                                   
+//       }
+//       &:hover {
+//         background-color: #fff799;
+//         border: #fff799 4px solid;
+//         span { background-color: #fff799; color: #000; }
+//       }
+//       &.selected {
+//         background-color: #90dbf9;
+//         border: #90dbf9 4px solid;
+//         span { background-color: #90dbf9; color: #000; }
+//       }
+//     }
+//   }
+      
+  ul.list_view {
     list-style: none; 
-    margin: 0 0 20px 0; 
+    margin: 0; 
     padding: 0; 
     
     li { 
       position: relative;
       list-style: none; 
       margin: 4px; 
-      padding: 0;   
-      display: inline-block;
-      width: 150px;
-      height: 150px;
-      overflow: hidden;
+      padding: 4px;                     
       background-color: #666;
       background-position: center;
       background-size: contain; 
       background-repeat: no-repeat;
       border: #666 4px solid;
-        
+
       span.name { 
-        display: block; 
-        position: absolute; 
-        bottom: 4px; 
-        width: 150px; 
-        text-align: center;        
+        display: block;                
         color: #fff; 
         text-decoration: none !important;                                   
       }
@@ -119,39 +157,227 @@
         span { background-color: #90dbf9; color: #000; }
       }
     }
-  }
+  }  
+//}
+
+
+
+
+
+
+// #categories {  
+//   ul {
+//     list-style: none; 
+//     margin: 0; 
+//     padding: 0;
+    
+//     li {       
+//       list-style: none; 
+//       margin: 0;
+//       padding: 0;
       
-  ul.list_view {
+//       a {
+//         display: block;
+//         margin: 0 0 2px 0;
+//         padding: 4px 8px;
+//         font-size: 14px;
+//         line-height: 18px;
+//         background: #efefef;
+//         border: #c7c7c7 1px solid;
+//         color: #292929;
+//         text-decoration: none;
+//         &:focus {
+//           outline-width: 0;
+//         }
+//         &:hover {
+//           background-color: #fffcdb;        
+//         }
+//       }
+      
+//       &.selected {
+//         a {
+//      //     font-weight: bold;
+//           background-color: #d1f2ff;
+//         }
+//       }
+//       &.cat_hover {
+//         a {
+//           background-color: #fffcdb !important;
+//         }
+//       }
+//     }    
+//   }
+// }
+
+.caboose-btn {
+  background: #141516; 
+  color: #f7f7f7;
+  text-align: center; 
+  padding: 0 15px;
+  height: auto;
+  display: inline-block;
+  margin: 0 auto;
+  font-size: 15px;
+  line-height: 32px;
+  cursor: pointer;
+  border: 1px solid #fff;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-width: 0;
+  -webkit-appearance: none;
+  border-radius: 5px; 
+  text-decoration: none;
+  margin-right: 8px;
+}
+.caboose-btn:focus {
+  outline-width: 0;
+}
+.caboose-btn:hover {
+  background: #4f4448;
+}
+
+    
+#media {
+  ul {
     list-style: none; 
-    margin: 0; 
+    margin: 0 0 20px 0; 
     padding: 0; 
-    
-    li { 
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+    -webkit-align-items: stretch;
+    align-items: stretch;
+    flex-wrap: wrap;
+    li {
+      -webkit-box-flex: 0 1 150px;
+      -moz-box-flex:  0 1 150px;
+      -webkit-flex:  0 1 150px;
+      -ms-flex:  0 1 150px;
+      flex:  0 1 150px;
       position: relative;
       list-style: none; 
-      margin: 4px; 
-      padding: 4px;                     
-      background-color: #666;
-      background-position: center;
-      background-size: contain; 
-      background-repeat: no-repeat;
-      border: #666 4px solid;
+      margin: 0 10px 20px 0; 
+      padding: 0 0 35px 0;   
+      display: block;
+      overflow: hidden;
+      text-align: center;
+    //  padding: 8px;
+      border: 1px solid #dadada;
+      &.png {
+        background-image: url('/assets/caboose/grid.png');
+        background-size: 16px;
+        background-color: #e4e4e4;
+        &.selected {
+          background-image: none;
+        }
+      }
+      &.empty {
+        background-color: #bdbdbd;
+        background-image: none;
+      }
+      .table {
+        display: table;
+        table-layout: fixed;
+        width: 100%;
+        height: 120px;
+      }
 
+      .table-cell {
+        display: table-cell;
+        vertical-align: middle;
+        width: 100%;
+        height: 100%;
+      }
+      img {
+        display: block;
+        margin: 0 auto 0 auto;
+        max-width: 100%;
+        max-height: 120px;
+      }
       span.name { 
-        display: block;                
+        display: block; 
+        position: relative; 
+        // top: 0;
+        // left: 0;
+        height: auto;
+        overflow: hidden;
+        width: 100%;
+        font-size: 12px;
+        text-align: center;        
+        background: rgba(0,0,0,0.7);
+        padding: 3px;
         color: #fff; 
         text-decoration: none !important;                                   
       }
+      .file-icon {
+        display: block;
+        width: 80px;
+        margin: 10px auto 0 auto;
+      }
+      .buttons {
+        margin-top: 10px;
+     //   padding: 0 10px 6px 10px;
+        position: absolute;
+        left: 2%;
+        bottom: 3px;
+        width: 96%;
+        &::after {
+          content: "."; 
+          visibility: hidden; 
+          display: block; 
+          height: 0; 
+          clear: both;
+        }
+      }
+      a {
+        text-decoration: none;
+        cursor: pointer;
+        display: inline-block;
+        font-size: 11px;
+        text-align: center;
+        color: #000;
+        border-radius: 4px;
+        padding: 4px;
+        &:focus {
+          outline-width: 0;
+        }
+        &:first-of-type {
+          background: #516dbb;
+          color: #fff;
+          float: left;
+          &:hover {
+            background: shade(#516dbb, 10%);
+          }
+        }
+        &.dl {
+          // right: 8px;
+          left: initial;
+          float: right;
+          background: #51bd63;
+          color: #fff;
+          // width: 100%;
+          &:hover {
+            background: shade(#51bd63, 10%);
+          }
+          &.i {
+            width: auto;
+          }
+        }
+      }
       &:hover {
-        background-color: #fff799;
-        border: #fff799 4px solid;
-        span { background-color: #fff799; color: #000; }
+        background-image: none;
+        background-color: #fffcdb;
+     //   span { background-color: #fffcdb; color: #000; }
       }
       &.selected {
-        background-color: #90dbf9;
-        border: #90dbf9 4px solid;
+        background-color: #d1f2ff;
+   //     border: #90dbf9 4px solid;
         span { background-color: #90dbf9; color: #000; }
       }
     }
-  }  
+  }
 }