@csdsesystems/central-styles 1.0.2 → 1.0.4

package/sass/styleguide/_components-ibox.scss

@@ -1,107 +0,0 @@
-/*doc
----
-title: Ibox
-name: ibox
-category: Components
----
-
-<p class="lead">An ibox (information box) is a lightweight container that may either be stand alone or stacked against its fellow iboxes or expanded to show more information. They differ to widgets (where its main purpose is to display a single piece of information) and to cards (where there is an expected action).</p>
-
-```html_example
-    <div class="ibox">
-        <div class="ibox-title">                                
-            <label>First name</label>
-            <h2>
-                <input class="form-control p-t-none" placeholder="Equipment name" value="Rebecca">                                    
-            </h2>
-
-            <label>Last name</label>
-            <h2>
-                <input class="form-control p-t-none" placeholder="Equipment name" value="Launder">                                    
-            </h2> 
-        </div>
-    </div>    
-```
-
-Iboxes can be stacked on top of each other and these can easily be done by removing the bottom margins by using the <code>m-b-none</code> class modifier.
-
-```html_example
-
-<div class="ibox m-b-none">
-    <div class="ibox-title clearfix">
-        <h3>Details</h3>
-    </div>                       
-    <div class="ibox-content">
-        <div class="form-group">
-            <label>Title</label>
-            <div class="input-group">
-                <span class="input-group-addon left"><i class="fa fa-sort"></i></span>
-                <select class="form-control" name="" id="">
-                    <option value="" >Select a title</option>
-                    <option value="" >Dr</option>
-                    <option value="">Mr</option>
-                    <option value="" selected="selected">Ms</option>
-                    <option value="">Miss</option>
-                </select>
-            </div>
-        </div>                                                                                            
-    </div>
-</div>                                                                                         
-
-<div class="ibox collapsed m-b-none">
-    <div class="ibox-title-alt clearfix">
-        <div class="panel-heading">
-            <div class="settings-item">
-                <span>
-                    <strong>Personal information</strong>
-                </span>
-                <div class="ibox-tools">                                                        
-                    <a class="collapse-link">
-                        <i class="fa fa-chevron-up"></i>
-                    </a>                           
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="ibox-content">
-        <div class="form-group">
-            <label>Gender</label>
-            <div class="input-group">
-                <span class="input-group-addon left"><i class="fa fa-sort"></i></span>
-                <select class="form-control" name="" id="">
-                    <option value="" selected>Select gender</option>
-                    <option value="" selected="selected">Male</option>
-                    <option value="">Female</option>
-                </select>
-            </div>
-        </div>                                                                                               
-    </div>
-</div>
-
-<div class="ibox collapsed m-b-none">
-    <div class="ibox-title-alt clearfix">
-        <div class="panel-heading">
-            <div class="settings-item">
-                <div class="ibox-tools">                                                        
-                    <a class="collapse-link">
-                        <i class="fa fa-chevron-up"></i>
-                    </a>                           
-                </div>                                    
-                <span>
-                    <strong>Postal address</strong>
-                </span>
-            </div>
-        </div>
-    </div>
-
-    <div class="ibox-content">
-        <div class="form-group">
-            <label>Address line 1</label>
-            <input type="text" class="form-control" value="6/27 Mountain Street">
-        </div>           
-    </div>
-</div>
-```
-
-*/

package/sass/styleguide/_components-labels.scss

