mice 0.2.7 → 0.2.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 3bcd6f9973735608132f90dfa76843c6d654b997
-  data.tar.gz: 5e7ea1129685321a09ccc7496ac59196928aaa61
+  metadata.gz: 28210033ea6813cd790bb7dfd993dd179f373777
+  data.tar.gz: 0125f51dc850e2dd802194e55eff74a523e05cff
 SHA512:
-  metadata.gz: d77212ed41480632c2bd7e9b946d948f1bc69c5cea730435dec58dc612655e69fa2cdd877eafef3f2906e373328b356f2fc7e4d1f59e7d580dfe5b8fb8fe6790
-  data.tar.gz: 8acc15eb6ac2480ba02e2988352225b3a4109cd3a0870527bb47e7d9ccfb3dc4274df032928ad2927add8317bb30d84856f140fe055fe623b04c277da3328b62
+  metadata.gz: 14776b5f0e36c5dc34cab1917733b9e1898fe9f37d8cbabe4df877c5d21b46417dbb34506c81cf252bd1512f786f7f50c35830f38f02902c27790f95022c45a3
+  data.tar.gz: 98a039063ca44429204b2d0b9441b2cda116684c219ee5ec4618eef9a0b240294759b973e4ea74cfa7f08b8cee969f800791d56e339dcfa9c20c67c8e6feb1d4

data/Gemfile.lock

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

data/lib/mice/version.rb

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

data/vendor/assets/javascripts/mice/carousel.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/tooltip.coffee

@@ -334,6 +334,8 @@
       selector: 'body'
       padding: 0
 
+  $ -> $("[data-toggle=tooltip]").tooltip();
+
   return
 
 ) jQuery

data/vendor/assets/javascripts/mice.js

@@ -1,4 +1,5 @@
 //= require mice/transition
 //= require mice/alert
 //= require mice/modal
-//= require mice/tooltip
+//= require mice/tooltip
+//= require mice/carousel

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

@@ -0,0 +1,243 @@
+//
+// Carousel
+// --------------------------------------------------
+
+
+// Wrapper for the slide container and indicators
+.carousel {
+  position: relative;
+
+  .inner {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+
+    > .item {
+      display: none;
+      position: relative;
+      @include transition(.6s ease-in-out left);
+
+      // Account for jankitude on images
+      > img,
+      > a > img {
+        @include img-responsive();
+        line-height: 1;
+      }
+    }
+
+    > .active,
+    > .next,
+    > .prev {
+      display: block;
+    }
+
+    > .active {
+      left: 0;
+    }
+
+    > .next,
+    > .prev {
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+
+    > .next {
+      left: 100%;
+    }
+    > .prev {
+      left: -100%;
+    }
+    > .next.left,
+    > .prev.right {
+      left: 0;
+    }
+
+    > .active.left {
+      left: -100%;
+    }
+    > .active.right {
+      left: 100%;
+    }
+
+  }
+
+  // Left/right controls for nav
+  // ---------------------------
+
+  .control {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: $carousel-control-width;
+    @include opacity($carousel-control-opacity);
+    font-size: $carousel-control-font-size;
+    color: $carousel-control-color;
+    text-align: center;
+    text-shadow: $carousel-text-shadow;
+    // We can't have this transition here because WebKit cancels the carousel
+    // animation if you trip this while in the middle of another animation.
+
+    // Set gradients for backgrounds
+    &.left {
+      // @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
+    }
+    &.right {
+      left: auto;
+      right: 0;
+      // @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
+    }
+
+    // Hover/focus state
+    &:hover,
+    &:focus {
+      outline: 0;
+      color: $carousel-control-color;
+      text-decoration: none;
+      @include opacity(.9);
+    }
+
+    // Toggles
+    .icon-prev,
+    .icon-next,
+    .chevron-left,
+    .chevron-right {
+      position: absolute;
+      top: 50%;
+      z-index: 5;
+      display: inline-block;
+    }
+    .icon-prev,
+    .chevron-left {
+      left: 50%;
+      margin-left: -10px;
+    }
+    .icon-next,
+    .chevron-right {
+      right: 50%;
+      margin-right: -10px;
+    }
+    .icon-prev,
+    .icon-next {
+      width:  20px;
+      height: 20px;
+      margin-top: -10px;
+      font-family: serif;
+    }
+
+
+    .icon-prev {
+      &:before {
+        content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
+      }
+    }
+    .icon-next {
+      &:before {
+        content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
+      }
+    }
+  }
+
+  // Optional indicator pips
+  //
+  // Add an unordered list with the following class and add a list item for each
+  // slide your carousel holds.
+
+  .indicators {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    z-index: 15;
+    width: 60%;
+    margin-left: -30%;
+    padding-left: 0;
+    list-style: none;
+    text-align: center;
+
+    li {
+      display: inline-block;
+      width:  10px;
+      height: 10px;
+      margin: 1px;
+      text-indent: -999px;
+      border: 1px solid $carousel-indicator-border-color;
+      border-radius: 10px;
+      cursor: pointer;
+
+      // IE8-9 hack for event handling
+      //
+      // Internet Explorer 8-9 does not support clicks on elements without a set
+      // `background-color`. We cannot use `filter` since that's not viewed as a
+      // background color by the browser. Thus, a hack is needed.
+      //
+      // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
+      // set alpha transparency for the best results possible.
+      background-color: #000 \9; // IE8
+      background-color: rgba(0,0,0,0); // IE9
+    }
+    .active {
+      margin: 0;
+      width:  12px;
+      height: 12px;
+      background-color: $carousel-indicator-active-background;
+    }
+  }
+
+  // Optional captions
+  // -----------------------------
+  // Hidden by default for smaller viewports
+  .caption {
+    position: absolute;
+    left: 15%;
+    right: 15%;
+    bottom: 20px;
+    z-index: 10;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    color: $carousel-caption-color;
+    text-align: center;
+    text-shadow: $carousel-text-shadow;
+    & .btn {
+      text-shadow: none; // No shadow for button elements in carousel-caption
+    }
+  }
+}
+
+
+// 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;
+    }
+    .chevron-left,
+    .icon-prev {
+      margin-left: -15px;
+    }
+    .chevron-right,
+    .icon-next {
+      margin-right: -15px;
+    }
+  }
+
+  // Show and left align the captions
+  .caption {
+    left: 20%;
+    right: 20%;
+    padding-bottom: 30px;
+  }
+
+  // Move up the indicators
+  .indicators {
+    bottom: 20px;
+  }
+}

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

