@csdsesystems/central-styles 0.1.0 → 1.0.2

package/sass/styleguide/_components-progressBars.scss

@@ -0,0 +1,82 @@
+/*doc
+---
+title: Progress bars
+name: progress
+category: Components
+---
+
+<p class="lead">Provide up-to-date feedback on the progress of a workflow or action
+with simple yet flexible progress bars.</p>
+
+```html_example
+<div class="progress">
+    <div class="progress-bar" role="progressbar" style="width: 10%">
+        <p class="text-center"><strong>10%</strong></p>
+    </div>
+</div>
+```
+
+##Variations of the progress bar
+```html_example
+<div class="progress">
+    <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 10%">
+        <p class="text-center"><strong>10%</strong></p>
+    </div>
+</div>
+<div class="progress">
+    <div class="progress-bar progress-bar-yellow" style="width: 20%">
+        <p class="text-center"><strong>10%</strong></p>
+    </div>
+</div>
+<div class="progress">
+    <div class="progress-bar progress-bar-danger" style="width: 30%">
+        <p class="text-center"><strong>10%</strong></p>
+    </div>
+</div>
+<div class="progress">
+    <div class="progress-bar progress-bar-purple" style="width: 40%">
+        <p class="text-center"><strong>10%</strong></p>
+    </div>
+</div>
+<div class="progress">
+    <div class="progress-bar progress-bar-pink" style="width: 50%">
+        <p class="text-center"><strong>10%</strong></p>
+    </div>
+</div>
+<div class="progress">
+    <div class="progress-bar progress-bar-info" style="width: 60%">
+        <p class="text-center"><strong>10%</strong></p>
+    </div>
+</div>
+<div class="progress">
+    <div class="progress-bar progress-bar-grey progress-bar-striped" style="width: 70%">
+        <p class="text-center"><strong>10%</strong></p>
+    </div>
+</div>
+```
+
+To display the smaller version of this progress bar,
+can use the <code>.progress-mini</code> modifier class in the parent
+<code>.progress</code> container.
+
+```html_example
+<div class="progress progress-mini">
+    <div class="progress-bar progress-bar-grey progress-bar-striped" style="width: 70%">
+        <p class="text-center"><strong>10%</strong></p>
+    </div>
+</div>
+```
+
+You can also stack these progress bars.
+<div class="progress progress-striped active">
+    <div style="width: 30%" class="progress-bar progress-bar-success">
+        <span class="sr-only">30% Complete (success)</span>
+    </div>
+    <div style="width: 20%" class="progress-bar progress-bar-warning">
+        <span class="sr-only">15% Complete (warning)</span>
+    </div>
+    <div style="width: 40%" class="progress-bar progress-bar-danger">
+        <span class="sr-only">40% Complete (danger)</span>
+    </div>
+</div>
+*/

package/sass/styleguide/_components-tables.scss

