@csdsesystems/central-styles 0.1.0 → 1.0.2

package/sass/plugins/_toastr.scss

@@ -0,0 +1,53 @@
+/* Toastr custom style */
+
+#toast-container.toast-top-center > div {
+    width: 500px;
+}
+
+#toast-container > .toast-warning:before {
+  content: none;
+}
+
+#toast-container > div {
+    border-radius: 0;
+    padding: 11px 20px 14px 20px;
+    opacity: 1;
+}
+
+.toast-info {
+  background-color: $accent-color;
+}
+
+.toast-warning { 
+    color: $mustard !important;
+    background-color: lighten($mustard, 45%);
+    border-color: $mustard !important;
+    background-image: none;
+
+    .toast-close-button {
+        color: $mustard;  
+    }
+
+    a {
+        color: $mustard;  
+        font-weight: 700;
+        border-bottom: 1px solid lighten($mustard, 30%);
+    }
+
+    a:hover {
+        color: $mustard;
+        border-bottom: 1px solid $mustard;
+    }
+
+    .toast-progress {
+        background-color: $mustard;
+        opacity: 1;
+    }
+}
+
+.toast-close-button {
+    position: relative;
+    text-shadow: none;
+    opacity: 1;
+
+}

package/sass/style.scss

@@ -0,0 +1,92 @@
+/* CSDS Central
+================================================== */
+
+@import
+
+/* INSPINIA Responsive Admin Theme - Version 2.2 ================ */
+
+// Variables, Mixins
+"inspinia/variables",
+
+// Elements
+"inspinia/typography",
+"inspinia/navigation",
+"inspinia/top_navigation",
+"inspinia/buttons",
+"inspinia/badges_labels",
+"inspinia/elements",
+"inspinia/sidebar",
+"inspinia/base",
+"inspinia/pages",
+"inspinia/chat",
+"inspinia/metismenu",
+"inspinia/spinners",
+"inspinia/landing",
+"inspinia/rtl",
+"inspinia/theme-config",
+"inspinia/skins",
+"inspinia/media",
+"inspinia/animate",
+
+/* Bourbon */
+// Lightweight SASS styleset
+"bourbon/bourbon",
+
+/* CSDS Theme ================ */
+// Custom styles to override theme styles
+
+// Utilities
+"utilities/variables",
+"utilities/mixins",
+
+// Base
+"base/base",
+"base/typography",
+
+// Components
+"components/badges_labels",
+"components/buttons",
+"components/navigation",
+"components/comments",
+"components/ibox",
+"components/lists",
+"components/modals",
+"components/navigation",
+"components/photo_upload",
+"components/progress_bars",
+"components/tables",
+"components/timeline",
+"components/widgets",
+"components/calendar",
+"components/alerts",
+"components/sidebar",
+"components/inputs",
+"components/chips",
+"components/icons",
+"components/cards",
+"components/breadcrumbs",
+"components/wizards",
+"components/wysiwyg",
+
+// Plugins
+"plugins/timepicker",
+"plugins/toastr",
+"plugins/icheck",
+"plugins/skspinner",
+"plugins/select2-bootstrap",
+"plugins/sortable",
+"plugins/charts",
+"plugins/dropzone",
+
+// Pages
+"pages/pages",
+
+// Layout
+"layout/top_navigation",
+"layout/sidebar",
+"layout/forms",
+"layout/content",
+"layout/bootstrap",
+
+// Media queries
+"layout/media";

package/sass/styleguide/_components-1-buttons.scss

