mice 0.2.8 → 0.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 28210033ea6813cd790bb7dfd993dd179f373777
4
- data.tar.gz: 0125f51dc850e2dd802194e55eff74a523e05cff
3
+ metadata.gz: 51c5ae78ffece87741f7703b822d09cd05736a6c
4
+ data.tar.gz: 1cf2cfd0706abcebb742876bb96064744b37906d
5
5
  SHA512:
6
- metadata.gz: 14776b5f0e36c5dc34cab1917733b9e1898fe9f37d8cbabe4df877c5d21b46417dbb34506c81cf252bd1512f786f7f50c35830f38f02902c27790f95022c45a3
7
- data.tar.gz: 98a039063ca44429204b2d0b9441b2cda116684c219ee5ec4618eef9a0b240294759b973e4ea74cfa7f08b8cee969f800791d56e339dcfa9c20c67c8e6feb1d4
6
+ metadata.gz: e19ab7300fb7f6b6cba1c3be9024f0be532f9a8abee6555397ebfc2a51c31aaa90a9edd0ae05144af2396a17643a5bc79dd5c26996f837219dd576e7af021153
7
+ data.tar.gz: aa64ba62d4b68d173ea4c0084ffdc80d79ddc2eaac5a27caf0d1acb391ff278d465cf06bfe58c6040bce34e6b2d60b90052b0edbfc18f54bce1d177623c2a750
data/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- mice (0.2.8)
4
+ mice (0.2.9)
5
5
  sass (~> 3.2)
6
6
 
7
7
  GEM
data/lib/mice/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Mice
2
- VERSION = "0.2.8"
2
+ VERSION = "0.2.9"
3
3
  end
