Sterrk Admin Interface

List of contents

Menu
Panel
Sidebar
Table
Modal
Tooltip
Notifier
Form
Helper classes

Option 1: Menu horizontal

Options
Class	`nav.sai-menu.horizontal`	Defines horizontal SAI Menu component
Elements	`div.menu-bar`	Bar with menu items (1)
	`div.logo`	Div which holds logo in .menu-bar (1)
	`div.menu-items`	Div which holds menu items (ul) in .menu-bar (1)
	`div.account`	Div which holds accountinfo in .menu-bar (1)
	`div.menu-bar.submenu`	Bar with submenu items belonging to menu-bar. Extends .menu-bar elements and behaviour. (0...*)
Options	-	No further options

Code example

Code example
<nav class="sai-menu horizontal"> <div class="menu-bar"> <div class="logo"> <img src="/sai-assets/images/logo.png" /> </div> <div class="menu-items"> <ul> <li class="active"> <a href="#item1" data-submenu-trigger="item1">Item 1</a> </li> <li> <a href="#item2">Item 2</a> </li> </ul> </div> <div class="account"> <div class="account-icon" style="background-image: url('/sai-assets/images/account-icon.png');"></div> </div> </div> <div class="menu-bar submenu" data-submenu="item1"> <div class="menu-items"> <ul> <li class="group"> <span class="groupname">Item 1 Group 1</span> <ul> <li> <a href="#subitem1">Subitem 1</a> </li> <li class="active"> <a href="#subitem2">Subitem 2</a> </li> </ul> </li> <li class="group"> <span class="groupname">Item 1 Group 2</span> <ul> <li> <a href="#subitem3">Subitem 3</a> </li> </ul> </li> </ul> </div> </div> </nav>

<nav class="sai-menu horizontal">
    <div class="menu-bar">
        <div class="logo">
            <img src="/sai-assets/images/logo.png" />
        </div>
        <div class="menu-items">
            <ul>
                <li class="active">
                    <a href="#item1" data-submenu-trigger="item1">Item 1</a>
                </li>
                <li>
                    <a href="#item2">Item 2</a>
                </li>
            </ul>
        </div>
        <div class="account">
            <div class="account-icon" style="background-image: url('/sai-assets/images/account-icon.png');"></div>
        </div>
    </div>
    <div class="menu-bar submenu" data-submenu="item1">
        <div class="menu-items">
            <ul>
                <li class="group">
                    <span class="groupname">Item 1 Group 1</span>
                    <ul>
                        <li>
                            <a href="#subitem1">Subitem 1</a>
                        </li>
                        <li class="active">
                            <a href="#subitem2">Subitem 2</a>
                        </li>
                    </ul>
                </li>
                <li class="group">
                    <span class="groupname">Item 1 Group 2</span>
                    <ul>
                        <li>
                            <a href="#subitem3">Subitem 3</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

Screenshot

Option 2: Menu vertical

Options
Class	`nav.sai-menu.vertical`	Defines vertical SAI Menu component
Elements	`div.logo`	Div which holds logo (1)
	`div.menu-items`	Div which holds menu items (ul) (1)
	`div.account`	Div which holds accountinfo (1)
Options	-	No further options

Code example

Code example
<nav class="sai-menu vertical"> <div class="logo"> <img src="/sai-assets/images/logo.png" /> </div> <div class="menu-items"> <ul> <li class="active"> <a href="#item1">Item 1</a> <ul class="group" data-group-title="Divider 1"> <li> <a>Subitem 1</a> </li> <li> <a>Subitem 2</a> </li> <li> <a>Subitem 3</a> </li> </ul> <ul class="group" data-group-title="Divider 2"> <li> <a>Subitem 1</a> </li> <li> <a>Subitem 2</a> </li> <li> <a>Subitem 3</a> </li> </ul> </li> <li> <a href="#item2">Item 2</a> </li> </ul> </div> <div class="account"> <div class="account-icon" style="background-image: url('/sai-assets/images/account-icon.png');"></div> </div> </nav>

<nav class="sai-menu vertical">
    <div class="logo">
        <img src="/sai-assets/images/logo.png" />
    </div>
    <div class="menu-items">
        <ul>
            <li class="active">
                <a href="#item1">Item 1</a>
                <ul class="group" data-group-title="Divider 1">
                    <li>
                        <a>Subitem 1</a>
                    </li>
                    <li>
                        <a>Subitem 2</a>
                    </li>
                    <li>
                        <a>Subitem 3</a>
                    </li>
                </ul>
                <ul class="group" data-group-title="Divider 2">
                    <li>
                        <a>Subitem 1</a>
                    </li>
                    <li>
                        <a>Subitem 2</a>
                    </li>
                    <li>
                        <a>Subitem 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#item2">Item 2</a>
            </li>
        </ul>
    </div>
    <div class="account">
        <div class="account-icon" style="background-image: url('/sai-assets/images/account-icon.png');"></div>
    </div>
