scrollbar-rails 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +15 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +1 -0
- data/Rakefile +2 -0
- data/app/assets/images/border.png +0 -0
- data/app/assets/images/controls.png +0 -0
- data/app/assets/images/loading.gif +0 -0
- data/app/assets/images/loading_background.png +0 -0
- data/app/assets/images/overlay.png +0 -0
- data/app/assets/javascripts/jquery.colorbox-min.js +7 -0
- data/app/assets/javascripts/jquery.mCustomScrollbar.concat.min.js +4 -0
- data/app/assets/javascripts/jquery.mCustomScrollbar.js +2086 -0
- data/app/assets/javascripts/jquery.mousewheel-3.0.6.js +84 -0
- data/app/assets/javascripts/jquery.mousewheel.js +220 -0
- data/app/assets/stylesheets/colorbox.css +70 -0
- data/app/assets/stylesheets/ex.CustomScrollbar.css +829 -0
- data/app/assets/stylesheets/jquery.mCustomScrollbar.css +1277 -0
- data/lib/scrollbar-rails.rb +8 -0
- data/lib/scrollbar-rails/version.rb +5 -0
- data/scrollbar-rails.gemspec +23 -0
- metadata +92 -0
@@ -0,0 +1,84 @@
|
|
1
|
+
/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
|
2
|
+
* Licensed under the MIT License (LICENSE.txt).
|
3
|
+
*
|
4
|
+
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
|
5
|
+
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
|
6
|
+
* Thanks to: Seamus Leahy for adding deltaX and deltaY
|
7
|
+
*
|
8
|
+
* Version: 3.0.6
|
9
|
+
*
|
10
|
+
* Requires: 1.2.2+
|
11
|
+
*/
|
12
|
+
|
13
|
+
(function($) {
|
14
|
+
|
15
|
+
var types = ['DOMMouseScroll', 'mousewheel'];
|
16
|
+
|
17
|
+
if ($.event.fixHooks) {
|
18
|
+
for ( var i=types.length; i; ) {
|
19
|
+
$.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
$.event.special.mousewheel = {
|
24
|
+
setup: function() {
|
25
|
+
if ( this.addEventListener ) {
|
26
|
+
for ( var i=types.length; i; ) {
|
27
|
+
this.addEventListener( types[--i], handler, false );
|
28
|
+
}
|
29
|
+
} else {
|
30
|
+
this.onmousewheel = handler;
|
31
|
+
}
|
32
|
+
},
|
33
|
+
|
34
|
+
teardown: function() {
|
35
|
+
if ( this.removeEventListener ) {
|
36
|
+
for ( var i=types.length; i; ) {
|
37
|
+
this.removeEventListener( types[--i], handler, false );
|
38
|
+
}
|
39
|
+
} else {
|
40
|
+
this.onmousewheel = null;
|
41
|
+
}
|
42
|
+
}
|
43
|
+
};
|
44
|
+
|
45
|
+
$.fn.extend({
|
46
|
+
mousewheel: function(fn) {
|
47
|
+
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
|
48
|
+
},
|
49
|
+
|
50
|
+
unmousewheel: function(fn) {
|
51
|
+
return this.unbind("mousewheel", fn);
|
52
|
+
}
|
53
|
+
});
|
54
|
+
|
55
|
+
|
56
|
+
function handler(event) {
|
57
|
+
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
|
58
|
+
event = $.event.fix(orgEvent);
|
59
|
+
event.type = "mousewheel";
|
60
|
+
|
61
|
+
// Old school scrollwheel delta
|
62
|
+
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
|
63
|
+
if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
|
64
|
+
|
65
|
+
// New school multidimensional scroll (touchpads) deltas
|
66
|
+
deltaY = delta;
|
67
|
+
|
68
|
+
// Gecko
|
69
|
+
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
|
70
|
+
deltaY = 0;
|
71
|
+
deltaX = -1*delta;
|
72
|
+
}
|
73
|
+
|
74
|
+
// Webkit
|
75
|
+
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
|
76
|
+
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
|
77
|
+
|
78
|
+
// Add event and delta to the front of the arguments
|
79
|
+
args.unshift(event, delta, deltaX, deltaY);
|
80
|
+
|
81
|
+
return ($.event.dispatch || $.event.handle).apply(this, args);
|
82
|
+
}
|
83
|
+
|
84
|
+
})(jQuery);
|
@@ -0,0 +1,220 @@
|
|
1
|
+
/*! Copyright (c) 2013 Brandon Aaron (http://brandon.aaron.sh)
|
2
|
+
* Licensed under the MIT License (LICENSE.txt).
|
3
|
+
*
|
4
|
+
* Version: 3.1.11
|
5
|
+
*
|
6
|
+
* Requires: jQuery 1.2.2+
|
7
|
+
*/
|
8
|
+
|
9
|
+
(function (factory) {
|
10
|
+
if ( typeof define === 'function' && define.amd ) {
|
11
|
+
// AMD. Register as an anonymous module.
|
12
|
+
define(['jquery'], factory);
|
13
|
+
} else if (typeof exports === 'object') {
|
14
|
+
// Node/CommonJS style for Browserify
|
15
|
+
module.exports = factory;
|
16
|
+
} else {
|
17
|
+
// Browser globals
|
18
|
+
factory(jQuery);
|
19
|
+
}
|
20
|
+
}(function ($) {
|
21
|
+
|
22
|
+
var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'],
|
23
|
+
toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
|
24
|
+
['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'],
|
25
|
+
slice = Array.prototype.slice,
|
26
|
+
nullLowestDeltaTimeout, lowestDelta;
|
27
|
+
|
28
|
+
if ( $.event.fixHooks ) {
|
29
|
+
for ( var i = toFix.length; i; ) {
|
30
|
+
$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
var special = $.event.special.mousewheel = {
|
35
|
+
version: '3.1.11',
|
36
|
+
|
37
|
+
setup: function() {
|
38
|
+
if ( this.addEventListener ) {
|
39
|
+
for ( var i = toBind.length; i; ) {
|
40
|
+
this.addEventListener( toBind[--i], handler, false );
|
41
|
+
}
|
42
|
+
} else {
|
43
|
+
this.onmousewheel = handler;
|
44
|
+
}
|
45
|
+
// Store the line height and page height for this particular element
|
46
|
+
$.data(this, 'mousewheel-line-height', special.getLineHeight(this));
|
47
|
+
$.data(this, 'mousewheel-page-height', special.getPageHeight(this));
|
48
|
+
},
|
49
|
+
|
50
|
+
teardown: function() {
|
51
|
+
if ( this.removeEventListener ) {
|
52
|
+
for ( var i = toBind.length; i; ) {
|
53
|
+
this.removeEventListener( toBind[--i], handler, false );
|
54
|
+
}
|
55
|
+
} else {
|
56
|
+
this.onmousewheel = null;
|
57
|
+
}
|
58
|
+
// Clean up the data we added to the element
|
59
|
+
$.removeData(this, 'mousewheel-line-height');
|
60
|
+
$.removeData(this, 'mousewheel-page-height');
|
61
|
+
},
|
62
|
+
|
63
|
+
getLineHeight: function(elem) {
|
64
|
+
var $parent = $(elem)['offsetParent' in $.fn ? 'offsetParent' : 'parent']();
|
65
|
+
if (!$parent.length) {
|
66
|
+
$parent = $('body');
|
67
|
+
}
|
68
|
+
return parseInt($parent.css('fontSize'), 10);
|
69
|
+
},
|
70
|
+
|
71
|
+
getPageHeight: function(elem) {
|
72
|
+
return $(elem).height();
|
73
|
+
},
|
74
|
+
|
75
|
+
settings: {
|
76
|
+
adjustOldDeltas: true, // see shouldAdjustOldDeltas() below
|
77
|
+
normalizeOffset: true // calls getBoundingClientRect for each event
|
78
|
+
}
|
79
|
+
};
|
80
|
+
|
81
|
+
$.fn.extend({
|
82
|
+
mousewheel: function(fn) {
|
83
|
+
return fn ? this.bind('mousewheel', fn) : this.trigger('mousewheel');
|
84
|
+
},
|
85
|
+
|
86
|
+
unmousewheel: function(fn) {
|
87
|
+
return this.unbind('mousewheel', fn);
|
88
|
+
}
|
89
|
+
});
|
90
|
+
|
91
|
+
|
92
|
+
function handler(event) {
|
93
|
+
var orgEvent = event || window.event,
|
94
|
+
args = slice.call(arguments, 1),
|
95
|
+
delta = 0,
|
96
|
+
deltaX = 0,
|
97
|
+
deltaY = 0,
|
98
|
+
absDelta = 0,
|
99
|
+
offsetX = 0,
|
100
|
+
offsetY = 0;
|
101
|
+
event = $.event.fix(orgEvent);
|
102
|
+
event.type = 'mousewheel';
|
103
|
+
|
104
|
+
// Old school scrollwheel delta
|
105
|
+
if ( 'detail' in orgEvent ) { deltaY = orgEvent.detail * -1; }
|
106
|
+
if ( 'wheelDelta' in orgEvent ) { deltaY = orgEvent.wheelDelta; }
|
107
|
+
if ( 'wheelDeltaY' in orgEvent ) { deltaY = orgEvent.wheelDeltaY; }
|
108
|
+
if ( 'wheelDeltaX' in orgEvent ) { deltaX = orgEvent.wheelDeltaX * -1; }
|
109
|
+
|
110
|
+
// Firefox < 17 horizontal scrolling related to DOMMouseScroll event
|
111
|
+
if ( 'axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
|
112
|
+
deltaX = deltaY * -1;
|
113
|
+
deltaY = 0;
|
114
|
+
}
|
115
|
+
|
116
|
+
// Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy
|
117
|
+
delta = deltaY === 0 ? deltaX : deltaY;
|
118
|
+
|
119
|
+
// New school wheel delta (wheel event)
|
120
|
+
if ( 'deltaY' in orgEvent ) {
|
121
|
+
deltaY = orgEvent.deltaY * -1;
|
122
|
+
delta = deltaY;
|
123
|
+
}
|
124
|
+
if ( 'deltaX' in orgEvent ) {
|
125
|
+
deltaX = orgEvent.deltaX;
|
126
|
+
if ( deltaY === 0 ) { delta = deltaX * -1; }
|
127
|
+
}
|
128
|
+
|
129
|
+
// No change actually happened, no reason to go any further
|
130
|
+
if ( deltaY === 0 && deltaX === 0 ) { return; }
|
131
|
+
|
132
|
+
// Need to convert lines and pages to pixels if we aren't already in pixels
|
133
|
+
// There are three delta modes:
|
134
|
+
// * deltaMode 0 is by pixels, nothing to do
|
135
|
+
// * deltaMode 1 is by lines
|
136
|
+
// * deltaMode 2 is by pages
|
137
|
+
if ( orgEvent.deltaMode === 1 ) {
|
138
|
+
var lineHeight = $.data(this, 'mousewheel-line-height');
|
139
|
+
delta *= lineHeight;
|
140
|
+
deltaY *= lineHeight;
|
141
|
+
deltaX *= lineHeight;
|
142
|
+
} else if ( orgEvent.deltaMode === 2 ) {
|
143
|
+
var pageHeight = $.data(this, 'mousewheel-page-height');
|
144
|
+
delta *= pageHeight;
|
145
|
+
deltaY *= pageHeight;
|
146
|
+
deltaX *= pageHeight;
|
147
|
+
}
|
148
|
+
|
149
|
+
// Store lowest absolute delta to normalize the delta values
|
150
|
+
absDelta = Math.max( Math.abs(deltaY), Math.abs(deltaX) );
|
151
|
+
|
152
|
+
if ( !lowestDelta || absDelta < lowestDelta ) {
|
153
|
+
lowestDelta = absDelta;
|
154
|
+
|
155
|
+
// Adjust older deltas if necessary
|
156
|
+
if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
|
157
|
+
lowestDelta /= 40;
|
158
|
+
}
|
159
|
+
}
|
160
|
+
|
161
|
+
// Adjust older deltas if necessary
|
162
|
+
if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
|
163
|
+
// Divide all the things by 40!
|
164
|
+
delta /= 40;
|
165
|
+
deltaX /= 40;
|
166
|
+
deltaY /= 40;
|
167
|
+
}
|
168
|
+
|
169
|
+
// Get a whole, normalized value for the deltas
|
170
|
+
delta = Math[ delta >= 1 ? 'floor' : 'ceil' ](delta / lowestDelta);
|
171
|
+
deltaX = Math[ deltaX >= 1 ? 'floor' : 'ceil' ](deltaX / lowestDelta);
|
172
|
+
deltaY = Math[ deltaY >= 1 ? 'floor' : 'ceil' ](deltaY / lowestDelta);
|
173
|
+
|
174
|
+
// Normalise offsetX and offsetY properties
|
175
|
+
if ( special.settings.normalizeOffset && this.getBoundingClientRect ) {
|
176
|
+
var boundingRect = this.getBoundingClientRect();
|
177
|
+
offsetX = event.clientX - boundingRect.left;
|
178
|
+
offsetY = event.clientY - boundingRect.top;
|
179
|
+
}
|
180
|
+
|
181
|
+
// Add information to the event object
|
182
|
+
event.deltaX = deltaX;
|
183
|
+
event.deltaY = deltaY;
|
184
|
+
event.deltaFactor = lowestDelta;
|
185
|
+
event.offsetX = offsetX;
|
186
|
+
event.offsetY = offsetY;
|
187
|
+
// Go ahead and set deltaMode to 0 since we converted to pixels
|
188
|
+
// Although this is a little odd since we overwrite the deltaX/Y
|
189
|
+
// properties with normalized deltas.
|
190
|
+
event.deltaMode = 0;
|
191
|
+
|
192
|
+
// Add event and delta to the front of the arguments
|
193
|
+
args.unshift(event, delta, deltaX, deltaY);
|
194
|
+
|
195
|
+
// Clearout lowestDelta after sometime to better
|
196
|
+
// handle multiple device types that give different
|
197
|
+
// a different lowestDelta
|
198
|
+
// Ex: trackpad = 3 and mouse wheel = 120
|
199
|
+
if (nullLowestDeltaTimeout) { clearTimeout(nullLowestDeltaTimeout); }
|
200
|
+
nullLowestDeltaTimeout = setTimeout(nullLowestDelta, 200);
|
201
|
+
|
202
|
+
return ($.event.dispatch || $.event.handle).apply(this, args);
|
203
|
+
}
|
204
|
+
|
205
|
+
function nullLowestDelta() {
|
206
|
+
lowestDelta = null;
|
207
|
+
}
|
208
|
+
|
209
|
+
function shouldAdjustOldDeltas(orgEvent, absDelta) {
|
210
|
+
// If this is an older event and the delta is divisable by 120,
|
211
|
+
// then we are assuming that the browser is treating this as an
|
212
|
+
// older mouse wheel event and that we should divide the deltas
|
213
|
+
// by 40 to try and get a more usable deltaFactor.
|
214
|
+
// Side note, this actually impacts the reported scroll distance
|
215
|
+
// in older browsers and can cause scrolling to be slower than native.
|
216
|
+
// Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false.
|
217
|
+
return special.settings.adjustOldDeltas && orgEvent.type === 'mousewheel' && absDelta % 120 === 0;
|
218
|
+
}
|
219
|
+
|
220
|
+
}));
|
@@ -0,0 +1,70 @@
|
|
1
|
+
/*
|
2
|
+
Colorbox Core Style:
|
3
|
+
The following CSS is consistent between example themes and should not be altered.
|
4
|
+
*/
|
5
|
+
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
|
6
|
+
#cboxWrapper {max-width:none;}
|
7
|
+
#cboxOverlay{position:fixed; width:100%; height:100%;}
|
8
|
+
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
|
9
|
+
#cboxContent{position:relative;}
|
10
|
+
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
|
11
|
+
#cboxTitle{margin:0;}
|
12
|
+
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
|
13
|
+
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
|
14
|
+
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
|
15
|
+
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
|
16
|
+
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
|
17
|
+
|
18
|
+
/*
|
19
|
+
User Style:
|
20
|
+
Change the following styles to modify the appearance of Colorbox. They are
|
21
|
+
ordered & tabbed in a way that represents the nesting of the generated HTML.
|
22
|
+
*/
|
23
|
+
#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
|
24
|
+
#colorbox{outline:0;}
|
25
|
+
#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
|
26
|
+
#cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
|
27
|
+
#cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
|
28
|
+
#cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
|
29
|
+
#cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
|
30
|
+
#cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
|
31
|
+
#cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
|
32
|
+
#cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
|
33
|
+
#cboxContent{background:#fff; overflow:hidden;}
|
34
|
+
.cboxIframe{background:#fff;}
|
35
|
+
#cboxError{padding:50px; border:1px solid #ccc;}
|
36
|
+
#cboxLoadedContent{margin-bottom:28px;}
|
37
|
+
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
|
38
|
+
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
|
39
|
+
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
|
40
|
+
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
|
41
|
+
|
42
|
+
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
|
43
|
+
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
|
44
|
+
|
45
|
+
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
|
46
|
+
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
|
47
|
+
|
48
|
+
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
|
49
|
+
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
|
50
|
+
#cboxPrevious:hover{background-position:-75px -25px;}
|
51
|
+
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
|
52
|
+
#cboxNext:hover{background-position:-50px -25px;}
|
53
|
+
#cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
|
54
|
+
#cboxClose:hover{background-position:-25px -25px;}
|
55
|
+
|
56
|
+
/*
|
57
|
+
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
|
58
|
+
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
|
59
|
+
See: http://jacklmoore.com/notes/ie-transparency-problems/
|
60
|
+
*/
|
61
|
+
.cboxIE #cboxTopLeft,
|
62
|
+
.cboxIE #cboxTopCenter,
|
63
|
+
.cboxIE #cboxTopRight,
|
64
|
+
.cboxIE #cboxBottomLeft,
|
65
|
+
.cboxIE #cboxBottomCenter,
|
66
|
+
.cboxIE #cboxBottomRight,
|
67
|
+
.cboxIE #cboxMiddleLeft,
|
68
|
+
.cboxIE #cboxMiddleRight {
|
69
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
|
70
|
+
}
|
@@ -0,0 +1,829 @@
|
|
1
|
+
/* stylesheet for demo and examples */
|
2
|
+
|
3
|
+
@import url(http://fonts.googleapis.com/css?family=Lobster+Two:700italic,700);
|
4
|
+
@import url(http://fonts.googleapis.com/css?family=Oswald:300);
|
5
|
+
|
6
|
+
body{
|
7
|
+
background-color: #222;
|
8
|
+
color: #eee;
|
9
|
+
font-size: 14px;
|
10
|
+
font-family: "Verdana",Geneva,sans-serif;
|
11
|
+
margin: 0;
|
12
|
+
padding: 0;
|
13
|
+
min-width: 480px;
|
14
|
+
}
|
15
|
+
|
16
|
+
a{
|
17
|
+
color: inherit;
|
18
|
+
-webkit-transition: all .2s ease-in-out;
|
19
|
+
-moz-transition: all .2s ease-in-out;
|
20
|
+
-o-transition: all .2s ease-in-out;
|
21
|
+
transition: all .2s ease-in-out;
|
22
|
+
}
|
23
|
+
|
24
|
+
a:hover{
|
25
|
+
text-decoration: none;
|
26
|
+
color: #fff;
|
27
|
+
}
|
28
|
+
|
29
|
+
h1, h2, h3{
|
30
|
+
font-family: "Lobster Two", "Georgia", serif;
|
31
|
+
font-weight: 700;
|
32
|
+
font-style: italic;
|
33
|
+
color: #6bdaea;
|
34
|
+
}
|
35
|
+
|
36
|
+
hr{
|
37
|
+
background-color: transparent;
|
38
|
+
height: 0;
|
39
|
+
border: none;
|
40
|
+
border-bottom: 1px solid rgba(255,255,255,0.08);
|
41
|
+
border-top: 1px solid rgba(0,0,0,0.9);
|
42
|
+
margin: 0;
|
43
|
+
clear: both;
|
44
|
+
}
|
45
|
+
|
46
|
+
header, #demo, footer{
|
47
|
+
position: relative;
|
48
|
+
margin: 0 auto;
|
49
|
+
width: 90%;
|
50
|
+
padding: 0 30px;
|
51
|
+
}
|
52
|
+
|
53
|
+
header{
|
54
|
+
margin-top: 30px;
|
55
|
+
margin-bottom: 40px;
|
56
|
+
}
|
57
|
+
|
58
|
+
#demo{ line-height: 20px; }
|
59
|
+
|
60
|
+
.logo{
|
61
|
+
display: inline-block;
|
62
|
+
margin-right: 20px;
|
63
|
+
}
|
64
|
+
|
65
|
+
.logo img{
|
66
|
+
vertical-align: bottom;
|
67
|
+
border: 0;
|
68
|
+
}
|
69
|
+
|
70
|
+
header hr{ margin-top: 20px; }
|
71
|
+
|
72
|
+
.title{
|
73
|
+
display: inline-block;
|
74
|
+
font-size: 32px;
|
75
|
+
vertical-align: middle;
|
76
|
+
margin-right: 40px;
|
77
|
+
line-height: 24px;
|
78
|
+
}
|
79
|
+
|
80
|
+
.title{ margin-top: 5px; }
|
81
|
+
|
82
|
+
nav ul, .callbacks ul, .disable-destroy ul, .show-hide ul, #sortable ul, .dialog ul, .all-themes-switch ul, .scrollTo ul{
|
83
|
+
overflow: hidden;
|
84
|
+
margin: 0;
|
85
|
+
padding: 0;
|
86
|
+
list-style: none;
|
87
|
+
}
|
88
|
+
|
89
|
+
h1{
|
90
|
+
margin: 20px 0;
|
91
|
+
color: inherit;
|
92
|
+
}
|
93
|
+
|
94
|
+
img{
|
95
|
+
max-width: 100%;
|
96
|
+
height: auto;
|
97
|
+
}
|
98
|
+
|
99
|
+
#info p{
|
100
|
+
font-size: 12px;
|
101
|
+
color: #bbb;
|
102
|
+
padding: 6px 15px;
|
103
|
+
}
|
104
|
+
|
105
|
+
.callbacks, .callbacks + p, #examples, .content, .disable-destroy, .show-hide, .dialog, .all-themes-switch, .scrollTo{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
|
106
|
+
|
107
|
+
nav, .callbacks, .disable-destroy, .show-hide, .dialog, .all-themes-switch, .scrollTo{ background: #111; }
|
108
|
+
|
109
|
+
nav ul li, .callbacks ul li, .disable-destroy ul li, .show-hide ul li, .dialog ul li, .all-themes-switch ul li, .scrollTo ul li{
|
110
|
+
float: left;
|
111
|
+
margin: 3px 6px 3px 0;
|
112
|
+
}
|
113
|
+
|
114
|
+
.callbacks ul li.off{ opacity: 0.4; }
|
115
|
+
|
116
|
+
.callbacks ul li a, .disable-destroy ul li a, .show-hide ul li a, .dialog ul li a, .all-themes-switch ul li a, .scrollTo ul li a{
|
117
|
+
display: block;
|
118
|
+
padding: 3px 15px;
|
119
|
+
text-decoration: none;
|
120
|
+
color: #ccc;
|
121
|
+
}
|
122
|
+
|
123
|
+
.callbacks + p{
|
124
|
+
color: #bbb;
|
125
|
+
font-size: 12px;
|
126
|
+
}
|
127
|
+
|
128
|
+
.callbacks + p span{ display: inline-block; }
|
129
|
+
|
130
|
+
.callbacks + p span span{
|
131
|
+
color: #eee;
|
132
|
+
min-width: 40px;
|
133
|
+
}
|
134
|
+
|
135
|
+
.callbacks a span{
|
136
|
+
display: inline-block;
|
137
|
+
vertical-align: middle;
|
138
|
+
width: 14px;
|
139
|
+
height: 14px;
|
140
|
+
background: #333;
|
141
|
+
margin-right: 3px;
|
142
|
+
-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;
|
143
|
+
}
|
144
|
+
|
145
|
+
.callbacks a span.on{ background: #eb3755; }
|
146
|
+
|
147
|
+
.callback-offset, .callback-offset-back{
|
148
|
+
width: 100%;
|
149
|
+
position: absolute;
|
150
|
+
}
|
151
|
+
|
152
|
+
.callback-offset-back{
|
153
|
+
top: 0;
|
154
|
+
height: 50px;
|
155
|
+
border-bottom: 1px dashed #ffed0d;
|
156
|
+
}
|
157
|
+
|
158
|
+
.callback-offset{
|
159
|
+
bottom: 0;
|
160
|
+
height: 60px;
|
161
|
+
border-top: 1px dashed #ffed0d;
|
162
|
+
}
|
163
|
+
|
164
|
+
code{
|
165
|
+
color: #caaee1;
|
166
|
+
font-family: monospace;
|
167
|
+
}
|
168
|
+
|
169
|
+
#examples{
|
170
|
+
background-color: #191919;
|
171
|
+
background-color: rgba(0,0,0,0.3);
|
172
|
+
padding: 5px;
|
173
|
+
margin: 10px 0;
|
174
|
+
overflow: hidden;
|
175
|
+
}
|
176
|
+
|
177
|
+
#examples > hr{ margin: 20px 10px; }
|
178
|
+
|
179
|
+
.content{
|
180
|
+
overflow: auto;
|
181
|
+
position: relative;
|
182
|
+
padding: 20px;
|
183
|
+
background: #333;
|
184
|
+
margin: 10px;
|
185
|
+
width: 740px;
|
186
|
+
max-width: 97%;
|
187
|
+
height: 400px;
|
188
|
+
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
|
189
|
+
}
|
190
|
+
|
191
|
+
.content.hidden{ display: none; }
|
192
|
+
|
193
|
+
.content.light{
|
194
|
+
background-color: #ddd;
|
195
|
+
color: #333;
|
196
|
+
}
|
197
|
+
|
198
|
+
.content hr{
|
199
|
+
margin-bottom: -10px;
|
200
|
+
border-top: 1px solid rgba(0,0,0,0.7);
|
201
|
+
}
|
202
|
+
|
203
|
+
.content.light hr{
|
204
|
+
border-bottom: 1px solid rgba(255,255,255,0.6);
|
205
|
+
border-top: 1px solid rgba(0,0,0,0.1);
|
206
|
+
}
|
207
|
+
|
208
|
+
.content p{ margin: 30px 0; }
|
209
|
+
|
210
|
+
.content p:last-child{ margin-bottom: 5px; }
|
211
|
+
|
212
|
+
.content p:nth-child(odd), .content.light p:nth-child(odd){
|
213
|
+
background: #444;
|
214
|
+
background: rgba(255,255,255,0.1);
|
215
|
+
padding: 5px 10px;
|
216
|
+
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
|
217
|
+
}
|
218
|
+
|
219
|
+
.content p:nth-child(3n+3){
|
220
|
+
color: #bbb;
|
221
|
+
background: none;
|
222
|
+
padding: 0;
|
223
|
+
}
|
224
|
+
|
225
|
+
.content.light p:nth-child(odd){
|
226
|
+
background: #fff;
|
227
|
+
background: rgba(255,255,255,0.8);
|
228
|
+
}
|
229
|
+
|
230
|
+
.content.light p:nth-child(3n+3){ color: #666; }
|
231
|
+
|
232
|
+
.content p.full:nth-child(odd), .content p.half:nth-child(odd),
|
233
|
+
.content p.full:nth-child(3n+3), .content p.half:nth-child(3n+3){
|
234
|
+
background: none;
|
235
|
+
padding: 0;
|
236
|
+
}
|
237
|
+
|
238
|
+
.content h2{
|
239
|
+
font-size: 200%;
|
240
|
+
line-height: 130%;
|
241
|
+
}
|
242
|
+
|
243
|
+
.content h2:first-child{ margin-top: 5px; }
|
244
|
+
|
245
|
+
.content:nth-child(odd) h2{
|
246
|
+
font-family: "Oswald", sans-serif;
|
247
|
+
font-weight: 300;
|
248
|
+
font-style: normal;
|
249
|
+
}
|
250
|
+
|
251
|
+
hr + .content:nth-child(odd) h2{
|
252
|
+
font-family: "Lobster Two", "Georgia", serif;
|
253
|
+
font-weight: 700;
|
254
|
+
font-style: italic;
|
255
|
+
}
|
256
|
+
|
257
|
+
.content.light h2{ color: inherit; }
|
258
|
+
|
259
|
+
.content img{
|
260
|
+
margin: 0;
|
261
|
+
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
|
262
|
+
padding: 3px;
|
263
|
+
background: rgba(0,0,0,0.2);
|
264
|
+
}
|
265
|
+
|
266
|
+
.content.light img{ background: rgba(255,255,255,0.4); }
|
267
|
+
|
268
|
+
.content input[type='text'], .content textarea{
|
269
|
+
border: none;
|
270
|
+
background: transparent;
|
271
|
+
background-color: #bbb;
|
272
|
+
background-color: rgba(255,255,255,0.6);
|
273
|
+
min-height: 20px;
|
274
|
+
padding: 5px;
|
275
|
+
-moz-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
|
276
|
+
-webkit-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
|
277
|
+
box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
|
278
|
+
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
|
279
|
+
width: 50%;
|
280
|
+
font-size: inherit;
|
281
|
+
font-family: inherit;
|
282
|
+
color: #222;
|
283
|
+
}
|
284
|
+
|
285
|
+
.content textarea{
|
286
|
+
min-height: 80px;
|
287
|
+
width: 70%;
|
288
|
+
}
|
289
|
+
|
290
|
+
.content .half img{
|
291
|
+
max-width: 48%;
|
292
|
+
margin: 0 0 2% 2%;
|
293
|
+
}
|
294
|
+
|
295
|
+
.content .half img:nth-child(odd){ margin: 0 2% 2% 0; }
|
296
|
+
|
297
|
+
#demo.showcase{ min-width: 740px; }
|
298
|
+
|
299
|
+
.showcase .content{
|
300
|
+
float: left;
|
301
|
+
width: 340px;
|
302
|
+
height: 300px;
|
303
|
+
}
|
304
|
+
|
305
|
+
.showcase .horizontal-images.content{
|
306
|
+
height: 140px;
|
307
|
+
width: 700px;
|
308
|
+
max-width: 97%;
|
309
|
+
padding: 5px 5px 0 5px;
|
310
|
+
}
|
311
|
+
|
312
|
+
.showcase .horizontal-images.content h2, .showcase .horizontal-images.content li img{ height: 119px; }
|
313
|
+
|
314
|
+
.showcase .horizontal-images.content h2{
|
315
|
+
color: #fff;
|
316
|
+
background-color: #eb3755;
|
317
|
+
padding: 10px 20px;
|
318
|
+
margin: 0;
|
319
|
+
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
|
320
|
+
font-size: 165%;
|
321
|
+
}
|
322
|
+
|
323
|
+
.horizontal-images.content ul, .vertical-images.content ul{
|
324
|
+
margin: 0;
|
325
|
+
padding: 0;
|
326
|
+
list-style: none;
|
327
|
+
overflow: hidden;
|
328
|
+
}
|
329
|
+
|
330
|
+
.horizontal-images.content li{
|
331
|
+
margin: 0 3px;
|
332
|
+
float: left;
|
333
|
+
}
|
334
|
+
|
335
|
+
.vertical-images.content li{ margin: 3px 0; }
|
336
|
+
|
337
|
+
.horizontal-images.content li:first-child{ margin-left: 0; }
|
338
|
+
|
339
|
+
.vertical-images.content li:first-child{
|
340
|
+
margin-bottom: 3px;
|
341
|
+
margin-top: 0;
|
342
|
+
}
|
343
|
+
|
344
|
+
.horizontal-images.content li:last-child{ margin-right: 0; }
|
345
|
+
|
346
|
+
.vertical-images.content li:last-child{ margin-bottom: 0; }
|
347
|
+
|
348
|
+
.horizontal-images.content li img{
|
349
|
+
width: auto;
|
350
|
+
padding: 0;
|
351
|
+
}
|
352
|
+
|
353
|
+
.showcase #content-1.content{ height: 620px; }
|
354
|
+
|
355
|
+
.showcase #content-2.content{ height: 620px; }
|
356
|
+
|
357
|
+
.showcase #content-2.content h2{ color: #333; }
|
358
|
+
|
359
|
+
.showcase #content-3.content{
|
360
|
+
background-color: #412626;
|
361
|
+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJ0lEQVQIW2NkwA7+M2IR/w8UY0SXAAuCFCNLwAWRJVAEYRIYgiAJALsgBgYbCawOAAAAAElFTkSuQmCC");
|
362
|
+
margin-right: 40px;
|
363
|
+
width: 310px;
|
364
|
+
}
|
365
|
+
|
366
|
+
.showcase #content-3.content h2{ color: #eb3755; }
|
367
|
+
|
368
|
+
.showcase #content-4.content{ background-color: #1C383F; }
|
369
|
+
|
370
|
+
.showcase #content-4.content h2{ color: #ddd; }
|
371
|
+
|
372
|
+
.showcase #content-6.horizontal-images.content{
|
373
|
+
padding: 10px 0 5px 0;
|
374
|
+
background-color: #444;
|
375
|
+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQIW2NkYGA4A8QmQAwGjDAGNgGwSgwVAFVOAgV/1mwxAAAAAElFTkSuQmCC");
|
376
|
+
}
|
377
|
+
|
378
|
+
.showcase #content-6.horizontal-images.content .mCSB_scrollTools{
|
379
|
+
margin-left: 10px;
|
380
|
+
margin-right: 10px;
|
381
|
+
}
|
382
|
+
|
383
|
+
.showcase #content-6.horizontal-images.content ul{
|
384
|
+
margin-left: 10px;
|
385
|
+
margin-right: 10px;
|
386
|
+
}
|
387
|
+
|
388
|
+
.showcase #content-6.horizontal-images.content h2{
|
389
|
+
color: #222;
|
390
|
+
background-color: #c2beb2;
|
391
|
+
}
|
392
|
+
|
393
|
+
.showcase #content-6.horizontal-images.content h2, .showcase #content-6.horizontal-images.content li img{ height: 105px; }
|
394
|
+
|
395
|
+
.showcase #content-7.content{ height: 620px; }
|
396
|
+
|
397
|
+
.showcase #content-8.content{
|
398
|
+
width: 670px;
|
399
|
+
height: 580px;
|
400
|
+
padding: 0;
|
401
|
+
background-color: #151515;
|
402
|
+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAK0lEQVQIW2NkwAL+//9vzIguDhZkZDyLIgETBCmGSyALwiXQBcES2ARBEgCUVxc3f8oLcQAAAABJRU5ErkJggg==");
|
403
|
+
border: 5px solid rgba(0,0,0,0.5);
|
404
|
+
margin-right: 40px;
|
405
|
+
margin-bottom: 50px;
|
406
|
+
}
|
407
|
+
|
408
|
+
.showcase #content-8.content h2{
|
409
|
+
margin-top: 20px;
|
410
|
+
margin-left: 20px;
|
411
|
+
margin-right: 20px;
|
412
|
+
}
|
413
|
+
|
414
|
+
.showcase #content-8.content p{
|
415
|
+
width: 710px;
|
416
|
+
float: left;
|
417
|
+
margin: 15px 20px;
|
418
|
+
}
|
419
|
+
|
420
|
+
.showcase #content-8.content hr + p{ margin-top: 30px; }
|
421
|
+
|
422
|
+
.showcase #content-8.content p:nth-child(3n+1){
|
423
|
+
width: 1460px;
|
424
|
+
clear: both;
|
425
|
+
}
|
426
|
+
|
427
|
+
.showcase #content-9.content{
|
428
|
+
height: 620px;
|
429
|
+
background-color: #c2beb2;
|
430
|
+
padding: 5px;
|
431
|
+
}
|
432
|
+
|
433
|
+
.showcase #content-9.content .mCSB_container{ margin-right: 21px; }
|
434
|
+
|
435
|
+
.showcase #content-9.content h2{
|
436
|
+
height: 85px;
|
437
|
+
padding: 10px;
|
438
|
+
margin-bottom: 0;
|
439
|
+
margin-top: 15px;
|
440
|
+
font-size: 180%;
|
441
|
+
color: #333;
|
442
|
+
}
|
443
|
+
|
444
|
+
.showcase #content-9.content img{
|
445
|
+
padding: 0;
|
446
|
+
vertical-align: bottom;
|
447
|
+
}
|
448
|
+
|
449
|
+
#iframe-container{
|
450
|
+
width: 90%;
|
451
|
+
max-width: 1110px;
|
452
|
+
background: #000;
|
453
|
+
overflow: hidden;
|
454
|
+
}
|
455
|
+
|
456
|
+
#iframe-container iframe{ vertical-align: bottom; }
|
457
|
+
|
458
|
+
#infinite-scroll .offset{
|
459
|
+
display: block;
|
460
|
+
width: 100%;
|
461
|
+
height: auto;
|
462
|
+
color: #ffed0d;
|
463
|
+
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
|
464
|
+
}
|
465
|
+
|
466
|
+
#infinite-scroll .offset p{
|
467
|
+
margin-bottom: 60px;
|
468
|
+
}
|
469
|
+
|
470
|
+
#infinite-scroll .offset .indicator{
|
471
|
+
display: block;
|
472
|
+
width: 100%;
|
473
|
+
height: 100px;
|
474
|
+
background: #ffed0d;
|
475
|
+
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
|
476
|
+
}
|
477
|
+
|
478
|
+
#examples.resizable{
|
479
|
+
background:#444;
|
480
|
+
padding-bottom: 30px;
|
481
|
+
}
|
482
|
+
|
483
|
+
#resizable.content{
|
484
|
+
overflow: hidden;
|
485
|
+
width: 640px;
|
486
|
+
max-width: 80%;
|
487
|
+
-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; /* jquery ui resizable bug: http://bugs.jqueryui.com/ticket/8932 */
|
488
|
+
}
|
489
|
+
|
490
|
+
#resizable.content h2{ color: #444; }
|
491
|
+
|
492
|
+
#resizable.content p{ width: 1000px }
|
493
|
+
|
494
|
+
.content.fluid{
|
495
|
+
width: 90%;
|
496
|
+
max-width: 1680px;
|
497
|
+
}
|
498
|
+
|
499
|
+
.content.fluid h2{
|
500
|
+
color: #eb3755;
|
501
|
+
font-family: "Lobster Two", "Georgia", serif;
|
502
|
+
font-weight: 700;
|
503
|
+
font-style: italic;
|
504
|
+
}
|
505
|
+
|
506
|
+
.content.nested{ height: 600px; }
|
507
|
+
|
508
|
+
.content.nested .nested{
|
509
|
+
margin: 0 auto;
|
510
|
+
background-color: rgba(0,0,0,0.1);
|
511
|
+
height: 400px;
|
512
|
+
}
|
513
|
+
|
514
|
+
#content-1.content.nested{ margin-bottom: 40px; }
|
515
|
+
|
516
|
+
#content-1.content.nested p{ width: 1000px; }
|
517
|
+
|
518
|
+
#content-1.content.nested .nested{
|
519
|
+
margin: 20px;
|
520
|
+
width: 600px;
|
521
|
+
height: 300px;
|
522
|
+
}
|
523
|
+
|
524
|
+
.content.zero-height{ height: 0; }
|
525
|
+
|
526
|
+
.content.zero-width{ width: 0; }
|
527
|
+
|
528
|
+
.init-hidden #examples{ min-height: 420px; }
|
529
|
+
|
530
|
+
.full-page .content{ height: 800px; }
|
531
|
+
|
532
|
+
.full-page-alt #mCSB_1_container{
|
533
|
+
width: 97% !important; /* override plugin property */
|
534
|
+
min-width: 480px;
|
535
|
+
}
|
536
|
+
|
537
|
+
.full-page-alt #mCSB_1_scrollbar_vertical{
|
538
|
+
position: fixed;
|
539
|
+
margin-right: 30px;
|
540
|
+
margin-top: 16px;
|
541
|
+
margin-bottom: 16px;
|
542
|
+
}
|
543
|
+
|
544
|
+
.full-page-alt #mCSB_1_scrollbar_horizontal{
|
545
|
+
position: fixed;
|
546
|
+
margin-bottom: 30px;
|
547
|
+
margin-left: 16px;
|
548
|
+
margin-right: 16px;
|
549
|
+
}
|
550
|
+
|
551
|
+
.full-page-alt .outer.content{ width: 960px; }
|
552
|
+
|
553
|
+
.full-page-alt .horizontal-images.content{
|
554
|
+
height: 275px;
|
555
|
+
width: 100%;
|
556
|
+
margin: 20px auto 10px auto;
|
557
|
+
}
|
558
|
+
|
559
|
+
.full-page-alt .horizontal-images.content img{ height: 200px; }
|
560
|
+
|
561
|
+
.content table{
|
562
|
+
width: 100%;
|
563
|
+
border-collapse: collapse;
|
564
|
+
border-top: 1px dashed #666;
|
565
|
+
border-left: 1px dashed #666;
|
566
|
+
border-right: 1px dashed #666;
|
567
|
+
background: rgba(0,0,0,0.1);
|
568
|
+
}
|
569
|
+
|
570
|
+
.content table tr{ border-bottom: 1px dashed #666; }
|
571
|
+
|
572
|
+
.content table td{ padding: 10px 20px 9px 20px; }
|
573
|
+
|
574
|
+
.sortable{ min-width: 800px; }
|
575
|
+
|
576
|
+
#sortable ul{
|
577
|
+
margin-top: 20px;
|
578
|
+
margin-bottom: 10px;
|
579
|
+
}
|
580
|
+
|
581
|
+
#sortable li{
|
582
|
+
margin: 10px 40px;
|
583
|
+
background: #444;
|
584
|
+
padding: 5px 10px;
|
585
|
+
color: #fff;
|
586
|
+
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
|
587
|
+
}
|
588
|
+
|
589
|
+
#sortable li:active, #sortable .ui-sortable-helper{ background: #eb3755; }
|
590
|
+
|
591
|
+
#examples.tabs, #examples.accordion, #examples.autocomplete{
|
592
|
+
padding: 5px 20px 20px 20px;
|
593
|
+
background-color: #333;
|
594
|
+
}
|
595
|
+
|
596
|
+
#examples.tabs h3, #examples.accordion h3{
|
597
|
+
color: #222;
|
598
|
+
font-family: inherit;
|
599
|
+
font-style: inherit;
|
600
|
+
}
|
601
|
+
|
602
|
+
#tabs{ margin-bottom: 20px; }
|
603
|
+
|
604
|
+
#tabs, #tabs-2, #accordion{
|
605
|
+
width: 600px;
|
606
|
+
max-width:95%;
|
607
|
+
}
|
608
|
+
|
609
|
+
#examples.tabs .ui-widget-content{ background-image: none; }
|
610
|
+
|
611
|
+
#autocomplete{
|
612
|
+
border: none;
|
613
|
+
background: #fff;
|
614
|
+
min-height: 20px;
|
615
|
+
padding: 5px 8px;
|
616
|
+
font-size: inherit;
|
617
|
+
font-family: inherit;
|
618
|
+
color: #222;
|
619
|
+
margin-top: 15px;
|
620
|
+
}
|
621
|
+
|
622
|
+
#autocomplete:focus{ outline: none; }
|
623
|
+
|
624
|
+
.ui-menu a{
|
625
|
+
-webkit-transition: none;
|
626
|
+
-moz-transition: none;
|
627
|
+
-o-transition: none;
|
628
|
+
transition: none;
|
629
|
+
}
|
630
|
+
|
631
|
+
.ui-menu .mCSB_container{ padding: 2px; }
|
632
|
+
|
633
|
+
.ui-menu .mCSB_scrollTools{
|
634
|
+
right: 5px;
|
635
|
+
margin-top: 5px;
|
636
|
+
margin-bottom: 5px;
|
637
|
+
}
|
638
|
+
|
639
|
+
.bootstrap #examples{ background: transparent; }
|
640
|
+
|
641
|
+
.bootstrap #myModal-2 .modal-body{
|
642
|
+
max-height: 340px;
|
643
|
+
-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;
|
644
|
+
margin-bottom: -15px;
|
645
|
+
}
|
646
|
+
|
647
|
+
.bootstrap #myTab{ max-width: 600px; }
|
648
|
+
|
649
|
+
.bootstrap #myTab .tab-pane{ padding: 15px 5px 15px 15px; }
|
650
|
+
|
651
|
+
body.colorbox-demo #cboxContent, body.colorbox-demo #cboxContent p, body.colorbox-demo #cboxContent a:hover{ color: #333; }
|
652
|
+
|
653
|
+
.all-themes #examples{ padding: 15px 0 0 15px; }
|
654
|
+
|
655
|
+
.all-themes .content{
|
656
|
+
width: 310px;
|
657
|
+
height: 500px;
|
658
|
+
margin: 0 20px 20px 0;
|
659
|
+
float: left;
|
660
|
+
}
|
661
|
+
|
662
|
+
.all-themes .content h2, .all-themes .content p, .all-themes .content hr{
|
663
|
+
width: 240px;
|
664
|
+
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
|
665
|
+
}
|
666
|
+
|
667
|
+
.all-themes #content-m h2, .all-themes #content-m p, .all-themes #content-m hr,
|
668
|
+
.all-themes #content-md h2, .all-themes #content-md p, .all-themes #content-md hr{ width: 270px; }
|
669
|
+
|
670
|
+
.all-themes .content.expanded-content h2, .all-themes .content.expanded-content p, .all-themes .content.expanded-content hr,
|
671
|
+
.all-themes #content-m.expanded-content h2, .all-themes #content-m.expanded-content p, .all-themes #content-m.expanded-content hr,
|
672
|
+
.all-themes #content-md.expanded-content h2, .all-themes #content-md.expanded-content p, .all-themes #content-md.expanded-content hr{ width: 540px; }
|
673
|
+
|
674
|
+
.max-height-example .content{
|
675
|
+
height: auto;
|
676
|
+
max-height: 400px;
|
677
|
+
}
|
678
|
+
|
679
|
+
.max-width-example{ min-width: 620px; }
|
680
|
+
|
681
|
+
.max-width-example .content{
|
682
|
+
height: auto;
|
683
|
+
width: auto;
|
684
|
+
max-width: 50%;
|
685
|
+
min-width: 600px;
|
686
|
+
display: inline-block;
|
687
|
+
vertical-align: bottom;
|
688
|
+
}
|
689
|
+
|
690
|
+
.max-width-example .content ul{
|
691
|
+
max-height: 135px;
|
692
|
+
overflow-y: hidden;
|
693
|
+
}
|
694
|
+
|
695
|
+
.max-width-example .content img, .max-width-example .content ul li > a{
|
696
|
+
height: 130px;
|
697
|
+
border: 3px solid #444;
|
698
|
+
}
|
699
|
+
|
700
|
+
.max-width-example .content ul li > a{
|
701
|
+
display: block;
|
702
|
+
padding: 20px;
|
703
|
+
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
|
704
|
+
background: rgba(0,0,0,0.3);
|
705
|
+
}
|
706
|
+
|
707
|
+
.snap-scrolling-example .content{
|
708
|
+
height: auto;
|
709
|
+
width: 853px;
|
710
|
+
}
|
711
|
+
|
712
|
+
.snap-scrolling-example .content img{ height: 160px; }
|
713
|
+
|
714
|
+
.textarea-example .content{ width: 360px; }
|
715
|
+
|
716
|
+
.textarea-example .content form{ margin: 25px 0 15px 0; }
|
717
|
+
|
718
|
+
.textarea-example .content textarea, .textarea-example .textarea-clone{
|
719
|
+
width: 300px;
|
720
|
+
padding: 0 10px;
|
721
|
+
line-height:25px;
|
722
|
+
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
|
723
|
+
}
|
724
|
+
|
725
|
+
.textarea-example .content textarea{
|
726
|
+
height:160px;
|
727
|
+
resize:none;
|
728
|
+
overflow:hidden;
|
729
|
+
outline:none;
|
730
|
+
margin: 0;
|
731
|
+
border:none;
|
732
|
+
background:transparent;
|
733
|
+
box-shadow: none;
|
734
|
+
}
|
735
|
+
|
736
|
+
.textarea-example .content .textarea-wrapper{
|
737
|
+
height:182px;
|
738
|
+
overflow:hidden;
|
739
|
+
background-color: #bbb;
|
740
|
+
background-color: rgba(255,255,255,0.6);
|
741
|
+
-moz-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
|
742
|
+
-webkit-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
|
743
|
+
box-shadow: inset -1px -1px 1px rgba(255,255,255,0.6), inset 3px 3px 20px rgba(0,0,0,0.5);
|
744
|
+
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
|
745
|
+
}
|
746
|
+
|
747
|
+
.textarea-example .textarea-clone{
|
748
|
+
position:absolute;
|
749
|
+
top:-9999px;
|
750
|
+
left:-9999px;
|
751
|
+
visibility:hidden;
|
752
|
+
min-height: 160px;
|
753
|
+
word-wrap: break-word;
|
754
|
+
white-space: pre-wrap;
|
755
|
+
}
|
756
|
+
|
757
|
+
.textarea-example .content .textarea-wrapper .mCSB_scrollTools{ margin: 10px 5px; }
|
758
|
+
|
759
|
+
.scrollTo-demo .content{ height: 290px; }
|
760
|
+
|
761
|
+
.scrollTo-demo .demo-y{ height: 600px; }
|
762
|
+
|
763
|
+
.scrollTo-demo .demo-x{
|
764
|
+
width: 660px;
|
765
|
+
background-color: #252525;
|
766
|
+
}
|
767
|
+
|
768
|
+
.scrollTo-demo .demo-x p{
|
769
|
+
float: left;
|
770
|
+
width: 300px;
|
771
|
+
margin-left: 30px;
|
772
|
+
height: auto;
|
773
|
+
padding: 5px 10px;
|
774
|
+
background-color: #333;
|
775
|
+
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
|
776
|
+
}
|
777
|
+
|
778
|
+
.scrollTo-demo .demo-x hr + p{ margin-left: 0; }
|
779
|
+
|
780
|
+
.scrollTo-demo .demo-yx{ background-color: #424242; }
|
781
|
+
|
782
|
+
.scrollTo-demo .demo-yx p{ width: 1000px; }
|
783
|
+
|
784
|
+
.scrollTo{ font-size: 12px; }
|
785
|
+
|
786
|
+
.scrollTo + .scrollTo{ margin-top: 20px; }
|
787
|
+
|
788
|
+
.scrollTo ul li:first-child span{
|
789
|
+
display: block;
|
790
|
+
padding: 3px 15px;
|
791
|
+
}
|
792
|
+
|
793
|
+
#test-id{
|
794
|
+
background-color: #eb3755;
|
795
|
+
color: #fff;
|
796
|
+
}
|
797
|
+
|
798
|
+
.rtl-demo #content-1{ width: 500px; }
|
799
|
+
|
800
|
+
.rtl-demo #content-1 p{ width: 1000px; }
|
801
|
+
|
802
|
+
.transitions #examples{
|
803
|
+
-webkit-perspective: 1000;
|
804
|
+
-moz-perspective: 1000;
|
805
|
+
}
|
806
|
+
|
807
|
+
.transitions .content{
|
808
|
+
-webkit-transition: all .6s ease-out;
|
809
|
+
-moz-transition: all .6s ease-out;
|
810
|
+
-o-transition: all .6s ease-out;
|
811
|
+
transition: all .6s ease-out;
|
812
|
+
}
|
813
|
+
|
814
|
+
footer{
|
815
|
+
margin-top: 40px;
|
816
|
+
margin-bottom: 40px;
|
817
|
+
color: #bbb;
|
818
|
+
font-size: 12px;
|
819
|
+
}
|
820
|
+
|
821
|
+
footer a{ margin-right: 20px; }
|
822
|
+
|
823
|
+
@media only screen and (min-width: 1229px){
|
824
|
+
.showcase .horizontal-images.content{ width: 1060px; }
|
825
|
+
}
|
826
|
+
|
827
|
+
@media only screen and (min-width: 1629px){
|
828
|
+
.showcase .horizontal-images.content{ width: 700px; }
|
829
|
+
}
|