@@ -1,223 +1,66 @@
1
- /* ========================================================================
2
- * Bootstrap: carousel.js v3.2.0
3
- * http://getbootstrap.com/javascript/#carousel
4
- * ========================================================================
5
- * Copyright 2011-2014 Twitter, Inc.
6
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
7
- * ======================================================================== */
8
-
9
-
10
- +function ($) {
11
- 'use strict';
12
-
13
- // CAROUSEL CLASS DEFINITION
14
- // =========================
15
-
16
- var Carousel = function (element, options) {
17
- this.$element = $(element).on('keydown.bs.carousel', $.proxy(this.keydown, this))
18
- this.$indicators = this.$element.find('.indicators')
19
- this.options = options
20
- this.paused =
21
- this.sliding =
22
- this.interval =
23
- this.$active =
24
- this.$items = null
25
-
26
- this.options.pause == 'hover' && this.$element
27
- .on('mouseenter.bs.carousel', $.proxy(this.pause, this))
28
- .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
29
- }
30
-
31
- Carousel.VERSION = '3.2.0'
32
-
33
- Carousel.DEFAULTS = {
34
- interval: 5000,
35
- pause: 'hover',
36
- wrap: true
37
- }
38
-
39
- Carousel.prototype.keydown = function (e) {
40
- switch (e.which) {
41
- case 37: this.prev(); break
42
- case 39: this.next(); break
43
- default: return
44
- }
45
-
46
- e.preventDefault()
47
- }
48
-
49
- Carousel.prototype.cycle = function (e) {
50
- e || (this.paused = false)
51
-
52
- this.interval && clearInterval(this.interval)
53
-
54
- this.options.interval
55
- && !this.paused
56
- && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
57
-
58
- return this
59
- }
60
-
61
- Carousel.prototype.getItemIndex = function (item) {
62
- this.$items = item.parent().children('.item')
63
- return this.$items.index(item || this.$active)
64
- }
65
-
66
- Carousel.prototype.to = function (pos) {
67
- var that = this
68
- var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))
69
-
70
- if (pos > (this.$items.length - 1) || pos < 0) return
71
-
72
- if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"
73
- if (activeIndex == pos) return this.pause().cycle()
74
-
75
- return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
76
- }
77
-
78
- Carousel.prototype.pause = function (e) {
79
- e || (this.paused = true)
80
-
81
- if (this.$element.find('.next, .prev').length && $.support.transition) {
82
- this.$element.trigger($.support.transition.end)
83
- this.cycle(true)
84
- }
85
-
86
- this.interval = clearInterval(this.interval)
87
-
88
- return this
89
- }
90
-
91
- Carousel.prototype.next = function () {
92
- if (this.sliding) return
93
- return this.slide('next')
94
- }
95
-
96
- Carousel.prototype.prev = function () {
97
- if (this.sliding) return
98
- return this.slide('prev')
99
- }
100
-
101
- Carousel.prototype.slide = function (type, next) {
102
- var $active = this.$element.find('.item.active')
103
- var $next = next || $active[type]()
104
- var isCycling = this.interval
105
- var direction = type == 'next' ? 'left' : 'right'
106
- var fallback = type == 'next' ? 'first' : 'last'
107
- var that = this
108
-
109
- if (!$next.length) {
110
- if (!this.options.wrap) return
111
- $next = this.$element.find('.item')[fallback]()
112
- }
113
-
114
- if ($next.hasClass('active')) return (this.sliding = false)
115
-
116
- var relatedTarget = $next[0]
117
- var slideEvent = $.Event('slide.bs.carousel', {
118
- relatedTarget: relatedTarget,
119
- direction: direction
120
- })
121
- this.$element.trigger(slideEvent)
122
- if (slideEvent.isDefaultPrevented()) return
123
-
124
- this.sliding = true
125
-
126
- isCycling && this.pause()
127
-
128
- if (this.$indicators.length) {
129
- this.$indicators.find('.active').removeClass('active')
130
- var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)])
131
- $nextIndicator && $nextIndicator.addClass('active')
132
- }
133
-
134
- var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid"
135
- if ($.support.transition && this.$element.hasClass('slide')) {
136
- $next.addClass(type)
137
- $next[0].offsetWidth // force reflow
138
- $active.addClass(direction)
139
- $next.addClass(direction)
140
- $active
141
- .one('miceTransitionEnd', function () {
142
- $next.removeClass([type, direction].join(' ')).addClass('active')
143
- $active.removeClass(['active', direction].join(' '))
144
- that.sliding = false
145
- setTimeout(function () {
146
- that.$element.trigger(slidEvent)
147
- }, 0)
148
- })
149
- .emulateTransitionEnd($active.css('transition-duration').slice(0, -1) * 1000)
150
- } else {
151
- $active.removeClass('active')
152
- $next.addClass('active')
153
- this.sliding = false
154
- this.$element.trigger(slidEvent)
1
+ (function($){
2
+ "use strict";
3
+
4
+ $.fn.thumbcarousel = function(options){
5
+ var moveActiveToCenter = function(carousel){
6
+ if(carousel.active.size()){
7
+
8
+ var prevAllWidth = carousel.active.position().left,
9
+ nextAllWidth = carousel.overview.width() - carousel.active.position().left - carousel.active.outerWidth(),
10
+ centerOffset = (carousel.viewport.width() - carousel.thumbs.outerWidth()) / 2;
11
+
12
+ if( prevAllWidth <= centerOffset ){
13
+ carousel.overview.css('left', 0);
14
+ }else if( nextAllWidth <= centerOffset ){
15
+ carousel.overview.css('left', carousel.viewport.width() - carousel.overview.width());
16
+ }else{
17
+ carousel.overview.css('left', -Math.abs(centerOffset - prevAllWidth));
18
+ }
19
+ }
155
20
  }
156
21
 
157
- isCycling && this.cycle()
158
-
159
- return this
160
- }
161
-
162
-
163
- // CAROUSEL PLUGIN DEFINITION
164
- // ==========================
165
-
166
- function Plugin(option) {
167
- return this.each(function () {
168
- var $this = $(this)
169
- var data = $this.data('bs.carousel')
170
- var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)
171
- var action = typeof option == 'string' ? option : options.slide
172
-
173
- if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
174
- if (typeof option == 'number') data.to(option)
175
- else if (action) data[action]()
176
- else if (options.interval) data.pause().cycle()
177
- })
178
- }
179
-
180
- var old = $.fn.carousel
181
-
182
- $.fn.carousel = Plugin
183
- $.fn.carousel.Constructor = Carousel
184
-
185
-
186
- // CAROUSEL NO CONFLICT
187
- // ====================
188
-
189
- $.fn.carousel.noConflict = function () {
190
- $.fn.carousel = old
191
- return this
22
+ return this.each(function(){
23
+ var _this = $(this),
24
+ carousel = {
25
+ self: _this,
26
+ viewport: _this.find('.viewport'),
27
+ overview: _this.find('.overview'),
28
+ prev: _this.find('.control.prev'),
29
+ next: _this.find('.control.next'),
30
+ thumbs: _this.find('li'),
31
+ active: _this.find('li.active')
32
+ };
33
+
34
+ carousel.overview.width(carousel.thumbs.size() * carousel.thumbs.outerWidth());
35
+
36
+ carousel.self.on('click', '.control:not(.disable)', function(event) {
37
+ event.preventDefault();
38
+ var $control = $(this),
39
+ leftOffset = carousel.overview.position().left,
40
+ viewWidth = carousel.viewport.width();
41
+ if(carousel.overview.width() > viewWidth){
42
+ $control.addClass('disable');
43
+
44
+ if($control.hasClass('prev')){
45
+ carousel.overview.animate({ left: (viewWidth + leftOffset >= 0) ? 0 : (viewWidth + leftOffset) }, function(){
46
+ $control.removeClass('disable');
47
+ });
48
+ }else{
49
+ var _right = (carousel.overview.width() + leftOffset - viewWidth);
50
+ _right = _right < viewWidth ? (leftOffset -_right) : (leftOffset - viewWidth);
51
+ carousel.overview.animate({ left: (viewWidth + leftOffset <= 0) ? (carousel.viewport.width() - carousel.overview.width()) : _right }, function(){
52
+ $control.removeClass('disable');
53
+ });
54
+ }
55
+ }
56
+ });
57
+
58
+ moveActiveToCenter(carousel);
59
+ });
192
60
  }
193
61
 
62
+ $(document).ready(function($) {
63
+ $('[data-toggle="thumb-carousel"]').thumbcarousel();
64
+ });
194
65
 
195
- // CAROUSEL DATA-API
196
- // =================
197
-
198
- $(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
199
- var href
200
- var $this = $(this)
201
- var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
202
- if (!$target.hasClass('carousel')) return
203
- var options = $.extend({}, $target.data(), $this.data())
204
- var slideIndex = $this.attr('data-slide-to')
205
- if (slideIndex) options.interval = false
206
-
207
- Plugin.call($target, options)
208
-
209
- if (slideIndex) {
210
- $target.data('bs.carousel').to(slideIndex)
211
- }
212
-
213
- e.preventDefault()
214
- })
215
-
216
- $(window).on('load', function () {
217
- $('[data-ride="carousel"]').each(function () {
218
- var $carousel = $(this)
219
- Plugin.call($carousel, $carousel.data())
220
- })
221
- })
222
-
223
- }(jQuery);
66
+ }(jQuery));
@@ -0,0 +1,104 @@
1
+ # Mice: message
2
+
3
+ # Inspired by the original essage by 小鱼 sofish
4
+ # https://github.com/sofish/essage
5
+
6
+ # Copyright (c) 2014 Miclle
7
+ # Licensed under MIT (https://github.com/miclle/mice/blob/master/LICENSE)
8
+
9
+
10
+ 'use strict';
11
+
12
+ (($) ->
13
+
14
+ class Message
15
+
16
+ constructor: (element, options) ->
17
+ @element = element
18
+ @$element
19
+ @options
20
+ @.init(options)
21
+
22
+ init: (options) =>
23
+ @$element = $(@element) if @element
24
+ @$element.on('click', '.close', => @.hide()) if @$element
25
+
26
+ @options = @getOptions(options)
27
+
28
+ getOptions: (options) ->
29
+ if @$element then $.extend({}, $.fn.message.defaults, @$element.data(), options) else $.extend({}, $.fn.message.defaults, options)
30
+
31
+ show: (message, duration) ->
32
+ if message
33
+ @$element = @$element || $('body').data('miclle-message-global')
34
+
35
+ if @$element == `undefined`
36
+ @$element = $ $.fn.message.defaults.template
37
+ $('body').append(@$element).data('miclle-message-global', @$element)
38
+
39
+ if (typeof message == 'string') then @init( message: message ) else @init(message)
40
+
41
+ @$element.slideUp =>
42
+ @$element.removeClass('top bottom').addClass(@options.placement)
43
+
44
+ @$element.removeClass('success info warning danger').addClass(@options.status)
45
+
46
+ message = @options.message
47
+ duration = duration || @options.duration
48
+
49
+ @$element.children('.inner').html(message) if message
50
+ @$element.slideDown => duration and setTimeout (=> @.hide()), duration
51
+
52
+ else
53
+ message = @options.message
54
+ duration = duration || @options.duration
55
+
56
+ @$element.children('.inner').html(message) if message
57
+ @$element.slideDown => duration and setTimeout (=> @.hide()), duration
58
+ @
59
+
60
+ hold: ->
61
+ @$element.slideDown()
62
+
63
+ hide: ->
64
+ @$element.slideUp()
65
+
66
+ toggle: ->
67
+ if @$element.is ':hidden' then @show() else @hide()
68
+
69
+ destroy: ->
70
+ @hide().$element.remove()
71
+
72
+ $.fn.message = (option) ->
73
+ @each ->
74
+ $element = $(@)
75
+ data = $element.data('mice.message')
76
+ options = typeof option == 'object' and option
77
+
78
+ return if !data and option == 'destroy'
79
+
80
+ if !data
81
+ data = new Message @, options
82
+ data.show()
83
+ $element.data 'mice.message', data
84
+
85
+ data[option]() if typeof option == 'string'
86
+
87
+
88
+ $.fn.message.Constructor = Message
89
+
90
+ $.fn.message.defaults =
91
+ template: "<div class=\"message\"><div class=\"inner\"></div><span class=\"close\">&times;</span></div>"
92
+ message: null
93
+ placement: 'top'
94
+ status: ''
95
+ duration: null
96
+
97
+ # export to window
98
+ window.Message = new Message()
99
+
100
+ $ -> $('[data-ride="message"]').message();
101
+
102
+ return
103
+
104
+ ) jQuery
@@ -0,0 +1,20 @@
1
+ # Mice: Slider
2
+
3
+ 'use strict';
4
+
5
+ (($) ->
6
+
7
+ # TOOLTIP PUBLIC CLASS DEFINITION
8
+ # ===============================
9
+ class Slider
10
+ constructor: (element, options) ->
11
+ @slider
12
+ @options
13
+
14
+ @init()
15
+
16
+
17
+ init: ->
18
+
19
+ return
20
+ ) jQuery
@@ -0,0 +1,223 @@
1
+ /* ========================================================================
2
+ * Bootstrap: carousel.js v3.2.0
3
+ * http://getbootstrap.com/javascript/#carousel
4
+ * ========================================================================
5
+ * Copyright 2011-2014 Twitter, Inc.
6
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
7
+ * ======================================================================== */
8
+
9
+
10
+ +function ($) {
11
+ 'use strict';
12
+
13
+ // CAROUSEL CLASS DEFINITION
14
+ // =========================
15
+
16
+ var Carousel = function (element, options) {
17
+ this.$element = $(element).on('keydown.bs.carousel', $.proxy(this.keydown, this))
18
+ this.$indicators = this.$element.find('.indicators')
19
+ this.options = options
20
+ this.paused =
21
+ this.sliding =
22
+ this.interval =
23
+ this.$active =
24
+ this.$items = null
25
+
26
+ this.options.pause == 'hover' && this.$element
27
+ .on('mouseenter.bs.carousel', $.proxy(this.pause, this))
28
+ .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
29
+ }
30
+
31
+ Carousel.VERSION = '3.2.0'
32
+
33
+ Carousel.DEFAULTS = {
34
+ interval: 5000,
35
+ pause: 'hover',
36
+ wrap: true
37
+ }
38
+
39
+ Carousel.prototype.keydown = function (e) {
40
+ switch (e.which) {
41
+ case 37: this.prev(); break
42
+ case 39: this.next(); break
43
+ default: return
44
+ }
45
+
46
+ e.preventDefault()
47
+ }
48
+
49
+ Carousel.prototype.cycle = function (e) {
50
+ e || (this.paused = false)
51
+
52
+ this.interval && clearInterval(this.interval)
53
+
54
+ this.options.interval
55
+ && !this.paused
56
+ && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
57
+
58
+ return this
59
+ }
60
+
61
+ Carousel.prototype.getItemIndex = function (item) {
62
+ this.$items = item.parent().children('.item')
63
+ return this.$items.index(item || this.$active)
64
+ }
65
+
66
+ Carousel.prototype.to = function (pos) {
67
+ var that = this
68
+ var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))
69
+
70
+ if (pos > (this.$items.length - 1) || pos < 0) return
71
+
72
+ if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"
73
+ if (activeIndex == pos) return this.pause().cycle()
74
+
75
+ return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
76
+ }
77
+
78
+ Carousel.prototype.pause = function (e) {
79
+ e || (this.paused = true)
80
+
81
+ if (this.$element.find('.next, .prev').length && $.support.transition) {
82
+ this.$element.trigger($.support.transition.end)
83
+ this.cycle(true)
84
+ }
85
+
86
+ this.interval = clearInterval(this.interval)
87
+
88
+ return this
89
+ }
90
+
91
+ Carousel.prototype.next = function () {
92
+ if (this.sliding) return
93
+ return this.slide('next')
94
+ }
95
+
96
+ Carousel.prototype.prev = function () {
97
+ if (this.sliding) return
98
+ return this.slide('prev')
99
+ }
100
+
101
+ Carousel.prototype.slide = function (type, next) {
102
+ var $active = this.$element.find('.item.active')
103
+ var $next = next || $active[type]()
104
+ var isCycling = this.interval
105
+ var direction = type == 'next' ? 'left' : 'right'
106
+ var fallback = type == 'next' ? 'first' : 'last'
107
+ var that = this
108
+
109
+ if (!$next.length) {
110
+ if (!this.options.wrap) return
111
+ $next = this.$element.find('.item')[fallback]()
112
+ }
113
+
114
+ if ($next.hasClass('active')) return (this.sliding = false)
115
+
116
+ var relatedTarget = $next[0]
117
+ var slideEvent = $.Event('slide.bs.carousel', {
118
+ relatedTarget: relatedTarget,
119
+ direction: direction
120
+ })
121
+ this.$element.trigger(slideEvent)
122
+ if (slideEvent.isDefaultPrevented()) return
123
+
124
+ this.sliding = true
125
+
126
+ isCycling && this.pause()
127
+
128
+ if (this.$indicators.length) {
129
+ this.$indicators.find('.active').removeClass('active')
130
+ var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)])
131
+ $nextIndicator && $nextIndicator.addClass('active')
132
+ }
133
+
134
+ var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid"
135
+ if ($.support.transition && this.$element.hasClass('slide')) {
136
+ $next.addClass(type)
137
+ $next[0].offsetWidth // force reflow
138
+ $active.addClass(direction)
139
+ $next.addClass(direction)
140
+ $active
141
+ .one('miceTransitionEnd', function () {
142
+ $next.removeClass([type, direction].join(' ')).addClass('active')
143
+ $active.removeClass(['active', direction].join(' '))
144
+ that.sliding = false
145
+ setTimeout(function () {
146
+ that.$element.trigger(slidEvent)
147
+ }, 0)
148
+ })
149
+ .emulateTransitionEnd($active.css('transition-duration').slice(0, -1) * 1000)
150
+ } else {
151
+ $active.removeClass('active')
152
+ $next.addClass('active')
153
+ this.sliding = false
154
+ this.$element.trigger(slidEvent)
155
+ }
156
+
157
+ isCycling && this.cycle()
158
+
159
+ return this
160
+ }
161
+
162
+
163
+ // CAROUSEL PLUGIN DEFINITION
164
+ // ==========================
165
+
166
+ function Plugin(option) {
167
+ return this.each(function () {
168
+ var $this = $(this)
169
+ var data = $this.data('bs.carousel')
170
+ var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)
171
+ var action = typeof option == 'string' ? option : options.slide
172
+
173
+ if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
174
+ if (typeof option == 'number') data.to(option)
175
+ else if (action) data[action]()
176
+ else if (options.interval) data.pause().cycle()
177
+ })
178
+ }
179
+
180
+ var old = $.fn.carousel
181
+
182
+ $.fn.carousel = Plugin
183
+ $.fn.carousel.Constructor = Carousel
184
+
185
+
186
+ // CAROUSEL NO CONFLICT
187
+ // ====================
188
+
189
+ $.fn.carousel.noConflict = function () {
190
+ $.fn.carousel = old
191
+ return this
192
+ }
193
+
194
+
195
+ // CAROUSEL DATA-API
196
+ // =================
197
+
198
+ $(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
199
+ var href
200
+ var $this = $(this)
201
+ var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
202
+ if (!$target.hasClass('carousel')) return
203
+ var options = $.extend({}, $target.data(), $this.data())
204
+ var slideIndex = $this.attr('data-slide-to')
205
+ if (slideIndex) options.interval = false
206
+
207
+ Plugin.call($target, options)
208
+
209
+ if (slideIndex) {
210
+ $target.data('bs.carousel').to(slideIndex)
211
+ }
212
+
213
+ e.preventDefault()
214
+ })
215
+
216
+ $(window).on('load', function () {
217
+ $('[data-ride="carousel"]').each(function () {
218
+ var $carousel = $(this)
219
+ Plugin.call($carousel, $carousel.data())
220
+ })
221
+ })
222
+
223
+ }(jQuery);
@@ -1,5 +1,6 @@
1
1
  //= require mice/transition
