concisecss 0.0.1

data/app/assets/stylesheets/base/_main.scss

@@ -0,0 +1,29 @@
+@if $use-main == true {
+    //------------------------------------//
+    //  $MAIN
+    //------------------------------------//
+    @if $global-border-box == true {
+        *{
+            &,
+            &:before,
+            &:after {
+                @include vendor(box-sizing, border-box);
+            }
+        }
+    }
+
+    html, 
+    body {
+        background-color: #fff;
+        color: $base-font-color;
+        font: normal normal #{($base-font-size/16px)*1em}/#{$line-height-ratio} $base-font-family;
+        margin: 0;
+        
+        font-smooth: always;
+        
+        -webkit-font-smoothing: antialiased;
+        -moz-font-smoothing: antialiased;
+    }
+
+    html[dir="rtl"] { direction: rtl; }
+}

data/app/assets/stylesheets/base/_selection.scss

@@ -0,0 +1,21 @@
+@if $use-selection == true {
+    //------------------------------------//
+    //  $SELECTION
+    //------------------------------------//
+    * {
+        &::-webkit-selection {
+            background-color: $selection-background;
+            color: $selection-color;
+        }
+        
+        &::-moz-selection {
+            background-color: $selection-background;
+            color: $selection-color;
+        }
+        
+        &::selection {
+            background-color: $selection-background;
+            color: $selection-color;
+        }
+    }
+}

data/app/assets/stylesheets/base/_tables.scss