</nav>

Screenshot

Options
Class	`div.sai-panel`	Defines SAI Panel component
Elements	`div.header`	Panel header (1)
	`ul.buttons`	List with buttons in .header (1...*)
	`li.trigger`	Button with trigger icon in .buttons list (1)
	`li.close`	Button with close icon in .buttons list (0...*)
	`li.plus`	Button with plus icon in .buttons list (0...*)
	`li.move`	Button with move icon in .buttons list (0...*)
	`div.content`	Panel content (1)
	`div.footer`	Panel footer (0...1)
Options	`div.sai-panel.collapsed`	Will collapse panel on page load

Code example

Code example
`<div class="sai-panel"> <div class="header"> <span class="title">Header</span> <ul class="buttons sai-right"> <li class="close"></li> <li class="plus"></li> <li class="move"></li> <li class="trigger"></li> </ul> </div> <div class="content"> Content </div> <div class="footer"> Footer </div> </div>`

<div class="sai-panel">
    <div class="header">
        <span class="title">Header</span>
        <ul class="buttons sai-right">
            <li class="close"></li>
            <li class="plus"></li>
            <li class="move"></li>
            <li class="trigger"></li>
        </ul>
    </div>
    <div class="content">
        Content
    </div>
    <div class="footer">
        Footer
    </div>
</div>

Screenshot

Options
Class	`div.sai-sidebar`	Defines SAI Sidebar component
Elements	`div.header`	Sidebar header (1)
	`div.content`	Sidebar content (1)
	`div.footer`	Sidebar footer (0...1)
Options	`div.sai-sidebar.left`	Sidebar is placed at left of screen
	`div.sai-sidebar.right`	Sidebar is placed at right of screen
	`div.sai-sidebar.collapsed`	Will collapse sidebar on page load
	`div.sai-sidebar.push`	Will push content to the side when sidebar opens instead of letting sidebar hover over content

Code example

Code example
`<div class="sai-sidebar right collapsed push"> <div class="header"> <span class="trigger"></span> <span class="title">Sidebar</span> </div> <div class="content"> Content </div> <div class="footer"> Footer </div> </div>`

<div class="sai-sidebar right collapsed push">
    <div class="header">
        <span class="trigger"></span>
        <span class="title">Sidebar</span>
    </div>
    <div class="content">
        Content
    </div>
    <div class="footer">
        Footer
    </div>
</div>

Screenshot

Options
Class	`table.sai-table`	Defines SAI Table component
Elements	`thead`	Table header (1)
	`tbody`	Table body (1)
	`tfoot`	Table footer (1)
Options	`table.sai-table.dataTable`	Turns table into a DataTable (reference)
	`td span.highlight`	Adds highlight color to text
	`td span.background`	Adds background color to span
	`table.no-borders`	Removes all borders from table
	`table.no-vertical-borders`	Removes all vertical borders (left/right) from table
	`table.no-horizontal-borders`	Removes all horizontal borders (top/bottom) from table

Code example

Code example
`<table class="sai-table"> <thead> <tr> <th></th> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> </tr> </thead> <tbody> <tr> <td>Row 1</td> <td> <span>Default</span> </td> <td> <span class="highlight">Highlight</span> </td> <td> <span class="highlight background">Highlight + Background</span> </td> </tr> </tbody> <tfoot> <tr> <td>Footer</td> <td> <span>1</span> </td> <td> <span>2</span> </td> <td> <span>3</span> </td> </tr> </tfoot> </table>`

<table class="sai-table">
    <thead>
        <tr>
            <th></th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>
                <span>Default</span>
            </td>
            <td>
                <span class="highlight">Highlight</span>
            </td>
            <td>
                <span class="highlight background">Highlight + Background</span>
            </td>

        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer</td>
            <td>
                <span>1</span>
            </td>
            <td>
                <span>2</span>
            </td>
            <td>
                <span>3</span>
            </td>
        </tr>
    </tfoot>
</table>

Screenshot

Options
Class	`div.sai-modal`	Defines SAI Modal component
Elements	-	No required elements
Options	-	No further options

Code example