2
2
  //= require mice/alert
3
3
  //= require mice/modal
4
+ //= require mice/message
4
5
  //= require mice/tooltip
5
- //= require mice/carousel
6
+ //= require mice/slider
@@ -72,4 +72,179 @@ img {
72
72
  display: block;
73
73
  width: 100%;
74
74
  }
75
- }
75
+ }
76
+
77
+
78
+ // Inspired by the original by http://www.hongkiat.com/blog/css3-image-captions/
79
+ .thumbnail {
80
+ display: inline-block;
81
+ cursor: pointer;
82
+ margin: 5px;
83
+ position: relative;
84
+ overflow: hidden;
85
+
86
+ img {
87
+ position: relative;
88
+ -webkit-transition: all 300ms ease-out;
89
+ -moz-transition: all 300ms ease-out;
90
+ -o-transition: all 300ms ease-out;
91
+ -ms-transition: all 300ms ease-out;
92
+ transition: all 300ms ease-out;
93
+ }
94
+
95
+ .caption {
96
+ width: 100%;
97
+ overflow: hidden;
98
+ padding: 5px;
99
+
100
+ background-color: rgba(0,0,0,0.8);
101
+ color: #fff;
102
+
103
+ position: absolute;
104
+ bottom: 0;
105
+ left: 0;
106
+ z-index: 100;
107
+
108
+ -webkit-transition: all 300ms ease-out;
109
+ -moz-transition: all 300ms ease-out;
110
+ -o-transition: all 300ms ease-out;
111
+ -ms-transition: all 300ms ease-out;
112
+ transition: all 300ms ease-out;
113
+ }
114
+
115
+ &.simple .caption {
116
+ height: 30px;
117
+ bottom: -30px;
118
+ text-align: center;
119
+ }
120
+ &.simple:hover .caption {
121
+ opacity: 1;
122
+ -moz-transform: translateY(-100%);
123
+ -o-transform: translateY(-100%);
124
+ -webkit-transform: translateY(-100%);
125
+ transform: translateY(-100%);
126
+ }
127
+
128
+ &.full .caption {
129
+ height: 100%;
130
+ top: -100%;
131
+ overflow: hidden;
132
+ }
133
+ &.full:hover .caption {
134
+ -moz-transform: translateY(100%);
135
+ -o-transform: translateY(100%);
136
+ -webkit-transform: translateY(100%);
137
+ transform: translateY(100%);
138
+ }
139
+
140
+ &.fade{ opacity: 1; }
141
+ &.fade .caption{
142
+ opacity: 0;
143
+ top: 0;
144
+ bottom: 0;
145
+ }
146
+ &.fade:hover .caption{ opacity: 1; }
147
+
148
+ &.slide .caption {
149
+ top: 0;
150
+ left: 100%;
151
+ bottom: 0;
152
+ }
153
+ &.slide:hover img {
154
+ -moz-transform: translateX(-100%);
155
+ -o-transform: translateX(-100%);
156
+ -webkit-transform: translateX(-100%);
157
+ transform: translateX(-100%);
158
+ opacity: 1;
159
+ }
160
+ &.slide:hover .caption {
161
+ background-color: rgba(0,0,0,1) !important;
162
+ -moz-transform: translateX(-100%);
163
+ -o-transform: translateX(-100%);
164
+ -webkit-transform: translateX(-100%);
165
+ transform: translateX(-100%);
166
+ opacity: 1;
167
+ }
168
+
169
+ &.rotate img{
170
+ -webkit-transform-origin: center bottom;
171
+ -ms-transform-origin: center bottom;
172
+ transform-origin: center bottom;
173
+ opacity: 1;
174
+ }
175
+ &.rotate:hover img{
176
+ -webkit-transform: rotate3d(0, 0, 1, -180deg);
177
+ -webkit-transform: rotate3d(0, 0, 1, -180deg);
178
+ -ms-transform: rotate3d(0, 0, 1, -180deg);
179
+ transform: rotate3d(0, 0, 1, -180deg);
180
+ }
181
+ &.rotate .caption {
182
+ top: 0;
183
+ height: 100%;
184
+ background-color: rgba(0,0,0,1) !important;
185
+
186
+ -webkit-transform-origin: center bottom;
187
+ -ms-transform-origin: center bottom;
188
+ transform-origin: center bottom;
189
+
190
+ -webkit-transform: rotate3d(0, 0, 1, 180deg);
191
+ -ms-transform: rotate3d(0, 0, 1, 180deg);
192
+ transform: rotate3d(0, 0, 1, 180deg);
193
+ }
194
+ &.rotate:hover .caption {
195
+ -webkit-transform: none;
196
+ -ms-transform: none;
197
+ transform: none;
198
+ }
199
+
200
+ &.scale .caption{
201
+ overflow: hidden;
202
+ opacity: 0;
203
+ top: 0;
204
+ bottom: 0;
205
+
206
+ h3, p {
207
+ position: relative;
208
+ left: -100%;
209
+ -webkit-transition: all 300ms ease-out;
210
+ -moz-transition: all 300ms ease-out;
211
+ -o-transition: all 300ms ease-out;
212
+ -ms-transition: all 300ms ease-out;
213
+ transition: all 300ms ease-out;
214
+ }
215
+
216
+ h3 {
217
+ -webkit-transition-delay: 300ms;
218
+ -moz-transition-delay: 300ms;
219
+ -o-transition-delay: 300ms;
220
+ -ms-transition-delay: 300ms;
221
+ transition-delay: 300ms;
222
+ }
223
+
224
+ p {
225
+ -webkit-transition-delay: 500ms;
226
+ -moz-transition-delay: 500ms;
227
+ -o-transition-delay: 500ms;
228
+ -ms-transition-delay: 500ms;
229
+ transition-delay: 500ms;
230
+ }
231
+ }
232
+ &.scale:hover{
233
+ img {
234
+ -moz-transform: scale(1.4);
235
+ -o-transform: scale(1.4);
236
+ -webkit-transform: scale(1.4);
237
+ transform: scale(1.4);
238
+ }
239
+ .caption {
240
+ opacity: 1;
241
+ h3, p {
242
+ -moz-transform: translateX(100%);
243
+ -o-transform: translateX(100%);
244
+ -webkit-transform: translateX(100%);
245
+ transform: translateX(100%);
246
+ }
247
+ }
248
+ }
249
+
250
+ }
@@ -0,0 +1,78 @@
1
+ //
2
+ // Message
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Mixin
7
+ @mixin message-variant($background, $border, $text-color) {
8
+ background-color: $background;
9
+ border-color: $border;
10
+ color: $text-color;
11
+
12
+ a {
13
+ color: darken($text-color, 10%);
14
+ }
15
+ }
16
+
17
+
18
+ // Base styles
19
+ // -------------------------
20
+ .message {
21
+ display: none;
22
+ width: 100%;
23
+ padding: 10px 20px;
24
+ padding: $message-padding;
25
+
26
+ line-height: 1.8;
27
+ font-size: 16px;
28
+ background: #FFF;
29
+ background: rgba(255,255,255,0.9);
30
+
31
+ color: #666;
32
+ text-align: center;
33
+
34
+ border-bottom: 1px solid #ddd;
35
+ border-top: 1px solid #ddd;
36
+
37
+ position: fixed;
38
+ top: 0;
39
+ left: 0;
40
+ z-index: $zindex-message;
41
+
42
+ &.top {
43
+ top: 0;
44
+ bottom: auto;
45
+ }
46
+
47
+ &.bottom{
48
+ top: auto;
49
+ bottom: 0;
50
+ }
51
+
52
+ h4{ margin: 0; color: inherit; }
53
+ a { font-weight: $message-link-font-weight; }
54
+
55
+ .close{
56
+ display: inline;
57
+ float: right;
58
+ cursor: pointer;
59
+ position: absolute;
60
+ top: 10px;
61
+ right: 10px;
62
+ opacity: 0.6;
63
+
64
+ &:hover{
65
+ opacity: 1;
66
+ }
67
+ }
68
+ }
69
+
70
+
71
+ // Alternate styles
72
+ // Generate contextual modifier classes for colorizing the message.
73
+ .message{
74
+ &.success {@include message-variant($message-success-background, $message-success-border, $message-success-text); }
75
+ &.info {@include message-variant($message-info-background, $message-info-border, $message-info-text); }
76
+ &.warning {@include message-variant($message-warning-background, $message-warning-border, $message-warning-text); }
77
+ &.danger {@include message-variant($message-danger-background, $message-danger-border, $message-danger-text); }
78
+ }
@@ -208,36 +208,103 @@
208
208
  // Scale up controls for tablets and up
