atlas_assets 0.0.17 → 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (29) hide show
  1. data/Gemfile.lock +1 -1
  2. data/README.md +2 -0
  3. data/docs/_layouts/default.html +14 -0
  4. data/docs/_posts/2013-05-17-grid.md +0 -18
  5. data/lib/assets/stylesheets/atlas_assets/_boxes.scss +21 -0
  6. data/lib/assets/stylesheets/{buttons.css.scss → atlas_assets/_buttons.scss} +8 -7
  7. data/lib/assets/stylesheets/atlas_assets/_code.scss +7 -0
  8. data/lib/assets/stylesheets/{flash.css.scss → atlas_assets/_flash.scss} +10 -6
  9. data/lib/assets/stylesheets/{fonts.css.scss → atlas_assets/_fonts.scss} +8 -12
  10. data/lib/assets/stylesheets/atlas_assets/_forms.scss +546 -0
  11. data/lib/assets/stylesheets/atlas_assets/_grid.scss +30 -0
  12. data/lib/assets/stylesheets/{icons.css.scss → atlas_assets/_icons.scss} +0 -0
  13. data/lib/assets/stylesheets/{lists.css.scss → atlas_assets/_lists.scss} +6 -14
  14. data/lib/assets/stylesheets/atlas_assets/_mixins.scss +356 -0
  15. data/lib/assets/stylesheets/{navbar.css.scss → atlas_assets/_navbar.scss} +8 -8
  16. data/lib/assets/stylesheets/atlas_assets/_reset.scss +213 -0
  17. data/lib/assets/stylesheets/atlas_assets/_responsive-767.scss +74 -0
  18. data/lib/assets/stylesheets/atlas_assets/_responsive-768-979.scss +5 -0
  19. data/lib/assets/stylesheets/atlas_assets/_responsive-utilities.scss +49 -0
  20. data/lib/assets/stylesheets/{helpers.css.scss → atlas_assets/_utilities.scss} +52 -10
  21. data/lib/assets/stylesheets/atlas_assets/_variables.scss +70 -0
  22. data/lib/assets/stylesheets/atlas_assets.scss +18 -0
  23. data/lib/atlas_assets/version.rb +1 -1
  24. metadata +19 -13
  25. data/lib/assets/stylesheets/atlas_assets.css +0 -11
  26. data/lib/assets/stylesheets/boxes.css.scss +0 -23
  27. data/lib/assets/stylesheets/forms.css.scss +0 -861
  28. data/lib/assets/stylesheets/grid.css.scss +0 -762
  29. data/lib/assets/stylesheets/pre.css.scss +0 -7
data/Gemfile.lock CHANGED
@@ -9,7 +9,7 @@ GIT
9
9
  PATH
10
10
  remote: .
11
11
  specs:
12
- atlas_assets (0.0.16)
12
+ atlas_assets (0.1.0)
13
13
  handlebars_assets (~> 0.12.1)
14
14
 
15
15
  GEM
data/README.md CHANGED
@@ -19,6 +19,8 @@ To use in a new Rails application, add the gem to your Gemfile, and add the foll
19
19
 
20
20
  Along with all the CSS and JS widgets, it will include our base bundle of JS libraries (`JQuery`, `underscore.js`, `backbone.js`, etc). It will also set up a number of JS namespaces `window.classes`, `window.app`, `window.events` and `window.constants`, so make sure to include the JS manifest before any of your JS code.
21
21
 
22
+ Show how to use color bars and mixins in the app
23
+
22
24
  Adding new styles
23
25
  -----------------
24
26
 
data/docs/_layouts/default.html CHANGED
@@ -33,6 +33,20 @@
33
33
  .CodeRay pre {
34
34
  margin-top: 0px;
35
35
  }
36
+ .show-grid {
37
+ margin-top: 10px;
38
+ margin-bottom: 20px;
39
+ }
40
+
41
+ .show-grid [class*="span"] {
42
+ background-color: #cecece;
43
+ text-align: center;
44
+ -webkit-border-radius: 3px;
45
+ -moz-border-radius: 3px;
46
+ border-radius: 3px;
47
+ min-height: 40px;
48
+ line-height: 40px;
49
+ }
36
50
  </style>
37
51
  </head>
38
52
  <body>
data/docs/_posts/2013-05-17-grid.md CHANGED
@@ -4,24 +4,6 @@ title: "Grid"
4
4
  date: 2013-05-17 23:24:04
5
5
  ---
6
6
 
7
- <style type="text/css">
8
-
9
- .show-grid {
10
- margin-top: 10px;
11
- margin-bottom: 20px;
12
- }
13
-
14
- .show-grid [class*="span"] {
15
- background-color: #eee;
16
- text-align: center;
17
- -webkit-border-radius: 3px;
18
- -moz-border-radius: 3px;
19
- border-radius: 3px;
20
- min-height: 40px;
21
- line-height: 40px;
22
- }
23
- </style>
24
-
25
7
  Grid
26
8
  ====
27
9
 
