23 | This is matz's mruby interpreter running in your browser.
24 |
25 |
26 | mruby is written in C and normally compiles to x86 or ARM byte code. Here its been compiled to JavaScript, using llvm and emscripten. The JavaScript produced is compatible with asm.js, which helps your browser's JavaScript VM run the code more efficiently.
27 |
').modal({options});
24 | * @example $('#myDiv').modal({options});
25 | * @example jQueryObject.modal({options});
26 | *
27 | * 2) As a stand-alone function, like $.modal(data). The data parameter
28 | * is required and an optional options object can be passed as a second
29 | * parameter. This method provides more flexibility in the types of data
30 | * that are allowed. The data could be a DOM object, a jQuery object, HTML
31 | * or a string.
32 | *
33 | * @example $.modal('
my data
', {options});
34 | * @example $.modal('my data', {options});
35 | * @example $.modal($('#myDiv'), {options});
36 | * @example $.modal(jQueryObject, {options});
37 | * @example $.modal(document.getElementById('myDiv'), {options});
38 | *
39 | * A SimpleModal call can contain multiple elements, but only one modal
40 | * dialog can be created at a time. Which means that all of the matched
41 | * elements will be displayed within the modal container.
42 | *
43 | * SimpleModal internally sets the CSS needed to display the modal dialog
44 | * properly in all browsers, yet provides the developer with the flexibility
45 | * to easily control the look and feel. The styling for SimpleModal can be
46 | * done through external stylesheets, or through SimpleModal, using the
47 | * overlayCss, containerCss, and dataCss options.
48 | *
49 | * SimpleModal has been tested in the following browsers:
50 | * - IE 6+
51 | * - Firefox 2+
52 | * - Opera 9+
53 | * - Safari 3+
54 | * - Chrome 1+
55 | *
56 | * @name SimpleModal
57 | * @type jQuery
58 | * @requires jQuery v1.3
59 | * @cat Plugins/Windows and Overlays
60 | * @author Eric Martin (http://ericmmartin.com)
61 | * @version 1.4.4
62 | */
63 |
64 | ;(function (factory) {
65 | if (typeof define === 'function' && define.amd) {
66 | // AMD. Register as an anonymous module.
67 | define(['jquery'], factory);
68 | } else {
69 | // Browser globals
70 | factory(jQuery);
71 | }
72 | }
73 | (function ($) {
74 | var d = [],
75 | doc = $(document),
76 | ua = navigator.userAgent.toLowerCase(),
77 | wndw = $(window),
78 | w = [];
79 |
80 | var browser = {
81 | ieQuirks: null,
82 | msie: /msie/.test(ua) && !/opera/.test(ua),
83 | opera: /opera/.test(ua)
84 | };
85 | browser.ie6 = browser.msie && /msie 6./.test(ua) && typeof window['XMLHttpRequest'] !== 'object';
86 | browser.ie7 = browser.msie && /msie 7.0/.test(ua);
87 |
88 | /*
89 | * Create and display a modal dialog.
90 | *
91 | * @param {string, object} data A string, jQuery object or DOM object
92 | * @param {object} [options] An optional object containing options overrides
93 | */
94 | $.modal = function (data, options) {
95 | return $.modal.impl.init(data, options);
96 | };
97 |
98 | /*
99 | * Close the modal dialog.
100 | */
101 | $.modal.close = function () {
102 | $.modal.impl.close();
103 | };
104 |
105 | /*
106 | * Set focus on first or last visible input in the modal dialog. To focus on the last
107 | * element, call $.modal.focus('last'). If no input elements are found, focus is placed
108 | * on the data wrapper element.
109 | */
110 | $.modal.focus = function (pos) {
111 | $.modal.impl.focus(pos);
112 | };
113 |
114 | /*
115 | * Determine and set the dimensions of the modal dialog container.
116 | * setPosition() is called if the autoPosition option is true.
117 | */
118 | $.modal.setContainerDimensions = function () {
119 | $.modal.impl.setContainerDimensions();
120 | };
121 |
122 | /*
123 | * Re-position the modal dialog.
124 | */
125 | $.modal.setPosition = function () {
126 | $.modal.impl.setPosition();
127 | };
128 |
129 | /*
130 | * Update the modal dialog. If new dimensions are passed, they will be used to determine
131 | * the dimensions of the container.
132 | *
133 | * setContainerDimensions() is called, which in turn calls setPosition(), if enabled.
134 | * Lastly, focus() is called is the focus option is true.
135 | */
136 | $.modal.update = function (height, width) {
137 | $.modal.impl.update(height, width);
138 | };
139 |
140 | /*
141 | * Chained function to create a modal dialog.
142 | *
143 | * @param {object} [options] An optional object containing options overrides
144 | */
145 | $.fn.modal = function (options) {
146 | return $.modal.impl.init(this, options);
147 | };
148 |
149 | /*
150 | * SimpleModal default options
151 | *
152 | * appendTo: (String:'body') The jQuery selector to append the elements to. For .NET, use 'form'.
153 | * focus: (Boolean:true) Focus in the first visible, enabled element?
154 | * opacity: (Number:50) The opacity value for the overlay div, from 0 - 100
155 | * overlayId: (String:'simplemodal-overlay') The DOM element id for the overlay div
156 | * overlayCss: (Object:{}) The CSS styling for the overlay div
157 | * containerId: (String:'simplemodal-container') The DOM element id for the container div
158 | * containerCss: (Object:{}) The CSS styling for the container div
159 | * dataId: (String:'simplemodal-data') The DOM element id for the data div
160 | * dataCss: (Object:{}) The CSS styling for the data div
161 | * minHeight: (Number:null) The minimum height for the container
162 | * minWidth: (Number:null) The minimum width for the container
163 | * maxHeight: (Number:null) The maximum height for the container. If not specified, the window height is used.
164 | * maxWidth: (Number:null) The maximum width for the container. If not specified, the window width is used.
165 | * autoResize: (Boolean:false) Automatically resize the container if it exceeds the browser window dimensions?
166 | * autoPosition: (Boolean:true) Automatically position the container upon creation and on window resize?
167 | * zIndex: (Number: 1000) Starting z-index value
168 | * close: (Boolean:true) If true, closeHTML, escClose and overClose will be used if set.
169 | If false, none of them will be used.
170 | * closeHTML: (String:'') The HTML for the default close link.
171 | SimpleModal will automatically add the closeClass to this element.
172 | * closeClass: (String:'simplemodal-close') The CSS class used to bind to the close event
173 | * escClose: (Boolean:true) Allow Esc keypress to close the dialog?
174 | * overlayClose: (Boolean:false) Allow click on overlay to close the dialog?
175 | * fixed: (Boolean:true) If true, the container will use a fixed position. If false, it will use a
176 | absolute position (the dialog will scroll with the page)
177 | * position: (Array:null) Position of container [top, left]. Can be number of pixels or percentage
178 | * persist: (Boolean:false) Persist the data across modal calls? Only used for existing
179 | DOM elements. If true, the data will be maintained across modal calls, if false,
180 | the data will be reverted to its original state.
181 | * modal: (Boolean:true) User will be unable to interact with the page below the modal or tab away from the dialog.
182 | If false, the overlay, iframe, and certain events will be disabled allowing the user to interact
183 | with the page below the dialog.
184 | * onOpen: (Function:null) The callback function used in place of SimpleModal's open
185 | * onShow: (Function:null) The callback function used after the modal dialog has opened
186 | * onClose: (Function:null) The callback function used in place of SimpleModal's close
187 | */
188 | $.modal.defaults = {
189 | appendTo: 'body',
190 | focus: true,
191 | opacity: 50,
192 | overlayId: 'simplemodal-overlay',
193 | overlayCss: {},
194 | containerId: 'simplemodal-container',
195 | containerCss: {},
196 | dataId: 'simplemodal-data',
197 | dataCss: {},
198 | minHeight: null,
199 | minWidth: null,
200 | maxHeight: null,
201 | maxWidth: null,
202 | autoResize: false,
203 | autoPosition: true,
204 | zIndex: 1000,
205 | close: true,
206 | closeHTML: '',
207 | closeClass: 'simplemodal-close',
208 | escClose: true,
209 | overlayClose: false,
210 | fixed: true,
211 | position: null,
212 | persist: false,
213 | modal: true,
214 | onOpen: null,
215 | onShow: null,
216 | onClose: null
217 | };
218 |
219 | /*
220 | * Main modal object
221 | * o = options
222 | */
223 | $.modal.impl = {
224 | /*
225 | * Contains the modal dialog elements and is the object passed
226 | * back to the callback (onOpen, onShow, onClose) functions
227 | */
228 | d: {},
229 | /*
230 | * Initialize the modal dialog
231 | */
232 | init: function (data, options) {
233 | var s = this;
234 |
235 | // don't allow multiple calls
236 | if (s.d.data) {
237 | return false;
238 | }
239 |
240 | // $.support.boxModel is undefined if checked earlier
241 | browser.ieQuirks = browser.msie && !$.support.boxModel;
242 |
243 | // merge defaults and user options
244 | s.o = $.extend({}, $.modal.defaults, options);
245 |
246 | // keep track of z-index
247 | s.zIndex = s.o.zIndex;
248 |
249 | // set the onClose callback flag
250 | s.occb = false;
251 |
252 | // determine how to handle the data based on its type
253 | if (typeof data === 'object') {
254 | // convert DOM object to a jQuery object
255 | data = data instanceof $ ? data : $(data);
256 | s.d.placeholder = false;
257 |
258 | // if the object came from the DOM, keep track of its parent
259 | if (data.parent().parent().size() > 0) {
260 | data.before($('')
261 | .attr('id', 'simplemodal-placeholder')
262 | .css({display: 'none'}));
263 |
264 | s.d.placeholder = true;
265 | s.display = data.css('display');
266 |
267 | // persist changes? if not, make a clone of the element
268 | if (!s.o.persist) {
269 | s.d.orig = data.clone(true);
270 | }
271 | }
272 | }
273 | else if (typeof data === 'string' || typeof data === 'number') {
274 | // just insert the data as innerHTML
275 | data = $('').html(data);
276 | }
277 | else {
278 | // unsupported data type!
279 | alert('SimpleModal Error: Unsupported data type: ' + typeof data);
280 | return s;
281 | }
282 |
283 | // create the modal overlay, container and, if necessary, iframe
284 | s.create(data);
285 | data = null;
286 |
287 | // display the modal dialog
288 | s.open();
289 |
290 | // useful for adding events/manipulating data in the modal dialog
291 | if ($.isFunction(s.o.onShow)) {
292 | s.o.onShow.apply(s, [s.d]);
293 | }
294 |
295 | // don't break the chain =)
296 | return s;
297 | },
298 | /*
299 | * Create and add the modal overlay and container to the page
300 | */
301 | create: function (data) {
302 | var s = this;
303 |
304 | // get the window properties
305 | s.getDimensions();
306 |
307 | // add an iframe to prevent select options from bleeding through
308 | if (s.o.modal && browser.ie6) {
309 | s.d.iframe = $('')
310 | .css($.extend(s.o.iframeCss, {
311 | display: 'none',
312 | opacity: 0,
313 | position: 'fixed',
314 | height: w[0],
315 | width: w[1],
316 | zIndex: s.o.zIndex,
317 | top: 0,
318 | left: 0
319 | }))
320 | .appendTo(s.o.appendTo);
321 | }
322 |
323 | // create the overlay
324 | s.d.overlay = $('')
325 | .attr('id', s.o.overlayId)
326 | .addClass('simplemodal-overlay')
327 | .css($.extend(s.o.overlayCss, {
328 | display: 'none',
329 | opacity: s.o.opacity / 100,
330 | height: s.o.modal ? d[0] : 0,
331 | width: s.o.modal ? d[1] : 0,
332 | position: 'fixed',
333 | left: 0,
334 | top: 0,
335 | zIndex: s.o.zIndex + 1
336 | }))
337 | .appendTo(s.o.appendTo);
338 |
339 | // create the container
340 | s.d.container = $('')
341 | .attr('id', s.o.containerId)
342 | .addClass('simplemodal-container')
343 | .css($.extend(
344 | {position: s.o.fixed ? 'fixed' : 'absolute'},
345 | s.o.containerCss,
346 | {display: 'none', zIndex: s.o.zIndex + 2}
347 | ))
348 | .append(s.o.close && s.o.closeHTML
349 | ? $(s.o.closeHTML).addClass(s.o.closeClass)
350 | : '')
351 | .appendTo(s.o.appendTo);
352 |
353 | s.d.wrap = $('')
354 | .attr('tabIndex', -1)
355 | .addClass('simplemodal-wrap')
356 | .css({height: '100%', outline: 0, width: '100%'})
357 | .appendTo(s.d.container);
358 |
359 | // add styling and attributes to the data
360 | // append to body to get correct dimensions, then move to wrap
361 | s.d.data = data
362 | .attr('id', data.attr('id') || s.o.dataId)
363 | .addClass('simplemodal-data')
364 | .css($.extend(s.o.dataCss, {
365 | display: 'none'
366 | }))
367 | .appendTo('body');
368 | data = null;
369 |
370 | s.setContainerDimensions();
371 | s.d.data.appendTo(s.d.wrap);
372 |
373 | // fix issues with IE
374 | if (browser.ie6 || browser.ieQuirks) {
375 | s.fixIE();
376 | }
377 | },
378 | /*
379 | * Bind events
380 | */
381 | bindEvents: function () {
382 | var s = this;
383 |
384 | // bind the close event to any element with the closeClass class
385 | $('.' + s.o.closeClass).bind('click.simplemodal', function (e) {
386 | e.preventDefault();
387 | s.close();
388 | });
389 |
390 | // bind the overlay click to the close function, if enabled
391 | if (s.o.modal && s.o.close && s.o.overlayClose) {
392 | s.d.overlay.bind('click.simplemodal', function (e) {
393 | e.preventDefault();
394 | s.close();
395 | });
396 | }
397 |
398 | // bind keydown events
399 | doc.bind('keydown.simplemodal', function (e) {
400 | if (s.o.modal && e.keyCode === 9) { // TAB
401 | s.watchTab(e);
402 | }
403 | else if ((s.o.close && s.o.escClose) && e.keyCode === 27) { // ESC
404 | e.preventDefault();
405 | s.close();
406 | }
407 | });
408 |
409 | // update window size
410 | wndw.bind('resize.simplemodal orientationchange.simplemodal', function () {
411 | // redetermine the window width/height
412 | s.getDimensions();
413 |
414 | // reposition the dialog
415 | s.o.autoResize ? s.setContainerDimensions() : s.o.autoPosition && s.setPosition();
416 |
417 | if (browser.ie6 || browser.ieQuirks) {
418 | s.fixIE();
419 | }
420 | else if (s.o.modal) {
421 | // update the iframe & overlay
422 | s.d.iframe && s.d.iframe.css({height: w[0], width: w[1]});
423 | s.d.overlay.css({height: d[0], width: d[1]});
424 | }
425 | });
426 | },
427 | /*
428 | * Unbind events
429 | */
430 | unbindEvents: function () {
431 | $('.' + this.o.closeClass).unbind('click.simplemodal');
432 | doc.unbind('keydown.simplemodal');
433 | wndw.unbind('.simplemodal');
434 | this.d.overlay.unbind('click.simplemodal');
435 | },
436 | /*
437 | * Fix issues in IE6 and IE7 in quirks mode
438 | */
439 | fixIE: function () {
440 | var s = this, p = s.o.position;
441 |
442 | // simulate fixed position - adapted from BlockUI
443 | $.each([s.d.iframe || null, !s.o.modal ? null : s.d.overlay, s.d.container.css('position') === 'fixed' ? s.d.container : null], function (i, el) {
444 | if (el) {
445 | var bch = 'document.body.clientHeight', bcw = 'document.body.clientWidth',
446 | bsh = 'document.body.scrollHeight', bsl = 'document.body.scrollLeft',
447 | bst = 'document.body.scrollTop', bsw = 'document.body.scrollWidth',
448 | ch = 'document.documentElement.clientHeight', cw = 'document.documentElement.clientWidth',
449 | sl = 'document.documentElement.scrollLeft', st = 'document.documentElement.scrollTop',
450 | s = el[0].style;
451 |
452 | s.position = 'absolute';
453 | if (i < 2) {
454 | s.removeExpression('height');
455 | s.removeExpression('width');
456 | s.setExpression('height','' + bsh + ' > ' + bch + ' ? ' + bsh + ' : ' + bch + ' + "px"');
457 | s.setExpression('width','' + bsw + ' > ' + bcw + ' ? ' + bsw + ' : ' + bcw + ' + "px"');
458 | }
459 | else {
460 | var te, le;
461 | if (p && p.constructor === Array) {
462 | var top = p[0]
463 | ? typeof p[0] === 'number' ? p[0].toString() : p[0].replace(/px/, '')
464 | : el.css('top').replace(/px/, '');
465 | te = top.indexOf('%') === -1
466 | ? top + ' + (t = ' + st + ' ? ' + st + ' : ' + bst + ') + "px"'
467 | : parseInt(top.replace(/%/, '')) + ' * ((' + ch + ' || ' + bch + ') / 100) + (t = ' + st + ' ? ' + st + ' : ' + bst + ') + "px"';
468 |
469 | if (p[1]) {
470 | var left = typeof p[1] === 'number' ? p[1].toString() : p[1].replace(/px/, '');
471 | le = left.indexOf('%') === -1
472 | ? left + ' + (t = ' + sl + ' ? ' + sl + ' : ' + bsl + ') + "px"'
473 | : parseInt(left.replace(/%/, '')) + ' * ((' + cw + ' || ' + bcw + ') / 100) + (t = ' + sl + ' ? ' + sl + ' : ' + bsl + ') + "px"';
474 | }
475 | }
476 | else {
477 | te = '(' + ch + ' || ' + bch + ') / 2 - (this.offsetHeight / 2) + (t = ' + st + ' ? ' + st + ' : ' + bst + ') + "px"';
478 | le = '(' + cw + ' || ' + bcw + ') / 2 - (this.offsetWidth / 2) + (t = ' + sl + ' ? ' + sl + ' : ' + bsl + ') + "px"';
479 | }
480 | s.removeExpression('top');
481 | s.removeExpression('left');
482 | s.setExpression('top', te);
483 | s.setExpression('left', le);
484 | }
485 | }
486 | });
487 | },
488 | /*
489 | * Place focus on the first or last visible input
490 | */
491 | focus: function (pos) {
492 | var s = this, p = pos && $.inArray(pos, ['first', 'last']) !== -1 ? pos : 'first';
493 |
494 | // focus on dialog or the first visible/enabled input element
495 | var input = $(':input:enabled:visible:' + p, s.d.wrap);
496 | setTimeout(function () {
497 | input.length > 0 ? input.focus() : s.d.wrap.focus();
498 | }, 10);
499 | },
500 | getDimensions: function () {
501 | // fix a jQuery bug with determining the window height - use innerHeight if available
502 | var s = this,
503 | h = typeof window.innerHeight === 'undefined' ? wndw.height() : window.innerHeight;
504 |
505 | d = [doc.height(), doc.width()];
506 | w = [h, wndw.width()];
507 | },
508 | getVal: function (v, d) {
509 | return v ? (typeof v === 'number' ? v
510 | : v === 'auto' ? 0
511 | : v.indexOf('%') > 0 ? ((parseInt(v.replace(/%/, '')) / 100) * (d === 'h' ? w[0] : w[1]))
512 | : parseInt(v.replace(/px/, '')))
513 | : null;
514 | },
515 | /*
516 | * Update the container. Set new dimensions, if provided.
517 | * Focus, if enabled. Re-bind events.
518 | */
519 | update: function (height, width) {
520 | var s = this;
521 |
522 | // prevent update if dialog does not exist
523 | if (!s.d.data) {
524 | return false;
525 | }
526 |
527 | // reset orig values
528 | s.d.origHeight = s.getVal(height, 'h');
529 | s.d.origWidth = s.getVal(width, 'w');
530 |
531 | // hide data to prevent screen flicker
532 | s.d.data.hide();
533 | height && s.d.container.css('height', height);
534 | width && s.d.container.css('width', width);
535 | s.setContainerDimensions();
536 | s.d.data.show();
537 | s.o.focus && s.focus();
538 |
539 | // rebind events
540 | s.unbindEvents();
541 | s.bindEvents();
542 | },
543 | setContainerDimensions: function () {
544 | var s = this,
545 | badIE = browser.ie6 || browser.ie7;
546 |
547 | // get the dimensions for the container and data
548 | var ch = s.d.origHeight ? s.d.origHeight : browser.opera ? s.d.container.height() : s.getVal(badIE ? s.d.container[0].currentStyle['height'] : s.d.container.css('height'), 'h'),
549 | cw = s.d.origWidth ? s.d.origWidth : browser.opera ? s.d.container.width() : s.getVal(badIE ? s.d.container[0].currentStyle['width'] : s.d.container.css('width'), 'w'),
550 | dh = s.d.data.outerHeight(true), dw = s.d.data.outerWidth(true);
551 |
552 | s.d.origHeight = s.d.origHeight || ch;
553 | s.d.origWidth = s.d.origWidth || cw;
554 |
555 | // mxoh = max option height, mxow = max option width
556 | var mxoh = s.o.maxHeight ? s.getVal(s.o.maxHeight, 'h') : null,
557 | mxow = s.o.maxWidth ? s.getVal(s.o.maxWidth, 'w') : null,
558 | mh = mxoh && mxoh < w[0] ? mxoh : w[0],
559 | mw = mxow && mxow < w[1] ? mxow : w[1];
560 |
561 | // moh = min option height
562 | var moh = s.o.minHeight ? s.getVal(s.o.minHeight, 'h') : 'auto';
563 | if (!ch) {
564 | if (!dh) {ch = moh;}
565 | else {
566 | if (dh > mh) {ch = mh;}
567 | else if (s.o.minHeight && moh !== 'auto' && dh < moh) {ch = moh;}
568 | else {ch = dh;}
569 | }
570 | }
571 | else {
572 | ch = s.o.autoResize && ch > mh ? mh : ch < moh ? moh : ch;
573 | }
574 |
575 | // mow = min option width
576 | var mow = s.o.minWidth ? s.getVal(s.o.minWidth, 'w') : 'auto';
577 | if (!cw) {
578 | if (!dw) {cw = mow;}
579 | else {
580 | if (dw > mw) {cw = mw;}
581 | else if (s.o.minWidth && mow !== 'auto' && dw < mow) {cw = mow;}
582 | else {cw = dw;}
583 | }
584 | }
585 | else {
586 | cw = s.o.autoResize && cw > mw ? mw : cw < mow ? mow : cw;
587 | }
588 |
589 | s.d.container.css({height: ch, width: cw});
590 | s.d.wrap.css({overflow: (dh > ch || dw > cw) ? 'auto' : 'visible'});
591 | s.o.autoPosition && s.setPosition();
592 | },
593 | setPosition: function () {
594 | var s = this, top, left,
595 | hc = (w[0]/2) - (s.d.container.outerHeight(true)/2),
596 | vc = (w[1]/2) - (s.d.container.outerWidth(true)/2),
597 | st = s.d.container.css('position') !== 'fixed' ? wndw.scrollTop() : 0;
598 |
599 | if (s.o.position && Object.prototype.toString.call(s.o.position) === '[object Array]') {
600 | top = st + (s.o.position[0] || hc);
601 | left = s.o.position[1] || vc;
602 | } else {
603 | top = st + hc;
604 | left = vc;
605 | }
606 | s.d.container.css({left: left, top: top});
607 | },
608 | watchTab: function (e) {
609 | var s = this;
610 |
611 | if ($(e.target).parents('.simplemodal-container').length > 0) {
612 | // save the list of inputs
613 | s.inputs = $(':input:enabled:visible:first, :input:enabled:visible:last', s.d.data[0]);
614 |
615 | // if it's the first or last tabbable element, refocus
616 | if ((!e.shiftKey && e.target === s.inputs[s.inputs.length -1]) ||
617 | (e.shiftKey && e.target === s.inputs[0]) ||
618 | s.inputs.length === 0) {
619 | e.preventDefault();
620 | var pos = e.shiftKey ? 'last' : 'first';
621 | s.focus(pos);
622 | }
623 | }
624 | else {
625 | // might be necessary when custom onShow callback is used
626 | e.preventDefault();
627 | s.focus();
628 | }
629 | },
630 | /*
631 | * Open the modal dialog elements
632 | * - Note: If you use the onOpen callback, you must "show" the
633 | * overlay and container elements manually
634 | * (the iframe will be handled by SimpleModal)
635 | */
636 | open: function () {
637 | var s = this;
638 | // display the iframe
639 | s.d.iframe && s.d.iframe.show();
640 |
641 | if ($.isFunction(s.o.onOpen)) {
642 | // execute the onOpen callback
643 | s.o.onOpen.apply(s, [s.d]);
644 | }
645 | else {
646 | // display the remaining elements
647 | s.d.overlay.show();
648 | s.d.container.show();
649 | s.d.data.show();
650 | }
651 |
652 | s.o.focus && s.focus();
653 |
654 | // bind default events
655 | s.bindEvents();
656 | },
657 | /*
658 | * Close the modal dialog
659 | * - Note: If you use an onClose callback, you must remove the
660 | * overlay, container and iframe elements manually
661 | *
662 | * @param {boolean} external Indicates whether the call to this
663 | * function was internal or external. If it was external, the
664 | * onClose callback will be ignored
665 | */
666 | close: function () {
667 | var s = this;
668 |
669 | // prevent close when dialog does not exist
670 | if (!s.d.data) {
671 | return false;
672 | }
673 |
674 | // remove the default events
675 | s.unbindEvents();
676 |
677 | if ($.isFunction(s.o.onClose) && !s.occb) {
678 | // set the onClose callback flag
679 | s.occb = true;
680 |
681 | // execute the onClose callback
682 | s.o.onClose.apply(s, [s.d]);
683 | }
684 | else {
685 | // if the data came from the DOM, put it back
686 | if (s.d.placeholder) {
687 | var ph = $('#simplemodal-placeholder');
688 | // save changes to the data?
689 | if (s.o.persist) {
690 | // insert the (possibly) modified data back into the DOM
691 | ph.replaceWith(s.d.data.removeClass('simplemodal-data').css('display', s.display));
692 | }
693 | else {
694 | // remove the current and insert the original,
695 | // unmodified data back into the DOM
696 | s.d.data.hide().remove();
697 | ph.replaceWith(s.d.orig);
698 | }
699 | }
700 | else {
701 | // otherwise, remove it
702 | s.d.data.hide().remove();
703 | }
704 |
705 | // remove the remaining elements
706 | s.d.container.hide().remove();
707 | s.d.overlay.hide();
708 | s.d.iframe && s.d.iframe.hide().remove();
709 | s.d.overlay.remove();
710 |
711 | // reset the dialog object
712 | s.d = {};
713 | }
714 | }
715 | };
716 | }));
717 |
--------------------------------------------------------------------------------
/sass/bourbon/_bourbon-deprecated-upcoming.sass:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // These mixins/functions are deprecated
3 | // They will be removed in the next MAJOR version release
4 | //************************************************************************//
5 | =box-shadow($shadows...)
6 | +prefixer(box-shadow, $shadows, spec)
7 | @warn "box-shadow is deprecated and will be removed in the next major version release"
8 |
--------------------------------------------------------------------------------
/sass/bourbon/addons/_button.sass:
--------------------------------------------------------------------------------
1 | =button($style: simple, $base-color: #4294f0)
2 | @if type-of($style) == color
3 | $base-color: $style
4 | $style: simple
5 | // Grayscale button
6 | @if $base-color == grayscale($base-color)
7 | @if $style == simple
8 | +simple($base-color, $grayscale: true)
9 | @else if $style == shiny
10 | +shiny($base-color, $grayscale: true)
11 | @else if $style == pill
12 | +pill($base-color, $grayscale: true)
13 | @else
14 | @if $style == simple
15 | +simple($base-color)
16 | @else if $style == shiny
17 | +shiny($base-color)
18 | @else if $style == pill
19 | +pill($base-color)
20 | &:disabled
21 | opacity: 0.5
22 | cursor: not-allowed
23 |
24 | // Simple Button
25 | //************************************************************************//
26 | =simple($base-color, $grayscale: false)
27 | $color: hsl(0, 0, 100%)
28 | $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%)
29 | $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%)
30 | $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%)
31 | $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%)
32 | @if lightness($base-color) > 70%
33 | $color: hsl(0, 0, 20%)
34 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%)
35 | @if $grayscale == true
36 | $border: grayscale($border)
37 | $inset-shadow: grayscale($inset-shadow)
38 | $stop-gradient: grayscale($stop-gradient)
39 | $text-shadow: grayscale($text-shadow)
40 | border: 1px solid $border
41 | border-radius: 3px
42 | box-shadow: inset 0 1px 0 0 $inset-shadow
43 | color: $color
44 | display: inline-block
45 | font-size: 11px
46 | font-weight: bold
47 | +linear-gradient($base-color, $stop-gradient)
48 | padding: 7px 18px
49 | text-decoration: none
50 | text-shadow: 0 1px 0 $text-shadow
51 | -webkit-background-clip: padding-box
52 | &:hover:not(:disabled)
53 | $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%)
54 | $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%)
55 | $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%)
56 | @if $grayscale == true
57 | $base-color-hover: grayscale($base-color-hover)
58 | $inset-shadow-hover: grayscale($inset-shadow-hover)
59 | $stop-gradient-hover: grayscale($stop-gradient-hover)
60 | box-shadow: inset 0 1px 0 0 $inset-shadow-hover
61 | cursor: pointer
62 | +linear-gradient($base-color-hover, $stop-gradient-hover)
63 | &:active:not(:disabled)
64 | $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%)
65 | $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%)
66 | @if $grayscale == true
67 | $border-active: grayscale($border-active)
68 | $inset-shadow-active: grayscale($inset-shadow-active)
69 | border: 1px solid $border-active
70 | box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eeeeee
71 |
72 | // Shiny Button
73 | //************************************************************************//
74 | =shiny($base-color, $grayscale: false)
75 | $color: hsl(0, 0, 100%)
76 | $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81)
77 | $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122)
78 | $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46)
79 | $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12)
80 | $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33)
81 | $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114)
82 | $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48)
83 | @if lightness($base-color) > 70%
84 | $color: hsl(0, 0, 20%)
85 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%)
86 | @if $grayscale == true
87 | $border: grayscale($border)
88 | $border-bottom: grayscale($border-bottom)
89 | $fourth-stop: grayscale($fourth-stop)
90 | $inset-shadow: grayscale($inset-shadow)
91 | $second-stop: grayscale($second-stop)
92 | $text-shadow: grayscale($text-shadow)
93 | $third-stop: grayscale($third-stop)
94 | border: 1px solid $border
95 | border-bottom: 1px solid $border-bottom
96 | border-radius: 5px
97 | box-shadow: inset 0 1px 0 0 $inset-shadow
98 | color: $color
99 | display: inline-block
100 | font-size: 14px
101 | font-weight: bold
102 | +linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%)
103 | padding: 8px 20px
104 | text-align: center
105 | text-decoration: none
106 | text-shadow: 0 -1px 1px $text-shadow
107 | &:hover:not(:disabled)
108 | $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18)
109 | $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51)
110 | $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66)
111 | $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63)
112 | @if $grayscale == true
113 | $first-stop-hover: grayscale($first-stop-hover)
114 | $second-stop-hover: grayscale($second-stop-hover)
115 | $third-stop-hover: grayscale($third-stop-hover)
116 | $fourth-stop-hover: grayscale($fourth-stop-hover)
117 | cursor: pointer
118 | +linear-gradient(top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%)
119 | &:active:not(:disabled)
120 | $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122)
121 | @if $grayscale == true
122 | $inset-shadow-active: grayscale($inset-shadow-active)
123 | box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 white
124 |
125 | // Pill Button
126 | //************************************************************************//
127 | =pill($base-color, $grayscale: false)
128 | $color: hsl(0, 0, 100%)
129 | $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%)
130 | $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%)
131 | $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%)
132 | $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%)
133 | $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%)
134 | $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%)
135 | @if lightness($base-color) > 70%
136 | $color: hsl(0, 0, 20%)
137 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%)
138 | @if $grayscale == true
139 | $border-bottom: grayscale($border-bottom)
140 | $border-sides: grayscale($border-sides)
141 | $border-top: grayscale($border-top)
142 | $inset-shadow: grayscale($inset-shadow)
143 | $stop-gradient: grayscale($stop-gradient)
144 | $text-shadow: grayscale($text-shadow)
145 | border: 1px solid $border-top
146 | border-color: $border-top $border-sides $border-bottom
147 | border-radius: 16px
148 | box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3
149 | color: $color
150 | display: inline-block
151 | font-size: 11px
152 | font-weight: normal
153 | line-height: 1
154 | +linear-gradient($base-color, $stop-gradient)
155 | padding: 5px 16px
156 | text-align: center
157 | text-decoration: none
158 | text-shadow: 0 -1px 1px $text-shadow
159 | -webkit-background-clip: padding-box
160 | &:hover:not(:disabled)
161 | $base-color-hover: adjust-color($base-color, $lightness: -4.5%)
162 | $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%)
163 | $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%)
164 | $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%)
165 | $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%)
166 | $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%)
167 | $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%)
168 | @if $grayscale == true
169 | $base-color-hover: grayscale($base-color-hover)
170 | $border-bottom: grayscale($border-bottom)
171 | $border-sides: grayscale($border-sides)
172 | $border-top: grayscale($border-top)
173 | $inset-shadow-hover: grayscale($inset-shadow-hover)
174 | $stop-gradient-hover: grayscale($stop-gradient-hover)
175 | $text-shadow-hover: grayscale($text-shadow-hover)
176 | border: 1px solid $border-top
177 | border-color: $border-top $border-sides $border-bottom
178 | box-shadow: inset 0 1px 0 0 $inset-shadow-hover
179 | cursor: pointer
180 | +linear-gradient($base-color-hover, $stop-gradient-hover)
181 | text-shadow: 0 -1px 1px $text-shadow-hover
182 | -webkit-background-clip: padding-box
183 | &:active:not(:disabled)
184 | $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%)
185 | $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%)
186 | $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%)
187 | $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%)
188 | $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%)
189 | @if $grayscale == true
190 | $active-color: grayscale($active-color)
191 | $border-active: grayscale($border-active)
192 | $border-bottom-active: grayscale($border-bottom-active)
193 | $inset-shadow-active: grayscale($inset-shadow-active)
194 | $text-shadow-active: grayscale($text-shadow-active)
195 | background: $active-color
196 | border: 1px solid $border-active
197 | border-bottom: 1px solid $border-bottom-active
198 | box-shadow: inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 white
199 | text-shadow: 0 -1px 1px $text-shadow-active
200 |
--------------------------------------------------------------------------------
/sass/bourbon/addons/_clearfix.sass:
--------------------------------------------------------------------------------
1 | // Micro clearfix provides an easy way to contain floats without adding additional markup
2 | //
3 | // Example usage:
4 | //
5 | // // Contain all floats within .wrapper
6 | // .wrapper {
7 | // @include clearfix;
8 | // .content,
9 | // .sidebar {
10 | // float : left;
11 | // }
12 | // }
13 |
14 | =clearfix
15 | *zoom: 1
16 | &:before,
17 | &:after
18 | content: " "
19 | display: table
20 | &:after
21 | clear: both
22 |
23 | // Acknowledgements
24 | // Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/)
25 |
--------------------------------------------------------------------------------
/sass/bourbon/addons/_font-family.sass:
--------------------------------------------------------------------------------
1 | $georgia: Georgia, Cambria, "Times New Roman", Times, serif
2 | $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif
3 | $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif
4 | $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace
5 | $verdana: Verdana, Geneva, sans-serif
6 |
--------------------------------------------------------------------------------
/sass/bourbon/addons/_hide-text.sass:
--------------------------------------------------------------------------------
1 | =hide-text
2 | color: transparent
3 | font: 0/0 a
4 | text-shadow: none
5 |
6 | // A CSS image replacement method that does not require the use of text-indent.
7 | //
8 | // Examples
9 | //
10 | // .ir {
11 | // @include hide-text;
12 | // }
13 |
--------------------------------------------------------------------------------
/sass/bourbon/addons/_html5-input-types.sass:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Generate a variable ($all-text-inputs) with a list of all html5
3 | // input types that have a text-based input, excluding textarea.
4 | // http://diveintohtml5.org/forms.html
5 | //************************************************************************//
6 |
7 | $inputs-list: 'input[type="email"]', 'input[type="number"]', 'input[type="password"]', 'input[type="search"]', 'input[type="tel"]', 'input[type="text"]', 'input[type="url"]', 'input[type="color"]', 'input[type="date"]', 'input[type="datetime"]', 'input[type="datetime-local"]', 'input[type="month"]', 'input[type="time"]', 'input[type="week"]'
8 |
9 | $unquoted-inputs-list: ()
10 |
11 | @each $input-type in $inputs-list
12 | $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma)
13 |
14 | $all-text-inputs: $unquoted-inputs-list
15 |
16 | // Hover Pseudo-class
17 | //************************************************************************//
18 | $all-text-inputs-hover: ()
19 |
20 | @each $input-type in $unquoted-inputs-list
21 | $input-type-hover: $input-type + ":hover"
22 | $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma)
23 |
24 | // Focus Pseudo-class
25 | //************************************************************************//
26 | $all-text-inputs-focus: ()
27 |
28 | @each $input-type in $unquoted-inputs-list
29 | $input-type-focus: $input-type + ":focus"
30 | $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma)
31 |
32 | // You must use interpolation on the variable:
33 | // #{$all-text-inputs}
34 | // #{$all-text-inputs-hover}
35 | // #{$all-text-inputs-focus}
36 |
37 | // Example
38 | //************************************************************************//
39 | // #{$all-text-inputs}, textarea {
40 | // border: 1px solid red;
41 | // }
42 |
--------------------------------------------------------------------------------
/sass/bourbon/addons/_position.sass:
--------------------------------------------------------------------------------
1 | =position($position: relative, $coordinates: 0 0 0 0)
2 | @if type-of($position) == list
3 | $coordinates: $position
4 | $position: relative
5 | $top: nth($coordinates, 1)
6 | $right: nth($coordinates, 2)
7 | $bottom: nth($coordinates, 3)
8 | $left: nth($coordinates, 4)
9 | position: $position
10 | @if $top == auto
11 | top: $top
12 | @else if not unitless($top)
13 | top: $top
14 | @if $right == auto
15 | right: $right
16 | @else if not unitless($right)
17 | right: $right
18 | @if $bottom == auto
19 | bottom: $bottom
20 | @else if not unitless($bottom)
21 | bottom: $bottom
22 | @if $left == auto
23 | left: $left
24 | @else if not unitless($left)
25 | left: $left
26 |
--------------------------------------------------------------------------------
/sass/bourbon/addons/_prefixer.sass:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Example: @include prefixer(border-radius, $radii, webkit ms spec);
3 | //************************************************************************//
4 | $prefix-for-webkit: true !default
5 | $prefix-for-mozilla: true !default
6 | $prefix-for-microsoft: true !default
7 | $prefix-for-opera: true !default
8 | $prefix-for-spec: true !default
9 |
10 | // required for keyframe mixin
11 |
12 | =prefixer($property, $value, $prefixes)
13 | @each $prefix in $prefixes
14 | @if $prefix == webkit and $prefix-for-webkit == true
15 | -webkit-#{$property}: $value
16 | @else if $prefix == moz and $prefix-for-mozilla == true
17 | -moz-#{$property}: $value
18 | @else if $prefix == ms and $prefix-for-microsoft == true
19 | -ms-#{$property}: $value
20 | @else if $prefix == o and $prefix-for-opera == true
21 | -o-#{$property}: $value
22 | @else if $prefix == spec and $prefix-for-spec == true
23 | #{$property}: $value
24 | @else
25 | @warn "Unrecognized prefix: #{$prefix}"
26 |
27 | =disable-prefix-for-all
28 | $prefix-for-webkit: false
29 | $prefix-for-mozilla: false
30 | $prefix-for-microsoft: false
31 | $prefix-for-opera: false
32 | $prefix-for-spec: false
33 |
--------------------------------------------------------------------------------
/sass/bourbon/addons/_retina-image.sass:
--------------------------------------------------------------------------------
1 | =retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false)
2 | @if $asset-pipeline
3 | background-image: image_url($filename + "." + $extension)
4 | @else
5 | background-image: url($filename + "." + $extension)
6 | +hidpi
7 | @if $asset-pipeline
8 | @if $retina-filename
9 | background-image: image_url($retina-filename + "." + $extension)
10 | @else
11 | background-image: image_url($filename + "@2x" + "." + $extension)
12 | @else
13 | @if $retina-filename
14 | background-image: url($retina-filename + "." + $extension)
15 | @else
16 | background-image: url($filename + "@2x" + "." + $extension)
17 | background-size: $background-size
18 |
--------------------------------------------------------------------------------
/sass/bourbon/addons/_size.sass:
--------------------------------------------------------------------------------
1 | =size($size)
2 | @if length($size) == 1
3 | @if $size == auto
4 | width: $size
5 | height: $size
6 | @else if unitless($size)
7 | width: $size + px
8 | height: $size + px
9 | @else if not unitless($size)
10 | width: $size
11 | height: $size
12 | // Width x Height
13 | @if length($size) == 2
14 | $width: nth($size, 1)
15 | $height: nth($size, 2)
16 | @if $width == auto
17 | width: $width
18 | @else if not unitless($width)
19 | width: $width
20 | @else if unitless($width)
21 | width: $width + px
22 | @if $height == auto
23 | height: $height
24 | @else if not unitless($height)
25 | height: $height
26 | @else if unitless($height)
27 | height: $height + px
28 |
--------------------------------------------------------------------------------
/sass/bourbon/addons/_timing-functions.sass:
--------------------------------------------------------------------------------
1 | // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
2 | // Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
3 |
4 | // EASE IN
5 | $ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53)
6 | $ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19)
7 | $ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22)
8 | $ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06)
9 | $ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715)
10 | $ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035)
11 | $ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335)
12 | $ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045)
13 |
14 | // EASE OUT
15 | $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94)
16 | $ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1)
17 | $ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1)
18 | $ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1)
19 | $ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1)
20 | $ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1)
21 | $ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1)
22 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275)
23 |
24 | // EASE IN OUT
25 | $ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955)
26 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1)
27 | $ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1)
28 | $ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1)
29 | $ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95)
30 | $ease-in-out-expo: cubic-bezier(1, 0, 0, 1)
31 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86)
32 | $ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55)
33 |
--------------------------------------------------------------------------------
/sass/bourbon/addons/_triangle.sass:
--------------------------------------------------------------------------------
1 | =triangle($size, $color, $direction)
2 | height: 0
3 | width: 0
4 | @if $direction == up or $direction == down or $direction == right or $direction == left
5 | border-color: transparent
6 | border-style: solid
7 | border-width: $size / 2
8 | @if $direction == up
9 | border-bottom-color: $color
10 | @else if $direction == right
11 | border-left-color: $color
12 | @else if $direction == down
13 | border-top-color: $color
14 | @else if $direction == left
15 | border-right-color: $color
16 | @else if $direction == up-right or $direction == up-left
17 | border-top: $size solid $color
18 | @if $direction == up-right
19 | border-left: $size solid transparent
20 | @else if $direction == up-left
21 | border-right: $size solid transparent
22 | @else if $direction == down-right or $direction == down-left
23 | border-bottom: $size solid $color
24 | @if $direction == down-right
25 | border-left: $size solid transparent
26 | @else if $direction == down-left
27 | border-right: $size solid transparent
28 |
--------------------------------------------------------------------------------
/sass/bourbon/bourbon.sass:
--------------------------------------------------------------------------------
1 | // Custom Functions
2 | @import functions/compact
3 | @import functions/deprecated-webkit-gradient
4 | @import functions/flex-grid
5 | @import functions/grid-width
6 | @import functions/linear-gradient
7 | @import functions/modular-scale
8 | @import functions/px-to-em
9 | @import functions/radial-gradient
10 | @import functions/render-gradients
11 | @import functions/tint-shade
12 | @import functions/transition-property-name
13 |
14 | // CSS3 Mixins
15 | @import css3/animation
16 | @import css3/appearance
17 | @import css3/background
18 | @import css3/background-image
19 | @import css3/background-size
20 | @import css3/border-image
21 | @import css3/border-radius
22 | @import css3/box-sizing
23 | @import css3/columns
24 | @import css3/flex-box
25 | @import css3/font-face
26 | @import css3/hidpi-media-query
27 | @import css3/image-rendering
28 | @import css3/inline-block
29 | @import css3/keyframes
30 | @import css3/linear-gradient
31 | @import css3/perspective
32 | @import css3/radial-gradient
33 | @import css3/transform
34 | @import css3/transition
35 | @import css3/user-select
36 | @import css3/placeholder
37 |
38 | // Addons & other mixins
39 | @import addons/button
40 | @import addons/clearfix
41 | @import addons/font-family
42 | @import addons/hide-text
43 | @import addons/html5-input-types
44 | @import addons/position
45 | @import addons/prefixer
46 | @import addons/retina-image
47 | @import addons/size
48 | @import addons/timing-functions
49 | @import addons/triangle
50 |
51 | // Soon to be deprecated Mixins
52 | @import bourbon-deprecated-upcoming
53 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_animation.sass:
--------------------------------------------------------------------------------
1 | // http://www.w3.org/TR/css3-animations/#the-animation-name-property-
2 | // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
3 |
4 | // Official animation shorthand property.
5 | =animation($animations...)
6 | +prefixer(animation, $animations, webkit moz spec)
7 |
8 | // Individual Animation Properties
9 | =animation-name($names...)
10 | +prefixer(animation-name, $names, webkit moz spec)
11 |
12 | =animation-duration($times...)
13 | +prefixer(animation-duration, $times, webkit moz spec)
14 |
15 | =animation-timing-function($motions...)
16 | // ease | linear | ease-in | ease-out | ease-in-out
17 | +prefixer(animation-timing-function, $motions, webkit moz spec)
18 |
19 | =animation-iteration-count($values...)
20 | // infinite |
21 | +prefixer(animation-iteration-count, $values, webkit moz spec)
22 |
23 | =animation-direction($directions...)
24 | // normal | alternate
25 | +prefixer(animation-direction, $directions, webkit moz spec)
26 |
27 | =animation-play-state($states...)
28 | // running | paused
29 | +prefixer(animation-play-state, $states, webkit moz spec)
30 |
31 | =animation-delay($times...)
32 | +prefixer(animation-delay, $times, webkit moz spec)
33 |
34 | =animation-fill-mode($modes...)
35 | // none | forwards | backwards | both
36 | +prefixer(animation-fill-mode, $modes, webkit moz spec)
37 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_appearance.sass:
--------------------------------------------------------------------------------
1 | =appearance($value)
2 | +prefixer(appearance, $value, webkit moz ms o spec)
3 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_background-image.sass:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Background-image property for adding multiple background images with
3 | // gradients, or for stringing multiple gradients together.
4 | //************************************************************************//
5 |
6 | =background-image($images...)
7 | background-image: add-prefix($images, webkit)
8 | background-image: add-prefix($images, moz)
9 | background-image: add-prefix($images, ms)
10 | background-image: add-prefix($images, o)
11 | background-image: add-prefix($images)
12 |
13 | @function add-prefix($images, $vendor: false)
14 | $images-prefixed: ()
15 | @for $i from 1 through length($images)
16 | $type: type-of(nth($images, $i))
17 | // Get type of variable - List or String
18 | // If variable is a list - Gradient
19 | @if $type == list
20 | $gradient-type: nth(nth($images, $i), 1)
21 | // Get type of gradient (linear || radial)
22 | $gradient-args: nth(nth($images, $i), 2)
23 | // Get actual gradient (red, blue)
24 | $gradient: render-gradients($gradient-args, $gradient-type, $vendor)
25 | $images-prefixed: append($images-prefixed, $gradient, comma)
26 | @else if $type == string
27 | $images-prefixed: join($images-prefixed, nth($images, $i), comma)
28 | @return $images-prefixed
29 |
30 | //Examples:
31 | //@include background-image(linear-gradient(top, orange, red));
32 | //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
33 | //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
34 | //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
35 | //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));
36 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_background-size.sass:
--------------------------------------------------------------------------------
1 | =background-size($lengths...)
2 | +prefixer(background-size, $lengths, webkit moz ms o spec)
3 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_background.sass:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Background property for adding multiple backgrounds using shorthand
3 | // notation.
4 | //************************************************************************//
5 |
6 | =background($background-1, $background-2: false, $background-3: false, $background-4: false, $background-5: false, $background-6: false, $background-7: false, $background-8: false, $background-9: false, $background-10: false, $fallback: false)
7 | $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5, $background-6, $background-7, $background-8, $background-9, $background-10)
8 | $fallback-color: false
9 | @if type-of($fallback) == color or $fallback == "transparent"
10 | $fallback-color: $fallback
11 | @else
12 | $fallback-color: extract-background-color($backgrounds)
13 | @if $fallback-color
14 | background-color: $fallback-color
15 | background: background-add-prefix($backgrounds, webkit)
16 | background: background-add-prefix($backgrounds, moz)
17 | background: background-add-prefix($backgrounds, ms)
18 | background: background-add-prefix($backgrounds, o)
19 | background: background-add-prefix($backgrounds)
20 |
21 | @function extract-background-color($backgrounds)
22 | $final-bg-layer: nth($backgrounds, length($backgrounds))
23 | @if type-of($final-bg-layer) == list
24 | @for $i from 1 through length($final-bg-layer)
25 | $value: nth($final-bg-layer, $i)
26 | @if type-of($value) == color
27 | @return $value
28 | @return false
29 |
30 | @function background-add-prefix($backgrounds, $vendor: false)
31 | $backgrounds-prefixed: ()
32 | @for $i from 1 through length($backgrounds)
33 | $shorthand: nth($backgrounds, $i)
34 | // Get member for current index
35 | $type: type-of($shorthand)
36 | // Get type of variable - List or String
37 | // If shorthand is a list
38 | @if $type == list
39 | $first-member: nth($shorthand, 1)
40 | // Get first member of shorthand
41 | // Linear Gradient
42 | @if index(linear radial, nth($first-member, 1))
43 | $gradient-type: nth($first-member, 1)
44 | // linear || radial
45 | // Get actual gradient (red, blue)
46 | $gradient-args: false
47 | $shorthand-start: false
48 | // Linear gradient and positioning, repeat, etc. values
49 | @if type-of($first-member) == list
50 | $gradient-args: nth($first-member, 2)
51 | $shorthand-start: 2
52 | @else
53 | $gradient-args: nth($shorthand, 2)
54 | // Get actual gradient (red, blue)
55 | $shorthand-start: 3
56 | $gradient: render-gradients($gradient-args, $gradient-type, $vendor)
57 | @for $j from $shorthand-start through length($shorthand)
58 | $gradient: join($gradient, nth($shorthand, $j), space)
59 | $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma)
60 | @else
61 | $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma)
62 | @else if $type == string
63 | $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma)
64 | @return $backgrounds-prefixed
65 |
66 | //Examples:
67 | //@include background(linear-gradient(top, orange, red));
68 | //@include background(radial-gradient(50% 50%, cover circle, orange, red));
69 | //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
70 | //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));
71 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_border-image.sass:
--------------------------------------------------------------------------------
1 | =border-image($images)
2 | -webkit-border-image: border-add-prefix($images, webkit)
3 | -moz-border-image: border-add-prefix($images, moz)
4 | -o-border-image: border-add-prefix($images, o)
5 | border-image: border-add-prefix($images)
6 |
7 | @function border-add-prefix($images, $vendor: false)
8 | $border-image: ()
9 | $images-type: type-of(nth($images, 1))
10 | $first-var: nth(nth($images, 1), 1)
11 | // Get type of Gradient (Linear || radial)
12 | // If input is a gradient
13 | @if $images-type == string
14 | @if $first-var == "linear" or $first-var == "radial"
15 | @for $i from 2 through length($images)
16 | $gradient-type: nth($images, 1)
17 | // Get type of gradient (linear || radial)
18 | $gradient-args: nth($images, $i)
19 | // Get actual gradient (red, blue)
20 | $border-image: render-gradients($gradient-args, $gradient-type, $vendor)
21 | @else
22 | $border-image: $images
23 | @else if $images-type == list
24 | @for $i from 1 through length($images)
25 | $type: type-of(nth($images, $i))
26 | // Get type of variable - List or String
27 | // If variable is a list - Gradient
28 | @if $type == list
29 | $gradient-type: nth(nth($images, $i), 1)
30 | // Get type of gradient (linear || radial)
31 | $gradient-args: nth(nth($images, $i), 2)
32 | // Get actual gradient (red, blue)
33 | $border-image: render-gradients($gradient-args, $gradient-type, $vendor)
34 | @else if $type == string or $type == number
35 | $border-image: append($border-image, nth($images, $i))
36 | @return $border-image
37 |
38 | //Examples:
39 | // @include border-image(url("image.png"));
40 | // @include border-image(url("image.png") 20 stretch);
41 | // @include border-image(linear-gradient(45deg, orange, yellow));
42 | // @include border-image(linear-gradient(45deg, orange, yellow) stretch);
43 | // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
44 | // @include border-image(radial-gradient(top, cover, orange, yellow, orange));
45 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_border-radius.sass:
--------------------------------------------------------------------------------
1 | //************************************************************************//
2 | // Shorthand Border-radius mixins
3 | //************************************************************************//
4 | =border-top-radius($radii)
5 | +prefixer(border-top-left-radius, $radii, spec)
6 | +prefixer(border-top-right-radius, $radii, spec)
7 |
8 | =border-bottom-radius($radii)
9 | +prefixer(border-bottom-left-radius, $radii, spec)
10 | +prefixer(border-bottom-right-radius, $radii, spec)
11 |
12 | =border-left-radius($radii)
13 | +prefixer(border-top-left-radius, $radii, spec)
14 | +prefixer(border-bottom-left-radius, $radii, spec)
15 |
16 | =border-right-radius($radii)
17 | +prefixer(border-top-right-radius, $radii, spec)
18 | +prefixer(border-bottom-right-radius, $radii, spec)
19 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_box-sizing.sass:
--------------------------------------------------------------------------------
1 | =box-sizing($box)
2 | // content-box | border-box | inherit
3 | +prefixer(box-sizing, $box, webkit moz spec)
4 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_columns.sass:
--------------------------------------------------------------------------------
1 | =columns($arg: auto)
2 | // ||
3 | +prefixer(columns, $arg, webkit moz spec)
4 |
5 | =column-count($int: auto)
6 | // auto || integer
7 | +prefixer(column-count, $int, webkit moz spec)
8 |
9 | =column-gap($length: normal)
10 | // normal || length
11 | +prefixer(column-gap, $length, webkit moz spec)
12 |
13 | =column-fill($arg: auto)
14 | // auto || length
15 | +prefixer(columns-fill, $arg, webkit moz spec)
16 |
17 | =column-rule($arg)
18 | // || ||
19 | +prefixer(column-rule, $arg, webkit moz spec)
20 |
21 | =column-rule-color($color)
22 | +prefixer(column-rule-color, $color, webkit moz spec)
23 |
24 | =column-rule-style($style: none)
25 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
26 | +prefixer(column-rule-style, $style, webkit moz spec)
27 |
28 | =column-rule-width($width: none)
29 | +prefixer(column-rule-width, $width, webkit moz spec)
30 |
31 | =column-span($arg: none)
32 | // none || all
33 | +prefixer(column-span, $arg, webkit moz spec)
34 |
35 | =column-width($length: auto)
36 | // auto || length
37 | +prefixer(column-width, $length, webkit moz spec)
38 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_flex-box.sass:
--------------------------------------------------------------------------------
1 | // CSS3 Flexible Box Model and property defaults
2 |
3 | // Custom shorthand notation for flexbox
4 | =box($orient: inline-axis, $pack: start, $align: stretch)
5 | +display-box
6 | +box-orient($orient)
7 | +box-pack($pack)
8 | +box-align($align)
9 |
10 | =display-box
11 | display: -webkit-box
12 | display: -moz-box
13 | display: box
14 |
15 | =box-orient($orient: inline-axis)
16 | // horizontal|vertical|inline-axis|block-axis|inherit
17 | +prefixer(box-orient, $orient, webkit moz spec)
18 |
19 | =box-pack($pack: start)
20 | // start|end|center|justify
21 | +prefixer(box-pack, $pack, webkit moz spec)
22 |
23 | =box-align($align: stretch)
24 | // start|end|center|baseline|stretch
25 | +prefixer(box-align, $align, webkit moz spec)
26 |
27 | =box-direction($direction: normal)
28 | // normal|reverse|inherit
29 | +prefixer(box-direction, $direction, webkit moz spec)
30 |
31 | =box-lines($lines: single)
32 | // single|multiple
33 | +prefixer(box-lines, $lines, webkit moz spec)
34 |
35 | =box-ordinal-group($int: 1)
36 | +prefixer(box-ordinal-group, $int, webkit moz spec)
37 |
38 | =box-flex($value: 0)
39 | +prefixer(box-flex, $value, webkit moz spec)
40 |
41 | =box-flex-group($int: 1)
42 | +prefixer(box-flex-group, $int, webkit moz spec)
43 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_font-face.sass:
--------------------------------------------------------------------------------
1 | // Order of the includes matters, and it is: normal, bold, italic, bold+italic.
2 |
3 | =font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false)
4 | @font-face
5 | font-family: $font-family
6 | font-weight: $weight
7 | font-style: $style
8 | @if $asset-pipeline == true
9 | src: font-url("#{$file-path}.eot")
10 | src: font-url("#{$file-path}.eot?#iefix") format("embedded-opentype"), font-url("#{$file-path}.woff") format("woff"), font-url("#{$file-path}.ttf") format("truetype"), font-url("#{$file-path}.svg##{$font-family}") format("svg")
11 | @else
12 | src: url("#{$file-path}.eot")
13 | src: url("#{$file-path}.eot?#iefix") format("embedded-opentype"), url("#{$file-path}.woff") format("woff"), url("#{$file-path}.ttf") format("truetype"), url("#{$file-path}.svg##{$font-family}") format("svg")
14 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_hidpi-media-query.sass:
--------------------------------------------------------------------------------
1 | // HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
2 | =hidpi($ratio: 1.3)
3 | @media only screen and (-webkit-min-device-pixel-ratio: $ratio), only screen and (min--moz-device-pixel-ratio: $ratio), only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), only screen and (min-resolution: #{round($ratio * 96)}dpi), only screen and (min-resolution: #{$ratio}dppx)
4 | @content
5 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_image-rendering.sass:
--------------------------------------------------------------------------------
1 | =image-rendering($mode: optimizeQuality)
2 | @if $mode == optimize-contrast
3 | image-rendering: -moz-crisp-edges
4 | image-rendering: -o-crisp-edges
5 | image-rendering: -webkit-optimize-contrast
6 | image-rendering: optimize-contrast
7 | @else
8 | image-rendering: $mode
9 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_inline-block.sass:
--------------------------------------------------------------------------------
1 | // Legacy support for inline-block in IE7 (maybe IE6)
2 | =inline-block
3 | display: inline-block
4 | vertical-align: baseline
5 | zoom: 1
6 | *display: inline
7 | *vertical-align: auto
8 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_keyframes.sass:
--------------------------------------------------------------------------------
1 | // Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
2 | =keyframes($name)
3 | $original-prefix-for-webkit: $prefix-for-webkit
4 | $original-prefix-for-mozilla: $prefix-for-mozilla
5 | $original-prefix-for-microsoft: $prefix-for-microsoft
6 | $original-prefix-for-opera: $prefix-for-opera
7 | $original-prefix-for-spec: $prefix-for-spec
8 | @if $original-prefix-for-webkit
9 | +disable-prefix-for-all
10 | $prefix-for-webkit: true
11 | @-webkit-keyframes #{$name}
12 | @content
13 | @if $original-prefix-for-mozilla
14 | +disable-prefix-for-all
15 | $prefix-for-mozilla: true
16 | @-moz-keyframes #{$name}
17 | @content
18 | @if $original-prefix-for-microsoft
19 | +disable-prefix-for-all
20 | $prefix-for-microsoft: true
21 | @-ms-keyframes #{$name}
22 | @content
23 | @if $original-prefix-for-opera
24 | +disable-prefix-for-all
25 | $prefix-for-opera: true
26 | @-o-keyframes #{$name}
27 | @content
28 | @if $original-prefix-for-spec
29 | $prefix-for-spec: true !default
30 | +disable-prefix-for-all
31 | $prefix-for-spec: true
32 | @keyframes #{$name}
33 | @content
34 | $prefix-for-webkit: $original-prefix-for-webkit
35 | $prefix-for-mozilla: $original-prefix-for-mozilla
36 | $prefix-for-microsoft: $original-prefix-for-microsoft
37 | $prefix-for-opera: $original-prefix-for-opera
38 | $prefix-for-spec: $original-prefix-for-spec
39 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_linear-gradient.sass:
--------------------------------------------------------------------------------
1 | =linear-gradient($pos, $G1, $G2: false, $G3: false, $G4: false, $G5: false, $G6: false, $G7: false, $G8: false, $G9: false, $G10: false, $deprecated-pos1: left top, $deprecated-pos2: left bottom, $fallback: false)
2 | // Detect what type of value exists in $pos
3 | $pos-type: type-of(nth($pos, 1))
4 | // If $pos is missing from mixin, reassign vars and add default position
5 | @if $pos-type == color or nth($pos, 1) == "transparent"
6 | $G10: $G9
7 | $G9: $G8
8 | $G8: $G7
9 | $G7: $G6
10 | $G6: $G5
11 | $G5: $G4
12 | $G4: $G3
13 | $G3: $G2
14 | $G2: $G1
15 | $G1: $pos
16 | $pos: top
17 | // Default position
18 | $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10)
19 | // Set $G1 as the default fallback color
20 | $fallback-color: nth($G1, 1)
21 | // If $fallback is a color use that color as the fallback color
22 | @if type-of($fallback) == color or $fallback == "transparent"
23 | $fallback-color: $fallback
24 | background-color: $fallback-color
25 | background-image: deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full)
26 | // Safari <= 5.0
27 | background-image: -webkit-linear-gradient($pos, $full)
28 | // Safari 5.1+, Chrome
29 | background-image: -moz-linear-gradient($pos, $full)
30 | background-image: -ms-linear-gradient($pos, $full)
31 | background-image: -o-linear-gradient($pos, $full)
32 | background-image: unquote("linear-gradient(#{$pos}, #{$full})")
33 |
34 | // Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
35 | // @include linear-gradient(#1e5799, #2989d8);
36 | // @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
37 | // @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
38 | // @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
39 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_perspective.sass:
--------------------------------------------------------------------------------
1 | =perspective($depth: none)
2 | // none |
3 | +prefixer(perspective, $depth, webkit moz o spec)
4 |
5 | =perspective-origin($value: 50% 50%)
6 | +prefixer(perspective-origin, $value, webkit moz o spec)
7 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_placeholder.sass:
--------------------------------------------------------------------------------
1 | $placeholders: "-webkit-input-placeholder", "-moz-placeholder", "-ms-input-placeholder"
2 |
3 | =placeholder
4 | @each $placeholder in $placeholders
5 | @if $placeholder == "-webkit-input-placeholder"
6 | &::#{$placeholder}
7 | @content
8 | @else
9 | &:#{$placeholder}
10 | @content
11 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_radial-gradient.sass:
--------------------------------------------------------------------------------
1 | // Requires Sass 3.1+
2 |
3 | =radial-gradient($G1, $G2, $G3: false, $G4: false, $G5: false, $G6: false, $G7: false, $G8: false, $G9: false, $G10: false, $pos: 50% 50%, $shape-size: ellipse cover, $deprecated-pos1: center center, $deprecated-pos2: center center, $deprecated-radius1: 0, $deprecated-radius2: 460, $fallback: false)
4 | @each $value in $G1, $G2
5 | $first-val: nth($value, 1)
6 | $pos-type: type-of($first-val)
7 | @if $pos-type != color or $first-val != "transparent"
8 | @if $pos-type == number or $first-val == "center" or $first-val == "top" or $first-val == "right" or $first-val == "bottom" or $first-val == "left"
9 | $pos: $value
10 | @if $pos == $G1
11 | $G1: false
12 | @else if $first-val == "ellipse" or $first-val == "circle" or $first-val == "closest-side" or $first-val == "closest-corner" or $first-val == "farthest-side" or $first-val == "farthest-corner" or $first-val == "contain" or $first-val == "cover"
13 | $shape-size: $value
14 | @if $value == $G1
15 | $G1: false
16 | @else if $value == $G2
17 | $G2: false
18 | $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10)
19 | // Set $G1 as the default fallback color
20 | $first-color: nth($full, 1)
21 | $fallback-color: nth($first-color, 1)
22 | @if type-of($fallback) == color or $fallback == "transparent"
23 | $fallback-color: $fallback
24 | background-color: $fallback-color
25 | background-image: deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2)
26 | // Safari <= 5.0
27 | background-image: -webkit-radial-gradient($pos, $shape-size, $full)
28 | background-image: -moz-radial-gradient($pos, $shape-size, $full)
29 | background-image: -ms-radial-gradient($pos, $shape-size, $full)
30 | background-image: -o-radial-gradient($pos, $shape-size, $full)
31 | background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})")
32 |
33 | // Usage: Gradient position and shape-size are required. Color stops are optional.
34 | // @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef);
35 | // @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
36 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_transform.sass:
--------------------------------------------------------------------------------
1 | =transform($property: none)
2 | // none |
3 | +prefixer(transform, $property, webkit moz ms o spec)
4 |
5 | =transform-origin($axes: 50%)
6 | // x-axis - left | center | right | length | %
7 | // y-axis - top | center | bottom | length | %
8 | // z-axis - length
9 | +prefixer(transform-origin, $axes, webkit moz ms o spec)
10 |
11 | =transform-style($style: flat)
12 | +prefixer(transform-style, $style, webkit moz ms o spec)
13 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_transition.sass:
--------------------------------------------------------------------------------
1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
2 | // Example: @include transition (all, 2.0s, ease-in-out);
3 | // @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
4 | // @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
5 |
6 | =transition($properties...)
7 | @if length($properties) >= 1
8 | +prefixer(transition, $properties, webkit moz ms o spec)
9 | @else
10 | $properties: all 0.15s ease-out 0
11 | +prefixer(transition, $properties, webkit moz ms o spec)
12 |
13 | =transition-property($properties...)
14 | -webkit-transition-property: transition-property-names($properties, "webkit")
15 | -moz-transition-property: transition-property-names($properties, "moz")
16 | -ms-transition-property: transition-property-names($properties, "ms")
17 | -o-transition-property: transition-property-names($properties, "o")
18 | transition-property: transition-property-names($properties, false)
19 |
20 | =transition-duration($times...)
21 | +prefixer(transition-duration, $times, webkit moz ms o spec)
22 |
23 | =transition-timing-function($motions...)
24 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
25 | +prefixer(transition-timing-function, $motions, webkit moz ms o spec)
26 |
27 | =transition-delay($times...)
28 | +prefixer(transition-delay, $times, webkit moz ms o spec)
29 |
--------------------------------------------------------------------------------
/sass/bourbon/css3/_user-select.sass:
--------------------------------------------------------------------------------
1 | =user-select($arg: none)
2 | +prefixer(user-select, $arg, webkit moz ms spec)
3 |
--------------------------------------------------------------------------------
/sass/bourbon/functions/_compact.sass:
--------------------------------------------------------------------------------
1 | // Remove `false` values from a list
2 |
3 | @function compact($vars...)
4 | $list: ()
5 | @each $var in $vars
6 | @if $var
7 | $list: append($list, $var, comma)
8 | @return $list
9 |
--------------------------------------------------------------------------------
/sass/bourbon/functions/_deprecated-webkit-gradient.sass:
--------------------------------------------------------------------------------
1 | // Render Deprecated Webkit Gradient - Linear || Radial
2 | //************************************************************************//
3 |
4 | @function deprecated-webkit-gradient($type, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1: false, $deprecated-radius2: false)
5 | $gradient-list: ()
6 | $gradient: false
7 | $full-length: length($full)
8 | $percentage: false
9 | $gradient-type: $type
10 | @for $i from 1 through $full-length
11 | $gradient: nth($full, $i)
12 | @if length($gradient) == 2
13 | $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1))
14 | $gradient-list: join($gradient-list, $color-stop, comma)
15 | @else if $gradient != null
16 | @if $i == $full-length
17 | $percentage: 100%
18 | @else
19 | $percentage: ($i - 1) * 100 / ($full-length - 1) + "%"
20 | $color-stop: color-stop(unquote($percentage), $gradient)
21 | $gradient-list: join($gradient-list, $color-stop, comma)
22 | @if $type == radial
23 | $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list)
24 | @else if $type == linear
25 | $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list)
26 | @return $gradient
27 |
--------------------------------------------------------------------------------
/sass/bourbon/functions/_flex-grid.sass:
--------------------------------------------------------------------------------
1 | // Flexible grid
2 | @function flex-grid($columns, $container-columns: $fg-max-columns)
3 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter
4 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter
5 | @return percentage($width / $container-width)
6 |
7 | // Flexible gutter
8 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter)
9 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter
10 | @return percentage($gutter / $container-width)
11 |
12 | // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
13 | // This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
14 | //
15 | // The calculation presumes that your column structure will be missing the last gutter:
16 | //
17 | // -- column -- gutter -- column -- gutter -- column
18 | //
19 | // $fg-column: 60px; // Column Width
20 | // $fg-gutter: 25px; // Gutter Width
21 | // $fg-max-columns: 12; // Total Columns For Main Container
22 | //
23 | // div {
24 | // width: flex-grid(4); // returns (315px / 995px) = 31.65829%;
25 | // margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
26 | //
27 | // p {
28 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
29 | // float: left;
30 | // margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
31 | // }
32 | //
33 | // blockquote {
34 | // float: left;
35 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
36 | // }
37 | // }
38 |
--------------------------------------------------------------------------------
/sass/bourbon/functions/_grid-width.sass:
--------------------------------------------------------------------------------
1 | @function grid-width($n)
2 | @return $n * $gw-column + ($n - 1) * $gw-gutter
3 |
4 | // The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
5 | //
6 | // $gw-column: 100px; // Column Width
7 | // $gw-gutter: 40px; // Gutter Width
8 | //
9 | // div {
10 | // width: grid-width(4); // returns 520px;
11 | // margin-left: $gw-gutter; // returns 40px;
12 | // }
13 |
--------------------------------------------------------------------------------
/sass/bourbon/functions/_linear-gradient.sass:
--------------------------------------------------------------------------------
1 | @function linear-gradient($gradients...)
2 | $type: linear
3 | $type-gradient: append($type, $gradients, comma)
4 | @return $type-gradient
5 |
--------------------------------------------------------------------------------
/sass/bourbon/functions/_modular-scale.sass:
--------------------------------------------------------------------------------
1 | @function modular-scale($value, $increment, $ratio)
2 | @if $increment > 0
3 | @for $i from 1 through $increment
4 | $value: $value * $ratio
5 | @if $increment < 0
6 | $increment: abs($increment)
7 | @for $i from 1 through $increment
8 | $value: $value / $ratio
9 | @return $value
10 |
11 | // div {
12 | // Increment Up GR with positive value
13 | // font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px
14 | //
15 | // Increment Down GR with negative value
16 | // font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px
17 | //
18 | // Can be used with ceil(round up) or floor(round down)
19 | // font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
20 | // font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
21 | // }
22 | //
23 | // modularscale.com
24 |
25 | @function golden-ratio($value, $increment)
26 | @return modular-scale($value, $increment, 1.618)
27 |
28 | // div {
29 | // font-size: golden-ratio(14px, 1); // returns: 22.652px
30 | // }
31 | //
32 | // goldenratiocalculator.com
33 |
--------------------------------------------------------------------------------
/sass/bourbon/functions/_px-to-em.sass:
--------------------------------------------------------------------------------
1 | // Convert pixels to ems
2 | // eg. for a relational value of 12px write em(12) when the parent is 16px
3 | // if the parent is another value say 24px write em(12, 24)
4 |
5 | @function em($pxval, $base: 16)
6 | @return $pxval / $base * 1em
7 |
--------------------------------------------------------------------------------
/sass/bourbon/functions/_radial-gradient.sass:
--------------------------------------------------------------------------------
1 | // This function is required and used by the background-image mixin.
2 |
3 | @function radial-gradient($G1, $G2, $G3: false, $G4: false, $G5: false, $G6: false, $G7: false, $G8: false, $G9: false, $G10: false, $pos: 50% 50%, $shape-size: ellipse cover)
4 | @each $value in $G1, $G2
5 | $first-val: nth($value, 1)
6 | $pos-type: type-of($first-val)
7 | @if $pos-type != color or $first-val != "transparent"
8 | @if $pos-type == number or $first-val == "center" or $first-val == "top" or $first-val == "right" or $first-val == "bottom" or $first-val == "left"
9 | $pos: $value
10 | @if $pos == $G1
11 | $G1: false
12 | @else if $first-val == "ellipse" or $first-val == "circle" or $first-val == "closest-side" or $first-val == "closest-corner" or $first-val == "farthest-side" or $first-val == "farthest-corner" or $first-val == "contain" or $first-val == "cover"
13 | $shape-size: $value
14 | @if $value == $G1
15 | $G1: false
16 | @else if $value == $G2
17 | $G2: false
18 | $type: radial
19 | $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10)
20 | $type-gradient: append($type, $gradient, comma)
21 | @return $type-gradient
22 |
--------------------------------------------------------------------------------
/sass/bourbon/functions/_render-gradients.sass:
--------------------------------------------------------------------------------
1 | // User for linear and radial gradients within background-image or border-image properties
2 |
3 | @function render-gradients($gradients, $gradient-type, $vendor: false)
4 | $vendor-gradients: false
5 | @if $vendor
6 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients)
7 | @else if $vendor == false
8 | $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})"
9 | $vendor-gradients: unquote($vendor-gradients)
10 | @return $vendor-gradients
11 |
--------------------------------------------------------------------------------
/sass/bourbon/functions/_tint-shade.sass:
--------------------------------------------------------------------------------
1 | // Add percentage of white to a color
2 | @function tint($color, $percent)
3 | @return mix(white, $color, $percent)
4 |
5 | // Add percentage of black to a color
6 | @function shade($color, $percent)
7 | @return mix(black, $color, $percent)
8 |
--------------------------------------------------------------------------------
/sass/bourbon/functions/_transition-property-name.sass:
--------------------------------------------------------------------------------
1 | // Return vendor-prefixed property names if appropriate
2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
3 | //************************************************************************//
4 | @function transition-property-names($props, $vendor: false)
5 | $new-props: ()
6 | @each $prop in $props
7 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma)
8 | @return $new-props
9 |
10 | @function transition-property-name($prop, $vendor: false)
11 | // put other properties that need to be prefixed here aswell
12 | @if $vendor and $prop == transform
13 | @return unquote("-" + $vendor + "-" + $prop)
14 | @else
15 | @return $prop
16 |
--------------------------------------------------------------------------------
/sass/screen.sass:
--------------------------------------------------------------------------------
1 | @import "compass/reset"
2 | @import "bourbon/bourbon"
3 |
4 | $background-color: #272822
5 | $font-color: #F8F8F2
6 | $font-size: 18px
7 | $prompt-color: #66D9EF
8 | $highlight-color: #AE81FF
9 | $alternate-color: #E6DB74
10 | $response-label-color: $highlight-color
11 | $response-color: $alternate-color
12 | $error-color: #F92672
13 |
14 | body, textarea
15 | background: $background-color
16 | color: $font-color
17 | overflow: hidden
18 |
19 | body
20 | font-family: monospace
21 | font-size: $font-size
22 | line-height: $font-size+2px
23 |
24 | a
25 | color: $highlight-color
26 | text-decoration: none
27 |
28 | &:hover
29 | text-decoration: underline
30 |
31 | hr
32 | border-color: #444
33 |
34 | p
35 | margin: 20px 0
36 |
37 | h1
38 | font-size: $font-size*2
39 | line-height: $font-size*2
40 | color: $prompt-color
41 | margin-bottom: 18px
42 |
43 | h2
44 | font-weight: bold
45 | margin-bottom: 8px
46 |
47 | #container
48 | overflow-y: scroll
49 | padding: 5px
50 |
51 | #shell
52 | font-family: monospace
53 | float: left
54 | width: 100%
55 |
56 | .prompt
57 | color: $prompt-color
58 |
59 | .prompt, #output .response span
60 | margin-right: 5px
61 | display: inline-block
62 |
63 | p
64 | margin: 0
65 |
66 | #output
67 | .session
68 | color: $response-color
69 | .error .value
70 | color: $error-color
71 | .value-prompt
72 | color: $response-label-color
73 | padding-right: 5px
74 | .command
75 | color: $font-color
76 | .response
77 | clear: left
78 | .source
79 | margin-left: 28px
80 | min-height: 21px
81 | .prompt
82 | display: block
83 | float: left
84 |
85 | #command
86 | .prompt, textarea
87 | line-height: $font-size+2
88 | height: $font-size+3
89 | .prompt
90 | float: left
91 | textarea
92 | border: none
93 | padding: 0
94 | width: 90%
95 | margin-left: 5px
96 |
97 | &:focus
98 | outline: none
99 |
100 | #welcome
101 | display: none
102 | padding: 20px
103 |
104 | #resources, #keyboard
105 | font-size: 0.9em
106 | float: left
107 |
108 | #resources
109 | width: 225px
110 | ul
111 | margin: 3px 0
112 | list-style-type: disc
113 | li
114 | margin: 4px 0 4px 20px
115 |
116 | #keyboard
117 | padding-right: 10px
118 | width: 272px
119 | li
120 | margin: 4px 0
121 |
122 | span
123 | +inline-block
124 | background: #444
125 | padding: 2px
126 | border-radius: 3px
127 | border: solid 2px #555
128 |
129 | #action
130 | clear: left
131 | padding-top: 16px
132 | text-align: center
133 |
134 | a
135 | @include button($highlight-color)
136 | font-size: 24px
137 | line-height: 34px
138 |
139 | #attribution
140 | clear: both
141 | font-size: 11px
142 | padding-top: 15px
143 | text-align: center
144 | opacity: 0.5
145 |
146 | #editor
147 | margin-left: 28px
148 |
149 | #editor, .editor
150 | position: relative !important
151 | font-family: monospace !important
152 | font-size: inherit !important
153 | line-height: inherit
154 | height: $font-size+3px
155 | resize: none
156 | width: 90%
157 |
158 | .ace-sb
159 | overflow-y: hidden !important
160 | .ace-scroller
161 | position: static
162 | overflow-x: hidden !important
163 | .ace-cursor
164 | border-left: solid 2px white
165 | opacity: 1
166 |
167 | .source.editor
168 | .ace_cursor, .ace_cursor_layer
169 | display: none
170 |
171 |
172 | #fork-me
173 | img
174 | position: absolute
175 | top: 0
176 | right: 0
177 | border: 0
178 | z-index: 10
179 |
180 | #basic-modal-content
181 | display: none
182 |
183 | #simplemodal-overlay
184 | background-color: #000
185 |
186 | #simplemodal-container
187 | font-family: sans-serif
188 | height: 512px
189 | width: 565px
190 | color: darken($font-color, 10%)
191 | background-color: $background-color
192 | border: 8px solid #444
193 | padding: 12px
194 |
195 | #simplemodal-container code
196 | background: #141414
197 | border-left: 3px solid #65B43D
198 | display: block
199 | font-size: 12px
200 | margin-bottom: 12px
201 | padding: 4px 6px 6px
202 |
203 | #simplemodal-container a.modalCloseImg
204 | background: url(../images/x.png) no-repeat
205 | width: 25px
206 | height: 29px
207 | display: inline
208 | z-index: 3200
209 | position: absolute
210 | top: -15px
211 | right: -16px
212 | cursor: pointer
213 |
214 | #simplemodal-container h3
215 | color: #84b8d9
216 |
--------------------------------------------------------------------------------
interactive mruby