maxmertkit-rails 0.0.1

data/vendor/assets/javascript/maxmertkit.tabs.js

@@ -0,0 +1,228 @@
+;(function ( $, window, document, undefined ) {
+
+	var _name = 'tabs',
+		_defaults = {
+			itemsSelector: undefined 	// Priority!!! (if not set, then will search be data-<temsData>) You can use "data-<selector name>" to find elements everywhere in the document, or ".<class name>" and "#<id name>" to look for items inside tabs container.
+		,	itemsData: undefined			// All items are with data-tabs="<itemsData>"
+		,	dataTarget: 'tabs-target'		// Inside $item.data(<dataTarget>) we will find selector of the container with tab content.
+		,	trigger: 'click'
+
+		,	beforeOpen: $.noop()
+		,	open: $.noop()
+		,	ifOpenedOrNot: $.noop()
+		,	ifNotOpened: $.noop()
+		,	beforeClose: $.noop()
+		,	close: $.noop()
+		,	ifClosedOrNot: $.noop()
+		,	ifNotClosed: $.noop()
+		}
+
+	Tabs = function( element_, options_ ) {
+		this.element = element_;
+		this.name = _name;
+		this.state = 'closed';
+		this.options = $.extend( {}, this.options, _defaults, options_ );
+		this.items = [];
+
+		this._setOptions( this.options );
+
+
+		this.init();
+	}
+
+	Tabs.prototype = new $.kit();
+	Tabs.prototype.constructor = Tabs;
+
+	Tabs.prototype.__setOption = function ( key_, value_ ) {
+		var me  = this;
+		var $me = $(me.element);
+		
+		switch( key_ ) {
+			case 'itemsSelector', 'itemsData', 'trigger':
+				me._setEvents();
+			break;
+		}
+
+		me.options[ key_ ] = value_;
+	}
+
+	Tabs.prototype._getItems = function() {
+		var me  = this
+		,	$me = $(me.element)
+		,	_items = [];
+
+		
+		me.options.itemsSelector !== undefined ?
+			$me.find( me.options.itemsSelector ).each( function( index_, item_ ) { _items.push( $(item_) ) }) :
+			$me.find( '[data-tabs="' + me.options.itemsData + '"]' ).each( function( index_, item_ ) { _items.push( $(item_) ) })
+
+		return _items;
+	}
+
+	Tabs.prototype._getItem = function( event_ ) {
+		var me  = this
+		,	$me = $(me.element)
+		,	_el = undefined
+		, _target;
+
+		_target = $(event_.target);
+		
+		if( _target.closest(me.options.itemsSelector).length > 0 ) _el = $(_target.closest(me.options.itemsSelector));
+		if( _target.closest('[data-tabs="'+me.options.itemsData+'"]').length > 0 ) _el = $(_target.closest('[data-tabs="'+me.options.itemsData+'"]').get(0));
+		if( _target.hasClass(me.options.itemsSelector) ) _el = $(_target);
+
+		return _el;
+	}
+
+	Tabs.prototype._unsetEvents = function() {
+		var me  = this;
+		var $me = $(me.element);
+
+		$me.off( '.' + me.name );
+
+		return me;
+	}
+
+	Tabs.prototype._setEvents = function() {
+		var me  = this
+		,	$me = $(me.element)
+		,	_eventIn
+		,	_eventOut;
+
+		me._unsetEvents();
+
+		switch( me.options.trigger ) {
+			case 'hover':
+				_eventIn = 'mouseenter.' + me.name;
+			break;
+
+			case 'click':
+				_eventIn = 'click.' + me.name;
+			break;
+		}
+
+		$me.on( _eventIn, function( event_ ) {
+			var $_element = me._getItem( event_ );
+
+			if(  $_element && ! me._isOpen( $_element ) )
+				me.open( $_element );
+		});
+
+	}
+
+	Tabs.prototype.init = function() {
+		var me  = this;
+		var $me = $(me.element);
+		
+	}
+
+	Tabs.prototype.open = function( item_ ) {
+		var me  = this;
+		var $me = $(me.element);
+
+		if( me.options.enabled === true ) {
+			
+			try {
+				var deferred = me.options.beforeOpen.call( item_ );
+				deferred
+					.done(function(){
+						me._open( item_ );
+					})
+					.fail(function(){
+						me.state = 'closed';
+						$me.trigger('ifNotOpened.' + me.name);
+						$me.trigger('ifOpenedOrNot.' + me.name);
+					})
+			} catch( e ) {
+				me._open( item_ );
+			}
+
+		}
+	}
+
+	Tabs.prototype._open = function( item_ ) {
+		var me  = this
+		,	$me = $(me.element)
+		,	_target = $(document).find( item_.data( me.options.dataTarget ) )
+
+		
+		if( me.options.dataTarget ) {
+			
+			if( item_.data('tabs-data') !== undefined ) {
+				try {
+					$.get( item_.data('tabs-data') )
+						.done( function( document_, result_, answer_ ) {
+							if( me.close() ) {
+								_target.html( answer_.responseText );
+								me._openAnimation( item_, _target );
+								$me.trigger('ifOpenedOrNot.' + me.name);
+							}
+						})
+						.fail( function( answer_ ) {
+							$me.trigger('ifNotOpened.' + me.name);
+							$me.trigger('ifOpenedOrNot.' + me.name);
+						})
+				} catch( e ) {
+					$me.trigger('ifNotOpened.' + me.name);
+					$me.trigger('ifOpenedOrNot.' + me.name);
+				}
+			}
+			else
+				if( me.close() ) {
+					me._openAnimation( item_, _target );
+				}
+		}
+	}
+
+	Tabs.prototype._openAnimation = function( item_, target_ ) {
+		var me  = this
+		,	$me = $(me.element);
+
+			item_.addClass('_active_');
+			
+			if( me.options.animation ) {
+				target_.fadeIn();
+			}
+			else {
+				target_.show();
+			}
+
+			$me.trigger('open.' + me.name);
+	}
+
+	Tabs.prototype.close = function() {
+		var me  = this;
+		var $me = $(me.element);
+
+		$.each( me._getItems(), function( index_, item_ ) {
+			if( me._isOpen( item_ ) ) {
+				$(document).find( item_.data( me.options.dataTarget ) ).hide();
+				item_.removeClass('_active_');
+			}
+		});
+
+		$me.trigger('close.' + me.name);
+
+		return true;
+	}
+
+	Tabs.prototype._isOpen = function( item_ ) {
+		var me  = this;
+		var $me = $(me.element);
+
+		return item_.hasClass( '_active_' );
+	}
+
+	$.fn[_name] = function( options_ ) {
+		return this.each(function() {
+			if( ! $.data( this, 'kit-' + _name ) ) {
+				$.data( this, 'kit-' + _name, new Tabs( this, options_ ) );
+			}
+			else {
+				typeof options_ === 'object' ? $.data( this, 'kit-' + _name )._setOptions( options_ ) :
+					typeof options_ === 'string' && options_.charAt(0) !== '_' ? $.data( this, 'kit-' + _name )[ options_ ] : $.error( 'What do you want to do?' );
+			}
+		});
+	}
+
+})( jQuery, window, document );

