mice 0.2.8 → 0.2.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 28210033ea6813cd790bb7dfd993dd179f373777
-  data.tar.gz: 0125f51dc850e2dd802194e55eff74a523e05cff
+  metadata.gz: 51c5ae78ffece87741f7703b822d09cd05736a6c
+  data.tar.gz: 1cf2cfd0706abcebb742876bb96064744b37906d
 SHA512:
-  metadata.gz: 14776b5f0e36c5dc34cab1917733b9e1898fe9f37d8cbabe4df877c5d21b46417dbb34506c81cf252bd1512f786f7f50c35830f38f02902c27790f95022c45a3
-  data.tar.gz: 98a039063ca44429204b2d0b9441b2cda116684c219ee5ec4618eef9a0b240294759b973e4ea74cfa7f08b8cee969f800791d56e339dcfa9c20c67c8e6feb1d4
+  metadata.gz: e19ab7300fb7f6b6cba1c3be9024f0be532f9a8abee6555397ebfc2a51c31aaa90a9edd0ae05144af2396a17643a5bc79dd5c26996f837219dd576e7af021153
+  data.tar.gz: aa64ba62d4b68d173ea4c0084ffdc80d79ddc2eaac5a27caf0d1acb391ff278d465cf06bfe58c6040bce34e6b2d60b90052b0edbfc18f54bce1d177623c2a750

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    mice (0.2.8)
+    mice (0.2.9)
       sass (~> 3.2)
 
 GEM

data/lib/mice/version.rb

@@ -1,3 +1,3 @@
 module Mice
-  VERSION = "0.2.8"
+  VERSION = "0.2.9"
 end

data/vendor/assets/javascripts/mice/carousel.js

