superdesk-ui-framework 4.0.52 → 4.0.53

package/examples/pages/components_deprecated/alerts.html

@@ -1,113 +0,0 @@
-<section class="docs-page__container">
-    <h2 class="docs-page__h2">Alerts</h2>
-    <p class="docs-page__paragraph">Provide contextual feedback or info messages for user actions with the handful of available alert box options.</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <p class="docs-page__paragraph">// Hollow style (preferred usage)</p>
-
-                <div class="sd-alert__container" ng-init="alert=true">
-                    <div class="sd-alert sd-alert--hollow" ng-class="{'sd-alert--hidden': !alert}">
-                        <button class="sd-alert__close" ng-click="alert=false"></button>
-                        Fusce nec ex et dolor rhoncus iaculis maximus sit amet lorem. Nunc posuere, ligula quis dictum tempor, lectus diam pharetra est, id fringilla leo urna vel arcu.
-                    </div>
-                    <span class="sd-alert__info-btn sd-shadow--z2" ng-click="alert=!alert" ng-class="{'sd-alert__info-btn--hidden': alert}"><i class="icon-info-large"></i></span>
-                </div>
-
-                <div class="sd-alert__container" ng-init="alert2=true">
-                    <div class="sd-alert sd-alert--hollow sd-alert--alert" ng-class="{'sd-alert--hidden': !alert2}">
-                        <button class="sd-alert__close" ng-click="alert2=false"></button>
-                        Sed tincidunt ipsum metus, consectetur vestibulum turpis luctus in. Vestibulum ut ex vulputate, lacinia mauris vel, accumsan libero. Morbi dapibus non felis et convallis. Sed at dolor vel nisl aliquam vehicula.
-                    </div>
-                    <span class="sd-alert__info-btn sd-alert__info-btn--alert sd-shadow--z2" ng-click="alert2=!alert2" ng-class="{'sd-alert__info-btn--hidden': alert2}"><i class="icon-info-large"></i></span>
-                </div>
-
-                <div class="sd-alert__container" ng-init="alert3=true">
-                    <div class="sd-alert sd-alert--hollow sd-alert--sd-green" ng-class="{'sd-alert--hidden': !alert3}">
-                        <button class="sd-alert__close" ng-click="alert3=false"></button>
-                        In mattis tellus odio, quis dictum sapien pellentesque in. Phasellus dignissim tempus ante at congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus bibendum lacinia.
-                    </div>
-                    <span class="sd-alert__info-btn sd-alert__info-btn--sd-green sd-shadow--z2" ng-click="alert3=!alert3" ng-class="{'sd-alert__info-btn--hidden': alert3}"><i class="icon-help-large"></i></span>
-                </div>
-
-                <div class="sd-alert__container" ng-init="alert4=true">
-                    <div class="sd-alert sd-alert--hollow sd-alert--primary" ng-class="{'sd-alert--hidden': !alert4}">
-                        <button class="sd-alert__close" ng-click="alert4=false"></button>
-                        Integer elementum vestibulum ipsum a rhoncus. Cras et tortor tempus, imperdiet neque sit amet, imperdiet elit. Nunc eleifend sollicitudin molestie. Aliquam nec enim orci.
-                    </div>
-                    <span class="sd-alert__info-btn sd-alert__info-btn--primary sd-shadow--z2" ng-click="alert4=!alert4" ng-class="{'sd-alert__info-btn--hidden': alert4}"><i class="icon-info-large"></i></span>
-                </div>
-
-                <p class="docs-page__paragraph">// Filled</p>
-                <div class="sd-alert__container" ng-init="alert5=true">
-                    <div class="sd-alert sd-alert--sd-green" ng-class="{'sd-alert--hidden': !alert5}">
-                        <button class="sd-alert__close" ng-click="alert5=false"></button>
-                        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Praesent vulputate eros nisi, et porta magna eleifend et. 
-                    </div>
-                    <span class="sd-alert__info-btn sd-alert__info-btn--sd-green sd-shadow--z2" ng-click="alert5=!alert5" ng-class="{'sd-alert__info-btn--hidden': alert5}"><i class="icon-info-large"></i></span>
-                </div>
-
-                <div class="sd-alert__container" ng-init="alert6=true">
-                    <div class="sd-alert sd-alert--warning" ng-class="{'sd-alert--hidden': !alert6}">
-                        <button class="sd-alert__close" ng-click="alert6=false"></button>
-                        Praesent vulputate eros nisi, et porta magna eleifend et. Duis non sagittis erat. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
-                    </div>
-                    <span class="sd-alert__info-btn sd-alert__info-btn--warning sd-shadow--z2" ng-click="alert6=!alert6" ng-class="{'sd-alert__info-btn--hidden': alert6}"><i class="icon-info-large"></i></span>
-                </div>
-
-                <p class="docs-page__paragraph">// Small</p>
-                <div class="sd-alert__container" ng-init="alert7=true">
-                    <div class="sd-alert sd-alert--hollow sd-alert--primary sd-alert--small" ng-class="{'sd-alert--hidden': !alert7}">
-                        <button class="sd-alert__close" ng-click="alert7=false"></button>
-                        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
-                    </div>
-                    <span class="sd-alert__info-btn sd-alert__info-btn--primary sd-shadow--z2" ng-click="alert7=!alert7" ng-class="{'sd-alert__info-btn--hidden': alert7}"><i class="icon-info-large"></i></span>
-                </div>
-
-                <div class="sd-alert__container" ng-init="alert8=true">
-                    <div class="sd-alert sd-alert--highlight sd-alert--small" ng-class="{'sd-alert--hidden': !alert8}">
-                        <button class="sd-alert__close" ng-click="alert8=false"></button>
-                        Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
-                    </div>
-                    <span class="sd-alert__info-btn sd-alert__info-btn--highlight sd-shadow--z2" ng-click="alert8=!alert8" ng-class="{'sd-alert__info-btn--hidden': alert8}"><i class="icon-info-large"></i></span>
-                </div>
-
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                <!--Hollow style (preferred usage)-->
-                <div class="sd-alert sd-alert--hollow">
-                    <button class="sd-alert__close"></button>
-                    Fusce nec ex et dolor rhoncus iaculis maximus sit amet lorem. Nunc posuere, ligula quis dictum tempor, lectus diam pharetra est, id fringilla leo urna vel arcu.
-                </div>
-                <div class="sd-alert sd-alert--hollow sd-alert--alert">
-                    <button class="sd-alert__close"></button>
-                    Sed tincidunt ipsum metus, consectetur vestibulum turpis luctus in. Vestibulum ut ex vulputate, lacinia mauris vel, accumsan libero. Morbi dapibus non felis et convallis. Sed at dolor vel nisl aliquam vehicula.
-                </div>
-                <div class="sd-alert sd-alert--hollow sd-alert--sd-green">
-                    <button class="sd-alert__close"></button>
-                    In mattis tellus odio, quis dictum sapien pellentesque in. Phasellus dignissim tempus ante at congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus bibendum lacinia.
-                </div>
-                <div class="sd-alert sd-alert--hollow sd-alert--primary">
-                    <button class="sd-alert__close"></button>
-                    Integer elementum vestibulum ipsum a rhoncus. Cras et tortor tempus, imperdiet neque sit amet, imperdiet elit. Nunc eleifend sollicitudin molestie. Aliquam nec enim orci.
-                </div>
-
-                <!--Filled-->
-                <div class="sd-alert sd-alert--sd-green">
-                    <button class="sd-alert__close"></button>
-                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Praesent vulputate eros nisi, et porta magna eleifend et. Duis non sagittis erat. 
-                </div>
-                <div class="sd-alert sd-alert--warning">
-                    <button class="sd-alert__close"></button>
-                    Praesent vulputate eros nisi, et porta magna eleifend et. Duis non sagittis erat. Morbi sollicitudin non eros non egestas. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
-                </div>
-                </pre>
-            </div>
-        </div>
-    </div>
-</section>