@@ -0,0 +1,125 @@
+/*doc
+---
+title: Buttons
+name: 1_buttons
+category: Components
+---
+
+<p class="lead">Buttons are <em>mostly</em> used for <strong>actions</strong>, like in forms, while textual
+hyperlinks are <em>mostly</em> used for <strong>destinations</strong>, or moving from one
+page to another.</p>
+
+You can find most of the styles in <code>components/_buttons.scss</code>
+
+
+Button styles can be applied to any element. Typically you'll want to
+use either a `<button>` or an `<a>` element:
+
+```html_example
+<button class="btn btnDefault">Click</button>
+<a class="btn btnDefault" href="#">Don't click</a>
+
+```
+
+If your button is actually a link to another page, please use the
+`<a>` element, while if your button performs an action, such as submitting
+a form or triggering some javascript event, then use a `<button>` element.
+
+##Sizes
+There are four sizes for buttons: default, large, small, and extra small.
+Simply apply the size modifier class for the desired size.
+
+
+Button                                                            | Modifier Class
+----------------------------------------------------------------- | -----------------
+<button class="btn btn-primary btn-xs">Extra small</button>       | <pre>btn btn-xs</pre>
+<button class="btn btn-primary btn-sm">Small</button>             | <pre>btn btn-sm</pre>
+<button class="btn btn-primary">Default</button>                  | <pre>btn btn-default</pre>
+<button class="btn btn-primary btn-lg">Large</button>             | <pre>btn btn-large</pre>
+
+##Options
+Use any of the available button classes to quickly create a styled button.
+<code>.btn-red</code> is also similar to <code>.btn-danger</code> the same way
+<code>.btn-yellow</code> is also similar to <code>.btn-warning</code>
+
+```html_example
+<button class="btn btn-grey">Grey</button>
+<button class="btn btn-primary">Primary</button>
+<button class="btn btn-danger">Danger</button>
+<button class="btn btn-purple">Purple</button>
+<button class="btn btn-warning">Warning</button>
+<button class="btn btn-white">Cancel</button>
+```
+
+##Writing for buttons
+We strive to label the button with what it does. The text on the button should begin with a verb. Otherwise, it's not a call to action. It's just a button with text on it.
+
+Every component should only have at least one primary action. This is denoted by the modifier <code>btn-primary</code>. 
+
+
+##Justified buttons
+
+There is also an additional modifier that will make the button stretch to span
+the entire width of its parent container. Use <code>.btn-block</code>.
+
+You can also use the <code>full-width</code> class in lieu of <code>btn-block</code>.
+
+```html_example
+<div class="row">
+    <div class="col-lg-12">
+        <button type="submit" class="btn btn-primary btn-block">
+            Log in
+        </button>
+    </div>
+</div>
+```
+
+Another example of how to use <code>btn-block</code>.
+
+```html_example
+<div class="row">
+    <div class="col-sm-4">
+        <button type="submit" class="btn btn-primary btn-block">
+            View requests
+        </button>
+    </div>
+    <div class="col-sm-4">
+        <button type="submit" class="btn btn-primary btn-block">
+            New request
+        </button>
+    </div>
+    <div class="col-sm-4">
+        <button type="submit" class="btn btn-primary btn-block">
+            View work orders
+        </button>
+    </div>
+</div>
+```
+
+We wrap a series of buttons with <code>.btn</code> in <code>btn-group</code>.
+We normally do this as supplemental navigation.
+
+```html_example
+<span class="btn-group">
+    <a class="btn btn-default">List</a>
+    <a class="btn btn-default active">Calendar</a>
+</span>
+```
+
+
+##Dropdowns
+
+```html_example
+
+
+<div class="btn-group">
+    <button type="button" class="btn btn-grey dropdown-toggle" data-toggle="dropdown">Status (2) <span class="caret"></span></button>
+    <ul class="dropdown-menu">
+        <li class="i-checks"><a><label> <input type="checkbox" value="" checked> Operational</label></a></li>
+        <li class="i-checks"><a><label> <input type="checkbox" value="" checked> On hold</label></a></li>
+        <li class="i-checks"><a><label> <input type="checkbox" value=""> Closed</label></a></li>            
+    </ul>
+</div>  
+```
+
+*/

package/sass/styleguide/_components-badges.scss

@@ -0,0 +1,62 @@
+/*doc
+---
+title: Badges
+name: badges
+category: Components
+---
+
+<p class="lead">Easily highlight new or unread items by adding a
+    <code><span class="badge"></code> to links and more.</p>
+
+```html_example
+<a>Inbox <span class="badge">42</span></a>
+```
+
+
+You can add the <code>.lg</code> modifier class to increase
+size of your badge. <em>No, Johnathan. I'm not talking about
+something else.</em>
+
+```html_example
+<a>Inbox <span class="badge lg">42</span></a>
+```
+
+##Available variations
+Add any of the below mentioned modifier classes to change the appearance of a label.
+
+Label | Modifier Class
+----- | ---
+<span class="badge badge-yellow">1</span> | <code>badge-yellow</code>
+<span class="badge badge-teal">2</span> | <code>badge-teal</code>
+<span class="badge badge-green">3</span> | <code>badge-green</code>
+<span class="badge badge-success">4</span> | <code>badge-success</code>
+<span class="badge badge-purple">5</span> | <code>badge-purple</code>
+<span class="badge badge-deep-blue">6</span> | <code>badge-deep-blue</code>
+<span class="badge badge-light-grey">7</span> | <code>badge-light-grey</code>
+<span class="badge badge-brown">8</span> | <code>badge-brown</code>
+<span class="badge badge-pink">9</span> | <code>badge-pink</code>
+<span class="badge badge-primary">10</span> | <code>badge-primary</code>
+<span class="badge badge-danger">11</span> | <code>badge-danger</code>
+<span class="badge badge-red">12</span> | <code>badge-red</code>
+<span class="badge badge-info">13</span> | <code>badge-info</code>
+<span class="badge badge-orange">14</span> | <code>badge-orange</code>
+
+Similar to labels, the <code>outline</code> modifier class is also available.
+
+Label | Modifier Class
+----- | ---
+<span class="badge badge-yellow outline">1</span> | <code>badge-yellow outline</code>
+<span class="badge badge-teal outline">2</span> | <code>badge-teal outline</code>
+<span class="badge badge-green outline">3</span> | <code>badge-green outline</code>
+<span class="badge badge-success outline">4</span> | <code>badge-success outline</code>
+<span class="badge badge-purple outline">5</span> | <code>badge-purple outline</code>
+<span class="badge badge-deep-blue outline">6</span> | <code>badge-deep-blue outline</code>
+<span class="badge badge-light-grey outline">7</span> | <code>badge-light-grey outline</code>
+<span class="badge badge-brown outline">8</span> | <code>badge-brown outline</code>
+<span class="badge badge-pink outline">9</span> | <code>badge-pink outline</code>
+<span class="badge badge-primary outline">10</span> | <code>badge-primary outline</code>
+<span class="badge badge-danger outline">11</span> | <code>badge-danger outline</code>
+<span class="badge badge-red outline">12</span> | <code>badge-red outline</code>
+<span class="badge badge-info outline">13</span> | <code>badge-info outline</code>
+<span class="badge badge-orange outline">14</span> | <code>badge-orange outline</code>
+*/