@@ -1,223 +1,66 @@
-/* ========================================================================
- * Bootstrap: carousel.js v3.2.0
- * http://getbootstrap.com/javascript/#carousel
- * ========================================================================
- * Copyright 2011-2014 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- * ======================================================================== */
-
-
-+function ($) {
-  'use strict';
-
-  // CAROUSEL CLASS DEFINITION
-  // =========================
-
-  var Carousel = function (element, options) {
-    this.$element    = $(element).on('keydown.bs.carousel', $.proxy(this.keydown, this))
-    this.$indicators = this.$element.find('.indicators')
-    this.options     = options
-    this.paused      =
-    this.sliding     =
-    this.interval    =
-    this.$active     =
-    this.$items      = null
-
-    this.options.pause == 'hover' && this.$element
-      .on('mouseenter.bs.carousel', $.proxy(this.pause, this))
-      .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
-  }
-
-  Carousel.VERSION  = '3.2.0'
-
-  Carousel.DEFAULTS = {
-    interval: 5000,
-    pause: 'hover',
-    wrap: true
-  }
-
-  Carousel.prototype.keydown = function (e) {
-    switch (e.which) {
-      case 37: this.prev(); break
-      case 39: this.next(); break
-      default: return
-    }
-
-    e.preventDefault()
-  }
-
-  Carousel.prototype.cycle = function (e) {
-    e || (this.paused = false)
-
-    this.interval && clearInterval(this.interval)
-
-    this.options.interval
-      && !this.paused
-      && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
-
-    return this
-  }
-
-  Carousel.prototype.getItemIndex = function (item) {
-    this.$items = item.parent().children('.item')
-    return this.$items.index(item || this.$active)
-  }
-
-  Carousel.prototype.to = function (pos) {
-    var that        = this
-    var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))
-
-    if (pos > (this.$items.length - 1) || pos < 0) return
-
-    if (this.sliding)       return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"
-    if (activeIndex == pos) return this.pause().cycle()
-
-    return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
-  }
-
-  Carousel.prototype.pause = function (e) {
-    e || (this.paused = true)
-
-    if (this.$element.find('.next, .prev').length && $.support.transition) {
-      this.$element.trigger($.support.transition.end)
-      this.cycle(true)
-    }
-
-    this.interval = clearInterval(this.interval)
-
-    return this
-  }
-
-  Carousel.prototype.next = function () {
-    if (this.sliding) return
-    return this.slide('next')
-  }
-
-  Carousel.prototype.prev = function () {
-    if (this.sliding) return
-    return this.slide('prev')
-  }
-
-  Carousel.prototype.slide = function (type, next) {
-    var $active   = this.$element.find('.item.active')
-    var $next     = next || $active[type]()
-    var isCycling = this.interval
-    var direction = type == 'next' ? 'left' : 'right'
-    var fallback  = type == 'next' ? 'first' : 'last'
-    var that      = this
-
-    if (!$next.length) {
-      if (!this.options.wrap) return
-      $next = this.$element.find('.item')[fallback]()
-    }
-
-    if ($next.hasClass('active')) return (this.sliding = false)
-
-    var relatedTarget = $next[0]
-    var slideEvent = $.Event('slide.bs.carousel', {
-      relatedTarget: relatedTarget,
-      direction: direction
-    })
-    this.$element.trigger(slideEvent)
-    if (slideEvent.isDefaultPrevented()) return
-
-    this.sliding = true
-
-    isCycling && this.pause()
-
-    if (this.$indicators.length) {
-      this.$indicators.find('.active').removeClass('active')
-      var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)])
-      $nextIndicator && $nextIndicator.addClass('active')
-    }
-
-    var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid"
-    if ($.support.transition && this.$element.hasClass('slide')) {
-      $next.addClass(type)
-      $next[0].offsetWidth // force reflow
-      $active.addClass(direction)
-      $next.addClass(direction)
-      $active
-        .one('miceTransitionEnd', function () {
-          $next.removeClass([type, direction].join(' ')).addClass('active')
-          $active.removeClass(['active', direction].join(' '))
-          that.sliding = false
-          setTimeout(function () {
-            that.$element.trigger(slidEvent)
-          }, 0)
-        })
-        .emulateTransitionEnd($active.css('transition-duration').slice(0, -1) * 1000)
-    } else {
-      $active.removeClass('active')
-      $next.addClass('active')
-      this.sliding = false
-      this.$element.trigger(slidEvent)
+(function($){
+  "use strict";
+
+  $.fn.thumbcarousel = function(options){
+    var moveActiveToCenter = function(carousel){
+      if(carousel.active.size()){
+
+        var prevAllWidth = carousel.active.position().left,
+            nextAllWidth = carousel.overview.width() - carousel.active.position().left - carousel.active.outerWidth(),
+            centerOffset = (carousel.viewport.width() - carousel.thumbs.outerWidth()) / 2;
+
+        if( prevAllWidth <= centerOffset ){
+          carousel.overview.css('left', 0);
+        }else if( nextAllWidth <= centerOffset ){
+          carousel.overview.css('left', carousel.viewport.width() - carousel.overview.width());
+        }else{
+          carousel.overview.css('left', -Math.abs(centerOffset - prevAllWidth));
+        }
+      }
     }
 
-    isCycling && this.cycle()
-
-    return this
-  }
-
-
-  // CAROUSEL PLUGIN DEFINITION
-  // ==========================
-
-  function Plugin(option) {
-    return this.each(function () {
-      var $this   = $(this)
-      var data    = $this.data('bs.carousel')
-      var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)
-      var action  = typeof option == 'string' ? option : options.slide
-
-      if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
-      if (typeof option == 'number') data.to(option)
-      else if (action) data[action]()
-      else if (options.interval) data.pause().cycle()
-    })
-  }
-
-  var old = $.fn.carousel
-
-  $.fn.carousel             = Plugin
-  $.fn.carousel.Constructor = Carousel
-
-
-  // CAROUSEL NO CONFLICT
-  // ====================
-
-  $.fn.carousel.noConflict = function () {
-    $.fn.carousel = old
-    return this
+    return this.each(function(){
+      var _this = $(this),
+          carousel = {
+            self:     _this,
+            viewport: _this.find('.viewport'),
+            overview: _this.find('.overview'),
+            prev:     _this.find('.control.prev'),
+            next:     _this.find('.control.next'),
+            thumbs:   _this.find('li'),
+            active:   _this.find('li.active')
+          };
+
+      carousel.overview.width(carousel.thumbs.size() * carousel.thumbs.outerWidth());
+
+      carousel.self.on('click', '.control:not(.disable)', function(event) {
+        event.preventDefault();
+        var $control = $(this),
+            leftOffset = carousel.overview.position().left,
+            viewWidth  = carousel.viewport.width();
+        if(carousel.overview.width() > viewWidth){
+          $control.addClass('disable');
+
+          if($control.hasClass('prev')){
+            carousel.overview.animate({ left: (viewWidth + leftOffset >= 0) ? 0 : (viewWidth + leftOffset) }, function(){
+              $control.removeClass('disable');
+            });
+          }else{
+            var _right = (carousel.overview.width() + leftOffset - viewWidth);
+                _right = _right  < viewWidth ? (leftOffset -_right) : (leftOffset - viewWidth);
+            carousel.overview.animate({ left: (viewWidth + leftOffset <= 0) ? (carousel.viewport.width() - carousel.overview.width()) : _right }, function(){
+              $control.removeClass('disable');
+            });
+          }
+        }
+      });
+
+      moveActiveToCenter(carousel);
+    });
   }
 
+  $(document).ready(function($) {
+    $('[data-toggle="thumb-carousel"]').thumbcarousel();
+  });
 
-  // CAROUSEL DATA-API
-  // =================
-
-  $(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
-    var href
-    var $this   = $(this)
-    var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
-    if (!$target.hasClass('carousel')) return
-    var options = $.extend({}, $target.data(), $this.data())
-    var slideIndex = $this.attr('data-slide-to')
-    if (slideIndex) options.interval = false
-
-    Plugin.call($target, options)
-
-    if (slideIndex) {
-      $target.data('bs.carousel').to(slideIndex)
-    }
-
-    e.preventDefault()
-  })
-
-  $(window).on('load', function () {
-    $('[data-ride="carousel"]').each(function () {
-      var $carousel = $(this)
-      Plugin.call($carousel, $carousel.data())
-    })
-  })
-
-}(jQuery);
+}(jQuery));