package/examples/pages/components_deprecated/badge.html

@@ -1,79 +0,0 @@
-<section class="docs-page__container">
-    <h2 class="docs-page__h2">Badge</h2>
-    <p class="docs-page__paragraph">Add the .badge class to an element to create a badge. In the code example <code>&lt;span&gt;</code> is used, but any tag will do.</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <p class="docs-page__paragraph">// Circle (default)</p>
-                <div class="docs-page__content-row">
-                    <span class="badge">1</span>
-                    <span class="badge badge--primary">2</span>
-                    <span class="badge badge--success">A</span>
-                    <span class="badge badge--warning">B</span>
-                    <span class="badge badge--alert">6</span>
-                    <span class="badge badge--highlight">2318</span>
-                    <span class="badge badge--light">76</span>
-                </div>
-                <p class="docs-page__paragraph">// Square</p>
-                <p style="margin: -10px 0 20px; color: #747474;">Use this version only for single digits or numbers. For longer text use the <code>.label</code> class.</p>
-                <div class="docs-page__content-row">
-                    <span class="badge">1</span>
-                    <span class="badge badge--primary badge--square">2</span>
-                    <span class="badge badge--success badge--square">A</span>
-                    <span class="badge badge--warning badge--square">B</span>
-                    <span class="badge badge--alert badge--square">6</span>
-                    <span class="badge badge--highlight badge--square">D</span>
-                    <span class="badge badge--light badge--square">9</span>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <span class="badge">1</span>
-                    <span class="badge badge--primary">2</span>
-                    <span class="badge badge--success">A</span>
-                    <span class="badge badge--warning">B</span>
-                    <span class="badge badge--alert">6</span>
-                    <span class="badge badge--highlight">2318</span>
-                    <span class="badge badge--light">76</span>
-                </pre>
-            </div>
-        </div>
-    </div>
-    <h3 class="docs-page__h3">Element with badge</h3>
-    <p class="docs-page__paragraph">Add the div with <code>.element-with-badge</code> class and put inside your element and after it the badge.</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <div class="docs-page__content-row"> 
-                    <div class="element-with-badge">                                   
-                        <a class="btn">Default</a>
-                        <span class="badge badge--primary">8</span>
-                    </div>
-                    <div class="element-with-badge">                                   
-                    <a class="btn btn--primary">Primary</a>
-                    <span class="badge badge--light">6</span>
-                    </div>
-                    <div class="element-with-badge">                                   
-                    <a class="btn btn--hollow">Hollow</a>
-                    <span class="badge badge--highlight">4</span>
-                    </div>
-                </div>            
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <div class="element-with-badge"><a class="btn">Default</a><span class="badge badge--primary">8</span></div>
-                    <div class="element-with-badge"><a class="btn btn--primary">Primary</a><span class="badge badge--light">6</span></div>
-                    <div class="element-with-badge"><a class="btn btn--hollow">Hollow</a><span class="badge badge--highlight">4</span></div>                 
-                </pre>
-            </div>
-        </div>
-    </div>
-</section>