data/vendor/assets/stylesheet/_init.scss

@@ -0,0 +1,240 @@
+// // ================================ %BODY% ================================ \\
+body {
+	font: $theme__font-size $theme__font-family;
+	line-height: $theme__line-height;
+	color: $theme__color;
+	background-color: $theme__background-color;
+	// -webkit-font-smoothing: none;
+	-webkit-font-smoothing: antialiased;
+}
+
+// input {
+// 	font: $theme-font-size $theme-font-family;
+// }
+
+section,
+.#{$object__section} {
+	margin: #{$object__section-margin};
+}
+
+article,
+.#{$object__article} {
+	margin-bottom: $object__article-margin-bottom;
+}
+
+p {
+	margin-bottom: $object__section-margin-bottom / 2;
+}
+
+
+
+
+
+// ================================ %HEADERS% ================================ \\
+@function __get-header-size( $number ) {
+	@return floor($theme__font-size + (abs($number - 6) * 4.5));
+}
+
+%__init-headers {
+	margin-top: 0;
+	font-family: $theme__header-font-family;
+}
+
+@for $i from 1 through 6 {
+	h#{$i} {
+		@extend %__init-headers;
+
+		font-size: __get-header-size( $i );
+		line-height: __get-header-size( $i ) + $i - 6;
+		margin-bottom: __get-header-size( $i ) / 2;
+	}
+}
+
+
+
+
+
+
+// ================================ %TYPOGRAPHY% ================================ \\
+ 
+small {
+	font-size: 85%;
+}
+
+strong {
+	font-weight: bold ;
+}
+
+em {
+	font-style: normal;
+}
+
+abbr {
+	border-bottom: 1px dotted;
+	&[title] {
+		cursor: help;
+	}
+}
+
+// --------------------- %blockquote% ---------------------
+blockquote {
+	padding: 0 0 0 $theme__blockquote-padding;
+	border-left: $theme__blockquote-border;
+	margin:0 0 $theme__blockquote-padding;
+	font-weight: 300;
+	small {
+		color: $theme__blockquote__sign-color;
+		&:before
+		{
+			content: '\2014 \00A0';
+		}
+	}
+
+	&.#{$mixin__float-right}
+	{
+		float: right;
+		padding: 0 $theme__blockquote-padding 0 0;
+		border-left: none;
+		border-right: $theme__blockquote-border;
+		text-align: right;
+	}
+}
+
+// --------------------- %address% ---------------------
+address {
+	font-style: normal ;
+	margin: 0 0 $object__section-margin-bottom 0;
+}
+
+// --------------------- %lists% ---------------------
+ul, ol {
+	margin: $theme__list-margin;
+	padding: 0;
+	line-height: $theme__list-line-height;
+
+	// &.#{$modificator-type-unstyled}
+	// {
+	// 	list-style: none;
+	// 	margin-left: $theme__list-margin-left / 2;
+	// }
+
+	ul, ol
+	{
+		margin-bottom: 0;
+	}
+}
+
+// --------------------- %descriptions% ---------------------
+dl {
+	margin: $theme__description-margin;
+	line-height: $theme__description-line-height;
+
+	dt {
+		font-weight: bold;
+	}
+
+	dd {
+		margin-left: $theme__description__defenition-margin-left;
+	}
+
+	&.#{$mod__horizontal}
+	{
+		dt {
+			width: $theme__description__defenition__inline-width;
+			float: left;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+			text-align: right;
+		}
+
+		dd {
+			margin-left: $theme__description__defenition__inline-width + 10px;
+		}
+	}
+}
+
+
+
+// ================================ %GRID% ================================ \\
+
+@function __get-column-width( $column-quantity: $object__column-quantity, $column-width: $object__column-width, $gutter-width: $object__column__gutter-width ) {
+	@return $column-width * $column-quantity + $gutter-width * ( $column-quantity - 1 );
+}
+
+@function __get-column-offset-width( $column-quantity: $object__column-quantity, $column-width: $object__column-width, $gutter-width: $object__column__gutter-width ) {
+	@return $column-width * $column-quantity + $gutter-width * ( $column-quantity + 1 );
+}
+
+.#{$object__container} {
+	width: $object__row-width;
+	margin: 0 auto;
+}
+
+.#{$object__row} {
+	margin-left: -$object__column__gutter-width;
+	width: $object__row-width;
+	@include clearfix;
+
+	[class^='#{$object__column}'] {
+		float: left;
+		margin-left: $object__column__gutter-width;
+	}
+
+	@for $i from 1 through $object__column-quantity {
+		& > .#{$object__column}#{$i} {
+			width: __get-column-width($i);
+		}
+
+		& > .#{$object__column-offset}#{$i} {
+			margin-left: __get-column-offset-width($i);
+		}
+	}
+}
+
+.#{$object__row-fluid} {
+	width: $object__row-fluid-width + $object__row-fluid__column__gutter-width;
+	margin-left: -$object__row-fluid__column__gutter-width;
+	@include clearfix;
+
+	[class^='#{$object__column}'] {
+		float: left;
+		margin-left: $object__row-fluid__column__gutter-width;
+	}
+
+	@for $i from 1 through $object__column-quantity {
+		& > .#{$object__column}#{$i} {
+			width: __get-column-width($i, $object__row-fluid__column-width, $object__row-fluid__column__gutter-width);
+		}
+
+		& > .#{$object__column-offset}#{$i} {
+			margin-left: __get-column-offset-width($i, $object__row-fluid__column-width, $object__row-fluid__column__gutter-width);
+		}
+	}
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