data/vendor/assets/javascripts/mice/message.coffee

@@ -0,0 +1,104 @@
+# Mice: message
+
+# Inspired by the original essage by 小鱼 sofish
+# https://github.com/sofish/essage
+
+# Copyright (c) 2014 Miclle
+# Licensed under MIT (https://github.com/miclle/mice/blob/master/LICENSE)
+
+
+'use strict';
+
+(($) ->
+
+  class Message
+
+    constructor: (element, options) ->
+      @element = element
+      @$element
+      @options
+      @.init(options)
+
+    init: (options) =>
+      @$element = $(@element) if @element
+      @$element.on('click', '.close', => @.hide()) if @$element
+
+      @options = @getOptions(options)
+
+    getOptions: (options) ->
+      if @$element then $.extend({}, $.fn.message.defaults, @$element.data(), options) else $.extend({}, $.fn.message.defaults, options)
+
+    show: (message, duration) ->
+      if message
+        @$element = @$element || $('body').data('miclle-message-global')
+
+        if @$element == `undefined`
+          @$element = $ $.fn.message.defaults.template
+          $('body').append(@$element).data('miclle-message-global', @$element)
+
+        if (typeof message == 'string') then @init( message: message ) else @init(message)
+
+        @$element.slideUp =>
+          @$element.removeClass('top bottom').addClass(@options.placement)
+
+          @$element.removeClass('success info warning danger').addClass(@options.status)
+
+          message  = @options.message
+          duration = duration || @options.duration
+
+          @$element.children('.inner').html(message) if message
+          @$element.slideDown => duration and setTimeout (=> @.hide()), duration
+
+      else
+        message  = @options.message
+        duration = duration || @options.duration
+
+        @$element.children('.inner').html(message) if message
+        @$element.slideDown => duration and setTimeout (=> @.hide()), duration
+      @
+
+    hold: ->
+      @$element.slideDown()
+
+    hide: ->
+      @$element.slideUp()
+
+    toggle: ->
+      if @$element.is ':hidden' then @show() else @hide()
+
+    destroy: ->
+      @hide().$element.remove()
+
+  $.fn.message = (option) ->
+    @each ->
+      $element = $(@)
+      data     = $element.data('mice.message')
+      options  = typeof option == 'object' and option
+
+      return if !data and option == 'destroy'
+
+      if !data
+        data = new Message @, options
+        data.show()
+        $element.data 'mice.message', data
+
+      data[option]() if typeof option == 'string'
+
+
+  $.fn.message.Constructor = Message
+
+  $.fn.message.defaults =
+    template: "<div class=\"message\"><div class=\"inner\"></div><span class=\"close\">&times;</span></div>"
+    message: null
+    placement: 'top'
+    status: ''
+    duration: null
+
+  # export to window
+  window.Message = new Message()
+
+  $ -> $('[data-ride="message"]').message();
+
+  return
+
+) jQuery

