concisecss 0.0.1

data/app/assets/stylesheets/objects/_buttons.scss

@@ -0,0 +1,287 @@
+@if $use-buttons == true {
+    //------------------------------------//
+    //  $BUTTONS
+    //------------------------------------//
+    .btn {
+        background-color: #ccc;
+        border: 0;
+        color: #fff;
+        cursor: pointer;
+        display: block;
+        font-size: 100%;
+        font-weight: 700;
+        letter-spacing: 1px;
+        line-height: 1;
+        margin: 12px auto;
+        outline: none;
+        padding: 15px 48px;
+        position: relative;
+        text-align: center;
+        text-transform: uppercase;
+        vertical-align: baseline;
+        white-space: nowrap;
+        width: 100%;
+        
+        -webkit-touch-callout: none;
+        
+        @include vendor(user-select, none);
+        
+        @include vendor(user-drag, none);
+        
+        @include vendor(transition, all 0.3s);
+        
+        &::-moz-focus-inner {
+            padding: 0;
+            border: 0;
+        }
+        
+        &:after {
+            content: "";
+            position: absolute;
+            z-index: -1;
+        }
+        
+        &:hover {
+            background-color: #b5b5b5;
+            background-image: -webkit-gradient(linear, 50, 50, 50 100%, from(rgba(50, 50, 50, 0.05)), to(rgba(50, 50, 50, 0.05)));
+            background-image: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.05), rgba(50, 50, 50, 0.05));
+            background-image: -moz-linear-gradient(top, rgba(50, 50, 50, 0.05), rgba(50, 50, 50, 0.05));
+            background-image: -o-linear-gradient(top, rgba(50, 50, 50, 0.05), rgba(50, 50, 50, 0.05));
+            background-image: linear-gradient(to bottom, rgba(50, 50, 50, 0.05), rgba(50, 50, 50, 0.05));
+            background-repeat: repeat-x;
+        }
+        
+        &:active {
+            background-image: -webkit-gradient(linear, 50, 50, 50 100%, from(rgba(50, 50, 50, 0.1)), to(rgba(50, 50, 50, 0.1)));
+            background-image: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.1), rgba(50, 50, 50, 0.1));
+            background-image: -moz-linear-gradient(top, rgba(50, 50, 50, 0.1), rgba(50, 50, 50, 0.1));
+            background-image: -o-linear-gradient(top, rgba(50, 50, 50, 0.1), rgba(50, 50, 50, 0.1));
+            background-image: linear-gradient(to bottom, rgba(50, 50, 50, 0.1), rgba(50, 50, 50, 0.1));
+            background-repeat: repeat-x;
+        }
+        
+        &[disabled] {
+            background: #dededc !important;
+            border: none;
+            color: #b3b3b1;
+            cursor: default;
+            
+            &:hover, 
+            &:active,
+            &:focus {
+                background: #dededc !important;
+                border: none;
+                color: #b3b3b1;
+                cursor: default;
+            }
+        }
+    }
+
+    @include breakpoint(small) {
+        .btn {
+            display: inline-block;
+            *display: inline;
+            margin: 0px;
+            width: auto;
+            zoom: 1;
+        }
+        
+        .btn-extra-small, 
+        a.btn-extra-small, 
+        p.btn-extra-small, 
+        input.btn-extra-small {
+            @include font-size(11px); 
+            padding: 5px 16px;
+        }
+        
+        .btn-small, 
+        a.btn-small, 
+        p.btn-small, 
+        input.btn-small {
+            @include font-size(12px); 
+            padding: 10px 32px;
+        }
+        
+        .btn-large, 
+        a.btn-large, 
+        p.btn-large, 
+        input.btn-large { padding: 20px 64px; }
+        
+        .btn-extra-large, 
+        a.btn-extra-large, 
+        p.btn-extra-large, 
+        input.btn-extra-large { padding: 25px 80px; }
+    }
+
+    a.btn {
+        color: #fff;
+        text-decoration: none;
+        
+        &:hover {
+            color: #fff;
+            text-decoration: none;
+        }
+        
+        &:active { outline: 0; }
+    }
+
+    input[type="submit"].btn {
+        color: #fff;
+        height: auto;
+    }
+
+    button.btn { color: #fff; }
+
+    .btn {
+        &.bg-white { color: #333; }
+        
+        
+        // Bordered 
+        &.btn-border {
+            background: transparent;
+            border-color: #ddd;
+            border-style: solid;
+            border-width: 1px;
+            color: #aaa;
+            
+            &:hover {
+                background: #ddd;
+                color: #fff !important;
+            }
+            
+            &.white {
+                border-color: $bg-white;
+                
+                &:hover {
+                    background: $bg-white;
+                    color: $color-black !important;
+                }
+            }
+        }
+    }
+
+
+    // Bordered white 
+    a.btn.btn-border.white:hover {
+        background: $bg-white;
+        color: $color-black !important;
+    }
+
+    .btn.btn-border.white, 
+    a.btn.btn-border.white { color: $color-white; }
+
+    .btn.btn-border {
+        &.white {
+            &:active, &:focus { background-color: #f9f9f9; }
+        }
+        
+        
+        // Bordered black 
+        &.black {
+            border-color: $bg-black;
+            color: $color-black;
+            
+            &:hover { background-color: $bg-black; }
+            
+            &:active, &:focus { background-color: $bg-black; }
+        }
+        
+        
+        // Bordered gray 
+        &.gray {
+            border-color: $bg-gray;
+            color: $color-gray;
+            
+            &:hover { background-color: $bg-gray; }
+            
+            &:active, &:focus { background-color: darken($bg-gray, 15%); }
+        }
+        
+        
+        // Bordered green 
+        &.green {
+            border-color: $bg-green;
+            color: $color-green;
+            
+            &:hover { background-color: $bg-green; }
+            
+            &:active, &:focus { background-color: darken($bg-green, 15%); }
+        }
+        
+        
+        // Bordered blue 
+        &.blue {
+            border-color: $bg-blue;
+            color: $color-blue;
+            
+            &:hover { background-color: $bg-blue; }
+        
+            &:active, &:focus { background-color: darken($bg-blue, 15%); }
+        }
+        
+        
+        // Bordered yellow 
+        &.yellow {
+            border-color: $bg-yellow;
+            color: $color-yellow;
+            
+            &:hover { background-color: $bg-yellow; }
+            
+            &:active, &:focus { background-color: darken($bg-yellow, 15%); }
+        }
+        
+        
+        // Bordered red 
+        &.red {
+            border-color: $bg-red;
+            color: $color-red;
+            
+            &:hover { background-color: $bg-red; }
+            
+            &:active, &:focus { background-color: darken($bg-red, 15%); }
+        }
+    }
+
+
+    // Dropdown 
+    .btn.dropdown {
+        width: 100%;
+        
+        .dropdown-menu {
+            margin-top: auto;
+            text-align: left;
+            top: 100%;
+            width: 100%;
+        }
+        
+        &[class*='dropdown-arrow-'] .dropdown-menu { margin-top: 10px; }
+        
+        &.up {
+            .dropdown-menu {
+                margin-bottom: 0px;
+                top: auto;
+            }
+            
+            &[class*='dropdown-arrow-'] .dropdown-menu { margin-bottom: 10px; }
+        }
+    }
+
+    @include breakpoint(small) {
+        .btn-extra-small .caret, 
+        .btn-small .caret {
+            border-top: 4px solid;
+            border-right: 4px solid transparent;
+            border-left: 4px solid transparent;
+        }
+        
+        .btn.dropdown {
+            width: auto;
+            
+            &.extra-small .dropdown-menu { margin-top: 6px; }
+            
+            &.dropdown-small .dropdown-menu { margin-top: 11px; }
+            
+            &.dropdown-large .dropdown-menu { margin-top: 21px; }
+        }
+    }
+}

data/app/assets/stylesheets/objects/_colors.scss

@@ -0,0 +1,45 @@
+@if $use-colors == true {
+    //------------------------------------//
+    //  $COLORS
+    //------------------------------------//
+    // Background colors
+    .bg-white { background-color: $bg-white !important; }
+
+    .bg-black { background-color: $bg-black !important; }
+
+    .bg-light-gray { background-color: $bg-light-gray !important; }
+
+    .bg-gray { background-color: $bg-gray !important; }
+
+    .bg-light-green { background-color: $bg-light-green !important; }
+
+    .bg-green { background-color: $bg-green !important; }
+
+    .bg-light-blue { background-color: $bg-light-blue !important; }
+
+    .bg-blue { background-color: $bg-blue !important; }
+
+    .bg-light-yellow { background-color: $bg-light-yellow !important; }
+
+    .bg-yellow { background-color: $bg-yellow !important; }
+
+    .bg-light-red { background-color: $bg-light-red !important; }
+
+    .bg-red { background-color: $bg-red !important; }
+
+
+    // Type colors 
+    .color-white { color: $color-white; }
+
+    .color-black { color: $color-black; }
+
+    .color-gray { color: $color-gray; }
+
+    .color-green { color: $color-green; }
+
+    .color-blue { color: $color-blue; }
+
+    .color-yellow { color: $color-yellow; }
+
+    .color-red { color: $color-red; }
+}

data/app/assets/stylesheets/objects/_dropdowns.scss

@@ -0,0 +1,167 @@
+@if $use-dropdowns == true {
+    //------------------------------------//
+    //  $DROPDOWNS
+    //------------------------------------//
+    .dropdown {
+        cursor: pointer;
+        outline: none;
+        position: relative;
+        width: auto;
+        
+        .dropdown-menu {
+            background-color: #fff;
+            border: 1px solid #eee;
+            border-radius: inherit;
+            font-weight: inherit;
+            left: 0;
+            margin-left: 0px;
+            opacity: 0;
+            pointer-events: none;
+            position: absolute;
+            right: 0;
+            text-transform: none;
+            z-index: 99999;
+            
+            @include vendor(transition, all 0.3s ease-in);
+            
+            a { text-decoration: none; }
+            
+            p {
+                margin: 0;
+                padding: 10px 15px;
+            }
+            
+            span { line-height: inherit; }
+            
+            img {
+                padding: 15px;
+                width: 100%;
+            }
+            
+            iframe {
+                height: auto;
+                padding: 15px;
+                width: 100%;
+            }
+            
+            img + p, iframe + p { padding-top: 0px; }
+            
+            hr { margin: 10px; }
+        }
+        
+        ul.dropdown-menu { list-style-type: none; }
+        
+        .dropdown-menu {
+            li {
+                display: block;
+                padding: 5px 10px;
+                
+                @include vendor(transition, all 0.3s ease-out);
+            }
+            
+            
+            // Rounded corners
+            &.border-radius li {
+                &:first-of-type { border-radius: $border-radius $border-radius 0 0; }
+                
+                &:last-of-type { border-radius: 0 0 $border-radius $border-radius; }
+            }
+            
+            li:hover { background-color: #f3f8f8; }
+        }
+        
+        &.dropdown-active .dropdown-menu {
+            opacity: 1;
+            pointer-events: auto;
+        }
+        
+        .header {
+            color: #aaa;
+            cursor: default;
+            font-size: 14px;
+            font-size: 0.9rem;
+            @include font-size(14px); 
+            margin: 12px 0 0;
+            padding: 0 0 0 9px;
+        }
+    }
+
+    @include breakpoint(small) {
+        .dropdown {
+            .dropdown-menu { width: 200px; }
+            
+            &.dropdown-small .dropdown-menu { width: 150px; }
+            
+            &.dropdown-large .dropdown-menu { width: 350px; }
+            
+            &.dropdown-full .dropdown-menu { width: 100%; }
+        }
+    }
+
+
+    // Headers
+    .dropdown-menu > .header { margin: 0; }
+
+    .dropdown {
+        .header:hover, 
+        li.header:hover { background: none; }
+        
+        .dropdown-menu.border-radius { border-radius: $border-radius; }
+        
+        
+        // Arrows 
+        &[class*='dropdown-arrow-'] .dropdown-menu {
+            margin-top: 10px;
+            
+            &:after {
+                border-color: #fff transparent;
+                border-style: solid;
+                bottom: 100%;
+                border-width: 0 6px 6px 6px;
+                content: "";
+                height: 0;
+                position: absolute;
+                width: 0;
+            }
+            
+            &:before {
+                border-color: rgba(0, 0, 0, 0.1) transparent;
+                border-style: solid;
+                bottom: 100%;
+                border-width: 0 8px 8px 8px;
+                content: "";
+                height: 0;
+                position: absolute;
+                width: 0;
+            }
+        }
+        
+        &.dropdown-arrow-left .dropdown-menu {
+            &:after { left: 15px; }
+            
+            &:before { left: 13px; }
+        }
+        
+        &.dropdown-arrow-right .dropdown-menu {
+            &:after { right: 15px; }
+            
+            &:before { right: 13px; }
+        }
+        
+        
+        // Dropup 
+        &.up {
+            .dropdown-menu { bottom: 100%; }
+            
+            &[class*='dropdown-arrow-'] .dropdown-menu {
+                margin-bottom: 10px;
+                
+                &:after, &:before { top: 100%; }
+                
+                &:after { border-width: 6px 6px 0 6px; }
+                
+                &:before { border-width: 8px 8px 0 8px; }
+            }
+        }
+    }
+}

data/app/assets/stylesheets/objects/_groups.scss

@@ -0,0 +1,102 @@
+@if $use-groups == true {
+    //------------------------------------//
+    //  $GROUPS
+    //------------------------------------//
+    .group {
+        display: inline-block;
+        vertical-align: bottom;
+        
+        &:after {
+            clear: both;
+            content: ".";
+            display: block;
+            height: 0;
+            visibility: hidden;
+        }
+    }
+
+    .group-item, 
+    p.group-item {
+        background-color: #fff;
+        border: 1px solid #ddd;
+        color: #666;
+        padding: 4px 7px;
+        width: auto;
+        
+        &.icon { @include font-size(14px); }
+    }
+
+    @include breakpoint(small) {
+        .group-item {
+            @include font-size($base-font-size); 
+            padding: 6px 12px;
+        }
+    }
+
+    .group-item {
+        &:hover { background-color: #f9f9f9; }
+        
+        &:active {        
+            @include vendor(box-shadow, inset 0 1px 1px rgba(100, 100, 100, 0.1));
+        }
+        
+        &.active, 
+        .active { background-color: #f2f2f2; }
+    }
+
+    .group > .group-item {
+        border-radius: 0;
+        float: left;
+        margin-left: -1px;
+    }
+
+
+    // Full-width 
+    .btn.full { width: 100%; }
+
+
+    // Rounded corners
+    .group.border-radius > .group-item {
+        &:first-child { border-radius: $border-radius 0 0 $border-radius; }
+        
+        &:last-child { border-radius: 0 $border-radius $border-radius 0; }
+    }
+
+
+    // Dropdown 
+    .group-item.dropdown .dropdown-menu {
+        margin-top: 15px;
+        text-align: inherit;
+        width: 100%;
+        
+        li a {
+            @include font-size(12px); 
+            padding: 4px 7px;
+            width: auto;
+        }
+    }
+
+    .group {
+        &.border-radius .group-item.dropdown {
+            .dropdown-menu { border-radius: 0px 0px $border-radius $border-radius; }
+            
+            &.up .dropdown-menu { border-radius: $border-radius $border-radius 0px 0px; }
+        }
+        
+        
+        // Caret icon
+        .caret {
+            border-top: 4px solid;
+            border-right: 4px solid transparent;
+            border-left: 4px solid transparent;
+        }
+    }
+
+    @include breakpoint(small) {
+        .group .caret {
+            border-top: 5px solid;
+            border-right: 5px solid transparent;
+            border-left: 5px solid transparent;
+        }
+    }
+}