@@ -1,69 +0,0 @@
-/*doc
----
-title: Labels
-name: labels
-category: Components
----
-
-```html_example
-<h1>Example heading <span class="label">Label</span></h1>
-<h2>Example heading <span class="label">Label</span></h2>
-<h3>Example heading <span class="label">Label</span></h3>
-<h4>Example heading <span class="label">Label</span></h4>
-<h5>Example heading <span class="label">Label</span></h5>
-<h6>Example heading <span class="label">Label</span></h6>
-```
-
-##Available variations
-Add any of the below mentioned modifier classes to change the appearance of a label.
-
-Label | Modifier Class
------ | ---
-<span class="label label-default">Default</span> | <code>label-default</code>
-<span class="label label-primary">Primary</span> | <code>label-primary</code>
-<span class="label label-success">Success</span> | <code>label-success</code>
-<span class="label label-warning">Warning</span> | <code>label-warning</code>
-<span class="label label-danger">Danger</span> | <code>label-danger</code>
-<span class="label label-teal">Teal</span> | <code>label-teal</code>
-<span class="label label-deep-blue">Deep blue</span> | <code>label-deep-blue</code>
-<span class="label label-light-grey">Light grey</span> | <code>label-light-grey</code>
-<span class="label label-brown">Brown</span> | <code>label-brown</code>
-<span class="label label-pink">Pink</span> | <code>label-pink</code>
-<span class="label label-orange">Orange</span> | <code>label-orange</code>
-<span class="label label-invisible">Invisible</span> | <code>label-invisible</code>
-
-
-###Invisible label
-The invisible label can be used if you want to contain small nuggets of data
-using the basic label visual style but without any colour. As you can see above,
-the invisible label does not contain padding and if you position multiple of these 
-labels, they would be separated by a margin of 10px between each other. 
-
-```html_example
-<span class="label label-invisible">Uno</span></h1>
-<span class="label label-invisible">Dos</span></h2>
-<span class="label label-invisible">Tres</span></h3>
-<span class="label label-invisible">Quatro</span></h4>
-<span class="label label-invisible">Cinco</span></h5>
-<span class="label label-invisible">Sais</span></h6>
-```
-
-
-###Outline labels
-You can also revert the above modifier classes by adding the <code>outline</code> modifier class.
-
-Label | Modifier Class
------ | ---
-<span class="label label-default outline">Default</span> | <code>label-default  outline</code>
-<span class="label label-primary outline">Primary</span> | <code>label-primary outline</code>
-<span class="label label-success outline">Success</span> | <code>label-success outline</code>
-<span class="label label-warning outline">Warning</span> | <code>label-warning outline</code>
-<span class="label label-danger outline">Danger</span> | <code>label-danger outline</code>
-<span class="label label-teal outline">Teal</span> | <code>label-teal outline</code>
-<span class="label label-deep-blue outline">Deep blue</span> | <code>label-deep-blue outline</code>
-<span class="label label-light-grey outline">Light grey</span> | <code>label-light-grey outline</code>
-<span class="label label-brown outline">Brown</span> | <code>label-brown outline</code>
-<span class="label label-pink outline">Pink</span> | <code>label-pink outline</code>
-<span class="label label-orange outline">Orange</span> | <code>label-orange outline</code>
-
-*/

package/sass/styleguide/_components-lists.scss