data/vendor/assets/javascripts/mice/slider.coffee

@@ -0,0 +1,20 @@
+# Mice: Slider
+
+'use strict';
+
+(($) ->
+
+  # TOOLTIP PUBLIC CLASS DEFINITION
+  # ===============================
+  class Slider
+    constructor: (element, options) ->
+      @slider
+      @options
+
+      @init()
+
+
+    init: ->
+
+  return
+) jQuery

data/vendor/assets/javascripts/mice/slider.js

@@ -0,0 +1,223 @@
+/* ========================================================================
+ * Bootstrap: carousel.js v3.2.0
+ * http://getbootstrap.com/javascript/#carousel
+ * ========================================================================
+ * Copyright 2011-2014 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * ======================================================================== */
+
+
++function ($) {
+  'use strict';
+
+  // CAROUSEL CLASS DEFINITION
+  // =========================
+
+  var Carousel = function (element, options) {
+    this.$element    = $(element).on('keydown.bs.carousel', $.proxy(this.keydown, this))
+    this.$indicators = this.$element.find('.indicators')
+    this.options     = options
+    this.paused      =
+    this.sliding     =
+    this.interval    =
+    this.$active     =
+    this.$items      = null
+
+    this.options.pause == 'hover' && this.$element
+      .on('mouseenter.bs.carousel', $.proxy(this.pause, this))
+      .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
+  }
+
+  Carousel.VERSION  = '3.2.0'
+
+  Carousel.DEFAULTS = {
+    interval: 5000,
+    pause: 'hover',
+    wrap: true
+  }
+
+  Carousel.prototype.keydown = function (e) {
+    switch (e.which) {
+      case 37: this.prev(); break
+      case 39: this.next(); break
+      default: return
+    }
+
+    e.preventDefault()
+  }
+
+  Carousel.prototype.cycle = function (e) {
+    e || (this.paused = false)
+
+    this.interval && clearInterval(this.interval)
+
+    this.options.interval
+      && !this.paused
+      && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
+
+    return this
+  }
+
+  Carousel.prototype.getItemIndex = function (item) {
+    this.$items = item.parent().children('.item')
+    return this.$items.index(item || this.$active)
+  }
+
+  Carousel.prototype.to = function (pos) {
+    var that        = this
+    var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))
+
+    if (pos > (this.$items.length - 1) || pos < 0) return
+
+    if (this.sliding)       return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"
+    if (activeIndex == pos) return this.pause().cycle()
+
+    return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
+  }
+
+  Carousel.prototype.pause = function (e) {
+    e || (this.paused = true)
+
+    if (this.$element.find('.next, .prev').length && $.support.transition) {
+      this.$element.trigger($.support.transition.end)
+      this.cycle(true)
+    }
+
+    this.interval = clearInterval(this.interval)
+
+    return this
+  }
+
+  Carousel.prototype.next = function () {
+    if (this.sliding) return
+    return this.slide('next')
+  }
+
+  Carousel.prototype.prev = function () {
+    if (this.sliding) return
+    return this.slide('prev')
+  }
+
+  Carousel.prototype.slide = function (type, next) {
+    var $active   = this.$element.find('.item.active')
+    var $next     = next || $active[type]()
+    var isCycling = this.interval
+    var direction = type == 'next' ? 'left' : 'right'
+    var fallback  = type == 'next' ? 'first' : 'last'
+    var that      = this
+
+    if (!$next.length) {
+      if (!this.options.wrap) return
+      $next = this.$element.find('.item')[fallback]()
+    }
+
+    if ($next.hasClass('active')) return (this.sliding = false)
+
+    var relatedTarget = $next[0]
+    var slideEvent = $.Event('slide.bs.carousel', {
+      relatedTarget: relatedTarget,
+      direction: direction
+    })
+    this.$element.trigger(slideEvent)
+    if (slideEvent.isDefaultPrevented()) return
+
+    this.sliding = true
+
+    isCycling && this.pause()
+
+    if (this.$indicators.length) {
+      this.$indicators.find('.active').removeClass('active')
+      var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)])
+      $nextIndicator && $nextIndicator.addClass('active')
+    }
+
+    var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid"
+    if ($.support.transition && this.$element.hasClass('slide')) {
+      $next.addClass(type)
+      $next[0].offsetWidth // force reflow
+      $active.addClass(direction)
+      $next.addClass(direction)
+      $active
+        .one('miceTransitionEnd', function () {
+          $next.removeClass([type, direction].join(' ')).addClass('active')
+          $active.removeClass(['active', direction].join(' '))
+          that.sliding = false
+          setTimeout(function () {
+            that.$element.trigger(slidEvent)
+          }, 0)
+        })
+        .emulateTransitionEnd($active.css('transition-duration').slice(0, -1) * 1000)
+    } else {
+      $active.removeClass('active')
+      $next.addClass('active')
+      this.sliding = false
+      this.$element.trigger(slidEvent)
+    }
+
+    isCycling && this.cycle()
+
+    return this
+  }
+
+
+  // CAROUSEL PLUGIN DEFINITION
+  // ==========================
+
+  function Plugin(option) {
+    return this.each(function () {
+      var $this   = $(this)
+      var data    = $this.data('bs.carousel')
+      var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)
+      var action  = typeof option == 'string' ? option : options.slide
+
+      if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
+      if (typeof option == 'number') data.to(option)
+      else if (action) data[action]()
+      else if (options.interval) data.pause().cycle()
+    })
+  }
+
+  var old = $.fn.carousel
+
+  $.fn.carousel             = Plugin
+  $.fn.carousel.Constructor = Carousel
+
+
+  // CAROUSEL NO CONFLICT
+  // ====================
+
+  $.fn.carousel.noConflict = function () {
+    $.fn.carousel = old
+    return this
+  }
+
+
+  // CAROUSEL DATA-API
+  // =================
+
+  $(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
+    var href
+    var $this   = $(this)
+    var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
+    if (!$target.hasClass('carousel')) return
+    var options = $.extend({}, $target.data(), $this.data())
+    var slideIndex = $this.attr('data-slide-to')
+    if (slideIndex) options.interval = false
+
+    Plugin.call($target, options)
+
+    if (slideIndex) {
+      $target.data('bs.carousel').to(slideIndex)
+    }
+
+    e.preventDefault()
+  })
+
+  $(window).on('load', function () {
+    $('[data-ride="carousel"]').each(function () {
+      var $carousel = $(this)
+      Plugin.call($carousel, $carousel.data())
+    })
+  })
+
+}(jQuery);

