@csdsesystems/central-styles 1.0.3 → 1.0.4

package/sass/styleguide/_style-4-spacing.scss

@@ -1,85 +0,0 @@
-/*doc
----
-title: Spacing
-name: 4-spacing
-category: Styles
----
-
-Margins and padding define the reading area of your page by separating main text from
-surrounding environment. They provide important visual relief in any document.
-With Concrete, we wanted to make the entire process of wireframing as flexible
-as possible. This meant giving the designers an ability to quickly add and strip
-margins and paddings on an element.
-
-##Example
-This is a typical <code>h1</code> tag. As you can see, by default, there's a considerable
-amount of top margin.
-
-```html_example
-<h1>Example of header</h1>
-```
-
-You can remove all margins, or you can also remove margins on a side by side basis.
-
-```html_example
-<h1 class="m-none">Example of header</h1>
-<h1 class="m-t-none">Example of header</h1>
-<h1 class="m-b-none">Example of header</h1>
-<h1 class="m-l-none">Example of header</h1>
-<h1 class="m-r-none">Example of header</h1>
-```
-
-```html_example
-<div class="row">
-    <div class="col-lg-2">
-        <div class="widget red-bg">Default padding</div>
-    </div>
-    <div class="col-lg-2">
-        <div class="widget red-bg p-none">No padding</div>
-    </div>
-    <div class="col-lg-2">
-        <div class="widget red-bg p-t-none">No top padding</div>
-    </div>
-    <div class="col-lg-2">
-        <div class="widget red-bg p-b-none">No bottom padding</div>
-    </div>
-    <div class="col-lg-2">
-        <div class="widget red-bg p-r-none">No right padding</div>
-    </div>
-    <div class="col-lg-2">
-        <div class="widget red-bg p-l-none">No left padding</div>
-    </div>
-</div>
-```
-
-At this stage, it's easy to see the pattern. <code>p-r-none</code> obviously
-refers to `padding-right-none` and that <code>m-r-none</code> `means margin-right-none`.
-
-###Complete list of margin and padding modifier classes
-
-Padding class | Definition | Margin class | Definition
---- | --- | --- | ----
-<code>p-none</code> | No padding | <code>m-none</code> | No margin
-<code>p-t-none</code> | No top padding | <code>m-t-none</code> | No top margin
-<code>p-t-xxs</code> | Super extra small top padding | <code>m-t-xxs</code> | Super extra small top margin
-<code>p-t-xs</code> | Extra small top padding | <code>m-t-xxs</code> | Extra small top margin
-<code>p-t-sm</code> | Small top padding | <code>m-t-sm</code> | Small top margin
-<code>p-t-m</code> | Medium top padding | <code>m-t-m</code> | Medium top margin
-<code>p-r-none</code> | No right padding | <code>m-r-none</code> | No right margin
-<code>p-r-xxs</code> | Super extra small right padding | <code>m-r-xxs</code> | Super extra small right margin
-<code>p-r-xs</code> | Extra small right padding | <code>m-r-xxs</code> | Extra small right margin
-<code>p-r-sm</code> | Small right padding | <code>m-r-sm</code> | Small right margin
-<code>p-r-m</code> | Medium right padding | <code>m-r-m</code> | Medium right margin
-<code>p-b-none</code> | No bottom padding | <code>m-b-none</code> | No bottom margin
-<code>p-b-xxs</code> | Super extra smal bottom padding | <code>m-b-xxs</code> | Super extr small bottom margin
-<code>p-b-xs</code> | Extra smallbottom padding | <code>m-b-xxs</code> | Extr small bottom margin
-<code>p-b-sm</code> | Small botto padding | <code>m-b-sm</code> | Small botto margin
-<code>p-b-m</code> | Medium bottom padding | <code>m-b-m</code> | Medium bottom margin
-<code>p-l-none</code> | No left padding | <code>m-l-none</code> | No left margin
-<code>p-l-xxs</code> | Super extra small left padding | <code>m-l-xxs</code> | Super extra small left margin
-<code>p-l-xs</code> | Extra small left padding | <code>m-l-xxs</code> | Extra small left margin
-<code>p-l-sm</code> | Small left padding | <code>m-l-sm</code> | Small left margin
-<code>p-l-m</code> | Medium left padding | <code>m-l-m</code> | Medium left margin
-
-
-*/

