atlas_assets 0.1.6 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/Gemfile CHANGED
@@ -3,13 +3,13 @@ source 'https://rubygems.org'
3
3
  # Specify your gem's dependencies in atlas_assets.gemspec
4
4
  gemspec
5
5
 
6
- gem "rake"
7
- gem "jekyll"
8
- gem "sass"
6
+ gem "rake", "~> 10.0.4"
7
+ gem "jekyll", "~> 1.0.2"
8
+ gem "sass", "~> 3.2.9"
9
9
  gem 'jekyll-assets', :git => "git://github.com/ixti/jekyll-assets.git"
10
- gem 'rack-contrib'
11
- gem "rack-rewrite"
10
+ gem 'rack-contrib', "~> 1.1.0"
11
+ gem "rack-rewrite", "~> 1.3.3"
12
12
  gem "pygmentize", "~> 0.0.3"
13
- gem "kramdown"
14
- gem "coderay"
15
- gem "puma"
13
+ gem "kramdown", "~> 1.0.2"
14
+ gem "coderay", "~> 1.0.9"
15
+ gem "puma", "~> 2.0.1"
data/Gemfile.lock CHANGED
@@ -1,15 +1,15 @@
1
1
  GIT
2
2
  remote: git://github.com/ixti/jekyll-assets.git
3
- revision: a04c7628f4746f2b159cb0c5925876368d0029c1
3
+ revision: 0b8f155c5aab2967bf13635490bc1ff0a356f47f
4
4
  specs:
5
- jekyll-assets (0.5.1)
5
+ jekyll-assets (0.5.3)
6
6
  jekyll (~> 1.0)
7
7
  sprockets (~> 2.9)
8
8
 
9
9
  PATH
10
10
  remote: .
11
11
  specs:
12
- atlas_assets (0.1.6)
12
+ atlas_assets (0.1.7)
13
13
  handlebars_assets (~> 0.12.1)
14
14
 
15
15
  GEM
@@ -25,7 +25,7 @@ GEM
25
25
  execjs (1.4.0)
26
26
  multi_json (~> 1.0)
27
27
  fast-stemmer (1.0.2)
28
- handlebars_assets (0.12.1)
28
+ handlebars_assets (0.12.3)
29
29
  execjs (>= 1.2.9)
30
30
  sprockets (>= 2.0.3)
31
31
  tilt
@@ -45,7 +45,7 @@ GEM
45
45
  liquid (2.5.0)
46
46
  maruku (0.6.1)
47
47
  syntax (>= 1.0.0)
48
- multi_json (1.7.3)
48
+ multi_json (1.7.4)
49
49
  posix-spawn (0.3.6)
50
50
  puma (2.0.1)
51
51
  rack (>= 1.1, < 2.0)
@@ -60,7 +60,7 @@ GEM
60
60
  rake (10.0.4)
61
61
  safe_yaml (0.7.1)
62
62
  sass (3.2.9)
63
- sprockets (2.9.3)
63
+ sprockets (2.10.0)
64
64
  hike (~> 1.2)
65
65
  multi_json (~> 1.0)
66
66
  rack (~> 1.0)
data/README.md CHANGED
@@ -38,6 +38,6 @@ You now have the site running in your browser on `localhost:4000`. Now follow th
38
38
 
39
39
  1. Create you own feature branch
40
40
  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.
41
- 3. When ready, bump the version number in `lib/atlas_assets/version.rb`, and send a pull request to the master branch.
42
- 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`.
41
+ 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.
42
+ 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`.
43
43
  5. Bump the `atlas_assets` gem version in your apps `Gemfile`, run `bundle`, and use the new styles.