@@ -1,274 +0,0 @@
-/*doc
----
-title: Lists
-name: lists
-category: Components
----
-
-<p class="lead">The usual unordered and ordered lists still work. However, with Concrete we also used the list element as major component of our search results pages. In our Item/Preview layout, the item pane is essentially a list that contains all search results/items (e.g. Usage events).</p>
-
-```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">
-                        <span class="text-red">DRAFT</span>
-                    </div>
-                    <div class="list-summary">
-                        SCT
-                    </div>
-                </div>
-                <div class="list-row-end">
-                    <span>5</span>
-                    <h3>0 hrs</h3>
-                    <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">
-                        <span class="text-red">DRAFT</span>
-                    </div>
-                    <div class="list-summary">
-                        Usage event title
-                    </div>
-                </div>
-                <div class="list-row-end">
-                    <span>2</span>
-                    <h3>0 hrs</h3>
-                    <span class="preview"><i class="fa fa-angle-double-right"></i></span>
-                </div>
-            </div>
-            <!-- END List item -->
-        </div>
-    </div>
-</div>
-```
-
-The simplest form a list is an <code>agile-list</code>.
-
-```html_example
-<ul class="agile-list bg-change no-indent">
-    <li>
-        <div class="row odd" data-toggle="collapse" data-target="#listExpiredVOCs" title="Expand" aria-expanded="true">
-            <div class="col-xs-12">
-                <span class="schedule-ss pull-right m-l-xs">10 expired</span>
-                <a><i class="fa fa-caret-right"></i> Expired</a>
-            </div>
-        </div><!-- END row -->
-        <div id="listExpiredVOCs" class="collapse in" aria-expanded="true">     
-        
-             <div class="row even">
-                <div class="col-xs-12">                                                      
-
-                    <div class="row">
-                        <div class="col-lg-7 col-md-12">
-                            ALS Simulator
-                        </div>
-                        <div class="schedule-time col-lg-5 col-md-12 col-df-fl col-lg-fr text-red">
-                            <span>24 Mar, 2015 - 24 Mar, 2016</span>
-                        </div>
-                    </div>
-
-                    <hr class="sm">
-
-                    <div class="row">
-                        <div class="col-lg-7 col-md-12">
-                            ALS Simulator Dark Skin
-                        </div>
-                        <div class="schedule-time col-lg-5 col-md-12 col-df-fl col-lg-fr text-red">
-                            <span>24 Mar, 2015 - 24 Mar, 2016</span>
-                        </div>
-                    </div>
-                    
-                </div>
-            </div>
-        </div>                                    
-    </li>                                                                                                                                                                      
-</ul>
-```
-
-Another form of a list is the <code>feed-activity-list</code>.
-
-```html_example
-<div class="feed-activity-list" id="recently-added-bookings">
-
-    <div class="feed-element">
-        <div class="agenda-item_event">
-            <div class="agenda-item-title">
-                <span class="badge outline pull-right"></span>
-                <strong><a>Aged Care Course</a></strong>
-                <div>15 Oct 2017, 9am - 3pm</div>
-                <small class="text-muted">Added by <a>Rachel Weller</a> on 15 Oct, 2016</small>
-            </div>
-        </div>
-    </div>
-
-    <div class="feed-element">
-        <div class="agenda-item_event">
-            <div class="agenda-item-title">
-                <span class="badge outline pull-right"></span>
-                <strong><a>Forum for End of Life Care</a></strong>
-                <div>15 Oct 2017, 9am - 3pm</div>
-                <small class="text-muted">Added by <a>Rachel Weller</a> on 15 Oct, 2016</small>
-            </div>
-        </div>
-    </div>
-
-    <div class="feed-element">
-        <div class="agenda-item_meeting">
-            <div class="agenda-item-title">         
-                <span class="badge outline pull-right"></span>
-                <strong><a>Weekly Catch Up - Shane Convine</a></strong>
-                <div>15 Oct 2017, 9am - 3pm</div>
-                <small class="text-muted">Added by <a>Rachel Weller</a> on 15 Oct, 2016</small>
-            </div>
-        </div>
-    </div>
-
-    <div class="feed-element">
-        <div class="agenda-item_meeting">
-            <div class="agenda-item-title">         
-                <span class="badge outline pull-right"></span>
-                <strong><a>Graduate Certificate Committee Meeting</a></strong>
-                <div>15 Oct 2017, 9am - 3pm</div>
-                <small class="text-muted">Added by <a>Rachel Weller</a> on 15 Oct, 2016</small>
-            </div>
-        </div>
-    </div>
-
-    <div class="feed-element">
-        <div class="agenda-item_clinical">
-            <div class="agenda-item-title">         
-                <span class="badge outline pull-right"></span>
-                <strong><a>PSR Crisis</a></strong>
-                <div>15 Oct 2017, 9am - 3pm</div>
-                <small class="text-muted">Added by <a>Rachel Weller</a> on 15 Oct, 2016</small>
-            </div>
-        </div>
-    </div>
-
-    <div class="feed-element">
-        <div class="agenda-item_course">
-            <div class="agenda-item-title">         
-                <span class="badge outline pull-right"></span>
-                <strong><a>EBUS-Guide Sheath</a></strong>
-                <div>15 Oct 2017, 9am - 3pm</div>
-                <small class="text-muted">Added by <a>Rachel Weller</a> on 15 Oct, 2016</small>
-            </div>
-        </div>
-    </div>
-
-    <div class="feed-element">
-        <div class="agenda-item_course">
-            <div class="agenda-item-title">         
-                <span class="badge outline pull-right"></span>
-                <strong><a>Maternity Recommendations Round Table</a></strong>
-                <div>15 Oct 2017, 9am - 3pm</div>
-                <small class="text-muted">Added by <a>Rachel Weller</a> on 15 Oct, 2016</small>
-            </div>
-        </div>
-    </div>
-</div>
-```
-
-Or you can always try using the <code>social-feed-box</code>. Best reason to use this is when you have a list of components that have multiple data types (such as an icon, a preview text).
-
-```html_example
-<div class="social-feed-box">
-
-<div class="social-avatar">
-    <a href="" class="pull-left">
-        <img alt="image" class="img-circle" src="http://placehold.it/50x50">
-    </a>
-    <div class="media-body">
-        <a href="#">
-            Cassie Carter
-        </a>
-        <span class="text-muted">8 Mar 421pm</span>
-    </div>
-</div>
-<div class="social-body">
-    <p>
-         Approved participants - <a>Jacqueline Caruana</a>, <a>Bethany Jibson</a>, <a>Trudy Barron</a>, <a>Vivienne Gray</a>, <a>Susanne Murray</a>, <a>Debbie Simmons</a>, <a>Michael Wohlfahrt</a>, <a>Wendy Parker</a>, <a>Catherine Law</a>.
-    </p>
-
-    <div class="btn-group">
-        <a><i class="fa fa-clock-o fa-fw"></i> <a href="#">Simulation Meeting - 23 Oct 2016</a></a>
-    </div>
-</div>                        
-</div>
-
-<div class="social-feed-box">
-
-<div class="social-avatar">
-    <a href="" class="pull-left">
-        <img alt="image" class="img-circle" src="http://placehold.it/50x50">
-    </a>
-    <div class="media-body">
-        <a href="#">
-            Cassie Carter
-        </a>
-        <span class="text-muted">7 Mar 8am</span>
-    </div>
-</div>
-<div class="social-body">
-    <p>
-        Increased catering refer Eloise.
-    </p>
-
-    <div class="btn-group">
-        <a><i class="fa fa-clock-o fa-fw"></i> <a href="#">Advance Life Support - 17 Nov 2016</a></a>
-    </div>
-</div>                        
-</div>
-```
-
-A more complex list that can't be accommodate by the above variations is just by separating components by a horizontal rule. 
-
-```html_example
-<div class="form-group">
-
-    <div class="row">
-        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
-            <div class="pull-left m-r-xs">
-                <img src="https://www.sdc.qld.edu.au/resources/central/img/VOC-icon.png" alt="VOC" width="32px">
-            </div>
-            <div class="float-left">
-                <a>Audio Visual Solution</a><br>
-                <span class="nobr">4 Jan, 2016</span> - <span class="nobr">4 Jan, 2017</span>
-            </div>                                        
-        </div>       
-        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 col-df-fl col-sm-fr">
-            <span class="text-warning"><i class="fa fa-exclamation-circle"></i> 2 days remaining</span>
-        </div>                                                                         
-    </div>
-
-    <hr class="sm">                                    
-
-    <div class="row">
-        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
-            <div class="pull-left m-r-xs">
-                <img src="https://www.sdc.qld.edu.au/resources/central/img/VOC-icon.png" alt="VOC" width="32px">
-            </div>
-            <div class="float-left">
-                <a>Megacode Kelly Advanced</a><br>
-                <span class="nobr">4 Jan, 2016</span> - <span class="nobr">4 Jan, 2017</span>
-            </div>                                        
-        </div>       
-        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 col-df-fl col-sm-fr">
-            <span><i class="fa fa-clock-o"></i> 360 days remaining</span>
-        </div>                                                                         
-    </div>                                    
-
-</div>
-```
-
-
-*/