@@ -0,0 +1,83 @@
+@if $use-tables == true {
+    //------------------------------------//
+    //  $TABLES
+    //------------------------------------//
+    table {
+        &.table {
+            empty-cells: show;
+            width: 100%;
+            
+            caption {
+                color: #000;
+                font: italic 85%/1 arial, sans-serif;
+                padding: 1em 0;
+                text-align: center;
+            }
+            
+            thead { border-bottom: 2px solid #ededed; }
+            
+            th { padding: 12px 15px; }
+            
+            td {
+                padding: 12px 15px;
+                border-top: 1px solid #ededed;
+            }
+        }
+        
+        
+        // Background colors
+        .bg-light-green { color: $color-green; }
+        
+        .bg-light-blue { color: $color-blue; }
+        
+        .bg-light-yellow { color: $color-yellow; }
+        
+        .bg-light-red { color: $color-red; }
+        
+        
+        // Full-width table
+        &.table-full,
+        &.table.table-full { width: 100%; }
+        
+        
+        // Borders
+        &.table-border-all, &.table-border-outer { border: 1px solid #ededed; }
+        
+        &.table-border-all {
+            th, 
+            td { border-right: 1px solid #ededed; }
+        }
+        
+        &.table-border-inner {
+            th, 
+            td { border-right: 1px solid #ededed; }
+        }
+        
+        
+        // Hovers
+        &.table-hover-row tr:hover td, 
+        &.table-hover-cell td:hover { background-color: #f9f9f9; }
+        
+        
+        // Striped
+        &.table-fill-even tbody tr:nth-child(even), 
+        &.table-fill-odd tbody tr:nth-child(odd) { background-color: #f9f9f9; }
+    }
+
+    @include breakpoint(extra-small) {
+        table.table {
+            width: auto;
+            
+            th, td { padding: 10px 50px 10px 25px; }
+        }
+    }
+
+
+    // Responsive tables
+    .table-responsive {
+        overflow: auto;
+        width: 100%;
+        
+        table { margin-bottom: 0; }
+    }
+}

data/app/assets/stylesheets/base/_type.scss

@@ -0,0 +1,64 @@
+@if $use-typography == true {
+    //------------------------------------//
+    //  $TYPE
+    //------------------------------------//
+    // Links
+    a {
+        color: $base-link-color; 
+        text-decoration: none;
+        
+        &:hover, 
+        &:visited {
+            color: lighten($base-link-color, 10%);
+            cursor: pointer;
+            text-decoration: underline;
+        }
+    }
+
+    p a {
+        line-height: inherit;
+        
+        &:visited { line-height: inherit; }
+    }
+
+
+    // Sizing
+    small, 
+    .small {
+        @include font-size($small-size); 
+    }
+
+    .micro { 
+        @include font-size($micro-size); 
+    }
+
+
+    // Addresses
+    address {
+        font-style: normal;
+        
+        > strong { display: block; }
+    }
+
+
+    // Other elements
+    abbr {
+        &[title], &[data-original-title] {
+            cursor: help;
+            border-bottom: 1px dotted #999;
+        }
+    }
+
+    acronym {
+        cursor: help;
+        border-bottom: 1px dashed blue;
+    }
+
+    kbd {
+        background-color: #333;
+        border-radius: 4px;
+        color: #fff;
+        font-size: 90%;
+        padding: 1px 4px;
+    }
+}

data/app/assets/stylesheets/concise.scss

@@ -0,0 +1,104 @@
+/**
+ * # Concise.CSS
+ * http://github.com/ConciseCSS/concise.css
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+
+
+//------------------------------------//
+//  $CONTENTS
+//------------------------------------//
+// 
+// CONTENTS
+// IMPORTS
+//
+// MIXINS
+// NORMALIZE
+// CLEARFIX
+// SHARED
+//
+// MAIN
+// SELECTION
+// CONTAINER
+// TYPE
+// HEADINGS
+// BLOCKQUOTES
+// LISTS
+// TABLES
+// FORMS
+// GRID
+//
+// COLORS
+// BUTTONS
+// GROUPS
+// DROPDOWNS
+// NAVIGATION
+// BREADCRUMBS
+// WELLS
+// BADGES
+// PROGRESS
+//
+// HELPER
+// CONDITIONAL
+// PRINT
+// DEBUG
+//
+//
+ 
+ 
+ 
+
+//------------------------------------//
+//  $IMPORTS  
+//------------------------------------// 
+// Generic utility styles
+@import "defaults";
+@import "generic/mixins";
+@import "generic/normalize";
+@import "generic/clearfix";
+@import "generic/shared";
+
+
+
+
+// Base styles
+@import "base/main";
+@import "base/selection";
+@import "base/container";
+@import "base/type";
+@import "base/headings";
+@import "base/blockquotes";
+@import "base/lists";
+@import "base/tables";
+@import "base/forms";
+@import "base/grid";
+
+
+
+
+// Objects and abstractions
+@import "objects/colors";
+@import "objects/buttons";
+@import "objects/groups";
+@import "objects/dropdowns";
+@import "objects/navigation";
+@import "objects/breadcrumbs";
+@import "objects/wells";
+@import "objects/badges";
+@import "objects/progress";
+
+
+
+
+// Helper classes
+@import "generic/helper";
+@import "generic/conditional";
+@import "generic/print";
+@import "generic/debug";

data/app/assets/stylesheets/generic/_clearfix.scss

@@ -0,0 +1,12 @@
+@if $use-clearfix == true {
+    //------------------------------------//
+    //  $CLEARFIX
+    //------------------------------------//
+    .clearfix {
+         &:after{
+            content: "";
+            display: table;
+            clear: both;
+        }
+    }
+}

data/app/assets/stylesheets/generic/_conditional.scss

@@ -0,0 +1,122 @@
+@if $use-conditional == true {
+    //------------------------------------//
+    //  $CONDITIONAL
+    //------------------------------------//
+    .show-extra-small, 
+    .hide-small, 
+    .hide-medium, 
+    .hide-large, 
+    .hide-extra-large, 
+    .hide-print, 
+    .hide-hd {
+        display: block;
+        visibility: visible;
+    }
+    
+    .hide-extra-small,
+    .show-small,
+    .show-medium, 
+    .show-large, 
+    .show-extra-large, 
+    .show-print, 
+    .show-hd {
+        display: none;
+        visibility: hidden;
+    }
+
+    @include breakpoint(small) {
+        .show-small,
+        .hide-extra-small, 
+        .hide-medium,
+        .hide-large,
+        .hide-extra-large {
+            display: block;
+            visibility: visible;
+        }
+        
+        .hide-small,
+        .show-extra-small,
+        .show-medium,
+        .show-large, 
+        .show-extra-large {
+            display: none;
+            visibility: hidden;
+        }
+    }
+    
+    @include breakpoint(medium) {
+        .show-medium,
+        .hide-small,
+        .hide-extra-small, 
+        .hide-large,
+        .hide-extra-large {
+            display: block;
+            visibility: visible;
+        }
+        
+        .hide-medium,
+        .show-small,
+        .show-extra-small,
+        .show-large, 
+        .show-extra-large {
+            display: none;
+            visibility: hidden;
+        }
+    }
+
+    @include breakpoint(large) {
+        .show-large,
+        .hide-extra-small,
+        .hide-small, 
+        .hide-medium,
+        .hide-extra-large {
+            display: block;
+            visibility: visible;
+        }
+        
+        .hide-large,
+        .show-extra-small,
+        .show-small, 
+        .show-medium, 
+        .show-extra-large {
+            display: none;
+            visibility: hidden;
+        }
+    }
+    
+    @include breakpoint(extra-large) {
+        .show-extra-large,
+        .hide-extra-small,
+        .hide-small, 
+        .hide-medium,
+        .hide-large {
+            display: block;
+            visibility: visible;
+        }
+        
+        .hide-extra-large,
+        .show-extra-small,
+        .show-small, 
+        .show-medium, 
+        .show-large {
+            display: none;
+            visibility: hidden;
+        }
+    }
+
+    // HiDPI and retina 
+    @media only screen and (-moz-min-device-pixel-ratio: 1.5), 
+           only screen and (-o-min-device-pixel-ratio: 3 / 2), 
+           only screen and (-webkit-min-device-pixel-ratio: 1.5), 
+           only screen and (min-device-pixel-ratio: 1.5) {
+        .show-hd {
+            display: block;
+            visibility: visible;
+        }
+        
+        .hide-hd {
+            display: none;
+            visibility: hidden;
+        }
+    }
+}

data/app/assets/stylesheets/generic/_debug.scss

@@ -0,0 +1,98 @@
+@if $debug-mode == true {
+    //------------------------------------//
+    //	$DEBUG
+    //------------------------------------//
+    // Big thanks to Harry Roberts of CSS Wizardry for this great
+    // tool. https://github.com/csswizardry/inuit.css/blob/master/_inuit.scss
+    
+    //
+    // Enable this stylesheet to visually detect any improperly nested or
+    // potentially invalid markup, or any potentially inaccessible code.
+    //
+    // Red          ==      definite error
+    // Yellow       ==      double-check
+    // None         ==      should be fine
+    //
+    // Please note that this method of checking markup quality should not be relied
+    // upon entirely. Validate your markup!
+    //
+
+
+    // Are there any empty elements in your page?
+    :empty { outline: 5px solid yellow; }
+
+
+    // Images require `alt` attributes, empty `alt`s are fine but should be
+    // double-checked, no `alt` is bad and is flagged red.
+    img { outline:5px solid red; }
+    
+    img[alt] { outline:none; }
+    
+    img[alt=""] { outline:5px solid yellow; }
+
+
+    // Links sometimes, though not always, benefit from `title` attributes. Links
+    // without are never invalid but it’s a good idea to check.
+    a { outline:5px solid yellow; }
+    
+    a[title] { outline:none; }
+
+
+    // Double-check any links whose `href` is something questionable.
+    a[href="#"],
+    a[href*="javascript"] { outline:5px solid yellow; }
+
+
+    // The `target` attribute ain’t too nice...
+    a[target] { outline:5px solid yellow; }
+
+
+    // Ensure any lists only contain `li`s as children.
+    ul,
+    ol {
+        > *:not(li) { outline:5px solid red; }
+    }
+
+
+    // It’s always nice to give `th`s `scope` attributes.
+    th { outline:5px solid yellow; }
+    
+    th[scope] { outline:none; }
+
+
+    // `tr`s as children of `table`s ain’t great, did you need a `thead`/`tbody`?
+    table > tr { outline:5px solid yellow; }
+
+
+    // `tfoot` needs to come *before* `tbody`.
+    tbody + tfoot { outline:5px solid yellow; }
+
+
+    // Forms require `action` attributes
+    form { outline:5px solid red; }
+    
+    form[action] { outline:none; }
+
+
+    // Various form-field types have required attributes. `input`s need `type`
+    // attributes, `textarea`s need `rows` and `cols` attributes and submit buttons
+    // need a `value` attribute.
+    textarea,
+    input { outline:5px solid red; }
+    
+    input[type] { outline:none; }
+    
+    textarea[rows][cols] { outline:none; }
+    
+    input[type=submit] { outline:5px solid red; }
+    
+    input[type=submit][value] { outline:none; }
+
+
+    // Avoid inline styles where possible.
+    [style] { outline:5px solid yellow; }
+
+
+    // You should avoid using IDs for CSS, is this doing any styling?
+    [id]{ outline:5px solid yellow; }
+}

data/app/assets/stylesheets/generic/_helper.scss

@@ -0,0 +1,117 @@
+@if $use-helper == true {
+    //------------------------------------//
+    //  $HELPER
+    //------------------------------------//
+    // Add/remove floats
+    .float-left { float: left !important; }
+
+    .float-right { float: right !important; }
+
+    .float-none { float: none !important; }
+
+
+    // Position elements
+    .align-center {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .no-margin { margin: 0 !important; }
+
+    .icon-alone { display: inline-block; }
+
+
+    // Displaying content
+    .inline { display: block; }
+
+    @include breakpoint(extra-small) { .inline { display: inline; } }
+
+    .show {
+        display: block;
+        visibility: visible;
+    }
+
+    .hide {
+        display: none;
+        visibility: hidden;
+    }
+
+    .screen-reader {
+        border: 0;
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+    }
+
+
+    // Full-width elements
+    .full { width: 100%; }
+
+    img.full { 
+        max-width: 100%;
+        height: auto;
+        display: block;
+        width: auto;
+    }
+
+
+    // Text alignment
+    .text-left { text-align: left; }
+
+    .text-right { text-align: right; }
+
+    .text-center { text-align: center; }
+
+    .text-justify { text-align: justify; }
+
+
+    // Font weights
+    .weight-light { font-weight: 300 !important; }
+
+    .weight-normal { font-weight: 400 !important; }
+
+    .weight-semibold { font-weight: 600 !important; }
+
+
+    // All-caps text
+    .text-uppercase { text-transform: uppercase; }
+
+
+    // Stylized ampersand
+    .amp { font: italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif !important; }
+
+
+    // Hide text 
+    .text-hide {
+        border: 0;
+        background-color: transparent;
+        color: transparent;
+        font: 0 / 0 a;
+        text-shadow: none;
+    }
+
+
+    // Caret icon
+    .caret {
+        border-top: 5px solid;
+        border-right: 5px solid transparent;
+        border-left: 5px solid transparent;
+        display: inline-block;
+        margin: 0 0 3px 4px;
+        vertical-align: middle;
+        width: 0;
+    }
+
+
+    // Border radius
+    .border-radius { border-radius: $border-radius; }
+    
+    
+    // Pill style
+    .pill { border-radius: 25px; }
+}