data/lib/assets/stylesheets/atlas_assets/_boxes.scss ADDED
@@ -0,0 +1,21 @@
1
+ .box {
2
+ background-color: $lighter_gray;
3
+ @include border-bottom-radius(5px);
4
+ margin-bottom: 10px;
5
+ }
6
+
7
+ .box .box-inner {
8
+ padding: 10px $boxPaddingX;
9
+ }
10
+
11
+ .box h3 {
12
+ color: $medium_gray;
13
+ padding: 8px 15px;
14
+ margin: 0;
15
+ background-color: $light_gray;
16
+ border-bottom: 1px solid $gray;
17
+ }
18
+
19
+ .box {
20
+ @include grid-core($gridColumnWidth768, $gridGutterWidth768);
21
+ }
data/lib/assets/stylesheets/{buttons.css.scss → atlas_assets/_buttons.scss} RENAMED
@@ -1,14 +1,14 @@
1
1
  .btn {
2
2
  display: inline-block;
3
- color: #FFF;
3
+ color: $white;
4
+ background-color: $dark_gray;
4
5
  cursor: pointer;
5
- background-color: #333;
6
6
  padding: 4px 12px;
7
7
  text-decoration: none;
8
8
  -webkit-border-radius: 3px;
9
9
  -moz-border-radius: 3px;
10
10
  border-radius: 3px;
11
- -webkit-font-smoothing: antialiased;
11
+ @include smooth();
12
12
  }
13
13
 
14
14
  input[type=submit].btn,
@@ -31,26 +31,27 @@ _________________________________________________________________ */
31
31
  .btn.medium {
32
32
  font-size: 17px;
33
33
  padding: 7px 16px;
34
+ @include border-radius(6px);
34
35
  }
35
36
 
36
37
  .btn.large {
37
38
  font-size: 22px;
38
39
  padding: 12px 25px;
39
40
  line-height: 26px;
41
+ @include border-radius(8px);
40
42
  }
41
43
 
42
44
  /* Colors
43
45
  _________________________________________________________________ */
44
46
 
45
47
  .btn.blue {
46
- background-color: #2c7db1;
48
+ background-color: $blue;
47
49
  }
48
50
 
49
51
  .btn.red {
50
- background-color: #c33c35;
51
- color: #FFF;
52
+ background-color: $red;
52
53
  }
53
54
 
54
55
  .btn.green {
55
- background-color: #91b35b;
56
+ background-color: $green;
56
57
  }
data/lib/assets/stylesheets/atlas_assets/_code.scss ADDED
@@ -0,0 +1,7 @@
1
+ code {
2
+ padding: 2px 4px;
3
+ color: $red;
4
+ white-space: nowrap;
5
+ background-color: $lightest_gray;
6
+ border: 1px solid $light_gray;
7
+ }
data/lib/assets/stylesheets/{flash.css.scss → atlas_assets/_flash.scss} RENAMED
@@ -1,15 +1,15 @@
1
1
  .flash {
2
- margin-top: 30px;
2
+ margin-bottom: $baseLineHeight;
3
3
  }
4
4
 
5
5
  .flash .flash-item {
6
- background-color: #e0eaed;
6
+ background-color: $gray;
7
7
  padding: 12px 20px;
8
8
  -webkit-border-radius: 5px;
9
9
  -moz-border-radius: 5px;
10
10
  border-radius: 5px;
11
11
  margin-top: 20px;
12
- color: #838a97;
12
+ color: $medium_gray;
13
13
  position: relative;
14
14
  }
15
15
 
@@ -17,16 +17,20 @@
17
17
  position: absolute;
18
18
  top: 13px;
19
19
  right: 15px;
20
- color: #838a97;
20
+ color: $medium_gray;
21
21
  }
22
22
 
23
23
  /* Colors
24
24
  __________________________________________________________ */
25
25
 
26
+ .flash-item.notice {
27
+ background-color: $lightest_blue;
28
+ }
29
+
26
30
  .flash-item.warning {
27
- background-color: rgb(243, 243, 195);
31
+ background-color: $lightest_yellow;
28
32
  }
29
33
 
30
34
  .flash-item.error {
31
- background-color: rgb(241, 212, 212);
35
+ background-color: $lightest_red;
32
36
  }
data/lib/assets/stylesheets/{fonts.css.scss → atlas_assets/_fonts.scss} RENAMED
@@ -18,16 +18,16 @@
18
18
  ---------------------------------------------------------------------------- */
19
19
 
20
20
  body {
21
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
22
- font-size: 14px;
23
- line-height: 20px;
24
- color: #333333;
21
+ font-family: $sansFontFamily;
22
+ font-size: $baseFontSize;
23
+ line-height: $baseLineHeight;
24
+ color: $dark_gray;
25
25
  }
26
26
 
27
27
  h1, h2, h3, h4, h5 {
28
- margin-bottom: 7px;
29
- color: #242424;
30
- -webkit-font-smoothing: antialiased;
28
+ margin-bottom: 7px;
29
+ color: $darkest_gray;
30
+ @include smooth();
31
31
  }
32
32
 
33
33
  h1 {
@@ -50,14 +50,10 @@ h4, h5, h6 {
50
50
  }
51
51
 
52
52
  a {
53
- color: #2c7db1;
53
+ color: $blue;
54
54
  text-decoration: none;
55
55
  }
56
56
 
57
- a:hover, a:focus {
58
- color: #0280d1;
59
- }
60
-
61
57
  /* Heading split
62
58
  --------------------------------------------------------- */
63
59