macbury-metro-ui-rails 0.15.9

data/vendor/assets/javascripts/metro-ui/tile-drag.js

@@ -0,0 +1,332 @@
+/**
+ * jQuery plugin for drag'n'drop tiles
+ *
+ * to init plugin just add class 'tile-drag' to your tile-group element
+ * or add attribute data-role="tile-drag"
+ *
+ * to handle drag/drop events use next code
+
+$(function(){
+    $('#tile_group_id').on('drag', function(e, draggingTile, parentGroup){
+       ... your code ...
+    });
+    $('#tile_group_id').on('drop', function(e, draggingTile, targetGroup){
+        ... your code ...
+    });
+});
+
+ *
+ * if you want to use drag'n'drop between groups use attribute data-param-group="any_id" to link groups
+ */
+(function($) {
+
+    $.TileDrag = function(element, options) {
+
+        var defaults = {
+            // if group sets and exists other same groups, it is possible to drag'n'drop from one group to another
+            group: null
+        };
+
+        var plugin = this;
+
+        plugin.settings = {};
+
+        var $element = $(element),
+            $groups,
+            settings,
+            tiles,
+            $draggingTile,
+            $parentGroup, // parent group for dragging tile
+            draggingTileWidth,
+            draggingTileHeight,
+            $phantomTile,
+            tileDeltaX,
+            tileDeltaY,
+            groupOffsetX,
+            groupOffsetY,
+            tilesCoordinates,
+            tileSearchCount = 0, // uses for findTileUnderCursor function
+            tileUnderCursorIndex,
+            tileUnderCursorSide;
+
+        plugin.init = function() {
+            settings = plugin.settings = $.extend({}, defaults, options);
+
+            // if group is set
+            if (settings.group) {
+                // search other elements with same group
+                $groups = $('[data-role=tile-drag], .tile-drag').filter('[data-param-group=' + settings.group + ']');
+            } else {
+                $groups = $element;
+            }
+
+            // any tile-group must be relative
+            $groups.css({
+                'position': 'relative'
+            });
+
+            // select all tiles within group
+            tiles = $groups.children('.tile');
+
+            tiles.on('mousedown', startDrag);
+
+        };
+
+        var startDrag = function(event) {
+            var $tile,
+                tilePosition,
+                tilePositionX,
+                tilePositionY,
+                groupOffset;
+
+            event.preventDefault();
+
+            // currently dragging tile
+            $draggingTile = $tile = $(this);
+
+            // search parent group
+            $parentGroup = $tile.parents('.tile-drag');
+
+            // dragging tile dimentions
+            draggingTileWidth = $tile.outerWidth();
+            draggingTileHeight = $tile.outerHeight();
+
+            // hidden tile to place it where dragging tile will dropped
+            $phantomTile = $('<div></div>');
+            $phantomTile.css({
+                'background': 'none'
+            });
+            $phantomTile.addClass('tile');
+            if ($tile.hasClass('double')) {
+                $phantomTile.addClass('double');
+            } else if ($tile.hasClass('triple')) {
+                $phantomTile.addClass('triple');
+            } else if ($tile.hasClass('quadro')) {
+                $phantomTile.addClass('quadro');
+            } else if ($tile.hasClass('double-vertical')) {
+                $phantomTile.addClass('double-vertical');
+            } else if ($tile.hasClass('triple-vertical')) {
+                $phantomTile.addClass('triple-vertical');
+            } else if ($tile.hasClass('quadro-vertical')) {
+                $phantomTile.addClass('quadro-vertical');
+            }
+
+            // dragging tile position within group
+            tilePosition = $tile.position();
+            tilePositionX = tilePosition.left;
+            tilePositionY = tilePosition.top;
+
+            // group element offset relate to document border
+            groupOffset = $parentGroup.offset();
+            groupOffsetX = groupOffset.left;
+            groupOffsetY = groupOffset.top;
+
+            // pixels count between cursor and dragging tile border
+            tileDeltaX = event.pageX - groupOffsetX - tilePositionX;
+            tileDeltaY = event.pageY - groupOffsetY - tilePositionY;
+
+            // place phantom tile instead dragging one
+            $phantomTile.insertAfter($tile);
+
+            /*$tile.detach();
+            $tile.appendTo($parentGroup);*/
+
+            // still now it absolutely positioned
+            $tile.css({
+                'position':     'absolute',
+                'left':         tilePositionX,
+                'top':          tilePositionY,
+                'z-index':      100000
+            });
+
+            // store it for future
+            $tile.data('dragging', true);
+            storeTilesCoordinates();
+
+            // some necessary event handlers
+            $(document).on('mousemove.tiledrag', dragTile);
+            $(document).on('mouseup.tiledrag', dragStop);
+
+            // triggering event
+            $groups.trigger('drag', [$draggingTile, $parentGroup]);
+        };
+
+        /**
+         * it function called on every mousemove event
+         */
+        var dragTile = function (event) {
+
+            // all we need is index of tile under cursor (and under dragging tile) if it exists
+            var findTileIndex;
+
+            event.preventDefault();
+
+            // move dragging tile
+            $draggingTile.css({
+                'left': event.pageX - groupOffsetX - tileDeltaX,
+                'top':  event.pageY - groupOffsetY - tileDeltaY
+            });
+
+            findTileIndex = findTileUnderCursor(event);
+            if (findTileIndex) {
+                clearPlaceForTile($(tiles[findTileIndex]));
+            }
+        };
+
+        /**
+         * when this function called dragging tile dropping to clear place (instead phantom tile)
+         * removing events
+         * and some other necessary changes
+         */
+        var dragStop = function (event) {
+            var targetGroup;
+
+            event.preventDefault();
+
+            $(document).off('mousemove.tiledrag');
+            $(document).off('mouseup.tiledrag');
+
+            $draggingTile.detach();
+            $draggingTile.insertAfter($phantomTile);
+
+            targetGroup = $phantomTile.parents('.tile-drag');
+            $phantomTile.remove();
+
+            $draggingTile.css({
+                'position': '',
+                'left':     '',
+                'top':      '',
+                'z-index':  ''
+            });
+
+            $draggingTile.data('dragging', false);
+
+            $groups.trigger('drop', [$draggingTile, targetGroup]);
+        };
+
+        /*
+         * stores tiles coordinates for future finding one tile under cursor
+         * excluding current dragging tile
+         */
+        var storeTilesCoordinates = function () {
+            tilesCoordinates = {};
+            tiles.each(function (index, tile) {
+                var $tile, offset;
+
+                $tile = $(tile);
+
+                // we dont need dragging tile coordinates
+                if ($tile.data('dragging')) return;
+
+                offset = $tile.offset();
+                // it is not real coordinates related to document border
+                // but corrected for less computing during dragging (tile moving)
+                tilesCoordinates[index] = {
+                    x1: offset.left + tileDeltaX - draggingTileWidth / 2,
+                    y1: offset.top + tileDeltaY - draggingTileHeight / 2,
+                    x2: offset.left + $tile.outerWidth() + tileDeltaX - draggingTileWidth / 2,
+                    y2: offset.top + $tile.outerHeight() + tileDeltaY - draggingTileHeight / 2
+                }
+            });
+        };
+
+        /**
+         * search tile under cursor using tileCoordinates from storeTilesCoordinates function
+         * search occurred only one time per ten times for less load and more smooth
+         */
+        var findTileUnderCursor = function (event) {
+            var i, coord,
+                tileIndex = false,
+                tileSide;
+
+            if (tileSearchCount < 10) {
+                tileSearchCount++;
+                return false;
+            }
+            tileSearchCount = 0;
+
+            for (i in tilesCoordinates) {
+                if (!tilesCoordinates.hasOwnProperty(i)) return;
+                coord = tilesCoordinates[i];
+                if (coord.x1 < event.pageX && event.pageX < coord.x2 && coord.y1 < event.pageY && event.pageY < coord.y2) {
+                    tileIndex = i;
+                    break;
+                }
+            }
+
+            // detect side of tile (left or right) to clear place before or after tile
+            if (tileIndex) {
+                if (event.pageX < coord.x1 + $(tiles[tileIndex]).outerWidth() / 2) {
+                    tileSide = 'before';
+                } else {
+                    tileSide = 'after';
+                }
+            }
+            if (tileSide === tileUnderCursorSide && tileIndex === tileUnderCursorIndex) {
+                return false;
+            }
+            tileUnderCursorSide = tileSide;
+            tileUnderCursorIndex = tileIndex;
+
+            return tileIndex;
+        };
+
+        /**
+         * just put phantom tile near tile under cursor (before or after)
+         * and remove previous phantom tile
+         */
+        var clearPlaceForTile = function ($tileUnderCursor) {
+            var $oldPhantomTile,
+                groupOffset;
+
+            $oldPhantomTile = $phantomTile;
+            $phantomTile = $oldPhantomTile.clone();
+
+            // before or after, this is question ...
+            if (tileUnderCursorSide === 'before') {
+                $phantomTile.insertBefore($tileUnderCursor);
+            } else {
+                $phantomTile.insertAfter($tileUnderCursor);
+            }
+
+            $oldPhantomTile.remove();
+            // it is necessary to store new tile coordinates
+            storeTilesCoordinates();
+            // and parent group coordinates
+            groupOffset = $parentGroup.offset();
+            groupOffsetX = groupOffset.left;
+            groupOffsetY = groupOffset.top;
+        };
+
+        // return all groups involved to this plugin
+        plugin.getGroups = function () {
+            return $groups;
+        };
+
+        plugin.init();
+
+    };
+
+    $.fn.TileDrag = function(options) {
+
+        return this.each(function() {
+            if (undefined == $(this).data('TileDrag')) {
+                var plugin = new $.TileDrag(this, options);
+                var $groups = plugin.getGroups();
+                $groups.data('TileDrag', plugin);
+            }
+        });
+
+    };
+
+})(jQuery);
+
+$(function(){
+    var allTileGroups = $('[data-role=tile-drag], .tile-drag');
+    allTileGroups.each(function (index, tileGroup) {
+        var params = {};
+        $tileGroup = $(tileGroup);
+        params.group         = $tileGroup.data('paramGroup');
+        $tileGroup.TileDrag(params);
+    });
+});