package/sass/styleguide/_components-modals.scss

@@ -1,171 +0,0 @@
-/*doc
----
-title: Modals
-name: modals
-category: Components
----
-
-<p class="lead">Modals are used to display information to a user in an
-    in-site popup window.</p>
-
-```html_example
-<div class="modal-dialog">
-    <div class="modal-content">
-
-    <div class="modal-header">
-        <a class="pull-right">
-          <i class="fa fa-times"></i>
-        </a>
-        <h3>Log in</h3>
-    </div>
-
-    <div class="modal-body">
-        <form class="m-t" role="form" autocomplete="off">
-            <div class="form-group">
-                <input type="email" class="form-control" placeholder="Email address">
-            </div>
-
-            <div class="form-group">
-                <input type="password" class="form-control" placeholder="Password">
-            </div>
-
-            <button type="submit" class="btn btn-primary block full-width m-t-lg m-b">
-                Log in
-            </button>
-
-            <a type="submit" class="btn btn-grey block full-width m-b">
-                Create an account
-            </a>
-
-            <p class="text-center m-b-none">
-                <a><small>Forgot password?</small></a>
-            </p>
-        </form>
-    </div>
-
-    </div>
-  </div>
-```
-
-There's another variation of the modal dialog where 
-
-
-```html_example
-<div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <a data-dismiss="modal" class="pull-right">
-                    <i class="fa fa-times"></i>
-                </a>
-
-                <h2 class="m-l-xs"><a href="booking-course.php"><span class="opaque">Day 1 of 3</span><br>Simulation Coordinator Training</a></h2>
-                <p class="m-t-none m-l-xs opaque">COURSE / INTERNAL</p>   
-            </div>
-            <div class="modal-body">
-
-                <div class="form-group">
-                    <label class="m-b-xxs">Mon 18 Apr 2016</label>                                
-                    <ul class="agile-list bg-change roomslist">
-                        <li>
-                            <div class="row odd collapsed" data-toggle="collapse" data-target="#room1" title="Expand" aria-expanded="false">
-                                <div class="col-lg-8 col-sm-6 col-xs-12 roomtitle">
-                                    <a><i class="fa fa-caret-down"></i> <span>Debrief 1</span></a>
-                                </div>
-                                <div class="col-lg-4 col-sm-6 col-xs-12 text-right col-xs-left xl-r-a">
-                                    9am - 12pm <i class="fa fa-exclamation-circle text-danger"></i> 
-                                </div>
-                            </div>
-                            <div>
-                            <div class="collapse" id="room1" aria-expanded="false" style="height: 0px;">
-                                <div class="row even">
-                                    <div class="col-lg-12">
-                                        <div class="m-b-xs">
-                                           <p class="alert alert-small alert-danger text-center" role="alert">
-                                              <span class="text-danger"><i class="fa fa-exclamation-circle"> </i> Room conflict</span> with <a href="#">Patient Safety Workshop</a>
-                                            </p>
-                                        </div>
-                                        <div class="m-b-xs">
-                                            <span class="sub-heading">LAYOUT</span>
-                                           <br>
-                                           Boardroom
-                                        </div>
-                                        <div class="m-b-xs">
-                                            <span class="sub-heading">EQUIPMENT</span>
-                                           <br>
-                                           Projector, Conference phone
-                                        </div>
-                                        <div class="m-b-xs">
-                                           <span class="sub-heading">COMMENTS</span>
-                                           <br>
-                                           <p>
-                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mauris enim, dictum eget ligula ut, aliquet porta neque. Curabitur vel iaculis ante.
-                                           </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div><!-- END row -->
-                        </div></li>
-                        <li>
-                            <div class="row odd" data-toggle="collapse" data-target="#room2" title="Expand">
-                                <div class="col-lg-8 col-sm-6 col-xs-12">
-                                    <a><i class="fa fa-caret-down"></i> Debrief 2</a>
-                                </div>
-                                <div class="col-lg-4 col-sm-6 col-xs-12 text-right col-xs-left xl-r-a">
-                                    2am - 5pm
-                                    <i class="fa fa-check text-success"></i> 
-                                </div>
-                            </div>
-                            <div class="collapse" id="room2">
-                                <div class="row even">
-                                    <div class="col-lg-12">
-                                        <div class="m-b-xs">
-                                            <span class="sub-heading">LAYOUT</span>
-                                           <br>
-                                           Boardroom
-                                        </div>
-                                        <div class="m-b-xs">
-                                            <span class="sub-heading">EQUIPMENT</span>
-                                           <br>
-                                           Projector, Conference phone
-                                        </div>
-                                        <div class="m-b-xs">
-                                           <span class="sub-heading">COMMENTS</span>
-                                           <br>
-                                           <p>
-                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mauris enim, dictum eget ligula ut, aliquet porta neque. Curabitur vel iaculis ante.
-                                           </p>
-                                        </div>
-                                    </div>
-                                </div><!-- END row -->
-                            </div>
-                        </li>
-                    </ul>                   
-                </div>
-
-                <div class="form-group">
-                    <label>Location</label>
-                    <p><a>Clinical Skills Development Service</a></p>                                  
-                </div>
-
-                <div class="form-group">                
-
-                    <label>Contact</label>
-                    <p>
-                        <a>Rachel Weller</a><br>
-                        <a href="mailto:rachel.weller@health.qld.gov.au"> rachel.weller@health.qld.gov.au</a><br>
-                        <a href="tel:+0736465000"> 3646 5000</a>                            
-                    </p>
-                </div>
-                       
-                <div class="m-t-md">
-                    <a type="button" class="btn btn-primary btn-block" href="booking-course.php">View booking</a>
-                </div>
-
-            </div>
-        </div><!-- /.modal-content -->
-        <div class="modal-arrow"></div>
-    </div>
-```
-
-
-*/

package/sass/styleguide/_components-pagination.scss

@@ -1,27 +0,0 @@
-/*doc
----
-title: Pagination
-name: pagination
-category: Components
----
-
-<p class="lead">Provide pagination links for Central with our multi-page pagination component.</p>
-
-```html_example
-<div class="list-options">
-    <div class="btn-group m-r-sm">
-        <button type="button" class="btn btn-white">
-            <i class="fa fa-chevron-left"></i>
-        </button>
-        <button class="btn btn-white">1</button>
-        <button class="btn btn-white active">2</button>
-        <button class="btn btn-white">3</button>
-        <button class="btn btn-white">4</button>
-        <button type="button" class="btn btn-white">
-            <i class="fa fa-chevron-right"></i>
-        </button>
-    </div>
-</div>
-```
-
-*/