package/sass/styleguide/_components-breadcrumbs.scss

@@ -0,0 +1,30 @@
+/*doc
+---
+title: Breadcrumbs
+name: breadcrumbs
+category: Components
+---
+
+<p class="lead">A breadcrumb is a secondary navigation scheme type that helps a user identify their location within a system.</p>
+
+Central uses a location-based breadcrumb that shows the user where they are in the system. Their current location is highlighted by using the <code>h1</code> tag.  Then previous pages appear at the top. Each text link is for a page that is one level higher than the current one.
+
+
+```html_example
+<div class="row">
+    <div class="col-md-12 clearfix">
+        <ol class="breadcrumb m-t-md m-b-xxs">
+            <li>
+                <a href="../index.php">Home</a>
+            </li>
+            <li>
+                <a href="index.php">Bookings</a>
+            </li>
+        </ol>    
+
+        <h1 class="pull-left m-t-none m-b-none">Rooms</h1>                                          
+    </div>
+</div>
+```
+
+*/

package/sass/styleguide/_components-cards.scss

@@ -0,0 +1,57 @@
+/*doc
+---
+title: Cards
+name: cards
+category: Components
+---
+
+<p class="lead">A card serves as a gateway point to more detailed information. It's always a clickable component. 
+A non-clickable version of a card is a widget. A card may contain just about anything, a photo, text, an action, multiple actions. </p>
+
+<p>When to use a card?</p>
+<ul>
+    <li>If the component expects an action from a user</li>
+    <li>A component is comprised of multiple data types</li>
+</ul>
+
+
+
+```html_example
+<div class="row">
+    <div class="col-md-6 col-xs-12">
+        <div class="ibox ibox-card ibox-card-wh card-purple card-elearning card-course">
+        <a href="course-elearning.php">
+            <div class="ibox-title">
+                <span class="ibox-title-wrapper">
+                    <h2>
+                        <span class="ellipsis">Aboriginal and Torres Strait Islander Cultural Practice eLearning Program</span>
+                        <span class="sub-title nobr">CA</span>
+                    </h2>
+                </span>                         
+            </div>
+            <div class="ibox-content">
+                <h3 class="course-code m-b-xs">eLearning</h3>
+                <div class="description m-b-sm">
+                    <p>Increase your knowledge and understanding of the issues, past and present, that affect Aboriginal and Torres Strait Islander societies/communities, including communicating sensitively and effectively.</p>
+                </div>
+
+                <p>
+                    <i class="fa fa-clock-o"></i> Self paced<br>
+                    <i class="fa fa-dollar"></i> Free
+                </p>
+                <p class="truncate">
+                    <span class="sub-heading">DEVELOPED BY</span><br>
+                    Aboriginal and Torres Strait Islander Health Unit, MNHHS
+                </p>
+            </div>                          
+            </a>
+            <div class="ibox-content p-sm">
+                <a class="btn btn-transparent" href="course-elearning.php">VIEW MORE</a>
+            </div>                         
+        </a>   
+        </div>
+    </div>
+</div>
+```
+
+*/

package/sass/styleguide/_components-forms.scss