@@ -0,0 +1,101 @@
1
+ ---
2
+ layout: default
3
+ title: "Modals"
4
+ date: 2013-05-17 23:24:04
5
+ ---
6
+
7
+ <style type="text/css">
8
+ .show-modal {
9
+ position: static;
10
+ width: 560px;
11
+ margin-left: 0px;
12
+ }
13
+ </style>
14
+
15
+ Modals
16
+ ======
17
+
18
+ Style
19
+ -----
20
+
21
+ <div class="modal show-modal" role="dialog">
22
+ <div class="modal-header">
23
+ <button type="button" class="close" data-dismiss="modal">×</button>
24
+ <h3 id="myModalLabel">Modal header</h3>
25
+ </div>
26
+ <div class="modal-body">
27
+ <p>One fine body…</p>
28
+ </div>
29
+ <div class="modal-footer">
30
+ <button class="btn" data-dismiss="modal">Close</button>
31
+ <button class="btn btn-primary">Save changes</button>
32
+ </div>
33
+ </div><br />
34
+
35
+ ~~~html
36
+ <div class="modal hide" role="dialog">
37
+ <div class="modal-header">
38
+ <button type="button" class="close" data-dismiss="modal">×</button>
39
+ <h3 id="myModalLabel">Modal header</h3>
40
+ </div>
41
+ <div class="modal-body">
42
+ <p>One fine body…</p>
43
+ </div>
44
+ <div class="modal-footer">
45
+ <button class="btn" data-dismiss="modal">Close</button>
46
+ <button class="btn btn-primary">Save changes</button>
47
+ </div>
48
+ </div>
49
+ ~~~
50
+
51
+ Triggering
52
+ ----------
53
+
54
+ You can link a button to a modal either by using a data attribute, or by triggering it via Javascript. This example shows you both:
55
+
56
+ <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch via attribute</a>
57
+ <a href="#myModal" role="button" class="btn" id="js-modal-button">Launch via JS</a>
58
+ <script type="text/javascript">
59
+ $('#js-modal-button').click(function() {
60
+ $('#myModal').modal();
61
+ return false
62
+ });
63
+ </script>
64
+
65
+ <div id="myModal" class="modal hide" role="dialog">
66
+ <div class="modal-header">
67
+ <button type="button" class="close" data-dismiss="modal">×</button>
68
+ <h3 id="myModalLabel">Modal header</h3>
69
+ </div>
70
+ <div class="modal-body">
71
+ <p>One fine body…</p>
72
+ </div>
73
+ <div class="modal-footer">
74
+ <button class="btn" data-dismiss="modal">Close</button>
75
+ <button class="btn btn-primary">Save changes</button>
76
+ </div>
77
+ </div>
78
+
79
+ ~~~html
80
+ <!-- Trigger via data attribute -->
81
+ <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch via attribute</a>
82
+
83
+ <!-- Trigger via JS -->
84
+ <a href="#myModal" role="button" class="btn" id="js-modal-button">Launch via JS</a>
85
+ <script type="text/javascript">
86
+ $('#js-modal-button').click(function() {
87
+ $('#myModal').modal();
88
+ return false
89
+ });
90
+ </script>
91
+
92
+ <!-- Modal -->
93
+ <div id="myModal" class="modal hide" role="dialog">
94
+ ...
95
+ </div>
96
+ ~~~
97
+
98
+ Events, Options, etc
99
+ --------------------
100
+
101
+ The modal is built on Twitter Bootstrap, and inherits all events and options. See more [in the Bootstrap Docs](http://twitter.github.io/bootstrap/javascript.html#modals).
@@ -8,6 +8,7 @@
8
8
  -webkit-border-radius: 3px;
9
9
  -moz-border-radius: 3px;
10
10
  border-radius: 3px;
11
+ outline: none;
11
12
  @include smooth();
12
13
  }
13
14
 
@@ -59,4 +60,31 @@ _________________________________________________________________ */
59
60
  .btn.disabled {
60
61
  background-color: $light_gray;
61
62
  color: $mid_gray;
63
+ }
64
+
65
+ /* Close button
66
+ _________________________________________________________________ */
67
+
68
+ .close {
69
+ float: right;
70
+ font-size: 20px;
71
+ font-weight: bold;
72
+ line-height: $baseLineHeight;
73
+ color: $black;
74
+ @include opacity(20);
75
+ &:hover,
76
+ &:focus {
77
+ color: $black;
78
+ text-decoration: none;
79
+ cursor: pointer;
80
+ @include opacity(40);
81
+ }
82
+ }
83
+
84
+ button.close {
85
+ padding: 0;
86
+ cursor: pointer;
87
+ background: transparent;
88
+ border: 0;
89
+ -webkit-appearance: none;
62
90
  }
@@ -189,6 +189,23 @@
189
189
  -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
190
190
  }
191
191
 
192
+ /* Opacity
193
+ ------------------------------------------------- */
194
+
195
+ @mixin opacity($opacity) {
196
+ opacity: $opacity / 100;
197
+ filter: alpha(opacity=$opacity);
198
+ }
199
+
200
+ /* Background Clipping
201
+ ------------------------------------------------- */
202
+
203
+ @mixin background-clip($clip) {
204
+ -webkit-background-clip: $clip;
205
+ -moz-background-clip: $clip;
206
+ background-clip: $clip;
207
+ }
208
+
192
209
  /* Grid
193
210
  ------------------------------------------------- */
194
211
 
