atlas_assets 0.5.5 → 0.5.6

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    NWI1YzIxODkxYTgzZmU3NTA4N2Q5ODBiYWE2ZDRjMGVkMzFiMmFjYQ==
+    MjA1MTNhNDk2YWU3NGViODQ1ODhhYzE0ZGUxNzlmZWM1NmQ5M2NmMA==
   data.tar.gz: !binary |-
-    OGE2NDhiN2FjZDA2NDYxM2VkZjFkYmRhNTUxYTQ2NmRiZDM3MzVjOQ==
+    ZjI4MTVlMTA5OTdiNTA5NmYxZGMzODE5NGZmNmJkYjBhNGI2N2UwMg==
 SHA512:
   metadata.gz: !binary |-
-    NDAzOGUwYjY5Y2E1NDAwYTNkMTAwMThmODkxMTdmNjgxNDYwMmQ5N2NhNWM4
-    MTJlYmJmOTAxMzQ1OGU2ZjM1ZWE4NzhjYzJiZTI1ZWE2NjliZTBjNDFjNzFl
-    Zjk3MWYxZjM4ZjljZjNlMWQyODk1MmY5ZDJiNjFmNzY0ZDFmNzU=
+    OWY0NjJmNTBjM2FhNTQ1MjAzNzE4NmJiZTMxMDE0OTFhMGU0ZjkxYzE2MGI2
+    YTQ5YjBlYTBjOWMwYzA3MWU2ODhkZmQyMzAzNGM0OGY1ZjFiMWVhNGEzMWEy
+    MmQyMDVmYmE3ODhkYmIzYWIyZmY0N2ZkNDE5ZWNiZTVhODI2YzE=
   data.tar.gz: !binary |-
-    NWEyNzc5ZDYyZjVkOWM0ZDNkOTQ5OTFhMTk2MTdiZDY2MTMzN2YwNmE0MTY1
-    N2I2ZDM5MjgxZjQ1ZjM3OGE2YzVlNTU0ZWYwNTc5YTgzZTkxNjQ4ZGI3OWQ4
-    ZDE4YmQ0ZGE0OGRjZDIxNWI3ZGQ1ZmU1MjY4MWM4ZWQyYTExNzY=
+    OWU4YTJiZTY3MGY5MmQ0ZjFhY2VjOTc0Njk2Yzg1M2NhMGMwNTc4ODI5NmY5
+    ZGIwNmRhZjViZGJmNTU1MzU5OWE0ODNhNjQ5ZjUyODBhMGY4NjVkYzc2NDBj
+    ZDUwNjRkNTdiM2Y4OTJlZjM1NjhlMDMwNDdhODk1MWQ0YzkyZTQ=

data/Gemfile.lock

@@ -9,19 +9,19 @@ GIT
 PATH
   remote: .
   specs:
-    atlas_assets (0.5.4)
+    atlas_assets (0.5.5)
       handlebars_assets (~> 0.12.2)
 
 GEM
   remote: https://rubygems.org/
   specs:
-    classifier (1.3.3)
+    classifier (1.3.4)
       fast-stemmer (>= 1.0.0)
     coderay (1.0.9)
     coffee-script (2.2.0)
       coffee-script-source
       execjs
-    coffee-script-source (1.6.3)
+    coffee-script-source (1.7.0)
     colorator (0.1)
     commander (4.1.5)
       highline (~> 1.6.11)
@@ -45,10 +45,10 @@ GEM
       pygments.rb (~> 0.5.0)
       safe_yaml (~> 0.7.0)
     kramdown (1.0.2)
-    liquid (2.5.4)
-    maruku (0.7.0)
-    multi_json (1.8.2)
-    posix-spawn (0.3.6)
+    liquid (2.5.5)
+    maruku (0.7.1)
+    multi_json (1.8.4)
+    posix-spawn (0.3.8)
     puma (2.0.1)
       rack (>= 1.1, < 2.0)
     pygmentize (0.0.3)