package/examples/pages/components_deprecated/basic-grid.html

@@ -1,132 +0,0 @@
-<section class="docs-page__container">    
-    <h2 class="docs-page__h2">Basic grid</h2>
-    <p class="docs-page__paragraph">The basic grid in Superdesk is based on flex grid and works very similarly to the standard float grid. It is intended for positioning items in a grid layout, with columns that have equal width, either on separate pages or inside other elements. Basic responsive features are included, if you need full layout grid look at the <a href="#/layout-grid">Layout grid</a>.</p> 
-    <p class="docs-page__paragraph">Basic grid supports 1 - 6 columns, it is defined as mobile first.</p>
-    <p class="docs-page__paragraph"><b>Grid container</b> example class: <code>flex-grid flex-grid--wrap-items flex-grid--small-1 flex-grid--medium-3 flex-grid--large-4 flex-grid--xlarge-6</code>.</p> 
-    <p class="docs-page__paragraph">If you don't need responsive behavior, minimum of code to achieve same number of columns, container class for 2 columns will be: <code>flex-grid flex-grid--small-2</code>.</p>
-    <p class="docs-page__paragraph"><b>Grid item</b> class is <code>flex-grid__item</code>.</p>
-    <p class="docs-page__paragraph"><b>Note:</b> flex grid is only supported in Chrome, Firefox, Safari 6+ and IE10+.</p>
-
-    <h3 class="docs-page__h3">Default</h3>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <p class="docs-page__paragraph">// Responsive grid // 1 column - small, 3 columns - medium, 4 columns - large, 6 columns - xlarge</p>
-                <div class="flex-grid flex-grid--wrap-items flex-grid--small-1 flex-grid--medium-3 flex-grid--large-4 flex-grid--xlarge-6">
-                    <div class="flex-grid__item">1</div>
-                    <div class="flex-grid__item">2</div>
-                    <div class="flex-grid__item">3</div>
-                    <div class="flex-grid__item">4</div>
-                    <div class="flex-grid__item">5</div>
-                    <div class="flex-grid__item">6</div>
-                    <div class="flex-grid__item">7</div>
-                    <div class="flex-grid__item">8</div>
-                    <div class="flex-grid__item">9</div>
-                    <div class="flex-grid__item">10</div>
-                    <div class="flex-grid__item">11</div>
-                    <div class="flex-grid__item">12</div>
-                </div>
-                <p class="docs-page__paragraph">// Four columns grid same for all screens</p>
-                <div class="flex-grid flex-grid--wrap-items flex-grid--small-4">
-                    <div class="flex-grid__item">1</div>
-                    <div class="flex-grid__item">2</div>
-                    <div class="flex-grid__item">3</div>
-                    <div class="flex-grid__item">4</div>
-                    <div class="flex-grid__item">5</div>
-                    <div class="flex-grid__item">6</div>
-                    <div class="flex-grid__item">7</div>
-                    <div class="flex-grid__item">8</div>
-                    <div class="flex-grid__item">9</div>
-                    <div class="flex-grid__item">10</div>
-                    <div class="flex-grid__item">11</div>
-                    <div class="flex-grid__item">12</div>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <!--Responsive grid // 1 column - small, 3 columns - medium, 4 columns - large, 6 columns - xlarge-->
-                    <div class="flex-grid flex-grid--wrap-items flex-grid--small-1 flex-grid--medium-3 flex-grid--large-4 flex-grid--xlarge-6">
-                        <div class="flex-grid__item">1</div>
-                        <div class="flex-grid__item">2</div>
-                        <div class="flex-grid__item">3</div>
-                        <div class="flex-grid__item">4</div>
-                        <div class="flex-grid__item">5</div>
-                        <div class="flex-grid__item">6</div>
-                        <div class="flex-grid__item">7</div>
-                        <div class="flex-grid__item">8</div>
-                        <div class="flex-grid__item">9</div>
-                        <div class="flex-grid__item">10</div>
-                        <div class="flex-grid__item">11</div>
-                        <div class="flex-grid__item">12</div>
-                    </div>
-                    <!--Four columns grid same for all screens-->
-                    <div class="flex-grid flex-grid--wrap-items flex-grid--small-4">
-                        <div class="flex-grid__item">1</div>
-                        <div class="flex-grid__item">2</div>
-                        <div class="flex-grid__item">3</div>
-                        <div class="flex-grid__item">4</div>
-                        <div class="flex-grid__item">5</div>
-                        <div class="flex-grid__item">6</div>
-                        <div class="flex-grid__item">7</div>
-                        <div class="flex-grid__item">8</div>
-                        <div class="flex-grid__item">9</div>
-                        <div class="flex-grid__item">10</div>
-                        <div class="flex-grid__item">11</div>
-                        <div class="flex-grid__item">12</div>
-                    </div>
-                </pre>
-            </div>
-        </div>
-    </div>
-
-    <h3 class="docs-page__h3">Boxed</h3>
-    <p class="docs-page__paragraph">Adding the modifier <code>flex-grid--boxed</code> to the <code>flex-grid</code> will calculate and add margins to the <code>flex-grid__item</code> elements.</p>
-    <div class="docs-page__code-window" doc-tabs>
-        <div class="docs-page__window-bar">
-            <a id="example" href="#" class="active">Example</a>
-            <a id="markup" href="#">Markup</a>
-        </div>
-        <div class="docs-page__window-content">
-            <div class="docs-page__code-example">
-                <p class="docs-page__paragraph">// Boxed grid example with six columns.</p>
-                <div class="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-1 flex-grid--medium-3 flex-grid--large-4 flex-grid--xlarge-6">
-                    <div class="flex-grid__item">1</div>
-                    <div class="flex-grid__item">2</div>
-                    <div class="flex-grid__item">3</div>
-                    <div class="flex-grid__item">4</div>
-                    <div class="flex-grid__item">5</div>
-                    <div class="flex-grid__item">6</div>
-                    <div class="flex-grid__item">7</div>
-                    <div class="flex-grid__item">8</div>
-                    <div class="flex-grid__item">9</div>
-                    <div class="flex-grid__item">10</div>
-                    <div class="flex-grid__item">11</div>
-                    <div class="flex-grid__item">12</div>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <!--Boxed grid example with six columns.-->
-                    <div class="flex-grid flex-grid--boxed flex-grid--wrap-items flex-grid--small-6">
-                        <div class="flex-grid__item">1</div>
-                        <div class="flex-grid__item">2</div>
-                        <div class="flex-grid__item">3</div>
-                        <div class="flex-grid__item">4</div>
-                        <div class="flex-grid__item">5</div>
-                        <div class="flex-grid__item">6</div>
-                        <div class="flex-grid__item">7</div>
-                        <div class="flex-grid__item">8</div>
-                        <div class="flex-grid__item">9</div>
-                        <div class="flex-grid__item">10</div>
-                        <div class="flex-grid__item">11</div>
-                        <div class="flex-grid__item">12</div>
-                    </div>
-                </pre>
-            </div>
-        </div>
-    </div>
-</section>