@@ -0,0 +1,176 @@
+/*doc
+---
+title: Forms
+name: forms
+category: Components
+---
+
+##Basic example
+Individual form controls automatically receive some global styling.
+All textual `<input>`, `<textarea>`, and `<select>` elements with `.form-control`
+are set to `width: 100%`; by default.
+
+Wrap labels and controls in `.form-group` for optimum spacing.
+
+##Always add labels
+Screen readers will have trouble with your forms if you don't include a label for every input.
+
+```html_example
+<form>
+<div class="form-group">
+    <label for="exampleInputEmail1">Email address</label>
+        <input type="email" class="form-control" id="exampleInputEmail1"
+            placeholder="Placeholder text">
+    </div>
+    <div class="form-group">
+        <label for="exampleInputPassword1">Password</label>
+        <input type="password" class="form-control" id="exampleInputPassword1"
+            placeholder="Placeholder text">
+    </div>
+    <div class="form-group">
+        <label>Pocket centre</label>
+        <div class="input-group">
+            <span class="input-group-addon left"><i class="fa fa-sort"></i></span>
+            <select class="form-control">
+                <option value="Beaudesert">Beaudesert</option>
+                <option value="Roma">Roma</option>
+            </select>
+        </div>
+    </div>
+<button type="submit" class="btn btn-white">Cancel</button>
+<button type="submit" class="btn btn-primary pull-right">Submit</button>
+</form>
+```
+
+##Checkboxes and radios
+Checkboxes are for selecting one or several options in a list, while radios
+are for selecting one option from many.
+
+###Default (stacked)
+```html_example
+<div class="form-group">
+    <label>Simulation Coordinators/Educators</label>
+    <div class="i-checks2">
+        <label>
+            <input type="checkbox" value="">
+            Andrew Heasley
+        </label>
+    </div>
+    <div class="i-checks2">
+        <label>
+            <input type="checkbox" value="">
+            Tony Carter
+        </label>
+    </div>
+    <div class="i-checks2">
+        <label>
+            <input type="checkbox" value="">
+            Jane Harnischfeger
+        </label>
+    </div>
+</div>
+
+<div class="form-group">
+    <div class="radio i-checks2">
+      <label>
+        <input type="radio" name="optionsRadios" value="option1" checked>
+        Option one is this and that be sure to include why it's great
+      </label>
+    </div>
+    <div class="radio i-checks2">
+      <label>
+        <input type="radio" name="optionsRadios" value="option2">
+        Option two can be something else and selecting it will deselect option one
+      </label>
+    </div>
+    <div class="radio i-checks2 disabled">
+      <label>
+        <input type="radio" name="optionsRadios" value="option3" disabled>
+        Option three is disabled
+      </label>
+    </div>
+</div>
+```
+
+
+##Toggles
+
+On/off is the basic toggle.
+
+```html_example
+<form>
+    <div class="onoffswitch">
+        <input type="checkbox" name="collapsemenu" checked="" class="onoffswitch-checkbox" id="example511">
+        <label class="onoffswitch-label" for="example511">
+            <span class="onoffswitch-inner"></span>
+            <span class="onoffswitch-switch"></span>
+        </label>
+    </div>
+</form>
+```
+
+To replace on/off with yes/no, just add a class modifier, `yesnoswitch` to the div container. 
+
+```html_example
+<form>
+    <div class="onoffswitch yesnoswitch">
+        <input type="checkbox" name="collapsemenu" checked="" class="onoffswitch-checkbox" id="example511">
+        <label class="onoffswitch-label" for="example511">
+            <span class="onoffswitch-inner"></span>
+            <span class="onoffswitch-switch"></span>
+        </label>
+    </div>
+</form>
+```
+
+
+##Search input
+```html_example
+<form>
+<div class="list-search-custom m-b-sm">
+    <label><i class="fa fa-search"></i></label>
+    <div class="form-group">
+        <input type="text" class="form-control" placeholder="Search equipment">
+        <a class="search-clear"> <i class="fa fa-times"></i></a>
+    </div>
+</div>
+</form>
+```
+
+##Textarea
+Form control which supports multiple lines of text.
+
+```html_example
+<form class="form-inline editableform">
+    <div class="control-group form-group">
+        <div>
+            <div class="editable-input">
+                <textarea class="form-control input-large"
+                    rows="0" placeholder="Click to add reason"></textarea>
+            </div>
+        </div>
+    </div>
+</form>
+```
+
+```html_example
+<form class="form-inline editableform m-b-lg">
+    <div class="control-group form-group">
+        <div>
+            <div class="editable-input">
+                <textarea class="form-control input-large" rows="5"></textarea>
+            </div>
+            <div class="editable-buttons">
+                <button type="button" class="btn btn-primary btn-sm editable-submit">
+                    <i class="glyphicon glyphicon-ok"></i>
+                </button>
+                <button type="button" class="btn btn-default btn-sm editable-cancel">
+                    <i class="glyphicon glyphicon-remove"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+</form>
+```
+
+*/