@csdsesystems/central-styles 1.0.2 → 1.0.4

package/sass/styleguide/_patterns-alerts.scss

@@ -1,62 +0,0 @@
-/*doc
----
-title: Alerts
-name: alerts
-category: Patterns
----
-
-<p class="lead">Flash messages, or alerts, inform users of successful or pending actions.
-Use them sparingly. Don’t show more than one at a time.</p>
-
-A basic alert box is just a transparently-bordered box with a <code>margin-bottom: 20px</code>
-and a <code>padding: 15px</code>. Please do not overwrite these values.
-
-```html_example
-<div class="alert" role="alert">This is a basic alert box.</div>
-```
-
-Add <code>.alert-warning</code> or <code>.alert-yellow</code> to the flash message to make it yellow.
-
-```html_example
-<div class="alert alert-warning" role="alert">
-    Warning! Something is wrong here.
-</div>
-```
-
-Add <code>.alert-success</code> or <code>.alert-green</code>  to the flash message to make it green.
-
-```html_example
-<div class="alert alert-success" role="alert">
-    Yes! This is to confirm you've done a great and solid job!
-</div>
-```
-
-Add <code>.alert-danger</code> or <code>.alert-red</code> to the flash message to make it red.
-
-```html_example
-<div class="alert alert-danger" role="alert">
-    Oopss. That's not right, and that's bad of you.
-</div>
-```
-
-###We have also created specific Concrete elements for Central.
-
-```html_example
-<div class="alert alert-pink" role="alert">
-    This is a Repair work order alert
-</div>
-```
-
-```html_example
-<div class="alert alert-info" role="alert">
-    This is a Service work order alert
-</div>
-```
-
-```html_example
-<div class="alert alert-orange" role="alert">
-    This is an Inspection work order alert
-</div>
-```
-
-*/

package/sass/styleguide/_patterns-dataformats.scss

@@ -1,40 +0,0 @@
-/*doc
----
-title: Data formats
-name: dataFormats
-category: Patterns
----
-
-<p class="lead">Different types of numeric and linguistic data are represented using data formats.</p>
-
-How you format the date and time depends on a few factors.
-
-<strong>Displaying time</strong><br />
-Within the current day, display the time using lowercase am or pm, without periods. Central uses the 12-hour clock. Use a single am or pm at the end of the range, if both times have the same am/pm. 
-
-Examples of valid formats
-<ul>
-	<li>9am - 12pm</li>
-	<li>8 - 9am</li>
-	<li>8:30am - 5pm</li>
-	<li>9 - 11:30am</li>	
-</ul>
-
-<strong>Displaying date</strong><br />
-If it's within the current calendar year, display the date without the year. Otherwise, display the date and the year. Depending on how important specificity is, we normally don't include the year. 
-
-Examples of valid formats
-<ul>
-	<li>10 Jun</li>
-	<li>10 Mar, 2016</li>
-	<li>15 - 22 May, 2016</li>
-	<li>15 Mar - 3 Aug, 2016</li>
-	<li>15 Mar, 2016 - 13 Mar 2017</li>	
-</ul>
-
-
-
-
-
-
-*/

package/sass/styleguide/_patterns-emptystates.scss

@@ -1,46 +0,0 @@
-/*doc
----
-title: Empty states
-name: emptyStates
-category: Patterns
----
-
-<p class="lead">Empty states occur when a component's content can't be shown or there's nothing to show.</p>
-
-When a search does not have any results or a component doesn't have anything to show, these are empty states. Although these states aren't typical, they should be designed to prevent user confusion as Central is a task intensive application.
-
-In a highly complex environment, the usual recommendation is go with the simplest. A good example to denote that there's nothing to see in a section is the following.
-
-```html_example                                    
-<div class="form-group nlc m-b-sm text-center">     
-    <img src="https://media.giphy.com/media/13d2jHlSlxklVe/giphy.gif" 
-    style="width: 300px; margin: 0px auto; margin-bottom: 40px;" />
-</div>
-```
-
-Of course, that was a joke. The most basic empty state display displays the section icon and a text tagline that follows this format - "No _______ to show". 
-
-
-```html_example                                    
-<div class="form-group nlc m-b-sm text-center"> 
-    <div class="empty-box opaque text-center">
-        <h3 class="m-t-lg opaque">
-            <i class="fa fa-clock-o fa-3x m-b-xs"></i> <br>
-            No bookings to show
-        </h3>
-    </div>   
-
-    <div class="text-center">
-        <button class="btn btn-primary">New booking</button>                                                                            
-    </div>
-</div>
-```
-
-
-
-
-
-
-
-
-*/

