concisecss 0.0.3 → 0.0.4

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

@@ -1,102 +1,106 @@
 @if $use-progress == true {
-    //------------------------------------//
-    //  $PROGRESS
-    //------------------------------------//
-    .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
+  //------------------------------------
+  
+  // 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-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-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; }
+  .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; }
         
-        // 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; }
-            }
-        }
+        &: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;
+  // 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);
-            }
-        }
-        
+        @include vendor(background-size, 50px 50px);
         
-        // Animated 
-        &.progress-animate > span {
-            &:after, > span {             
-                @include vendor(animation, move 2s linear infinite);
-            }
-        }
+        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);
+      }
     }
-
-    @-webkit-keyframes move {
-        0% { background-position: 0 0; }
-        
-        100% { background-position: 50px 50px; }
+    
+    
+    // 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; }
+  }
 }

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

@@ -1,103 +1,103 @@
 @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;
-        }
+  //------------------------------------
+  //  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;
-        }
+  .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);
-        }
+  // 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;
-    }
+  button.close {
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    padding: 0;
+  }
 
-    .well .close { margin-top: 6px; }
+  .well .close { margin-top: 6px; }
 }

data/lib/concisecss/concisecss_source.rb

@@ -24,7 +24,6 @@ class ConcisecssSource < Thor
     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/_debug.scss", "stylesheets/generic/_debug.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"
@@ -40,7 +39,6 @@ class ConcisecssSource < Thor
     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}/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"
@@ -48,8 +46,6 @@ class ConcisecssSource < Thor
     get "#{remote}/raw/#{tag}/js/close.js", "javascripts/concisecss/close.js"
   end
 
-
-
   private
 
   def fetch_tags
@@ -57,8 +53,6 @@ class ConcisecssSource < Thor
     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}"))
@@ -67,6 +61,7 @@ class ConcisecssSource < Thor
     elements[result - 1]
   end
 
+  # Thanks to Rogeriolol. For task approach.
 
 
 end

data/lib/concisecss/version.rb

@@ -1,3 +1,3 @@
 module Concisecss
-  VERSION = "0.0.3"
+  VERSION = "0.0.4"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: concisecss
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
 platform: ruby
 authors:
 - Benjamin Sigidi
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-07-20 00:00:00.000000000 Z
+date: 2014-07-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -106,7 +106,6 @@ files:
 - app/assets/stylesheets/concise.scss
 - app/assets/stylesheets/generic/_clearfix.scss
 - app/assets/stylesheets/generic/_conditional.scss
-- app/assets/stylesheets/generic/_debug.scss
 - app/assets/stylesheets/generic/_helper.scss
 - app/assets/stylesheets/generic/_mixins.scss
 - app/assets/stylesheets/generic/_normalize.scss

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

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