package/sass/styleguide/_style-5-borders.scss

@@ -1,56 +0,0 @@
-/*doc
----
-title: Borders
-name: 5-borders
-category: Styles
----
-
-The <code>.border</code> class defines the border style and color with no width.
-Additional variations of this define the side(s) of the element
-
-```html_example
-<div class="row">
-    <div class="col-lg-3">
-        <div class="box b-t">
-            Top border
-        </div>
-    </div>
-    <div class="col-lg-3">
-        <div class="box b-r">
-            Right border only
-        </div>
-    </div>
-    <div class="col-lg-3">
-        <div class="box b-b">
-            Bottom border only
-        </div>
-    </div>
-    <div class="col-lg-3">
-        <div class="box b-l">
-            Left border only
-        </div>
-    </div>
-    <div class="col-lg-3">
-        <div class="box b-none">
-            No border
-        </div>
-    </div>
-    <div class="col-lg-3">
-        <div class="box boxed b-t-none">
-            No top border
-        </div>
-    </div>
-    <div class="col-lg-3">
-        <div class="box b-tb">
-            Top and bottom border only
-        </div>
-    </div>
-    <div class="col-lg-3">
-        <div class="box b-lr">
-            Left and right border only
-        </div>
-    </div>
-</div>
-```
-
-*/

package/sass/styleguide/_style-6-helpers.scss