data/vendor/assets/stylesheet/_mixins.scss

@@ -0,0 +1,218 @@
+@mixin clearfix {
+	*zoom: 1;
+	&:before,
+	&:after
+	{
+		display: table;
+		content: " ";
+		line-height: 0;
+	}
+	&:after
+	{
+		clear: both;
+	}
+}
+
+@mixin box-sizing( $box-sizing ) {
+	-webkit-box-sizing: $box-sizing;
+	-moz-box-sizing: $box-sizing;
+	-ms-box-sizing: $box-sizing;
+	-o-box-sizing: $box-sizing;
+	box-sizing: $box-sizing;
+}
+
+@mixin box-shadow( $box-shadow... ) {
+	-webkit-box-shadow: $box-shadow;
+	-moz-box-shadow: $box-shadow;
+	-ms-box-shadow: $box-shadow;
+	-o-box-shadow: $box-shadow;
+	box-shadow: $box-shadow;
+}
+
+@mixin text-shadow( $text-shadow... ) {
+	-webkit-text-shadow: $text-shadow;
+	-moz-text-shadow: $text-shadow;
+	-ms-text-shadow: $text-shadow;
+	-o-text-shadow: $text-shadow;
+	text-shadow: $text-shadow;
+}
+
+@mixin border-radius( $border-radius... ) {
+	-webkit-border-radius: $border-radius;
+	-moz-border-radius: $border-radius;
+	-ms-border-radius: $border-radius;
+	-o-border-radius: $border-radius;
+	border-radius: $border-radius;
+}
+
+@mixin gradient-stripes($angle) {
+    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.35, rgba(255,255,255,.35)), color-stop(.35, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.35)), color-stop(.75, rgba(255,255,255,.35)), color-stop(.75, transparent), to(transparent))!important;
+    background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.35) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 75%, transparent 75%, transparent)!important;
+    background-image: -moz-linear-gradient($angle, rgba(255,255,255,.35) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 75%, transparent 75%, transparent)!important;
+    background-image: -o-linear-gradient($angle, rgba(255,255,255,.35) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 75%, transparent 75%, transparent)!important;
+    background-image: linear-gradient($angle, rgba(255,255,255,.35) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 75%, transparent 75%, transparent)!important;
+}
+
+@mixin gradient-stripes-dark($angle) {
+    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.1, rgba(0,0,0,.1)), color-stop(.1, transparent), color-stop(.5, transparent), color-stop(.5, rgba(0,0,0,.1)), color-stop(.75, rgba(0,0,0,.1)), color-stop(.75, transparent), to(transparent))!important;
+    background-image: -webkit-linear-gradient($angle, rgba(0,0,0,.1) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.1) 50%, rgba(0,0,0,.1) 75%, transparent 75%, transparent)!important;
+    background-image: -moz-linear-gradient($angle, rgba(0,0,0,.1) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.1) 50%, rgba(0,0,0,.1) 75%, transparent 75%, transparent)!important;
+    background-image: -o-linear-gradient($angle, rgba(0,0,0,.1) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.1) 50%, rgba(0,0,0,.1) 75%, transparent 75%, transparent)!important;
+    background-image: linear-gradient($angle, rgba(0,0,0,.1) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.1) 50%, rgba(0,0,0,.1) 75%, transparent 75%, transparent)!important;
+}
+
+@mixin gradient-horizontal( $startColor, $endColor ) {
+	background-color: $endColor;
+    background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
+    background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
+    background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+    background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
+    background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}');
+}
+
+@mixin gradient-horizontal-three-colors($startColor, $midColor, $colorStop, $endColor) {
+	// background-color: mix($midColor, $endColor, 80%);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
+    background-image: -webkit-linear-gradient(left, $startColor, $midColor $colorStop, $endColor);
+    background-image: -moz-linear-gradient(left, top, $startColor, $midColor $colorStop, $endColor);
+    background-image: -o-linear-gradient(left, $startColor, $midColor $colorStop, $endColor);
+    background-image: linear-gradient(to right, $startColor, $midColor $colorStop, $endColor);
+    background-repeat: no-repeat;
+    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}');
+}
+
+@mixin gradient-vertical-three-colors($startColor, $midColor, $colorStop, $endColor) {
+	// background-color: mix($midColor, $endColor, 80%);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
+    background-image: -webkit-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
+    background-image: -moz-linear-gradient(top, top, $startColor, $midColor $colorStop, $endColor);
+    background-image: -o-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
+    background-image: linear-gradient(to bottom, $startColor, $midColor $colorStop, $endColor);
+    background-repeat: no-repeat;
+    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}');
+}
+
+@mixin gradient-vertical( $startColor, $endColor ) {
+	background-color: mix($startColor, $endColor, 60%);
+	background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
+	background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
+	background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
+	background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
+	background-repeat: repeat-x;
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}');
+}
+
+@mixin animation( $animation... ) {
+	animation: $animation;
+	-webkit-animation: $animation;
+	-moz-animation: $animation;
+	-o-animation: $animation;
+	-ms-animation: $animation;
+}
+
+@mixin transition( $transition... ) {
+	transition: $transition;
+	-webkit-transition: $transition;
+	-moz-transition: $transition;
+	-ms-transition: $transition;
+	-o-transition: $transition;
+}
+
+@mixin perspective( $perspective ) {
+	perspective: $perspective;
+	-webkit-perspective: $perspective;
+	-moz-perspective: $perspective;
+	-ms-perspective: $perspective;
+	-o-perspective: $perspective;
+}
+
+@mixin transition-duration( $transition-duration... ) {
+	transition-duration: $transition-duration;
+	-webkit-transition-duration: $transition-duration;
+	-moz-transition-duration: $transition-duration;
+	-ms-transition-duration: $transition-duration;
+	-o-transition-duration: $transition-duration;
+}
+
+@mixin transition-property( $transition-property... ) {
+	transition-property: $transition-property;
+	-webkit-transition-property: $transition-property;
+	-moz-transition-property: $transition-property;
+	-ms-transition-property: $transition-property;
+	-o-transition-property: $transition-property;
+}
+
+@mixin transform( $transform... ) {
+	transform: $transform;
+	-webkit-transform: $transform;
+	-moz-transform: $transform;
+	-ms-transform: $transform;
+	-o-transform: $transform;
+}
+
+@mixin transform-style( $transform-style ) {
+	transform-style: $transform-style;
+	-webkit-transform-style: $transform-style;
+	-moz-transform-style: $transform-style;
+	-ms-transform-style: $transform-style;
+	-o-transform-style: $transform-style;
+}
+
+@mixin transform-origin( $transform-origin... ) {
+	transform-origin: $transform-origin;
+	-webkit-transform-origin: $transform-origin;
+	-moz-transform-origin: $transform-origin;
+	-ms-transform-origin: $transform-origin;
+	-o-transform-origin: $transform-origin;
+}
+
+@mixin filter( $filter... ) {
+	filter: $filter;
+	-webkit-filter: $filter;
+	-moz-filter: $filter;
+	-ms-filter: $filter;
+	-o-filter: $filter;
+}
+
+@mixin opacity( $opacity... ) {
+	opacity: $opacity;
+	-webkit-opacity: $opacity;
+	-moz-opacity: $opacity;
+	-ms-opacity: $opacity;
+	-o-opacity: $opacity;
+}
+
+@mixin transitions( $transition ) {
+	$_types: '', '-webkit-', '-moz-', '-o-', '-ms-';
+
+	@each $type in $_types {
+		#{$type}transition: _generate-transitions-fields( $type, $transition... ) ;
+	}
+}
+
+@mixin transitions( $transition... ) {
+	$_types: '', '-webkit-', '-moz-', '-o-', '-ms-';
+
+	@each $type in $_types {
+		#{$type}transition: _generate-transitions-fields( $type, $transition... ) ;
+	}
+}
+
+@function _generate-transitions-fields( $type, $transition... ) {
+	$_return: '';
+	@each $tr in $transition {
+		@if $_return != '' {
+			$_return: $_return + ', ';
+		}
+		$_return: $_return + _generate-transitions( $tr, $type );
+	}
+
+	@return #{$_return};
+}
+
+@function _generate-transitions( $transition, $type ) {
+	@return nth($transition, 1) #{$type}nth($transition, 2) nth($transition, 3);
+}