├── .bowerrc
├── .gitignore
├── Gruntfile.js
├── README.md
├── bower.json
├── demos
    └── fixed-width-page.html
├── dist
    ├── angular-layout-debug.css
    ├── angular-layout-debug.min.css
    ├── angular-layout.css
    ├── angular-layout.js
    ├── angular-layout.min.css
    └── angular-layout.min.js
├── package.json
└── src
    ├── js
        └── angular-layout.js
    └── less
        ├── angular-layout-debug.less
        └── angular-layout.less


/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 |   "directory": "vendor",
3 |   "json": "bower.json"
4 | }
5 | 
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /.idea/
2 | .DS_Store
3 | /.sass-cache/
4 | /node_modules/
5 | /vendor/
6 | /build/


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
  1 | module.exports = function (grunt) {
  2 | 
  3 |     /**
  4 |      * Load required Grunt tasks. These are installed based on the versions listed
  5 |      * in `package.json` when you do `npm install` in this directory.
  6 |      */
  7 |     grunt.loadNpmTasks('grunt-contrib-clean');
  8 |     grunt.loadNpmTasks('grunt-contrib-uglify');
  9 |     grunt.loadNpmTasks('grunt-contrib-less');
 10 |     grunt.loadNpmTasks('grunt-contrib-copy');
 11 |     grunt.loadNpmTasks('grunt-contrib-cssmin');
 12 |     grunt.loadNpmTasks('grunt-banner');
 13 |     grunt.loadNpmTasks('grunt-autoprefixer');
 14 | 
 15 |     /**
 16 |      * This is the configuration object Grunt uses to give each plugin its
 17 |      * instructions.
 18 |      */
 19 |     grunt.initConfig({
 20 |         /**
 21 |          * We read in our `package.json` file so we can access the package name and
 22 |          * version. It's already there, so we don't repeat ourselves here.
 23 |          */
 24 |         pkg: grunt.file.readJSON("package.json"),
 25 | 
 26 |         /**
 27 |          * The banner is the comment that is placed at the top of our compiled
 28 |          * source files. It is first processed as a Grunt template, where the `<%=`
 29 |          * pairs are evaluated based on this very configuration object.
 30 |          */
 31 |         usebanner: {
 32 |             dist: {
 33 |                 options: {
 34 |                     banner: '/**\n' +
 35 |                         ' * <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %>\n' +
 36 |                         ' * <%= pkg.homepage %>\n' +
 37 |                         ' *\n' +
 38 |                         ' * Copyright (c) <%= grunt.template.today("yyyy") %>\n' +
 39 |                         ' * Authors : Gabriele Genta & Martin Mouterde\n' +
 40 |                         ' * Licensed <%= pkg.licenses.type %> <<%= pkg.licenses.url %>>\n' +
 41 |                         ' */'
 42 |                 },
 43 |                 files: {
 44 |                     src: [ 'dist/**']
 45 |                 }
 46 |             }
 47 |         },
 48 |         autoprefixer: {
 49 |             dist: {
 50 |                 src: 'dist/angular-layout.css',
 51 |                 dest: 'dist/angular-layout.css'
 52 |             }
 53 |         },
 54 |         /**
 55 |          * The directories to delete when `grunt clean` is executed.
 56 |          */
 57 |         clean: [
 58 |             'dist/'
 59 |         ],
 60 | 
 61 |         copy: {
 62 |             dist: {
 63 |                 files: [
 64 |                     {
 65 |                         src: [ 'src/js/angular-layout.js' ],
 66 |                         dest: 'dist/angular-layout.js'
 67 |                     }
 68 |                 ]
 69 |             }
 70 |         },
 71 |         /**
 72 |          * Minify the sources!
 73 |          */
 74 |         uglify: {
 75 |             dist: {
 76 |                 files: {
 77 |                     'dist/angular-layout.min.js': 'src/js/angular-layout.js'
 78 |                 }
 79 |             }
 80 |         },
 81 |         cssmin: {
 82 |             dist: {
 83 |                 files: [
 84 |                     {
 85 |                         expand: true,
 86 |                         cwd: 'dist',
 87 |                         src: ['*.css'],
 88 |                         dest: 'dist',
 89 |                         ext: '.min.css'
 90 |                     }
 91 |                 ]
 92 |             }
 93 |         },
 94 |         less: {
 95 |             dev: {
 96 |                 files: [
 97 |                     {
 98 |                         expand: true,
 99 |                         cwd: 'src/less',
100 |                         src: ['*.less'],
101 |                         dest: 'dist',
102 |                         ext: '.css'
103 |                     }
104 |                 ]
105 |             }
106 |         }
107 |     });
108 | 
109 |     /**
110 |      * The default task is to build and compile.
111 |      */
112 |     grunt.registerTask('default', [
113 |         'build'
114 |     ]);
115 | 
116 |     /**
117 |      * The `build` task gets your app ready to run for development and testing.
118 |      */
119 |     grunt.registerTask('build', [
120 |         'clean',
121 |         'copy',
122 |         'uglify',
123 |         'less',
124 |         'autoprefixer',
125 |         'cssmin',
126 |         'usebanner'
127 |     ]);
128 | 
129 | };
130 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | Angular Layout
  2 | ==============
  3 | 
  4 | Angular Layout is a collection of directives written in [angular][2], to
  5 | simplify building of full-page layouts. It is inspired by Apache Flex (formerly
  6 | Adobe Flex) and Java Swing way of defining layout by means of declarative xml elements and
  7 | related attributes.
  8 | 
  9 | This library, although very simple, is experimental and has not yet been tested
 10 | extensively. Please provide feedback if you notice a bug or misbehavior, and,
 11 | anyway, **use at your own peril.**
 12 | 
 13 | Installation
 14 | ------------
 15 | 
 16 | The easiest way to install Angular Layout is using [bower][1].
 17 | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 18 | bower install --save angular-layout
 19 | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 20 | 
 21 | 
 22 | Usage
 23 | -----
 24 | 
 25 | Add the module `angular.layout` to your application dependencies, like so:
 26 | 
 27 | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 28 | angular.module('myApp', ['angular.layout', ...])
 29 | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 30 | 
 31 | Don't forget to refer angular-layout.js and angular-layout.css in your html
 32 | pages, like so:
 33 | 
 34 | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 35 | <script src="angular-layout.js"></script>
 36 | <link rel="stylesheet" href="angular-layout.css"/>
 37 | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 38 | 
 39 | You may use minified resource versions respectively angular-layout.min.js and angular-layout.min.css.
 40 | Look at the [demos][4] for some usage examples.
 41 | 
 42 | Once angular-layout module is loaded you can use following directives :
 43 | 
 44 | ###vbox / hbox
 45 | 
 46 | Added as attribute in a container such as div, body, td... These directives make the container a Flex container.
 47 | * `hbox` to align child horizontally
 48 | * `vbox` to align child vertically
 49 | 
 50 | ### container attributes
 51 | Other attributes could be added to organize child fine :
 52 | * `justify` could be set to `center`, `flex-end`, `flex-start` (default value), `space-around`, `space-between`.
 53 |    As the justify in text document layout, this attribute defines where the child group should be placed if there is more space than needed.
 54 | 
 55 | * `align` could be set to `baseline`, `center`, `flex-end`, `flex-start`, `stretch` (default value).
 56 |  This attribute define on which criteria child should be aligned each other.
 57 | 
 58 | * `x-justify` could be set to `center`, `flex-end`, `flex-start` (default value).
 59 | This attribute defines where the child group should be placed if there is more space than needed ON THE CROSS AXIS (ie vertically for `hbox`, horizontally for `vbox`)
 60 | 
 61 | * `wrap` could be set to `nowrap` (default value), `wrap`, `wrap-reverse`.
 62 | This attribute define the wrap policy.
 63 | 
 64 | Note that you can use hbox and vbox as elements to
 65 | 
 66 | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 67 | <vbox></vbox>
 68 | <!-- is a short for (due to css default values)-->
 69 | <div vbox justify="flex-start" align="stretch" x-justify="flex-start" wrap="nowrap"></div>
 70 | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 71 | 
 72 | ### child attributes
 73 | 
 74 | * `grow` : the ability to take more place if possible. Valued with an integer, the value is use as a relative ability (big grow will grow quicker and more)
 75 | * `shrink` : the ability to take less place if required. Valued with an integer, the value is use as a relative ability (big shrink will shrink quicker and more)
 76 | * `order` : the index position among other child.
 77 | 
 78 | ### responsive extension
 79 | As well as bootstrap 3, the layout could be responsively defined with angular-layout.
 80 | Angular-Layout provide four *extension* to its all directives (vbox, hbox, grow, shrink, order) : `*-xs`, `*-sm`, `*-md`, `*-lg`.
 81 | Just add this extension to directives and restrict the directive to the associated media.
 82 | Used in conjonction with bootstrap `hidden-xs` or `visible-xs`... You can create responsive application easily.
 83 | 
 84 | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 85 | <!-- So you can define a `vbox` that become a `hbox` on a small media by this way -->
 86 | <vbox hbox-sm></vbox>
 87 | 
 88 | <!-- or reorder an item as first element on extra small media : -->
 89 | <div vbox order-xs="0"></div>
 90 | ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 91 | 
 92 | 
 93 | How it works
 94 | ------------
 95 | 
 96 | All the layouting is done via CSS, that is: no Javascript is involved in the
 97 | layouting, so it is super-fast and lightweight.
 98 | 
 99 | Note that directives are here to help, but css would be enough.
100 | Directive do not always use CSS name. By experience, `align-items`, `align-content` and `justify` are very confusing !
101 | So directive allows you to use (I hope) easy to understand name : `align`, `justify`, `x-justify` (x for cross axis).
102 | However, values for properties are the same.
103 | 
104 | Angular Layout is built on top of Flexbox and aims to make it easier for angular developers to leverage
105 | its power and flexibility. Read more about Flexbox [here][5].
106 | 
107 | Browser support
108 | ---------------
109 | 
110 | The main target of this library are mobile devices and modern browsers, old
111 | versions of IE are not taken into account at the current stage of development.
112 | CSS flex relative properties are supported on all recent browsers : [Check that !][7]
113 | 
114 | 
115 | v0.1.0 Breaking changes
116 | -----------------------
117 | - no more scroll
118 | - no more padding
119 | - attribute name changed to fit new spec ! (now : grow,shrink,align,justify,x-justify,vbox,hbox and responsible versions)
120 | - module name changed to `angular.layout` (ng is reserved by convention to official modules)
121 | 
122 | Release History
123 | ==================
124 |  * 2014-10-06       v0.1.0 (in progress) upgrate to Angular 1.2.26, Flexbox [pre RC on 25 September 2014 spec][6]. no dependencies. refactoring. autoprefixed.
125 |  * 2013-09-16       v0.0.2  remove underscore, meteor dependencies
126 |  * 2013-09-15       v0.0.1  using Angular 1.1.5 Bootstrap 3, Flexbox 1999 spec
127 | 
128 | 
129 | [1]: <http://bower.io/>
130 | 
131 | [2]: <http://angularjs.org/>
132 | 
133 | [3]: <http://joshdmiller.github.io/ng-boilerplate>
134 | 
135 | [4]: <https://github.com/demerzel3/angular-layout/tree/master/demos>
136 | 
137 | [5]: <http://css-tricks.com/snippets/css/a-guide-to-flexbox/>
138 | 
139 | [6]: <http://www.w3.org/TR/2014/WD-css-flexbox-1-20140925/>
140 | 
141 | [7]: <http://caniuse.com/#feat=flexbox>
142 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-layout",
 3 |   "version": "0.1.1",
 4 |   "main": [
 5 |     "dist/angular-layout.css",
 6 |     "dist/angular-layout.js"
 7 |   ],
 8 |   "devDependencies": {},
 9 |   "dependencies": {}
10 | }
11 | 


--------------------------------------------------------------------------------
/demos/fixed-width-page.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title>Fixed Width Page Demo - Angular Layout</title>
  5 | 
  6 |   <meta charset="UTF-8">
  7 | 
  8 |   <link rel="stylesheet" href="../vendor/bootstrap/dist/css/bootstrap.css"/>
  9 |   <link rel="stylesheet" href="../dist/angular-layout.css"/>
 10 | 
 11 |   <style type="text/css">
 12 |     body {
 13 |       margin: 20px;
 14 |     }
 15 |     #root {
 16 |       width: 100%;
 17 |     }
 18 |     #wrapper {
 19 |       width: 920px;
 20 |     }
 21 |     .sidebar {
 22 |       background-color: #e6e6e6;
 23 |       padding: 5px;
 24 |     }
 25 |     .sidebar.sidebar-fixed {
 26 |       width: 150px;
 27 |     }
 28 |     .sidebar.sidebar-percent {
 29 |       width: 20%;
 30 |     }
 31 |   </style>
 32 | </head>
 33 | 
 34 | <body ng-app="ng.layout" ng-controller="DemoCtrl">
 35 | 
 36 | <hbox debug="{{debugLayout}}" id="root" pack="center">
 37 |   <vbox debug="{{debugLayout}}" id="wrapper">
 38 | 
 39 |     <hbox id="header" debug="{{debugLayout}}" pack="center" align-items="center">
 40 |       <div flex="1">
 41 |         <h1>First Title</h1>
 42 |         <h2>Second Title</h2>
 43 |       </div>
 44 | 
 45 |       <div>
 46 |         <h4>Vertical aligned box</h4>
 47 |         <button type="button" class="btn btn-primary" ng-click="toggleGap()">Toggle article gap</button>
 48 |         <button type="button" class="btn btn-default" ng-class="{'active': debugLayout}" ng-click="toggleDebugLayout()">Debug layout</button>
 49 |       </div>
 50 |     </hbox>
 51 | 
 52 |     <hbox debug="{{debugLayout}}" align-items="stretch">
 53 | 
 54 |       <div class="sidebar sidebar-fixed">
 55 |         <h4>Sidebar 150px</h4>
 56 |       </div>
 57 |       <vbox flex="1" debug="{{debugLayout}}" gap="{{vboxGap}}px">
 58 |         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus erat vitae tortor vulputate tempor. Sed eget eros at risus tincidunt elementum non vel nisl. Curabitur nec vestibulum eros, gravida pretium tellus. Vestibulum commodo viverra magna et sagittis. Mauris ut vestibulum justo. Praesent quis erat eu nunc adipiscing venenatis eget a lorem. Donec a vehicula metus, in bibendum enim. Fusce in mauris vitae ligula dignissim blandit in quis ligula. Proin turpis dolor, pellentesque eu mi eget, pulvinar lobortis ante. Morbi sem nibh, vulputate quis scelerisque sit amet, sagittis lacinia odio. Nullam ut dapibus sem, eu aliquam nulla. Suspendisse ut risus hendrerit, sollicitudin ipsum vel, pharetra leo.</p>
 59 |         <p>Praesent blandit auctor dui, quis elementum justo venenatis in. Ut iaculis vulputate elit, at convallis diam vestibulum aliquam. Cras porta tempus congue. Phasellus nec orci libero. Integer ut velit lobortis, suscipit arcu in, varius risus. Aenean ultrices eros nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque eget tortor ac magna convallis suscipit.</p>
 60 |         <p>Nullam et nisi eget ligula feugiat molestie. Vivamus eu sem vel lorem cursus porttitor. Quisque orci quam, molestie eget imperdiet id, blandit sit amet purus. In in elementum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc blandit bibendum augue id condimentum. Aenean iaculis pellentesque justo, a bibendum felis lacinia in. Sed cursus et tortor eu fringilla. Morbi gravida ullamcorper erat, eget congue lorem ullamcorper vel. Phasellus et euismod urna. Aliquam erat volutpat. Vestibulum adipiscing, quam non aliquam interdum, magna diam accumsan nulla, eu lobortis mauris nulla non mauris. Praesent lobortis molestie aliquam.</p>
 61 |         <p>Proin fringilla lacus eget tellus ultricies, eu pretium elit gravida. Donec vitae augue urna. Quisque imperdiet lorem nec sagittis tristique. Phasellus egestas viverra lectus, at malesuada est cursus laoreet. Praesent non nibh eu eros hendrerit molestie. Etiam vulputate consequat pretium. Nam viverra libero libero, vel ultrices magna mollis ac. Duis volutpat nunc ut enim pretium, ut vestibulum justo vulputate. Morbi a odio feugiat, venenatis justo nec, condimentum tellus.</p>
 62 |         <p>Sed non ultricies enim, at dapibus quam. Mauris placerat mattis eros, id porttitor mauris mattis sit amet. Fusce lacus sem, consequat vitae venenatis eu, gravida nec risus. Duis id tempor lorem. Phasellus quis hendrerit augue. Duis ut urna non nunc imperdiet ultrices in at risus. Morbi tempus elit vel lacus ullamcorper auctor. Morbi mattis auctor consequat. Donec feugiat tincidunt tellus sed dignissim. Fusce imperdiet erat ante, mattis cursus sem tristique non. Cras eget congue elit, eu eleifend dolor. Aliquam quis tincidunt enim. In vel lacus in odio rhoncus euismod quis nec libero. Morbi tincidunt, mi ultrices eleifend auctor, ligula enim lacinia diam, eget aliquet tellus est nec elit. Mauris id libero ullamcorper, interdum felis id, luctus neque.</p>
 63 |       </vbox>
 64 |       <div class="sidebar sidebar-percent">
 65 |         <h4>Sidebar 20%</h4>
 66 |       </div>
 67 | 
 68 |     </hbox>
 69 | 
 70 |   </vbox>
 71 | </hbox>
 72 | 
 73 | <script src="../vendor/angular/angular.js"></script>
 74 | <script src="../dist/angular-layout.js"></script>
 75 | 
 76 | <script>
 77 | 
 78 |   (function() {
 79 |     var DemoCtrl = function($scope) {
 80 | 
 81 |       $scope.vboxGap = 5;
 82 |       $scope.debugLayout = true;
 83 |       $scope.toggleGap = function() {
 84 |         if ($scope.vboxGap === 5) {
 85 |           $scope.vboxGap = 20;
 86 |         } else {
 87 |           $scope.vboxGap = 5;
 88 |         }
 89 |       };
 90 |       $scope.toggleDebugLayout = function() {
 91 |         $scope.debugLayout = !$scope.debugLayout;
 92 |       };
 93 | 
 94 |     };
 95 | 
 96 |     window.DemoCtrl = DemoCtrl;
 97 |   })();
 98 | 
 99 | </script>
100 | 
101 | </body>
102 | </html>


--------------------------------------------------------------------------------
/dist/angular-layout-debug.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * angular-layout - v0.1.1 - 2015-02-08
  3 |  * https://github.com/demerzel3/angular-layout
  4 |  *
  5 |  * Copyright (c) 2015
  6 |  * Authors : Gabriele Genta & Martin Mouterde
  7 |  * Licensed MIT <>
  8 |  */
  9 | .vbox > .flexboxDebug.glue,
 10 | .hbox > .flexboxDebug.glue {
 11 |   height: 1px;
 12 |   display: block;
 13 |   border-style: dotted;
 14 |   border-width: thin;
 15 |   border-color: #aedbdb;
 16 | }
 17 | .vbox > .flexboxDebug.glue:after,
 18 | .hbox > .flexboxDebug.glue:after {
 19 |   content: "\2192";
 20 |   font-size: 24px;
 21 |   float: right;
 22 |   position: relative;
 23 |   top: -19px;
 24 |   right: -4px;
 25 |   color: #aedbdb;
 26 | }
 27 | .vbox > .flexboxDebug.glue:before,
 28 | .hbox > .flexboxDebug.glue:before {
 29 |   content: "\2190";
 30 |   font-size: 24px;
 31 |   float: left;
 32 |   position: relative;
 33 |   top: -19px;
 34 |   left: -4px;
 35 |   color: #aedbdb;
 36 | }
 37 | .vbox > .flexboxDebug.solid,
 38 | .hbox > .flexboxDebug.solid {
 39 |   border: 3px double;
 40 |   border-color: black;
 41 | }
 42 | .vbox > .flexboxDebug.solid:before,
 43 | .hbox > .flexboxDebug.solid:before {
 44 |   content: attr(size);
 45 | }
 46 | .hbox.flexboxDebug[gap="20"] > *:not(:last-child) {
 47 |   border-right-width: 20px;
 48 |   border-right-color: red;
 49 |   border-right-style: inset;
 50 |   margin-right: 0;
 51 | }
 52 | .hbox.flexboxDebug[gap="19"] > *:not(:last-child) {
 53 |   border-right-width: 19px;
 54 |   border-right-color: red;
 55 |   border-right-style: inset;
 56 |   margin-right: 0;
 57 | }
 58 | .hbox.flexboxDebug[gap="18"] > *:not(:last-child) {
 59 |   border-right-width: 18px;
 60 |   border-right-color: red;
 61 |   border-right-style: inset;
 62 |   margin-right: 0;
 63 | }
 64 | .hbox.flexboxDebug[gap="17"] > *:not(:last-child) {
 65 |   border-right-width: 17px;
 66 |   border-right-color: red;
 67 |   border-right-style: inset;
 68 |   margin-right: 0;
 69 | }
 70 | .hbox.flexboxDebug[gap="16"] > *:not(:last-child) {
 71 |   border-right-width: 16px;
 72 |   border-right-color: red;
 73 |   border-right-style: inset;
 74 |   margin-right: 0;
 75 | }
 76 | .hbox.flexboxDebug[gap="15"] > *:not(:last-child) {
 77 |   border-right-width: 15px;
 78 |   border-right-color: red;
 79 |   border-right-style: inset;
 80 |   margin-right: 0;
 81 | }
 82 | .hbox.flexboxDebug[gap="14"] > *:not(:last-child) {
 83 |   border-right-width: 14px;
 84 |   border-right-color: red;
 85 |   border-right-style: inset;
 86 |   margin-right: 0;
 87 | }
 88 | .hbox.flexboxDebug[gap="13"] > *:not(:last-child) {
 89 |   border-right-width: 13px;
 90 |   border-right-color: red;
 91 |   border-right-style: inset;
 92 |   margin-right: 0;
 93 | }
 94 | .hbox.flexboxDebug[gap="12"] > *:not(:last-child) {
 95 |   border-right-width: 12px;
 96 |   border-right-color: red;
 97 |   border-right-style: inset;
 98 |   margin-right: 0;
 99 | }
100 | .hbox.flexboxDebug[gap="11"] > *:not(:last-child) {
101 |   border-right-width: 11px;
102 |   border-right-color: red;
103 |   border-right-style: inset;
104 |   margin-right: 0;
105 | }
106 | .hbox.flexboxDebug[gap="10"] > *:not(:last-child) {
107 |   border-right-width: 10px;
108 |   border-right-color: red;
109 |   border-right-style: inset;
110 |   margin-right: 0;
111 | }
112 | .hbox.flexboxDebug[gap="9"] > *:not(:last-child) {
113 |   border-right-width: 9px;
114 |   border-right-color: red;
115 |   border-right-style: inset;
116 |   margin-right: 0;
117 | }
118 | .hbox.flexboxDebug[gap="8"] > *:not(:last-child) {
119 |   border-right-width: 8px;
120 |   border-right-color: red;
121 |   border-right-style: inset;
122 |   margin-right: 0;
123 | }
124 | .hbox.flexboxDebug[gap="7"] > *:not(:last-child) {
125 |   border-right-width: 7px;
126 |   border-right-color: red;
127 |   border-right-style: inset;
128 |   margin-right: 0;
129 | }
130 | .hbox.flexboxDebug[gap="6"] > *:not(:last-child) {
131 |   border-right-width: 6px;
132 |   border-right-color: red;
133 |   border-right-style: inset;
134 |   margin-right: 0;
135 | }
136 | .hbox.flexboxDebug[gap="5"] > *:not(:last-child) {
137 |   border-right-width: 5px;
138 |   border-right-color: red;
139 |   border-right-style: inset;
140 |   margin-right: 0;
141 | }
142 | .hbox.flexboxDebug[gap="4"] > *:not(:last-child) {
143 |   border-right-width: 4px;
144 |   border-right-color: red;
145 |   border-right-style: inset;
146 |   margin-right: 0;
147 | }
148 | .hbox.flexboxDebug[gap="3"] > *:not(:last-child) {
149 |   border-right-width: 3px;
150 |   border-right-color: red;
151 |   border-right-style: inset;
152 |   margin-right: 0;
153 | }
154 | .hbox.flexboxDebug[gap="2"] > *:not(:last-child) {
155 |   border-right-width: 2px;
156 |   border-right-color: red;
157 |   border-right-style: inset;
158 |   margin-right: 0;
159 | }
160 | .hbox.flexboxDebug[gap="1"] > *:not(:last-child) {
161 |   border-right-width: 1px;
162 |   border-right-color: red;
163 |   border-right-style: inset;
164 |   margin-right: 0;
165 | }
166 | .vbox.flexboxDebug[gap="20"] > *:not(:last-child) {
167 |   border-bottom-width: 20px;
168 |   border-bottom-color: red;
169 |   border-bottom-style: inset;
170 |   margin-bottom: 0;
171 | }
172 | .vbox.flexboxDebug[gap="19"] > *:not(:last-child) {
173 |   border-bottom-width: 19px;
174 |   border-bottom-color: red;
175 |   border-bottom-style: inset;
176 |   margin-bottom: 0;
177 | }
178 | .vbox.flexboxDebug[gap="18"] > *:not(:last-child) {
179 |   border-bottom-width: 18px;
180 |   border-bottom-color: red;
181 |   border-bottom-style: inset;
182 |   margin-bottom: 0;
183 | }
184 | .vbox.flexboxDebug[gap="17"] > *:not(:last-child) {
185 |   border-bottom-width: 17px;
186 |   border-bottom-color: red;
187 |   border-bottom-style: inset;
188 |   margin-bottom: 0;
189 | }
190 | .vbox.flexboxDebug[gap="16"] > *:not(:last-child) {
191 |   border-bottom-width: 16px;
192 |   border-bottom-color: red;
193 |   border-bottom-style: inset;
194 |   margin-bottom: 0;
195 | }
196 | .vbox.flexboxDebug[gap="15"] > *:not(:last-child) {
197 |   border-bottom-width: 15px;
198 |   border-bottom-color: red;
199 |   border-bottom-style: inset;
200 |   margin-bottom: 0;
201 | }
202 | .vbox.flexboxDebug[gap="14"] > *:not(:last-child) {
203 |   border-bottom-width: 14px;
204 |   border-bottom-color: red;
205 |   border-bottom-style: inset;
206 |   margin-bottom: 0;
207 | }
208 | .vbox.flexboxDebug[gap="13"] > *:not(:last-child) {
209 |   border-bottom-width: 13px;
210 |   border-bottom-color: red;
211 |   border-bottom-style: inset;
212 |   margin-bottom: 0;
213 | }
214 | .vbox.flexboxDebug[gap="12"] > *:not(:last-child) {
215 |   border-bottom-width: 12px;
216 |   border-bottom-color: red;
217 |   border-bottom-style: inset;
218 |   margin-bottom: 0;
219 | }
220 | .vbox.flexboxDebug[gap="11"] > *:not(:last-child) {
221 |   border-bottom-width: 11px;
222 |   border-bottom-color: red;
223 |   border-bottom-style: inset;
224 |   margin-bottom: 0;
225 | }
226 | .vbox.flexboxDebug[gap="10"] > *:not(:last-child) {
227 |   border-bottom-width: 10px;
228 |   border-bottom-color: red;
229 |   border-bottom-style: inset;
230 |   margin-bottom: 0;
231 | }
232 | .vbox.flexboxDebug[gap="9"] > *:not(:last-child) {
233 |   border-bottom-width: 9px;
234 |   border-bottom-color: red;
235 |   border-bottom-style: inset;
236 |   margin-bottom: 0;
237 | }
238 | .vbox.flexboxDebug[gap="8"] > *:not(:last-child) {
239 |   border-bottom-width: 8px;
240 |   border-bottom-color: red;
241 |   border-bottom-style: inset;
242 |   margin-bottom: 0;
243 | }
244 | .vbox.flexboxDebug[gap="7"] > *:not(:last-child) {
245 |   border-bottom-width: 7px;
246 |   border-bottom-color: red;
247 |   border-bottom-style: inset;
248 |   margin-bottom: 0;
249 | }
250 | .vbox.flexboxDebug[gap="6"] > *:not(:last-child) {
251 |   border-bottom-width: 6px;
252 |   border-bottom-color: red;
253 |   border-bottom-style: inset;
254 |   margin-bottom: 0;
255 | }
256 | .vbox.flexboxDebug[gap="5"] > *:not(:last-child) {
257 |   border-bottom-width: 5px;
258 |   border-bottom-color: red;
259 |   border-bottom-style: inset;
260 |   margin-bottom: 0;
261 | }
262 | .vbox.flexboxDebug[gap="4"] > *:not(:last-child) {
263 |   border-bottom-width: 4px;
264 |   border-bottom-color: red;
265 |   border-bottom-style: inset;
266 |   margin-bottom: 0;
267 | }
268 | .vbox.flexboxDebug[gap="3"] > *:not(:last-child) {
269 |   border-bottom-width: 3px;
270 |   border-bottom-color: red;
271 |   border-bottom-style: inset;
272 |   margin-bottom: 0;
273 | }
274 | .vbox.flexboxDebug[gap="2"] > *:not(:last-child) {
275 |   border-bottom-width: 2px;
276 |   border-bottom-color: red;
277 |   border-bottom-style: inset;
278 |   margin-bottom: 0;
279 | }
280 | .vbox.flexboxDebug[gap="1"] > *:not(:last-child) {
281 |   border-bottom-width: 1px;
282 |   border-bottom-color: red;
283 |   border-bottom-style: inset;
284 |   margin-bottom: 0;
285 | }
286 | .vbox.flexboxDebug:before,
287 | .hbox.flexboxDebug:before {
288 |   content: attr(debugLabel);
289 |   z-index: 10;
290 |   position: absolute;
291 |   background-color: azure;
292 | }
293 | .vbox.flexboxDebug,
294 | .hbox.flexboxDebug {
295 |   border-style: dashed;
296 |   border-width: thin;
297 |   border-color: #aedbdb;
298 | }
299 | 