data/vendor/assets/javascripts/metro-ui/tile-slider.js

@@ -0,0 +1,196 @@
+$.easing.doubleSqrt = function(t, millisecondsSince, startValue, endValue, totalDuration) {
+    var res = Math.sqrt(Math.sqrt(t));
+    return res;
+};
+
+(function($) {
+
+    $.tileBlockSlider = function(element, options) {
+
+        // настройки по умолчанию
+        var defaults = {
+            // период смены картинок
+            period: 2000,
+            // продолжительность анимации
+            duration: 1000,
+            // направление анимации (up, down, left, right)
+            direction: 'up'
+        };
+        // объект плагина
+        var plugin = this;
+        // настройки конкретного объекта
+        plugin.settings = {};
+
+        var $element = $(element), // reference to the jQuery version of DOM element
+            element = element;    // reference to the actual DOM element
+
+        var blocks, // все картинки
+            currentBlockIndex, // индекс текущего блока
+            slideInPosition, // стартовое положение блока перед началом появления
+            slideOutPosition, // финальное положение блока при скрытии
+            tileWidth, // размеры плитки
+            tileHeight;
+
+        // инициализируем
+        plugin.init = function () {
+
+            plugin.settings = $.extend({}, defaults, options);
+
+            // все блоки
+            blocks = $element.children(".tile-content");
+
+            // если блок всего 1, то слайдинг не нужен
+            if (blocks.length <= 1) {
+                return;
+            }
+
+            // индекс активного в данный момент блока
+            currentBlockIndex = 0;
+
+            // размеры текущей плитки
+            tileWidth = $element.innerWidth();
+            tileHeight = $element.innerHeight();
+            // положение блоков
+            slideInPosition = getSlideInPosition();
+            slideOutPosition = getSlideOutPosition();
+
+            // подготавливаем блоки к анимации
+            blocks.each(function (index, block) {
+                block = $(block);
+                // блоки должны быть position:absolute
+                // возможно этот параметр задан через класс стилей
+                // проверяем, и добавляем если это не так
+                if (block.css('position') !== 'absolute') {
+                    block.css('position', 'absolute');
+                }
+                // скрываем все блоки кроме первого
+                if (index !== 0) {
+                    block.css('left', tileWidth);
+                }
+            });
+
+            // запускаем интервал для смены блоков
+            setInterval(function () {
+                slideBlock();
+            }, plugin.settings.period);
+        };
+
+        // смена блоков
+        var slideBlock = function() {
+
+            var slideOutBlock, // блок который надо скрыть
+                slideInBlock, // блок который надо показать
+                mainPosition = {'left': 0, 'top': 0},
+                options;
+
+            slideOutBlock = $(blocks[currentBlockIndex]);
+
+            currentBlockIndex++;
+            if (currentBlockIndex >= blocks.length) {
+                currentBlockIndex = 0;
+            }
+            slideInBlock = $(blocks[currentBlockIndex]);
+
+            slideInBlock.css(slideInPosition);
+
+            options = {
+                duration: plugin.settings.duration,
+                easing: 'doubleSqrt'
+            };
+
+            slideOutBlock.animate(slideOutPosition, options);
+            slideInBlock.animate(mainPosition, options);
+        };
+
+        /**
+         * возвращает стартовую позицию для блока который должен появиться {left: xxx, top: yyy}
+         */
+        var getSlideInPosition = function () {
+            var pos;
+            if (plugin.settings.direction === 'left') {
+                pos = {
+                    'left': tileWidth,
+                    'top': 0
+                }
+            } else if (plugin.settings.direction === 'right') {
+                pos = {
+                    'left': -tileWidth,
+                    'top': 0
+                }
+            } else if (plugin.settings.direction === 'up') {
+                pos = {
+                    'left': 0,
+                    'top': tileHeight
+                }
+            } else if (plugin.settings.direction === 'down') {
+                pos = {
+                    'left': 0,
+                    'top': -tileHeight
+                }
+            }
+            return pos;
+        };
+
+        /**
+         * возвращает финальную позицию для блока который должен скрыться {left: xxx, top: yyy}
+         */
+        var getSlideOutPosition = function () {
+            var pos;
+            if (plugin.settings.direction === 'left') {
+                pos = {
+                    'left': -tileWidth,
+                    'top': 0
+                }
+            } else if (plugin.settings.direction === 'right') {
+                pos = {
+                    'left': tileWidth,
+                    'top': 0
+                }
+            } else if (plugin.settings.direction === 'up') {
+                pos = {
+                    'left': 0,
+                    'top': -tileHeight
+                }
+            } else if (plugin.settings.direction === 'down') {
+                pos = {
+                    'left': 0,
+                    'top': tileHeight
+                }
+            }
+            return pos;
+        };
+
+        plugin.getParams = function() {
+
+            // code goes here
+
+        }
+
+        plugin.init();
+
+    }
+
+    $.fn.tileBlockSlider = function(options) {
+        return this.each(function() {
+            if (undefined == $(this).data('tileBlockSlider')) {
+                var plugin = new $.tileBlockSlider(this, options);
+                $(this).data('tileBlockSlider', plugin);
+            }
+        });
+    }
+
+})(jQuery);
+
+
+$(window).ready(function(){
+    var slidedTiles = $('[data-role=tile-slider], .block-slider, .tile-slider');
+    slidedTiles.each(function (index, tile) {
+        var params = {};
+        tile = $(tile);
+        params.direction = tile.data('paramDirection');
+        params.duration = tile.data('paramDuration');
+        params.period = tile.data('paramPeriod');
+        tile.tileBlockSlider(params);
+    })
+
+});

