From dc58946d99c02f2a00e54f400fdb09bd36863818 Mon Sep 17 00:00:00 2001 From: Benjamin S Date: Wed, 5 Nov 2014 07:40:01 +0100 Subject: [PATCH] Upgrade to 2.0.0 --- README.md | 14 +- app/assets/javascripts/concisecss/dropdown.js | 25 +- app/assets/javascripts/concisecss/naver.js | 16 +- .../javascripts/concisecss/navigation.js | 10 +- .../javascripts/concisecss/non-responsive.js | 16 +- app/assets/stylesheets/base/_headings.scss | 248 ++++++------ app/assets/stylesheets/base/_main.scss | 28 +- .../stylesheets/{generic => base}/_print.scss | 94 ++--- app/assets/stylesheets/base/_selection.scss | 24 +- app/assets/stylesheets/base/_type.scss | 40 +- .../_vertical-rhythm.scss} | 19 +- .../stylesheets/components/_buttons.scss | 174 ++++++++ .../stylesheets/components/_colors.scss | 25 ++ .../{objects => components}/_dropdowns.scss | 146 +++---- .../stylesheets/components/_navigation.scss | 133 ++++++ app/assets/stylesheets/concise.scss | 62 +-- .../stylesheets/generic/_conditional.scss | 126 ------ app/assets/stylesheets/generic/_mixins.scss | 157 ------- .../{generic => helpers}/_clearfix.scss | 8 +- .../stylesheets/helpers/_conditional.scss | 128 ++++++ .../stylesheets/helpers/_functions.scss | 32 ++ .../_helper.scss => helpers/_helpers.scss} | 67 ++- app/assets/stylesheets/helpers/_mixins.scss | 315 +++++++++++++++ .../{generic => helpers}/_normalize.scss | 70 ++-- .../_variables.scss} | 146 ++++--- app/assets/stylesheets/layout/_container.scss | 17 + app/assets/stylesheets/layout/_forms.scss | 103 +++++ app/assets/stylesheets/layout/_grid.scss | 71 ++++ app/assets/stylesheets/layout/_lists.scss | 88 ++++ app/assets/stylesheets/layout/tables.scss | 63 +++ app/assets/stylesheets/objects/_badges.scss | 53 --- .../stylesheets/objects/_breadcrumbs.scss | 35 -- app/assets/stylesheets/objects/_buttons.scss | 287 ------------- app/assets/stylesheets/objects/_colors.scss | 48 --- app/assets/stylesheets/objects/_groups.scss | 102 ----- .../stylesheets/objects/_navigation.scss | 382 ------------------ app/assets/stylesheets/objects/_progress.scss | 106 ----- app/assets/stylesheets/objects/_wells.scss | 103 ----- lib/concisecss/concisecss_source.rb | 70 ++-- lib/concisecss/version.rb | 2 +- 40 files changed, 1686 insertions(+), 1967 deletions(-) rename app/assets/stylesheets/{generic => base}/_print.scss (59%) mode change 100755 => 100644 rename app/assets/stylesheets/{generic/_shared.scss => base/_vertical-rhythm.scss} (82%) mode change 100755 => 100644 create mode 100644 app/assets/stylesheets/components/_buttons.scss create mode 100644 app/assets/stylesheets/components/_colors.scss rename app/assets/stylesheets/{objects => components}/_dropdowns.scss (57%) mode change 100755 => 100644 create mode 100644 app/assets/stylesheets/components/_navigation.scss delete mode 100755 app/assets/stylesheets/generic/_conditional.scss delete mode 100755 app/assets/stylesheets/generic/_mixins.scss rename app/assets/stylesheets/{generic => helpers}/_clearfix.scss (63%) mode change 100755 => 100644 create mode 100644 app/assets/stylesheets/helpers/_conditional.scss create mode 100644 app/assets/stylesheets/helpers/_functions.scss rename app/assets/stylesheets/{generic/_helper.scss => helpers/_helpers.scss} (58%) mode change 100755 => 100644 create mode 100644 app/assets/stylesheets/helpers/_mixins.scss rename app/assets/stylesheets/{generic => helpers}/_normalize.scss (80%) mode change 100755 => 100644 rename app/assets/stylesheets/{_defaults.scss => helpers/_variables.scss} (50%) mode change 100755 => 100644 create mode 100644 app/assets/stylesheets/layout/_container.scss create mode 100644 app/assets/stylesheets/layout/_forms.scss create mode 100644 app/assets/stylesheets/layout/_grid.scss create mode 100644 app/assets/stylesheets/layout/_lists.scss create mode 100644 app/assets/stylesheets/layout/tables.scss delete mode 100755 app/assets/stylesheets/objects/_badges.scss delete mode 100755 app/assets/stylesheets/objects/_breadcrumbs.scss delete mode 100755 app/assets/stylesheets/objects/_buttons.scss delete mode 100755 app/assets/stylesheets/objects/_colors.scss delete mode 100755 app/assets/stylesheets/objects/_groups.scss delete mode 100755 app/assets/stylesheets/objects/_navigation.scss delete mode 100755 app/assets/stylesheets/objects/_progress.scss delete mode 100755 app/assets/stylesheets/objects/_wells.scss diff --git a/README.md b/README.md index 048a93c..d841424 100644 --- a/README.md +++ b/README.md @@ -4,13 +4,13 @@ [![Code Climate](https://codeclimate.com/github/ConciseCSS/concise.css-gem.png)](https://codeclimate.com/github/ConciseCSS/concise.css-gem) [![Gem Version](https://badge.fury.io/rb/concisecss.svg)](http://badge.fury.io/rb/concisecss) -Concise is a lightweight, front-end framework that provides a number of great features without the bloat. Concise is built based on Object-Oriented CSS principles and keeps semantics in mind to provide a small learning curve, but a high level of customization. +Concise is a lightweight, front-end framework that provides a number of great features without the bloat. Concise is built based on Object-Oriented CSS principles and keeps semantics in mind to provide a small learning curve, and a high level of customization. ## Installation Instructions Add this line to your application's Gemfile: - gem 'concisecss', '~> 0.0.5' + gem 'concisecss', '~> 2.0.0' And then execute: @@ -30,9 +30,9 @@ Not every single project you are working needs all of the Concise JavaScript fi //= require concisecss/dropdown //= require concisecss/close ``` -To add the CSS just require +To add the CSS just require ```css - *= require concise + *= require concise ``` If you intend to extend or override Concise, you might want to create an override file. For example: `app/assets/stylesheets/custom.scss` and then import concise ```css @@ -50,9 +50,13 @@ Check out our documentation here: [http://concisecss.com/documentation](http://c You can keep up-to-date with the changes that we have made via our [releases page](https://github.com/ConciseCSS/concise.css-gem/releases). ## Versioning - + Concise is currently maintained under the [Semantic Versioning guidelines](http://semver.org/). +## Acknowledgments + +There are acknowledgements spread throughout the source code if you look around, and you can also view a list of credits [here](http://concisecss.com/credits/). + ## Elsewhere [![Like Concise on Facebook](http://i.imgur.com/4dy5UUK.png)](https://facebook.com/ConciseCSS) diff --git a/app/assets/javascripts/concisecss/dropdown.js b/app/assets/javascripts/concisecss/dropdown.js index 83dc9e6..60ccdcb 100755 --- a/app/assets/javascripts/concisecss/dropdown.js +++ b/app/assets/javascripts/concisecss/dropdown.js @@ -9,25 +9,34 @@ this.dd = el; this.initEvents(); } - + DropDown.prototype = { - initEvents : function() { + initEvents : function() { // Toggle .dropdown-active on click this.dd.on('click', function(event){ $(this).toggleClass('dropdown-active'); event.stopPropagation(); }); + + // Toggle .dropdown-active on hover + $(".dropdown-hover").mouseenter(function(event) { + $(this).addClass("dropdown-active"); + event.stopPropagation(); + }); } - } - + }; + $(function(){ var dropdown = $('.dropdown'); - + new DropDown(dropdown); - + $(document).click(function() { - // Remove class from all dropdowns dropdown.removeClass('dropdown-active'); }); + + $(".dropdown-menu").mouseleave(function() { + dropdown.removeClass("dropdown-active"); + }); }); -}(jQuery)); \ No newline at end of file +}(jQuery)); diff --git a/app/assets/javascripts/concisecss/naver.js b/app/assets/javascripts/concisecss/naver.js index 446f501..76d4977 100755 --- a/app/assets/javascripts/concisecss/naver.js +++ b/app/assets/javascripts/concisecss/naver.js @@ -1,10 +1,10 @@ -/* - * Naver v3.0.8 - 2014-05-06 - * A jQuery plugin for responsive navigation. Part of the Formstone Library. - * http://formstone.it/naver/ - * - * Copyright 2014 Ben Plum; MIT Licensed - */ +/* + * Naver v3.0.8 - 2014-05-06 + * A jQuery plugin for responsive navigation. Part of the Formstone Library. + * http://formstone.it/naver/ + * + * Copyright 2014 Ben Plum; MIT Licensed + */ ;(function ($, window) { "use strict"; @@ -355,4 +355,4 @@ pub.defaults.apply(this, Array.prototype.slice.call(arguments, 1)); } }; -})(jQuery, window); \ No newline at end of file +})(jQuery, window); diff --git a/app/assets/javascripts/concisecss/navigation.js b/app/assets/javascripts/concisecss/navigation.js index eebc81e..cb676ac 100755 --- a/app/assets/javascripts/concisecss/navigation.js +++ b/app/assets/javascripts/concisecss/navigation.js @@ -1,15 +1,15 @@ -(function($){ +(function($){ /** * Determine if responsive navigation text needs to be added. * * @method responsiveNav * @return {Object} naver A naver plugin instantiation */ - $.fn.responsiveNav = function() { + $.fn.responsiveNav = function() { // Loop through each instance of responsive navigation this.each(function(index) { var labelState = $(this).hasClass( "nav-responsive-text" ); - + return $(this).naver({ maxWidth: "768px", label: labelState @@ -18,6 +18,6 @@ }; }(jQuery)); -jQuery(document).ready(function() { +jQuery(document).ready(function() { jQuery(".nav-responsive, .nav-responsive-left, .nav-responsive-center").responsiveNav(); -}); \ No newline at end of file +}); diff --git a/app/assets/javascripts/concisecss/non-responsive.js b/app/assets/javascripts/concisecss/non-responsive.js index 70d34a1..ee304a6 100755 --- a/app/assets/javascripts/concisecss/non-responsive.js +++ b/app/assets/javascripts/concisecss/non-responsive.js @@ -1,9 +1,9 @@ -(function($){ +(function($){ /** * Calculate object width * */ - $.fn.calculateWidth = function() { + $.fn.calculateWidth = function() { return $(this).width(); }; @@ -14,7 +14,7 @@ * @note Only necessary for non-responsive websites. */ $.fn.nonResponsive = function() { - + // Loop through each instance of the `.non-responsive` class this.each(function(index) { if ($(this).hasClass("non-responsive")) { @@ -22,11 +22,11 @@ var containerWidth = $(".container").width(), i = 1, max = 24; - + // Set pixel-based alternatives for grid styles // But first we need to know if our row has class `gutters` if($(this).hasClass("gutters")) { - for (; i <= max; i++ ) { + for (; i <= max; i++ ) { // Column width for row with gutters var columnWidth = ($('.column-'+i).calculateWidth()), gutterWidth = columnWidth * 0.02; @@ -37,7 +37,7 @@ for (; i <= max ; i++ ) { // Column width for normal row var columnWidth = ($('.column-'+i).calculateWidth() - 1); - + $('.column-'+i).css("width", columnWidth + "px"); } } @@ -46,6 +46,6 @@ }; }(jQuery)); -jQuery(document).ready(function() { +jQuery(document).ready(function() { jQuery("body, .row").nonResponsive(); -}); \ No newline at end of file +}); diff --git a/app/assets/stylesheets/base/_headings.scss b/app/assets/stylesheets/base/_headings.scss index 5051ed6..f585e18 100755 --- a/app/assets/stylesheets/base/_headings.scss +++ b/app/assets/stylesheets/base/_headings.scss @@ -2,157 +2,167 @@ //------------------------------------ // HEADINGS //------------------------------------ - - // Thanks to Harry Roberts' article on pragmatic - // font sizing (http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/) - h1, h2, h3, h4, h5, h6, + + // Variables + $giga-sizes: ( + "extra-small": 48px, + "small": 64px, + "large": 80px, + "extra-large": 96px + ); + + $mega-sizes: ( + "extra-small": 40px, + "small": 48px, + "large": 64px, + "extra-large": 72px + ); + + $kilo-sizes: ( + "extra-small": 32px, + "small": 32px, + "large": 48px, + "extra-large": 64px + ); + + $h1-sizes: ( + "extra-small": 24px, + "small": 32px, + "medium": 36px + ); + + $h2-sizes: ( + "extra-small": 20px, + "small": 24px, + "medium": 30px + ); + + $h3-sizes: ( + "extra-small": 18px, + "small": 20px, + "medium": 24px + ); + + $h4-sizes: ( + "extra-small": 16px, + "small": 18px, + "medium": 20px + ); + + $h5-sizes: ( + "extra-small": 14px, + "small": 16px, + "medium": 18px + ); + + $h6-sizes: ( + "extra-small": 12px, + "small": 14px, + "medium": 16px + ); + + + // Font sizing + h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .giga, .mega, .kilo { - color: #181818; + color: $base-heading-color; + font-family: $base-heading-font-family; font-weight: normal; text-rendering: optimizeLegibility; + + a { font-weight: inherit; } + + small { + color: $base-sub-heading-color; + font-size: 60%; + line-height: 1; + } } h1, .h1 { - @include font-size(24px); + @include responsive("font-size" "line-height", map-get($h1-sizes, extra-small), + ( + "small" : map-get($h1-sizes, small), + "medium" : map-get($h1-sizes, medium) + ) + ); } h2, .h2 { - @include font-size(20px); + @include responsive("font-size" "line-height", map-get($h2-sizes, extra-small), + ( + "small" : map-get($h2-sizes, small), + "medium" : map-get($h2-sizes, medium) + ) + ); } h3, .h3 { - @include font-size(18px); + @include responsive("font-size" "line-height", map-get($h3-sizes, extra-small), + ( + "small" : map-get($h3-sizes, small), + "medium" : map-get($h3-sizes, medium) + ) + ); } h4, .h4 { - @include font-size(16px); + @include responsive("font-size" "line-height", map-get($h4-sizes, extra-small), + ( + "small" : map-get($h4-sizes, small), + "medium" : map-get($h4-sizes, medium) + ) + ); } h5, .h5 { - @include font-size(14px); + @include responsive("font-size" "line-height", map-get($h5-sizes, extra-small), + ( + "small" : map-get($h5-sizes, small), + "medium" : map-get($h5-sizes, medium) + ) + ); } h6, .h6 { - @include font-size(12px); - } - - @include breakpoint(small) { - h1, .h1 { - @include font-size(32px); - } - - h2, .h2 { - @include font-size(24px); - } - - h3, .h3 { - @include font-size(20px); - } - - h4, .h4 { - @include font-size(18px); - } - - h5, .h5 { - @include font-size(16px); - } - - h6, .h6 { - @include font-size(14px); - } - } - - @include breakpoint(medium) { - h1, .h1 { - @include font-size($h1-size); - } - - h2, .h2 { - @include font-size($h2-size); - } - - h3, .h3 { - @include font-size($h3-size); - } - - h4, .h4 { - @include font-size($h4-size); - } - - h5, .h5 { - @include font-size($h5-size); - } - - h6, .h6 { - @include font-size($h6-size); - } - } - - h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, - .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, - .giga a, .mega a, .kilo a { font-weight: inherit; } - - h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, - .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, - .giga small, .mega small, .kilo small { - font-size: 65% !important; - line-height: 1; + @include responsive("font-size" "line-height", map-get($h6-sizes, extra-small), + ( + "small" : map-get($h6-sizes, small), + "medium" : map-get($h6-sizes, medium) + ) + ); } // Extra-large heading classes .giga { - @include font-size(48px); + @include responsive("font-size" "line-height", map-get($giga-sizes, extra-small), + ( + "small" : map-get($giga-sizes, small), + "large" : map-get($giga-sizes, large), + "extra-large" : map-get($giga-sizes, extra-large) + ) + ); } .mega { - @include font-size(40px); + @include responsive("font-size" "line-height", map-get($mega-sizes, extra-small), + ( + "small" : map-get($mega-sizes, small), + "large" : map-get($mega-sizes, large), + "extra-large" : map-get($mega-sizes, extra-large) + ) + ); } .kilo { - @include font-size(32px); - } - - @include breakpoint(small) { - .giga { - @include font-size(64px); - } - - .mega { - @include font-size(48px); - } - - .kilo { - @include font-size(32px); - } - } - - @include breakpoint(large) { - .giga { - @include font-size(80px); - } - - .mega { - @include font-size(64px); - } - - .kilo { - @include font-size(48px); - } - } - - @include breakpoint(extra-large) { - .giga { - @include font-size($giga-size); - } - - .mega { - @include font-size($mega-size); - } - - .kilo { - @include font-size($kilo-size); - } + @include responsive("font-size" "line-height", map-get($kilo-sizes, extra-small), + ( + "small" : map-get($kilo-sizes, small), + "large" : map-get($kilo-sizes, large), + "extra-large" : map-get($kilo-sizes, extra-large) + ) + ); } } diff --git a/app/assets/stylesheets/base/_main.scss b/app/assets/stylesheets/base/_main.scss index bf25e52..1fc8985 100755 --- a/app/assets/stylesheets/base/_main.scss +++ b/app/assets/stylesheets/base/_main.scss @@ -2,31 +2,33 @@ //------------------------------------ // MAIN //------------------------------------ - + // Variables - $font-size: #{($base-font-size/16px)*1em}; + $font-size: #{($base-font-size / 16px) * 1em}; $line-height-integer: #{$line-height-ratio}; - + *{ &, &:before, &:after { - @include vendor(box-sizing, border-box); + @include vendor(box-sizing, border-box, official); } } - - html, + + html, body { - background-color: #fff; + background-color: $website-bg-color; color: $base-font-color; font: normal normal $font-size/$line-height-integer $base-font-family; margin: 0; - - font-smooth: always; - - -webkit-font-smoothing: antialiased; - -moz-font-smoothing: antialiased; + + @if $enable-font-smoothing == true { + font-smooth: always; + + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; + } } html[dir="rtl"] { direction: rtl; } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/generic/_print.scss b/app/assets/stylesheets/base/_print.scss old mode 100755 new mode 100644 similarity index 59% rename from app/assets/stylesheets/generic/_print.scss rename to app/assets/stylesheets/base/_print.scss index 65ea003..50e8597 --- a/app/assets/stylesheets/generic/_print.scss +++ b/app/assets/stylesheets/base/_print.scss @@ -5,106 +5,88 @@ @media print { @page { margin: 0.5cm; } - * { + *, + *:before, + *:after { background: transparent !important; color: black !important; text-shadow: none !important; - - @include vendor(filter, none !important); - - &:before, - &:after { - background: transparent !important; - color: black !important; - text-shadow: none !important; - - @include vendor(filter, none !important); - } + + @include vendor(filter, none !important, webkit moz ms official); } - + body { background-color: #fff; color: #000; - font: 0.57em / 1.3 Georgia, "Times New Roman", Times, serif; + font: 0.57em / 1.3 $base-print-font-family; } - + img { max-width: 100% !important; } - + .show-print { display: block; visibility: visible; } - - .hide-print, - video, - audio, - object, - embed, - nav, - footer, + + .hide-print, + video, + audio, + object, + embed, + nav, + footer, a[href^="#"]:after { display: none; visibility: hidden; } - - p, - h2, + + p, + h2, h3 { orphans: 3; widows: 3; } - - h2, + + h2, h3 { page-break-after: avoid; } - - a { + + a, + a:visited { color: #000; text-decoration: underline; word-wrap: break-word; - - &:visited { - color: #000; - text-decoration: underline; - word-wrap: break-word; - } - + &[href]:after { content: " (" attr(href) ")"; font-size: smaller; } } - + q:after { content: " (Source: " attr(cite) ")"; } - + abbr[title]:after { content: " (" attr(title) ")"; } - + a { - &:after, - &[href^="javascript:"]:after, + &:after, + &[href^="javascript:"]:after, &[href^="#"]:after { content: ""; } } - + pre, blockquote { border: 1px solid #ededed; page-break-inside: avoid; } - + thead { display: table-header-group; } - - tr, + + tr, img { page-break-inside: avoid; } - + ul { list-style: none; - + li { content: "» "; } } - - .label, - .badge { - border: 1px solid #000; - color: #000; - } } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/base/_selection.scss b/app/assets/stylesheets/base/_selection.scss index 1f4260c..25e704f 100755 --- a/app/assets/stylesheets/base/_selection.scss +++ b/app/assets/stylesheets/base/_selection.scss @@ -2,20 +2,26 @@ //------------------------------------ // SELECTION //------------------------------------ + + // Silent Class + %selection-style { + background-color: $selection-background; + color: $selection-color; + } + + + // Selection Style * { &::-webkit-selection { - background-color: $selection-background; - color: $selection-color; + @extend %selection-style; } - + &::-moz-selection { - background-color: $selection-background; - color: $selection-color; + @extend %selection-style; } - + &::selection { - background-color: $selection-background; - color: $selection-color; + @extend %selection-style; } } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/base/_type.scss b/app/assets/stylesheets/base/_type.scss index 945a80c..2e8392e 100755 --- a/app/assets/stylesheets/base/_type.scss +++ b/app/assets/stylesheets/base/_type.scss @@ -2,48 +2,50 @@ //------------------------------------ // TYPE //------------------------------------ + + // Variables + $small-size: 12px !default; + $micro-size: 10px !default; + + // Links a { - color: $base-link-color; + color: $base-link-color; text-decoration: none; - - &:hover, + + &:hover, &:visited { color: lighten($base-link-color, 10%); cursor: pointer; text-decoration: underline; } - } - p a { - line-height: inherit; - - &:visited { line-height: inherit; } + p & { + &, + &:visited { line-height: inherit; } + } } // Sizing - small, + small, .small { - @include font-size($small-size); + @include font-size($small-size); } - .micro { - @include font-size($micro-size); + .micro { + @include font-size($micro-size); } // Addresses - address { - font-style: normal; - - > strong { display: block; } - } + address { font-style: normal; } // Other elements abbr { - &[title], &[data-original-title] { + &[title], + &[data-original-title] { cursor: help; border-bottom: 1px dotted #999; } @@ -51,7 +53,7 @@ acronym { cursor: help; - border-bottom: 1px dashed blue; + border-bottom: 1px dashed $base-link-color; } kbd { diff --git a/app/assets/stylesheets/generic/_shared.scss b/app/assets/stylesheets/base/_vertical-rhythm.scss old mode 100755 new mode 100644 similarity index 82% rename from app/assets/stylesheets/generic/_shared.scss rename to app/assets/stylesheets/base/_vertical-rhythm.scss index cf9aa3f..d8de86a --- a/app/assets/stylesheets/generic/_shared.scss +++ b/app/assets/stylesheets/base/_vertical-rhythm.scss @@ -1,24 +1,23 @@ -@if $use-shared == true { +@if $use-vertical-rhythm == true { //------------------------------------ // SHARED //------------------------------------ - + // Thanks to inuitcss for some simple ways to help maintain // vertical rhythm (https://github.com/csswizardry/inuit.css/edit/master/generic/_shared.scss) - - // Declare a common bottom margin for most elements + + // Declare a common bottom margin for most elements // to maintain a consistent vertical rhythm. - h1, h2, h3, h4, h5, h6, + h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, - .giga, .mega, .kilo, + .giga, .mega, .kilo, hgroup, ul, ol, dl, blockquote, p, address, table, fieldset, figure, pre, - .row, - .well { + .row, .form-item { margin-bottom: $base-spacing-unit; margin-bottom: ($base-spacing-unit / $base-font-size) * 1rem; } @@ -32,8 +31,8 @@ // Left margin for lists - ul, - ol, + ul, + ol, dd { margin-left: 2 * $base-spacing-unit; margin-left: (2 * $base-spacing-unit / $base-font-size) * 1rem; diff --git a/app/assets/stylesheets/components/_buttons.scss b/app/assets/stylesheets/components/_buttons.scss new file mode 100644 index 0000000..47275e8 --- /dev/null +++ b/app/assets/stylesheets/components/_buttons.scss @@ -0,0 +1,174 @@ +@if $use-buttons == true { + //------------------------------------ + // BUTTONS + //------------------------------------ + .btn { + background-color: $object-ui-color; + border: 0; + color: $button-font-color; + cursor: pointer; + display: inline-block; + font-family: inherit; + font-size: 100%; + line-height: 1; + padding: 0.5em 1em; + position: relative; + text-align: center; + text-decoration: none; + vertical-align: baseline; + white-space: nowrap; + + -webkit-touch-callout: none; + + @include vendor(user-select, none, webkit ms o official); + + @include vendor(user-drag, none, webkit); + + &::-moz-focus-inner { + padding: 0; + border: 0; + } + + &:hover { background-color: darken($object-ui-color, 10%); } + + &:active { background-color: darken($object-ui-color, 5%); } + + &[disabled] { + &, + &:hover, + &:active, + &:focus { + background: #dededc !important; + border: none; + color: #b3b3b1; + cursor: not-allowed; + } + } + + + // Background colors + @if $use-button-bg-colors == true { + @each $bg-color, $color in $bg-colors { + &.bg-#{$bg-color} { background-color: $color; } + + &.bg-#{$bg-color}:hover { background-color: darken($color, 10%); } + + &.bg-#{$bg-color}:active { background-color: darken($color, 5%); } + + @if $bg-color != "white" { + &.bg-light-#{$bg-color} { background-color: lighten($color, 32.5%); } + } + } + } + } + + a.btn { + &, + &:hover { + color: $button-hover-font-color; + text-decoration: none; + } + + &:active { outline: 0; } + } + + input[type="submit"].btn { + color: $button-font-color; + height: auto; + padding: 0.5em 1em; + } + + button.btn { color: $button-font-color; } + + + @if $use-button-styles == true { + // Full-width collapsed button + .btn-collapse-full { + display: block; + margin: 12px 0; + width: 100%; + + @include breakpoint(extra-small) { + & { + display: inline-block; + margin: 0; + width: auto; + } + } + } + + + // Button sizes + .btn-extra-small, + a.btn-extra-small, + p.btn-extra-small, + input.btn-extra-small { + @include font-size(10px); + padding: 0.25em 0.75em; + } + + .btn-small, + a.btn-small, + p.btn-small, + input.btn-small { @include font-size(12px); } + + .btn-large, + a.btn-large, + p.btn-large, + input.btn-large { + @include font-size(18px); + padding: 1em 2em; + } + + .btn-extra-large, + a.btn-extra-large, + p.btn-extra-large, + input.btn-extra-large { + @include font-size(24px); + padding: 1em 2em; + } + + + // Dropdowns + .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; } + } + } + } +} diff --git a/app/assets/stylesheets/components/_colors.scss b/app/assets/stylesheets/components/_colors.scss new file mode 100644 index 0000000..66f33ea --- /dev/null +++ b/app/assets/stylesheets/components/_colors.scss @@ -0,0 +1,25 @@ +//------------------------------------ +// COLORS +//------------------------------------ + +// Background colors +@if $use-bg-colors == true { + @each $bg-color, $color in $bg-colors { + .bg-#{$bg-color}, + %bg-#{$bg-color} { background-color: $color; } + + @if $bg-color != "white" { + .bg-light-#{$bg-color}, + %bg-light-#{$bg-color} { background-color: lighten($color, 32.5%); } + } + } +} + + +// Type colors +@if $use-type-colors == true { + @each $type-color, $color in $type-colors { + .color-#{$type-color}, + %color-#{$type-color} { color: $color; } + } +} diff --git a/app/assets/stylesheets/objects/_dropdowns.scss b/app/assets/stylesheets/components/_dropdowns.scss old mode 100755 new mode 100644 similarity index 57% rename from app/assets/stylesheets/objects/_dropdowns.scss rename to app/assets/stylesheets/components/_dropdowns.scss index 5aa8752..c969ffd --- a/app/assets/stylesheets/objects/_dropdowns.scss +++ b/app/assets/stylesheets/components/_dropdowns.scss @@ -7,11 +7,13 @@ outline: none; position: relative; width: auto; - + .dropdown-menu { - background-color: #fff; - border: 1px solid #eee; + background-color: $dropdown-bg-color; + border: 1px solid $dropdown-border-color; border-radius: inherit; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); font-weight: inherit; left: 0; margin-left: 0px; @@ -21,100 +23,92 @@ right: 0; text-transform: none; z-index: 99999; - - @include vendor(transition, all 0.3s ease-in); - + + @include vendor(transition, all 0.3s ease-in, ms official); + 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; } - + + 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; } + + @include vendor(transition, all 0.3s ease-out, ms official); } - - li:hover { background-color: #f3f8f8; } + + li:hover { background-color: $dropdown-hover-color; } + + + // Headers + & > .dropdown-header { margin: 0; } } - + + ul.dropdown-menu { list-style-type: none; } + &.dropdown-active .dropdown-menu { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); opacity: 1; pointer-events: auto; } - - .header { - color: #aaa; + + .dropdown-header { + color: $dropdown-header-color; cursor: default; - font-size: 14px; - font-size: 0.9rem; - @include font-size(14px); + @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%; } + &.dropdown-collapse-full .dropdown-menu { width: 100%; } + + @include breakpoint(small) { + & { + .dropdown-menu { width: 200px; } + + &.dropdown-small .dropdown-menu { width: 150px; } + + &.dropdown-large .dropdown-menu { width: 350px; } + + &.dropdown-full .dropdown-menu { width: 100%; } + + &.dropdown-collapse-full .dropdown-menu { width: 200px; } + } } - } + .dropdown-header:hover, + li.dropdown-header:hover { background: none; } - // Headers - .dropdown-menu > .header { margin: 0; } - .dropdown { - .header:hover, - li.header:hover { background: none; } - - .dropdown-menu.border-radius { border-radius: $border-radius; } - - - // Arrows + // Arrows &[class*='dropdown-arrow-'] .dropdown-menu { margin-top: 10px; - + + &:before, &:after { - border-color: #fff transparent; + border-color: $dropdown-bg-color transparent; border-style: solid; bottom: 100%; border-width: 0 6px 6px 6px; @@ -123,45 +117,39 @@ 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 + + + // 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; } } } } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/components/_navigation.scss b/app/assets/stylesheets/components/_navigation.scss new file mode 100644 index 0000000..4262b60 --- /dev/null +++ b/app/assets/stylesheets/components/_navigation.scss @@ -0,0 +1,133 @@ + @if $use-navigation == true { + //------------------------------------ + // NAVIGATION + //------------------------------------ + + // Silent Class + %before-responsive-icon { + clear: both; + content: "."; + display: block; + height: 0; + line-height: 0; + text-align: center; + visibility: hidden; + } + + + // Navigation Styles + nav { + ul, + ol { + list-style: none; + margin: 0; + } + + li { + cursor: pointer; + position: relative; + + .dropdown & { margin-right: 0px; } + } + } + + + @if $use-responsive-navigation == true { + // Responsive navigation + // + // Thanks to Ben Plum for the great work on his + // Naver plugin (https://github.com/benplum/Naver/) + .naver { + .naver-handle { + color: inherit; + cursor: pointer; + display: none; + @include font-size(24px); + text-align: right; + text-transform: uppercase; + + @include vendor(user-select, none, ms official); + } + + .naver-wrapper { + height: auto; + width: 100%; + } + + &.enabled { + .naver-handle { display: block; } + + .naver-wrapper { + height: 0px; + overflow: hidden; + + li { + display: block; + padding: 8px; + text-align: left; + width: 100%; + + &:hover { background: #f9f9f9; } + } + } + } + } + + .nav-responsive { + &.naver .naver-handle:after { + content: "\2261"; + text-align: right; + } + + &.nav-responsive-text.naver { + .naver-handle:after { content: "\00a0 \2261"; } + + .naver-container:before { + @extend %before-responsive-icon; + } + } + } + + + // Left-aligned responsive navigation + .nav-responsive-left { + &.naver .naver-handle { + text-align: left; + + &:before { + content: "\2261"; + text-align: left; + } + } + + &.nav-responsive-text.naver { + .naver-handle:before { content: "\2261 \00a0"; } + + .naver-container:after { + @extend %before-responsive-icon; + } + } + } + + + // Centered responsive navigation + .nav-responsive-center { + &.naver .naver-handle { + text-align: center; + + &:before { + content: "\2261"; + text-align: center; + } + } + + &.nav-responsive-text.naver { + .naver-handle:before { content: "\2261 \00a0"; } + + .naver-container:after { + @extend %before-responsive-icon; + } + } + } + } +} diff --git a/app/assets/stylesheets/concise.scss b/app/assets/stylesheets/concise.scss index 95b1a93..bf51a6b 100755 --- a/app/assets/stylesheets/concise.scss +++ b/app/assets/stylesheets/concise.scss @@ -8,53 +8,53 @@ * http://opensource.org/licenses/MIT * */ - - - + + + +//------------------------------------ +// IMPORTS //------------------------------------ -// IMPORTS -//------------------------------------ -// Generic utility styles -@import "defaults"; -@import "generic/mixins"; -@import "generic/normalize"; -@import "generic/clearfix"; -@import "generic/shared"; +// Utility helpers +@import "helpers/variables"; +@import "helpers/functions"; +@import "helpers/mixins"; +@import "helpers/normalize"; +@import "helpers/clearfix"; // Base styles @import "base/main"; +@import "base/vertical-rhythm"; @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"; +// Layout styles +@import "layout/container"; +@import "layout/grid"; +@import "layout/lists"; +@import "layout/forms"; +@import "layout/tables"; + + + + +// Component styles +@import "components/colors"; +@import "components/buttons"; +@import "components/dropdowns"; +@import "components/navigation"; -// Helper classes -@import "generic/helper"; -@import "generic/conditional"; -@import "generic/print"; \ No newline at end of file +// Helpers +@import "helpers/helpers"; +@import "helpers/conditional"; +@import "base/print"; diff --git a/app/assets/stylesheets/generic/_conditional.scss b/app/assets/stylesheets/generic/_conditional.scss deleted file mode 100755 index 78c2425..0000000 --- a/app/assets/stylesheets/generic/_conditional.scss +++ /dev/null @@ -1,126 +0,0 @@ -@if $use-conditional == true { - //------------------------------------ - // CONDITIONAL - //------------------------------------ - - // Thanks to Bootstrap for having a good method of - // showing/hiding content via breakpoints - // (http://getbootstrap.com/css/#responsive-utilities) - .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; - } - } -} diff --git a/app/assets/stylesheets/generic/_mixins.scss b/app/assets/stylesheets/generic/_mixins.scss deleted file mode 100755 index 536f035..0000000 --- a/app/assets/stylesheets/generic/_mixins.scss +++ /dev/null @@ -1,157 +0,0 @@ -//------------------------------------ -// FUNCTIONS -//------------------------------------ - -// -// Calculates proper rem font-size given -// a pixel amount. -// -@function calculate-rem($font-size) { - $rem-size: ($font-size / $base-font-size) * 1rem; - @return $rem-size; -} - - -// -// Calculates proper line-height given a -// font-size to maintain vertical rhythm. -// -@function calculate-line-height($font-size) { - $line-height-size: ceil($font-size / $base-line-height) * ($base-line-height / $font-size); - @return $line-height-size; -} - - - - -//------------------------------------ -// MIXINS -//------------------------------------ - -// -// Uses `calculate-rem()` to calculate rem font-size and px -// fallback. line-height is calculated with `calculate-line-height()` -// but passing `false` will prevent that. -// -// `@include font-size(24px);` -// -// -// Big thanks to inuitcss for inspiration behind this -// (https://github.com/csswizardry/inuit.css/blob/master/generic/_mixins.scss) -@mixin font-size($font-size, $line-height: true) { - font-size: $font-size; - font-size: calculate-rem($font-size); - - @if $line-height == true { - line-height: calculate-line-height($font-size); - } -} - - -// -// Proper vendor prefixes are created just by -// passing a property value and size value. -// -// `@include vendor(border-radius, 4px);` -// -// -// Thanks to inuitcss for this handy mixin -// (https://github.com/csswizardry/inuit.css/blob/master/generic/_mixins.scss) -@mixin vendor($property, $value...) { - -webkit-#{$property}: $value; - -moz-#{$property}: $value; - -ms-#{$property}: $value; - -o-#{$property}: $value; - #{$property}: $value; -} - - -// -// By passing in one of the pre-defined media queries that -// are packaged with Concise by default, you can easily -// create styles that are built from the ground-up to be -// mobile friendly. -// -// `@include breakpoint(extra-small) { ... }` -// -// -@mixin breakpoint($point) { - @if $point == extra-small { - @media (min-width: $extra-small-start) { @content; } - } - - @else if $point == small { - @media (min-width: $small-start) { @content; } - } - - @else if $point == medium { - @media (min-width: $medium-start) { @content; } - } - - @else if $point == large { - @media (min-width: $large-start) { @content; } - } - - @else if $point == extra-large { - @media (min-width: $extra-large-start) { @content; } - } - - @else if $point == high-density { - @media only screen and (-webkit-min-device-pixel-ratio: 1.5), - only screen and (min--moz-device-pixel-ratio: 1.5), - only screen and (-o-min-device-pixel-ratio: 3/2), - only screen and (min-device-pixel-ratio: 1.5) { @content; } - } -} - - -// -// Create variable-number grid columns given the value -// for variable `$column-number` -// -@mixin grid-setup($number: $column-number) { - // Assign percentage-based widths for columns - @for $i from 1 through $number { - .#{$column-prefix + $i} { width: 100% / $number * $i; } - } - - @for $i from 1 through $number { - // Style all but the last column - $width-of-column: (100% - $gutters * ($number - 1)) / $number; - - .gutters .#{$column-prefix + $i} { - width: $width-of-column * $i + $gutters * ($i - 1); - content: $gutters * ($i - 1); - } - } -} - - -// -// Create proper `.push-` classes given the value -// for variable `$column-number` -// -@mixin push-setup($number: $column-number) { - @for $i from 1 to $number { - .push-#{$i} { left: 100% / $number * $i; } - } - - @for $i from 1 to $number { - .gutters .push-#{$i} { left: 100% / $number * $i - $gutters; } - } -} - - -// -// Create proper `.pull-` classes given the value -// for variable `$column-number` -// -@mixin pull-setup($number: $column-number) { - @for $i from 1 to $number { - .pull-#{$i} { right: 100% / $number * $i; } - } - - @for $i from 1 to $number { - .gutters .pull-#{$i} { right: 100% / $number * $i - $gutters; } - } -} diff --git a/app/assets/stylesheets/generic/_clearfix.scss b/app/assets/stylesheets/helpers/_clearfix.scss old mode 100755 new mode 100644 similarity index 63% rename from app/assets/stylesheets/generic/_clearfix.scss rename to app/assets/stylesheets/helpers/_clearfix.scss index 7b6fb06..59c26c6 --- a/app/assets/stylesheets/generic/_clearfix.scss +++ b/app/assets/stylesheets/helpers/_clearfix.scss @@ -3,10 +3,6 @@ // CLEARFIX //------------------------------------ .clearfix { - &:after{ - content: ""; - display: table; - clear: both; - } + @include clearfix(); } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/helpers/_conditional.scss b/app/assets/stylesheets/helpers/_conditional.scss new file mode 100644 index 0000000..ecbb0fc --- /dev/null +++ b/app/assets/stylesheets/helpers/_conditional.scss @@ -0,0 +1,128 @@ +//------------------------------------ +// CONDITIONAL +//------------------------------------ + +// Silent Classes +// (mixins have to be used instead of proper silent classes +// because of the scope of `@include` inside of media queries.) +@mixin show-conditional { + display: block; + visibility: visible; +} + +@mixin hide-conditional { + display: none; + visibility: hidden; +} + + +@if $use-conditional == true { + // Thanks to Bootstrap for having a good method of + // showing/hiding content via breakpoints + // (http://getbootstrap.com/css/#responsive-utilities) + .show-extra-small, + .hide-small, + .hide-medium, + .hide-large, + .hide-extra-large, + .hide-print, + .hide-hd { + @include show-conditional; + } + + .hide-extra-small, + .show-small, + .show-medium, + .show-large, + .show-extra-large, + .show-print, + .show-hd { + @include hide-conditional; + } + + @include breakpoint(small) { + .show-small, + .hide-extra-small, + .hide-medium, + .hide-large, + .hide-extra-large { + @include show-conditional; + } + + .hide-small, + .show-extra-small, + .show-medium, + .show-large, + .show-extra-large { + @include hide-conditional; + } + } + + @include breakpoint(medium) { + .show-medium, + .hide-small, + .hide-extra-small, + .hide-large, + .hide-extra-large { + @include show-conditional; + } + + .hide-medium, + .show-small, + .show-extra-small, + .show-large, + .show-extra-large { + @include hide-conditional; + } + } + + @include breakpoint(large) { + .show-large, + .hide-extra-small, + .hide-small, + .hide-medium, + .hide-extra-large { + @include show-conditional; + } + + .hide-large, + .show-extra-small, + .show-small, + .show-medium, + .show-extra-large { + @include hide-conditional; + } + } + + @include breakpoint(extra-large) { + .show-extra-large, + .hide-extra-small, + .hide-small, + .hide-medium, + .hide-large { + @include show-conditional; + } + + .hide-extra-large, + .show-extra-small, + .show-small, + .show-medium, + .show-large { + @include hide-conditional; + } + } + + // 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 { + @include show-conditional; + } + + .hide-hd { + @include hide-conditional; + } + } +} diff --git a/app/assets/stylesheets/helpers/_functions.scss b/app/assets/stylesheets/helpers/_functions.scss new file mode 100644 index 0000000..ad3f008 --- /dev/null +++ b/app/assets/stylesheets/helpers/_functions.scss @@ -0,0 +1,32 @@ +//------------------------------------ +// FUNCTIONS +//------------------------------------ + +// +// Calculates proper rem font-size given +// a pixel amount. +// +@function calculate-rem($font-size) { + $rem-size: ($font-size / $base-font-size) * 1rem; + + @return $rem-size; +} + + +// +// Calculates proper line-height given a +// font-size to maintain vertical rhythm. +// +@function calculate-line-height($font-size) { + $line-height-size: ceil($font-size / $base-line-height) * ($base-line-height / $font-size); + + @return $line-height-size; +} + + +// +// Strips the units from a value (px, em, etc). +// +@function strip-units($value) { + @return $value / ($value * 0 + 1); +} diff --git a/app/assets/stylesheets/generic/_helper.scss b/app/assets/stylesheets/helpers/_helpers.scss old mode 100755 new mode 100644 similarity index 58% rename from app/assets/stylesheets/generic/_helper.scss rename to app/assets/stylesheets/helpers/_helpers.scss index f2e415e..daee8ef --- a/app/assets/stylesheets/generic/_helper.scss +++ b/app/assets/stylesheets/helpers/_helpers.scss @@ -2,42 +2,47 @@ //------------------------------------ // HELPER //------------------------------------ + // Add/remove floats - .float-left { float: left !important; } + .float-left { float: left; } - .float-right { float: right !important; } + .float-right { float: right; } - .float-none { float: none !important; } + .float-none { float: none; } // Position elements - .align-center { + .align-center, + %align-center { display: block; margin-left: auto; margin-right: auto; } - .no-margin { margin: 0 !important; } - - .icon-alone { display: inline-block; } + .no-margin { margin: 0; } // Displaying content - .inline { display: block; } - - @include breakpoint(extra-small) { .inline { display: inline; } } + .inline { display: inline; } - .show { + .show, + %show { display: block; visibility: visible; } - .hide { + .hide, + %hide { display: none; visibility: hidden; } - .screen-reader { + + // Hide text + .screen-reader, + %screen-reader, + .text-hide, + %text-hide { border: 0; clip: rect(0 0 0 0); height: 1px; @@ -50,9 +55,10 @@ // Full-width elements - .full { width: 100%; } + .full-width { width: 100%; } - img.full { + img.full-width, + %full-width-image { max-width: 100%; height: auto; display: block; @@ -71,11 +77,14 @@ // Font weights - .weight-light { font-weight: 300 !important; } + .weight-light, + %weight-light { font-weight: 300; } - .weight-normal { font-weight: 400 !important; } + .weight-normal, + %weight-normal { font-weight: 400; } - .weight-semibold { font-weight: 600 !important; } + .weight-semibold, + %weight-semibold { font-weight: 600; } // All-caps text @@ -83,17 +92,7 @@ // 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; - } + .amp { font: italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif; } // Caret icon @@ -106,12 +105,4 @@ vertical-align: middle; width: 0; } - - - // Border radius - .border-radius { border-radius: $border-radius; } - - - // Pill style - .pill { border-radius: 25px; } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/helpers/_mixins.scss b/app/assets/stylesheets/helpers/_mixins.scss new file mode 100644 index 0000000..abe82bc --- /dev/null +++ b/app/assets/stylesheets/helpers/_mixins.scss @@ -0,0 +1,315 @@ +//------------------------------------ +// MIXINS +//------------------------------------ + +// +// Uses `calculate-rem()` to calculate rem font-size and px +// fallback. line-height is calculated with `calculate-line-height()` +// but passing `false` will prevent that. +// +// Parameters: +// $font-size: the font size (in pixels) to be converted to rem +// $rem-sizing: if you want to convert the font-size to rem or not (default is true) +// $line-height: set to false if you wish not to output a calculated line-height (defalt is true) +// +// Example: +// `@include font-size(24px);` +// +// +// Big thanks to inuitcss for inspiration behind this +// (https://github.com/csswizardry/inuit.css/blob/master/generic/_mixins.scss) +@mixin font-size($font-size, $rem-sizing: true, $line-height: true) { + font-size: $font-size; + + @if $rem-sizing == true { + font-size: calculate-rem($font-size); + } + + @if $line-height == true { + line-height: calculate-line-height($font-size); + } +} + + +// +// Proper vendor prefixes are created by passing +// a property, property value, and browser +// vendor (webkit, moz, ms, o, etc). +// +// Parameters: +// $property: what CSS property to generate vendor prefixes for +// $value: the value of what was defined in `$property` +// $vendors: what vendor prefixes to generate (default is none) +// +// Example: +// `@include vendor(border-radius, 4px, webkit moz ms)` +// +// +@mixin vendor($property, $value, $vendors: "") { + @each $vendor in $vendors { + @if $vendor != "" { + -#{$vendor}-#{$property}: $value; + } + } + + #{$property}: $value; +} + + +// +// Loops through all of the values in the `$breakpoints` +// map and outputs conditional statements used to generate +// media query code. +// +// When calling the mixin, if the parameter matches a key +// from the `breakpoints` map, a media query is output with +// that key's value. If an explicit value is set (ex: 360px) +// then a media query is output with that value. +// +// Parameters: +// $point: the breakpoint value for the media query output +// +// Example: +// `@include breakpoint(extra-small) { ... }` +// +// `@include breakpoint(360px) { ... }` +// +// +@mixin breakpoint($point) { + @if type-of($point) == string { + @each $breakpoint-name, $breakpoint-value in $breakpoint-map { + @if $point == $breakpoint-name { + @media (min-width: $breakpoint-value) { + @content; + } + } + } + } @else { + @media (min-width: $point) { + @content; + } + } +} + + +// +// Generates property media queries for any CSS property, +// value, and set of breakpoints. Allows you to easily change +// property values based a set of breakpoints. +// +// Parameters: +// $properties: what CSS property to output inside of the media queries (can have multiple) +// $values: the value for each property (can have multiple) +// $responsive-values: what breakpoints to generate media queries for +// $use-available-mixins: whether or not to use mixin outputs for properties like `font-size` or `line-height` (default is true) +// +// Example: +// @include responsive("font-size", 11px, +// ( +// "small" : 12px, +// 450px : 13px, +// 1100px : 14px, +// "large" : 15px, +// 1600px : 16px, +// ) +// ); +// +// +@mixin responsive($properties, $values, $responsive-values, $use-available-mixins: true) { + @each $property in $properties { + @if $property == "font-size" and $use-available-mixins == true { + #{$property}: $values; + #{$property}: ($values / $base-font-size) * 1rem; + } @else if $property == "line-height" and $use-available-mixins == true { + #{$property}: ceil($values / $base-line-height) * ($base-line-height / $values); + } @else { + #{$property}: $values; + } + } + + @each $breakpoint, $value in $responsive-values { + @if type-of($breakpoint) == string { + @if(map-has-key($breakpoint-map, $breakpoint)) { + $breakpoint: map-get($breakpoint-map, $breakpoint); + } @else { + $breakpoint: "null"; + @warn "Couldn't find breakpoint: " + $breakpoint; + } + } + + @if $breakpoint != "null" { + @media (min-width: $breakpoint) { + @each $property in $properties { + @if $property == "font-size" and $use-available-mixins == true { + #{$property}: #{$value}; + #{$property}: ($value / $base-font-size) * 1rem; + } @else if $property == "line-height" and $use-available-mixins == true { + #{$property}: ceil($value / $base-line-height) * ($base-line-height / $value); + } @else { + #{$property}: #{$value}; + } + } + } + } + } +} + + +// +// Generates CSS to wrap semantic columns +// in a row. +// +// Example: +// `@include row()` +// +// +@mixin row() { + width: 100%; + + &:after { + clear: both; + content: " "; + display: table; + } +} + + +// +// Generates CSS for semantic columns. +// +// Parameters: +// $column: the number of this particular column (determines width) +// $number-columns: number of columns in the row (default is `$column-number`) +// $first-column: set to `true` if it's the first column in a row (default is false) +// $use-gutters: set to `true` if you want column gutters (default is false) +// $gutter-value: percentage value of the gutters to be applied (default is `$gutters` variable) +// +// Example: +// `@include column(16, 4, false, true, 4)` +// +// +@mixin column($column, $number-columns: $column-number, $first-column: false, $use-gutters: false, $gutter-value: strip-units($gutters)) { + @include vendor(background-clip, padding-box, webkit); + + @include breakpoint(small) { + @if $use-gutters == true { + $gutter-size: percentage($gutter-value) * 0.01; + $width-of-column: (100% - $gutter-size * ($number-columns - 1)) / $number-columns; + + float: left; + @if $first-column == false { + margin-left: $gutter-size; + } + width: $width-of-column * $column + $gutter-size * ($column - 1); + } @else { + float: left; + width: percentage(100 / $number-columns * $column) * .01; + } + } +} + + +// +// Generates CSS for pushing a semantic column left or right. +// +// Parameters: +// $option: set to `push` or `pull` to generate proper styles +// $column: the column number +// $number-columns: the number of columns in the row (default is $column-number) +// $use-gutters: set to `true` if your column has gutters (default is false) +// $gutter-value: percentage value of the gutters to be applied (default is `$gutters` variable) +// +// Example: +// `@include push-pull(push, 4, 16, true)` +// +// +@mixin push-pull($option, $column, $number-columns: $column-number, $use-gutters: false, $gutter-value: strip-units($gutters)) { + $property: ""; + + @if $option == "push" { + $property: "left"; + } @else { + $property: "right"; + } + + @if $use-gutters == true { + #{$property}: 100% / $number-columns * $column - $gutter-value; + } @else { + #{$property}: 100% / $number-columns * $column; + } +} + + +// +// Generates CSS that will clear both left +// and right floats. +// +// Example: +// `@include clearfix()` +// +// +@mixin clearfix() { + & { + &:after{ + content: ""; + display: table; + clear: both; + } + } +} + + +// +// Create variable-number grid columns given the value +// for variable `$column-number`. +// +// NOTE: +// This is a setup mixin for the Concise grid. If you +// wish to set up a grid, please use the `row()` and +// `column()` mixins. +// +@mixin grid-setup($number: $column-number) { + @for $i from 1 through $number { + $column-width-gutters: (100% - $gutters * ($number - 1)) / $number; + + .#{$column-prefix + $i} { + width: 100% / $number * $i; + + .gutters & { + width: $column-width-gutters * $i + $gutters * ($i - 1); + } + } + } +} + + +// +// Create `.push-` and `.pull-` classes given +// the value for variabls `$option` and +// `$column-number`. +// +// NOTE: +// This is a setup mixin for the push and pull +// functionality in the Concise grid. If you wish +// to use that functionality, please use the +// `push-pull()` mixin. +// +@mixin push-pull-setup($option, $number: $column-number) { + $property: ""; + + @if $option == "push" { + $property: "left"; + } @else { + $property: "right"; + } + + @for $i from 1 to $number { + .#{$option}-#{$i} { + #{$property}: 100% / $number * $i; + + .gutters & { + #{$property}: 100% / $number * $i - $gutters; + } + } + } +} diff --git a/app/assets/stylesheets/generic/_normalize.scss b/app/assets/stylesheets/helpers/_normalize.scss old mode 100755 new mode 100644 similarity index 80% rename from app/assets/stylesheets/generic/_normalize.scss rename to app/assets/stylesheets/helpers/_normalize.scss index efc5065..56bdceb --- a/app/assets/stylesheets/generic/_normalize.scss +++ b/app/assets/stylesheets/helpers/_normalize.scss @@ -1,10 +1,10 @@ @if $use-normalize == true { //------------------------------------ - // NORMALIZE - //------------------------------------ + // NORMALIZE + //------------------------------------ html { font-size: 100%; - @include vendor(text-size-adjust, 100%); + @include vendor(text-size-adjust, 100%, webkit moz ms o official); } article, @@ -20,9 +20,9 @@ section, summary { display: block; } - audio, - canvas, - progress, + audio, + canvas, + progress, video { display: inline-block; vertical-align: baseline; @@ -33,21 +33,21 @@ height: 0; } - [hidden], + [hidden], template { display: none; } a { background: transparent; - + &:focus { outline: thin dotted; } - - &:active, + + &:active, &:hover { outline: 0; } } abbr[title] { border-bottom: 1px dotted; } - b, + b, strong { font-weight: bold; } dfn { font-style: italic; } @@ -69,8 +69,8 @@ sub { bottom: -0.25em; } - img { - border: 0; + img { + border: 0; -ms-interpolation-mode: bicubic; } @@ -83,8 +83,8 @@ border-width: 1px 0 0; clear: both; height: 0; - - @include vendor(box-sizing, content-box); + + @include vendor(box-sizing, content-box, official); } pre { @@ -93,9 +93,9 @@ word-wrap: break-word; } - code, - kbd, - pre, + code, + kbd, + pre, samp { font-family: monospace, monospace; @include font-size($base-font-size); @@ -103,7 +103,7 @@ q { quotes: none; - + &:before, &:after { content: ''; @@ -113,10 +113,10 @@ form { margin: 0; } - button, - input, - optgroup, - select, + button, + input, + optgroup, + select, textarea { color: inherit; font: inherit; @@ -137,7 +137,7 @@ cursor: pointer; } - button[disabled], + button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, @@ -148,23 +148,23 @@ input { line-height: normal; - - &[type="checkbox"], + + &[type="checkbox"], &[type="radio"] { box-sizing: border-box; padding: 0; } - + &[type="number"] { - &::-webkit-inner-spin-button, + &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { height: auto; } } - + &[type="search"] { - -webkit-appearance: textfield; - @include vendor(box-sizing, content-box); - - &::-webkit-search-cancel-button, + -webkit-appearance: textfield; + @include vendor(box-sizing, content-box, official); + + &::-webkit-search-cancel-button, &::-webkit-search-decoration { -webkit-appearance: none; } } } @@ -186,6 +186,6 @@ border-spacing: 0; } - td, + td, th { padding: 0; } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/_defaults.scss b/app/assets/stylesheets/helpers/_variables.scss old mode 100755 new mode 100644 similarity index 50% rename from app/assets/stylesheets/_defaults.scss rename to app/assets/stylesheets/helpers/_variables.scss index 36505bf..72bab50 --- a/app/assets/stylesheets/_defaults.scss +++ b/app/assets/stylesheets/helpers/_variables.scss @@ -1,22 +1,28 @@ -// Thanks to inuitcss (https://github.com/csswizardry/inuit.css/blob/master/_defaults.scss) -// for the inspiration to create a default file for variables +//------------------------------------ +// BASE +//------------------------------------ +// Website background (can use color or image) +$website-bg-color: #ffffff !default; +// Enable font smoothing? +$enable-font-smoothing: true !default; -//------------------------------------ -// BASE -//------------------------------------ // Base font sizes and colors -$base-font-size: 16px !default; -$base-line-height: 24px !default; -$base-font-color: #333333 !default; -$base-link-color: #62b3e7 !default; +$base-font-size: 16px !default; +$base-line-height: 24px !default; +$base-font-color: #333333 !default; +$base-link-color: #62b3e7 !default; +$base-heading-color: #181818 !default; +$base-sub-heading-color: #808080 !default; // Base font-family $base-font-family: "Droid Sans", Helvetica, Arial, sans-serif !default; +$base-heading-font-family: "Droid Sans", Helvetica, Arial, sans-serif !default; +$base-print-font-family: Georgia, "Times New Roman", Times, serif !default; // Element spacing and line-height ratio @@ -32,33 +38,13 @@ $line-height-ratio: $base-line-height / $base-font-size; //------------------------------------ // Breakpoints -$extra-small-start: 30em !default; -$small-start: 48em !default; -$medium-start: 60em !default; -$large-start: 70em !default; -$extra-large-start: 80em !default; - - - - -//------------------------------------ -// FONT-SIZES -//------------------------------------ - -// Font-sizes (in pixels) -$giga-size: 96px !default; -$mega-size: 72px !default; -$kilo-size: 64px !default; - -$h1-size: 36px !default; -$h2-size: 30px !default; -$h3-size: 24px !default; -$h4-size: 20px !default; -$h5-size: 16px !default; -$h6-size: 14px !default; - -$small-size: 12px !default; -$micro-size: 10px !default; +$breakpoint-map: ( + "extra-small": 30em, + "small": 48em, + "medium": 60em, + "large": 70em, + "extra-large": 80em +); @@ -68,47 +54,59 @@ $micro-size: 10px !default; //------------------------------------ // Background colors -$bg-white: #ffffff !default; -$bg-black: #222222 !default; -$bg-light-gray: #f9f9f9 !default; -$bg-gray: #999999 !default; -$bg-light-green: #dff0d8 !default; -$bg-green: #5cb85c !default; -$bg-light-blue: #d9edf7 !default; -$bg-blue: #5bc0de !default; -$bg-light-yellow: #fcf8e3 !default; -$bg-yellow: #ed9c28 !default; -$bg-light-red: #f2dede !default; -$bg-red: #d9534f !default; +$bg-colors: ( + "white": #ffffff, + "black": #222222, + "gray": #999999, + "green": #5cb85c, + "blue": #5bc0de, + "yellow": #ed9c28, + "red": #d9534f +); // Type colors -$color-white: #ffffff !default; -$color-black: #222222 !default; -$color-gray: #999999 !default; -$color-green: #468847 !default; -$color-blue: #3a87ad !default; -$color-red: #d2322d !default; -$color-yellow: #c09853 !default; +$type-colors: ( + "white": #ffffff, + "black": #222222, + "gray": #999999, + "green": #468847, + "blue": #3a87ad, + "yellow": #c09853, + "red": #d2322d +); // Selection colors -$selection-background: #666666 !default; -$selection-color: #ffffff !default; +$selection-background: #666666 !default; +$selection-color: #ffffff !default; // Form placeholder colors -$placeholder-color: #bbbbbb !default; +$placeholder-color: #bbbbbb !default; // Colors used for our objects' borders, etc -$object-ui-color: #ededed !default; +$object-ui-color: #cccccc !default; + + +// Dropdown colors +$dropdown-bg-color: #ffffff !default; +$dropdown-border-color: #ededed !default; +$dropdown-hover-color: #f3f8f8 !default; +$dropdown-header-color: #aaaaaa !default; + + + +// Button font color +$button-font-color: #ffffff !default; +$button-hover-font-color: #ffffff !default; //------------------------------------ -// OBJECTS +// Components //------------------------------------ // Gutter size @@ -122,11 +120,7 @@ $column-prefix: 'column-' !default; // Dictate how many columns you would like your // grid system to use. Default is 16. -$column-number: 16 !default; - - -// Border radius value for `.border-radius` class -$border-radius: 4px !default; +$column-number: 16 !default; @@ -143,11 +137,10 @@ $border-radius: 4px !default; // for the idea to use feature switches in a framework. It's an absolutely brilliant idea // that makes customization so much easier. - // Utility -$use-normalize: true !default; -$use-clearfix: true !default; -$use-shared: true !default; +$use-normalize: true !default; +$use-clearfix: true !default; +$use-vertical-rhythm: true !default; // Base @@ -156,29 +149,26 @@ $use-selection: true !default; $use-container: true !default; $use-typography: true !default; $use-headings: true !default; -$use-blockquotes: true !default; $use-lists: true !default; + $use-list-styles: true !default; $use-tables: true !default; $use-table-styles: true !default; $use-forms: true !default; $use-form-styles: true !default; $use-grid: true !default; - $use-push: false !default; - $use-pull: false !default; + $use-push: true !default; + $use-pull: true !default; -// Objects +// Components $use-type-colors: true !default; $use-bg-colors: true !default; $use-buttons: true !default; -$use-groups: true !default; + $use-button-bg-colors: true !default; + $use-button-styles: true !default; $use-dropdowns: true !default; $use-navigation: true !default; $use-responsive-navigation: true !default; -$use-breadcrumbs: true !default; -$use-wells: true !default; -$use-badges: true !default; -$use-progress: true !default; // Helpers diff --git a/app/assets/stylesheets/layout/_container.scss b/app/assets/stylesheets/layout/_container.scss new file mode 100644 index 0000000..ee94342 --- /dev/null +++ b/app/assets/stylesheets/layout/_container.scss @@ -0,0 +1,17 @@ +@if $use-container == true { + //------------------------------------ + // CONTAINER + //------------------------------------ + .container { + margin: 0 auto; + + @include responsive("width", 90%, + ( + "small" : 620px, + "medium" : 768px, + "large" : 960px, + "extra-large" : 1140px + ) + ); + } +} diff --git a/app/assets/stylesheets/layout/_forms.scss b/app/assets/stylesheets/layout/_forms.scss new file mode 100644 index 0000000..f140f65 --- /dev/null +++ b/app/assets/stylesheets/layout/_forms.scss @@ -0,0 +1,103 @@ +@if $use-forms == true { + //------------------------------------ + // FORMS + //------------------------------------ + input { + &[type="checkbox"], + &[type="file"], + &[type="image"], + &[type="radio"] { + background: auto; + border: auto; + height: auto; + width: auto; + } + } + + input[disabled], + select[disabled], + textarea[disabled] { + background-color: #f6f6f6; + cursor: not-allowed; + } + + label { display: block; } + + textarea { height: auto; } + + + @if $use-form-styles == true { + // Form styling + .form { + input, + select, + textarea { + border: 1px solid $object-ui-color; + height: 37px; + padding: 5px; + width: 100%; + + @include vendor(box-sizing, border-box, official); + + @include breakpoint(extra-small) { + & { width: 300px; } + } + } + + textarea { height: auto; } + + @include breakpoint(extra-small) { + input[type="submit"] { + display: block; + width: auto; + } + } + + input:focus, + select:focus, + textarea:focus, + button:focus, + [contenteditable="true"]:focus { outline: 1px solid darken($object-ui-color, 15%); } + + fieldset { + border: 1px solid $object-ui-color; + padding: 10px 25px; + + legend { + font-weight: bold; + @include font-size(13px); + padding: 0 10px; + } + } + } + + + // Block-level form items + .form-item { display: block; } + + + // Inline Form + .form-inline { + label { width: auto; } + + @include breakpoint(small) { + label { + display: inline-block; + width: 100px; + } + + textarea { width: auto; } + } + } + + + // Placeholder text + ::-webkit-input-placeholder { color: $placeholder-color; } + + :-ms-input-placeholder { color: $placeholder-color; } + + ::-moz-placeholder { color: $placeholder-color; } + + :-moz-placeholder { color: $placeholder-color; } + } +} diff --git a/app/assets/stylesheets/layout/_grid.scss b/app/assets/stylesheets/layout/_grid.scss new file mode 100644 index 0000000..d0bbed0 --- /dev/null +++ b/app/assets/stylesheets/layout/_grid.scss @@ -0,0 +1,71 @@ +@if $use-grid == true { + //------------------------------------ + // GRID + //------------------------------------ + .row { + width: 100%; + + &:after { + clear: both; + content: " "; + display: table; + } + } + + [class*='#{$column-prefix}'] { + @include vendor(background-clip, padding-box !important, official); + + &.right { float: right; } + + img { max-width: 100%; } + } + + @include breakpoint(small) { + [class*='#{$column-prefix}'] { float: left; } + + .gutters [class*='#{$column-prefix}'] { + margin-left: $gutters; + + &:first-child { margin-left: 0; } + } + + + // Row columns + @include grid-setup(); + + + // Push + + // Thanks to inuitcss (https://github.com/csswizardry/inuit.css) for the idea to + // abstract 'push' and 'pull' into their own mixins. This makes adding/removing + // them to projects absolutely painless. + @if $use-push == true { + [class*='push-'] { position: relative; } + + @include push-pull-setup(push, $column-number); + } + + + // Pull + @if $use-pull == true { + [class*='pull-'] { position: relative; } + + @include push-pull-setup(pull, $column-number); + } + } + + + // Non-responsive grid + .non-responsive { + [class*='#{$column-prefix}'] { + float: left; + width: auto !important; + } + + .gutters [class*='#{$column-prefix}'], + &.gutters [class*='#{$column-prefix}'] { margin-left: $gutters; } + + .gutters [class*='#{$column-prefix}']:first-child, + &.gutters [class*='#{$column-prefix}']:first-child { margin-left: 0; } + } +} diff --git a/app/assets/stylesheets/layout/_lists.scss b/app/assets/stylesheets/layout/_lists.scss new file mode 100644 index 0000000..7be47a7 --- /dev/null +++ b/app/assets/stylesheets/layout/_lists.scss @@ -0,0 +1,88 @@ +@if $use-lists == true { + //------------------------------------ + // LISTS + //------------------------------------ + ul, + ol { + margin-left: 20px; + padding-left: 0px; + + li { + line-height: 1.75em; + position: relative; + } + + ul { + list-style-type: circle; + margin-bottom: auto; + + ul { list-style-type: square; } + + ol { list-style-type: lower-roman; } + + @include breakpoint(small) { + & { margin-left: 20px; } + } + } + + ol { + list-style-type: lower-latin; + margin-bottom: auto; + + ol { list-style-type: lower-roman; } + + ul { list-style-type: square; } + } + } + + + @if $use-list-styles == true { + // Unstyled + .list-unstyled { + margin-left: 0px; + list-style: none; + + ul { + list-style: none; + + ul { list-style: none; } + } + } + + + // Inline + .list-inline { + margin-left: 0px; + + li { + border-bottom: none; + display: inline; + margin-right: 15px; + + &:last-child { margin-right: 0px; } + + @include breakpoint(small) { + & { + margin-right: 15px; + + &:last-child { margin-right: 0px; } + } + } + + @include breakpoint(medium) { + & { + margin-right: 30px; + + &:last-child { margin-right: 0px; } + } + } + } + } + } + + + // Definition Lists + dt { font-weight: bold; } + + dd { margin-left: 0px; } +} diff --git a/app/assets/stylesheets/layout/tables.scss b/app/assets/stylesheets/layout/tables.scss new file mode 100644 index 0000000..f39025a --- /dev/null +++ b/app/assets/stylesheets/layout/tables.scss @@ -0,0 +1,63 @@ +@if $use-tables == true { + //------------------------------------ + // TABLES + //------------------------------------ + + @if $use-table-styles == true { + table { + // Table styling + &.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 $object-ui-color; } + + th, + td { padding: 12px 15px; } + + td { border-top: 1px solid $object-ui-color; } + + @include breakpoint(extra-small) { + & { + width: auto; + + th, + td { padding: 10px 50px 10px 25px; } + } + } + } + + &.table-full, + &.table.table-full { width: 100%; } + } + } + + + // Responsive tables + .table-responsive { + overflow: auto; + width: 100%; + + table { margin-bottom: 0; } + + &::-webkit-scrollbar { + height: 14px; + width: 14px; + + -webkit-appearance: none; + } + + &::-webkit-scrollbar-thumb { + background-color: rgba(50, 50, 50, 0.2); + border: 3px solid #fff; + border-radius: 8px; + } + } +} diff --git a/app/assets/stylesheets/objects/_badges.scss b/app/assets/stylesheets/objects/_badges.scss deleted file mode 100755 index 5ff0a56..0000000 --- a/app/assets/stylesheets/objects/_badges.scss +++ /dev/null @@ -1,53 +0,0 @@ -@if $use-badges == true { - //------------------------------------ - // BADGES - //------------------------------------ - .label, - .badge { - background-color: #b5b5b5; - color: #fff; - @include font-size(12px); - font-weight: bold; - padding: 3px 7px; - text-align: center; - vertical-align: baseline; - white-space: nowrap; - } - - .label { - border-radius: 4px; - display: inline; - } - - .badge { - border-radius: 10px; - display: inline-block; - padding: 1px 7px; - } - - .label[href] { - &:hover, &:focus { - color: #fff; - cursor: pointer; - text-decoration: none; - } - } - - a.badge { - &:hover, &:focus { - color: #fff; - cursor: pointer; - text-decoration: none; - } - } - - .label a, - .badge a { - color: #fff; - cursor: pointer; - text-decoration: none; - } - - .label:empty, - .badge:empty { display: none; } -} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_breadcrumbs.scss b/app/assets/stylesheets/objects/_breadcrumbs.scss deleted file mode 100755 index 26783c7..0000000 --- a/app/assets/stylesheets/objects/_breadcrumbs.scss +++ /dev/null @@ -1,35 +0,0 @@ -@if $use-breadcrumbs == true { - //------------------------------------ - // BREADCRUMBS - //------------------------------------ - .breadcrumbs { - @include font-size(13px); - margin: 12px 0; - padding: 5px 15px 5px 0; - - li { - display: inline; - margin-right: 10px; - - &:last-child { margin-right: 0px; } - - &:after { - content: "/"; - color: #ccc; - padding-left: 12px; - vertical-align: middle; - } - - &:last-child { - color: #999; - - a { color: #999; } - - &:after { content: ""; } - } - } - - .well, - &.well { padding-left: 15px; } - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_buttons.scss b/app/assets/stylesheets/objects/_buttons.scss deleted file mode 100755 index f7d782d..0000000 --- a/app/assets/stylesheets/objects/_buttons.scss +++ /dev/null @@ -1,287 +0,0 @@ -@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; } - } - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_colors.scss b/app/assets/stylesheets/objects/_colors.scss deleted file mode 100755 index 7a7f9a4..0000000 --- a/app/assets/stylesheets/objects/_colors.scss +++ /dev/null @@ -1,48 +0,0 @@ -//------------------------------------ -// COLORS -//------------------------------------ - -@if $use-bg-colors == true { - // 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; } -} - - -@if $use-type-colors == true { - // 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; } -} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_groups.scss b/app/assets/stylesheets/objects/_groups.scss deleted file mode 100755 index 60715ea..0000000 --- a/app/assets/stylesheets/objects/_groups.scss +++ /dev/null @@ -1,102 +0,0 @@ -@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; - } - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_navigation.scss b/app/assets/stylesheets/objects/_navigation.scss deleted file mode 100755 index ec4a37c..0000000 --- a/app/assets/stylesheets/objects/_navigation.scss +++ /dev/null @@ -1,382 +0,0 @@ - @if $use-navigation == true { - //------------------------------------ - // NAVIGATION - //------------------------------------ - nav { - ul { - list-style: none; - margin: 0; - } - - li { - cursor: pointer; - position: relative; - } - - - // Dropdown - .dropdown li { margin-right: 0px; } - } - - - // Nested dropdown - .nav-dropdown { - ul { - ul { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; - - ul { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; - } - } - - ol ul, - ul ol, - ol ol { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; - } - } - - ol { - ol, - ul { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; - } - - ol { - ol, - ul { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; - } - } - - ul { - ul, - ol { - display: none; - left: 0; - margin: 0; - opacity: 0; - padding: 0; - position: absolute; - visibility: hidden; - width: 150px; - z-index: 99999; - } - } - } - - .list-inline li li, - &.list-inline li li { margin-right: 0px; } - - li li { - background: #fff; - display: block; - } - - ul { - ul ul, - ol ul, - ul ol, - ol ol { display: block; } - } - - ol { - ul ul, - ol ul, - ul ol { display: block; } - } - - ul li:hover { - ul, - ol { - display: block; - opacity: 1; - top: 100%; - visibility: visible; - } - } - - ol li:hover { - ul, - ol { - display: block; - opacity: 1; - top: 100%; - visibility: visible; - } - } - - ul li:hover { - ul ul, - ol ul, - ul ol, - ol ol { - display: none; - opacity: 0; - visibility: hidden; - } - } - - ol li:hover { - ul ul, - ol ul, - ul ol, - ol ol { - display: none; - opacity: 0; - visibility: hidden; - } - } - - ul { - ul li:hover { - ul, - ol { - display: block; - left: 100%; - opacity: 1; - position: absolute; - top: 0; - visibility: visible; - } - } - - ol li:hover { - ol, - ul { - display: block; - left: 100%; - opacity: 1; - position: absolute; - top: 0; - visibility: visible; - } - } - } - - ol { - ul li:hover { - ul, - ol { - display: block; - left: 100%; - opacity: 1; - position: absolute; - top: 0; - visibility: visible; - } - } - - ol li:hover { - ol, - ul { - display: block; - left: 100%; - opacity: 1; - position: absolute; - top: 0; - visibility: visible; - } - } - } - } - - - // Vertical - .nav-vertical { - li { - display: block; - margin-right: 0px; - padding: 10px; - } - - .icon { - line-height: inherit; - margin-right: 7px; - - &.right, &.text-right { margin-right: 0px; } - } - - &.nav-bordered { - border: 1px solid #eee; - - li:hover { background-color: #f6f6f6; } - } - - &.nav-line li:hover { background-color: #f6f6f6; } - - .badge, - .label { margin-top: 5px; } - - .dropdown .dropdown-menu { top: 100%; } - } - - @include breakpoint(small) { - .nav-vertical .dropdown .dropdown-menu { - left: 100%; - top: 0; - } - } - - - @if $use-responsive-navigation == true { - // Responsive navigation - // - // Thanks to Ben Plum for the great work on his - // Naver plugin (https://github.com/benplum/Naver/) - .naver { - .naver-handle { - color: inherit; - cursor: pointer; - display: none; - @include font-size(24px); - text-align: right; - text-transform: uppercase; - - @include vendor(user-select, none); - } - - .naver-wrapper { - height: auto; - width: 100%; - } - - &.enabled { - .naver-handle { display: block; } - - .naver-wrapper { - height: 0px; - overflow: hidden; - - li { - display: block; - padding: 8px; - text-align: left; - width: 100%; - - &:hover { background: #f9f9f9; } - } - } - } - } - - .nav-responsive { - &.naver .naver-handle:after { - content: "\f0c9"; - font-family: FontAwesome; - text-align: right; - } - - &.nav-responsive-text.naver { - .naver-handle:after { content: "\00a0 \f0c9"; } - - .naver-container:before { - clear: both; - content: "."; - display: block; - height: 0; - line-height: 0; - text-align: right; - visibility: hidden; - } - } - } - - - // Left-aligned responsive navigation - .nav-responsive-left { - &.naver .naver-handle { - text-align: left; - - &:before { - content: "\f0c9"; - font-family: FontAwesome; - text-align: left; - } - } - - &.nav-responsive-text.naver { - .naver-handle:before { content: "\f0c9 \00a0"; } - - .naver-container:after { - clear: both; - content: "."; - display: block; - height: 0; - line-height: 0; - text-align: left; - visibility: hidden; - } - } - } - - - // Centered responsive navigation - .nav-responsive-center { - &.naver .naver-handle { - text-align: center; - - &:before { - content: "\f0c9"; - font-family: FontAwesome; - text-align: center; - } - } - - &.nav-responsive-text.naver { - .naver-handle:before { content: "\f0c9 \00a0"; } - - .naver-container:after { - clear: both; - content: "."; - display: block; - height: 0; - line-height: 0; - text-align: center; - visibility: hidden; - } - } - } - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_progress.scss b/app/assets/stylesheets/objects/_progress.scss deleted file mode 100755 index 0e5924a..0000000 --- a/app/assets/stylesheets/objects/_progress.scss +++ /dev/null @@ -1,106 +0,0 @@ -@if $use-progress == true { - //------------------------------------ - // PROGRESS - //------------------------------------ - - // Thanks to Chris Coyier's article on - // CSS3 Progress Bars which helped me create - // these (http://css-tricks.com/css3-progress-bars/) - .progress { - background-color: #f9f9f9; - color: #fff; - @include font-size(11px, false); - height: 12px; - line-height: 1.182; - margin: 6px 0; - position: relative; - text-align: center; - width: 100%; - - @include vendor(box-shadow, inset 0 1px 1px rgba(100, 100, 100, 0.1)); - - @include vendor(box-sizing, initial); - } - - .progress-small { - @include font-size(9px, false); - height: 6px; - line-height: 0.875; - } - - .progress-large { - @include font-size($base-font-size, false); - height: 25px; - line-height: 1.7; - } - - .progress { - > span { - background-color: rgb(43, 194, 83); - display: block; - height: 100%; - overflow: hidden; - position: relative; - width: auto; - } - - - // Rounded corners - &.border-radius > span { border-radius: $border-radius; } - - - // Stacked - &.progress-stacked { - > span { - display: inline-block; - float: left; - } - - &.border-radius > span { - border-radius: 0px; - - &:first-of-type { border-radius: $border-radius 0 0 $border-radius; } - - &:last-of-type { border-radius: 0 $border-radius $border-radius 0; } - } - } - } - - - // Striped - .progress-striped { - > span { - &:after, > span { - bottom: 0; - content: ""; - left: 0; - overflow: hidden; - position: absolute; - right: 0; - top: 0; - z-index: 1; - - @include vendor(background-size, 50px 50px); - - background-image: - -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); - background-image: - -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); - } - } - - - // Animated - &.progress-animate > span { - &:after, > span { - @include vendor(animation, move 2s linear infinite); - } - } - } - - @-webkit-keyframes move { - 0% { background-position: 0 0; } - - 100% { background-position: 50px 50px; } - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/objects/_wells.scss b/app/assets/stylesheets/objects/_wells.scss deleted file mode 100755 index 6a73381..0000000 --- a/app/assets/stylesheets/objects/_wells.scss +++ /dev/null @@ -1,103 +0,0 @@ -@if $use-wells == true { - //------------------------------------ - // WELLS - //------------------------------------ - .well { - background-color: #f9f9f9; - border-color: #ededed; - border-style: solid; - border-width: 1px; - margin-bottom: 24px; - padding: 0px 15px; - - h1, h2, h3, h4, h5, h6, - .h1, .h2, .h3, .h4, .h5, .h6, - .giga, .mega, .kilo { color: inherit; } - - p { margin: 10px 0; } - - pre, - .pre.well { - @include font-size(14px); - padding: 10px 15px; - } - } - - .well { - // Headings - header { - h1, h2, h3, h4, h5, h6, - .h1, .h2, .h3, .h4, .h5, .h6, - .giga, .mega, .kilo { margin: 20px 0 10px; } - - .label, - .badge { margin-top: 10px; } - } - - - // Background colors - &[class*='bg-'] { color: #fff; } - - &.bg-white { color: #666; } - - &.bg-black { border-color: #000; } - - &.bg-green { border-color: darken($bg-green, 15%); } - - &.bg-light-green { - border-color: darken($bg-green, 15%); - color: $color-green; - } - - &.bg-blue { border-color: darken($bg-blue, 15%); } - - &.bg-light-blue { - border-color: darken($bg-blue, 15%); - color: $color-blue; - } - - &.bg-yellow { border-color: darken($bg-yellow, 15%); } - - &.bg-light-yellow { - border-color: darken($bg-yellow, 15%); - color: $color-yellow; - } - - &.bg-red { border-color: darken($bg-red, 15%); } - - &.bg-light-red { - border-color: darken($bg-red, 15%); - color: $color-red; - } - } - - - // Close icon - .close { - color: #000; - filter: alpha(opacity = 20); - float: right; - @include font-size(22px); - font-weight: bold; - opacity: .2; - - &:hover, &:focus { - color: #000; - cursor: pointer; - filter: alpha(opacity = 50); - opacity: .5; - text-decoration: none; - - @include vendor(transition, all 0.2s linear); - } - } - - button.close { - background: transparent; - border: 0; - cursor: pointer; - padding: 0; - } - - .well .close { margin-top: 6px; } -} \ No newline at end of file diff --git a/lib/concisecss/concisecss_source.rb b/lib/concisecss/concisecss_source.rb index 1e0d082..324dee6 100644 --- a/lib/concisecss/concisecss_source.rb +++ b/lib/concisecss/concisecss_source.rb @@ -12,56 +12,46 @@ def fetch self.destination_root = "app/assets" remote = "https://github.com/ConciseCSS/concise.css" get "#{remote}/raw/#{tag}/scss/concise.scss", "stylesheets/concise.scss" - get "#{remote}/raw/#{tag}/scss/_defaults.scss", "stylesheets/_defaults.scss" - get "#{remote}/raw/#{tag}/scss/objects/_badges.scss", "stylesheets/objects/_badges.scss" - get "#{remote}/raw/#{tag}/scss/objects/_breadcrumbs.scss", "stylesheets/objects/_breadcrumbs.scss" - get "#{remote}/raw/#{tag}/scss/objects/_buttons.scss", "stylesheets/objects/_buttons.scss" - get "#{remote}/raw/#{tag}/scss/objects/_colors.scss", "stylesheets/objects/_colors.scss" - get "#{remote}/raw/#{tag}/scss/objects/_dropdowns.scss", "stylesheets/objects/_dropdowns.scss" - get "#{remote}/raw/#{tag}/scss/objects/_groups.scss", "stylesheets/objects/_groups.scss" - get "#{remote}/raw/#{tag}/scss/objects/_navigation.scss", "stylesheets/objects/_navigation.scss" - get "#{remote}/raw/#{tag}/scss/objects/_progress.scss", "stylesheets/objects/_progress.scss" - get "#{remote}/raw/#{tag}/scss/objects/_wells.scss", "stylesheets/objects/_wells.scss" - get "#{remote}/raw/#{tag}/scss/generic/_clearfix.scss", "stylesheets/generic/_clearfix.scss" - get "#{remote}/raw/#{tag}/scss/generic/_conditional.scss", "stylesheets/generic/_conditional.scss" - get "#{remote}/raw/#{tag}/scss/generic/_helper.scss", "stylesheets/generic/_helper.scss" - get "#{remote}/raw/#{tag}/scss/generic/_mixins.scss", "stylesheets/generic/_mixins.scss" - get "#{remote}/raw/#{tag}/scss/generic/_normalize.scss", "stylesheets/generic/_normalize.scss" - get "#{remote}/raw/#{tag}/scss/generic/_print.scss", "stylesheets/generic/_print.scss" - get "#{remote}/raw/#{tag}/scss/generic/_shared.scss", "stylesheets/generic/_shared.scss" - get "#{remote}/raw/#{tag}/scss/base/_blockquotes.scss", "stylesheets/base/_blockquotes.scss" - get "#{remote}/raw/#{tag}/scss/base/_container.scss", "stylesheets/base/_container.scss" - get "#{remote}/raw/#{tag}/scss/base/_forms.scss", "stylesheets/base/_forms.scss" - get "#{remote}/raw/#{tag}/scss/base/_grid.scss", "stylesheets/base/_grid.scss" + get "#{remote}/raw/#{tag}/scss/layout/_tables.scss", "stylesheets/layout/tables.scss" + get "#{remote}/raw/#{tag}/scss/layout/_lists.scss", "stylesheets/layout/_lists.scss" + get "#{remote}/raw/#{tag}/scss/layout/_grid.scss", "stylesheets/layout/_grid.scss" + get "#{remote}/raw/#{tag}/scss/layout/_forms.scss", "stylesheets/layout/_forms.scss" + get "#{remote}/raw/#{tag}/scss/layout/_container.scss", "stylesheets/layout/_container.scss" + get "#{remote}/raw/#{tag}/scss/helpers/_clearfix.scss", "stylesheets/helpers/_clearfix.scss" + get "#{remote}/raw/#{tag}/scss/helpers/_conditional.scss", "stylesheets/helpers/_conditional.scss" + get "#{remote}/raw/#{tag}/scss/helpers/_functions.scss", "stylesheets/helpers/_functions.scss" + get "#{remote}/raw/#{tag}/scss/helpers/_helpers.scss", "stylesheets/helpers/_helpers.scss" + get "#{remote}/raw/#{tag}/scss/helpers/_mixins.scss", "stylesheets/helpers/_mixins.scss" + get "#{remote}/raw/#{tag}/scss/helpers/_normalize.scss", "stylesheets/helpers/_normalize.scss" + get "#{remote}/raw/#{tag}/scss/helpers/_variables.scss", "stylesheets/helpers/_variables.scss" + get "#{remote}/raw/#{tag}/scss/components/_buttons.scss", "stylesheets/components/_buttons.scss" + get "#{remote}/raw/#{tag}/scss/components/_colors.scss", "stylesheets/components/_colors.scss" + get "#{remote}/raw/#{tag}/scss/components/_dropdowns.scss", "stylesheets/components/_dropdowns.scss" + get "#{remote}/raw/#{tag}/scss/components/_navigation.scss", "stylesheets/components/_navigation.scss" get "#{remote}/raw/#{tag}/scss/base/_headings.scss", "stylesheets/base/_headings.scss" - get "#{remote}/raw/#{tag}/scss/base/_lists.scss", "stylesheets/base/_lists.scss" get "#{remote}/raw/#{tag}/scss/base/_main.scss", "stylesheets/base/_main.scss" + get "#{remote}/raw/#{tag}/scss/base/_print.scss", "stylesheets/base/_print.scss" get "#{remote}/raw/#{tag}/scss/base/_selection.scss", "stylesheets/base/_selection.scss" - get "#{remote}/raw/#{tag}/scss/base/_tables.scss", "stylesheets/base/_tables.scss" get "#{remote}/raw/#{tag}/scss/base/_type.scss", "stylesheets/base/_type.scss" + get "#{remote}/raw/#{tag}/scss/base/_vertical-rhythm.scss", "stylesheets/base/_vertical-rhythm.scss" get "#{remote}/raw/#{tag}/js/non-responsive.js", "javascripts/concisecss/non-responsive.js" get "#{remote}/raw/#{tag}/js/navigation.js", "javascripts/concisecss/navigation.js" get "#{remote}/raw/#{tag}/js/naver.js", "javascripts/concisecss/naver.js" get "#{remote}/raw/#{tag}/js/dropdown.js", "javascripts/concisecss/dropdown.js" - get "#{remote}/raw/#{tag}/js/close.js", "javascripts/concisecss/close.js" end private - def fetch_tags - http = HTTPClient.new - response = JSON.parse(http.get("https://api.github.com/repos/ConciseCSS/concise.css/tags").body) - response.map{|tag| tag["name"]}.sort - end - def select msg, elements - elements.each_with_index do |element, index| - say(block_given? ? yield(element, index + 1) : ("#{index + 1}. #{element.to_s}")) + def fetch_tags + http = HTTPClient.new + response = JSON.parse(http.get("https://api.github.com/repos/ConciseCSS/concise.css/tags").body) + response.map{|tag| tag["name"]}.sort end - result = ask(msg).to_i - elements[result - 1] - end - - # Thanks to Rogeriolol. For task approach. - - -end \ No newline at end of file + def select msg, elements + elements.each_with_index do |element, index| + say(block_given? ? yield(element, index + 1) : ("#{index + 1}. #{element.to_s}")) + end + result = ask(msg).to_i + elements[result - 1] + end +end diff --git a/lib/concisecss/version.rb b/lib/concisecss/version.rb index b29d770..370c838 100644 --- a/lib/concisecss/version.rb +++ b/lib/concisecss/version.rb @@ -1,3 +1,3 @@ module Concisecss - VERSION = "0.0.5" + VERSION = "2.0.0" end