Code example
`<a data-open="modal1">Open modal</a> <div class="sai-modal" id="modal1"> <h3>Modal Pop-up</h3> <p>Content</p> <button class="sai primary">OK</button> <button class="sai primary hollow" data-close="">CANCEL</button> </div>`

<a data-open="modal1">Open modal</a>

<div class="sai-modal" id="modal1">
    <h3>Modal Pop-up</h3>
    <p>Content</p>

    <button class="sai primary">OK</button>
    <button class="sai primary hollow" data-close="">CANCEL</button>
</div>

Screenshot

Options
Class	`*.sai-tooltip`	Defines SAI Tooltip component
Elements	`.sai-tooltip[title]`	Content to display in the tooltip. HTML-code is allowed. (1)
Options	-	No further options

Code example
`<span class="sai-tooltip" title="Tooltip content" >Tooltip</span>`

Screenshot

Options
Class	`*.sai-notifier`	Defines SAI Notifier component
Elements	-	No further elements
Options	-	No further options

Code example
`Notification <span class="sai-notifier alert">10</span>`

Screenshot

Elements
Class	Description	CSS
`*.sai-full-width`	Sets the element to full width of parent	`width: 100%;`
`*.sai-no-margin`	Removes margin	`margin: 0;`
`*.sai-no-padding`	Removes padding	`padding: 0;`
`*.sai-left`	Floats element to left	`float: left;`
`*.sai-right`	Floats element to right	`float: right;`
`*.sai-center-content`	Makes content of element centered in screen	`display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;`
Background colors
Class	Description	CSS
`*.sai-bg-primary`	Sets background color to #179AEE	`background-color: #179AEE;`
`*.sai-bg-secondary`	Sets background color to #0368A8	`background-color: #0368A8;`
`*.sai-bg-alert`	Sets background color to #F94D4D	`background-color: #F94D4D;`
`*.sai-bg-warning`	Sets background color to #ffae00	`background-color: #ffae00;`
`*.sai-bg-success`	Sets background color to #3adb76	`background-color: #3adb76;`
`*.sai-bg-very-dark-gray`	Sets background color to #727272	`background-color: #727272;`
`*.sai-bg-dark-gray`	Sets background color to #A2A2A2	`background-color: #A2A2A2;`
`*.sai-bg-medium-gray`	Sets background color to #D8D8D8	`background-color: #D8D8D8;`
`*.sai-bg-light-gray`	Sets background color to #F4F4F4	`background-color: #F4F4F4;`
`*.sai-bg-very-light-gray`	Sets background color to #FCFCFC	`background-color: #FCFCFC;`
`*.sai-bg-sterrk-yellow`	Sets background color to #FFC100	`background-color: #FFC100;`
`*.sai-bg-sterrk-blue`	Sets background color to #3A6A80	`background-color: #3A6A80;`
`*.sai-bg-sterrk-gray`	Sets background color to #385563	`background-color: #385563;`
`*.sai-bg-black`	Sets background color to #2E2E2E	`background-color: #2E2E2E;`
`*.sai-bg-white`	Sets background color to #FFFFFF	`background-color: #FFFFFF;`
Text colors
Class	Description	CSS
`*.sai-text-primary`	Sets text color to #179AEE	`color: #179AEE;`
`*.sai-text-secondary`	Sets text color to #0368A8	`color: #0368A8;`
`*.sai-text-alert`	Sets text color to #F94D4D	`color: #F94D4D;`
`*.sai-text-warning`	Sets text color to #ffae00	`color: #ffae00;`
`*.sai-text-success`	Sets text color to #3adb76	`color: #3adb76;`
`*.sai-text-very-dark-gray`	Sets text color to #727272	`color: #727272;`
`*.sai-text-dark-gray`	Sets text color to #A2A2A2	`color: #A2A2A2;`
`*.sai-text-medium-gray`	Sets text color to #D8D8D8	`color: #D8D8D8;`
`*.sai-text-light-gray`	Sets text color to #F4F4F4	`color: #F4F4F4;`
`*.sai-text-very-light-gray`	Sets text color to #FCFCFC	`color: #FCFCFC;`
`*.sai-text-sterrk-yellow`	Sets text color to #FFC100	`color: #FFC100;`
`*.sai-text-sterrk-blue`	Sets text color to #3A6A80	`color: #3A6A80;`
`*.sai-text-sterrk-gray`	Sets text color to #385563	`color: #385563;`
`*.sai-text-black`	Sets text color to #2E2E2E	`color: #2E2E2E;`
`*.sai-text-white`	Sets text color to #FFFFFF	`color: #FFFFFF;`