data/vendor/assets/javascripts/mice.js

@@ -1,5 +1,6 @@
 //= require mice/transition
 //= require mice/alert
 //= require mice/modal
+//= require mice/message
 //= require mice/tooltip
-//= require mice/carousel
+//= require mice/slider

data/vendor/assets/stylesheets/mice/_images.scss

@@ -72,4 +72,179 @@ img {
     display: block;
     width: 100%;
   }
-}
+}
+
+
+// Inspired by the original by http://www.hongkiat.com/blog/css3-image-captions/
+.thumbnail {
+  display: inline-block;
+  cursor: pointer;
+  margin: 5px;
+  position: relative;
+  overflow: hidden;
+
+  img {
+    position: relative;
+    -webkit-transition: all 300ms ease-out;
+    -moz-transition: all 300ms ease-out;
+    -o-transition: all 300ms ease-out;
+    -ms-transition: all 300ms ease-out;
+    transition: all 300ms ease-out;
+  }
+
+  .caption {
+    width: 100%;
+    overflow: hidden;
+    padding: 5px;
+
+    background-color: rgba(0,0,0,0.8);
+    color: #fff;
+
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 100;
+
+    -webkit-transition: all 300ms ease-out;
+    -moz-transition: all 300ms ease-out;
+    -o-transition: all 300ms ease-out;
+    -ms-transition: all 300ms ease-out;
+    transition: all 300ms ease-out;
+  }
+
+  &.simple .caption {
+    height: 30px;
+    bottom: -30px;
+    text-align: center;
+  }
+  &.simple:hover .caption {
+    opacity: 1;
+    -moz-transform: translateY(-100%);
+    -o-transform: translateY(-100%);
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%);
+  }
+
+  &.full .caption {
+    height: 100%;
+    top: -100%;
+    overflow: hidden;
+  }
+  &.full:hover .caption {
+    -moz-transform: translateY(100%);
+    -o-transform: translateY(100%);
+    -webkit-transform: translateY(100%);
+    transform: translateY(100%);
+  }
+
+  &.fade{ opacity: 1; }
+  &.fade .caption{
+    opacity: 0;
+    top: 0;
+    bottom: 0;
+  }
+  &.fade:hover .caption{ opacity: 1; }
+
+  &.slide .caption {
+    top: 0;
+    left: 100%;
+    bottom: 0;
+  }
+  &.slide:hover img {
+    -moz-transform: translateX(-100%);
+    -o-transform: translateX(-100%);
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+    opacity: 1;
+  }
+  &.slide:hover .caption {
+    background-color: rgba(0,0,0,1) !important;
+    -moz-transform: translateX(-100%);
+    -o-transform: translateX(-100%);
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+    opacity: 1;
+  }
+
+  &.rotate img{
+    -webkit-transform-origin: center bottom;
+    -ms-transform-origin: center bottom;
+    transform-origin: center bottom;
+    opacity: 1;
+  }
+  &.rotate:hover img{
+    -webkit-transform: rotate3d(0, 0, 1, -180deg);
+    -webkit-transform: rotate3d(0, 0, 1, -180deg);
+    -ms-transform: rotate3d(0, 0, 1, -180deg);
+    transform: rotate3d(0, 0, 1, -180deg);
+  }
+  &.rotate .caption {
+    top: 0;
+    height: 100%;
+    background-color: rgba(0,0,0,1) !important;
+
+    -webkit-transform-origin: center bottom;
+    -ms-transform-origin: center bottom;
+    transform-origin: center bottom;
+
+    -webkit-transform: rotate3d(0, 0, 1, 180deg);
+    -ms-transform: rotate3d(0, 0, 1, 180deg);
+    transform: rotate3d(0, 0, 1, 180deg);
+  }
+  &.rotate:hover .caption {
+    -webkit-transform: none;
+    -ms-transform: none;
+    transform: none;
+  }
+
+  &.scale .caption{
+    overflow: hidden;
+    opacity: 0;
+    top: 0;
+    bottom: 0;
+
+    h3, p {
+      position: relative;
+      left: -100%;
+      -webkit-transition: all 300ms ease-out;
+      -moz-transition: all 300ms ease-out;
+      -o-transition: all 300ms ease-out;
+      -ms-transition: all 300ms ease-out;
+      transition: all 300ms ease-out;
+    }
+
+    h3 {
+      -webkit-transition-delay: 300ms;
+      -moz-transition-delay: 300ms;
+      -o-transition-delay: 300ms;
+      -ms-transition-delay: 300ms;
+      transition-delay: 300ms;
+    }
+
+    p {
+      -webkit-transition-delay: 500ms;
+      -moz-transition-delay: 500ms;
+      -o-transition-delay: 500ms;
+      -ms-transition-delay: 500ms;
+      transition-delay: 500ms;
+    }
+  }
+  &.scale:hover{
+    img {
+      -moz-transform: scale(1.4);
+      -o-transform: scale(1.4);
+      -webkit-transform: scale(1.4);
+      transform: scale(1.4);
+    }
+    .caption {
+      opacity: 1;
+      h3, p {
+        -moz-transform: translateX(100%);
+        -o-transform: translateX(100%);
+        -webkit-transform: translateX(100%);
+        transform: translateX(100%);
+      }
+    }
+  }
+
+}

