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 +8 -8
- data/Gemfile.lock +6 -6
- data/README.md +2 -2
- data/docs/_posts/2013-05-29-modals.md +101 -0
- data/lib/assets/stylesheets/atlas_assets/_buttons.scss +28 -0
- data/lib/assets/stylesheets/atlas_assets/_mixins.scss +17 -0
- data/lib/assets/stylesheets/atlas_assets/_modals.scss +68 -0
- data/lib/assets/stylesheets/atlas_assets/_variables.scss +11 -0
- data/lib/assets/stylesheets/atlas_assets.scss +1 -0
- data/lib/atlas_assets/version.rb +1 -1
- metadata +4 -2
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:
|
|
3
|
+
revision: 0b8f155c5aab2967bf13635490bc1ff0a356f47f
|
|
4
4
|
specs:
|
|
5
|
-
jekyll-assets (0.5.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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
|
|
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
|
|
data/lib/atlas_assets/version.rb
CHANGED
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.
|
|
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-
|
|
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
|