@@ -0,0 +1,115 @@
+/*doc
+---
+title: Tables
+name: tables
+category: Components
+---
+
+<p class="lead">Provide pagination links for Central with our multi-page pagination component.</p>
+
+```html_example
+<div class="form-group">
+    <table class="table history">
+        <tbody>
+            <tr>
+                <td class="p-l-none">
+                    <strong>Inspection</strong><br>
+                    <a>Work order #244</a><br>
+                </td>
+                <td>
+                    <span class="small text-muted">
+                        Result
+                    </span><br>
+                    <span class="text-green">
+                        <i class="fa fa-check"></i>
+                        Passed
+                    </span>
+                </td>
+                <td class="text-right">
+                    Andrea Thompson<br>
+                    <a><i class="fa fa-map-marker"></i>
+                        Lady Cilento Children's Hospital
+                    </a><br>
+                    2 Nov, 2015
+                </td>
+            </tr>
+            <tr>
+                <td class="p-l-none">
+                    <strong>Repair</strong><br>
+                    <a>Work order #213</a>
+                </td>
+                <td>
+                    <span class="small text-muted">
+                        Time taken
+                    </span><br>
+                    <i class="fa fa-clock-o"></i> 1hr 40mins
+                </td>
+                <td class="text-right">
+                    Clinton Henderson<br>
+                    <a><i class="fa fa-map-marker"></i>
+                    CSDS</a><br>
+                    21 Oct, 2015
+                </td>
+            </tr>
+            <tr>
+                <td class="p-l-none">
+                    <strong>Inspection</strong><br>
+                    <a>Work order #195</a>
+                </td>
+                <td>
+                    <span class="small text-muted">
+                        Result
+                    </span><br>
+                    <span class="text-danger">
+                        <i class="fa fa-flag"></i>
+                        Flagged
+                    </span>
+                </td>
+                <td class="text-right">
+                    Andrea Thompson<br>
+                    <a><i class="fa fa-map-marker"></i>
+                    Lady Cilento Children's Hospital
+                    </a><br>
+                    17 Oct, 2015
+                </td>
+            </tr>
+            <tr>
+                <td class="p-l-none">
+                    <strong>Service</strong><br>
+                    <a>Work order #188</a>
+                </td>
+                <td>
+                    <span class="small text-muted">Time taken</span><br>
+                    <i class="fa fa-clock-o"></i> 3hr 15mins
+                </td>
+                <td class="text-right">
+                    Daniel Host<br>
+                    <a><i class="fa fa-map-marker"></i> CSDS</a><br>
+                    8 Oct, 2015
+                </td>
+            </tr>
+            <tr>
+                <td class="p-l-none">
+                    <strong>Repair</strong><br>
+                    <a>Work order #185</a><br>
+                </td>
+                <td>
+                    <span class="small text-muted">
+                    Time taken
+                    </span><br>
+                    <i class="fa fa-clock-o"></i> 1hr 40mins
+                </td>
+                <td class="text-right">
+                    Clinton Henderson<br>
+                    <a>
+                        <i class="fa fa-map-marker"></i> CSDS
+                    </a><br>
+                    29 Sep, 2015
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+```
+
+*/

package/sass/styleguide/_components-widgets.scss

@@ -0,0 +1,105 @@
+/*doc
+---
+title: Widgets
+name: widgets
+category: Components
+---
+
+<p class="lead">A widget is basically a block with nice rounded corners.
+It is mostly used as a container for multi-line titles and multiple pieces of data
+    that are too long to be contained in an alert box.</p>
+
+Remember that their width depends on the <code>div</code> that contains them.
+
+Since a basic widget has a transparent background, you would most likely end up using
+one of our colour classes.
+
+```html_example
+<div class="widget">
+    This is a basic widget.
+</div>
+```
+
+```html_example
+<div class="widget style1 red-bg">
+    <h1>H1</h1>
+    <h2>H2</h2>
+    <h3>H3</h3>
+    <p>This is a sample paragraph</p>
+</div>
+```
+
+```html_example
+<div class="col-lg-10">
+    <div class="widget style2 navy-bg">
+        <h1>H1</h1>
+        <h2>H2</h2>
+        <h3>H3</h3>
+        <p>This is a sample paragraph</p>
+    </div>
+</div>
+```
+
+```html_example
+<div class="col-lg-8">
+    <div class="widget style3 green-bg">
+        <h1>H1</h1>
+        <h2>H2</h2>
+        <h3>H3</h3>
+        <p>This is a sample paragraph</p>
+    </div>
+</div>
+```
+
+```html_example
+<div class="col-lg-6">
+    <div class="widget style4 gray-bg">
+        <h1>H1</h1>
+        <h2>H2</h2>
+        <h3>H3</h3>
+        <p>This is a sample paragraph</p>
+    </div>
+</div>
+```
+
+```html_example
+<div class="col-lg-4">
+    <div class="widget mini-widget lighter-grey-bg">
+        <h1>H1</h1>
+        <h2>H2</h2>
+        <h3>H3</h3>
+        <p>This is a sample paragraph</p>
+    </div>
+</div>
+```
+
+A widget may also be formatted to look like a modal with a title bar and a text box.
+This can be achieved by splitting a widget to a <code>widget-head-color-box</code>
+and <code>widget-text-box</code>.
+
+```html_example
+<div class="widget-head-color-box navy-bg">
+    <h2 class="font-bold no-margins">
+        Widget title
+    </h2>
+</div>
+
+<div class="widget-text-box">
+    <div class="form-group">
+        <p>Text inside a widget.</p>
+    </div>
+</div>
+```
+
+You can also use a label/badge inside a widget.
+
+```html_example
+<div class="widget lighter-grey-bg style4 m-b-none clear">
+    <p>
+        Full body manikin
+        <label class="pull-right label label-primary">0</label>
+    </p>
+</div>
+```
+*/
+