data/vendor/assets/javascripts/metro-ui.js

@@ -0,0 +1,10 @@
+//= require metro-ui/input-control
+//= require metro-ui/rating
+//= require metro-ui/dropdown
+//= require metro-ui/slider
+//= require metro-ui/tile-slider
+//= require metro-ui/tile-drag
+//= require metro-ui/pagecontrol
+//= require metro-ui/carousel
+//= require metro-ui/buttonset
+//= require metro-ui/accordion

data/vendor/toolkit/metro-ui/accordion.less

@@ -0,0 +1,69 @@
+/*
+ * Metro UI CSS
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ *
+ * Accordion.less
+ */
+
+@acc-image-collapse: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHpSURBVEhLtZavT8JRFMXBGQgEg5FAYNNgIBAMBhpsEowEIpFgYLMYMBsMFht/gRNHgRn8EzDoCBY2CAQ3g4GAAz/ncUW+ym++nu3swnn3nfu47/se32BgDobDYRie8DEFozAiHXRhB9aDwWAFvjl1CqYWkDGhSDwjykgmL8QW1LgK7cEMPIA3jF/MKzTGYDBIwLYxbfJMkHMIm/B9YT4JWdiDZVa5Y/JCkBtizqXNPTXZCwa0ciXkTFoZFEoyvw/Vuh8wEEZUS8omrQ28Svh8wO8HYiy2iUu3ZRbw2MarMV6srV6tWbihywLPOH5qVUy9z8FXG/MNeD7A8y0+6xBVnOov7mFKBaJ2iHwFns+EqApot90JnQR9XAk2bRItikRUYBt+OukfoAIdFqCLzAOqrwSbNokIvl1XAOri8hWY7xM6KlCH3qPtD45hTZV2eV51KBIjfXOo5fj1iHEn8OUaNhFCTtgQeD3Cqn11FfUrdJ9fmrQ28CjAPp7agx8gpqF+VtKklSFTPHST5k3ygoEiVPUS1PlYGszTymV+ZdJ0kJCxxAZFRps0B+RoQ9VzPSjTV/4bJEZgGeoa161YwCgpM+MRWh7eWU4Vzdtzw9zXFibGCFnoXls4sO5fCrPv15Ya2i18kv4XgcAXTr+7IYi7bgIAAAAASUVORK5CYII%3D);
+@acc-image-expand: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIzSURBVEhLtZYhSENRFIb3HgaDwWA0LAgaBBcMggu2DTQYFwwG44JBsE6MBpOwIhO0iahYJgoqBoNhFjEqaDAIBsOCsvn99509mXub080f/t33/nPuOfedd+7d82ItUK1W++AslykYh4PSwTN8gsee5x3AF6dGIDKBAjMsMS4zKpCC3DI+QNmVaBjOwFGYx77SKlGISqUyDh+NaZObAp8JeAdff/THIQPLsMAq+03+Efj2MmfN5i6aXA8MWrkc5kz6NUg0xfx3qNJ9AUMfokpSMOnPIFaOOG+w1hCh+MjYtCzY5mENOZMbgK2HWKVwsQhavUrT8gXh11YCAXuCeCrVkM+N+vzJ9/1iYO4ctOsNwznM+PxoEx3AbuMQpjwe45KMm3Ar0APwZPN26cD9JD4Ldq2NpwAhIuZPwW21571uTA+B9ivYtBBIcekqUQ/8cOo/QCW6YtzgJe8EUgCS13UK92OUQQ2h63OuL5zBwP13/yTcVYl24arpTYFz220qEHMBXqtEx7B+a3cH07Do82hq0VGyjTu5C+AJ9d+RJvaeEugMz8NtDL1y6BTE0TFxSmxtOCcM8AQ6z9ec0AGIkYXvxBwxKQBiGpYxNOyJdqGgxNBJ6jZkAzAsQWXPQe2PtsE8rVzB102KBg4z5lgiScLkpsAnju8Z1OkZvfLvwHEQFqCO8ROYJZDOFm1/MYmmPt83nyO0+pobWn62MHGIIQPdZwtd4f6lCFb7bCmqFcNuaUAs9glLFQdwvFGvGQAAAABJRU5ErkJggg%3D%3D);
+@acc-image-collapse-black: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKlSURBVEhLtZY/aNNREMeTXzOYkMGxJBkymDSGDua/QyFuERTULYJLBwdBB8HiXBSc7OxQCdJBHIqpUyodClYU8geFFBwCbSB/BJ0kKuavn3t5rX+S2D+JX7jce3fvd3fv3r17MZv+Ab/fb7fZbJd7vV7CbDa7Ebn6GtNHqNLtdteRp/P5/Oe+eBBDHYhhq9V6h+FdDFRwkDYMYxuDu6JHJo5mkF+EzzJ/xHhxmKMBB5FIJIyh5zLG6PVsNptRihEIBoNnWZdiOI2jq3+vn9JcIRwOJ4lkjYUv2u32pUKhUNSqkajX6xWPx/O42Wye5Nslp9P5tVarvdXqX5DIQ6HQd5xc06Ijg+/PQS12JalTUDuQnFssllcSeS6Xu6c0xwC72XU4HFOk7KHL5VqpVqtfDFHoAzW1Wq3bwseB3W6/T6pKnKMK1Kwr5hNerxx0oIcF6T6Dgyx02pA6JzWVSRkXYOsdbJOgkwbbSUDpvmqikGpMGPy48bSthZNEkcDdZspyh8E8t3BTKxSQ9/TwUKD6/ri0sVjM3el0diRFFubtvvg/gEjfjHO5RoELNwfV5R5UoBklnSDIjA9WMajVdSb7V3tSoHAuUEAZqSIp0VnpRX3V+JADJujz2F41pIczkH6+Eo/HT+g1Y4HqSWFzQy6c6kUYX4RNNxqNYze6PXCwN7E3By3IXHVTuuA3+vh7hEt0w9fSFUV+VGDcR+TPsHOLt+SlyPYfHB6JEk5+MHwiLdfr9W6Vy+VuX3swJHJtfBnjD7R48MmUx4IKeMrCEnxeN66R0Dc2xXpJyw2ML2uVwtBHPxqNuqSf80GS6Ra0BhV5lFTqeE5d6HxSinCplg34AgXzQfS/Y6iDPQQCgVMYSWJAOq4brv62MFZ/W5hnoNXRuzSZfgLYkUQRTJGc4wAAAABJRU5ErkJggg%3D%3D);
+@acc-image-expand-black: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAALnSURBVEhLrZY/aNNREMeTXzPYksHBQdoMGUxbSkXSpK2gULcKCnas0MEODoIOgqWrRcHJujpEonQQh2LrVKVCgxWEtMVABMFCW0iTDg4iqNikiZ/vy2vMX2v/fOHy7t293929e/fuxe36B7q6urwtLS1DhUJh0O12+xH5ihrXFpTK5/Ovkc8sLy9/LYprUdeBDDc3N9+BHcdACgczjuN8wuC69MjkqAP5ZcZu5o/hJ+o5qnHQ29sbxtBL8Ri9Ho/H54yiAXp6es6yLgp7EkdXq9c32dEgHA4PE8ksC1/lcrkrKysrSatqiEwmkwoEAk+2t7eP8+1kW1vbj3Q6/cGq/0KRh0KhXzgZsaJ9g+8vQFl2pdQZmB0o5x6P550iX1paumc0BwC7WW9tbW0iZQ99Pt/U5ubmd0cKe6CubDZ7W2M9sMNr7K4gIsq7VlwDr9d7n1Stco4mUEfRM47rQBOJxDcJD4NYLJbD1ihORoLB4ClHdU5qUntVy36ArY8MCzgadvA0CM0UVUcKVeOghx8/9NYKS1DOLWtAEOcsq4t2plpP1E8tu4sk34y7ObQ1mFFu4YJVGOgwLftfoPoqLm1/f79/Z2dnTSnyMM8VxUcPRwesNNl5CTieKCdE5ee0UEdfATqBD/mWok9BHUZaBlJWUevKOR8MiWeMVeurwZpOBe+o5TIpXe2jAiV6CQdzSpG23q1eVFQdHjpggr6I7WlHPRxG/XxqYGDgmF1zKFA9UWzO68KZ0qK3nEDwBScRHI6ZVQcEtm4yPIJOY+uz6aZ0wZ/08QQOJumG79UVJd8vMK6DfYGdW7wlbyQrPTg8Eqs4+Q37TC23vb19cWNjI1/U7g1Fbo1HMP7AimufTD0WVMBzFq6qK9rG1RD2xkZZfx66gfGIVRnUOBD6+vp86ud8MMx0EZqFkjxKJnX2EnWqFBlVLfOMY8q59OWo62AXpp/TcjGgjqumaP62wJu/LcznoOnGu3S5/gDwHX69fcclgQAAAABJRU5ErkJggg%3D%3D);
+
+.accordion {
+    .unstyled;
+    .clearfix;
+    margin-bottom: 10px;
+
+    & > li {
+        margin-bottom: 5px;
+        display: block;
+        //margin-left: -25px;
+
+        & > a {
+            display: block;
+            height: 32px;
+            background: @acc-image-expand-black 5px no-repeat;
+            background-color: rgba(217, 217, 217, 0.16);
+            padding-left: 36px;
+            padding-top: 5px;
+            #font > .navigation;
+        }
+
+        & > div {
+            border: 1px #ccc dotted;
+            padding: 10px;
+            margin-top: 5px;
+            display: none;
+        }
+    }
+
+    & > li.active {
+        & > a {
+            background-image: @acc-image-collapse-black;
+            background-color: rgba(217, 217, 217, 1);
+
+        }
+
+        & > div {
+            display: block;
+        }
+    }
+
+    &.dark {
+        & > li {
+            & > a {
+                background-color: #464646;
+                background-image: @acc-image-expand;
+                color: #fff;
+            }
+        }
+        & > li.active {
+            & > a {
+                background-color: #1e1e1e;
+                background-image: @acc-image-collapse;
+            }
+        }
+    }
+}

data/vendor/toolkit/metro-ui/bricks.less

@@ -0,0 +1,59 @@
+/*
+ * Metro UI CSS
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ *
+ * Bricks.less
+ *
+ */
+
+.item-margin {
+    margin: 0 @subunit*2 @subunit*2 0;
+}
+.column-margin {
+    margin: 0 @unit @subunit*2 0;
+}
+.group-margin {
+    margin: 0 @unit*4 @subunit*2 0;
+}
+
+[class*="-brick"] {
+}
+
+.brick {
+    .pos-rel;
+    .item-margin;
+    .as-block;
+}
+
+.short-brick {
+    .brick;
+    width: 150px;
+    height: 150px;
+}
+
+.medium-brick {
+    .brick;
+    width: 310px;
+    height: 150px;
+}
+
+/*
+.badge {
+    .brick;
+    width: @subunit*7;
+    height: @subunit*6;
+    padding-top: @subunit;
+    #font > .control;
+    color: @darken;
+    text-align: center;
+}
+*/
+
+.square {
+    display: block;
+    float: left;
+    margin-right: 10px;
+    height: 20px;
+    width: 20px;
+}