data/vendor/assets/stylesheets/mice/_message.scss

@@ -0,0 +1,78 @@
+//
+// Message
+// --------------------------------------------------
+
+
+// Mixin
+@mixin message-variant($background, $border, $text-color) {
+  background-color: $background;
+  border-color: $border;
+  color: $text-color;
+
+  a {
+    color: darken($text-color, 10%);
+  }
+}
+
+
+// Base styles
+// -------------------------
+.message {
+  display: none;
+  width: 100%;
+  padding: 10px 20px;
+  padding: $message-padding;
+
+  line-height: 1.8;
+  font-size: 16px;
+  background: #FFF;
+  background: rgba(255,255,255,0.9);
+
+  color: #666;
+  text-align: center;
+
+  border-bottom: 1px solid #ddd;
+  border-top: 1px solid #ddd;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $zindex-message;
+
+  &.top {
+    top: 0;
+    bottom: auto;
+  }
+
+  &.bottom{
+    top: auto;
+    bottom: 0;
+  }
+
+  h4{ margin: 0; color: inherit; }
+  a { font-weight: $message-link-font-weight; }
+
+  .close{
+    display: inline;
+    float: right;
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    opacity: 0.6;
+
+    &:hover{
+      opacity: 1;
+    }
+  }
+}
+
+
+// Alternate styles
+// Generate contextual modifier classes for colorizing the message.
+.message{
+  &.success {@include message-variant($message-success-background, $message-success-border, $message-success-text); }
+  &.info    {@include message-variant($message-info-background,    $message-info-border,    $message-info-text);    }
+  &.warning {@include message-variant($message-warning-background, $message-warning-border, $message-warning-text); }
+  &.danger  {@include message-variant($message-danger-background,  $message-danger-border,  $message-danger-text);  }
+}