package/sass/styleguide/_layout-asana.scss

@@ -0,0 +1,163 @@
+/*doc
+---
+title: 2-column
+name: 2column
+category: Layout
+---
+
+##Two-column layout
+Inspired by Asana's "workspace" layout, our base layout (currently used
+in the request, work order, and search results pages) follows the same.
+
+##Two-column variations
+
+###Item/Preview layout
+We have created this layout which consists of an item pane (appears full-width by default)
+and a preview pane (visibility of which is toggled by its corresponding item pane).
+
+```html_example
+<div class="list-container">
+    <div class="listing">
+        <div class="list-results">
+            <!-- List item -->
+            <div class="list-item">
+                <div class="list-row">
+                    <div class="list-key text-muted">
+                        11 Oct, 2015
+                    </div>
+                    <div class="list-summary">
+                        <span class="text-red">
+                        <i class="fa fa-star"></i> DRAFT </span>
+                    </div>
+                </div>
+                <div class="list-row-end">
+                    <span class="preview">
+                    <i class="fa fa-angle-double-right"></i>
+                    </span>
+                </div>
+            </div>
+            <!-- END List item -->
+
+            <!-- List item -->
+            <div class="list-item">
+                <div class="list-row">
+                    <div class="list-key text-muted">
+                        9 Jul, 2015
+                    </div>
+                    <div class="list-summary">
+                        <span class="text-red">
+                        <i class="fa fa-star"></i> DRAFT </span>
+                    </div>
+                </div>
+                <div class="list-row-end">
+                    <span class="preview">
+                    <i class="fa fa-angle-double-right"></i>
+                    </span>
+                </div>
+            </div>
+            <!-- END List item -->
+
+            <!-- List item -->
+            <div class="list-item">
+                <div class="list-row">
+                    <div class="list-key text-muted">
+                        9 Jul, 2015
+                    </div>
+                    <div class="list-summary">
+                        <span class="text-red">
+                        <i class="fa fa-star"></i> DRAFT </span>
+                    </div>
+                </div>
+                <div class="list-row-end">
+                    <span class="preview">
+                    <i class="fa fa-angle-double-right"></i>
+                    </span>
+                </div>
+            </div>
+            <!-- END List item -->
+
+            <!-- List item -->
+            <div class="list-item">
+                <div class="list-row">
+                    <div class="list-key text-muted">
+                        9 Jul, 2015
+                    </div>
+                    <div class="list-summary">
+                        <span class="text-red">
+                        <i class="fa fa-star"></i> DRAFT </span>
+                    </div>
+                </div>
+                <div class="list-row-end">
+                    <span class="preview">
+                    <i class="fa fa-angle-double-right"></i>
+                    </span>
+                </div>
+            </div>
+            <!-- END List item -->
+
+            <!-- List item -->
+            <div class="list-item">
+                <div class="list-row">
+                    <div class="list-key text-muted">
+                        9 Jul, 2015
+                    </div>
+                    <div class="list-summary">
+                        <span class="text-red">
+                        <i class="fa fa-star"></i> DRAFT </span>
+                    </div>
+                </div>
+                <div class="list-row-end">
+                    <span class="preview">
+                    <i class="fa fa-angle-double-right"></i>
+                    </span>
+                </div>
+            </div>
+            <!-- END List item -->
+
+
+        </div>
+    </div>
+    <!-- END listing -->
+
+    <div class="list-preview">
+        <div class="ibox">
+            <div class="ibox-title modal-header">
+                <div class="pull-right">
+                    <div class="dropdown">
+                        <a class="action dropdown-toggle">
+                            <i class="fa fa-ellipsis-h"></i>
+                        </a>
+                        <ul class="dropdown-menu dropdown-menu-right">
+                            <li><a>Edit</a></li>
+                            <li><a>Delete</a></li>
+                        </ul>
+
+                        <a class="close-link action">
+                            <i class="fa fa-times"></i>
+                        </a>
+                    </div>
+                </div>
+                <h2>
+                    <span class="text-muted">
+                        <i class="fa fa-clock-o"></i>
+                        2hrs 30mins
+                    </span><br>
+                    <a>Advanced Life Support</a>
+                </h2>
+            </div>
+            <div class="ibox-content">
+                <div class="form-group">
+                    <label>Discipline</label>
+                    <p>Nursing</p>
+                </div>
+                <div class="form-group">
+                    <label>Pocket Centre</label>
+                    <p>Lady Cilento Children's Hospital</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
+```
+*/