package/sass/styleguide/_patterns-errors.scss

@@ -1,44 +0,0 @@
-/*doc
----
-title: Errors
-name: errors
-category: Patterns
----
-
-<p class="lead">Help users fix input errors as soon as they are detected. Disable the submission of a form if errors are detected, and if detected only after submission, clearly explain the error and how to fix it.</p>
-
-Errors occur when the system fails to complete an action such as:
-<ul>
-	<li>The system does not understand user input</li>	
-	<li>The system fails</li>
-</ul>
-
-Minimise errors by designing interactions that makes it easy for users to input information flexibly. To address errors:
-
-<ul>
-	<li>Clearly communicate what is happening</li>	
-	<li>Describe how a user can resolve it</li>
-</ul>
-
-
-##User input errors
-Help users fix input errors as soon as they are detected. (1) Disable the submission of a form if errors are detected (see Image 1), and (2) if detected only after form submission (see Image 3), clearly explain the error and how to fix it.
-
-Show <strong>error text</strong> only after user interaction with a field. If the user inputs incorrect data, error text shows.
-
-<img src="../images/patterns-error1.png" /><br />
-<span class="caption">Image 1 - Example of a text field input that has helper text.</span>
-
-<img src="../images/patterns-error2.png" /><br />
-<span class="caption">Image 2 - Example of a text field input with error text.</span>
-
-<img src="../images/patterns-error3.png" /><br />
-<span class="caption">Image 3 - Example of an error message that appears after a form has been submitted.</span>
-
-
-
-
-
-
-
-*/

package/sass/styleguide/_section-components.scss

@@ -1,12 +0,0 @@
-/*doc
----
-title: Overview
-name: 0_overview-components
-category: Components
----
-
-<p class="lead">Over a dozen reusable components built to provide iconography, dropdowns,
-    input groups, navigation, alerts, and much more.</p>
-
-
-*/

package/sass/styleguide/_section-layout.scss

@@ -1,40 +0,0 @@
-/*doc
----
-title: Overview
-name: 0_overview-layout
-category: Layout
----
-
-##Grid system
-Concrete uses Bootstrap's default grid system that utilises *12 columns*,
-adapting to be a 724px and 1170px wide depending on your viewport.
-Below 767px viewports, the columns become fluid and stack vertically.
-
-Grid systems are used for creating page layouts through a series of rows
-and columns that house your content. Here's how the Bootstrap grid system works:
-
-* Rows must be placed within a <code>.container</code> (fixed-width)
-or <code>.container-fluid</code> (full-width) for proper alignment and padding.
-* Use rows to create horizontal groups of columns.
-* Content should be placed within columns, and only columns may be immediate
-children of rows.
-* Predefined grid classes like .row and .col-xs-4 are available for quickly
-making grid layouts. Less mixins can also be used for more semantic layouts.
-* Columns create gutters (gaps between column content) via padding. That padding
-is offset in rows for the first and last column via negative margin on <code>.rows.</code>
-* The negative margin is why the examples below are outdented. It's so that content
-within grid columns is lined up with non-grid content.
-* Grid columns are created by specifying the number of twelve available columns
-you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.
-* If more than 12 columns are placed within a single row, each group of extra columns will,
-as one unit, wrap onto a new line.
-* Grid classes apply to devices with screen widths greater than or equal to the
-breakpoint sizes, and override grid classes targeted at smaller devices. Therefore,
-e.g. applying any <code>.col-md-*</code> class to an element will not only affect
-its styling on medium devices but also on large devices if a <code>.col-lg-*</code> class is not present.
-
-
-
-
-
-*/

package/sass/styleguide/_section-patterns.scss

@@ -1,11 +0,0 @@
-/*doc
----
-title: Overview
-name: 0_overview-patterns
-category: Patterns
----
-
-<p class="lead">Over a dozen reusable components built to provide iconography, dropdowns,
-    input groups, navigation, alerts, and much more.</p>
-
-*/

package/sass/styleguide/_section-styles.scss