package/examples/pages/components_deprecated/big-icons.html

@@ -1,65 +0,0 @@
-<section class="docs-page__container">
-    <h2 class="docs-page__h2  docs-page__text-align--center">Big icon font</h2>
-    <p class="docs-page__paragraph  docs-page__text-align--center">Big icons are added with a custom icon font. Example: <code>&lt;i class="big-icon--photo"&gt;&lt;/i&gt;</code></p>
-    <ul class="docs-page__icon-font-list docs-page__icon-font-list--big">
-        <li><i class="big-icon--dashboard"></i><span>big-icon--dashboard</span></li>
-        <li><i class="big-icon--view"></i><span>big-icon--view</span></li>
-        <li><i class="big-icon--tasks"></i><span>big-icon--tasks</span></li>
-        <li><i class="big-icon--calendar"></i><span>big-icon--calendar</span></li>
-        <li><i class="big-icon--marked-star"></i><span>big-icon--marked-star</span></li>
-        <li><i class="big-icon--archive"></i><span>big-icon--archive</span></li>
-        <li><i class="big-icon--spike"></i><span>big-icon--spike</span></li>
-        <li><i class="big-icon--unspike"></i><span>big-icon--unspike</span></li>
-        <li><i class="big-icon--personal"></i><span>big-icon--personal</span></li>
-        <li><i class="big-icon--global-search"></i><span>big-icon--global-search</span></li>
-        <li><i class="big-icon--analytics"></i><span>big-icon--analytics</span></li>
-        <li><i class="big-icon--web"></i><span>big-icon--web</span></li>
-        <li><i class="big-icon--cog"></i><span>big-icon--cog</span></li>
-        <li><i class="big-icon--send-to"></i><span>big-icon--send-to</span></li>
-        <li><i class="big-icon--info"></i><span>big-icon--info</span></li>
-        <li><i class="big-icon--find-replace"></i><span>big-icon--find-replace</span></li>
-        <li><i class="big-icon--comments"></i><span>big-icon--comments</span></li>
-        <li><i class="big-icon--history"></i><span>big-icon--history</span></li>
-        <li><i class="big-icon--package"></i><span>big-icon--package</span></li>
-        <li><i class="big-icon--create-package"></i><span>big-icon--create-package</span></li>
-        <li><i class="big-icon--add-to-package"></i><span>big-icon--add-to-package</span></li>
-        <li><i class="big-icon--fetch"></i><span>big-icon--fetch</span></li>
-        <li><i class="big-icon--fetch-as"></i><span>big-icon--fetch-as</span></li>
-        <li><i class="big-icon--macro"></i><span>big-icon--macro</span></li>
-        <li><i class="big-icon--related"></i><span>big-icon--related</span></li>
-        <li><i class="big-icon--minimize"></i><span>big-icon--minimize</span></li>
-        <li><i class="big-icon--settings"></i><span>big-icon--settings</span></li>
-        <li><i class="big-icon--multiedit"></i><span>big-icon--multiedit</span></li>
-        <li><i class="big-icon--export"></i><span>big-icon--export</span></li>
-        <li><i class="big-icon--create-list"></i><span>big-icon--create-list</span></li>
-        <li><i class="big-icon--add-to-list"></i><span>big-icon--add-to-list</span></li>
-        <li><i class="big-icon--text"></i><span>big-icon--text</span></li>
-        <li><i class="big-icon--desk"></i><span>big-icon--desk</span></li>
-        <li><i class="big-icon--chevron-left"></i><span>big-icon--chevron-left</span></li>
-        <li><i class="big-icon--chevron-right"></i><span>big-icon--chevron-right</span></li>
-        <li><i class="big-icon--dashboard-alt"></i><span>big-icon--dashboard-alt</span></li>
-        <li><i class="big-icon--master"></i><span>big-icon--master</span></li>
-        <li><i class="big-icon--attachment"></i><span>big-icon--attachment</span></li>
-        <li><i class="big-icon--upload-alt"></i><span>big-icon--upload-alt</span></li>
-        <li><i class="big-icon--document-default"></i><span>big-icon--document-default</span></li>
-        <li><i class="big-icon--document-pdf"></i><span>big-icon--document-pdf</span></li>
-        <li><i class="big-icon--document-doc"></i><span>big-icon--document-doc</span></li>
-        <li><i class="big-icon--semantics"></i><span>big-icon--semantics</span></li>
-        <li><i class="big-icon--picture"></i><span>big-icon--picture</span></li>
-        <li><i class="big-icon--manage-package"></i><span>big-icon--manage-package</span></li>
-        <li><i class="big-icon--live"></i><span>big-icon--live</span></li>
-        <li><i class="big-icon--live-alt"></i><span>big-icon--live-alt</span></li>
-        <li><i class="big-icon--meta-search"></i><span>big-icon--meta-search</span></li>
-        <li><i class="big-icon--chat"></i><span>big-icon--chat</span></li>
-        <li><i class="big-icon--annotation"></i><span>big-icon--annotation</span></li>
-        <li><i class="big-icon--suggestion"></i><span>big-icon--suggestion</span></li>
-        <li><i class="big-icon--publisher"></i><span>big-icon--publisher</span></li>
-        <li><i class="big-icon--tag"></i><span>big-icon--tag</span></li>
-    </ul>
-    <h3 class="docs-page__h3  docs-page__text-align--center">Additional colors</h3>
-    <p class="docs-page__paragraph  docs-page__text-align--center">There are 2 custom icon colors by default, blue and white (for dark backgrounds).<br />Use modifiers big-icon--blue and big-icon--white, example:<br /><code>&lt;i class="big-icon--view big-icon--blue"&gt;&lt;/i&gt;</code></p>
-    <ul class="docs-page__icon-font-list">
-        <li><i class="big-icon--view big-icon--blue"></i><span>big-icon--view</span></li>
-        <li class="docs-page__icon-font-list--dark"><i class="big-icon--spike big-icon--white"></i><span>big-icon--spike</span></li>
-    </ul>
-</section>