superdesk-ui-framework 4.0.52 → 4.0.53

package/examples/pages/components_deprecated/buttons.html

@@ -1,631 +0,0 @@
-<section class="docs-page__container">
-    <h2 class="docs-page__h2">Buttons</h2>
-    <h3 class="docs-page__h3">Sizing</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">
-                <div class="docs-page__content-row">                                    
-                    <a class="btn btn--small">Button small</a>
-                    <a class="btn">Button default</a>
-                    <a class="btn btn--large">Button large</a>
-                </div>
-                <div class="docs-page__content-row">
-                    <a class="btn btn--small btn--expanded">Small expanded button</a>
-                </div>
-                <div class="docs-page__content-row">
-                    <a class="btn btn--expanded">Default expanded button</a>                                    
-                </div>
-                <div class="docs-page__content-row">
-                    <a class="btn btn--large btn--expanded">Large expanded button</a>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <a class="btn btn--small">Button small</a>
-                    <a class="btn">Button default</a>
-                    <a class="btn btn--large">Button large</a>
-                    <a class="btn btn--small btn--expanded">Small expanded button</a>
-                    <a class="btn btn--expanded">Default expanded button</a>
-                    <a class="btn btn--large btn--expanded">Large expanded button</a>
-                </pre>
-            </div>
-        </div>
-    </div>
-    <h3 class="docs-page__h3">Coloring</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">
-                <div class="docs-page__content-row">                                    
-                    <a class="btn">Default</a>
-                    <a class="btn btn--primary">Primary</a>
-                    <a class="btn btn--success">Success</a>
-                    <a class="btn btn--warning">Warning</a>
-                    <a class="btn btn--alert">Alert</a> 
-                    <a class="btn btn--highlight">Highlight</a>
-                    <a class="btn btn--sd-green">Sd-green</a>
-                </div>                              
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <a class="btn">Default</a>
-                    <a class="btn btn--primary">Primary</a>
-                    <a class="btn btn--success">Success</a>
-                    <a class="btn btn--warning">Warning</a>
-                    <a class="btn btn--alert">Alert</a>
-                    <a class="btn btn--highlight">Highlight</a>
-                    <a class="btn btn--sd-green">Sd-green</a>
-                </pre>
-            </div>
-        </div>
-    </div>
-    <h3 class="docs-page__h3">Hollow style</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">
-                <div class="docs-page__content-row">                                    
-                    <a class="btn btn--hollow">Default</a>
-                    <a class="btn btn--hollow btn--primary">Primary</a>
-                    <a class="btn btn--hollow btn--success">Success</a>
-                    <a class="btn btn--hollow btn--warning">Warning</a>
-                    <a class="btn btn--hollow btn--alert">Alert</a>
-                    <a class="btn btn--hollow btn--highlight">Highlight</a>
-                    <a class="btn btn--hollow btn--sd-green">Sd-green</a>
-                </div>                              
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <a class="btn btn--hollow">Default</a>
-                    <a class="btn btn--hollow btn--primary">Primary</a>
-                    <a class="btn btn--hollow btn--success">Success</a>
-                    <a class="btn btn--hollow btn--warning">Warning</a>
-                    <a class="btn btn--hollow btn--alert">Alert</a>
-                    <a class="btn btn--hollow btn--highlight">Highlight</a>
-                    <a class="btn btn--hollow btn--sd-green">Sd-green</a>
-                </pre>
-            </div>
-        </div>
-    </div>
-    <h3 class="docs-page__h3">Text only (without background)</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">
-                <div class="docs-page__content-row">                                    
-                    <a class="btn btn--text-only">Default</a>
-                    <a class="btn btn--primary btn--text-only">Primary</a>
-                    <a class="btn btn--success btn--text-only">Success</a>
-                    <a class="btn btn--warning btn--text-only">Warning</a>
-                    <a class="btn btn--alert btn--text-only">Alert</a>
-                    <a class="btn btn--highlight btn--text-only">Highlight</a>
-                    <a class="btn btn--sd-green btn--text-only">Sd-green</a>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <a class="btn btn--text-only">Default</a>
-                    <a class="btn btn--primary btn--text-only">Primary</a>
-                    <a class="btn btn--success btn--text-only">Success</a>
-                    <a class="btn btn--warning btn--text-only">Warning</a>
-                    <a class="btn btn--alert btn--text-only">Alert</a>
-                    <a class="btn btn--highlight btn--text-only">Highlight</a>
-                    <a class="btn btn--sd-green btn--text-only">Sd-green</a>
-                </pre>
-            </div>
-        </div>
-    </div>
-    <h3 class="docs-page__h3">Disabled</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">
-                <div class="docs-page__content-row">                                    
-                    <a class="btn btn--disabled">Default</a>
-                    <a class="btn btn--primary btn--disabled">Primary</a>                                   
-                    <a class="btn btn--success btn--disabled">Success</a>
-                    <a class="btn btn--warning btn--disabled">Warning</a>
-                    <a class="btn btn--alert btn--disabled">Alert</a>
-                    <a class="btn btn--highlight btn--disabled">Highlight</a>
-                    <a class="btn btn--sd-green btn--disabled">Sd-green</a>
-
-                    <a class="btn btn--hollow btn--disabled">Default</a>
-                    <a class="btn btn--hollow btn--primary btn--disabled">Primary</a>                                   
-                    <a class="btn btn--hollow btn--success btn--disabled">Success</a>
-                    <a class="btn btn--hollow btn--warning btn--disabled">Warning</a>
-                    <a class="btn btn--hollow btn--alert btn--disabled">Alert</a>
-                    <a class="btn btn--hollow btn--highlight btn--disabled">Highlight</a>
-                    <a class="btn btn--hollow btn--sd-green btn--disabled">Sd-green</a>
-                                        
-                    <a class="btn btn--text-only btn--disabled">Default</a>
-                    <a class="btn btn--primary btn--text-only btn--disabled">Primary</a>
-                    <a class="btn btn--success btn--text-only btn--disabled">Success</a>
-                    <a class="btn btn--warning btn--text-only btn--disabled">Warning</a>
-                    <a class="btn btn--alert btn--text-only btn--disabled">Alert</a> 
-                    <a class="btn btn--highlight btn--text-only btn--disabled">Highlight</a>
-                    <a class="btn btn--sd-green btn--text-only btn--disabled">Sd-green</a>
-                </div>                              
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <a class="btn btn--disabled">Default</a>
-                    <a class="btn btn--primary btn--disabled">Primary</a>
-                    <a class="btn btn--success btn--disabled">Success</a>
-                    <a class="btn btn--warning btn--disabled">Warning</a>
-                    <a class="btn btn--alert btn--disabled">Alert</a>
-                    <a class="btn btn--highlight btn--disabled">Highlight</a>
-                    <a class="btn btn--hollow btn--disabled">Default</a>
-                    <a class="btn btn--hollow btn--primary btn--disabled">Primary</a>
-                    <a class="btn btn--hollow btn--success btn--disabled">Success</a>
-                    <a class="btn btn--hollow btn--warning btn--disabled">Warning</a>
-                    <a class="btn btn--hollow btn--alert btn--disabled">Alert</a>
-                    <a class="btn btn--hollow btn--highlight btn--disabled">Highlight</a>
-                </pre>
-            </div>
-        </div>
-    </div>
-    <h3 class="docs-page__h3">Buttons with icon font and text</h3>
-    <p class="docs-page__paragraph ng-scope">Buttons can be combined with the the icon font. No extra modifiers are needed, just adding any of the available classes from the Icon font to an <code>&lt;i&gt;</code> tag placed before the button text.</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">// Default size</p>
-                <div class="docs-page__content-row">                                    
-                    <a class="btn"><i class="icon-info-sign"></i>Default</a>
-                    <a class="btn btn--primary"><i class="icon-plus-sign"></i>Primary</a>                                   
-                    <a class="btn btn--success"><i class="icon-ok"></i>Success</a>
-                    <a class="btn btn--alert"><i class="icon-warning-sign"></i>Alert</a>
-
-                    <a class="btn btn--hollow"><i class="icon-info-sign"></i>Default</a>
-                    <a class="btn btn--hollow btn--primary"><i class="icon-plus-sign"></i>Primary</a>                                   
-                    <a class="btn btn--hollow btn--success"><i class="icon-ok"></i>Success</a>
-                    <a class="btn btn--hollow btn--warning"><i class="icon-exclamation-sign"></i>Warning</a>
-
-                    <a class="btn btn--disabled"><i class="icon-info-sign"></i>Default</a>
-                    <a class="btn btn--hollow btn--primary btn--disabled"><i class="icon-plus-sign"></i>Primary</a> 
-                </div>
-                <p class="docs-page__paragraph">// Large size</p>
-                <div class="docs-page__content-row">                                    
-                    <a class="btn btn--large"><i class="icon-info-sign"></i>Default</a>
-                    <a class="btn btn--primary btn--large"><i class="icon-plus-sign"></i>Primary</a>                                   
-                    <a class="btn btn--success btn--large"><i class="icon-ok"></i>Success</a>
-
-                    <a class="btn btn--hollow btn--large"><i class="icon-info-sign"></i>Default</a>
-                    <a class="btn btn--hollow btn--primary btn--large"><i class="icon-plus-sign"></i>Primary</a>                                   
-                </div>
-                <p class="docs-page__paragraph">// Small size</p>
-                <div class="docs-page__content-row">                                    
-                    <a class="btn btn--small"><i class="icon-info-sign"></i>Default</a>
-                    <a class="btn btn--primary btn--small"><i class="icon-plus-sign"></i>Primary</a>                                   
-                </div>                          
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <!--Default size buttons with icons   -->
-                    <a class="btn"><i class="icon-info-sign"></i>Default</a>
-                    <a class="btn btn--primary"><i class="icon-plus-sign"></i>Primary</a>                                   
-                    <a class="btn btn--success"><i class="icon-ok"></i>Success</a>
-                    <a class="btn btn--alert"><i class="icon-warning-sign"></i>Alert</a>
-                    <a class="btn btn--hollow"><i class="icon-info-sign"></i>Default</a>
-                    <a class="btn btn--hollow btn--primary"><i class="icon-plus-sign"></i>Primary</a>                                   
-                    <a class="btn btn--hollow btn--success"><i class="icon-ok"></i>Success</a>
-                    <a class="btn btn--hollow btn--warning"><i class="icon-exclamation-sign"></i>Warning</a>
-                    <a class="btn btn--disabled"><i class="icon-info-sign"></i>Default</a>
-                    <a class="btn btn--hollow btn--primary btn--disabled"><i class="icon-plus-sign"></i>Primary</a> 
-                    <!--Large size buttons with icons-->
-                    <a class="btn btn--large"><i class="icon-info-sign"></i>Default</a>
-                    <a class="btn btn--primary btn--large"><i class="icon-plus-sign"></i>Primary</a>                                   
-                    <a class="btn btn--success btn--large"><i class="icon-ok"></i>Success</a>
-                    <a class="btn btn--hollow btn--large"><i class="icon-info-sign"></i>Default</a>
-                    <a class="btn btn--hollow btn--primary btn--large"><i class="icon-plus-sign"></i>Primary</a>                                   
-                </pre>
-            </div>
-        </div>
-    </div>
-
-    <h3 class="docs-page__h3">Buttons with icon font only</h3>
-    <p class="docs-page__paragraph ng-scope">For buttons without any text, only an icon, the modifier <code>btn--icon-only</code> is needed to ajust the padding and width of the button.</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">// Default</p>
-                <div class="docs-page__content-row">                                    
-                    <a class="btn btn--icon-only"><i class="icon-info-sign"></i></a>
-                    <a class="btn btn--primary btn--icon-only"><i class="icon-plus-sign"></i></a>                                   
-                    <a class="btn btn--success btn--icon-only btn--hollow"><i class="icon-ok"></i></a>                                
-                </div> 
-                <p class="docs-page__paragraph">// Large</p>
-                <div class="docs-page__content-row">                                    
-                    <a class="btn btn--warning btn--large btn--icon-only"><i class="icon-exclamation-sign"></i></a>
-                    <a class="btn btn--primary btn--icon-only btn--large btn--hollow"><i class="icon-plus-sign"></i></a>                                   
-                    <a class="btn btn--highlight btn--icon-only btn--large"><i class="icon-bell"></i></a>                                
-                </div>
-                <p class="docs-page__paragraph">// Small</p>
-                <div class="docs-page__content-row">                                    
-                    <a class="btn btn--alert btn--small btn--icon-only btn--hollow"><i class="icon-kill"></i></a>
-                    <a class="btn btn--icon-only btn--small"><i class="icon-calendar"></i></a>                                   
-                    <a class="btn btn--primary btn--icon-only btn--small btn--hollow"><i class="icon-refresh"></i></a>                                
-                </div>
-
-                <p class="docs-page__paragraph">// Circle default</p>
-                <div class="docs-page__content-row">                                    
-                    <a class="btn btn--icon-only-circle"><i class="icon-info-sign"></i></a>
-                    <a class="btn btn--primary btn--icon-only-circle"><i class="icon-plus-large"></i></a>                                   
-                    <a class="btn btn--sd-green btn--icon-only-circle btn--hollow"><i class="icon-ok"></i></a>                                
-                </div>
-                <p class="docs-page__paragraph">// Circle large</p>
-                <div class="docs-page__content-row">                                    
-                    <a class="btn btn--warning btn--large btn--icon-only-circle"><i class="icon-exclamation-sign"></i></a>
-                    <a class="btn btn--primary btn--icon-only-circle btn--large btn--hollow"><i class="icon-plus-large"></i></a>                                   
-                    <a class="btn btn--highlight btn--icon-only-circle btn--large sd-shadow--z4"><i class="icon-bell"></i></a>                                
-                </div>
-                <p class="docs-page__paragraph">// Circle small</p>
-                <div class="docs-page__content-row">                                    
-                    <a class="btn btn--alert btn--small btn--icon-only-circle"><i class="icon-close-small"></i></a>
-                    <a class="btn btn--primary btn--icon-only-circle btn--small"><i class="icon-plus-large"></i></a>                                   
-                    <a class="btn btn--sd-green btn--icon-only-circle btn--small"><i class="icon-star"></i></a>                                
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <!--Default   -->
-                    <a class="btn btn--icon-only"><i class="icon-info-sign"></i></a>
-                    <a class="btn btn--primary btn--icon-only"><i class="icon-plus-sign"></i></a>
-                    <a class="btn btn--success btn--icon-only btn--hollow"><i class="icon-ok"></i></a>
-                    ...
-                    <!--Large-->
-                    <a class="btn btn--warning btn--large btn--icon-only"><i class="icon-exclamation-sign"></i></a>
-                    <a class="btn btn--primary btn--icon-only btn--large btn--hollow"><i class="icon-plus-sign"></i></a>
-                    <a class="btn btn--highlight btn--icon-only btn--large"><i class="icon-bell"></i></a>
-                    ...
-                    <!--Small-->
-                    <a class="btn btn--alert btn--small btn--icon-only btn--hollow"><i class="icon-kill"></i></a>
-                    <a class="btn btn--icon-only btn--small"><i class="icon-calendar"></i></a>
-                    <a class="btn btn--primary btn--icon-only btn--small btn--hollow"><i class="icon-refresh"></i></a>  
-                    ...
-                    <!--Circle default-->
-                    <a class="btn btn--icon-only-circle"><i class="icon-info-sign"></i></a>
-                    <a class="btn btn--primary btn--icon-only-circle"><i class="icon-plus-large"></i></a>
-                    <a class="btn btn--sd-green btn--icon-only-circle btn--hollow"><i class="icon-ok"></i></a>
-                    ...
-                    <!--Circle large-->
-                    <a class="btn btn--warning btn--large btn--icon-only-circle"><i class="icon-exclamation-sign"></i></a>
-                    <a class="btn btn--primary btn--icon-only-circle btn--large btn--hollow"><i class="icon-plus-large"></i></a>
-                    <a class="btn btn--highlight btn--icon-only-circle btn--large sd-shadow--z4"><i class="icon-bell"></i></a>
-                    ...
-                    <!--Circle small-->
-                    <a class="btn btn--alert btn--small btn--icon-only-circle"><i class="icon-close-small"></i></a>
-                    <a class="btn btn--primary btn--icon-only-circle btn--small"><i class="icon-plus-large"></i></a>
-                    <a class="btn btn--sd-green btn--icon-only-circle btn--small"><i class="icon-star"></i></a>
-                    ...
-                </pre>
-            </div>
-        </div>
-    </div>
-
-    <h3 class="docs-page__h3">SD create button</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 clearfix">
-                <div class="subnav subnav--darker">
-                    <h3 class="subnav__page-title">Subnav title</h3>
-                    <div class="dropdown dropdown--align-right" dropdown>
-                        <button class="navbtn dropdown sd-create-btn" dropdown__toggle>
-                            <i class="icon-plus-large"></i>
-                            <span class="circle"></span>
-                        </button>   
-                        <ul class="dropdown__menu">
-                            <li>
-                                <div class="dropdown__menu-label">Actions</div>
-                            </li>
-                            <li class="dropdown__menu-divider"></li>
-                            <li><button>Action 1</button></li>
-                            <li><button>Action 2</button></li>
-                            <li><button>Action 3</button></li>
-                            <li class="dropdown__menu-divider"></li>
-                            <li>
-                                <div class="dropdown" dropdown>
-                                    <button class="dropdown__toggle"><i class="icon-star"></i>Second level actions</button>
-                                    <ul class="dropdown__menu dropdown__menu--submenu-left">
-                                        <li><a href="">Action 4</a></li>
-                                        <li><a href="">Action 5</a></li>
-                                        <li><a href="">Action 6</a></li>
-                                        <li><a href="">Action 7</a></li>
-                                    </ul>
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <button class="navbtn dropdown sd-create-btn" dropdown__toggle>
-                        <i class="icon-plus-large"></i>
-                        <span class="circle"></span>
-                    </button>
-                </pre>
-            </div>
-        </div>
-    </div>
-
-    <h3 class="docs-page__h3">Dark UI</h3>
-    <p class="docs-page__paragraph ng-scope">To have appropriate button colors on dark background, just add class <code>btn--ui-dark</code> to regular markup.</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">// Default style</p>
-                <div class="docs-page__content-row docs-page__content-row--ui-dark">
-                    <a class="btn btn--ui-dark">Default</a>
-                    <a class="btn btn--primary btn--ui-dark">Primary</a>
-                    <a class="btn btn--success btn--ui-dark">Success</a>
-                    <a class="btn btn--warning btn--ui-dark">Warning</a>
-                    <a class="btn btn--alert btn--ui-dark">Alert</a>
-                    <a class="btn btn--highlight btn--ui-dark">Highlight</a>
-                    <a class="btn btn--sd-green btn--ui-dark">Sd-green</a>
-                </div>
-                <p class="docs-page__paragraph">// Hollow style</p>
-                <div class="docs-page__content-row docs-page__content-row--ui-dark">
-                    <a class="btn btn--hollow btn--ui-dark">Default</a>
-                    <a class="btn btn--primary btn--hollow btn--ui-dark">Primary</a>
-                    <a class="btn btn--success btn--hollow btn--ui-dark">Success</a>
-                    <a class="btn btn--warning btn--hollow btn--ui-dark">Warning</a>
-                    <a class="btn btn--alert btn--hollow btn--ui-dark">Alert</a> 
-                    <a class="btn btn--highlight btn--hollow btn--ui-dark">Highlight</a>
-                    <a class="btn btn--sd-green btn--hollow btn--ui-dark">Sd-green</a>
-                </div>
-                <p class="docs-page__paragraph">// Text only style</p>
-                <div class="docs-page__content-row docs-page__content-row--ui-dark">
-                    <a class="btn btn--text-only btn--ui-dark">Default</a>
-                    <a class="btn btn--primary btn--text-only btn--ui-dark">Primary</a>
-                    <a class="btn btn--success btn--text-only btn--ui-dark">Success</a>
-                    <a class="btn btn--warning btn--text-only btn--ui-dark">Warning</a>
-                    <a class="btn btn--alert btn--text-only btn--ui-dark">Alert</a> 
-                    <a class="btn btn--highlight btn--text-only btn--ui-dark">Highlight</a>
-                    <a class="btn btn--sd-green btn--text-only btn--ui-dark">Sd-green</a>
-                </div>
-                <p class="docs-page__paragraph">// Disabled</p>
-                <div class="docs-page__content-row docs-page__content-row--ui-dark">
-                    <a class="btn btn--disabled btn--ui-dark">Default</a>
-                    <a class="btn btn--primary btn--disabled btn--ui-dark">Primary</a>
-                    <a class="btn btn--success btn--disabled btn--ui-dark">Success</a>
-                    <a class="btn btn--warning btn--disabled btn--ui-dark">Warning</a>
-                    <a class="btn btn--alert btn--disabled btn--ui-dark">Alert</a>
-                    <a class="btn btn--highlight btn--disabled btn--ui-dark">Highlight</a>
-                    <a class="btn btn--sd-green btn--disabled btn--ui-dark">Sd-green</a>
-
-                    <a class="btn btn--hollow btn--disabled btn--ui-dark">Default</a>
-                    <a class="btn btn--hollow btn--primary btn--disabled btn--ui-dark">Primary</a>
-                    <a class="btn btn--hollow btn--success btn--disabled btn--ui-dark">Success</a>
-                    <a class="btn btn--hollow btn--warning btn--disabled btn--ui-dark">Warning</a>
-                    <a class="btn btn--hollow btn--alert btn--disabled btn--ui-dark">Alert</a>
-                    <a class="btn btn--hollow btn--highlight btn--disabled btn--ui-dark">Highlight</a>
-                    <a class="btn btn--hollow btn--sd-green btn--disabled btn--ui-dark">Sd-green</a>
-
-                    <a class="btn btn--text-only btn--disabled btn--ui-dark">Default</a>
-                    <a class="btn btn--primary btn--text-only btn--disabled btn--ui-dark">Primary</a>
-                    <a class="btn btn--success btn--text-only btn--disabled btn--ui-dark">Success</a>
-                    <a class="btn btn--warning btn--text-only btn--disabled btn--ui-dark">Warning</a>
-                    <a class="btn btn--alert btn--text-only btn--disabled btn--ui-dark">Alert</a> 
-                    <a class="btn btn--highlight btn--text-only btn--disabled btn--ui-dark">Highlight</a>
-                    <a class="btn btn--sd-green btn--text-only btn--disabled btn--ui-dark">Sd-green</a>
-                </div>          
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <!-- Default style -->
-                    <a class="btn btn--ui-dark">Default</a>
-                    <a class="btn btn--primary btn--ui-dark">Primary</a>
-                    <a class="btn btn--success btn--ui-dark">Success</a>
-                    ...
-
-
-                    <!-- Hollow style -->
-                    <a class="btn btn--hollow btn--ui-dark">Default</a>
-                    <a class="btn btn--primary btn--hollow btn--ui-dark">Primary</a>
-                    <a class="btn btn--success btn--hollow btn--ui-dark">Success</a>
-                    ...
-
-
-                    <!-- Text only style -->
-                    <a class="btn btn--text-only btn--ui-dark">Default</a>
-                    <a class="btn btn--primary btn--text-only btn--ui-dark">Primary</a>
-                    <a class="btn btn--success btn--text-only btn--ui-dark">Success</a>
-                    ...
-
-
-                    <!-- Disabled -->
-                    <a class="btn btn--disabled btn--ui-dark">Default</a>
-                    <a class="btn btn--primary btn--disabled btn--ui-dark">Primary</a>
-                    <a class="btn btn--success btn--disabled btn--ui-dark">Success</a>
-                    ...
-
-
-                    <a class="btn btn--hollow btn--disabled btn--ui-dark">Default</a>
-                    <a class="btn btn--hollow btn--primary btn--disabled btn--ui-dark">Primary</a>
-                    <a class="btn btn--hollow btn--success btn--disabled btn--ui-dark">Success</a>
-                    ...
-
-
-                    <a class="btn btn--text-only btn--disabled btn--ui-dark">Default</a>
-                    <a class="btn btn--primary btn--text-only btn--disabled btn--ui-dark">Primary</a>
-                    <a class="btn btn--success btn--text-only btn--disabled btn--ui-dark">Success</a>
-                    ...
-                </pre>
-            </div>
-        </div>
-    </div>
-
-    <h3 class="docs-page__h3">Plain icon button</h3>
-    <p class="docs-page__paragraph ng-scope">
-        Plain icon buttons don't use the base <code>.btn</code> class like other buttons, instead a separate class ( <code>.icn-btn</code> ) 
-        is used to simpify the implementation and make it more flexible. It is intended mostly for actions on list items, toolbars etc. 
-        The font color is set to inherit so it will take it from the nearest parent where the color is defined. Tooltips are also suppored 
-        (see the Tooltip section for implementation details).  
-    </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 clearfix">
-                <a class="icn-btn" sd-tooltip="I support tooltips!"><i class="icon-close-small"></i></a>
-                <a class="icn-btn"><i class="icon-plus-large"></i></a>
-                <a class="icn-btn"><i class="icon-dots-vertical"></i></a>
-                <button class="icn-btn"><i class="icon-trash"></i></button>
-                <button class="icn-btn" sd-tooltip="My tooltip is on the right." flow="right"><i class="icon-pencil"></i></button>
-                <p class="docs-page__paragraph">// Dark UI</p>  
-                <div class="docs-page__content-row docs-page__content-row--ui-dark" style="color:white;">
-                    <a class="icn-btn" sd-tooltip="I support tooltips!"><i class="icon-close-small"></i></a>
-                    <a class="icn-btn"><i class="icon-plus-large"></i></a>
-                    <a class="icn-btn"><i class="icon-dots-vertical"></i></a>
-                    <button class="icn-btn"><i class="icon-trash"></i></button>
-                    <button class="icn-btn" sd-tooltip="My tooltip is on the right." flow="right"><i class="icon-pencil"></i></button>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-                    <a class="icn-btn" sd-tooltip="I support tooltips!"><i class="icon-close-small"></i></a>
-                    <a class="icn-btn"><i class="icon-plus-large"></i></a>
-                    <a class="icn-btn"><i class="icon-dots-vertical"></i></a>
-                    <button class="icn-btn"><i class="icon-trash"></i></button>
-                    <button class="icn-btn" sd-tooltip="My tooltip is on the right." flow="right"><i class="icon-pencil"></i></button>
-                </pre>
-            </div>
-        </div>
-    </div>
-</section>
-<section class="docs-page__container">
-    <h2 class="docs-page__h2">Button groups</h2>
-    <div class="sd-alert sd-alert--hollow sd-alert--primary sd-alert--small">
-        The dashed border and padding around the button groups are only added for presentational purposes and is not part of the component.
-    </div>
-    <h3 class="docs-page__h3">Horizontal</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 clearfix">
-
-                <p class="docs-page__paragraph">// Left</p>
-                <div class="form__row form__row--flex docs-page__test-helper-2">
-                    <div class="button-group button-group--left docs-page__test-helper">
-                        <a class="btn btn--hollow">one</a>
-                        <a class="btn btn--hollow">two</a>
-                    </div>
-                </div>
-
-                <p class="docs-page__paragraph">// Right</p>
-                <div class="form__row form__row--flex docs-page__test-helper-2">
-                    <div class="button-group button-group--right docs-page__test-helper">
-                        <a class="btn btn--hollow">Cancel</a>
-                        <a class="btn btn--primary">Save</a>
-                    </div>
-                </div>
-
-                <p class="docs-page__paragraph">// Center</p>
-                <div class="form__row form__row--flex docs-page__test-helper-2">
-                    <div class="button-group button-group--center docs-page__test-helper">
-                        <a class="btn btn--hollow">one</a>
-                        <a class="btn btn--hollow">two</a>
-                    </div>
-                </div>
-
-                <p class="docs-page__paragraph">// Left + Right</p>
-                <div class="form__row form__row--flex docs-page__test-helper-2">
-                    <div class="button-group button-group--left docs-page__test-helper">
-                        <a class="btn btn--hollow">one</a>
-                        <a class="btn btn--hollow">two</a>
-                    </div>
-            
-                    <div class="button-group button-group--right docs-page__test-helper">
-                        <a class="btn btn--hollow">Cancel</a>
-                        <a class="btn btn--primary">Save</a>
-                    </div>
-                </div>
-
-                <p class="docs-page__paragraph">// Left + Center + Right</p>
-                <div class="form__row form__row--flex docs-page__test-helper-2">
-                    <div class="button-group button-group--left docs-page__test-helper">
-                        <a class="btn btn--hollow">one</a>
-                        <a class="btn btn--hollow">two</a>
-                    </div>
-            
-                    <div class="button-group button-group--center docs-page__test-helper">
-                        <a class="btn btn--hollow">three</a>
-                        <a class="btn btn--hollow">four</a>
-                    </div>
-            
-                    <div class="button-group button-group--right docs-page__test-helper">
-                        <a class="btn btn--hollow">Cancel</a>
-                        <a class="btn btn--primary">Save</a>
-                    </div>
-                </div>
-            </div>
-            <div class="docs-page__code-markup">
-                <pre class="prettyprint lang-html linenums">
-
-                </pre>
-            </div>
-        </div>
-    </div>
-    <h3 class="docs-page__h3">Vertical</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 clearfix">
-    
-                    <!-- <p class="docs-page__paragraph">// Left</p> -->
-                    <div class="form__row form__row--flex docs-page__test-helper-2">
-                        <div class="button-group button-group--vertical docs-page__test-helper">
-                            <a class="btn btn--hollow">one</a>
-                            <a class="btn btn--hollow">two</a>
-                        </div>
-                    </div>
-                </div>
-                <div class="docs-page__code-markup">
-                    <pre class="prettyprint lang-html linenums">
-    
-                    </pre>
-                </div>
-            </div>
-        </div>
-</section>