@@ -2,6 +2,44 @@
 // Images
 // --------------------------------------------------
 
+
+// Image Mixins
+// - Responsive image
+// - Retina image
+
+
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+@mixin img-responsive($display: block) {
+  display: $display;
+  width: 100% \9; // Force IE10 and below to size SVG images correctly
+  max-width: 100%; // Part 1: Set a maximum relative to the parent
+  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
+}
+
+
+// Retina image
+//
+// Short retina mixin for setting background-image and -size. Note that the
+// spelling of `min--moz-device-pixel-ratio` is intentional.
+@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
+  background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}"));
+
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (   min--moz-device-pixel-ratio: 2),
+  only screen and (     -o-min-device-pixel-ratio: 2/1),
+  only screen and (        min-device-pixel-ratio: 2),
+  only screen and (                min-resolution: 192dpi),
+  only screen and (                min-resolution: 2dppx) {
+    background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}"));
+    background-size: $width-1x $height-1x;
+  }
+}
+
+
+
 img {
   vertical-align: middle;
 

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

@@ -535,3 +535,20 @@ $tooltip-danger-color:          #fff !default;
 $tooltip-danger-background:     $brand-danger !default;
 $tooltip-danger-arrow-color:    $tooltip-danger-background !default;
 
+
+// Carousel
+// --------------------------------------------------
+
+$carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
+
+$carousel-control-color:                      #fff !default;
+$carousel-control-width:                      15% !default;
+$carousel-control-opacity:                    .5 !default;
+$carousel-control-font-size:                  20px !default;
+
+$carousel-indicator-active-background:        #fff !default;
+$carousel-indicator-border-color:             #fff !default;
+
+$carousel-caption-color:                      #fff !default;
+
+

data/vendor/assets/stylesheets/mice.scss

@@ -34,9 +34,9 @@
 @import "mice/progress";
 @import "mice/alerts";
 @import "mice/close";
-@import "mice/wells";
 @import "mice/modals";
 @import "mice/tooltips";
+@import "mice/carousel";
 
 // Form
 @import "mice/forms";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mice
 version: !ruby/object:Gem::Version
-  version: 0.2.7
+  version: 0.2.8
 platform: ruby
 authors:
 - miclle
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-07-18 00:00:00.000000000 Z
+date: 2014-07-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -63,6 +63,7 @@ files:
 - vendor/assets/javascripts/mice/ZeroClipboard.js
 - vendor/assets/javascripts/mice/ZeroClipboard.min.js
 - vendor/assets/javascripts/mice/alert.js
+- vendor/assets/javascripts/mice/carousel.js
 - vendor/assets/javascripts/mice/jquery.autocomplete.min.js
 - vendor/assets/javascripts/mice/jquery.email-autocomplete.js
 - vendor/assets/javascripts/mice/jquery.js
@@ -77,6 +78,7 @@ 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
@@ -105,7 +107,6 @@ files:
 - vendor/assets/stylesheets/mice/_typography.scss
 - vendor/assets/stylesheets/mice/_utilities.scss
 - vendor/assets/stylesheets/mice/_variables.scss
-- vendor/assets/stylesheets/mice/_wells.scss
 - vendor/assets/stylesheets/mobile/bars.scss
 - vendor/assets/stylesheets/mobile/base.scss
 - vendor/assets/stylesheets/mobile/cards.scss

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

@@ -1,29 +0,0 @@
-//
-// Wells
-// --------------------------------------------------
-
-// Base class
-.well {
-  min-height: 20px;
-  padding: 19px;
-  margin-bottom: 20px;
-  background-color: $well-background;
-  border: 1px solid $well-border;
-  border-radius: $border-radius;
-  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
-  blockquote {
-    border-color: #ddd;
-    border-color: rgba(0,0,0,.15);
-  }
-
-  // Sizes
-  &.large {
-    padding: 24px;
-    border-radius: $border-radius-large;
-  }
-  &.small {
-    padding: 9px;
-    border-radius: $border-radius-small;
-  }
-}
-