--------------------------------------------------------------------------------
/dist/angular-layout-debug.min.css:
--------------------------------------------------------------------------------
1 | /**
2 |  * angular-layout - v0.1.1 - 2015-02-08
3 |  * https://github.com/demerzel3/angular-layout
4 |  *
5 |  * Copyright (c) 2015
6 |  * Authors : Gabriele Genta & Martin Mouterde
7 |  * Licensed MIT <>
8 |  */
9 | .hbox>.flexboxDebug.glue,.vbox>.flexboxDebug.glue{height:1px;display:block;border-style:dotted;border-width:thin;border-color:#aedbdb}.hbox>.flexboxDebug.glue:after,.vbox>.flexboxDebug.glue:after{content:"\2192";font-size:24px;float:right;position:relative;top:-19px;right:-4px;color:#aedbdb}.hbox>.flexboxDebug.glue:before,.vbox>.flexboxDebug.glue:before{content:"\2190";font-size:24px;float:left;position:relative;top:-19px;left:-4px;color:#aedbdb}.hbox>.flexboxDebug.solid,.vbox>.flexboxDebug.solid{border:3px double;border-color:#000}.hbox>.flexboxDebug.solid:before,.vbox>.flexboxDebug.solid:before{content:attr(size)}.hbox.flexboxDebug[gap="20"]>:not(:last-child){border-right-width:20px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="19"]>:not(:last-child){border-right-width:19px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="18"]>:not(:last-child){border-right-width:18px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="17"]>:not(:last-child){border-right-width:17px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="16"]>:not(:last-child){border-right-width:16px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="15"]>:not(:last-child){border-right-width:15px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="14"]>:not(:last-child){border-right-width:14px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="13"]>:not(:last-child){border-right-width:13px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="12"]>:not(:last-child){border-right-width:12px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="11"]>:not(:last-child){border-right-width:11px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="10"]>:not(:last-child){border-right-width:10px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="9"]>:not(:last-child){border-right-width:9px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="8"]>:not(:last-child){border-right-width:8px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="7"]>:not(:last-child){border-right-width:7px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="6"]>:not(:last-child){border-right-width:6px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="5"]>:not(:last-child){border-right-width:5px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="4"]>:not(:last-child){border-right-width:4px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="3"]>:not(:last-child){border-right-width:3px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="2"]>:not(:last-child){border-right-width:2px;border-right-color:red;border-right-style:inset;margin-right:0}.hbox.flexboxDebug[gap="1"]>:not(:last-child){border-right-width:1px;border-right-color:red;border-right-style:inset;margin-right:0}.vbox.flexboxDebug[gap="20"]>:not(:last-child){border-bottom-width:20px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="19"]>:not(:last-child){border-bottom-width:19px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="18"]>:not(:last-child){border-bottom-width:18px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="17"]>:not(:last-child){border-bottom-width:17px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="16"]>:not(:last-child){border-bottom-width:16px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="15"]>:not(:last-child){border-bottom-width:15px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="14"]>:not(:last-child){border-bottom-width:14px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="13"]>:not(:last-child){border-bottom-width:13px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="12"]>:not(:last-child){border-bottom-width:12px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="11"]>:not(:last-child){border-bottom-width:11px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="10"]>:not(:last-child){border-bottom-width:10px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="9"]>:not(:last-child){border-bottom-width:9px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="8"]>:not(:last-child){border-bottom-width:8px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="7"]>:not(:last-child){border-bottom-width:7px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="6"]>:not(:last-child){border-bottom-width:6px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="5"]>:not(:last-child){border-bottom-width:5px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="4"]>:not(:last-child){border-bottom-width:4px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="3"]>:not(:last-child){border-bottom-width:3px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="2"]>:not(:last-child){border-bottom-width:2px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.vbox.flexboxDebug[gap="1"]>:not(:last-child){border-bottom-width:1px;border-bottom-color:red;border-bottom-style:inset;margin-bottom:0}.hbox.flexboxDebug:before,.vbox.flexboxDebug:before{content:attr(debugLabel);z-index:10;position:absolute;background-color:azure}.hbox.flexboxDebug,.vbox.flexboxDebug{border-style:dashed;border-width:thin;border-color:#aedbdb}


--------------------------------------------------------------------------------
/dist/angular-layout.css:
--------------------------------------------------------------------------------
   1 | /**
   2 |  * angular-layout - v0.1.1 - 2015-02-08
   3 |  * https://github.com/demerzel3/angular-layout
   4 |  *
   5 |  * Copyright (c) 2015
   6 |  * Authors : Gabriele Genta & Martin Mouterde
   7 |  * Licensed MIT <>
   8 |  */
   9 | .glue {
  10 |   -webkit-box-flex: 99;
  11 |   -webkit-flex-grow: 99;
  12 |       -ms-flex-positive: 99;
  13 |           flex-grow: 99;
  14 |   -webkit-flex-shrink: 99;
  15 |       -ms-flex-negative: 99;
  16 |           flex-shrink: 99;
  17 | }
  18 | .hbox[gap="20"] > * {
  19 |   margin-right: 20px;
  20 | }
  21 | .hbox[gap="20"] :last-child {
  22 |   margin-right: 0;
  23 | }
  24 | .hbox[gap="19"] > * {
  25 |   margin-right: 19px;
  26 | }
  27 | .hbox[gap="19"] :last-child {
  28 |   margin-right: 0;
  29 | }
  30 | .hbox[gap="18"] > * {
  31 |   margin-right: 18px;
  32 | }
  33 | .hbox[gap="18"] :last-child {
  34 |   margin-right: 0;
  35 | }
  36 | .hbox[gap="17"] > * {
  37 |   margin-right: 17px;
  38 | }
  39 | .hbox[gap="17"] :last-child {
  40 |   margin-right: 0;
  41 | }
  42 | .hbox[gap="16"] > * {
  43 |   margin-right: 16px;
  44 | }
  45 | .hbox[gap="16"] :last-child {
  46 |   margin-right: 0;
  47 | }
  48 | .hbox[gap="15"] > * {
  49 |   margin-right: 15px;
  50 | }
  51 | .hbox[gap="15"] :last-child {
  52 |   margin-right: 0;
  53 | }
  54 | .hbox[gap="14"] > * {
  55 |   margin-right: 14px;
  56 | }
  57 | .hbox[gap="14"] :last-child {
  58 |   margin-right: 0;
  59 | }
  60 | .hbox[gap="13"] > * {
  61 |   margin-right: 13px;
  62 | }
  63 | .hbox[gap="13"] :last-child {
  64 |   margin-right: 0;
  65 | }
  66 | .hbox[gap="12"] > * {
  67 |   margin-right: 12px;
  68 | }
  69 | .hbox[gap="12"] :last-child {
  70 |   margin-right: 0;
  71 | }
  72 | .hbox[gap="11"] > * {
  73 |   margin-right: 11px;
  74 | }
  75 | .hbox[gap="11"] :last-child {
  76 |   margin-right: 0;
  77 | }
  78 | .hbox[gap="10"] > * {
  79 |   margin-right: 10px;
  80 | }
  81 | .hbox[gap="10"] :last-child {
  82 |   margin-right: 0;
  83 | }
  84 | .hbox[gap="9"] > * {
  85 |   margin-right: 9px;
  86 | }
  87 | .hbox[gap="9"] :last-child {
  88 |   margin-right: 0;
  89 | }
  90 | .hbox[gap="8"] > * {
  91 |   margin-right: 8px;
  92 | }
  93 | .hbox[gap="8"] :last-child {
  94 |   margin-right: 0;
  95 | }
  96 | .hbox[gap="7"] > * {
  97 |   margin-right: 7px;
  98 | }
  99 | .hbox[gap="7"] :last-child {
 100 |   margin-right: 0;
 101 | }
 102 | .hbox[gap="6"] > * {
 103 |   margin-right: 6px;
 104 | }
 105 | .hbox[gap="6"] :last-child {
 106 |   margin-right: 0;
 107 | }
 108 | .hbox[gap="5"] > * {
 109 |   margin-right: 5px;
 110 | }
 111 | .hbox[gap="5"] :last-child {
 112 |   margin-right: 0;
 113 | }
 114 | .hbox[gap="4"] > * {
 115 |   margin-right: 4px;
 116 | }
 117 | .hbox[gap="4"] :last-child {
 118 |   margin-right: 0;
 119 | }
 120 | .hbox[gap="3"] > * {
 121 |   margin-right: 3px;
 122 | }
 123 | .hbox[gap="3"] :last-child {
 124 |   margin-right: 0;
 125 | }
 126 | .hbox[gap="2"] > * {
 127 |   margin-right: 2px;
 128 | }
 129 | .hbox[gap="2"] :last-child {
 130 |   margin-right: 0;
 131 | }
 132 | .hbox[gap="1"] > * {
 133 |   margin-right: 1px;
 134 | }
 135 | .hbox[gap="1"] :last-child {
 136 |   margin-right: 0;
 137 | }
 138 | .hbox[gap="0"] > * {
 139 |   margin-right: 0px;
 140 | }
 141 | .hbox[gap="0"] :last-child {
 142 |   margin-right: 0;
 143 | }
 144 | .vbox[gap="20"] > * {
 145 |   margin-bottom: 20px;
 146 | }
 147 | .vbox[gap="20"] :last-child {
 148 |   margin-bottom: 0;
 149 | }
 150 | .vbox[gap="19"] > * {
 151 |   margin-bottom: 19px;
 152 | }
 153 | .vbox[gap="19"] :last-child {
 154 |   margin-bottom: 0;
 155 | }
 156 | .vbox[gap="18"] > * {
 157 |   margin-bottom: 18px;
 158 | }
 159 | .vbox[gap="18"] :last-child {
 160 |   margin-bottom: 0;
 161 | }
 162 | .vbox[gap="17"] > * {
 163 |   margin-bottom: 17px;
 164 | }
 165 | .vbox[gap="17"] :last-child {
 166 |   margin-bottom: 0;
 167 | }
 168 | .vbox[gap="16"] > * {
 169 |   margin-bottom: 16px;
 170 | }
 171 | .vbox[gap="16"] :last-child {
 172 |   margin-bottom: 0;
 173 | }
 174 | .vbox[gap="15"] > * {
 175 |   margin-bottom: 15px;
 176 | }
 177 | .vbox[gap="15"] :last-child {
 178 |   margin-bottom: 0;
 179 | }
 180 | .vbox[gap="14"] > * {
 181 |   margin-bottom: 14px;
 182 | }
 183 | .vbox[gap="14"] :last-child {
 184 |   margin-bottom: 0;
 185 | }
 186 | .vbox[gap="13"] > * {
 187 |   margin-bottom: 13px;
 188 | }
 189 | .vbox[gap="13"] :last-child {
 190 |   margin-bottom: 0;
 191 | }
 192 | .vbox[gap="12"] > * {
 193 |   margin-bottom: 12px;
 194 | }
 195 | .vbox[gap="12"] :last-child {
 196 |   margin-bottom: 0;
 197 | }
 198 | .vbox[gap="11"] > * {
 199 |   margin-bottom: 11px;
 200 | }
 201 | .vbox[gap="11"] :last-child {
 202 |   margin-bottom: 0;
 203 | }
 204 | .vbox[gap="10"] > * {
 205 |   margin-bottom: 10px;
 206 | }
 207 | .vbox[gap="10"] :last-child {
 208 |   margin-bottom: 0;
 209 | }
 210 | .vbox[gap="9"] > * {
 211 |   margin-bottom: 9px;
 212 | }
 213 | .vbox[gap="9"] :last-child {
 214 |   margin-bottom: 0;
 215 | }
 216 | .vbox[gap="8"] > * {
 217 |   margin-bottom: 8px;
 218 | }
 219 | .vbox[gap="8"] :last-child {
 220 |   margin-bottom: 0;
 221 | }
 222 | .vbox[gap="7"] > * {
 223 |   margin-bottom: 7px;
 224 | }
 225 | .vbox[gap="7"] :last-child {
 226 |   margin-bottom: 0;
 227 | }
 228 | .vbox[gap="6"] > * {
 229 |   margin-bottom: 6px;
 230 | }
 231 | .vbox[gap="6"] :last-child {
 232 |   margin-bottom: 0;
 233 | }
 234 | .vbox[gap="5"] > * {
 235 |   margin-bottom: 5px;
 236 | }
 237 | .vbox[gap="5"] :last-child {
 238 |   margin-bottom: 0;
 239 | }
 240 | .vbox[gap="4"] > * {
 241 |   margin-bottom: 4px;
 242 | }
 243 | .vbox[gap="4"] :last-child {
 244 |   margin-bottom: 0;
 245 | }
 246 | .vbox[gap="3"] > * {
 247 |   margin-bottom: 3px;
 248 | }
 249 | .vbox[gap="3"] :last-child {
 250 |   margin-bottom: 0;
 251 | }
 252 | .vbox[gap="2"] > * {
 253 |   margin-bottom: 2px;
 254 | }
 255 | .vbox[gap="2"] :last-child {
 256 |   margin-bottom: 0;
 257 | }
 258 | .vbox[gap="1"] > * {
 259 |   margin-bottom: 1px;
 260 | }
 261 | .vbox[gap="1"] :last-child {
 262 |   margin-bottom: 0;
 263 | }
 264 | .vbox[gap="0"] > * {
 265 |   margin-bottom: 0px;
 266 | }
 267 | .vbox[gap="0"] :last-child {
 268 |   margin-bottom: 0;
 269 | }
 270 | .flexbox {
 271 |   display: -webkit-box;
 272 |   display: -webkit-flex;
 273 |   display: -ms-flexbox;
 274 |   display: flex;
 275 | }
 276 | .flexbox[justify="space-between"] {
 277 |   -webkit-box-pack: justify;
 278 |   -webkit-justify-content: space-between;
 279 |       -ms-flex-pack: justify;
 280 |           justify-content: space-between;
 281 | }
 282 | .flexbox[justify="space-around"] {
 283 |   -webkit-justify-content: space-around;
 284 |       -ms-flex-pack: distribute;
 285 |           justify-content: space-around;
 286 | }
 287 | .flexbox[justify="flex-start"] {
 288 |   -webkit-box-pack: start;
 289 |   -webkit-justify-content: flex-start;
 290 |       -ms-flex-pack: start;
 291 |           justify-content: flex-start;
 292 | }
 293 | .flexbox[justify="flex-end"] {
 294 |   -webkit-box-pack: end;
 295 |   -webkit-justify-content: flex-end;
 296 |       -ms-flex-pack: end;
 297 |           justify-content: flex-end;
 298 | }
 299 | .flexbox[justify="center"] {
 300 |   -webkit-box-pack: center;
 301 |   -webkit-justify-content: center;
 302 |       -ms-flex-pack: center;
 303 |           justify-content: center;
 304 | }
 305 | .flexbox[align="stretch"] {
 306 |   -webkit-box-align: stretch;
 307 |   -webkit-align-items: stretch;
 308 |       -ms-flex-align: stretch;
 309 |           align-items: stretch;
 310 | }
 311 | .flexbox[align="flex-start"] {
 312 |   -webkit-box-align: start;
 313 |   -webkit-align-items: flex-start;
 314 |       -ms-flex-align: start;
 315 |           align-items: flex-start;
 316 | }
 317 | .flexbox[align="flex-end"] {
 318 |   -webkit-box-align: end;
 319 |   -webkit-align-items: flex-end;
 320 |       -ms-flex-align: end;
 321 |           align-items: flex-end;
 322 | }
 323 | .flexbox[align="center"] {
 324 |   -webkit-box-align: center;
 325 |   -webkit-align-items: center;
 326 |       -ms-flex-align: center;
 327 |           align-items: center;
 328 | }
 329 | .flexbox[align="baseline"] {
 330 |   -webkit-box-align: baseline;
 331 |   -webkit-align-items: baseline;
 332 |       -ms-flex-align: baseline;
 333 |           align-items: baseline;
 334 | }
 335 | .flexbox[x-justify="flex-start"] {
 336 |   -webkit-align-content: flex-start;
 337 |       -ms-flex-line-pack: start;
 338 |           align-content: flex-start;
 339 | }
 340 | .flexbox[x-justify="flex-end"] {
 341 |   -webkit-align-content: flex-end;
 342 |       -ms-flex-line-pack: end;
 343 |           align-content: flex-end;
 344 | }
 345 | .flexbox[x-justify="center"] {
 346 |   -webkit-align-content: center;
 347 |       -ms-flex-line-pack: center;
 348 |           align-content: center;
 349 | }
 350 | .flexbox[wrap="wrap-reverse"] {
 351 |   -webkit-flex-wrap: wrap-reverse;
 352 |       -ms-flex-wrap: wrap-reverse;
 353 |           flex-wrap: wrap-reverse;
 354 | }
 355 | .flexbox[wrap="wrap"] {
 356 |   -webkit-flex-wrap: wrap;
 357 |       -ms-flex-wrap: wrap;
 358 |           flex-wrap: wrap;
 359 | }
 360 | .flexbox[wrap="nowrap"] {
 361 |   -webkit-flex-wrap: nowrap;
 362 |       -ms-flex-wrap: nowrap;
 363 |           flex-wrap: nowrap;
 364 | }
 365 | .flexbox[direction="column-reverse"] {
 366 |   -webkit-box-orient: vertical;
 367 |   -webkit-box-direction: reverse;
 368 |   -webkit-flex-direction: column-reverse;
 369 |       -ms-flex-direction: column-reverse;
 370 |           flex-direction: column-reverse;
 371 | }
 372 | .flexbox[direction="column"] {
 373 |   -webkit-box-orient: vertical;
 374 |   -webkit-box-direction: normal;
 375 |   -webkit-flex-direction: column;
 376 |       -ms-flex-direction: column;
 377 |           flex-direction: column;
 378 | }
 379 | .flexbox[direction="row-reverse"] {
 380 |   -webkit-box-orient: horizontal;
 381 |   -webkit-box-direction: reverse;
 382 |   -webkit-flex-direction: row-reverse;
 383 |       -ms-flex-direction: row-reverse;
 384 |           flex-direction: row-reverse;
 385 | }
 386 | .flexbox[direction="row"] {
 387 |   -webkit-box-orient: horizontal;
 388 |   -webkit-box-direction: normal;
 389 |   -webkit-flex-direction: row;
 390 |       -ms-flex-direction: row;
 391 |           flex-direction: row;
 392 | }
 393 | .flexbox > *[grow="20"] {
 394 |   -webkit-box-flex: 20 ;
 395 |   -webkit-flex-grow: 20 ;
 396 |       -ms-flex-positive: 20 ;
 397 |           flex-grow: 20 ;
 398 | }
 399 | .flexbox > *[grow="19"] {
 400 |   -webkit-box-flex: 19 ;
 401 |   -webkit-flex-grow: 19 ;
 402 |       -ms-flex-positive: 19 ;
 403 |           flex-grow: 19 ;
 404 | }
 405 | .flexbox > *[grow="18"] {
 406 |   -webkit-box-flex: 18 ;
 407 |   -webkit-flex-grow: 18 ;
 408 |       -ms-flex-positive: 18 ;
 409 |           flex-grow: 18 ;
 410 | }
 411 | .flexbox > *[grow="17"] {
 412 |   -webkit-box-flex: 17 ;
 413 |   -webkit-flex-grow: 17 ;
 414 |       -ms-flex-positive: 17 ;
 415 |           flex-grow: 17 ;
 416 | }
 417 | .flexbox > *[grow="16"] {
 418 |   -webkit-box-flex: 16 ;
 419 |   -webkit-flex-grow: 16 ;
 420 |       -ms-flex-positive: 16 ;
 421 |           flex-grow: 16 ;
 422 | }
 423 | .flexbox > *[grow="15"] {
 424 |   -webkit-box-flex: 15 ;
 425 |   -webkit-flex-grow: 15 ;
 426 |       -ms-flex-positive: 15 ;
 427 |           flex-grow: 15 ;
 428 | }
 429 | .flexbox > *[grow="14"] {
 430 |   -webkit-box-flex: 14 ;
 431 |   -webkit-flex-grow: 14 ;
 432 |       -ms-flex-positive: 14 ;
 433 |           flex-grow: 14 ;
 434 | }
 435 | .flexbox > *[grow="13"] {
 436 |   -webkit-box-flex: 13 ;
 437 |   -webkit-flex-grow: 13 ;
 438 |       -ms-flex-positive: 13 ;
 439 |           flex-grow: 13 ;
 440 | }
 441 | .flexbox > *[grow="12"] {
 442 |   -webkit-box-flex: 12 ;
 443 |   -webkit-flex-grow: 12 ;
 444 |       -ms-flex-positive: 12 ;
 445 |           flex-grow: 12 ;
 446 | }
 447 | .flexbox > *[grow="11"] {
 448 |   -webkit-box-flex: 11 ;
 449 |   -webkit-flex-grow: 11 ;
 450 |       -ms-flex-positive: 11 ;
 451 |           flex-grow: 11 ;
 452 | }
 453 | .flexbox > *[grow="10"] {
 454 |   -webkit-box-flex: 10 ;
 455 |   -webkit-flex-grow: 10 ;
 456 |       -ms-flex-positive: 10 ;
 457 |           flex-grow: 10 ;
 458 | }
 459 | .flexbox > *[grow="9"] {
 460 |   -webkit-box-flex: 9 ;
 461 |   -webkit-flex-grow: 9 ;
 462 |       -ms-flex-positive: 9 ;
 463 |           flex-grow: 9 ;
 464 | }
 465 | .flexbox > *[grow="8"] {
 466 |   -webkit-box-flex: 8 ;
 467 |   -webkit-flex-grow: 8 ;
 468 |       -ms-flex-positive: 8 ;
 469 |           flex-grow: 8 ;
 470 | }
 471 | .flexbox > *[grow="7"] {
 472 |   -webkit-box-flex: 7 ;
 473 |   -webkit-flex-grow: 7 ;
 474 |       -ms-flex-positive: 7 ;
 475 |           flex-grow: 7 ;
 476 | }
 477 | .flexbox > *[grow="6"] {
 478 |   -webkit-box-flex: 6 ;
 479 |   -webkit-flex-grow: 6 ;
 480 |       -ms-flex-positive: 6 ;
 481 |           flex-grow: 6 ;
 482 | }
 483 | .flexbox > *[grow="5"] {
 484 |   -webkit-box-flex: 5 ;
 485 |   -webkit-flex-grow: 5 ;
 486 |       -ms-flex-positive: 5 ;
 487 |           flex-grow: 5 ;
 488 | }
 489 | .flexbox > *[grow="4"] {
 490 |   -webkit-box-flex: 4 ;
 491 |   -webkit-flex-grow: 4 ;
 492 |       -ms-flex-positive: 4 ;
 493 |           flex-grow: 4 ;
 494 | }
 495 | .flexbox > *[grow="3"] {
 496 |   -webkit-box-flex: 3 ;
 497 |   -webkit-flex-grow: 3 ;
 498 |       -ms-flex-positive: 3 ;
 499 |           flex-grow: 3 ;
 500 | }
 501 | .flexbox > *[grow="2"] {
 502 |   -webkit-box-flex: 2 ;
 503 |   -webkit-flex-grow: 2 ;
 504 |       -ms-flex-positive: 2 ;
 505 |           flex-grow: 2 ;
 506 | }
 507 | .flexbox > *[grow="1"] {
 508 |   -webkit-box-flex: 1 ;
 509 |   -webkit-flex-grow: 1 ;
 510 |       -ms-flex-positive: 1 ;
 511 |           flex-grow: 1 ;
 512 | }
 513 | .flexbox > *[grow="0"] {
 514 |   -webkit-box-flex: 0 ;
 515 |   -webkit-flex-grow: 0 ;
 516 |       -ms-flex-positive: 0 ;
 517 |           flex-grow: 0 ;
 518 | }
 519 | .flexbox > *[shrink="20"] {
 520 |   -webkit-flex-shrink: 20 ;
 521 |       -ms-flex-negative: 20 ;
 522 |           flex-shrink: 20 ;
 523 | }
 524 | .flexbox > *[shrink="19"] {
 525 |   -webkit-flex-shrink: 19 ;
 526 |       -ms-flex-negative: 19 ;
 527 |           flex-shrink: 19 ;
 528 | }
 529 | .flexbox > *[shrink="18"] {
 530 |   -webkit-flex-shrink: 18 ;
 531 |       -ms-flex-negative: 18 ;
 532 |           flex-shrink: 18 ;
 533 | }
 534 | .flexbox > *[shrink="17"] {
 535 |   -webkit-flex-shrink: 17 ;
 536 |       -ms-flex-negative: 17 ;
 537 |           flex-shrink: 17 ;
 538 | }
 539 | .flexbox > *[shrink="16"] {
 540 |   -webkit-flex-shrink: 16 ;
 541 |       -ms-flex-negative: 16 ;
 542 |           flex-shrink: 16 ;
 543 | }
 544 | .flexbox > *[shrink="15"] {
 545 |   -webkit-flex-shrink: 15 ;
 546 |       -ms-flex-negative: 15 ;
 547 |           flex-shrink: 15 ;
 548 | }
 549 | .flexbox > *[shrink="14"] {
 550 |   -webkit-flex-shrink: 14 ;
 551 |       -ms-flex-negative: 14 ;
 552 |           flex-shrink: 14 ;
 553 | }
 554 | .flexbox > *[shrink="13"] {
 555 |   -webkit-flex-shrink: 13 ;
 556 |       -ms-flex-negative: 13 ;
 557 |           flex-shrink: 13 ;
 558 | }
 559 | .flexbox > *[shrink="12"] {
 560 |   -webkit-flex-shrink: 12 ;
 561 |       -ms-flex-negative: 12 ;
 562 |           flex-shrink: 12 ;
 563 | }
 564 | .flexbox > *[shrink="11"] {
 565 |   -webkit-flex-shrink: 11 ;
 566 |       -ms-flex-negative: 11 ;
 567 |           flex-shrink: 11 ;
 568 | }
 569 | .flexbox > *[shrink="10"] {
 570 |   -webkit-flex-shrink: 10 ;
 571 |       -ms-flex-negative: 10 ;
 572 |           flex-shrink: 10 ;
 573 | }
 574 | .flexbox > *[shrink="9"] {
 575 |   -webkit-flex-shrink: 9 ;
 576 |       -ms-flex-negative: 9 ;
 577 |           flex-shrink: 9 ;
 578 | }
 579 | .flexbox > *[shrink="8"] {
 580 |   -webkit-flex-shrink: 8 ;
 581 |       -ms-flex-negative: 8 ;
 582 |           flex-shrink: 8 ;
 583 | }
 584 | .flexbox > *[shrink="7"] {
 585 |   -webkit-flex-shrink: 7 ;
 586 |       -ms-flex-negative: 7 ;
 587 |           flex-shrink: 7 ;
 588 | }
 589 | .flexbox > *[shrink="6"] {
 590 |   -webkit-flex-shrink: 6 ;
 591 |       -ms-flex-negative: 6 ;
 592 |           flex-shrink: 6 ;
 593 | }
 594 | .flexbox > *[shrink="5"] {
 595 |   -webkit-flex-shrink: 5 ;
 596 |       -ms-flex-negative: 5 ;
 597 |           flex-shrink: 5 ;
 598 | }
 599 | .flexbox > *[shrink="4"] {
 600 |   -webkit-flex-shrink: 4 ;
 601 |       -ms-flex-negative: 4 ;
 602 |           flex-shrink: 4 ;
 603 | }
 604 | .flexbox > *[shrink="3"] {
 605 |   -webkit-flex-shrink: 3 ;
 606 |       -ms-flex-negative: 3 ;
 607 |           flex-shrink: 3 ;
 608 | }
 609 | .flexbox > *[shrink="2"] {
 610 |   -webkit-flex-shrink: 2 ;
 611 |       -ms-flex-negative: 2 ;
 612 |           flex-shrink: 2 ;
 613 | }
 614 | .flexbox > *[shrink="1"] {
 615 |   -webkit-flex-shrink: 1 ;
 616 |       -ms-flex-negative: 1 ;
 617 |           flex-shrink: 1 ;
 618 | }
 619 | .flexbox > *[shrink="0"] {
 620 |   -webkit-flex-shrink: 0 ;
 621 |       -ms-flex-negative: 0 ;
 622 |           flex-shrink: 0 ;
 623 | }
 624 | .flexbox > *[order="20"] {
 625 |   -webkit-box-ordinal-group: 21;
 626 |   -webkit-order: 20 ;
 627 |       -ms-flex-order: 20 ;
 628 |           order: 20 ;
 629 | }
 630 | .flexbox > *[order="19"] {
 631 |   -webkit-box-ordinal-group: 20;
 632 |   -webkit-order: 19 ;
 633 |       -ms-flex-order: 19 ;
 634 |           order: 19 ;
 635 | }
 636 | .flexbox > *[order="18"] {
 637 |   -webkit-box-ordinal-group: 19;
 638 |   -webkit-order: 18 ;
 639 |       -ms-flex-order: 18 ;
 640 |           order: 18 ;
 641 | }
 642 | .flexbox > *[order="17"] {
 643 |   -webkit-box-ordinal-group: 18;
 644 |   -webkit-order: 17 ;
 645 |       -ms-flex-order: 17 ;
 646 |           order: 17 ;
 647 | }
 648 | .flexbox > *[order="16"] {
 649 |   -webkit-box-ordinal-group: 17;
 650 |   -webkit-order: 16 ;
 651 |       -ms-flex-order: 16 ;
 652 |           order: 16 ;
 653 | }
 654 | .flexbox > *[order="15"] {
 655 |   -webkit-box-ordinal-group: 16;
 656 |   -webkit-order: 15 ;
 657 |       -ms-flex-order: 15 ;
 658 |           order: 15 ;
 659 | }
 660 | .flexbox > *[order="14"] {
 661 |   -webkit-box-ordinal-group: 15;
 662 |   -webkit-order: 14 ;
 663 |       -ms-flex-order: 14 ;
 664 |           order: 14 ;
 665 | }
 666 | .flexbox > *[order="13"] {
 667 |   -webkit-box-ordinal-group: 14;
 668 |   -webkit-order: 13 ;
 669 |       -ms-flex-order: 13 ;
 670 |           order: 13 ;
 671 | }
 672 | .flexbox > *[order="12"] {
 673 |   -webkit-box-ordinal-group: 13;
 674 |   -webkit-order: 12 ;
 675 |       -ms-flex-order: 12 ;
 676 |           order: 12 ;
 677 | }
 678 | .flexbox > *[order="11"] {
 679 |   -webkit-box-ordinal-group: 12;
 680 |   -webkit-order: 11 ;
 681 |       -ms-flex-order: 11 ;
 682 |           order: 11 ;
 683 | }
 684 | .flexbox > *[order="10"] {
 685 |   -webkit-box-ordinal-group: 11;
 686 |   -webkit-order: 10 ;
 687 |       -ms-flex-order: 10 ;
 688 |           order: 10 ;
 689 | }
 690 | .flexbox > *[order="9"] {
 691 |   -webkit-box-ordinal-group: 10;
 692 |   -webkit-order: 9 ;
 693 |       -ms-flex-order: 9 ;
 694 |           order: 9 ;
 695 | }
 696 | .flexbox > *[order="8"] {
 697 |   -webkit-box-ordinal-group: 9;
 698 |   -webkit-order: 8 ;
 699 |       -ms-flex-order: 8 ;
 700 |           order: 8 ;
 701 | }
 702 | .flexbox > *[order="7"] {
 703 |   -webkit-box-ordinal-group: 8;
 704 |   -webkit-order: 7 ;
 705 |       -ms-flex-order: 7 ;
 706 |           order: 7 ;
 707 | }
 708 | .flexbox > *[order="6"] {
 709 |   -webkit-box-ordinal-group: 7;
 710 |   -webkit-order: 6 ;
 711 |       -ms-flex-order: 6 ;
 712 |           order: 6 ;
 713 | }
 714 | .flexbox > *[order="5"] {
 715 |   -webkit-box-ordinal-group: 6;
 716 |   -webkit-order: 5 ;
 717 |       -ms-flex-order: 5 ;
 718 |           order: 5 ;
 719 | }
 720 | .flexbox > *[order="4"] {
 721 |   -webkit-box-ordinal-group: 5;
 722 |   -webkit-order: 4 ;
 723 |       -ms-flex-order: 4 ;
 724 |           order: 4 ;
 725 | }
 726 | .flexbox > *[order="3"] {
 727 |   -webkit-box-ordinal-group: 4;
 728 |   -webkit-order: 3 ;
 729 |       -ms-flex-order: 3 ;
 730 |           order: 3 ;
 731 | }
 732 | .flexbox > *[order="2"] {
 733 |   -webkit-box-ordinal-group: 3;
 734 |   -webkit-order: 2 ;
 735 |       -ms-flex-order: 2 ;
 736 |           order: 2 ;
 737 | }
 738 | .flexbox > *[order="1"] {
 739 |   -webkit-box-ordinal-group: 2;
 740 |   -webkit-order: 1 ;
 741 |       -ms-flex-order: 1 ;
 742 |           order: 1 ;
 743 | }
 744 | .flexbox > *[order="0"] {
 745 |   -webkit-box-ordinal-group: 1;
 746 |   -webkit-order: 0 ;
 747 |       -ms-flex-order: 0 ;
 748 |           order: 0 ;
 749 | }
 750 | @media only screen and (max-width : 480px) {
 751 |   .flexbox[justify-xs="space-between"] {
 752 |     -webkit-box-pack: justify;
 753 |     -webkit-justify-content: space-between;
 754 |         -ms-flex-pack: justify;
 755 |             justify-content: space-between;
 756 |   }
 757 |   .flexbox[justify-xs="space-around"] {
 758 |     -webkit-justify-content: space-around;
 759 |         -ms-flex-pack: distribute;
 760 |             justify-content: space-around;
 761 |   }
 762 |   .flexbox[justify-xs="flex-start"] {
 763 |     -webkit-box-pack: start;
 764 |     -webkit-justify-content: flex-start;
 765 |         -ms-flex-pack: start;
 766 |             justify-content: flex-start;
 767 |   }
 768 |   .flexbox[justify-xs="flex-end"] {
 769 |     -webkit-box-pack: end;
 770 |     -webkit-justify-content: flex-end;
 771 |         -ms-flex-pack: end;
 772 |             justify-content: flex-end;
 773 |   }
 774 |   .flexbox[justify-xs="center"] {
 775 |     -webkit-box-pack: center;
 776 |     -webkit-justify-content: center;
 777 |         -ms-flex-pack: center;
 778 |             justify-content: center;
 779 |   }
 780 |   .flexbox[align-xs="stretch"] {
 781 |     -webkit-box-align: stretch;
 782 |     -webkit-align-items: stretch;
 783 |         -ms-flex-align: stretch;
 784 |             align-items: stretch;
 785 |   }
 786 |   .flexbox[align-xs="flex-start"] {
 787 |     -webkit-box-align: start;
 788 |     -webkit-align-items: flex-start;
 789 |         -ms-flex-align: start;
 790 |             align-items: flex-start;
 791 |   }
 792 |   .flexbox[align-xs="flex-end"] {
 793 |     -webkit-box-align: end;
 794 |     -webkit-align-items: flex-end;
 795 |         -ms-flex-align: end;
 796 |             align-items: flex-end;
 797 |   }
 798 |   .flexbox[align-xs="center"] {
 799 |     -webkit-box-align: center;
 800 |     -webkit-align-items: center;
 801 |         -ms-flex-align: center;
 802 |             align-items: center;
 803 |   }
 804 |   .flexbox[align-xs="baseline"] {
 805 |     -webkit-box-align: baseline;
 806 |     -webkit-align-items: baseline;
 807 |         -ms-flex-align: baseline;
 808 |             align-items: baseline;
 809 |   }
 810 |   .flexbox[x-justify-xs="flex-start"] {
 811 |     -webkit-align-content: flex-start;
 812 |         -ms-flex-line-pack: start;
 813 |             align-content: flex-start;
 814 |   }
 815 |   .flexbox[x-justify-xs="flex-end"] {
 816 |     -webkit-align-content: flex-end;
 817 |         -ms-flex-line-pack: end;
 818 |             align-content: flex-end;
 819 |   }
 820 |   .flexbox[x-justify-xs="center"] {
 821 |     -webkit-align-content: center;
 822 |         -ms-flex-line-pack: center;
 823 |             align-content: center;
 824 |   }
 825 |   .flexbox[wrap-xs="wrap-reverse"] {
 826 |     -webkit-flex-wrap: wrap-reverse;
 827 |         -ms-flex-wrap: wrap-reverse;
 828 |             flex-wrap: wrap-reverse;
 829 |   }
 830 |   .flexbox[wrap-xs="wrap"] {
 831 |     -webkit-flex-wrap: wrap;
 832 |         -ms-flex-wrap: wrap;
 833 |             flex-wrap: wrap;
 834 |   }
 835 |   .flexbox[wrap-xs="nowrap"] {
 836 |     -webkit-flex-wrap: nowrap;
 837 |         -ms-flex-wrap: nowrap;
 838 |             flex-wrap: nowrap;
 839 |   }
 840 |   .flexbox[direction-xs="column-reverse"] {
 841 |     -webkit-box-orient: vertical;
 842 |     -webkit-box-direction: reverse;
 843 |     -webkit-flex-direction: column-reverse;
 844 |         -ms-flex-direction: column-reverse;
 845 |             flex-direction: column-reverse;
 846 |   }
 847 |   .flexbox[direction-xs="column"] {
 848 |     -webkit-box-orient: vertical;
 849 |     -webkit-box-direction: normal;
 850 |     -webkit-flex-direction: column;
 851 |         -ms-flex-direction: column;
 852 |             flex-direction: column;
 853 |   }
 854 |   .flexbox[direction-xs="row-reverse"] {
 855 |     -webkit-box-orient: horizontal;
 856 |     -webkit-box-direction: reverse;
 857 |     -webkit-flex-direction: row-reverse;
 858 |         -ms-flex-direction: row-reverse;
 859 |             flex-direction: row-reverse;
 860 |   }
 861 |   .flexbox[direction-xs="row"] {
 862 |     -webkit-box-orient: horizontal;
 863 |     -webkit-box-direction: normal;
 864 |     -webkit-flex-direction: row;
 865 |         -ms-flex-direction: row;
 866 |             flex-direction: row;
 867 |   }
 868 |   .flexbox > *[grow-xs="20"] {
 869 |     -webkit-box-flex: 20 ;
 870 |     -webkit-flex-grow: 20 ;
 871 |         -ms-flex-positive: 20 ;
 872 |             flex-grow: 20 ;
 873 |   }
 874 |   .flexbox > *[grow-xs="19"] {
 875 |     -webkit-box-flex: 19 ;
 876 |     -webkit-flex-grow: 19 ;
 877 |         -ms-flex-positive: 19 ;
 878 |             flex-grow: 19 ;
 879 |   }
 880 |   .flexbox > *[grow-xs="18"] {
 881 |     -webkit-box-flex: 18 ;
 882 |     -webkit-flex-grow: 18 ;
 883 |         -ms-flex-positive: 18 ;
 884 |             flex-grow: 18 ;
 885 |   }
 886 |   .flexbox > *[grow-xs="17"] {
 887 |     -webkit-box-flex: 17 ;
 888 |     -webkit-flex-grow: 17 ;
 889 |         -ms-flex-positive: 17 ;
 890 |             flex-grow: 17 ;
 891 |   }
 892 |   .flexbox > *[grow-xs="16"] {
 893 |     -webkit-box-flex: 16 ;
 894 |     -webkit-flex-grow: 16 ;
 895 |         -ms-flex-positive: 16 ;
 896 |             flex-grow: 16 ;
 897 |   }
 898 |   .flexbox > *[grow-xs="15"] {
 899 |     -webkit-box-flex: 15 ;
 900 |     -webkit-flex-grow: 15 ;
 901 |         -ms-flex-positive: 15 ;
 902 |             flex-grow: 15 ;
 903 |   }
 904 |   .flexbox > *[grow-xs="14"] {
 905 |     -webkit-box-flex: 14 ;
 906 |     -webkit-flex-grow: 14 ;
 907 |         -ms-flex-positive: 14 ;
 908 |             flex-grow: 14 ;
 909 |   }
 910 |   .flexbox > *[grow-xs="13"] {
 911 |     -webkit-box-flex: 13 ;
 912 |     -webkit-flex-grow: 13 ;
 913 |         -ms-flex-positive: 13 ;
 914 |             flex-grow: 13 ;
 915 |   }
 916 |   .flexbox > *[grow-xs="12"] {
 917 |     -webkit-box-flex: 12 ;
 918 |     -webkit-flex-grow: 12 ;
 919 |         -ms-flex-positive: 12 ;
 920 |             flex-grow: 12 ;
 921 |   }
 922 |   .flexbox > *[grow-xs="11"] {
 923 |     -webkit-box-flex: 11 ;
 924 |     -webkit-flex-grow: 11 ;
 925 |         -ms-flex-positive: 11 ;
 926 |             flex-grow: 11 ;
 927 |   }
 928 |   .flexbox > *[grow-xs="10"] {
 929 |     -webkit-box-flex: 10 ;
 930 |     -webkit-flex-grow: 10 ;
 931 |         -ms-flex-positive: 10 ;
 932 |             flex-grow: 10 ;
 933 |   }
 934 |   .flexbox > *[grow-xs="9"] {
 935 |     -webkit-box-flex: 9 ;
 936 |     -webkit-flex-grow: 9 ;
 937 |         -ms-flex-positive: 9 ;
 938 |             flex-grow: 9 ;
 939 |   }
 940 |   .flexbox > *[grow-xs="8"] {
 941 |     -webkit-box-flex: 8 ;
 942 |     -webkit-flex-grow: 8 ;
 943 |         -ms-flex-positive: 8 ;
 944 |             flex-grow: 8 ;
 945 |   }
 946 |   .flexbox > *[grow-xs="7"] {
 947 |     -webkit-box-flex: 7 ;
 948 |     -webkit-flex-grow: 7 ;
 949 |         -ms-flex-positive: 7 ;
 950 |             flex-grow: 7 ;
 951 |   }
 952 |   .flexbox > *[grow-xs="6"] {
 953 |     -webkit-box-flex: 6 ;
 954 |     -webkit-flex-grow: 6 ;
 955 |         -ms-flex-positive: 6 ;
 956 |             flex-grow: 6 ;
 957 |   }
 958 |   .flexbox > *[grow-xs="5"] {
 959 |     -webkit-box-flex: 5 ;
 960 |     -webkit-flex-grow: 5 ;
 961 |         -ms-flex-positive: 5 ;
 962 |             flex-grow: 5 ;
 963 |   }
 964 |   .flexbox > *[grow-xs="4"] {
 965 |     -webkit-box-flex: 4 ;
 966 |     -webkit-flex-grow: 4 ;
 967 |         -ms-flex-positive: 4 ;
 968 |             flex-grow: 4 ;
 969 |   }
 970 |   .flexbox > *[grow-xs="3"] {
 971 |     -webkit-box-flex: 3 ;
 972 |     -webkit-flex-grow: 3 ;
 973 |         -ms-flex-positive: 3 ;
 974 |             flex-grow: 3 ;
 975 |   }
 976 |   .flexbox > *[grow-xs="2"] {
 977 |     -webkit-box-flex: 2 ;
 978 |     -webkit-flex-grow: 2 ;
 979 |         -ms-flex-positive: 2 ;
 980 |             flex-grow: 2 ;
 981 |   }
 982 |   .flexbox > *[grow-xs="1"] {
 983 |     -webkit-box-flex: 1 ;
 984 |     -webkit-flex-grow: 1 ;
 985 |         -ms-flex-positive: 1 ;
 986 |             flex-grow: 1 ;
 987 |   }
 988 |   .flexbox > *[grow-xs="0"] {
 989 |     -webkit-box-flex: 0 ;
 990 |     -webkit-flex-grow: 0 ;
 991 |         -ms-flex-positive: 0 ;
 992 |             flex-grow: 0 ;
 993 |   }
 994 |   .flexbox > *[shrink-xs="20"] {
 995 |     -webkit-flex-shrink: 20 ;
 996 |         -ms-flex-negative: 20 ;
 997 |             flex-shrink: 20 ;
 998 |   }
 999 |   .flexbox > *[shrink-xs="19"] {
1000 |     -webkit-flex-shrink: 19 ;
1001 |         -ms-flex-negative: 19 ;
1002 |             flex-shrink: 19 ;
1003 |   }
1004 |   .flexbox > *[shrink-xs="18"] {
1005 |     -webkit-flex-shrink: 18 ;
1006 |         -ms-flex-negative: 18 ;
1007 |             flex-shrink: 18 ;
1008 |   }
1009 |   .flexbox > *[shrink-xs="17"] {
1010 |     -webkit-flex-shrink: 17 ;
1011 |         -ms-flex-negative: 17 ;
1012 |             flex-shrink: 17 ;
1013 |   }
1014 |   .flexbox > *[shrink-xs="16"] {
1015 |     -webkit-flex-shrink: 16 ;
1016 |         -ms-flex-negative: 16 ;
1017 |             flex-shrink: 16 ;
1018 |   }
1019 |   .flexbox > *[shrink-xs="15"] {
1020 |     -webkit-flex-shrink: 15 ;
1021 |         -ms-flex-negative: 15 ;
1022 |             flex-shrink: 15 ;
1023 |   }
1024 |   .flexbox > *[shrink-xs="14"] {
1025 |     -webkit-flex-shrink: 14 ;
1026 |         -ms-flex-negative: 14 ;
1027 |             flex-shrink: 14 ;
1028 |   }
1029 |   .flexbox > *[shrink-xs="13"] {
1030 |     -webkit-flex-shrink: 13 ;
1031 |         -ms-flex-negative: 13 ;
1032 |             flex-shrink: 13 ;
1033 |   }
1034 |   .flexbox > *[shrink-xs="12"] {
1035 |     -webkit-flex-shrink: 12 ;
1036 |         -ms-flex-negative: 12 ;
1037 |             flex-shrink: 12 ;
1038 |   }
1039 |   .flexbox > *[shrink-xs="11"] {
1040 |     -webkit-flex-shrink: 11 ;
1041 |         -ms-flex-negative: 11 ;
1042 |             flex-shrink: 11 ;
1043 |   }
1044 |   .flexbox > *[shrink-xs="10"] {
1045 |     -webkit-flex-shrink: 10 ;
1046 |         -ms-flex-negative: 10 ;
1047 |             flex-shrink: 10 ;
1048 |   }
1049 |   .flexbox > *[shrink-xs="9"] {
1050 |     -webkit-flex-shrink: 9 ;
1051 |         -ms-flex-negative: 9 ;
1052 |             flex-shrink: 9 ;
1053 |   }
1054 |   .flexbox > *[shrink-xs="8"] {
1055 |     -webkit-flex-shrink: 8 ;
1056 |         -ms-flex-negative: 8 ;
1057 |             flex-shrink: 8 ;
1058 |   }
1059 |   .flexbox > *[shrink-xs="7"] {
1060 |     -webkit-flex-shrink: 7 ;
1061 |         -ms-flex-negative: 7 ;
1062 |             flex-shrink: 7 ;
1063 |   }
1064 |   .flexbox > *[shrink-xs="6"] {
1065 |     -webkit-flex-shrink: 6 ;
1066 |         -ms-flex-negative: 6 ;
1067 |             flex-shrink: 6 ;
1068 |   }
1069 |   .flexbox > *[shrink-xs="5"] {
1070 |     -webkit-flex-shrink: 5 ;
1071 |         -ms-flex-negative: 5 ;
1072 |             flex-shrink: 5 ;
1073 |   }
1074 |   .flexbox > *[shrink-xs="4"] {
1075 |     -webkit-flex-shrink: 4 ;
1076 |         -ms-flex-negative: 4 ;
1077 |             flex-shrink: 4 ;
1078 |   }
1079 |   .flexbox > *[shrink-xs="3"] {
1080 |     -webkit-flex-shrink: 3 ;
1081 |         -ms-flex-negative: 3 ;
1082 |             flex-shrink: 3 ;
1083 |   }
1084 |   .flexbox > *[shrink-xs="2"] {
1085 |     -webkit-flex-shrink: 2 ;
1086 |         -ms-flex-negative: 2 ;
1087 |             flex-shrink: 2 ;
1088 |   }
1089 |   .flexbox > *[shrink-xs="1"] {
1090 |     -webkit-flex-shrink: 1 ;
1091 |         -ms-flex-negative: 1 ;
1092 |             flex-shrink: 1 ;
1093 |   }
1094 |   .flexbox > *[shrink-xs="0"] {
1095 |     -webkit-flex-shrink: 0 ;
1096 |         -ms-flex-negative: 0 ;
1097 |             flex-shrink: 0 ;
1098 |   }
1099 |   .flexbox > *[order-xs="20"] {
1100 |     -webkit-box-ordinal-group: 21;
1101 |     -webkit-order: 20 ;
1102 |         -ms-flex-order: 20 ;
1103 |             order: 20 ;
1104 |   }
1105 |   .flexbox > *[order-xs="19"] {
1106 |     -webkit-box-ordinal-group: 20;
1107 |     -webkit-order: 19 ;
1108 |         -ms-flex-order: 19 ;
1109 |             order: 19 ;
1110 |   }
1111 |   .flexbox > *[order-xs="18"] {
1112 |     -webkit-box-ordinal-group: 19;
1113 |     -webkit-order: 18 ;
1114 |         -ms-flex-order: 18 ;
1115 |             order: 18 ;
1116 |   }
1117 |   .flexbox > *[order-xs="17"] {
1118 |     -webkit-box-ordinal-group: 18;
1119 |     -webkit-order: 17 ;
1120 |         -ms-flex-order: 17 ;
1121 |             order: 17 ;
1122 |   }
1123 |   .flexbox > *[order-xs="16"] {
1124 |     -webkit-box-ordinal-group: 17;
1125 |     -webkit-order: 16 ;
1126 |         -ms-flex-order: 16 ;
1127 |             order: 16 ;
1128 |   }
1129 |   .flexbox > *[order-xs="15"] {
1130 |     -webkit-box-ordinal-group: 16;
1131 |     -webkit-order: 15 ;
1132 |         -ms-flex-order: 15 ;
1133 |             order: 15 ;
1134 |   }
1135 |   .flexbox > *[order-xs="14"] {
1136 |     -webkit-box-ordinal-group: 15;
1137 |     -webkit-order: 14 ;
1138 |         -ms-flex-order: 14 ;
1139 |             order: 14 ;
1140 |   }
1141 |   .flexbox > *[order-xs="13"] {
1142 |     -webkit-box-ordinal-group: 14;
1143 |     -webkit-order: 13 ;
1144 |         -ms-flex-order: 13 ;
1145 |             order: 13 ;
1146 |   }
1147 |   .flexbox > *[order-xs="12"] {
1148 |     -webkit-box-ordinal-group: 13;
1149 |     -webkit-order: 12 ;
1150 |         -ms-flex-order: 12 ;
1151 |             order: 12 ;
1152 |   }
1153 |   .flexbox > *[order-xs="11"] {
1154 |     -webkit-box-ordinal-group: 12;
1155 |     -webkit-order: 11 ;
1156 |         -ms-flex-order: 11 ;
1157 |             order: 11 ;
1158 |   }
1159 |   .flexbox > *[order-xs="10"] {
1160 |     -webkit-box-ordinal-group: 11;
1161 |     -webkit-order: 10 ;
1162 |         -ms-flex-order: 10 ;
1163 |             order: 10 ;
1164 |   }
1165 |   .flexbox > *[order-xs="9"] {
1166 |     -webkit-box-ordinal-group: 10;
1167 |     -webkit-order: 9 ;
1168 |         -ms-flex-order: 9 ;
1169 |             order: 9 ;
1170 |   }
1171 |   .flexbox > *[order-xs="8"] {
1172 |     -webkit-box-ordinal-group: 9;
1173 |     -webkit-order: 8 ;
1174 |         -ms-flex-order: 8 ;
1175 |             order: 8 ;
1176 |   }
1177 |   .flexbox > *[order-xs="7"] {
1178 |     -webkit-box-ordinal-group: 8;
1179 |     -webkit-order: 7 ;
1180 |         -ms-flex-order: 7 ;
1181 |             order: 7 ;
1182 |   }
1183 |   .flexbox > *[order-xs="6"] {
1184 |     -webkit-box-ordinal-group: 7;
1185 |     -webkit-order: 6 ;
1186 |         -ms-flex-order: 6 ;
1187 |             order: 6 ;
1188 |   }
1189 |   .flexbox > *[order-xs="5"] {
1190 |     -webkit-box-ordinal-group: 6;
1191 |     -webkit-order: 5 ;
1192 |         -ms-flex-order: 5 ;
1193 |             order: 5 ;
1194 |   }
1195 |   .flexbox > *[order-xs="4"] {
1196 |     -webkit-box-ordinal-group: 5;
1197 |     -webkit-order: 4 ;
1198 |         -ms-flex-order: 4 ;
1199 |             order: 4 ;
1200 |   }
1201 |   .flexbox > *[order-xs="3"] {
1202 |     -webkit-box-ordinal-group: 4;
1203 |     -webkit-order: 3 ;
1204 |         -ms-flex-order: 3 ;
1205 |             order: 3 ;
1206 |   }
1207 |   .flexbox > *[order-xs="2"] {
1208 |     -webkit-box-ordinal-group: 3;
1209 |     -webkit-order: 2 ;
1210 |         -ms-flex-order: 2 ;
1211 |             order: 2 ;
1212 |   }
1213 |   .flexbox > *[order-xs="1"] {
1214 |     -webkit-box-ordinal-group: 2;
1215 |     -webkit-order: 1 ;
1216 |         -ms-flex-order: 1 ;
1217 |             order: 1 ;
1218 |   }
1219 |   .flexbox > *[order-xs="0"] {
1220 |     -webkit-box-ordinal-group: 1;
1221 |     -webkit-order: 0 ;
1222 |         -ms-flex-order: 0 ;
1223 |             order: 0 ;
1224 |   }
1225 | }
1226 | @media only screen and (min-width : 481px) and (max-width : 768px) {
1227 |   .flexbox[justify-sm="space-between"] {
1228 |     -webkit-box-pack: justify;
1229 |     -webkit-justify-content: space-between;
1230 |         -ms-flex-pack: justify;
1231 |             justify-content: space-between;
1232 |   }
1233 |   .flexbox[justify-sm="space-around"] {
1234 |     -webkit-justify-content: space-around;
1235 |         -ms-flex-pack: distribute;
1236 |             justify-content: space-around;
1237 |   }
1238 |   .flexbox[justify-sm="flex-start"] {
1239 |     -webkit-box-pack: start;
1240 |     -webkit-justify-content: flex-start;
1241 |         -ms-flex-pack: start;
1242 |             justify-content: flex-start;
1243 |   }
1244 |   .flexbox[justify-sm="flex-end"] {
1245 |     -webkit-box-pack: end;
1246 |     -webkit-justify-content: flex-end;
1247 |         -ms-flex-pack: end;
1248 |             justify-content: flex-end;
1249 |   }
1250 |   .flexbox[justify-sm="center"] {
1251 |     -webkit-box-pack: center;
1252 |     -webkit-justify-content: center;
1253 |         -ms-flex-pack: center;
1254 |             justify-content: center;
1255 |   }
1256 |   .flexbox[align-sm="stretch"] {
1257 |     -webkit-box-align: stretch;
1258 |     -webkit-align-items: stretch;
1259 |         -ms-flex-align: stretch;
1260 |             align-items: stretch;
1261 |   }
1262 |   .flexbox[align-sm="flex-start"] {
1263 |     -webkit-box-align: start;
1264 |     -webkit-align-items: flex-start;
1265 |         -ms-flex-align: start;
1266 |             align-items: flex-start;
1267 |   }
1268 |   .flexbox[align-sm="flex-end"] {
1269 |     -webkit-box-align: end;
1270 |     -webkit-align-items: flex-end;
1271 |         -ms-flex-align: end;
1272 |             align-items: flex-end;
1273 |   }
1274 |   .flexbox[align-sm="center"] {
1275 |     -webkit-box-align: center;
1276 |     -webkit-align-items: center;
1277 |         -ms-flex-align: center;
1278 |             align-items: center;
1279 |   }
1280 |   .flexbox[align-sm="baseline"] {
1281 |     -webkit-box-align: baseline;
1282 |     -webkit-align-items: baseline;
1283 |         -ms-flex-align: baseline;
1284 |             align-items: baseline;
1285 |   }
1286 |   .flexbox[x-justify-sm="flex-start"] {
1287 |     -webkit-align-content: flex-start;
1288 |         -ms-flex-line-pack: start;
1289 |             align-content: flex-start;
1290 |   }
1291 |   .flexbox[x-justify-sm="flex-end"] {
1292 |     -webkit-align-content: flex-end;
1293 |         -ms-flex-line-pack: end;
1294 |             align-content: flex-end;
1295 |   }
1296 |   .flexbox[x-justify-sm="center"] {
1297 |     -webkit-align-content: center;
1298 |         -ms-flex-line-pack: center;
1299 |             align-content: center;
1300 |   }
1301 |   .flexbox[wrap-sm="wrap-reverse"] {
1302 |     -webkit-flex-wrap: wrap-reverse;
1303 |         -ms-flex-wrap: wrap-reverse;
1304 |             flex-wrap: wrap-reverse;
1305 |   }
1306 |   .flexbox[wrap-sm="wrap"] {
1307 |     -webkit-flex-wrap: wrap;
1308 |         -ms-flex-wrap: wrap;
1309 |             flex-wrap: wrap;
1310 |   }
1311 |   .flexbox[wrap-sm="nowrap"] {
1312 |     -webkit-flex-wrap: nowrap;
1313 |         -ms-flex-wrap: nowrap;
1314 |             flex-wrap: nowrap;
1315 |   }
1316 |   .flexbox[direction-sm="column-reverse"] {
1317 |     -webkit-box-orient: vertical;
1318 |     -webkit-box-direction: reverse;
1319 |     -webkit-flex-direction: column-reverse;
1320 |         -ms-flex-direction: column-reverse;
1321 |             flex-direction: column-reverse;
1322 |   }
1323 |   .flexbox[direction-sm="column"] {
1324 |     -webkit-box-orient: vertical;
1325 |     -webkit-box-direction: normal;
1326 |     -webkit-flex-direction: column;
1327 |         -ms-flex-direction: column;
1328 |             flex-direction: column;
1329 |   }
1330 |   .flexbox[direction-sm="row-reverse"] {
1331 |     -webkit-box-orient: horizontal;
1332 |     -webkit-box-direction: reverse;
1333 |     -webkit-flex-direction: row-reverse;
1334 |         -ms-flex-direction: row-reverse;
1335 |             flex-direction: row-reverse;
1336 |   }
1337 |   .flexbox[direction-sm="row"] {
1338 |     -webkit-box-orient: horizontal;
1339 |     -webkit-box-direction: normal;
1340 |     -webkit-flex-direction: row;
1341 |         -ms-flex-direction: row;
1342 |             flex-direction: row;
1343 |   }
1344 |   .flexbox > *[grow-sm="20"] {
1345 |     -webkit-box-flex: 20 ;
1346 |     -webkit-flex-grow: 20 ;
1347 |         -ms-flex-positive: 20 ;
1348 |             flex-grow: 20 ;
1349 |   }
1350 |   .flexbox > *[grow-sm="19"] {
1351 |     -webkit-box-flex: 19 ;
1352 |     -webkit-flex-grow: 19 ;
1353 |         -ms-flex-positive: 19 ;
1354 |             flex-grow: 19 ;
1355 |   }
1356 |   .flexbox > *[grow-sm="18"] {
1357 |     -webkit-box-flex: 18 ;
1358 |     -webkit-flex-grow: 18 ;
1359 |         -ms-flex-positive: 18 ;
1360 |             flex-grow: 18 ;
1361 |   }
1362 |   .flexbox > *[grow-sm="17"] {
1363 |     -webkit-box-flex: 17 ;
1364 |     -webkit-flex-grow: 17 ;
1365 |         -ms-flex-positive: 17 ;
1366 |             flex-grow: 17 ;
1367 |   }
1368 |   .flexbox > *[grow-sm="16"] {
1369 |     -webkit-box-flex: 16 ;
1370 |     -webkit-flex-grow: 16 ;
1371 |         -ms-flex-positive: 16 ;
1372 |             flex-grow: 16 ;
1373 |   }
1374 |   .flexbox > *[grow-sm="15"] {
1375 |     -webkit-box-flex: 15 ;
1376 |     -webkit-flex-grow: 15 ;
1377 |         -ms-flex-positive: 15 ;
1378 |             flex-grow: 15 ;
1379 |   }
1380 |   .flexbox > *[grow-sm="14"] {
1381 |     -webkit-box-flex: 14 ;
1382 |     -webkit-flex-grow: 14 ;
1383 |         -ms-flex-positive: 14 ;
1384 |             flex-grow: 14 ;
1385 |   }
1386 |   .flexbox > *[grow-sm="13"] {
1387 |     -webkit-box-flex: 13 ;
1388 |     -webkit-flex-grow: 13 ;
1389 |         -ms-flex-positive: 13 ;
1390 |             flex-grow: 13 ;
1391 |   }
1392 |   .flexbox > *[grow-sm="12"] {
1393 |     -webkit-box-flex: 12 ;
1394 |     -webkit-flex-grow: 12 ;
1395 |         -ms-flex-positive: 12 ;
1396 |             flex-grow: 12 ;
1397 |   }
1398 |   .flexbox > *[grow-sm="11"] {
1399 |     -webkit-box-flex: 11 ;
1400 |     -webkit-flex-grow: 11 ;
1401 |         -ms-flex-positive: 11 ;
1402 |             flex-grow: 11 ;
1403 |   }
1404 |   .flexbox > *[grow-sm="10"] {
1405 |     -webkit-box-flex: 10 ;
1406 |     -webkit-flex-grow: 10 ;
1407 |         -ms-flex-positive: 10 ;
1408 |             flex-grow: 10 ;
1409 |   }
1410 |   .flexbox > *[grow-sm="9"] {
1411 |     -webkit-box-flex: 9 ;
1412 |     -webkit-flex-grow: 9 ;
1413 |         -ms-flex-positive: 9 ;
1414 |             flex-grow: 9 ;
1415 |   }
1416 |   .flexbox > *[grow-sm="8"] {
1417 |     -webkit-box-flex: 8 ;
1418 |     -webkit-flex-grow: 8 ;
1419 |         -ms-flex-positive: 8 ;
1420 |             flex-grow: 8 ;
1421 |   }
1422 |   .flexbox > *[grow-sm="7"] {
1423 |     -webkit-box-flex: 7 ;
1424 |     -webkit-flex-grow: 7 ;
1425 |         -ms-flex-positive: 7 ;
1426 |             flex-grow: 7 ;
1427 |   }
1428 |   .flexbox > *[grow-sm="6"] {
1429 |     -webkit-box-flex: 6 ;
1430 |     -webkit-flex-grow: 6 ;
1431 |         -ms-flex-positive: 6 ;
1432 |             flex-grow: 6 ;
1433 |   }
1434 |   .flexbox > *[grow-sm="5"] {
1435 |     -webkit-box-flex: 5 ;
1436 |     -webkit-flex-grow: 5 ;
1437 |         -ms-flex-positive: 5 ;
1438 |             flex-grow: 5 ;
1439 |   }
1440 |   .flexbox > *[grow-sm="4"] {
1441 |     -webkit-box-flex: 4 ;
1442 |     -webkit-flex-grow: 4 ;
1443 |         -ms-flex-positive: 4 ;
1444 |             flex-grow: 4 ;
1445 |   }
1446 |   .flexbox > *[grow-sm="3"] {
1447 |     -webkit-box-flex: 3 ;
1448 |     -webkit-flex-grow: 3 ;
1449 |         -ms-flex-positive: 3 ;
1450 |             flex-grow: 3 ;
1451 |   }
1452 |   .flexbox > *[grow-sm="2"] {
1453 |     -webkit-box-flex: 2 ;
1454 |     -webkit-flex-grow: 2 ;
1455 |         -ms-flex-positive: 2 ;
1456 |             flex-grow: 2 ;
1457 |   }
1458 |   .flexbox > *[grow-sm="1"] {
1459 |     -webkit-box-flex: 1 ;
1460 |     -webkit-flex-grow: 1 ;
1461 |         -ms-flex-positive: 1 ;
1462 |             flex-grow: 1 ;
1463 |   }
1464 |   .flexbox > *[grow-sm="0"] {
1465 |     -webkit-box-flex: 0 ;
1466 |     -webkit-flex-grow: 0 ;
1467 |         -ms-flex-positive: 0 ;
1468 |             flex-grow: 0 ;
1469 |   }
1470 |   .flexbox > *[shrink-sm="20"] {
1471 |     -webkit-flex-shrink: 20 ;
1472 |         -ms-flex-negative: 20 ;
1473 |             flex-shrink: 20 ;
1474 |   }
1475 |   .flexbox > *[shrink-sm="19"] {
1476 |     -webkit-flex-shrink: 19 ;
1477 |         -ms-flex-negative: 19 ;
1478 |             flex-shrink: 19 ;
1479 |   }
1480 |   .flexbox > *[shrink-sm="18"] {
1481 |     -webkit-flex-shrink: 18 ;
1482 |         -ms-flex-negative: 18 ;
1483 |             flex-shrink: 18 ;
1484 |   }
1485 |   .flexbox > *[shrink-sm="17"] {
1486 |     -webkit-flex-shrink: 17 ;
1487 |         -ms-flex-negative: 17 ;
1488 |             flex-shrink: 17 ;
1489 |   }
1490 |   .flexbox > *[shrink-sm="16"] {
1491 |     -webkit-flex-shrink: 16 ;
1492 |         -ms-flex-negative: 16 ;
1493 |             flex-shrink: 16 ;
1494 |   }
1495 |   .flexbox > *[shrink-sm="15"] {
1496 |     -webkit-flex-shrink: 15 ;
1497 |         -ms-flex-negative: 15 ;
1498 |             flex-shrink: 15 ;
1499 |   }
1500 |   .flexbox > *[shrink-sm="14"] {
1501 |     -webkit-flex-shrink: 14 ;
1502 |         -ms-flex-negative: 14 ;
1503 |             flex-shrink: 14 ;
1504 |   }
1505 |   .flexbox > *[shrink-sm="13"] {
1506 |     -webkit-flex-shrink: 13 ;
1507 |         -ms-flex-negative: 13 ;
1508 |             flex-shrink: 13 ;
1509 |   }
1510 |   .flexbox > *[shrink-sm="12"] {
1511 |     -webkit-flex-shrink: 12 ;
1512 |         -ms-flex-negative: 12 ;
1513 |             flex-shrink: 12 ;
1514 |   }
1515 |   .flexbox > *[shrink-sm="11"] {
1516 |     -webkit-flex-shrink: 11 ;
1517 |         -ms-flex-negative: 11 ;
1518 |             flex-shrink: 11 ;
1519 |   }
1520 |   .flexbox > *[shrink-sm="10"] {
1521 |     -webkit-flex-shrink: 10 ;
1522 |         -ms-flex-negative: 10 ;
1523 |             flex-shrink: 10 ;
1524 |   }
1525 |   .flexbox > *[shrink-sm="9"] {
1526 |     -webkit-flex-shrink: 9 ;
1527 |         -ms-flex-negative: 9 ;
1528 |             flex-shrink: 9 ;
1529 |   }
1530 |   .flexbox > *[shrink-sm="8"] {
1531 |     -webkit-flex-shrink: 8 ;
1532 |         -ms-flex-negative: 8 ;
1533 |             flex-shrink: 8 ;
1534 |   }
1535 |   .flexbox > *[shrink-sm="7"] {
1536 |     -webkit-flex-shrink: 7 ;
1537 |         -ms-flex-negative: 7 ;
1538 |             flex-shrink: 7 ;
1539 |   }
1540 |   .flexbox > *[shrink-sm="6"] {
1541 |     -webkit-flex-shrink: 6 ;
1542 |         -ms-flex-negative: 6 ;
1543 |             flex-shrink: 6 ;
1544 |   }
1545 |   .flexbox > *[shrink-sm="5"] {
1546 |     -webkit-flex-shrink: 5 ;
1547 |         -ms-flex-negative: 5 ;
1548 |             flex-shrink: 5 ;
1549 |   }
1550 |   .flexbox > *[shrink-sm="4"] {
1551 |     -webkit-flex-shrink: 4 ;
1552 |         -ms-flex-negative: 4 ;
1553 |             flex-shrink: 4 ;
1554 |   }
1555 |   .flexbox > *[shrink-sm="3"] {
1556 |     -webkit-flex-shrink: 3 ;
1557 |         -ms-flex-negative: 3 ;
1558 |             flex-shrink: 3 ;
1559 |   }
1560 |   .flexbox > *[shrink-sm="2"] {
1561 |     -webkit-flex-shrink: 2 ;
1562 |         -ms-flex-negative: 2 ;
1563 |             flex-shrink: 2 ;
1564 |   }
1565 |   .flexbox > *[shrink-sm="1"] {
1566 |     -webkit-flex-shrink: 1 ;
1567 |         -ms-flex-negative: 1 ;
1568 |             flex-shrink: 1 ;
1569 |   }
1570 |   .flexbox > *[shrink-sm="0"] {
1571 |     -webkit-flex-shrink: 0 ;
1572 |         -ms-flex-negative: 0 ;
1573 |             flex-shrink: 0 ;
1574 |   }
1575 |   .flexbox > *[order-sm="20"] {
1576 |     -webkit-box-ordinal-group: 21;
1577 |     -webkit-order: 20 ;
1578 |         -ms-flex-order: 20 ;
1579 |             order: 20 ;
1580 |   }
1581 |   .flexbox > *[order-sm="19"] {
1582 |     -webkit-box-ordinal-group: 20;
1583 |     -webkit-order: 19 ;
1584 |         -ms-flex-order: 19 ;
1585 |             order: 19 ;
1586 |   }
1587 |   .flexbox > *[order-sm="18"] {
1588 |     -webkit-box-ordinal-group: 19;
1589 |     -webkit-order: 18 ;
1590 |         -ms-flex-order: 18 ;
1591 |             order: 18 ;
1592 |   }
1593 |   .flexbox > *[order-sm="17"] {
1594 |     -webkit-box-ordinal-group: 18;
1595 |     -webkit-order: 17 ;
1596 |         -ms-flex-order: 17 ;
1597 |             order: 17 ;
1598 |   }
1599 |   .flexbox > *[order-sm="16"] {
1600 |     -webkit-box-ordinal-group: 17;
1601 |     -webkit-order: 16 ;
1602 |         -ms-flex-order: 16 ;
1603 |             order: 16 ;
1604 |   }
1605 |   .flexbox > *[order-sm="15"] {
1606 |     -webkit-box-ordinal-group: 16;
1607 |     -webkit-order: 15 ;
1608 |         -ms-flex-order: 15 ;
1609 |             order: 15 ;
1610 |   }
1611 |   .flexbox > *[order-sm="14"] {
1612 |     -webkit-box-ordinal-group: 15;
1613 |     -webkit-order: 14 ;
1614 |         -ms-flex-order: 14 ;
1615 |             order: 14 ;
1616 |   }
1617 |   .flexbox > *[order-sm="13"] {
1618 |     -webkit-box-ordinal-group: 14;
1619 |     -webkit-order: 13 ;
1620 |         -ms-flex-order: 13 ;
1621 |             order: 13 ;
1622 |   }
1623 |   .flexbox > *[order-sm="12"] {
1624 |     -webkit-box-ordinal-group: 13;
1625 |     -webkit-order: 12 ;
1626 |         -ms-flex-order: 12 ;
1627 |             order: 12 ;
1628 |   }
1629 |   .flexbox > *[order-sm="11"] {
1630 |     -webkit-box-ordinal-group: 12;
1631 |     -webkit-order: 11 ;
1632 |         -ms-flex-order: 11 ;
1633 |             order: 11 ;
1634 |   }
1635 |   .flexbox > *[order-sm="10"] {
1636 |     -webkit-box-ordinal-group: 11;
1637 |     -webkit-order: 10 ;
1638 |         -ms-flex-order: 10 ;
1639 |             order: 10 ;
1640 |   }
1641 |   .flexbox > *[order-sm="9"] {
1642 |     -webkit-box-ordinal-group: 10;
1643 |     -webkit-order: 9 ;
1644 |         -ms-flex-order: 9 ;
1645 |             order: 9 ;
1646 |   }
1647 |   .flexbox > *[order-sm="8"] {
1648 |     -webkit-box-ordinal-group: 9;
1649 |     -webkit-order: 8 ;
1650 |         -ms-flex-order: 8 ;
1651 |             order: 8 ;
1652 |   }
1653 |   .flexbox > *[order-sm="7"] {
1654 |     -webkit-box-ordinal-group: 8;
1655 |     -webkit-order: 7 ;
1656 |         -ms-flex-order: 7 ;
1657 |             order: 7 ;
1658 |   }
1659 |   .flexbox > *[order-sm="6"] {
1660 |     -webkit-box-ordinal-group: 7;
1661 |     -webkit-order: 6 ;
1662 |         -ms-flex-order: 6 ;
1663 |             order: 6 ;
1664 |   }
1665 |   .flexbox > *[order-sm="5"] {
1666 |     -webkit-box-ordinal-group: 6;
1667 |     -webkit-order: 5 ;
1668 |         -ms-flex-order: 5 ;
1669 |             order: 5 ;
1670 |   }
1671 |   .flexbox > *[order-sm="4"] {
1672 |     -webkit-box-ordinal-group: 5;
1673 |     -webkit-order: 4 ;
1674 |         -ms-flex-order: 4 ;
1675 |             order: 4 ;
1676 |   }
1677 |   .flexbox > *[order-sm="3"] {
1678 |     -webkit-box-ordinal-group: 4;
1679 |     -webkit-order: 3 ;
1680 |         -ms-flex-order: 3 ;
1681 |             order: 3 ;
1682 |   }
1683 |   .flexbox > *[order-sm="2"] {
1684 |     -webkit-box-ordinal-group: 3;
1685 |     -webkit-order: 2 ;
1686 |         -ms-flex-order: 2 ;
1687 |             order: 2 ;
1688 |   }
1689 |   .flexbox > *[order-sm="1"] {
1690 |     -webkit-box-ordinal-group: 2;
1691 |     -webkit-order: 1 ;
1692 |         -ms-flex-order: 1 ;
1693 |             order: 1 ;
1694 |   }
1695 |   .flexbox > *[order-sm="0"] {
1696 |     -webkit-box-ordinal-group: 1;
1697 |     -webkit-order: 0 ;
1698 |         -ms-flex-order: 0 ;
1699 |             order: 0 ;
1700 |   }
1701 | }
1702 | @media only screen and (min-width: 769px) and (max-width : 992px) {
1703 |   .flexbox[justify-md="space-between"] {
1704 |     -webkit-box-pack: justify;
1705 |     -webkit-justify-content: space-between;
1706 |         -ms-flex-pack: justify;
1707 |             justify-content: space-between;
1708 |   }
1709 |   .flexbox[justify-md="space-around"] {
1710 |     -webkit-justify-content: space-around;
1711 |         -ms-flex-pack: distribute;
1712 |             justify-content: space-around;
1713 |   }
1714 |   .flexbox[justify-md="flex-start"] {
1715 |     -webkit-box-pack: start;
1716 |     -webkit-justify-content: flex-start;
1717 |         -ms-flex-pack: start;
1718 |             justify-content: flex-start;
1719 |   }
1720 |   .flexbox[justify-md="flex-end"] {
1721 |     -webkit-box-pack: end;
1722 |     -webkit-justify-content: flex-end;
1723 |         -ms-flex-pack: end;
1724 |             justify-content: flex-end;
1725 |   }
1726 |   .flexbox[justify-md="center"] {
1727 |     -webkit-box-pack: center;
1728 |     -webkit-justify-content: center;
1729 |         -ms-flex-pack: center;
1730 |             justify-content: center;
1731 |   }
1732 |   .flexbox[align-md="stretch"] {
1733 |     -webkit-box-align: stretch;
1734 |     -webkit-align-items: stretch;
1735 |         -ms-flex-align: stretch;
1736 |             align-items: stretch;
1737 |   }
1738 |   .flexbox[align-md="flex-start"] {
1739 |     -webkit-box-align: start;
1740 |     -webkit-align-items: flex-start;
1741 |         -ms-flex-align: start;
1742 |             align-items: flex-start;
1743 |   }
1744 |   .flexbox[align-md="flex-end"] {
1745 |     -webkit-box-align: end;
1746 |     -webkit-align-items: flex-end;
1747 |         -ms-flex-align: end;
1748 |             align-items: flex-end;
1749 |   }
1750 |   .flexbox[align-md="center"] {
1751 |     -webkit-box-align: center;
1752 |     -webkit-align-items: center;
1753 |         -ms-flex-align: center;
1754 |             align-items: center;
1755 |   }
1756 |   .flexbox[align-md="baseline"] {
1757 |     -webkit-box-align: baseline;
1758 |     -webkit-align-items: baseline;
1759 |         -ms-flex-align: baseline;
1760 |             align-items: baseline;
1761 |   }
1762 |   .flexbox[x-justify-md="flex-start"] {
1763 |     -webkit-align-content: flex-start;
1764 |         -ms-flex-line-pack: start;
1765 |             align-content: flex-start;
1766 |   }
1767 |   .flexbox[x-justify-md="flex-end"] {
1768 |     -webkit-align-content: flex-end;
1769 |         -ms-flex-line-pack: end;
1770 |             align-content: flex-end;
1771 |   }
1772 |   .flexbox[x-justify-md="center"] {
1773 |     -webkit-align-content: center;
1774 |         -ms-flex-line-pack: center;
1775 |             align-content: center;
1776 |   }
1777 |   .flexbox[wrap-md="wrap-reverse"] {
1778 |     -webkit-flex-wrap: wrap-reverse;
1779 |         -ms-flex-wrap: wrap-reverse;
1780 |             flex-wrap: wrap-reverse;
1781 |   }
1782 |   .flexbox[wrap-md="wrap"] {
1783 |     -webkit-flex-wrap: wrap;
1784 |         -ms-flex-wrap: wrap;
1785 |             flex-wrap: wrap;
1786 |   }
1787 |   .flexbox[wrap-md="nowrap"] {
1788 |     -webkit-flex-wrap: nowrap;
1789 |         -ms-flex-wrap: nowrap;
1790 |             flex-wrap: nowrap;
1791 |   }
1792 |   .flexbox[direction-md="column-reverse"] {
1793 |     -webkit-box-orient: vertical;
1794 |     -webkit-box-direction: reverse;
1795 |     -webkit-flex-direction: column-reverse;
1796 |         -ms-flex-direction: column-reverse;
1797 |             flex-direction: column-reverse;
1798 |   }
1799 |   .flexbox[direction-md="column"] {
1800 |     -webkit-box-orient: vertical;
1801 |     -webkit-box-direction: normal;
1802 |     -webkit-flex-direction: column;
1803 |         -ms-flex-direction: column;
1804 |             flex-direction: column;
1805 |   }
1806 |   .flexbox[direction-md="row-reverse"] {
1807 |     -webkit-box-orient: horizontal;
1808 |     -webkit-box-direction: reverse;
1809 |     -webkit-flex-direction: row-reverse;
1810 |         -ms-flex-direction: row-reverse;
1811 |             flex-direction: row-reverse;
1812 |   }
1813 |   .flexbox[direction-md="row"] {
1814 |     -webkit-box-orient: horizontal;
1815 |     -webkit-box-direction: normal;
1816 |     -webkit-flex-direction: row;
1817 |         -ms-flex-direction: row;
1818 |             flex-direction: row;
1819 |   }
1820 |   .flexbox > *[grow-md="20"] {
1821 |     -webkit-box-flex: 20 ;
1822 |     -webkit-flex-grow: 20 ;
1823 |         -ms-flex-positive: 20 ;
1824 |             flex-grow: 20 ;
1825 |   }
1826 |   .flexbox > *[grow-md="19"] {
1827 |     -webkit-box-flex: 19 ;
1828 |     -webkit-flex-grow: 19 ;
1829 |         -ms-flex-positive: 19 ;
1830 |             flex-grow: 19 ;
1831 |   }
1832 |   .flexbox > *[grow-md="18"] {
1833 |     -webkit-box-flex: 18 ;
1834 |     -webkit-flex-grow: 18 ;
1835 |         -ms-flex-positive: 18 ;
1836 |             flex-grow: 18 ;
1837 |   }
1838 |   .flexbox > *[grow-md="17"] {
1839 |     -webkit-box-flex: 17 ;
1840 |     -webkit-flex-grow: 17 ;
1841 |         -ms-flex-positive: 17 ;
1842 |             flex-grow: 17 ;
1843 |   }
1844 |   .flexbox > *[grow-md="16"] {
1845 |     -webkit-box-flex: 16 ;
1846 |     -webkit-flex-grow: 16 ;
1847 |         -ms-flex-positive: 16 ;
1848 |             flex-grow: 16 ;
1849 |   }
1850 |   .flexbox > *[grow-md="15"] {
1851 |     -webkit-box-flex: 15 ;
1852 |     -webkit-flex-grow: 15 ;
1853 |         -ms-flex-positive: 15 ;
1854 |             flex-grow: 15 ;
1855 |   }
1856 |   .flexbox > *[grow-md="14"] {
1857 |     -webkit-box-flex: 14 ;
1858 |     -webkit-flex-grow: 14 ;
1859 |         -ms-flex-positive: 14 ;
1860 |             flex-grow: 14 ;
1861 |   }
1862 |   .flexbox > *[grow-md="13"] {
1863 |     -webkit-box-flex: 13 ;
1864 |     -webkit-flex-grow: 13 ;
1865 |         -ms-flex-positive: 13 ;
1866 |             flex-grow: 13 ;
1867 |   }
1868 |   .flexbox > *[grow-md="12"] {
1869 |     -webkit-box-flex: 12 ;
1870 |     -webkit-flex-grow: 12 ;
1871 |         -ms-flex-positive: 12 ;
1872 |             flex-grow: 12 ;
1873 |   }
1874 |   .flexbox > *[grow-md="11"] {
1875 |     -webkit-box-flex: 11 ;
1876 |     -webkit-flex-grow: 11 ;
1877 |         -ms-flex-positive: 11 ;
1878 |             flex-grow: 11 ;
1879 |   }
1880 |   .flexbox > *[grow-md="10"] {
1881 |     -webkit-box-flex: 10 ;
1882 |     -webkit-flex-grow: 10 ;
1883 |         -ms-flex-positive: 10 ;
1884 |             flex-grow: 10 ;
1885 |   }
1886 |   .flexbox > *[grow-md="9"] {
1887 |     -webkit-box-flex: 9 ;
1888 |     -webkit-flex-grow: 9 ;
1889 |         -ms-flex-positive: 9 ;
1890 |             flex-grow: 9 ;
1891 |   }
1892 |   .flexbox > *[grow-md="8"] {
1893 |     -webkit-box-flex: 8 ;
1894 |     -webkit-flex-grow: 8 ;
1895 |         -ms-flex-positive: 8 ;
1896 |             flex-grow: 8 ;
1897 |   }
1898 |   .flexbox > *[grow-md="7"] {
1899 |     -webkit-box-flex: 7 ;
1900 |     -webkit-flex-grow: 7 ;
1901 |         -ms-flex-positive: 7 ;
1902 |             flex-grow: 7 ;
1903 |   }
1904 |   .flexbox > *[grow-md="6"] {
1905 |     -webkit-box-flex: 6 ;
1906 |     -webkit-flex-grow: 6 ;
1907 |         -ms-flex-positive: 6 ;
1908 |             flex-grow: 6 ;
1909 |   }
1910 |   .flexbox > *[grow-md="5"] {
1911 |     -webkit-box-flex: 5 ;
1912 |     -webkit-flex-grow: 5 ;
1913 |         -ms-flex-positive: 5 ;
1914 |             flex-grow: 5 ;
1915 |   }
1916 |   .flexbox > *[grow-md="4"] {
1917 |     -webkit-box-flex: 4 ;
1918 |     -webkit-flex-grow: 4 ;
1919 |         -ms-flex-positive: 4 ;
1920 |             flex-grow: 4 ;
1921 |   }
1922 |   .flexbox > *[grow-md="3"] {
1923 |     -webkit-box-flex: 3 ;
1924 |     -webkit-flex-grow: 3 ;
1925 |         -ms-flex-positive: 3 ;
1926 |             flex-grow: 3 ;
1927 |   }
1928 |   .flexbox > *[grow-md="2"] {
1929 |     -webkit-box-flex: 2 ;
1930 |     -webkit-flex-grow: 2 ;
1931 |         -ms-flex-positive: 2 ;
1932 |             flex-grow: 2 ;
1933 |   }
1934 |   .flexbox > *[grow-md="1"] {
1935 |     -webkit-box-flex: 1 ;
1936 |     -webkit-flex-grow: 1 ;
1937 |         -ms-flex-positive: 1 ;
1938 |             flex-grow: 1 ;
1939 |   }
1940 |   .flexbox > *[grow-md="0"] {
1941 |     -webkit-box-flex: 0 ;
1942 |     -webkit-flex-grow: 0 ;
1943 |         -ms-flex-positive: 0 ;
1944 |             flex-grow: 0 ;
1945 |   }
1946 |   .flexbox > *[shrink-md="20"] {
1947 |     -webkit-flex-shrink: 20 ;
1948 |         -ms-flex-negative: 20 ;
1949 |             flex-shrink: 20 ;
1950 |   }
1951 |   .flexbox > *[shrink-md="19"] {
1952 |     -webkit-flex-shrink: 19 ;
1953 |         -ms-flex-negative: 19 ;
1954 |             flex-shrink: 19 ;
1955 |   }
1956 |   .flexbox > *[shrink-md="18"] {
1957 |     -webkit-flex-shrink: 18 ;
1958 |         -ms-flex-negative: 18 ;
1959 |             flex-shrink: 18 ;
1960 |   }
1961 |   .flexbox > *[shrink-md="17"] {
1962 |     -webkit-flex-shrink: 17 ;
1963 |         -ms-flex-negative: 17 ;
1964 |             flex-shrink: 17 ;
1965 |   }
1966 |   .flexbox > *[shrink-md="16"] {
1967 |     -webkit-flex-shrink: 16 ;
1968 |         -ms-flex-negative: 16 ;
1969 |             flex-shrink: 16 ;
1970 |   }
1971 |   .flexbox > *[shrink-md="15"] {
1972 |     -webkit-flex-shrink: 15 ;
1973 |         -ms-flex-negative: 15 ;
1974 |             flex-shrink: 15 ;
1975 |   }
1976 |   .flexbox > *[shrink-md="14"] {
1977 |     -webkit-flex-shrink: 14 ;
1978 |         -ms-flex-negative: 14 ;
1979 |             flex-shrink: 14 ;
1980 |   }
1981 |   .flexbox > *[shrink-md="13"] {
1982 |     -webkit-flex-shrink: 13 ;
1983 |         -ms-flex-negative: 13 ;
1984 |             flex-shrink: 13 ;
1985 |   }
1986 |   .flexbox > *[shrink-md="12"] {
1987 |     -webkit-flex-shrink: 12 ;
1988 |         -ms-flex-negative: 12 ;
1989 |             flex-shrink: 12 ;
1990 |   }
1991 |   .flexbox > *[shrink-md="11"] {
1992 |     -webkit-flex-shrink: 11 ;
1993 |         -ms-flex-negative: 11 ;
1994 |             flex-shrink: 11 ;
1995 |   }
1996 |   .flexbox > *[shrink-md="10"] {
1997 |     -webkit-flex-shrink: 10 ;
1998 |         -ms-flex-negative: 10 ;
1999 |             flex-shrink: 10 ;
2000 |   }
2001 |   .flexbox > *[shrink-md="9"] {
2002 |     -webkit-flex-shrink: 9 ;
2003 |         -ms-flex-negative: 9 ;
2004 |             flex-shrink: 9 ;
2005 |   }
2006 |   .flexbox > *[shrink-md="8"] {
2007 |     -webkit-flex-shrink: 8 ;
2008 |         -ms-flex-negative: 8 ;
2009 |             flex-shrink: 8 ;
2010 |   }
2011 |   .flexbox > *[shrink-md="7"] {
2012 |     -webkit-flex-shrink: 7 ;
2013 |         -ms-flex-negative: 7 ;
2014 |             flex-shrink: 7 ;
2015 |   }
2016 |   .flexbox > *[shrink-md="6"] {
2017 |     -webkit-flex-shrink: 6 ;
2018 |         -ms-flex-negative: 6 ;
2019 |             flex-shrink: 6 ;
2020 |   }
2021 |   .flexbox > *[shrink-md="5"] {
2022 |     -webkit-flex-shrink: 5 ;
2023 |         -ms-flex-negative: 5 ;
2024 |             flex-shrink: 5 ;
2025 |   }
2026 |   .flexbox > *[shrink-md="4"] {
2027 |     -webkit-flex-shrink: 4 ;
2028 |         -ms-flex-negative: 4 ;
2029 |             flex-shrink: 4 ;
2030 |   }
2031 |   .flexbox > *[shrink-md="3"] {
2032 |     -webkit-flex-shrink: 3 ;
2033 |         -ms-flex-negative: 3 ;
2034 |             flex-shrink: 3 ;
2035 |   }
2036 |   .flexbox > *[shrink-md="2"] {
2037 |     -webkit-flex-shrink: 2 ;
2038 |         -ms-flex-negative: 2 ;
2039 |             flex-shrink: 2 ;
2040 |   }
2041 |   .flexbox > *[shrink-md="1"] {
2042 |     -webkit-flex-shrink: 1 ;
2043 |         -ms-flex-negative: 1 ;
2044 |             flex-shrink: 1 ;
2045 |   }
2046 |   .flexbox > *[shrink-md="0"] {
2047 |     -webkit-flex-shrink: 0 ;
2048 |         -ms-flex-negative: 0 ;
2049 |             flex-shrink: 0 ;
2050 |   }
2051 |   .flexbox > *[order-md="20"] {
2052 |     -webkit-box-ordinal-group: 21;
2053 |     -webkit-order: 20 ;
2054 |         -ms-flex-order: 20 ;
2055 |             order: 20 ;
2056 |   }
2057 |   .flexbox > *[order-md="19"] {
2058 |     -webkit-box-ordinal-group: 20;
2059 |     -webkit-order: 19 ;
2060 |         -ms-flex-order: 19 ;
2061 |             order: 19 ;
2062 |   }
2063 |   .flexbox > *[order-md="18"] {
2064 |     -webkit-box-ordinal-group: 19;
2065 |     -webkit-order: 18 ;
2066 |         -ms-flex-order: 18 ;
2067 |             order: 18 ;
2068 |   }
2069 |   .flexbox > *[order-md="17"] {
2070 |     -webkit-box-ordinal-group: 18;
2071 |     -webkit-order: 17 ;
2072 |         -ms-flex-order: 17 ;
2073 |             order: 17 ;
2074 |   }
2075 |   .flexbox > *[order-md="16"] {
2076 |     -webkit-box-ordinal-group: 17;
2077 |     -webkit-order: 16 ;
2078 |         -ms-flex-order: 16 ;
2079 |             order: 16 ;
2080 |   }
2081 |   .flexbox > *[order-md="15"] {
2082 |     -webkit-box-ordinal-group: 16;
2083 |     -webkit-order: 15 ;
2084 |         -ms-flex-order: 15 ;
2085 |             order: 15 ;
2086 |   }
2087 |   .flexbox > *[order-md="14"] {
2088 |     -webkit-box-ordinal-group: 15;
2089 |     -webkit-order: 14 ;
2090 |         -ms-flex-order: 14 ;
2091 |             order: 14 ;
2092 |   }
2093 |   .flexbox > *[order-md="13"] {
2094 |     -webkit-box-ordinal-group: 14;
2095 |     -webkit-order: 13 ;
2096 |         -ms-flex-order: 13 ;
2097 |             order: 13 ;
2098 |   }
2099 |   .flexbox > *[order-md="12"] {
2100 |     -webkit-box-ordinal-group: 13;
2101 |     -webkit-order: 12 ;
2102 |         -ms-flex-order: 12 ;
2103 |             order: 12 ;
2104 |   }
2105 |   .flexbox > *[order-md="11"] {
2106 |     -webkit-box-ordinal-group: 12;
2107 |     -webkit-order: 11 ;
2108 |         -ms-flex-order: 11 ;
2109 |             order: 11 ;
2110 |   }
2111 |   .flexbox > *[order-md="10"] {
2112 |     -webkit-box-ordinal-group: 11;
2113 |     -webkit-order: 10 ;
2114 |         -ms-flex-order: 10 ;
2115 |             order: 10 ;
2116 |   }
2117 |   .flexbox > *[order-md="9"] {
2118 |     -webkit-box-ordinal-group: 10;
2119 |     -webkit-order: 9 ;
2120 |         -ms-flex-order: 9 ;
2121 |             order: 9 ;
2122 |   }
2123 |   .flexbox > *[order-md="8"] {
2124 |     -webkit-box-ordinal-group: 9;
2125 |     -webkit-order: 8 ;
2126 |         -ms-flex-order: 8 ;
2127 |             order: 8 ;
2128 |   }
2129 |   .flexbox > *[order-md="7"] {
2130 |     -webkit-box-ordinal-group: 8;
2131 |     -webkit-order: 7 ;
2132 |         -ms-flex-order: 7 ;
2133 |             order: 7 ;
2134 |   }
2135 |   .flexbox > *[order-md="6"] {
2136 |     -webkit-box-ordinal-group: 7;
2137 |     -webkit-order: 6 ;
2138 |         -ms-flex-order: 6 ;
2139 |             order: 6 ;
2140 |   }
2141 |   .flexbox > *[order-md="5"] {
2142 |     -webkit-box-ordinal-group: 6;
2143 |     -webkit-order: 5 ;
2144 |         -ms-flex-order: 5 ;
2145 |             order: 5 ;
2146 |   }
2147 |   .flexbox > *[order-md="4"] {
2148 |     -webkit-box-ordinal-group: 5;
2149 |     -webkit-order: 4 ;
2150 |         -ms-flex-order: 4 ;
2151 |             order: 4 ;
2152 |   }
2153 |   .flexbox > *[order-md="3"] {
2154 |     -webkit-box-ordinal-group: 4;
2155 |     -webkit-order: 3 ;
2156 |         -ms-flex-order: 3 ;
2157 |             order: 3 ;
2158 |   }
2159 |   .flexbox > *[order-md="2"] {
2160 |     -webkit-box-ordinal-group: 3;
2161 |     -webkit-order: 2 ;
2162 |         -ms-flex-order: 2 ;
2163 |             order: 2 ;
2164 |   }
2165 |   .flexbox > *[order-md="1"] {
2166 |     -webkit-box-ordinal-group: 2;
2167 |     -webkit-order: 1 ;
2168 |         -ms-flex-order: 1 ;
2169 |             order: 1 ;
2170 |   }
2171 |   .flexbox > *[order-md="0"] {
2172 |     -webkit-box-ordinal-group: 1;
2173 |     -webkit-order: 0 ;
2174 |         -ms-flex-order: 0 ;
2175 |             order: 0 ;
2176 |   }
2177 | }
2178 | @media only screen and (min-width: 993px) and(max-width : 1200px) {
2179 |   .flexbox[justify-lg="space-between"] {
2180 |     -webkit-box-pack: justify;
2181 |     -webkit-justify-content: space-between;
2182 |         -ms-flex-pack: justify;
2183 |             justify-content: space-between;
2184 |   }
2185 |   .flexbox[justify-lg="space-around"] {
2186 |     -webkit-justify-content: space-around;
2187 |         -ms-flex-pack: distribute;
2188 |             justify-content: space-around;
2189 |   }
2190 |   .flexbox[justify-lg="flex-start"] {
2191 |     -webkit-box-pack: start;
2192 |     -webkit-justify-content: flex-start;
2193 |         -ms-flex-pack: start;
2194 |             justify-content: flex-start;
2195 |   }
2196 |   .flexbox[justify-lg="flex-end"] {
2197 |     -webkit-box-pack: end;
2198 |     -webkit-justify-content: flex-end;
2199 |         -ms-flex-pack: end;
2200 |             justify-content: flex-end;
2201 |   }
2202 |   .flexbox[justify-lg="center"] {
2203 |     -webkit-box-pack: center;
2204 |     -webkit-justify-content: center;
2205 |         -ms-flex-pack: center;
2206 |             justify-content: center;
2207 |   }
2208 |   .flexbox[align-lg="stretch"] {
2209 |     -webkit-box-align: stretch;
2210 |     -webkit-align-items: stretch;
2211 |         -ms-flex-align: stretch;
2212 |             align-items: stretch;
2213 |   }
2214 |   .flexbox[align-lg="flex-start"] {
2215 |     -webkit-box-align: start;
2216 |     -webkit-align-items: flex-start;
2217 |         -ms-flex-align: start;
2218 |             align-items: flex-start;
2219 |   }
2220 |   .flexbox[align-lg="flex-end"] {
2221 |     -webkit-box-align: end;
2222 |     -webkit-align-items: flex-end;
2223 |         -ms-flex-align: end;
2224 |             align-items: flex-end;
2225 |   }
2226 |   .flexbox[align-lg="center"] {
2227 |     -webkit-box-align: center;
2228 |     -webkit-align-items: center;
2229 |         -ms-flex-align: center;
2230 |             align-items: center;
2231 |   }
2232 |   .flexbox[align-lg="baseline"] {
2233 |     -webkit-box-align: baseline;
2234 |     -webkit-align-items: baseline;
2235 |         -ms-flex-align: baseline;
2236 |             align-items: baseline;
2237 |   }
2238 |   .flexbox[x-justify-lg="flex-start"] {
2239 |     -webkit-align-content: flex-start;
2240 |         -ms-flex-line-pack: start;
2241 |             align-content: flex-start;
2242 |   }
2243 |   .flexbox[x-justify-lg="flex-end"] {
2244 |     -webkit-align-content: flex-end;
2245 |         -ms-flex-line-pack: end;
2246 |             align-content: flex-end;
2247 |   }
2248 |   .flexbox[x-justify-lg="center"] {
2249 |     -webkit-align-content: center;
2250 |         -ms-flex-line-pack: center;
2251 |             align-content: center;
2252 |   }
2253 |   .flexbox[wrap-lg="wrap-reverse"] {
2254 |     -webkit-flex-wrap: wrap-reverse;
2255 |         -ms-flex-wrap: wrap-reverse;
2256 |             flex-wrap: wrap-reverse;
2257 |   }
2258 |   .flexbox[wrap-lg="wrap"] {
2259 |     -webkit-flex-wrap: wrap;
2260 |         -ms-flex-wrap: wrap;
2261 |             flex-wrap: wrap;
2262 |   }
2263 |   .flexbox[wrap-lg="nowrap"] {
2264 |     -webkit-flex-wrap: nowrap;
2265 |         -ms-flex-wrap: nowrap;
2266 |             flex-wrap: nowrap;
2267 |   }
2268 |   .flexbox[direction-lg="column-reverse"] {
2269 |     -webkit-box-orient: vertical;
2270 |     -webkit-box-direction: reverse;
2271 |     -webkit-flex-direction: column-reverse;
2272 |         -ms-flex-direction: column-reverse;
2273 |             flex-direction: column-reverse;
2274 |   }
2275 |   .flexbox[direction-lg="column"] {
2276 |     -webkit-box-orient: vertical;
2277 |     -webkit-box-direction: normal;
2278 |     -webkit-flex-direction: column;
2279 |         -ms-flex-direction: column;
2280 |             flex-direction: column;
2281 |   }
2282 |   .flexbox[direction-lg="row-reverse"] {
2283 |     -webkit-box-orient: horizontal;
2284 |     -webkit-box-direction: reverse;
2285 |     -webkit-flex-direction: row-reverse;
2286 |         -ms-flex-direction: row-reverse;
2287 |             flex-direction: row-reverse;
2288 |   }
2289 |   .flexbox[direction-lg="row"] {
2290 |     -webkit-box-orient: horizontal;
2291 |     -webkit-box-direction: normal;
2292 |     -webkit-flex-direction: row;
2293 |         -ms-flex-direction: row;
2294 |             flex-direction: row;
2295 |   }
2296 |   .flexbox > *[grow-lg="20"] {
2297 |     -webkit-box-flex: 20 ;
2298 |     -webkit-flex-grow: 20 ;
2299 |         -ms-flex-positive: 20 ;
2300 |             flex-grow: 20 ;
2301 |   }
2302 |   .flexbox > *[grow-lg="19"] {
2303 |     -webkit-box-flex: 19 ;
2304 |     -webkit-flex-grow: 19 ;
2305 |         -ms-flex-positive: 19 ;
2306 |             flex-grow: 19 ;
2307 |   }
2308 |   .flexbox > *[grow-lg="18"] {
2309 |     -webkit-box-flex: 18 ;
2310 |     -webkit-flex-grow: 18 ;
2311 |         -ms-flex-positive: 18 ;
2312 |             flex-grow: 18 ;
2313 |   }
2314 |   .flexbox > *[grow-lg="17"] {
2315 |     -webkit-box-flex: 17 ;
2316 |     -webkit-flex-grow: 17 ;
2317 |         -ms-flex-positive: 17 ;
2318 |             flex-grow: 17 ;
2319 |   }
2320 |   .flexbox > *[grow-lg="16"] {
2321 |     -webkit-box-flex: 16 ;
2322 |     -webkit-flex-grow: 16 ;
2323 |         -ms-flex-positive: 16 ;
2324 |             flex-grow: 16 ;
2325 |   }
2326 |   .flexbox > *[grow-lg="15"] {
2327 |     -webkit-box-flex: 15 ;
2328 |     -webkit-flex-grow: 15 ;
2329 |         -ms-flex-positive: 15 ;
2330 |             flex-grow: 15 ;
2331 |   }
2332 |   .flexbox > *[grow-lg="14"] {
2333 |     -webkit-box-flex: 14 ;
2334 |     -webkit-flex-grow: 14 ;
2335 |         -ms-flex-positive: 14 ;
2336 |             flex-grow: 14 ;
2337 |   }
2338 |   .flexbox > *[grow-lg="13"] {
2339 |     -webkit-box-flex: 13 ;
2340 |     -webkit-flex-grow: 13 ;
2341 |         -ms-flex-positive: 13 ;
2342 |             flex-grow: 13 ;
2343 |   }
2344 |   .flexbox > *[grow-lg="12"] {
2345 |     -webkit-box-flex: 12 ;
2346 |     -webkit-flex-grow: 12 ;
2347 |         -ms-flex-positive: 12 ;
2348 |             flex-grow: 12 ;
2349 |   }
2350 |   .flexbox > *[grow-lg="11"] {
2351 |     -webkit-box-flex: 11 ;
2352 |     -webkit-flex-grow: 11 ;
2353 |         -ms-flex-positive: 11 ;
2354 |             flex-grow: 11 ;
2355 |   }
2356 |   .flexbox > *[grow-lg="10"] {
2357 |     -webkit-box-flex: 10 ;
2358 |     -webkit-flex-grow: 10 ;
2359 |         -ms-flex-positive: 10 ;
2360 |             flex-grow: 10 ;
2361 |   }
2362 |   .flexbox > *[grow-lg="9"] {
2363 |     -webkit-box-flex: 9 ;
2364 |     -webkit-flex-grow: 9 ;
2365 |         -ms-flex-positive: 9 ;
2366 |             flex-grow: 9 ;
2367 |   }
2368 |   .flexbox > *[grow-lg="8"] {
2369 |     -webkit-box-flex: 8 ;
2370 |     -webkit-flex-grow: 8 ;
2371 |         -ms-flex-positive: 8 ;
2372 |             flex-grow: 8 ;
2373 |   }
2374 |   .flexbox > *[grow-lg="7"] {
2375 |     -webkit-box-flex: 7 ;
2376 |     -webkit-flex-grow: 7 ;
2377 |         -ms-flex-positive: 7 ;
2378 |             flex-grow: 7 ;
2379 |   }
2380 |   .flexbox > *[grow-lg="6"] {
2381 |     -webkit-box-flex: 6 ;
2382 |     -webkit-flex-grow: 6 ;
2383 |         -ms-flex-positive: 6 ;
2384 |             flex-grow: 6 ;
2385 |   }
2386 |   .flexbox > *[grow-lg="5"] {
2387 |     -webkit-box-flex: 5 ;
2388 |     -webkit-flex-grow: 5 ;
2389 |         -ms-flex-positive: 5 ;
2390 |             flex-grow: 5 ;
2391 |   }
2392 |   .flexbox > *[grow-lg="4"] {
2393 |     -webkit-box-flex: 4 ;
2394 |     -webkit-flex-grow: 4 ;
2395 |         -ms-flex-positive: 4 ;
2396 |             flex-grow: 4 ;
2397 |   }
2398 |   .flexbox > *[grow-lg="3"] {
2399 |     -webkit-box-flex: 3 ;
2400 |     -webkit-flex-grow: 3 ;
2401 |         -ms-flex-positive: 3 ;
2402 |             flex-grow: 3 ;
2403 |   }
2404 |   .flexbox > *[grow-lg="2"] {
2405 |     -webkit-box-flex: 2 ;
2406 |     -webkit-flex-grow: 2 ;
2407 |         -ms-flex-positive: 2 ;
2408 |             flex-grow: 2 ;
2409 |   }
2410 |   .flexbox > *[grow-lg="1"] {
2411 |     -webkit-box-flex: 1 ;
2412 |     -webkit-flex-grow: 1 ;
2413 |         -ms-flex-positive: 1 ;
2414 |             flex-grow: 1 ;
2415 |   }
2416 |   .flexbox > *[grow-lg="0"] {
2417 |     -webkit-box-flex: 0 ;
2418 |     -webkit-flex-grow: 0 ;
2419 |         -ms-flex-positive: 0 ;
2420 |             flex-grow: 0 ;
2421 |   }
2422 |   .flexbox > *[shrink-lg="20"] {
2423 |     -webkit-flex-shrink: 20 ;
2424 |         -ms-flex-negative: 20 ;
2425 |             flex-shrink: 20 ;
2426 |   }
2427 |   .flexbox > *[shrink-lg="19"] {
2428 |     -webkit-flex-shrink: 19 ;
2429 |         -ms-flex-negative: 19 ;
2430 |             flex-shrink: 19 ;
2431 |   }
2432 |   .flexbox > *[shrink-lg="18"] {
2433 |     -webkit-flex-shrink: 18 ;
2434 |         -ms-flex-negative: 18 ;
2435 |             flex-shrink: 18 ;
2436 |   }
2437 |   .flexbox > *[shrink-lg="17"] {
2438 |     -webkit-flex-shrink: 17 ;
2439 |         -ms-flex-negative: 17 ;
2440 |             flex-shrink: 17 ;
2441 |   }
2442 |   .flexbox > *[shrink-lg="16"] {
2443 |     -webkit-flex-shrink: 16 ;
2444 |         -ms-flex-negative: 16 ;
2445 |             flex-shrink: 16 ;
2446 |   }
2447 |   .flexbox > *[shrink-lg="15"] {
2448 |     -webkit-flex-shrink: 15 ;
2449 |         -ms-flex-negative: 15 ;
2450 |             flex-shrink: 15 ;
2451 |   }
2452 |   .flexbox > *[shrink-lg="14"] {
2453 |     -webkit-flex-shrink: 14 ;
2454 |         -ms-flex-negative: 14 ;
2455 |             flex-shrink: 14 ;
2456 |   }
2457 |   .flexbox > *[shrink-lg="13"] {
2458 |     -webkit-flex-shrink: 13 ;
2459 |         -ms-flex-negative: 13 ;
2460 |             flex-shrink: 13 ;
2461 |   }
2462 |   .flexbox > *[shrink-lg="12"] {
2463 |     -webkit-flex-shrink: 12 ;
2464 |         -ms-flex-negative: 12 ;
2465 |             flex-shrink: 12 ;
2466 |   }
2467 |   .flexbox > *[shrink-lg="11"] {
2468 |     -webkit-flex-shrink: 11 ;
2469 |         -ms-flex-negative: 11 ;
2470 |             flex-shrink: 11 ;
2471 |   }
2472 |   .flexbox > *[shrink-lg="10"] {
2473 |     -webkit-flex-shrink: 10 ;
2474 |         -ms-flex-negative: 10 ;
2475 |             flex-shrink: 10 ;
2476 |   }
2477 |   .flexbox > *[shrink-lg="9"] {
2478 |     -webkit-flex-shrink: 9 ;
2479 |         -ms-flex-negative: 9 ;
2480 |             flex-shrink: 9 ;
2481 |   }
2482 |   .flexbox > *[shrink-lg="8"] {
2483 |     -webkit-flex-shrink: 8 ;
2484 |         -ms-flex-negative: 8 ;
2485 |             flex-shrink: 8 ;
2486 |   }
2487 |   .flexbox > *[shrink-lg="7"] {
2488 |     -webkit-flex-shrink: 7 ;
2489 |         -ms-flex-negative: 7 ;
2490 |             flex-shrink: 7 ;
2491 |   }
2492 |   .flexbox > *[shrink-lg="6"] {
2493 |     -webkit-flex-shrink: 6 ;
2494 |         -ms-flex-negative: 6 ;
2495 |             flex-shrink: 6 ;
2496 |   }
2497 |   .flexbox > *[shrink-lg="5"] {
2498 |     -webkit-flex-shrink: 5 ;
2499 |         -ms-flex-negative: 5 ;
2500 |             flex-shrink: 5 ;
2501 |   }
2502 |   .flexbox > *[shrink-lg="4"] {
2503 |     -webkit-flex-shrink: 4 ;
2504 |         -ms-flex-negative: 4 ;
2505 |             flex-shrink: 4 ;
2506 |   }
2507 |   .flexbox > *[shrink-lg="3"] {
2508 |     -webkit-flex-shrink: 3 ;
2509 |         -ms-flex-negative: 3 ;
2510 |             flex-shrink: 3 ;
2511 |   }
2512 |   .flexbox > *[shrink-lg="2"] {
2513 |     -webkit-flex-shrink: 2 ;
2514 |         -ms-flex-negative: 2 ;
2515 |             flex-shrink: 2 ;
2516 |   }
2517 |   .flexbox > *[shrink-lg="1"] {
2518 |     -webkit-flex-shrink: 1 ;
2519 |         -ms-flex-negative: 1 ;
2520 |             flex-shrink: 1 ;
2521 |   }
2522 |   .flexbox > *[shrink-lg="0"] {
2523 |     -webkit-flex-shrink: 0 ;
2524 |         -ms-flex-negative: 0 ;
2525 |             flex-shrink: 0 ;
2526 |   }
2527 |   .flexbox > *[order-lg="20"] {
2528 |     -webkit-box-ordinal-group: 21;
2529 |     -webkit-order: 20 ;
2530 |         -ms-flex-order: 20 ;
2531 |             order: 20 ;
2532 |   }
2533 |   .flexbox > *[order-lg="19"] {
2534 |     -webkit-box-ordinal-group: 20;
2535 |     -webkit-order: 19 ;
2536 |         -ms-flex-order: 19 ;
2537 |             order: 19 ;
2538 |   }
2539 |   .flexbox > *[order-lg="18"] {
2540 |     -webkit-box-ordinal-group: 19;
2541 |     -webkit-order: 18 ;
2542 |         -ms-flex-order: 18 ;
2543 |             order: 18 ;
2544 |   }
2545 |   .flexbox > *[order-lg="17"] {
2546 |     -webkit-box-ordinal-group: 18;
2547 |     -webkit-order: 17 ;
2548 |         -ms-flex-order: 17 ;
2549 |             order: 17 ;
2550 |   }
2551 |   .flexbox > *[order-lg="16"] {
2552 |     -webkit-box-ordinal-group: 17;
2553 |     -webkit-order: 16 ;
2554 |         -ms-flex-order: 16 ;
2555 |             order: 16 ;
2556 |   }
2557 |   .flexbox > *[order-lg="15"] {
2558 |     -webkit-box-ordinal-group: 16;
2559 |     -webkit-order: 15 ;
2560 |         -ms-flex-order: 15 ;
2561 |             order: 15 ;
2562 |   }
2563 |   .flexbox > *[order-lg="14"] {
2564 |     -webkit-box-ordinal-group: 15;
2565 |     -webkit-order: 14 ;
2566 |         -ms-flex-order: 14 ;
2567 |             order: 14 ;
2568 |   }
2569 |   .flexbox > *[order-lg="13"] {
2570 |     -webkit-box-ordinal-group: 14;
2571 |     -webkit-order: 13 ;
2572 |         -ms-flex-order: 13 ;
2573 |             order: 13 ;
2574 |   }
2575 |   .flexbox > *[order-lg="12"] {
2576 |     -webkit-box-ordinal-group: 13;
2577 |     -webkit-order: 12 ;
2578 |         -ms-flex-order: 12 ;
2579 |             order: 12 ;
2580 |   }
2581 |   .flexbox > *[order-lg="11"] {
2582 |     -webkit-box-ordinal-group: 12;
2583 |     -webkit-order: 11 ;
2584 |         -ms-flex-order: 11 ;
2585 |             order: 11 ;
2586 |   }
2587 |   .flexbox > *[order-lg="10"] {
2588 |     -webkit-box-ordinal-group: 11;
2589 |     -webkit-order: 10 ;
2590 |         -ms-flex-order: 10 ;
2591 |             order: 10 ;
2592 |   }
2593 |   .flexbox > *[order-lg="9"] {
2594 |     -webkit-box-ordinal-group: 10;
2595 |     -webkit-order: 9 ;
2596 |         -ms-flex-order: 9 ;
2597 |             order: 9 ;
2598 |   }
2599 |   .flexbox > *[order-lg="8"] {
2600 |     -webkit-box-ordinal-group: 9;
2601 |     -webkit-order: 8 ;
2602 |         -ms-flex-order: 8 ;
2603 |             order: 8 ;
2604 |   }
2605 |   .flexbox > *[order-lg="7"] {
2606 |     -webkit-box-ordinal-group: 8;
2607 |     -webkit-order: 7 ;
2608 |         -ms-flex-order: 7 ;
2609 |             order: 7 ;
2610 |   }
2611 |   .flexbox > *[order-lg="6"] {
2612 |     -webkit-box-ordinal-group: 7;
2613 |     -webkit-order: 6 ;
2614 |         -ms-flex-order: 6 ;
2615 |             order: 6 ;
2616 |   }
2617 |   .flexbox > *[order-lg="5"] {
2618 |     -webkit-box-ordinal-group: 6;
2619 |     -webkit-order: 5 ;
2620 |         -ms-flex-order: 5 ;
2621 |             order: 5 ;
2622 |   }
2623 |   .flexbox > *[order-lg="4"] {
2624 |     -webkit-box-ordinal-group: 5;
2625 |     -webkit-order: 4 ;
2626 |         -ms-flex-order: 4 ;
2627 |             order: 4 ;
2628 |   }
2629 |   .flexbox > *[order-lg="3"] {
2630 |     -webkit-box-ordinal-group: 4;
2631 |     -webkit-order: 3 ;
2632 |         -ms-flex-order: 3 ;
2633 |             order: 3 ;
2634 |   }
2635 |   .flexbox > *[order-lg="2"] {
2636 |     -webkit-box-ordinal-group: 3;
2637 |     -webkit-order: 2 ;
2638 |         -ms-flex-order: 2 ;
2639 |             order: 2 ;
2640 |   }
2641 |   .flexbox > *[order-lg="1"] {
2642 |     -webkit-box-ordinal-group: 2;
2643 |     -webkit-order: 1 ;
2644 |         -ms-flex-order: 1 ;
2645 |             order: 1 ;
2646 |   }
2647 |   .flexbox > *[order-lg="0"] {
2648 |     -webkit-box-ordinal-group: 1;
2649 |     -webkit-order: 0 ;
2650 |         -ms-flex-order: 0 ;
2651 |             order: 0 ;
2652 |   }
2653 | }
2654 | 


--------------------------------------------------------------------------------
/dist/angular-layout.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * angular-layout - v0.1.1 - 2015-02-08
 3 |  * https://github.com/demerzel3/angular-layout
 4 |  *
 5 |  * Copyright (c) 2015
 6 |  * Authors : Gabriele Genta & Martin Mouterde
 7 |  * Licensed MIT <>
 8 |  */
 9 | (function () {
10 |     'use strict';
11 |     var angularLayoutModule = angular.module("angular.layout", []);
12 | 
13 |     angularLayoutModule.directive("solid", function () {
14 |         return {
15 |             restrict: "E",
16 |             scope: {size: "@"},
17 |             replace: true,
18 |             template: '<div class="flexbox solid" grow="20" shrink="0" ng-style="{\'max-height\':size,\'max-width\':size,\'flex-basis\':size}"></div>'
19 |         };
20 |     });
21 | 
22 |     angularLayoutModule.directive("glue", function () {
23 |         return {
24 |             restrict: "E",
25 |             replace: true,
26 |             template: '<div grow="20" shrink="20" class="flexbox glue"></div>'
27 |         };
28 |     });
29 | 
30 |     var directiveFactory = function (directiveName,direction, suffix) {
31 |         angularLayoutModule.directive(directiveName, function () {
32 |             return {
33 |                 restrict: "AE",
34 |                 link: function (scope, element) {
35 |                     element.attr("direction" + suffix, direction);
36 |                     element.addClass("flexbox");
37 |                     element.addClass(directiveName);
38 |                 }
39 |             };
40 |         });
41 |     };
42 | 
43 |     directiveFactory("hbox","row","");
44 |     directiveFactory("hboxXs","row","-xs");
45 |     directiveFactory("hboxSm","row","-sm");
46 |     directiveFactory("hboxMd","row","-md");
47 |     directiveFactory("hboxLg","row","-lg");
48 | 
49 |     directiveFactory("vbox","column","");
50 |     directiveFactory("vboxXs","column","-xs");
51 |     directiveFactory("vboxSm","column","-sm");
52 |     directiveFactory("vboxMd","column","-md");
53 |     directiveFactory("vboxLg","column","-lg");
54 | 
55 | })();


--------------------------------------------------------------------------------
/dist/angular-layout.min.css:
--------------------------------------------------------------------------------
1 | /**
2 |  * angular-layout - v0.1.1 - 2015-02-08
3 |  * https://github.com/demerzel3/angular-layout
4 |  *
5 |  * Copyright (c) 2015
6 |  * Authors : Gabriele Genta & Martin Mouterde
7 |  * Licensed MIT <>
8 |  */
9 | .glue{-webkit-box-flex:99;-webkit-flex-grow:99;-ms-flex-positive:99;flex-grow:99;-webkit-flex-shrink:99;-ms-flex-negative:99;flex-shrink:99}.hbox[gap="20"]>*{margin-right:20px}.hbox[gap="20"] :last-child{margin-right:0}.hbox[gap="19"]>*{margin-right:19px}.hbox[gap="19"] :last-child{margin-right:0}.hbox[gap="18"]>*{margin-right:18px}.hbox[gap="18"] :last-child{margin-right:0}.hbox[gap="17"]>*{margin-right:17px}.hbox[gap="17"] :last-child{margin-right:0}.hbox[gap="16"]>*{margin-right:16px}.hbox[gap="16"] :last-child{margin-right:0}.hbox[gap="15"]>*{margin-right:15px}.hbox[gap="15"] :last-child{margin-right:0}.hbox[gap="14"]>*{margin-right:14px}.hbox[gap="14"] :last-child{margin-right:0}.hbox[gap="13"]>*{margin-right:13px}.hbox[gap="13"] :last-child{margin-right:0}.hbox[gap="12"]>*{margin-right:12px}.hbox[gap="12"] :last-child{margin-right:0}.hbox[gap="11"]>*{margin-right:11px}.hbox[gap="11"] :last-child{margin-right:0}.hbox[gap="10"]>*{margin-right:10px}.hbox[gap="10"] :last-child{margin-right:0}.hbox[gap="9"]>*{margin-right:9px}.hbox[gap="9"] :last-child{margin-right:0}.hbox[gap="8"]>*{margin-right:8px}.hbox[gap="8"] :last-child{margin-right:0}.hbox[gap="7"]>*{margin-right:7px}.hbox[gap="7"] :last-child{margin-right:0}.hbox[gap="6"]>*{margin-right:6px}.hbox[gap="6"] :last-child{margin-right:0}.hbox[gap="5"]>*{margin-right:5px}.hbox[gap="5"] :last-child{margin-right:0}.hbox[gap="4"]>*{margin-right:4px}.hbox[gap="4"] :last-child{margin-right:0}.hbox[gap="3"]>*{margin-right:3px}.hbox[gap="3"] :last-child{margin-right:0}.hbox[gap="2"]>*{margin-right:2px}.hbox[gap="2"] :last-child{margin-right:0}.hbox[gap="1"]>*{margin-right:1px}.hbox[gap="1"] :last-child,.hbox[gap="0"] :last-child,.hbox[gap="0"]>*{margin-right:0}.vbox[gap="20"]>*{margin-bottom:20px}.vbox[gap="20"] :last-child{margin-bottom:0}.vbox[gap="19"]>*{margin-bottom:19px}.vbox[gap="19"] :last-child{margin-bottom:0}.vbox[gap="18"]>*{margin-bottom:18px}.vbox[gap="18"] :last-child{margin-bottom:0}.vbox[gap="17"]>*{margin-bottom:17px}.vbox[gap="17"] :last-child{margin-bottom:0}.vbox[gap="16"]>*{margin-bottom:16px}.vbox[gap="16"] :last-child{margin-bottom:0}.vbox[gap="15"]>*{margin-bottom:15px}.vbox[gap="15"] :last-child{margin-bottom:0}.vbox[gap="14"]>*{margin-bottom:14px}.vbox[gap="14"] :last-child{margin-bottom:0}.vbox[gap="13"]>*{margin-bottom:13px}.vbox[gap="13"] :last-child{margin-bottom:0}.vbox[gap="12"]>*{margin-bottom:12px}.vbox[gap="12"] :last-child{margin-bottom:0}.vbox[gap="11"]>*{margin-bottom:11px}.vbox[gap="11"] :last-child{margin-bottom:0}.vbox[gap="10"]>*{margin-bottom:10px}.vbox[gap="10"] :last-child{margin-bottom:0}.vbox[gap="9"]>*{margin-bottom:9px}.vbox[gap="9"] :last-child{margin-bottom:0}.vbox[gap="8"]>*{margin-bottom:8px}.vbox[gap="8"] :last-child{margin-bottom:0}.vbox[gap="7"]>*{margin-bottom:7px}.vbox[gap="7"] :last-child{margin-bottom:0}.vbox[gap="6"]>*{margin-bottom:6px}.vbox[gap="6"] :last-child{margin-bottom:0}.vbox[gap="5"]>*{margin-bottom:5px}.vbox[gap="5"] :last-child{margin-bottom:0}.vbox[gap="4"]>*{margin-bottom:4px}.vbox[gap="4"] :last-child{margin-bottom:0}.vbox[gap="3"]>*{margin-bottom:3px}.vbox[gap="3"] :last-child{margin-bottom:0}.vbox[gap="2"]>*{margin-bottom:2px}.vbox[gap="2"] :last-child{margin-bottom:0}.vbox[gap="1"]>*{margin-bottom:1px}.vbox[gap="1"] :last-child,.vbox[gap="0"] :last-child,.vbox[gap="0"]>*{margin-bottom:0}.flexbox{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flexbox[justify=space-between]{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.flexbox[justify=space-around]{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.flexbox[justify=flex-start]{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.flexbox[justify=flex-end]{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.flexbox[justify=center]{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.flexbox[align=stretch]{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.flexbox[align=flex-start]{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.flexbox[align=flex-end]{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.flexbox[align=center]{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.flexbox[align=baseline]{-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}.flexbox[x-justify=flex-start]{-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.flexbox[x-justify=flex-end]{-webkit-align-content:flex-end;-ms-flex-line-pack:end;align-content:flex-end}.flexbox[x-justify=center]{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center}.flexbox[wrap=wrap-reverse]{-webkit-flex-wrap:wrap-reverse;-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.flexbox[wrap=wrap]{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flexbox[wrap=nowrap]{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flexbox[direction=column-reverse]{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flexbox[direction=column]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flexbox[direction=row-reverse]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flexbox[direction=row]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.flexbox>[grow="20"]{-webkit-box-flex:20;-webkit-flex-grow:20;-ms-flex-positive:20;flex-grow:20}.flexbox>[grow="19"]{-webkit-box-flex:19;-webkit-flex-grow:19;-ms-flex-positive:19;flex-grow:19}.flexbox>[grow="18"]{-webkit-box-flex:18;-webkit-flex-grow:18;-ms-flex-positive:18;flex-grow:18}.flexbox>[grow="17"]{-webkit-box-flex:17;-webkit-flex-grow:17;-ms-flex-positive:17;flex-grow:17}.flexbox>[grow="16"]{-webkit-box-flex:16;-webkit-flex-grow:16;-ms-flex-positive:16;flex-grow:16}.flexbox>[grow="15"]{-webkit-box-flex:15;-webkit-flex-grow:15;-ms-flex-positive:15;flex-grow:15}.flexbox>[grow="14"]{-webkit-box-flex:14;-webkit-flex-grow:14;-ms-flex-positive:14;flex-grow:14}.flexbox>[grow="13"]{-webkit-box-flex:13;-webkit-flex-grow:13;-ms-flex-positive:13;flex-grow:13}.flexbox>[grow="12"]{-webkit-box-flex:12;-webkit-flex-grow:12;-ms-flex-positive:12;flex-grow:12}.flexbox>[grow="11"]{-webkit-box-flex:11;-webkit-flex-grow:11;-ms-flex-positive:11;flex-grow:11}.flexbox>[grow="10"]{-webkit-box-flex:10;-webkit-flex-grow:10;-ms-flex-positive:10;flex-grow:10}.flexbox>[grow="9"]{-webkit-box-flex:9;-webkit-flex-grow:9;-ms-flex-positive:9;flex-grow:9}.flexbox>[grow="8"]{-webkit-box-flex:8;-webkit-flex-grow:8;-ms-flex-positive:8;flex-grow:8}.flexbox>[grow="7"]{-webkit-box-flex:7;-webkit-flex-grow:7;-ms-flex-positive:7;flex-grow:7}.flexbox>[grow="6"]{-webkit-box-flex:6;-webkit-flex-grow:6;-ms-flex-positive:6;flex-grow:6}.flexbox>[grow="5"]{-webkit-box-flex:5;-webkit-flex-grow:5;-ms-flex-positive:5;flex-grow:5}.flexbox>[grow="4"]{-webkit-box-flex:4;-webkit-flex-grow:4;-ms-flex-positive:4;flex-grow:4}.flexbox>[grow="3"]{-webkit-box-flex:3;-webkit-flex-grow:3;-ms-flex-positive:3;flex-grow:3}.flexbox>[grow="2"]{-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2}.flexbox>[grow="1"]{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.flexbox>[grow="0"]{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0}.flexbox>[shrink="20"]{-webkit-flex-shrink:20;-ms-flex-negative:20;flex-shrink:20}.flexbox>[shrink="19"]{-webkit-flex-shrink:19;-ms-flex-negative:19;flex-shrink:19}.flexbox>[shrink="18"]{-webkit-flex-shrink:18;-ms-flex-negative:18;flex-shrink:18}.flexbox>[shrink="17"]{-webkit-flex-shrink:17;-ms-flex-negative:17;flex-shrink:17}.flexbox>[shrink="16"]{-webkit-flex-shrink:16;-ms-flex-negative:16;flex-shrink:16}.flexbox>[shrink="15"]{-webkit-flex-shrink:15;-ms-flex-negative:15;flex-shrink:15}.flexbox>[shrink="14"]{-webkit-flex-shrink:14;-ms-flex-negative:14;flex-shrink:14}.flexbox>[shrink="13"]{-webkit-flex-shrink:13;-ms-flex-negative:13;flex-shrink:13}.flexbox>[shrink="12"]{-webkit-flex-shrink:12;-ms-flex-negative:12;flex-shrink:12}.flexbox>[shrink="11"]{-webkit-flex-shrink:11;-ms-flex-negative:11;flex-shrink:11}.flexbox>[shrink="10"]{-webkit-flex-shrink:10;-ms-flex-negative:10;flex-shrink:10}.flexbox>[shrink="9"]{-webkit-flex-shrink:9;-ms-flex-negative:9;flex-shrink:9}.flexbox>[shrink="8"]{-webkit-flex-shrink:8;-ms-flex-negative:8;flex-shrink:8}.flexbox>[shrink="7"]{-webkit-flex-shrink:7;-ms-flex-negative:7;flex-shrink:7}.flexbox>[shrink="6"]{-webkit-flex-shrink:6;-ms-flex-negative:6;flex-shrink:6}.flexbox>[shrink="5"]{-webkit-flex-shrink:5;-ms-flex-negative:5;flex-shrink:5}.flexbox>[shrink="4"]{-webkit-flex-shrink:4;-ms-flex-negative:4;flex-shrink:4}.flexbox>[shrink="3"]{-webkit-flex-shrink:3;-ms-flex-negative:3;flex-shrink:3}.flexbox>[shrink="2"]{-webkit-flex-shrink:2;-ms-flex-negative:2;flex-shrink:2}.flexbox>[shrink="1"]{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flexbox>[shrink="0"]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.flexbox>[order="20"]{-webkit-box-ordinal-group:21;-webkit-order:20;-ms-flex-order:20;order:20}.flexbox>[order="19"]{-webkit-box-ordinal-group:20;-webkit-order:19;-ms-flex-order:19;order:19}.flexbox>[order="18"]{-webkit-box-ordinal-group:19;-webkit-order:18;-ms-flex-order:18;order:18}.flexbox>[order="17"]{-webkit-box-ordinal-group:18;-webkit-order:17;-ms-flex-order:17;order:17}.flexbox>[order="16"]{-webkit-box-ordinal-group:17;-webkit-order:16;-ms-flex-order:16;order:16}.flexbox>[order="15"]{-webkit-box-ordinal-group:16;-webkit-order:15;-ms-flex-order:15;order:15}.flexbox>[order="14"]{-webkit-box-ordinal-group:15;-webkit-order:14;-ms-flex-order:14;order:14}.flexbox>[order="13"]{-webkit-box-ordinal-group:14;-webkit-order:13;-ms-flex-order:13;order:13}.flexbox>[order="12"]{-webkit-box-ordinal-group:13;-webkit-order:12;-ms-flex-order:12;order:12}.flexbox>[order="11"]{-webkit-box-ordinal-group:12;-webkit-order:11;-ms-flex-order:11;order:11}.flexbox>[order="10"]{-webkit-box-ordinal-group:11;-webkit-order:10;-ms-flex-order:10;order:10}.flexbox>[order="9"]{-webkit-box-ordinal-group:10;-webkit-order:9;-ms-flex-order:9;order:9}.flexbox>[order="8"]{-webkit-box-ordinal-group:9;-webkit-order:8;-ms-flex-order:8;order:8}.flexbox>[order="7"]{-webkit-box-ordinal-group:8;-webkit-order:7;-ms-flex-order:7;order:7}.flexbox>[order="6"]{-webkit-box-ordinal-group:7;-webkit-order:6;-ms-flex-order:6;order:6}.flexbox>[order="5"]{-webkit-box-ordinal-group:6;-webkit-order:5;-ms-flex-order:5;order:5}.flexbox>[order="4"]{-webkit-box-ordinal-group:5;-webkit-order:4;-ms-flex-order:4;order:4}.flexbox>[order="3"]{-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3}.flexbox>[order="2"]{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2}.flexbox>[order="1"]{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.flexbox>[order="0"]{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}@media only screen and (max-width :480px){.flexbox[justify-xs=space-between]{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.flexbox[justify-xs=space-around]{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.flexbox[justify-xs=flex-start]{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.flexbox[justify-xs=flex-end]{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.flexbox[justify-xs=center]{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.flexbox[align-xs=stretch]{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.flexbox[align-xs=flex-start]{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.flexbox[align-xs=flex-end]{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.flexbox[align-xs=center]{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.flexbox[align-xs=baseline]{-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}.flexbox[x-justify-xs=flex-start]{-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.flexbox[x-justify-xs=flex-end]{-webkit-align-content:flex-end;-ms-flex-line-pack:end;align-content:flex-end}.flexbox[x-justify-xs=center]{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center}.flexbox[wrap-xs=wrap-reverse]{-webkit-flex-wrap:wrap-reverse;-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.flexbox[wrap-xs=wrap]{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flexbox[wrap-xs=nowrap]{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flexbox[direction-xs=column-reverse]{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flexbox[direction-xs=column]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flexbox[direction-xs=row-reverse]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flexbox[direction-xs=row]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.flexbox>[grow-xs="20"]{-webkit-box-flex:20;-webkit-flex-grow:20;-ms-flex-positive:20;flex-grow:20}.flexbox>[grow-xs="19"]{-webkit-box-flex:19;-webkit-flex-grow:19;-ms-flex-positive:19;flex-grow:19}.flexbox>[grow-xs="18"]{-webkit-box-flex:18;-webkit-flex-grow:18;-ms-flex-positive:18;flex-grow:18}.flexbox>[grow-xs="17"]{-webkit-box-flex:17;-webkit-flex-grow:17;-ms-flex-positive:17;flex-grow:17}.flexbox>[grow-xs="16"]{-webkit-box-flex:16;-webkit-flex-grow:16;-ms-flex-positive:16;flex-grow:16}.flexbox>[grow-xs="15"]{-webkit-box-flex:15;-webkit-flex-grow:15;-ms-flex-positive:15;flex-grow:15}.flexbox>[grow-xs="14"]{-webkit-box-flex:14;-webkit-flex-grow:14;-ms-flex-positive:14;flex-grow:14}.flexbox>[grow-xs="13"]{-webkit-box-flex:13;-webkit-flex-grow:13;-ms-flex-positive:13;flex-grow:13}.flexbox>[grow-xs="12"]{-webkit-box-flex:12;-webkit-flex-grow:12;-ms-flex-positive:12;flex-grow:12}.flexbox>[grow-xs="11"]{-webkit-box-flex:11;-webkit-flex-grow:11;-ms-flex-positive:11;flex-grow:11}.flexbox>[grow-xs="10"]{-webkit-box-flex:10;-webkit-flex-grow:10;-ms-flex-positive:10;flex-grow:10}.flexbox>[grow-xs="9"]{-webkit-box-flex:9;-webkit-flex-grow:9;-ms-flex-positive:9;flex-grow:9}.flexbox>[grow-xs="8"]{-webkit-box-flex:8;-webkit-flex-grow:8;-ms-flex-positive:8;flex-grow:8}.flexbox>[grow-xs="7"]{-webkit-box-flex:7;-webkit-flex-grow:7;-ms-flex-positive:7;flex-grow:7}.flexbox>[grow-xs="6"]{-webkit-box-flex:6;-webkit-flex-grow:6;-ms-flex-positive:6;flex-grow:6}.flexbox>[grow-xs="5"]{-webkit-box-flex:5;-webkit-flex-grow:5;-ms-flex-positive:5;flex-grow:5}.flexbox>[grow-xs="4"]{-webkit-box-flex:4;-webkit-flex-grow:4;-ms-flex-positive:4;flex-grow:4}.flexbox>[grow-xs="3"]{-webkit-box-flex:3;-webkit-flex-grow:3;-ms-flex-positive:3;flex-grow:3}.flexbox>[grow-xs="2"]{-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2}.flexbox>[grow-xs="1"]{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.flexbox>[grow-xs="0"]{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0}.flexbox>[shrink-xs="20"]{-webkit-flex-shrink:20;-ms-flex-negative:20;flex-shrink:20}.flexbox>[shrink-xs="19"]{-webkit-flex-shrink:19;-ms-flex-negative:19;flex-shrink:19}.flexbox>[shrink-xs="18"]{-webkit-flex-shrink:18;-ms-flex-negative:18;flex-shrink:18}.flexbox>[shrink-xs="17"]{-webkit-flex-shrink:17;-ms-flex-negative:17;flex-shrink:17}.flexbox>[shrink-xs="16"]{-webkit-flex-shrink:16;-ms-flex-negative:16;flex-shrink:16}.flexbox>[shrink-xs="15"]{-webkit-flex-shrink:15;-ms-flex-negative:15;flex-shrink:15}.flexbox>[shrink-xs="14"]{-webkit-flex-shrink:14;-ms-flex-negative:14;flex-shrink:14}.flexbox>[shrink-xs="13"]{-webkit-flex-shrink:13;-ms-flex-negative:13;flex-shrink:13}.flexbox>[shrink-xs="12"]{-webkit-flex-shrink:12;-ms-flex-negative:12;flex-shrink:12}.flexbox>[shrink-xs="11"]{-webkit-flex-shrink:11;-ms-flex-negative:11;flex-shrink:11}.flexbox>[shrink-xs="10"]{-webkit-flex-shrink:10;-ms-flex-negative:10;flex-shrink:10}.flexbox>[shrink-xs="9"]{-webkit-flex-shrink:9;-ms-flex-negative:9;flex-shrink:9}.flexbox>[shrink-xs="8"]{-webkit-flex-shrink:8;-ms-flex-negative:8;flex-shrink:8}.flexbox>[shrink-xs="7"]{-webkit-flex-shrink:7;-ms-flex-negative:7;flex-shrink:7}.flexbox>[shrink-xs="6"]{-webkit-flex-shrink:6;-ms-flex-negative:6;flex-shrink:6}.flexbox>[shrink-xs="5"]{-webkit-flex-shrink:5;-ms-flex-negative:5;flex-shrink:5}.flexbox>[shrink-xs="4"]{-webkit-flex-shrink:4;-ms-flex-negative:4;flex-shrink:4}.flexbox>[shrink-xs="3"]{-webkit-flex-shrink:3;-ms-flex-negative:3;flex-shrink:3}.flexbox>[shrink-xs="2"]{-webkit-flex-shrink:2;-ms-flex-negative:2;flex-shrink:2}.flexbox>[shrink-xs="1"]{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flexbox>[shrink-xs="0"]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.flexbox>[order-xs="20"]{-webkit-box-ordinal-group:21;-webkit-order:20;-ms-flex-order:20;order:20}.flexbox>[order-xs="19"]{-webkit-box-ordinal-group:20;-webkit-order:19;-ms-flex-order:19;order:19}.flexbox>[order-xs="18"]{-webkit-box-ordinal-group:19;-webkit-order:18;-ms-flex-order:18;order:18}.flexbox>[order-xs="17"]{-webkit-box-ordinal-group:18;-webkit-order:17;-ms-flex-order:17;order:17}.flexbox>[order-xs="16"]{-webkit-box-ordinal-group:17;-webkit-order:16;-ms-flex-order:16;order:16}.flexbox>[order-xs="15"]{-webkit-box-ordinal-group:16;-webkit-order:15;-ms-flex-order:15;order:15}.flexbox>[order-xs="14"]{-webkit-box-ordinal-group:15;-webkit-order:14;-ms-flex-order:14;order:14}.flexbox>[order-xs="13"]{-webkit-box-ordinal-group:14;-webkit-order:13;-ms-flex-order:13;order:13}.flexbox>[order-xs="12"]{-webkit-box-ordinal-group:13;-webkit-order:12;-ms-flex-order:12;order:12}.flexbox>[order-xs="11"]{-webkit-box-ordinal-group:12;-webkit-order:11;-ms-flex-order:11;order:11}.flexbox>[order-xs="10"]{-webkit-box-ordinal-group:11;-webkit-order:10;-ms-flex-order:10;order:10}.flexbox>[order-xs="9"]{-webkit-box-ordinal-group:10;-webkit-order:9;-ms-flex-order:9;order:9}.flexbox>[order-xs="8"]{-webkit-box-ordinal-group:9;-webkit-order:8;-ms-flex-order:8;order:8}.flexbox>[order-xs="7"]{-webkit-box-ordinal-group:8;-webkit-order:7;-ms-flex-order:7;order:7}.flexbox>[order-xs="6"]{-webkit-box-ordinal-group:7;-webkit-order:6;-ms-flex-order:6;order:6}.flexbox>[order-xs="5"]{-webkit-box-ordinal-group:6;-webkit-order:5;-ms-flex-order:5;order:5}.flexbox>[order-xs="4"]{-webkit-box-ordinal-group:5;-webkit-order:4;-ms-flex-order:4;order:4}.flexbox>[order-xs="3"]{-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3}.flexbox>[order-xs="2"]{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2}.flexbox>[order-xs="1"]{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.flexbox>[order-xs="0"]{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}}@media only screen and (min-width :481px) and (max-width :768px){.flexbox[justify-sm=space-between]{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.flexbox[justify-sm=space-around]{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.flexbox[justify-sm=flex-start]{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.flexbox[justify-sm=flex-end]{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.flexbox[justify-sm=center]{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.flexbox[align-sm=stretch]{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.flexbox[align-sm=flex-start]{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.flexbox[align-sm=flex-end]{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.flexbox[align-sm=center]{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.flexbox[align-sm=baseline]{-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}.flexbox[x-justify-sm=flex-start]{-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.flexbox[x-justify-sm=flex-end]{-webkit-align-content:flex-end;-ms-flex-line-pack:end;align-content:flex-end}.flexbox[x-justify-sm=center]{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center}.flexbox[wrap-sm=wrap-reverse]{-webkit-flex-wrap:wrap-reverse;-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.flexbox[wrap-sm=wrap]{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flexbox[wrap-sm=nowrap]{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flexbox[direction-sm=column-reverse]{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flexbox[direction-sm=column]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flexbox[direction-sm=row-reverse]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flexbox[direction-sm=row]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.flexbox>[grow-sm="20"]{-webkit-box-flex:20;-webkit-flex-grow:20;-ms-flex-positive:20;flex-grow:20}.flexbox>[grow-sm="19"]{-webkit-box-flex:19;-webkit-flex-grow:19;-ms-flex-positive:19;flex-grow:19}.flexbox>[grow-sm="18"]{-webkit-box-flex:18;-webkit-flex-grow:18;-ms-flex-positive:18;flex-grow:18}.flexbox>[grow-sm="17"]{-webkit-box-flex:17;-webkit-flex-grow:17;-ms-flex-positive:17;flex-grow:17}.flexbox>[grow-sm="16"]{-webkit-box-flex:16;-webkit-flex-grow:16;-ms-flex-positive:16;flex-grow:16}.flexbox>[grow-sm="15"]{-webkit-box-flex:15;-webkit-flex-grow:15;-ms-flex-positive:15;flex-grow:15}.flexbox>[grow-sm="14"]{-webkit-box-flex:14;-webkit-flex-grow:14;-ms-flex-positive:14;flex-grow:14}.flexbox>[grow-sm="13"]{-webkit-box-flex:13;-webkit-flex-grow:13;-ms-flex-positive:13;flex-grow:13}.flexbox>[grow-sm="12"]{-webkit-box-flex:12;-webkit-flex-grow:12;-ms-flex-positive:12;flex-grow:12}.flexbox>[grow-sm="11"]{-webkit-box-flex:11;-webkit-flex-grow:11;-ms-flex-positive:11;flex-grow:11}.flexbox>[grow-sm="10"]{-webkit-box-flex:10;-webkit-flex-grow:10;-ms-flex-positive:10;flex-grow:10}.flexbox>[grow-sm="9"]{-webkit-box-flex:9;-webkit-flex-grow:9;-ms-flex-positive:9;flex-grow:9}.flexbox>[grow-sm="8"]{-webkit-box-flex:8;-webkit-flex-grow:8;-ms-flex-positive:8;flex-grow:8}.flexbox>[grow-sm="7"]{-webkit-box-flex:7;-webkit-flex-grow:7;-ms-flex-positive:7;flex-grow:7}.flexbox>[grow-sm="6"]{-webkit-box-flex:6;-webkit-flex-grow:6;-ms-flex-positive:6;flex-grow:6}.flexbox>[grow-sm="5"]{-webkit-box-flex:5;-webkit-flex-grow:5;-ms-flex-positive:5;flex-grow:5}.flexbox>[grow-sm="4"]{-webkit-box-flex:4;-webkit-flex-grow:4;-ms-flex-positive:4;flex-grow:4}.flexbox>[grow-sm="3"]{-webkit-box-flex:3;-webkit-flex-grow:3;-ms-flex-positive:3;flex-grow:3}.flexbox>[grow-sm="2"]{-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2}.flexbox>[grow-sm="1"]{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.flexbox>[grow-sm="0"]{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0}.flexbox>[shrink-sm="20"]{-webkit-flex-shrink:20;-ms-flex-negative:20;flex-shrink:20}.flexbox>[shrink-sm="19"]{-webkit-flex-shrink:19;-ms-flex-negative:19;flex-shrink:19}.flexbox>[shrink-sm="18"]{-webkit-flex-shrink:18;-ms-flex-negative:18;flex-shrink:18}.flexbox>[shrink-sm="17"]{-webkit-flex-shrink:17;-ms-flex-negative:17;flex-shrink:17}.flexbox>[shrink-sm="16"]{-webkit-flex-shrink:16;-ms-flex-negative:16;flex-shrink:16}.flexbox>[shrink-sm="15"]{-webkit-flex-shrink:15;-ms-flex-negative:15;flex-shrink:15}.flexbox>[shrink-sm="14"]{-webkit-flex-shrink:14;-ms-flex-negative:14;flex-shrink:14}.flexbox>[shrink-sm="13"]{-webkit-flex-shrink:13;-ms-flex-negative:13;flex-shrink:13}.flexbox>[shrink-sm="12"]{-webkit-flex-shrink:12;-ms-flex-negative:12;flex-shrink:12}.flexbox>[shrink-sm="11"]{-webkit-flex-shrink:11;-ms-flex-negative:11;flex-shrink:11}.flexbox>[shrink-sm="10"]{-webkit-flex-shrink:10;-ms-flex-negative:10;flex-shrink:10}.flexbox>[shrink-sm="9"]{-webkit-flex-shrink:9;-ms-flex-negative:9;flex-shrink:9}.flexbox>[shrink-sm="8"]{-webkit-flex-shrink:8;-ms-flex-negative:8;flex-shrink:8}.flexbox>[shrink-sm="7"]{-webkit-flex-shrink:7;-ms-flex-negative:7;flex-shrink:7}.flexbox>[shrink-sm="6"]{-webkit-flex-shrink:6;-ms-flex-negative:6;flex-shrink:6}.flexbox>[shrink-sm="5"]{-webkit-flex-shrink:5;-ms-flex-negative:5;flex-shrink:5}.flexbox>[shrink-sm="4"]{-webkit-flex-shrink:4;-ms-flex-negative:4;flex-shrink:4}.flexbox>[shrink-sm="3"]{-webkit-flex-shrink:3;-ms-flex-negative:3;flex-shrink:3}.flexbox>[shrink-sm="2"]{-webkit-flex-shrink:2;-ms-flex-negative:2;flex-shrink:2}.flexbox>[shrink-sm="1"]{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flexbox>[shrink-sm="0"]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.flexbox>[order-sm="20"]{-webkit-box-ordinal-group:21;-webkit-order:20;-ms-flex-order:20;order:20}.flexbox>[order-sm="19"]{-webkit-box-ordinal-group:20;-webkit-order:19;-ms-flex-order:19;order:19}.flexbox>[order-sm="18"]{-webkit-box-ordinal-group:19;-webkit-order:18;-ms-flex-order:18;order:18}.flexbox>[order-sm="17"]{-webkit-box-ordinal-group:18;-webkit-order:17;-ms-flex-order:17;order:17}.flexbox>[order-sm="16"]{-webkit-box-ordinal-group:17;-webkit-order:16;-ms-flex-order:16;order:16}.flexbox>[order-sm="15"]{-webkit-box-ordinal-group:16;-webkit-order:15;-ms-flex-order:15;order:15}.flexbox>[order-sm="14"]{-webkit-box-ordinal-group:15;-webkit-order:14;-ms-flex-order:14;order:14}.flexbox>[order-sm="13"]{-webkit-box-ordinal-group:14;-webkit-order:13;-ms-flex-order:13;order:13}.flexbox>[order-sm="12"]{-webkit-box-ordinal-group:13;-webkit-order:12;-ms-flex-order:12;order:12}.flexbox>[order-sm="11"]{-webkit-box-ordinal-group:12;-webkit-order:11;-ms-flex-order:11;order:11}.flexbox>[order-sm="10"]{-webkit-box-ordinal-group:11;-webkit-order:10;-ms-flex-order:10;order:10}.flexbox>[order-sm="9"]{-webkit-box-ordinal-group:10;-webkit-order:9;-ms-flex-order:9;order:9}.flexbox>[order-sm="8"]{-webkit-box-ordinal-group:9;-webkit-order:8;-ms-flex-order:8;order:8}.flexbox>[order-sm="7"]{-webkit-box-ordinal-group:8;-webkit-order:7;-ms-flex-order:7;order:7}.flexbox>[order-sm="6"]{-webkit-box-ordinal-group:7;-webkit-order:6;-ms-flex-order:6;order:6}.flexbox>[order-sm="5"]{-webkit-box-ordinal-group:6;-webkit-order:5;-ms-flex-order:5;order:5}.flexbox>[order-sm="4"]{-webkit-box-ordinal-group:5;-webkit-order:4;-ms-flex-order:4;order:4}.flexbox>[order-sm="3"]{-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3}.flexbox>[order-sm="2"]{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2}.flexbox>[order-sm="1"]{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.flexbox>[order-sm="0"]{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}}@media only screen and (min-width:769px) and (max-width :992px){.flexbox[justify-md=space-between]{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.flexbox[justify-md=space-around]{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.flexbox[justify-md=flex-start]{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.flexbox[justify-md=flex-end]{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.flexbox[justify-md=center]{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.flexbox[align-md=stretch]{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.flexbox[align-md=flex-start]{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.flexbox[align-md=flex-end]{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.flexbox[align-md=center]{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.flexbox[align-md=baseline]{-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}.flexbox[x-justify-md=flex-start]{-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.flexbox[x-justify-md=flex-end]{-webkit-align-content:flex-end;-ms-flex-line-pack:end;align-content:flex-end}.flexbox[x-justify-md=center]{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center}.flexbox[wrap-md=wrap-reverse]{-webkit-flex-wrap:wrap-reverse;-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.flexbox[wrap-md=wrap]{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flexbox[wrap-md=nowrap]{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flexbox[direction-md=column-reverse]{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flexbox[direction-md=column]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flexbox[direction-md=row-reverse]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flexbox[direction-md=row]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.flexbox>[grow-md="20"]{-webkit-box-flex:20;-webkit-flex-grow:20;-ms-flex-positive:20;flex-grow:20}.flexbox>[grow-md="19"]{-webkit-box-flex:19;-webkit-flex-grow:19;-ms-flex-positive:19;flex-grow:19}.flexbox>[grow-md="18"]{-webkit-box-flex:18;-webkit-flex-grow:18;-ms-flex-positive:18;flex-grow:18}.flexbox>[grow-md="17"]{-webkit-box-flex:17;-webkit-flex-grow:17;-ms-flex-positive:17;flex-grow:17}.flexbox>[grow-md="16"]{-webkit-box-flex:16;-webkit-flex-grow:16;-ms-flex-positive:16;flex-grow:16}.flexbox>[grow-md="15"]{-webkit-box-flex:15;-webkit-flex-grow:15;-ms-flex-positive:15;flex-grow:15}.flexbox>[grow-md="14"]{-webkit-box-flex:14;-webkit-flex-grow:14;-ms-flex-positive:14;flex-grow:14}.flexbox>[grow-md="13"]{-webkit-box-flex:13;-webkit-flex-grow:13;-ms-flex-positive:13;flex-grow:13}.flexbox>[grow-md="12"]{-webkit-box-flex:12;-webkit-flex-grow:12;-ms-flex-positive:12;flex-grow:12}.flexbox>[grow-md="11"]{-webkit-box-flex:11;-webkit-flex-grow:11;-ms-flex-positive:11;flex-grow:11}.flexbox>[grow-md="10"]{-webkit-box-flex:10;-webkit-flex-grow:10;-ms-flex-positive:10;flex-grow:10}.flexbox>[grow-md="9"]{-webkit-box-flex:9;-webkit-flex-grow:9;-ms-flex-positive:9;flex-grow:9}.flexbox>[grow-md="8"]{-webkit-box-flex:8;-webkit-flex-grow:8;-ms-flex-positive:8;flex-grow:8}.flexbox>[grow-md="7"]{-webkit-box-flex:7;-webkit-flex-grow:7;-ms-flex-positive:7;flex-grow:7}.flexbox>[grow-md="6"]{-webkit-box-flex:6;-webkit-flex-grow:6;-ms-flex-positive:6;flex-grow:6}.flexbox>[grow-md="5"]{-webkit-box-flex:5;-webkit-flex-grow:5;-ms-flex-positive:5;flex-grow:5}.flexbox>[grow-md="4"]{-webkit-box-flex:4;-webkit-flex-grow:4;-ms-flex-positive:4;flex-grow:4}.flexbox>[grow-md="3"]{-webkit-box-flex:3;-webkit-flex-grow:3;-ms-flex-positive:3;flex-grow:3}.flexbox>[grow-md="2"]{-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2}.flexbox>[grow-md="1"]{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.flexbox>[grow-md="0"]{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0}.flexbox>[shrink-md="20"]{-webkit-flex-shrink:20;-ms-flex-negative:20;flex-shrink:20}.flexbox>[shrink-md="19"]{-webkit-flex-shrink:19;-ms-flex-negative:19;flex-shrink:19}.flexbox>[shrink-md="18"]{-webkit-flex-shrink:18;-ms-flex-negative:18;flex-shrink:18}.flexbox>[shrink-md="17"]{-webkit-flex-shrink:17;-ms-flex-negative:17;flex-shrink:17}.flexbox>[shrink-md="16"]{-webkit-flex-shrink:16;-ms-flex-negative:16;flex-shrink:16}.flexbox>[shrink-md="15"]{-webkit-flex-shrink:15;-ms-flex-negative:15;flex-shrink:15}.flexbox>[shrink-md="14"]{-webkit-flex-shrink:14;-ms-flex-negative:14;flex-shrink:14}.flexbox>[shrink-md="13"]{-webkit-flex-shrink:13;-ms-flex-negative:13;flex-shrink:13}.flexbox>[shrink-md="12"]{-webkit-flex-shrink:12;-ms-flex-negative:12;flex-shrink:12}.flexbox>[shrink-md="11"]{-webkit-flex-shrink:11;-ms-flex-negative:11;flex-shrink:11}.flexbox>[shrink-md="10"]{-webkit-flex-shrink:10;-ms-flex-negative:10;flex-shrink:10}.flexbox>[shrink-md="9"]{-webkit-flex-shrink:9;-ms-flex-negative:9;flex-shrink:9}.flexbox>[shrink-md="8"]{-webkit-flex-shrink:8;-ms-flex-negative:8;flex-shrink:8}.flexbox>[shrink-md="7"]{-webkit-flex-shrink:7;-ms-flex-negative:7;flex-shrink:7}.flexbox>[shrink-md="6"]{-webkit-flex-shrink:6;-ms-flex-negative:6;flex-shrink:6}.flexbox>[shrink-md="5"]{-webkit-flex-shrink:5;-ms-flex-negative:5;flex-shrink:5}.flexbox>[shrink-md="4"]{-webkit-flex-shrink:4;-ms-flex-negative:4;flex-shrink:4}.flexbox>[shrink-md="3"]{-webkit-flex-shrink:3;-ms-flex-negative:3;flex-shrink:3}.flexbox>[shrink-md="2"]{-webkit-flex-shrink:2;-ms-flex-negative:2;flex-shrink:2}.flexbox>[shrink-md="1"]{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flexbox>[shrink-md="0"]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.flexbox>[order-md="20"]{-webkit-box-ordinal-group:21;-webkit-order:20;-ms-flex-order:20;order:20}.flexbox>[order-md="19"]{-webkit-box-ordinal-group:20;-webkit-order:19;-ms-flex-order:19;order:19}.flexbox>[order-md="18"]{-webkit-box-ordinal-group:19;-webkit-order:18;-ms-flex-order:18;order:18}.flexbox>[order-md="17"]{-webkit-box-ordinal-group:18;-webkit-order:17;-ms-flex-order:17;order:17}.flexbox>[order-md="16"]{-webkit-box-ordinal-group:17;-webkit-order:16;-ms-flex-order:16;order:16}.flexbox>[order-md="15"]{-webkit-box-ordinal-group:16;-webkit-order:15;-ms-flex-order:15;order:15}.flexbox>[order-md="14"]{-webkit-box-ordinal-group:15;-webkit-order:14;-ms-flex-order:14;order:14}.flexbox>[order-md="13"]{-webkit-box-ordinal-group:14;-webkit-order:13;-ms-flex-order:13;order:13}.flexbox>[order-md="12"]{-webkit-box-ordinal-group:13;-webkit-order:12;-ms-flex-order:12;order:12}.flexbox>[order-md="11"]{-webkit-box-ordinal-group:12;-webkit-order:11;-ms-flex-order:11;order:11}.flexbox>[order-md="10"]{-webkit-box-ordinal-group:11;-webkit-order:10;-ms-flex-order:10;order:10}.flexbox>[order-md="9"]{-webkit-box-ordinal-group:10;-webkit-order:9;-ms-flex-order:9;order:9}.flexbox>[order-md="8"]{-webkit-box-ordinal-group:9;-webkit-order:8;-ms-flex-order:8;order:8}.flexbox>[order-md="7"]{-webkit-box-ordinal-group:8;-webkit-order:7;-ms-flex-order:7;order:7}.flexbox>[order-md="6"]{-webkit-box-ordinal-group:7;-webkit-order:6;-ms-flex-order:6;order:6}.flexbox>[order-md="5"]{-webkit-box-ordinal-group:6;-webkit-order:5;-ms-flex-order:5;order:5}.flexbox>[order-md="4"]{-webkit-box-ordinal-group:5;-webkit-order:4;-ms-flex-order:4;order:4}.flexbox>[order-md="3"]{-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3}.flexbox>[order-md="2"]{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2}.flexbox>[order-md="1"]{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.flexbox>[order-md="0"]{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}}@media only screen and (min-width:993px) and(max-width :1200px){.flexbox[justify-lg=space-between]{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.flexbox[justify-lg=space-around]{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.flexbox[justify-lg=flex-start]{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.flexbox[justify-lg=flex-end]{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.flexbox[justify-lg=center]{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.flexbox[align-lg=stretch]{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.flexbox[align-lg=flex-start]{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.flexbox[align-lg=flex-end]{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.flexbox[align-lg=center]{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.flexbox[align-lg=baseline]{-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}.flexbox[x-justify-lg=flex-start]{-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.flexbox[x-justify-lg=flex-end]{-webkit-align-content:flex-end;-ms-flex-line-pack:end;align-content:flex-end}.flexbox[x-justify-lg=center]{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center}.flexbox[wrap-lg=wrap-reverse]{-webkit-flex-wrap:wrap-reverse;-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.flexbox[wrap-lg=wrap]{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flexbox[wrap-lg=nowrap]{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flexbox[direction-lg=column-reverse]{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flexbox[direction-lg=column]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flexbox[direction-lg=row-reverse]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flexbox[direction-lg=row]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.flexbox>[grow-lg="20"]{-webkit-box-flex:20;-webkit-flex-grow:20;-ms-flex-positive:20;flex-grow:20}.flexbox>[grow-lg="19"]{-webkit-box-flex:19;-webkit-flex-grow:19;-ms-flex-positive:19;flex-grow:19}.flexbox>[grow-lg="18"]{-webkit-box-flex:18;-webkit-flex-grow:18;-ms-flex-positive:18;flex-grow:18}.flexbox>[grow-lg="17"]{-webkit-box-flex:17;-webkit-flex-grow:17;-ms-flex-positive:17;flex-grow:17}.flexbox>[grow-lg="16"]{-webkit-box-flex:16;-webkit-flex-grow:16;-ms-flex-positive:16;flex-grow:16}.flexbox>[grow-lg="15"]{-webkit-box-flex:15;-webkit-flex-grow:15;-ms-flex-positive:15;flex-grow:15}.flexbox>[grow-lg="14"]{-webkit-box-flex:14;-webkit-flex-grow:14;-ms-flex-positive:14;flex-grow:14}.flexbox>[grow-lg="13"]{-webkit-box-flex:13;-webkit-flex-grow:13;-ms-flex-positive:13;flex-grow:13}.flexbox>[grow-lg="12"]{-webkit-box-flex:12;-webkit-flex-grow:12;-ms-flex-positive:12;flex-grow:12}.flexbox>[grow-lg="11"]{-webkit-box-flex:11;-webkit-flex-grow:11;-ms-flex-positive:11;flex-grow:11}.flexbox>[grow-lg="10"]{-webkit-box-flex:10;-webkit-flex-grow:10;-ms-flex-positive:10;flex-grow:10}.flexbox>[grow-lg="9"]{-webkit-box-flex:9;-webkit-flex-grow:9;-ms-flex-positive:9;flex-grow:9}.flexbox>[grow-lg="8"]{-webkit-box-flex:8;-webkit-flex-grow:8;-ms-flex-positive:8;flex-grow:8}.flexbox>[grow-lg="7"]{-webkit-box-flex:7;-webkit-flex-grow:7;-ms-flex-positive:7;flex-grow:7}.flexbox>[grow-lg="6"]{-webkit-box-flex:6;-webkit-flex-grow:6;-ms-flex-positive:6;flex-grow:6}.flexbox>[grow-lg="5"]{-webkit-box-flex:5;-webkit-flex-grow:5;-ms-flex-positive:5;flex-grow:5}.flexbox>[grow-lg="4"]{-webkit-box-flex:4;-webkit-flex-grow:4;-ms-flex-positive:4;flex-grow:4}.flexbox>[grow-lg="3"]{-webkit-box-flex:3;-webkit-flex-grow:3;-ms-flex-positive:3;flex-grow:3}.flexbox>[grow-lg="2"]{-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2}.flexbox>[grow-lg="1"]{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.flexbox>[grow-lg="0"]{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0}.flexbox>[shrink-lg="20"]{-webkit-flex-shrink:20;-ms-flex-negative:20;flex-shrink:20}.flexbox>[shrink-lg="19"]{-webkit-flex-shrink:19;-ms-flex-negative:19;flex-shrink:19}.flexbox>[shrink-lg="18"]{-webkit-flex-shrink:18;-ms-flex-negative:18;flex-shrink:18}.flexbox>[shrink-lg="17"]{-webkit-flex-shrink:17;-ms-flex-negative:17;flex-shrink:17}.flexbox>[shrink-lg="16"]{-webkit-flex-shrink:16;-ms-flex-negative:16;flex-shrink:16}.flexbox>[shrink-lg="15"]{-webkit-flex-shrink:15;-ms-flex-negative:15;flex-shrink:15}.flexbox>[shrink-lg="14"]{-webkit-flex-shrink:14;-ms-flex-negative:14;flex-shrink:14}.flexbox>[shrink-lg="13"]{-webkit-flex-shrink:13;-ms-flex-negative:13;flex-shrink:13}.flexbox>[shrink-lg="12"]{-webkit-flex-shrink:12;-ms-flex-negative:12;flex-shrink:12}.flexbox>[shrink-lg="11"]{-webkit-flex-shrink:11;-ms-flex-negative:11;flex-shrink:11}.flexbox>[shrink-lg="10"]{-webkit-flex-shrink:10;-ms-flex-negative:10;flex-shrink:10}.flexbox>[shrink-lg="9"]{-webkit-flex-shrink:9;-ms-flex-negative:9;flex-shrink:9}.flexbox>[shrink-lg="8"]{-webkit-flex-shrink:8;-ms-flex-negative:8;flex-shrink:8}.flexbox>[shrink-lg="7"]{-webkit-flex-shrink:7;-ms-flex-negative:7;flex-shrink:7}.flexbox>[shrink-lg="6"]{-webkit-flex-shrink:6;-ms-flex-negative:6;flex-shrink:6}.flexbox>[shrink-lg="5"]{-webkit-flex-shrink:5;-ms-flex-negative:5;flex-shrink:5}.flexbox>[shrink-lg="4"]{-webkit-flex-shrink:4;-ms-flex-negative:4;flex-shrink:4}.flexbox>[shrink-lg="3"]{-webkit-flex-shrink:3;-ms-flex-negative:3;flex-shrink:3}.flexbox>[shrink-lg="2"]{-webkit-flex-shrink:2;-ms-flex-negative:2;flex-shrink:2}.flexbox>[shrink-lg="1"]{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flexbox>[shrink-lg="0"]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.flexbox>[order-lg="20"]{-webkit-box-ordinal-group:21;-webkit-order:20;-ms-flex-order:20;order:20}.flexbox>[order-lg="19"]{-webkit-box-ordinal-group:20;-webkit-order:19;-ms-flex-order:19;order:19}.flexbox>[order-lg="18"]{-webkit-box-ordinal-group:19;-webkit-order:18;-ms-flex-order:18;order:18}.flexbox>[order-lg="17"]{-webkit-box-ordinal-group:18;-webkit-order:17;-ms-flex-order:17;order:17}.flexbox>[order-lg="16"]{-webkit-box-ordinal-group:17;-webkit-order:16;-ms-flex-order:16;order:16}.flexbox>[order-lg="15"]{-webkit-box-ordinal-group:16;-webkit-order:15;-ms-flex-order:15;order:15}.flexbox>[order-lg="14"]{-webkit-box-ordinal-group:15;-webkit-order:14;-ms-flex-order:14;order:14}.flexbox>[order-lg="13"]{-webkit-box-ordinal-group:14;-webkit-order:13;-ms-flex-order:13;order:13}.flexbox>[order-lg="12"]{-webkit-box-ordinal-group:13;-webkit-order:12;-ms-flex-order:12;order:12}.flexbox>[order-lg="11"]{-webkit-box-ordinal-group:12;-webkit-order:11;-ms-flex-order:11;order:11}.flexbox>[order-lg="10"]{-webkit-box-ordinal-group:11;-webkit-order:10;-ms-flex-order:10;order:10}.flexbox>[order-lg="9"]{-webkit-box-ordinal-group:10;-webkit-order:9;-ms-flex-order:9;order:9}.flexbox>[order-lg="8"]{-webkit-box-ordinal-group:9;-webkit-order:8;-ms-flex-order:8;order:8}.flexbox>[order-lg="7"]{-webkit-box-ordinal-group:8;-webkit-order:7;-ms-flex-order:7;order:7}.flexbox>[order-lg="6"]{-webkit-box-ordinal-group:7;-webkit-order:6;-ms-flex-order:6;order:6}.flexbox>[order-lg="5"]{-webkit-box-ordinal-group:6;-webkit-order:5;-ms-flex-order:5;order:5}.flexbox>[order-lg="4"]{-webkit-box-ordinal-group:5;-webkit-order:4;-ms-flex-order:4;order:4}.flexbox>[order-lg="3"]{-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3}.flexbox>[order-lg="2"]{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2}.flexbox>[order-lg="1"]{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.flexbox>[order-lg="0"]{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}}


--------------------------------------------------------------------------------
/dist/angular-layout.min.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * angular-layout - v0.1.1 - 2015-02-08
3 |  * https://github.com/demerzel3/angular-layout
4 |  *
5 |  * Copyright (c) 2015
6 |  * Authors : Gabriele Genta & Martin Mouterde
7 |  * Licensed MIT <>
8 |  */
9 | !function(){"use strict";var a=angular.module("angular.layout",[]);a.directive("solid",function(){return{restrict:"E",scope:{size:"@"},replace:!0,template:'<div class="flexbox solid" grow="20" shrink="0" ng-style="{\'max-height\':size,\'max-width\':size,\'flex-basis\':size}"></div>'}}),a.directive("glue",function(){return{restrict:"E",replace:!0,template:'<div grow="20" shrink="20" class="flexbox glue"></div>'}});var b=function(b,c,d){a.directive(b,function(){return{restrict:"AE",link:function(a,e){e.attr("direction"+d,c),e.addClass("flexbox"),e.addClass(b)}}})};b("hbox","row",""),b("hboxXs","row","-xs"),b("hboxSm","row","-sm"),b("hboxMd","row","-md"),b("hboxLg","row","-lg"),b("vbox","column",""),b("vboxXs","column","-xs"),b("vboxSm","column","-sm"),b("vboxMd","column","-md"),b("vboxLg","column","-lg")}();


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "authors": [
 3 |     {
 4 |       "name": "Gabriele Genta"
 5 |     },
 6 |     {
 7 |       "name": "Martin Mouterde"
 8 |     }
 9 |   ],
10 |   "name": "angular-layout",
11 |   "version": "0.1.1",
12 |   "homepage": "https://github.com/demerzel3/angular-layout",
13 |   "licenses": {
14 |     "type": "MIT"
15 |   },
16 |   "bugs": "https://github.com/demerzel3/angular-layout/issues",
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git@github.com:demerzel3/angular-layout.git"
20 |   },
21 |   "dependencies": {},
22 |   "devDependencies": {
23 |     "grunt": "~0.4.1",
24 |     "grunt-autoprefixer": "^1.0.1",
25 |     "grunt-banner": "^0.2.3",
26 |     "grunt-contrib-clean": "~0.4.1",
27 |     "grunt-contrib-copy": "~0.4.1",
28 |     "grunt-contrib-cssmin": "^0.10.0",
29 |     "grunt-contrib-less": "^0.11.4",
30 |     "grunt-contrib-uglify": "~0.2.0"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/js/angular-layout.js:
--------------------------------------------------------------------------------
 1 | (function () {
 2 |     'use strict';
 3 |     var angularLayoutModule = angular.module("angular.layout", []);
 4 | 
 5 |     angularLayoutModule.directive("solid", function () {
 6 |         return {
 7 |             restrict: "E",
 8 |             scope: {size: "@"},
 9 |             replace: true,
10 |             template: '<div class="flexbox solid" grow="20" shrink="0" ng-style="{\'max-height\':size,\'max-width\':size,\'flex-basis\':size}"></div>'
11 |         };
12 |     });
13 | 
14 |     angularLayoutModule.directive("glue", function () {
15 |         return {
16 |             restrict: "E",
17 |             replace: true,
18 |             template: '<div grow="20" shrink="20" class="flexbox glue"></div>'
19 |         };
20 |     });
21 | 
22 |     var directiveFactory = function (directiveName,direction, suffix) {
23 |         angularLayoutModule.directive(directiveName, function () {
24 |             return {
25 |                 restrict: "AE",
26 |                 link: function (scope, element) {
27 |                     element.attr("direction" + suffix, direction);
28 |                     element.addClass("flexbox");
29 |                     element.addClass(directiveName);
30 |                 }
31 |             };
32 |         });
33 |     };
34 | 
35 |     directiveFactory("hbox","row","");
36 |     directiveFactory("hboxXs","row","-xs");
37 |     directiveFactory("hboxSm","row","-sm");
38 |     directiveFactory("hboxMd","row","-md");
39 |     directiveFactory("hboxLg","row","-lg");
40 | 
41 |     directiveFactory("vbox","column","");
42 |     directiveFactory("vboxXs","column","-xs");
43 |     directiveFactory("vboxSm","column","-sm");
44 |     directiveFactory("vboxMd","column","-md");
45 |     directiveFactory("vboxLg","column","-lg");
46 | 
47 | })();


--------------------------------------------------------------------------------
/src/less/angular-layout-debug.less:
--------------------------------------------------------------------------------
 1 | .vbox > .flexboxDebug.glue,
 2 | .hbox > .flexboxDebug.glue {
 3 |   height: 1px;
 4 |   display: block;
 5 |   border-style: dotted;
 6 |   border-width: thin;
 7 |   border-color: rgb(174, 219, 219);
 8 | }
 9 | 
10 | .vbox > .flexboxDebug.glue:after,
11 | .hbox > .flexboxDebug.glue:after {
12 |   content: "\2192";
13 |   font-size: 24px;
14 |   float: right;
15 |   position: relative;
16 |   top: -19px;
17 |   right: -4px;
18 |   color: rgb(174, 219, 219);
19 | }
20 | .vbox > .flexboxDebug.glue:before,
21 | .hbox > .flexboxDebug.glue:before {
22 |   content: "\2190";
23 |   font-size: 24px;
24 |   float: left;
25 |   position: relative;
26 |   top: -19px;
27 |   left: -4px;
28 |   color: rgb(174, 219, 219);
29 | }
30 | 
31 | .vbox > .flexboxDebug.solid,
32 | .hbox > .flexboxDebug.solid {
33 |   border: 3px double;
34 |   border-color: black;
35 | }
36 | 
37 | .vbox > .flexboxDebug.solid:before,
38 | .hbox > .flexboxDebug.solid:before {
39 |   content: attr(size);
40 | }
41 | 
42 | .hbox.flexboxDebug{
43 |   .mixin_gap_h_debug(20);
44 | }
45 | .vbox.flexboxDebug{
46 |   .mixin_gap_v_debug(20);
47 | }
48 | 
49 | .vbox.flexboxDebug:before,
50 | .hbox.flexboxDebug:before {
51 |   content: attr(debugLabel);
52 |   z-index: 10;
53 |   position: absolute;
54 |   background-color: azure;
55 | }
56 | 
57 | .vbox.flexboxDebug,
58 | .hbox.flexboxDebug {
59 |   border-style: dashed;
60 |   border-width: thin;
61 |   border-color: rgb(174, 219, 219);
62 | }
63 | 
64 | .mixin_gap_h_debug(@nb) {
65 |   .-(@i: @nb) when (@i > 0) {
66 |   &[gap="@{i}"] > *:not(:last-child) {
67 |     border-right-width: e(%("%apx",@i));
68 |     border-right-color: red;
69 |     border-right-style: inset;
70 |     margin-right: 0;
71 |   }
72 |   .-((@i - 1));
73 | } .-;
74 | }
75 | 
76 | .mixin_gap_v_debug(@nb) {
77 |   .-(@i: @nb) when (@i > 0) {
78 |   &[gap="@{i}"] > *:not(:last-child) {
79 |     border-bottom-width: e(%("%apx",@i));
80 |     border-bottom-color: red;
81 |     border-bottom-style: inset;
82 |     margin-bottom: 0;
83 |   }
84 |   .-((@i - 1));
85 | } .-;
86 | }
87 | 


--------------------------------------------------------------------------------
/src/less/angular-layout.less:
--------------------------------------------------------------------------------
  1 | 
  2 | @directionValues: row, row-reverse, column, column-reverse;
  3 | @alignItemsValues: baseline, center, flex-end, flex-start, stretch;
  4 | @JustifyContentValues: center, flex-end, flex-start, space-around, space-between;
  5 | @alignContentValues: center, flex-end, flex-start;
  6 | @wrapValues: nowrap, wrap, wrap-reverse;
  7 | @screenFormat: lg, md, sm, xs;
  8 | @media-xs: ~"only screen and (max-width : 480px)";
  9 | @media-sm: ~"only screen and (min-width : 481px) and (max-width : 768px)";
 10 | @media-md: ~"only screen and (min-width: 769px) and (max-width : 992px)";
 11 | @media-lg: ~"only screen and (min-width: 993px) and(max-width : 1200px)";
 12 | @medias : @media-lg, @media-md, @media-sm,  @media-xs;
 13 | @glueGrowShrink: 99;
 14 | 
 15 | .glue {
 16 |   flex-grow: @glueGrowShrink;
 17 |   flex-shrink: @glueGrowShrink;
 18 | }
 19 | 
 20 | .hbox {
 21 |   .mixin_gap(20,margin-right);
 22 | }
 23 | .vbox {
 24 |   .mixin_gap(20,margin-bottom);
 25 | }
 26 | 
 27 | .flexbox {
 28 |   display: flex;
 29 |   //add justify attr style
 30 |   .mixin_attrValueAsStyle(@JustifyContentValues,justify,justify-content);
 31 |   //add align attr style
 32 |   .mixin_attrValueAsStyle(@alignItemsValues,align,align-items);
 33 |   //add xJustify attr style
 34 |   .mixin_attrValueAsStyle(@alignContentValues,x-justify,align-content);
 35 |   //add wrap attr style
 36 |   .mixin_attrValueAsStyle(@wrapValues,wrap,flex-wrap);
 37 |   //add orientation attr style
 38 |   .mixin_attrValueAsStyle(@directionValues,direction,flex-direction);
 39 |   //add grow attr style
 40 |   //.mixin_attrValueAsIntStyle(20,grow,flex-grow,'');
 41 |   //add shrink attr style
 42 |   //.mixin_attrValueAsIntStyle(20,shrink,flex-shrink,'');
 43 |   //add order attr style
 44 |   //.mixin_attrValueAsIntStyle(20,order,order,'');
 45 |   //add grow attr style
 46 |   .mixin_childAttrValueAsIntStyle(20,grow,flex-grow,'');
 47 |   //add shrink attr style
 48 |   .mixin_childAttrValueAsIntStyle(20,shrink,flex-shrink,'');
 49 |   //add order attr style
 50 |   .mixin_childAttrValueAsIntStyle(20,order,order,'');
 51 |   .responsive_flexbox();
 52 | }
 53 | 
 54 | .mixin_attrValueAsStyle(@arrayValues,@attributeName,@styleName) {
 55 |   .loop(@i: length(@arrayValues)) when (@i > 0) {
 56 |     @name: e(extract(@arrayValues, @i));
 57 |     &[@{attributeName}="@{name}"] {@{styleName}: @name}
 58 |     .loop((@i - 1));
 59 |   } .loop;
 60 | }
 61 | 
 62 | .mixin_attrValueAsIntStyle(@nb,@attributeName,@styleName,@unit) {
 63 |   .loop(@i: @nb) when (@i >= 0) {
 64 |     &[@{attributeName}="@{i}@{unit}"] {@{styleName}: @i e(@unit)}
 65 |     .loop((@i - 1));
 66 |   } .loop;
 67 | }
 68 | 
 69 | .mixin_childAttrValueAsIntStyle(@nb,@attributeName,@styleName,@unit) {
 70 |   .loop(@i: @nb) when (@i >= 0) {
 71 |     & > *[@{attributeName}="@{i}@{unit}"] {@{styleName}: @i e(@unit)}
 72 |     .loop((@i - 1));
 73 |   } .loop;
 74 | }
 75 | 
 76 | 
 77 | .mixin_gap(@nb,@margin) {
 78 |   .loop(@i: @nb) when (@i >= 0) {
 79 |     &[gap="@{i}"] > * {@{margin}: e(%("%apx",@i))}
 80 |     &[gap="@{i}"] :last-child {@{margin}: 0; }
 81 |     .loop((@i - 1));
 82 |   } .loop;
 83 | }
 84 | 
 85 | .mixin_gap_h_debug(@nb) {
 86 |   .loop(@i: @nb) when (@i >= 0) {
 87 |     &[gap="@{i}"] > * {
 88 |       border-right-width: e(%("%apx",@i));
 89 |       border-right-color: red;
 90 |       border-right-style: inset;
 91 |     }
 92 |     &[gap="@{i}"] :last-child {@{margin}: 0; }
 93 |     .loop((@i - 1));
 94 |   } .loop;
 95 | }
 96 | 
 97 | .responsive_flexbox() {
 98 |   .loop(@i: length(@screenFormat)) when (@i > 0) {
 99 |     @aScreen: e(extract(@screenFormat, @i));
100 |     @aMedia: e(extract(@medias, @i));
101 |     @media @aMedia { .responsive_flexbox(@aScreen) }
102 |     .loop((@i - 1));
103 |   } .loop;
104 | }
105 | 
106 | .responsive_flexbox(@suffix) {
107 |   //add justify attr style
108 |   .mixin_attrValueAsStyle(@JustifyContentValues,e(%("justify-%a",@suffix)),justify-content);
109 |   //add align attr style
110 |   .mixin_attrValueAsStyle(@alignItemsValues,e(%("align-%a",@suffix)),align-items);
111 |   //add xJustify attr style
112 |   .mixin_attrValueAsStyle(@alignContentValues,e(%("x-justify-%a",@suffix)),align-content);
113 |   //add wrap attr style
114 |   .mixin_attrValueAsStyle(@wrapValues,e(%("wrap-%a",@suffix)),flex-wrap);
115 |   //add orientation attr style
116 |   .mixin_attrValueAsStyle(@directionValues,e(%("direction-%a",@suffix)),flex-direction);
117 |   //add grow attr style
118 |   //.mixin_attrValueAsIntStyle(20,e(%("grow-%a",@suffix)),flex-grow,'');
119 |   //add shrink attr style
120 |   //.mixin_attrValueAsIntStyle(20,e(%("shrink-%a",@suffix)),flex-shrink,'');
121 |   //add order attr style
122 |   //.mixin_attrValueAsIntStyle(20,e(%("order-%a",@suffix)),order,'');
123 |   //add grow attr style
124 |   .mixin_childAttrValueAsIntStyle(20,e(%("grow-%a",@suffix)),flex-grow,'');
125 |   //add shrink attr style
126 |   .mixin_childAttrValueAsIntStyle(20,e(%("shrink-%a",@suffix)),flex-shrink,'');
127 |   //add order attr style
128 |   .mixin_childAttrValueAsIntStyle(20,e(%("order-%a",@suffix)),order,'');
129 | }
130 | 


--------------------------------------------------------------------------------