@@ -0,0 +1,68 @@
1
+ .modal-backdrop {
2
+ position: fixed;
3
+ top: 0;
4
+ right: 0;
5
+ bottom: 0;
6
+ left: 0;
7
+ z-index: $zindexModalBackdrop;
8
+ background-color: $black;
9
+ @include opacity(60);
10
+ }
11
+
12
+ .modal {
13
+ position: fixed;
14
+ top: 10%;
15
+ left: 50%;
16
+ z-index: $zindexModal;
17
+ width: 560px;
18
+ margin-left: -280px;
19
+ background-color: $white;
20
+ border: 2px solid $lighter_gray;
21
+ @include border-bottom-radius(5px);
22
+ @include background-clip(padding-box);
23
+ outline: none;
24
+ }
25
+
26
+ .modal-header {
27
+ background-color: $lightest_gray;
28
+ padding: 8px 15px;
29
+ border-bottom: 1px solid $lighter_gray;
30
+ .close { margin-top: 2px; }
31
+ h3 {
32
+ margin: 0;
33
+ line-height: 30px;
34
+ color: $darker_gray;
35
+ }
36
+ }
37
+
38
+ .modal-body {
39
+ position: relative;
40
+ overflow-y: auto;
41
+ max-height: 400px;
42
+ padding: 15px;
43
+ }
44
+
45
+ .modal-form {
46
+ margin-bottom: 0;
47
+ }
48
+
49
+ .modal-footer {
50
+ padding: 14px 15px 15px;
51
+ margin-bottom: 0;
52
+ text-align: right;
53
+ @include border-bottom-radius(5px);
54
+ @include clearfix();
55
+
56
+ .btn + .btn {
57
+ margin-left: 5px;
58
+ margin-bottom: 0;
59
+ }
60
+
61
+ .btn-group .btn + .btn {
62
+ margin-left: -1px;
63
+ }
64
+
65
+ .btn-block + .btn-block {
66
+ margin-left: 0;
67
+ }
68
+ }
@@ -12,6 +12,7 @@ $lightest_blue: #e0eaed !default;
12
12
  $green: #91b35b !default;
13
13
  $lightest_yellow: #f3f3c3 !default;
14
14
 
15
+ $black: #000000 !default;
15
16
  $darkest_gray: #242424 !default;
16
17
  $darker_gray: #333333 !default;
17
18
  $medium_gray: #808080 !default;
@@ -45,6 +46,16 @@ $inputBorder: $light_gray;
45
46
  $placeholderColor: $medium_gray;
46
47
  $horizontalComponentOffset: 180px;
47
48
 
49
+ /* Z-Indexes
50
+ ------------------------------------------------------- */
51
+
52
+ $zindexDropdown: 1000 !default;
53
+ $zindexPopover: 1010 !default;
54
+ $zindexTooltip: 1030 !default;
55
+ $zindexFixedNavbar: 1030 !default;
56
+ $zindexModalBackdrop: 1040 !default;
57
+ $zindexModal: 1050 !default;
58
+
48
59
  /* Grid
49
60
  ------------------------------------------------------- */
50
61
 
@@ -12,6 +12,7 @@
12
12
  @import "atlas_assets/code";
13
13
  @import "atlas_assets/flash";
14
14
  @import "atlas_assets/forms";
15
+ @import "atlas_assets/modals";
15
16
  @import "atlas_assets/utilities";
16
17
 
17
18
  @import "atlas_assets/responsive-utilities";
@@ -1,5 +1,5 @@
1
1
  module Atlas
2
2
  module Assets
3
- VERSION = "0.1.6"
3
+ VERSION = "0.1.7"
4
4
  end
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: atlas_assets
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.6
4
+ version: 0.1.7
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2013-05-23 00:00:00.000000000 Z
12
+ date: 2013-05-29 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: handlebars_assets
@@ -58,6 +58,7 @@ files:
58
58
  - docs/_posts/2013-05-17-utilities.md
59
59
  - docs/_posts/2013-05-21-forms.md
60
60
  - docs/_posts/2013-05-22-boxes.md
61
+ - docs/_posts/2013-05-29-modals.md
61
62
  - docs/index.html
62
63
  - lib/assets/fonts/atlas.eot
63
64
  - lib/assets/fonts/atlas.svg
@@ -87,6 +88,7 @@ files:
87
88
  - lib/assets/stylesheets/atlas_assets/_icons.scss
88
89
  - lib/assets/stylesheets/atlas_assets/_lists.scss
89
90
  - lib/assets/stylesheets/atlas_assets/_mixins.scss
91
+ - lib/assets/stylesheets/atlas_assets/_modals.scss
90
92
  - lib/assets/stylesheets/atlas_assets/_navbar.scss
91
93
  - lib/assets/stylesheets/atlas_assets/_reset.scss
92
94
  - lib/assets/stylesheets/atlas_assets/_responsive-767.scss