@@ -1,9 +0,0 @@
-/*doc
----
-title: Overview
-name: 0_overview-styles
-category: Styles
----
-
-<p class="lead">Foundations, including colour, personality, writing style, and type</p>
-*/

package/sass/styleguide/_style-1-colors.scss

@@ -1,126 +0,0 @@
-/*doc
----
-title: Colours
-name: 1_colours
-category: Styles
----
-
-<p class="lead">Concrete uses a specific color palette to communicate meaning,
-convey visual differentiation, and provide a consistent look and feel.
-From neutrals to brights, each hue is chosen to fit into the overall visual
-language and promote a contemporary and vibrant user experience.</p>
-
-<p>Most of the colours can be found in utilities/_variables.scss file. 
-
-Background color - 
-Accent color -
-Border color
-
-There are some colors where we darken or lighten colors. Feel free to use those SCSS mixins.
-</p>
-
-
-##Base
-
-<table class="table color-table">
-    <tbody>
-        <tr>
-            <td><div class="swatch" style="background-color: #5470ac;"></div>Accent color</td>
-            <td><pre class="inline">$accent-color</pre></td>
-        </tr>
-        <tr>
-            <td><div class="swatch" style="background-color: #e5e7ef;"></div>Light accent color</td>
-            <td><pre class="inline">$light-accent-color</pre></td>
-        </tr>        
-        <tr>
-            <td><div class="swatch" style="background-color: #3a4e78;"></div>Dark accent color</td>
-            <td><pre class="inline">$dark-accent-color</pre></td>
-        </tr>                
-    </tbody>
-</table>
-
-##Primary colors
-
-<table class="table color-table">
-    <tbody>
-        <tr>
-            <td><div class="swatch" style="background-color: #536296;"></div>Navy</td>
-            <td><pre class="inline">$navy</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch" style="background-color: #1c84c6;"></div>Blue</td>
-            <td><pre class="inline">$blue</pre> <pre class="inline">$info</pre></td>
-        </tr>        
-        <tr>
-            <td><div class="swatch" style="background-color: #ce932c;"></div>Mustard</td>
-            <td><pre class="inline">$mustard</pre></td>
-        </tr>                    
-        <tr>
-            <td><div class="swatch" style="background-color: #a94442;"></div>Red</td>
-            <td><pre class="inline">$red</pre></td>
-        </tr>        
-        <tr>
-            <td><div class="swatch" style="background-color: #2a7a44;"></div>Green</td>
-            <td><pre class="inline">$green</pre></td>
-        </tr>                     
-    </tbody>
-</table>
-
-##Blues
-
-<table class="table color-table">
-    <tbody>      
-        <tr>
-            <td><div class="swatch" style="background-color: #292c36;"></div>Navyblue</td>
-            <td><pre class="inline">$navyblue</pre></td>
-        </tr>        
-        <tr>
-            <td><div class="swatch" style="background-color: #565c71;"></div>Light navyblue</td>
-            <td><pre class="inline">$light-navyblue</pre></td>
-        </tr>                    
-        <tr>
-            <td><div class="swatch" style="background-color: #1e2028;"></div>Dark navyblue</td>
-            <td><pre class="inline">$dark-navyblue</pre></td>
-        </tr>        
-        <tr>
-            <td><div class="swatch" style="background-color: #131419;"></div>Darker navyblue</td>
-            <td><pre class="inline">$darker-navyblue</pre></td>
-        </tr>                     
-    </tbody>
-</table>
-
-
-##Greys
-
-<table class="table color-table">
-    <tbody>
-        <tr>
-            <td><div class="swatch" style="background-color: #676a6c;"></div>Grey</td>
-            <td><pre class="inline">$grey</pre></td>
-        </tr>        
-        <tr>
-            <td><div class="swatch" style="background-color: #969696;"></div>Med grey</td>
-            <td><pre class="inline">$medium-grey</pre></td>
-        </tr>                    
-        <tr>
-            <td><div class="swatch" style="background-color: #bebebe;"></div>Light grey</td>
-            <td><pre class="inline">$light-grey</pre></td>
-        </tr>        
-        <tr>
-            <td><div class="swatch" style="background-color: #d8d8d8;"></div>Lighter grey</td>
-            <td><pre class="inline">$lighter-grey</pre></td>
-        </tr>                     
-        <tr>
-            <td><div class="swatch" style="background-color: #ececec;"></div>Lightest grey</td>
-            <td><pre class="inline">$lightest-grey</pre></td>
-        </tr>                             
-    </tbody>
-</table>
-
-
-
-
-
-
-
-*/