209
209
  @media screen and (min-width: $screen-sm-min) {
210
210
 
211
- // Scale up the controls a smidge
212
- .control {
213
- .chevron-left,
214
- .chevron-right,
215
- .icon-prev,
216
- .icon-next {
217
- width: 30px;
218
- height: 30px;
219
- margin-top: -15px;
220
- font-size: 30px;
211
+ .carousel{
212
+ // Scale up the controls a smidge
213
+ .control {
214
+ .chevron-left,
215
+ .chevron-right,
216
+ .icon-prev,
217
+ .icon-next {
218
+ width: 30px;
219
+ height: 30px;
220
+ margin-top: -15px;
221
+ font-size: 30px;
222
+ }
223
+ .chevron-left,
224
+ .icon-prev {
225
+ margin-left: -15px;
226
+ }
227
+ .chevron-right,
228
+ .icon-next {
229
+ margin-right: -15px;
230
+ }
221
231
  }
222
- .chevron-left,
223
- .icon-prev {
224
- margin-left: -15px;
232
+
233
+ // Show and left align the captions
234
+ .caption {
235
+ left: 20%;
236
+ right: 20%;
237
+ padding-bottom: 30px;
225
238
  }
226
- .chevron-right,
227
- .icon-next {
228
- margin-right: -15px;
239
+
240
+ // Move up the indicators
241
+ .indicators {
242
+ bottom: 20px;
229
243
  }
230
244
  }
245
+ }
231
246
 
232
- // Show and left align the captions
233
- .caption {
234
- left: 20%;
235
- right: 20%;
236
- padding-bottom: 30px;
247
+
248
+ .thumb-carousel{
249
+ overflow:hidden;
250
+ position: relative;
251
+
252
+ .viewport {
253
+ width: 100%;
254
+ height: 150px;
255
+ position: relative;
256
+ z-index: 98;
237
257
  }
238
258
 
239
- // Move up the indicators
240
- .indicators {
241
- bottom: 20px;
259
+ .control {
260
+ display: block;
261
+ color: #FFF;
262
+ text-align: center;
263
+ text-decoration: none;
264
+ position: absolute;
265
+ top: 50%;
266
+ margin-top: -5px;
267
+ z-index: 99;
268
+
269
+ &.left { left: 0; }
270
+ &.right { right: 0; }
271
+ }
272
+
273
+ .control i.icon{ margin: 0;}
274
+ .control.disable {
275
+ cursor: not-allowed;
276
+ /*cursor: no-drop;*/
242
277
  }
278
+ .overview {
279
+ padding: 0;
280
+ margin: 0;
281
+ list-style: none;
282
+ position: absolute;
283
+ top: 0;
284
+ z-index: 9;
285
+
286
+ li{
287
+ float: left;
288
+ padding: 1px;
289
+ border: 1px solid #FFF;
290
+
291
+ &.active{
292
+ border-color: #666;
293
+ z-index: 99;
294
+ }
295
+ & img{
296
+ opacity: 0.7;
297
+ -webkit-transition: all 0.15s ease-out;
298
+ -webkit-transition-delay: 0s;
299
+ -moz-transition: all 0.15s ease-out 0s;
300
+ -o-transition: all 0.15s ease-out 0s;
301
+ transition: all 0.15s ease-out 0s;
302
+ }
303
+ &.active img,
304
+ & img:hover{
305
+ opacity: 1;
306
+ }
307
+ }
308
+ }
309
+
243
310
  }
@@ -482,6 +482,7 @@ $zindex-navbar-fixed: 1030 !default;
482
482
  $zindex-modal-background: 1040 !default;
483
483
  $zindex-modal: 1050 !default;
484
484
  $zindex-tooltip: 1070 !default;
485
+ $zindex-message: 1090 !default;
485
486
 
486
487
 
487
488
  // Media queries breakpoints
@@ -536,6 +537,28 @@ $tooltip-danger-background: $brand-danger !default;
536
537
  $tooltip-danger-arrow-color: $tooltip-danger-background !default;
537
538
 
538
539
 
540
+ // Message
541
+ // --------------------------------------------------
542
+ $message-padding: 10px 20px !default;
543
+ $message-link-font-weight: bold !default;
544
+
545
+ $message-success-background: $state-success-background !default;
546
+ $message-success-text: $state-success-text !default;
547
+ $message-success-border: $state-success-border !default;
548
+
549
+ $message-info-background: $state-info-background !default;
550
+ $message-info-text: $state-info-text !default;
551
+ $message-info-border: $state-info-border !default;
552
+
553
+ $message-warning-background: $state-warning-background !default;
554
+ $message-warning-text: $state-warning-text !default;
555
+ $message-warning-border: $state-warning-border !default;
556
+
557
+ $message-danger-background: $state-danger-background !default;
558
+ $message-danger-text: $state-danger-text !default;
559
+ $message-danger-border: $state-danger-border !default;
560
+
561
+
539
562
  // Carousel
540
563
  // --------------------------------------------------
541
564
 
@@ -35,8 +35,9 @@
35
35
  @import "mice/alerts";
36
36
  @import "mice/close";
37
37
  @import "mice/modals";
38
+ @import "mice/message";
38
39
  @import "mice/tooltips";
39
- @import "mice/carousel";
40
+ @import "mice/slider";
40
41
 
41
42
  // Form
42
43
  @import "mice/forms";
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: mice
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.8
4
+ version: 0.2.9
5
5
  platform: ruby
6
6
  authors:
7
7
  - miclle
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-07-19 00:00:00.000000000 Z
11
+ date: 2014-07-30 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass
@@ -69,7 +69,10 @@ files:
69
69
  - vendor/assets/javascripts/mice/jquery.js
70
70
  - vendor/assets/javascripts/mice/jquery.min.js
71
71
  - vendor/assets/javascripts/mice/jquery.min.map
72
+ - vendor/assets/javascripts/mice/message.coffee
72
73
  - vendor/assets/javascripts/mice/modal.js
74
+ - vendor/assets/javascripts/mice/slider.coffee
75
+ - vendor/assets/javascripts/mice/slider.js
73
76
  - vendor/assets/javascripts/mice/tooltip.coffee
74
77
  - vendor/assets/javascripts/mice/transition.coffee
75
78
  - vendor/assets/stylesheets/mice-mobile.scss
@@ -78,7 +81,6 @@ files:
78
81
  - vendor/assets/stylesheets/mice/_breadcrumbs.scss
79
82
  - vendor/assets/stylesheets/mice/_buttons.scss
80
83
  - vendor/assets/stylesheets/mice/_callouts.scss
81
- - vendor/assets/stylesheets/mice/_carousel.scss
82
84
  - vendor/assets/stylesheets/mice/_close.scss
83
85
  - vendor/assets/stylesheets/mice/_code.scss
84
86
  - vendor/assets/stylesheets/mice/_component-animations.scss
@@ -90,6 +92,7 @@ files:
90
92
  - vendor/assets/stylesheets/mice/_lists.scss
91
93
  - vendor/assets/stylesheets/mice/_media.scss
92
94
  - vendor/assets/stylesheets/mice/_menu.scss
95
+ - vendor/assets/stylesheets/mice/_message.scss
93
96
  - vendor/assets/stylesheets/mice/_mixins.scss
94
97
  - vendor/assets/stylesheets/mice/_modals.scss
95
98
  - vendor/assets/stylesheets/mice/_navbar.scss
@@ -99,6 +102,7 @@ files:
99
102
  - vendor/assets/stylesheets/mice/_progress.scss
100
103
  - vendor/assets/stylesheets/mice/_scaffolding.scss
101
104
  - vendor/assets/stylesheets/mice/_sidebar.scss
105
+ - vendor/assets/stylesheets/mice/_slider.scss
102
106
  - vendor/assets/stylesheets/mice/_tables.scss
103
107
  - vendor/assets/stylesheets/mice/_tabs.scss
104
108
  - vendor/assets/stylesheets/mice/_timeline.scss