data/vendor/assets/stylesheets/mice/{_carousel.scss → _slider.scss}

@@ -208,36 +208,103 @@
 // Scale up controls for tablets and up
 @media screen and (min-width: $screen-sm-min) {
 
-  // Scale up the controls a smidge
-  .control {
-    .chevron-left,
-    .chevron-right,
-    .icon-prev,
-    .icon-next {
-      width: 30px;
-      height: 30px;
-      margin-top: -15px;
-      font-size: 30px;
+  .carousel{
+    // Scale up the controls a smidge
+    .control {
+      .chevron-left,
+      .chevron-right,
+      .icon-prev,
+      .icon-next {
+        width: 30px;
+        height: 30px;
+        margin-top: -15px;
+        font-size: 30px;
+      }
+      .chevron-left,
+      .icon-prev {
+        margin-left: -15px;
+      }
+      .chevron-right,
+      .icon-next {
+        margin-right: -15px;
+      }
     }
-    .chevron-left,
-    .icon-prev {
-      margin-left: -15px;
+
+    // Show and left align the captions
+    .caption {
+      left: 20%;
+      right: 20%;
+      padding-bottom: 30px;
     }
-    .chevron-right,
-    .icon-next {
-      margin-right: -15px;
+
+    // Move up the indicators
+    .indicators {
+      bottom: 20px;
     }
   }
+}
 
-  // Show and left align the captions
-  .caption {
-    left: 20%;
-    right: 20%;
-    padding-bottom: 30px;
+
+.thumb-carousel{
+  overflow:hidden;
+  position: relative;
+
+  .viewport {
+    width: 100%;
+    height: 150px;
+    position: relative;
+    z-index: 98;
   }
 
-  // Move up the indicators
-  .indicators {
-    bottom: 20px;
+  .control {
+    display: block;
+    color: #FFF;
+    text-align: center;
+    text-decoration: none;
+    position: absolute;
+    top: 50%;
+    margin-top: -5px;
+    z-index: 99;
+
+    &.left { left: 0; }
+    &.right { right: 0; }
+  }
+
+  .control i.icon{ margin: 0;}
+  .control.disable {
+    cursor: not-allowed;
+    /*cursor: no-drop;*/
   }
+  .overview {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    position: absolute;
+    top: 0;
+    z-index: 9;
+
+    li{
+      float: left;
+      padding: 1px;
+      border: 1px solid #FFF;
+
+      &.active{
+        border-color: #666;
+        z-index: 99;
+      }
+      & img{
+        opacity: 0.7;
+        -webkit-transition: all 0.15s ease-out;
+        -webkit-transition-delay: 0s;
+        -moz-transition: all 0.15s ease-out 0s;
+        -o-transition: all 0.15s ease-out 0s;
+        transition: all 0.15s ease-out 0s;
+      }
+      &.active img,
+      & img:hover{
+        opacity: 1;
+      }
+    }
+  }
+
 }

data/vendor/assets/stylesheets/mice/_variables.scss

@@ -482,6 +482,7 @@ $zindex-navbar-fixed:         1030 !default;
 $zindex-modal-background:     1040 !default;
 $zindex-modal:                1050 !default;
 $zindex-tooltip:              1070 !default;
+$zindex-message:              1090 !default;
 
 
 // Media queries breakpoints
@@ -536,6 +537,28 @@ $tooltip-danger-background:     $brand-danger !default;
 $tooltip-danger-arrow-color:    $tooltip-danger-background !default;
 
 
+// Message
+// --------------------------------------------------
+$message-padding:               10px 20px !default;
+$message-link-font-weight:      bold !default;
+
+$message-success-background:    $state-success-background !default;
+$message-success-text:          $state-success-text !default;
+$message-success-border:        $state-success-border !default;
+
+$message-info-background:       $state-info-background !default;
+$message-info-text:             $state-info-text !default;
+$message-info-border:           $state-info-border !default;
+
+$message-warning-background:    $state-warning-background !default;
+$message-warning-text:          $state-warning-text !default;
+$message-warning-border:        $state-warning-border !default;
+
+$message-danger-background:     $state-danger-background !default;
+$message-danger-text:           $state-danger-text !default;
+$message-danger-border:         $state-danger-border !default;
+
+
 // Carousel
 // --------------------------------------------------
 

data/vendor/assets/stylesheets/mice.scss

@@ -35,8 +35,9 @@
 @import "mice/alerts";
 @import "mice/close";
 @import "mice/modals";
+@import "mice/message";
 @import "mice/tooltips";
-@import "mice/carousel";
+@import "mice/slider";
 
 // Form
 @import "mice/forms";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mice
 version: !ruby/object:Gem::Version
-  version: 0.2.8
+  version: 0.2.9
 platform: ruby
 authors:
 - miclle
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-07-19 00:00:00.000000000 Z
+date: 2014-07-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -69,7 +69,10 @@ files:
 - vendor/assets/javascripts/mice/jquery.js
 - vendor/assets/javascripts/mice/jquery.min.js
 - vendor/assets/javascripts/mice/jquery.min.map
+- vendor/assets/javascripts/mice/message.coffee
 - vendor/assets/javascripts/mice/modal.js
+- vendor/assets/javascripts/mice/slider.coffee
+- vendor/assets/javascripts/mice/slider.js
 - vendor/assets/javascripts/mice/tooltip.coffee
 - vendor/assets/javascripts/mice/transition.coffee
 - vendor/assets/stylesheets/mice-mobile.scss
@@ -78,7 +81,6 @@ files:
 - vendor/assets/stylesheets/mice/_breadcrumbs.scss
 - vendor/assets/stylesheets/mice/_buttons.scss
 - vendor/assets/stylesheets/mice/_callouts.scss
-- vendor/assets/stylesheets/mice/_carousel.scss
 - vendor/assets/stylesheets/mice/_close.scss
 - vendor/assets/stylesheets/mice/_code.scss
 - vendor/assets/stylesheets/mice/_component-animations.scss
@@ -90,6 +92,7 @@ files:
 - vendor/assets/stylesheets/mice/_lists.scss
 - vendor/assets/stylesheets/mice/_media.scss
 - vendor/assets/stylesheets/mice/_menu.scss
+- vendor/assets/stylesheets/mice/_message.scss
 - vendor/assets/stylesheets/mice/_mixins.scss
 - vendor/assets/stylesheets/mice/_modals.scss
 - vendor/assets/stylesheets/mice/_navbar.scss
@@ -99,6 +102,7 @@ files:
 - vendor/assets/stylesheets/mice/_progress.scss
 - vendor/assets/stylesheets/mice/_scaffolding.scss
 - vendor/assets/stylesheets/mice/_sidebar.scss
+- vendor/assets/stylesheets/mice/_slider.scss
 - vendor/assets/stylesheets/mice/_tables.scss
 - vendor/assets/stylesheets/mice/_tabs.scss
 - vendor/assets/stylesheets/mice/_timeline.scss