package/sass/styleguide/_style-2-icons.scss

@@ -1,90 +0,0 @@
-/*doc
----
-title: Icons and Logos
-name: 2_icons
-category: Styles
----
-
-<p class="lead">Includes over 250 glyphs in font format from the <a href="https://fortawesome.github.io/Font-Awesome/cheatsheet/">
-Font Awesome Icons set</a>. You can place Font Awesome icons just about anywhere with <code>i</code> tag.</p>
-
-You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name.
-Font Awesome is designed to be used with inline elements (we like the `<i>` tag for brevity, but using a `<span>`
-is more semantically correct).
-
-```html_example
-<i class="fa fa-camera-retro"></i> fa-camera-retro
-```
-
-To increase icon sizes relative to their container, use the <code>fa-lg</code> (33% increase),
-<code>fa-2x</code>, <code>fa-3x</code>, <code>fa-4x</code>, or <code>fa-5x</code> classes.
-
-```html_example
-<i class="fa fa-camera-retro fa-lg"></i> fa-lg
-<i class="fa fa-camera-retro fa-2x"></i> fa-2x
-<i class="fa fa-camera-retro fa-3x"></i> fa-3x
-<i class="fa fa-camera-retro fa-4x"></i> fa-4x
-<i class="fa fa-camera-retro fa-5x"></i> fa-5x
-```
-
-Use <code>fa-border</code> and <code>fa-pull-right</code> or <code>fa-pull-left</code>
-for easy pull quotes or article icons.
-
-
-```html_example
-<i class="fa fa-quote-left fa-2x fa-pull-left fa-border"></i>
-...tomorrow we will run faster, stretch out our arms farther...
-And then one fine morning— So we beat on, boats against the
-current, borne back ceaselessly into the past.
-```
-
-##Central icons
-
-```html_example
-<div class="bs-glyphicons">
-    <ul class="bs-glyphicons-list">
-        <li>
-            <i class="fa fa-th fa-2x"></i><br />
-            <code>Dashboard</code>
-        </li>
-        <li>
-            <i class="fa fa-user fa-2x"></i><br />
-            <code>Accounts</code>
-        </li>
-        <li>
-            <i class="fa fa-clock-o fa-2x"></i><br />
-            <code>Bookings</code>
-        </li>
-        <li>
-            <i class="fa fa-list-alt fa-2x"></i><br />
-            <code>Courses</code>
-        </li>
-        <li>
-            <i class="fa fa-folder-o fa-2x"></i><br />
-            <code>Resources</code>
-        </li>
-        <li>
-            <i class="fa fa-building fa-2x"></i><br />
-            <code>Centres</code>
-        </li>
-        <li>
-            <i class="fa fa-bullseye fa-2x"></i><br />
-            <code>Equipment</code>
-        </li>
-        <li>
-            <i class="fa fa-cube fa-2x"></i><br />
-            <code>Products</code>
-        </li>
-        <li>
-            <i class="fa fa-truck fa-2x"></i><br />
-            <code>Orders</code>
-        </li>
-        <li>
-            <i class="fa fa-check-square-o fa-2x"></i><br />
-            <code>Tasks</code>
-        </li>
-    </ul>
-</div>
-```
-
-*/

package/sass/styleguide/_style-3-typography.scss