package/sass/styleguide/_layout-centered.scss

@@ -0,0 +1,33 @@
+/*doc
+---
+title: Centered
+name: centered
+category: Layout
+---
+
+##Centered layout
+There are instances when a full-width layout is necessary but may not work in a single file. In this case, the "Centered" layout can be used for this scenario.
+
+Here's an example in how the centered layout looks like. This is in the Settings page.
+
+<img src="../images/layout-centered1.png" />
+
+The centered layout is still responsive, however, it has a maximum width to maintain visual proportion and balance. Achieving this layout can easily be done by wrapping the entire section with the <code>centered-content</code> class. 
+
+```html_example
+<div class="row">
+    <div class="centered-content">
+
+        <p class="m-b-md">Quick access to settings that let you control and configure Central to work better for you.</p>
+    </div>
+</div>
+```
+
+
+###Variations of this layout
+<code>centered-content</code> - max width of 630px <br />
+<code>centered-content-md</code> - max width of 1024px
+
+
+To use the variations, make sure that you use the <code>centered-content</code> as the base, and then followed by your variation. 
+*/

package/sass/styleguide/_layout-itemAction.scss

@@ -0,0 +1,92 @@
+/*doc
+---
+title: Item/Action
+name: itemAction
+category: Layout
+---
+
+
+##Item/Action layout
+For this simple two column layout, create a <code>.row</code> and add the appropriate
+number of <code>.span*</code> columns. As this is a 12-column grid, each `.span*`
+spans a number of those 12 columns, and should always add up to 12 for each row
+(or the number of columns in the parent).
+
+Each column can then be filled with a widget or by an Inspinia element
+called <code>ibox</code>. The key to this layout is you put all of your data item
+widgets/iboxes to the left pane while your action widgets/iboxes to the right.
+
+```html_example
+<div class="row">
+    <div class="col-md-6">
+        <div class="ibox m-b-none">
+            <div class="ibox-title">
+                <div class="form-group">
+                    <h2 class="m-b-none">
+                        <div class="pull-right m-l-sm">
+                            <span class="label label-danger outline">
+                            <i class="fa fa-exclamation"></i> Urgent
+                            </span>
+                        </div>
+                        <span class="text-muted">
+                            <a>Sim Man</a>
+                        </span>
+                        <a>#123456</a>
+                    </h2>
+                    <p>Part-task trainer</p>
+                    <p>
+                        <span class="text-warning">
+                            <strong>On loan</strong>
+                        </span>
+                        until 16 May, 2016 at <a>Cairns Centre</a>, Cairns, QLD
+                    </p>
+                </div>
+            </div>
+            <div class="ibox-content">
+                <div class="form-group">
+                    <div class="alert alert-pink text-center">
+                        Repair
+                    </div>
+                    <p class="m-t-md">
+                        <strong>Requested by</strong>
+                        <a>Louise Dobson</a> - <a>Request #99</a><br>
+                        From <a><i class="fa fa-building"></i>
+                        Cairns Centre</a>, Cairns, QLD
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div> <!-- col-md-6 ends here -->
+
+    <div class="col-md-6">
+        <div class="ibox">
+            <div class="ibox-title">
+                <h3>Assignee</h3>
+            </div>
+            <div class="ibox-content">
+                <div class="pull-right">
+                    <a class="btn-default btn btn-xs">Edit</a>
+                </div>
+                Unassigned
+            </div>
+        </div>
+        <div class="ibox">
+            <div class="ibox-title">
+                <h3>Photos</h3>
+                <div class="ibox-tools">
+                    <a class="collapse-link">
+                        <i class="fa fa-chevron-up"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="ibox-content">
+                <p class="text-center m-t-sm">
+                    <button class="btn btn-grey" type="button">Upload photo</button>
+                </p>
+            </div>
+        </div>
+    </div> <!-- col-md-6 ends here -->
+</div>
+```
+
+*/