@@ -61,8 +61,8 @@ GEM
     rack-rewrite (1.3.3)
     rake (10.0.4)
     safe_yaml (0.7.1)
-    sass (3.2.12)
-    sprockets (2.10.0)
+    sass (3.2.14)
+    sprockets (2.10.1)
       hike (~> 1.2)
       multi_json (~> 1.0)
       rack (~> 1.0)

data/README.md

@@ -25,6 +25,23 @@ If you need to, you can import individual stylesheets from this gem in your appl
 @import "atlas_assets/icons";
 ```
 
+Local Development
+-----------------
+
+To get started on your own machine first install the required gems with bundler"
+
+```
+bundle install
+```
+
+Then to run the site and watch for changes run:
+
+```
+foreman start -f Procfile.dev
+```
+
+This will launch the jekyll command as well as a second script to watch for changes to stylesheets and write those changes to `docs/ignore` to trigger rebuilds from jekyll. That folder is ignored by git and can be safely deleted.
+
 Adding new styles
 -----------------
 
@@ -40,4 +57,4 @@ You now have the site running in your browser on `localhost:4000`. Now follow th
 2. Implement your style by tweaking the CSS and checking the documentation on `localhost:4000`. Do not work from the specific Atlas Rails app by updating the gem constantly. All new styles should be developed using the `docs`, and should be independent from a particular application.
 3. When ready, bump the version number in `lib/atlas_assets/version.rb`, run `bundle update` and send a pull request to the master branch.
 4. When the pull request has been accepted, we'll publish the gem by running  `gem build atlas_assets.gemspec` and `gem push [NAME].gem`.
-5. Bump the `atlas_assets` gem version in your apps `Gemfile`, run `bundle`, and use the new styles.
+5. Bump the `atlas_assets` gem version in your apps `Gemfile`, run `bundle`, and use the new styles.

data/docs/_posts/2013-05-17-flash.md

@@ -45,7 +45,7 @@ Close button
 You can add a close button with the `.flash-close` class.
 
 <div class="flash">
-	<div class="flash-item">This is a message<a href="#" class="flash-close"><i class="icon-cross-3"></i></a></div>
+	<div class="flash-item">This is a message<a href="#" class="flash-close"><i class="icon-remove"></i></a></div>
 </div>
 
 ~~~html

data/docs/_posts/2013-05-17-lists.md

@@ -135,3 +135,72 @@ You can add a `list-icon` class to automatically flow the icon to the right of t
 	<li class="list-item list-padding"><a href="#">Item 4<i class="icon-angle-right list-icon"></i></a></li>
 </ul>
 ~~~
+
+
+Linked Lists
+----
+
+For those times when you want a link to occupy the entire list-item tag.
+
+<ul class="list">
+	<li class="list-item"><a class='list-padding' href="#">Item 1 (no icon)</a></li>
+	<li class="list-item"><a class='list-padding' href="#">Item 2 (with icon)<i class="icon-angle-right list-icon"></i></a></li>
+	<li class="list-item"><a class='list-padding' href="#">Item 3<i class="icon-angle-right list-icon"></i></a></li>
+	<li class="list-item"><a class='list-padding' href="#">Item 4<i class="icon-angle-right list-icon"></i></a></li>
+</ul>
+<br />
+
+
+~~~html
+<ul class="list">
+	<li class="list-item"><a class='list-padding' href="#">Item 1 (no icon)</a></li>
+	<li class="list-item"><a class='list-padding' href="#">Item 2 (with icon)<i class="icon-angle-right list-icon"></i></a></li>
+	<li class="list-item"><a class='list-padding' href="#">Item 3<i class="icon-angle-right list-icon"></i></a></li>
+	<li class="list-item"><a class='list-padding' href="#">Item 4<i class="icon-angle-right list-icon"></i></a></li>
+</ul>
+~~~
+
+Linked Lists + Clickable Icons
+----
+
+For those times when you want a link to occupy the entire list-item tag, *except* an icon to the right, to function as a button!
+
+<ul class="list">
+	<li class="list-item has-icon-outside-link"><a class='list-padding' href="#">Item 1</a><i class="icon-trash icn-round list-icon"></i></li>
+	<li class="list-item has-icon-outside-link"><a class='list-padding' href="#">Item 2</a><i class="icon-trash icn-round list-icon"></i></li>
+	<li class="list-item has-icon-outside-link"><a class='list-padding' href="#">Item 3</a><i class="icon-trash icn-round list-icon"></i></li>
+	<li class="list-item"><a class='list-padding' href="#">Item 4<i class="icon-angle-right list-icon"></i></a></li>
+	<li class="list-item has-icon-outside-link"><a class='list-padding' href="#">Item 5</a><i class="icon-trash icn-round list-icon"></i></li>
+</ul>
+<br />
+
+~~~html
+<ul class="list">
+	<li class="list-item has-icon-outside-link"><a class='list-padding' href="#">Item 1</a><i class="icon-trash icn-round list-icon"></i></li>
+	<li class="list-item has-icon-outside-link"><a class='list-padding' href="#">Item 2</a><i class="icon-trash icn-round list-icon"></i></li>
+	<li class="list-item has-icon-outside-link"><a class='list-padding' href="#">Item 3</a><i class="icon-trash icn-round list-icon"></i></li>
+	<li class="list-item"><a class='list-padding' href="#">Item 4<i class="icon-angle-right list-icon"></i></a></li>
+	<li class="list-item has-icon-outside-link"><a class='list-padding' href="#">Item 5</a><i class="icon-trash icn-round list-icon"></i></li>
+</ul>
+~~~
+
+Because the link's width is set with a percentage, this will break on lists with a width of less than about 550px. In that case, use `skinny`, as below.
+
+<ul class="list list-small" style='width: 200px;'>
+	<li class="list-item has-icon-outside-link skinny"><a class='list-padding' href="#">Item 1</a><i class="icon-trash icn-round list-icon"></i></li>
+	<li class="list-item has-icon-outside-link skinny"><a class='list-padding' href="#">Item 2</a><i class="icon-trash icn-round list-icon"></i></li>
+	<li class="list-item has-icon-outside-link skinny"><a class='list-padding' href="#">Item 3</a><i class="icon-trash icn-round list-icon"></i></li>
+	<li class="list-item"><a class='list-padding' href="#">Item 4<i class="icon-angle-right list-icon"></i></a></li>
+	<li class="list-item has-icon-outside-link skinny"><a class='list-padding' href="#">Item 5</a><i class="icon-trash icn-round list-icon"></i></li>
+</ul>
+<br />
+
+~~~html
+<ul class="list list-small" style='width: 200px;'>
+	<li class="list-item has-icon-outside-link skinny"><a class='list-padding' href="#">Item 1</a><i class="icon-trash icn-round list-icon"></i></li>
+	<li class="list-item has-icon-outside-link skinny"><a class='list-padding' href="#">Item 2</a><i class="icon-trash icn-round list-icon"></i></li>
+	<li class="list-item has-icon-outside-link skinny"><a class='list-padding' href="#">Item 3</a><i class="icon-trash icn-round list-icon"></i></li>
+	<li class="list-item"><a class='list-padding' href="#">Item 4<i class="icon-angle-right list-icon"></i></a></li>
+	<li class="list-item has-icon-outside-link skinny"><a class='list-padding' href="#">Item 5</a><i class="icon-trash icn-round list-icon"></i></li>
+</ul>
+~~~

data/docs/_posts/2014-2-10-colors.md

@@ -0,0 +1,95 @@
+---
+layout: default
+title:  "Colors"
+---
+
+<style>
+.active {
+    background-color: black !important;
+    color: white;
+    border: 1px black solid;
+}
+</style>
+
+Colors
+======
+
+$red:                 #ac2f3c;
+
+$darker_red:          #7E2B34;
+
+$medium_red:          #c73746;
+
+$light_red:           #C54653;
+
+$lighter_red:         #cf6262;
+
+$lightest_red:        #f1d4d4;
+
+$blue:                #417ba0;
+
+$darker_blue:         #2C5874;
+
+$blue_gray:           #739EB9;
+
+$light_blue:          #568EB3;
+
+$lighter_blue:        #a9cadf;
+
+$lightest_blue:       #e0eaed;
+
+$green:               #91b35b;
+
+$light_green:         #9FC06A;
+
+$darker_green:        #75914A;
+
+$yellow:              #D5B238;
+
+$darker_yellow:       #B89B39;
+
+$light_yellow:        #EBCF6E;
+
+$lightest_yellow:     #f3f3c3;
+
+$black:               #000000;
+
+$darkest_gray:        #242424;
+
+$darker_gray:         #333333;
+
+$medium_gray:         #808080;
+
+$mid_gray:            #aaaaaa;
+
+$gray:                #d1d1d1;
+
+$light_gray:          #e0e0e0;
+
+$lighter_gray:        #ececec;
+
+$lightest_gray:       #f7f7f7;
+
+$white:               #ffffff;
+
+<script>
+$(function() {
+  var color, div, p, _i, _len, _ref;
+  _ref = $('p');
+  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+    p = _ref[_i];
+    color = $(p).text().slice(-8, -1);
+    div = $("<div class='swatch' style='background-color: " + color + "; width: 60px; height: 40px;'>" + color + "</div>");
+    $(p).prepend(div);
+    $(p).css('color', color);
+  }
+  return $('p').on('click', function() {
+    color = $(this).text().slice(-8, -1);
+    $('body').css('background-color', color);
+    $('.active').removeClass('active');
+    return $(this).addClass('active');
+  });
+});
+
+
+</script>

data/lib/assets/stylesheets/atlas_assets/_flash.scss

@@ -18,6 +18,10 @@
 	top: 13px;
 	right: 15px;
 	color: $medium_gray;
+	&:hover {
+		color: $darker_gray;
+		text-decoration: none;
+	}
 }
 
 /* Colors

data/lib/assets/stylesheets/atlas_assets/_lists.scss

@@ -71,6 +71,36 @@
 	text-decoration: none;
 }
 
+/* Linked Lists
+_________________________________________________________________ */
+.list a.list-padding {
+	display: block;
+}
+
+/* Linked Lists + Icons outside of the link
+_________________________________________________________________ */
+.list .has-icon-outside-link {
+	padding-right: 8px;
+	a.list-padding {
+		width: 90%; // works till about 550px
+		display: inline-block;
+	}
+	.list-icon {
+		margin-top: 13px;
+	}
+	.list-icon:hover {
+		color: $black;
+		cursor: pointer;
+	}
+}
+
+// for lists with width smaller than 550px
+.list .has-icon-outside-link.skinny {
+	a.list-padding {
+		width: 70%;
+	}
+}
+
 /* List Helpers
 _________________________________________________________________ */
 
@@ -78,4 +108,7 @@ ul.clean, ul.clean li {
 	margin: 0;
 	padding: 0;
 	list-style: none;
-}
+}
+
+
+

data/lib/atlas_assets/version.rb

@@ -1,5 +1,5 @@
 module Atlas
 	module Assets
-		VERSION = "0.5.5"
+		VERSION = "0.5.6"
 	end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: atlas_assets
 version: !ruby/object:Gem::Version
-  version: 0.5.5
+  version: 0.5.6
 platform: ruby
 authors:
 - Rune Skjoldborg Madsen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-01-07 00:00:00.000000000 Z
+date: 2014-02-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: handlebars_assets
@@ -59,6 +59,7 @@ files:
 - docs/_posts/2013-05-30-tabs.md
 - docs/_posts/2013-09-12-logo.md
 - docs/_posts/2013-10-28-dropdown.md
+- docs/_posts/2014-2-10-colors.md
 - docs/glyphicons-license.txt
 - docs/index.html
 - lib/assets/fonts/fontawesome-webfont.eot
@@ -143,7 +144,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.1.7
+rubygems_version: 2.2.1
 signing_key: 
 specification_version: 4
 summary: Public repository with assets and design guide for the Atlas platform