@@ -1,139 +0,0 @@
-/*doc
----
-title: Typography
-name: 3-typography
-category: Styles
----
-
-<p class="lead">Typography is a powerful tool. When used effectively, the
-right font commands attention, elicits emotions, and above all, creates a
-voice. It’s why typography is such an essential component of our
-brand’s visual identity.</p>
-
-You can find most of the styles in <code>base/_typography.scss</code>
-
-##Font
-
-For this current project, we decided to move to the lighter, friendlier, and more
-legible, [Roboto](http://www.wired.com/2014/07/how-googles-new-font-tries-to-anticipate-the-future/).
-
-<h1 class="m-none">Roboto, Segoe UI, Fira Sans</h1>
-<p class="m-none">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
-<p class="m-none">abcdefghijklmnopqrstuvwxyz</p>
-<p class="m-none">01234567890!@#$%^&*()</p>
-
-<div class="codeBlock">
-<div class="highlight">
-<pre>
-font-family: "Roboto", "Segoe UI", "Fira Sans", "Droid Sans",
-    "Helvetica Neue", "Arial", sans-serif;;
-font-weight: 300;
-</pre>
-</div>
-</div>
-
-
-##Headings
-All HTML headings, `<h1>` through `<h6>`, are available. <code>.h1</code> through <code>.h6</code>
-classes are also available, for when you want to match the font styling of a heading but
-still want your text to be displayed inline.
-
-
-```html_example
-<h1>h1. Concrete heading</h1>
-<h2>h2. Concrete heading</h2>
-<h3>h3. Concrete heading</h3>
-<h4>h4. Concrete heading</h4>
-<h5>h5. Concrete heading</h5>
-<h6>h6. Concrete heading</h6>
-```
-
-
-Create lighter, secondary text in any heading with a generic `<small>` tag or the <code>.small</code> class.
-
-```html_example
-<h1>h1. Concrete heading <small>Secondary text</small></h1>
-<h2>h2. Concrete heading <small>Secondary text</small></h2>
-<h3>h3. Concrete heading <small>Secondary text</small></h3>
-<h4>h4. Concrete heading <small>Secondary text</small></h4>
-<h5>h5. Concrete heading <small>Secondary text</small></h5>
-<h6>h6. Concrete heading <small>Secondary text</small></h6>
-```
-
-##Subheadings
-
-Subheadings are best used when there's a need for a more distinct form of labeling. 
-
-```html_example
-	<ul class="agile-list bg-change">
-		<li>
-			<div class="row odd" data-toggle="collapse" data-target="#payment" title="Expand" aria-expanded="true">
-                <div class="col-lg-6">
-                    <div class="m-b-xxs">
-                        <div><a><i class="fa fa-caret-down"></i> 21 Nov, 2015</a></div>
-                        <div class="lh-sm">
-                            <span class="sub-heading">COURSE</span><br>
-                            Simulation Coordinator Training
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-6">
-                    <div class="row">
-                        <div class="col-xs-5 col-md-5 col-lg-12 col-xl-5 lg-r-a m-b-xxs">
-                            <div class="lh-sm">
-                                <span class="sub-heading">TOTAL</span><br>
-                                $795.00
-                            </div>
-                        </div>
-
-                        <div class="col-xs-7 col-md-7 col-lg-12 col-xl-7 text-right">
-                            <div class="lh-sm">
-                                <span class="sub-heading">STATUS</span><br>
-                                <span class="text-red"><strong>UNPAID</strong></span>
-                            </div>
-                        </div>
-                    </div><!-- END row -->  
-                </div><!-- END col -->  
-            </div>
-
-			<div id="paymenta" aria-expanded="true"> 
-		        <div class="row even">
-		            <div class="col-xs-12">
-		                <span class="sub-heading">CUSTOMER REF #</span>                                
-		                <span class="pull-right m-l-xs">010536970059827</span>
-		            </div>
-		        </div>                                   
-		        <div class="row even">
-		            <div class="col-lg-6">
-		                <div class="m-b-xs">
-		                    <div class="lh-sm">
-		                        <span class="sub-heading">PAYMENT CATEGORY</span><br>
-		                        Queensland Health
-		                    </div>
-		                </div>
-		            </div>
-		            <div class="col-lg-6">
-		                <div class="row">
-		                    <div class="col-xs-5 col-md-5 col-lg-12 col-xl-5 lg-r-a m-b-xxs">
-		                        <div class="lh-sm">
-		                            <span class="sub-heading">AMOUNT</span><br>
-		                            $795.00
-		                        </div>
-		                    </div>
-
-		                    <div class="col-xs-7 col-md-7 col-lg-12 col-xl-7 text-right">
-		                        <div class="lh-sm float-e-margins">
-		                            <button class="btn btn-sm btn-grey" data-toggle="modal" data-target="#deletepayment" title="Delete">Delete</button>
-		                            <button class="btn btn-sm btn-grey" data-toggle="modal" data-target="#">Quote</button>
-		                        </div>
-		                    </div>
-		                </div><!-- END row -->
-		            </div><!-- END col -->  
-		        </div><!-- END row -->
-		    </div>
-		</li>	    
-   	</ul>
-```
-
-
-*/