package/sass/styleguide/_layout-responsive.scss

@@ -0,0 +1,77 @@
+/*doc
+---
+title: Responsive
+name: responsive
+category: Layout
+---
+
+##Responsive
+Central adopts a mobile-first approach, which means you're designing mobile first (default style is the mobile style). Queries after the default then target larger screens progressively. 
+
+Central uses Bootstrap as its base grid that ensures consistency across layout and screen sizes. We've also created more specific breakpoints to ensure that content is fluid even during those awkward transition breakpoints.
+
+###Breakpoint system
+
+<table class="table history breakpoint">
+<tr>
+    <th style="text-align: center;">Min width</th>
+    <th style="text-align: center;">Max width</th>
+    <th>Notes</th>
+</tr>
+<tr>
+    <td>0px</td>
+    <td>479px</td>
+    <td>
+        <strong>Custom</strong><br />
+        Class prefix - <code>col-xxs</code>, <code>col-xs</code>
+    </td>
+</tr>
+<tr>
+    <td>480px</td>
+    <td>767px</td>
+    <td>
+        Bootstrap grid default <br />
+        Class prefix - <code>col-xs</code>
+    </td>
+</tr>
+<tr>
+    <td>768px</td>
+    <td>991px</td>
+    <td>
+        Bootstrap grid default <br />
+        Class prefix - <code>col-sm</code>
+    </td>
+</tr>
+<tr>
+    <td>992px</td>
+    <td>1119px</td>
+    <td>
+        Bootstrap grid default <br />
+        Class prefix - <code>col-md</code>
+    </td>
+</tr>
+<tr>
+    <td>1200px</td>
+    <td>1599px</td>
+    <td>
+        Bootstrap grid default <br />
+        Class prefix - <code>col-lg</code>
+    </td>
+</tr>
+<tr>
+    <td>1600px</td>
+    <td>n/a</td>
+    <td>
+        <strong>Custom</strong> <br />
+        Class prefix - <code>col-xl</code>, <code>col-lg</code>
+    </td>
+</tr>
+</table>
+
+
+###Progressive enhancement approach
+With a mobile first viewpoint, we start by loading the absolute bare essentials on the smallest devices. This leads to a snappier experience that avoids unnecessary lag. The additional resources are loaded strictly on an as-neeeded basis to platforms that can handle them well.
+
+With this in mind, it's recommended to code up your initial CSS given a mobile perspective and then use media queries to selectively serve up additional styling as the viewport size increases.
+
+*/