@@ -1,184 +0,0 @@
-/*doc
-
----
-title: Helpers
-name: helpers
-category: Styles
----
-
-##Contextual colours
-Convey meaning through color with a handful of emphasis utility classes.
-These may also be applied to links and will darken on hover just like our default link
-styles.
-
-```html_example
-<p class="text-info">Adele's awesome. Take that, Kanye. </p>
-<p class="text-success">Good job, Adele!</p>
-<p class="text-warning">Is that Kanye West behind you, Adele?</p>
-<p class="text-danger">Yes, it's Kanye West! Run, Adele, run!</p>
-
-<p class="text-purple">In use</p>
-<p class="text-navy">text-navy</p>
-
-<p class="text-orange">Inspection</p>
-<p class="text-pink">Repair</p>
-```
-
-Due to our fascination with colour names, we ended up creating aliases
-for the following class modifiers. We don't recommend using the colour aliases.
-We are currently working on deprecating these aliases in future releases.
-
--------------------------------------------------
-Class modifier       | Alias
----------------------|---------------------------
-<code>text-warning</code> | <code>text-yellow</code>, <code>text-mustard</code>
-<code>text-danger</code> | <code>text-red</code>
-<code>text-success</code> | <code>text-green</code>
-
-We also created a modifier class that you can use to dilute the opacity of a type element.
-
-```html_example
-<p class="text-info">Adele's awesome. Take that, Kanye. </p>
-<p class="text-info text-muted">Adele's awesome. Take that, Kanye. </p>
-
-<p class="text-success">Good job, Adele!</p>
-<p class="text-success text-muted">Good job, Adele!</p>
-```
-
-##Alignment classes
-
-Easily realign text to components with text alignment classes.
-
-```html_example
-<p class="text-left">Left aligned text.</p>
-<p class="text-center">Center aligned text.</p>
-<p class="text-right">Right aligned text.</p>
-<p class="text-justify">Justified text.</p>
-<p class="text-nowrap">No wrap text.</p>
-```
-
-##Contextual backgrounds
-
-Similar to the contextual text color classes, easily set the background of an
-element to any contextual class. 
-
-<table class="table color-table">
-    <tbody>
-        <tr>
-            <td><div class="swatch navy-bg"></div>Navy</td>
-            <td><pre class="inline">class = "navy-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch navy-lighter-grey-bg"></div>Navy lighter grey</td>
-            <td><pre class="inline">class = "navy-lighter-grey-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch yellow-bg"></div>Yellow</td>
-            <td><pre class="inline">class = "yellow-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch red-bg"></div>Red</td>
-            <td><pre class="inline">class = "red-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch red-inverted-bg"></div>Inverted red</td>
-            <td><pre class="inline">class = "red-inverted-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch grey-bg"></div>Grey</td>
-            <td><pre class="inline">class = "grey-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch light-grey-bg"></div>Light grey</td>
-            <td><pre class="inline">class = "light-grey-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch lighter-grey-bg"></div>Lighter grey</td>
-            <td><pre class="inline">class = "lighter-grey-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch Lightest grey"></div>Lightest grey</td>
-            <td><pre class="inline">class = "Lightest grey"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch info-bg"></div>Info</td>
-            <td><pre class="inline">class = "info-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch brown-bg"></div>Brown</td>
-            <td><pre class="inline">class = "brown-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch green-bg"></div>Green</td>
-            <td><pre class="inline">class = "green-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch neongreen-bg"></div>Neon Green</td>
-            <td><pre class="inline">class = "neongreen-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch lightgreen-bg"></div>Light green</td>
-            <td><pre class="inline">class = "lightgreen-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch orange-bg"></div>Orange</td>
-            <td><pre class="inline">class = "orange-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch orange-lighter-grey-bg"></div>Orange x lighter grey</td>
-            <td><pre class="inline">class = "orange-lighter-grey-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch orange-peel"></div>Orange peel</td>
-            <td><pre class="inline">class = "orange-peel"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch orange-peel-lighter-grey-bg"></div>Orange peel x lighter grey</td>
-            <td><pre class="inline">class = "orange-peel-lighter-grey-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch pink-bg"></div>Pink</td>
-            <td><pre class="inline">class = "pink-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch pink-lighter-grey-bg"></div>Pink with lighter grey</td>
-            <td><pre class="inline">class = "pink-lighter-grey-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch purple-bg"></div>Purple</td>
-            <td><pre class="inline">class = "purple-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch teal-bg"></div>Teal</td>
-            <td><pre class="inline">class = "teal-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch teal-lighter-grey-bg"></div>Teal x lighter grey</td>
-            <td><pre class="inline">class = "teal-lighter-grey-bg"</pre></td>
-        </tr>            
-        <tr>
-            <td><div class="swatch deepblue-bg"></div>Deep blue</td>
-            <td><pre class="inline">class = "deepblue-bg"</pre></td>
-        </tr>            
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-                   
-    </tbody>
-</table>
-
-
-*/

package/sass/styleguide/index.md

@@ -1,31 +0,0 @@
-#Concrete - A living style guide for Central
-
-##Central
-
-**Central** is an enterprise application developed by the [Clinical Skills Development Service (CSDS)](https://www.sdc.qld.edu.au) to manage delivery of healthcare training and education. Central supports CSDS's ongoing commitment to improving learning solutions for education providers to that enhance the education of clinicians, improve clinical service delivery, and contribute to better clinical outcomes for patients.
-
----
-
-##Concrete
-
-**Concrete** is a design system reflects the components and patterns that underpin Central. The system provides a unified language and consistent feel when designing modules within Central.
-
-###Overview
-
-At present, Concrete serves two purposes. It's a repository for common user interface elements and patterns across Central. It is also a usable tool which can be used and incorporated in to any project that wants to branch off from what we have done here.
-
-Concrete is Central's internal CSS framework.It includes basic global styling for typography, small components like buttons and tabs, and our general guidelines for writing HTML and CSS. It's currently being used in the Equipment section of Central.
-
-Concrete is based on the [Bootstrap Framework](http://getbootstrap.com) and the [Inspinia Responsive Admin Theme](https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S).
-
-###Browser support
-
-Concrete supports the latest versions of Chrome, Firefox and Safari.
-
----
-
-##Contact
-
-Questions, thoughts? Please send us an email at [support@sdc.qld.edu.au](mailto:support@sdc.qld.edu.au).
-
-*As is the nature of all living style guides, this is a perpetual work in progress* 😄 .