atlas_assets 0.5.10 → 0.6.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +8 -8
- data/Gemfile.lock +1 -1
- data/docs/_posts/2014-03-12-drop.md +115 -0
- data/lib/assets/javascripts/atlas_assets.js +4 -1
- data/lib/assets/javascripts/libraries/drop.js +1751 -0
- data/lib/assets/javascripts/libraries/select.coffee +424 -0
- data/lib/assets/stylesheets/atlas_assets/drop-theme-arrows-bounce-dark.scss +222 -0
- data/lib/assets/stylesheets/atlas_assets/drop-theme-arrows-bounce.scss +230 -0
- data/lib/assets/stylesheets/atlas_assets/drop-theme-arrows.scss +120 -0
- data/lib/assets/stylesheets/atlas_assets/drop-theme-basic.scss +29 -0
- data/lib/assets/stylesheets/atlas_assets/select-theme-defaults.scss +155 -0
- data/lib/assets/stylesheets/atlas_assets.scss +7 -0
- data/lib/atlas_assets/version.rb +1 -1
- metadata +10 -2
checksums.yaml
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
---
|
|
2
2
|
!binary "U0hBMQ==":
|
|
3
3
|
metadata.gz: !binary |-
|
|
4
|
-
|
|
4
|
+
ZmMxZWEzOWJmMWJlNTQxOTA3Y2RjZjZkYzgzNDQ5NWIzNjliZTMzNg==
|
|
5
5
|
data.tar.gz: !binary |-
|
|
6
|
-
|
|
6
|
+
MTk3ODhiNTk1NDVhMWQzZmQxY2Y1YzdlZDdmZjE5NjQ5OWIxZDcwYw==
|
|
7
7
|
SHA512:
|
|
8
8
|
metadata.gz: !binary |-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
NDg5NGIzYjVmODk0NjM0ZTMyZTk2OGRkYjYzNjFhMGY1ODM0Y2IyNGEwNDk3
|
|
10
|
+
NWZlNGMzYWUxOTY2NDcyZDhhMTY4YTNmNmMyY2NjMDY0ZjNhOWE0MGYzMmZk
|
|
11
|
+
YmRiMWJkYjgwZDlhMzBiOTEzODk0ZGQ2NWQwZTk4ZjM1MmVmY2E=
|
|
12
12
|
data.tar.gz: !binary |-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
NDMyNjBjMmI2ZmRlNzM3YmZhMGMzNDA4ZDQxYTliNTJlN2NlMDkzYTAyMDli
|
|
14
|
+
YjU4ZjQ4ZjJlNGM2NjZjY2JkZTgzODA5YmJhOTE1NTExNGE3ZTI2ODU5NTlk
|
|
15
|
+
OWI0ZTc0ZTFlY2VhMWQ1NWQ5Yzg0NWVjZTdjZGMwNzc2YzA2ZjY=
|
data/Gemfile.lock
CHANGED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
title: "Drop / Select / Tether"
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Drop / Select / Tether
|
|
7
|
+
======
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
[Drop](https://github.com/HubSpot/drop) is a Javascript and CSS library for creating dropdowns and other popups attached to elements on the page. [Select.js](https://github.com/HubSpot/select) is a Javascript and CSS library for creating styleable select elements. Both use [Tether.js](https://github.com/HubSpot/tether) to efficiently position elements.
|
|
11
|
+
|
|
12
|
+
## 1: Basic Example with Drop
|
|
13
|
+
|
|
14
|
+
<p><button class='btn drop-example-1'>Hello, Click Me</button></p>
|
|
15
|
+
|
|
16
|
+
~~~js
|
|
17
|
+
drop1 = new Drop({
|
|
18
|
+
target: document.querySelector('.drop-example-1'),
|
|
19
|
+
content: 'Welcome to the whatever',
|
|
20
|
+
position: 'bottom center',
|
|
21
|
+
classes: 'drop-theme-arrows-bounce-dark',
|
|
22
|
+
openOn: 'click'
|
|
23
|
+
});
|
|
24
|
+
~~~
|
|
25
|
+
|
|
26
|
+
<script>
|
|
27
|
+
$(function () {
|
|
28
|
+
var drop1;
|
|
29
|
+
drop1 = new Drop({
|
|
30
|
+
target: document.querySelector('.drop-example-1'),
|
|
31
|
+
content: 'Welcome to the whatever',
|
|
32
|
+
position: 'bottom center',
|
|
33
|
+
classes: 'drop-theme-arrows-bounce-dark',
|
|
34
|
+
openOn: 'click'
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
})
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
## 2: Dropdown-like Example with Drop
|
|
42
|
+
<style>
|
|
43
|
+
.drop-theme-arrows-bounce ul {
|
|
44
|
+
margin: 0; padding: 0;
|
|
45
|
+
}
|
|
46
|
+
.drop-theme-arrows-bounce ul li {
|
|
47
|
+
list-style: none;
|
|
48
|
+
padding: 5px;
|
|
49
|
+
border-bottom: 1px solid lightgray;
|
|
50
|
+
}
|
|
51
|
+
.drop-theme-arrows-bounce ul li:hover {
|
|
52
|
+
background-color: lightgray;
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
}
|
|
55
|
+
</style>
|
|
56
|
+
<p><button class='btn drop-example-2'>Hello, Hover Over Me <i class="icon-caret-down"></i></button></p>
|
|
57
|
+
<div class='drop-content-example' style='display:none;'>
|
|
58
|
+
<ul>
|
|
59
|
+
<li>Example Something</li>
|
|
60
|
+
<li>Something <a href='#' class='btn info'>Else <i class="icon-legal"></i></a></li>
|
|
61
|
+
<li><img alt="" src="data:image/png;base64,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" /> An Image!</li>
|
|
62
|
+
</ul>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
~~~js
|
|
67
|
+
drop2 = new Drop({
|
|
68
|
+
target: $('.drop-example-2')[0],
|
|
69
|
+
content: $('.drop-content-example').html(),
|
|
70
|
+
position: 'bottom center',
|
|
71
|
+
classes: 'drop-theme-arrows-bounce',
|
|
72
|
+
openOn: 'hover'
|
|
73
|
+
});
|
|
74
|
+
~~~
|
|
75
|
+
|
|
76
|
+
<script>
|
|
77
|
+
$(function () {
|
|
78
|
+
var drop2;
|
|
79
|
+
drop2 = new Drop({
|
|
80
|
+
target: $('.drop-example-2')[0],
|
|
81
|
+
content: $('.drop-content-example').html(),
|
|
82
|
+
position: 'bottom center',
|
|
83
|
+
classes: 'drop-theme-arrows-bounce',
|
|
84
|
+
openOn: 'hover'
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
})
|
|
88
|
+
</script>
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
## 3: Basic Select Example
|
|
93
|
+
|
|
94
|
+
<p>
|
|
95
|
+
<select id='select-example'>
|
|
96
|
+
<option value="" selected="selected">Select a format</option>
|
|
97
|
+
<option value="MD">Markdown</option>
|
|
98
|
+
<option value="HTML">Htmlbook</option>
|
|
99
|
+
<option value="AZ">Arizona</option> <!-- I'm hilarious -->
|
|
100
|
+
<option value="ASC">Asciidoc</option>
|
|
101
|
+
</select>
|
|
102
|
+
</p>
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
~~~js
|
|
106
|
+
var select_example = new Select({el: $('#select-example')[0]});
|
|
107
|
+
select_example.on('change', function(e){ alert('You picked: '+e.value);})
|
|
108
|
+
~~~
|
|
109
|
+
|
|
110
|
+
<script>
|
|
111
|
+
$(function () {
|
|
112
|
+
var select_example = new Select({el: $('#select-example')[0]});
|
|
113
|
+
select_example.on('change', function(e){ alert('You picked: '+e.value);})
|
|
114
|
+
})
|
|
115
|
+
</script>
|