particle 1.0
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/README.md +53 -0
- data/lib/particle.rb +3 -0
- data/stylesheets/_particle.scss +2 -0
- data/stylesheets/particle/_css3.scss +5 -0
- data/stylesheets/particle/_layout.scss +5 -0
- data/stylesheets/particle/_typography.scss +3 -0
- data/stylesheets/particle/css3/_blend-modes.scss +367 -0
- data/stylesheets/particle/css3/_drop-shadow.scss +18 -0
- data/stylesheets/particle/css3/_gradient.scss +41 -0
- data/stylesheets/particle/css3/_noise.scss +13 -0
- data/stylesheets/particle/css3/_rotate.scss +12 -0
- data/stylesheets/particle/layout/_apprise.scss +66 -0
- data/stylesheets/particle/layout/_images.scss +25 -0
- data/stylesheets/particle/layout/_jquery-ui.scss +142 -0
- data/stylesheets/particle/layout/_slider.scss +4 -0
- data/stylesheets/particle/layout/_ui.scss +178 -0
- data/stylesheets/particle/layout/slider/_anything.scss +347 -0
- data/stylesheets/particle/layout/slider/_jcarousel.scss +220 -0
- data/stylesheets/particle/layout/slider/_nivo.scss +563 -0
- data/stylesheets/particle/layout/slider/_tiny.scss +186 -0
- data/stylesheets/particle/typography/_legible-color-text.scss +6 -0
- data/stylesheets/particle/typography/_render-fix.scss +19 -0
- data/stylesheets/particle/typography/_text-replacement.scss +32 -0
- data/templates/project/manifest.rb +12 -0
- data/templates/project/style.scss +10 -0
- metadata +85 -0
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
/* Source: http://baijs.nl/tinycarousel/ */
|
|
2
|
+
|
|
3
|
+
$default-tinySlider-path: "images" !default;
|
|
4
|
+
|
|
5
|
+
@mixin tinySlider($path: $default-tinySlider-path) {
|
|
6
|
+
.tinySlider {
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
margin-bottom: 20px;
|
|
9
|
+
.viewport {
|
|
10
|
+
float: left;
|
|
11
|
+
height: 125px;
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
position: relative;
|
|
14
|
+
}
|
|
15
|
+
.buttons {
|
|
16
|
+
background: url("#{$path}/tinySliderArrows.png") no-repeat scroll 0 0 transparent;
|
|
17
|
+
display: block;
|
|
18
|
+
margin: 45px 10px 0 0;
|
|
19
|
+
background-position: 0 -38px;
|
|
20
|
+
float: left;
|
|
21
|
+
width: 39px;
|
|
22
|
+
height: 37px;
|
|
23
|
+
overflow: hidden;
|
|
24
|
+
position: relative;
|
|
25
|
+
text-indent: -999em;
|
|
26
|
+
}
|
|
27
|
+
.next {
|
|
28
|
+
background-position: 0 0;
|
|
29
|
+
margin: 45px 0 0 10px;
|
|
30
|
+
}
|
|
31
|
+
.disable {
|
|
32
|
+
visibility: hidden;
|
|
33
|
+
}
|
|
34
|
+
.overview {
|
|
35
|
+
list-style: none;
|
|
36
|
+
position: absolute;
|
|
37
|
+
padding: 0;
|
|
38
|
+
margin: 0;
|
|
39
|
+
left: 0;
|
|
40
|
+
top: 0;
|
|
41
|
+
li {
|
|
42
|
+
list-style: none;
|
|
43
|
+
float: left;
|
|
44
|
+
margin: 0 20px 0 0;
|
|
45
|
+
padding: 1px;
|
|
46
|
+
height: 121px;
|
|
47
|
+
border: 1px solid #DCDCDC;
|
|
48
|
+
width: 236px;
|
|
49
|
+
position: relative;
|
|
50
|
+
span {
|
|
51
|
+
font-size: 22px;
|
|
52
|
+
position: absolute;
|
|
53
|
+
top: 40%;
|
|
54
|
+
right: 0;
|
|
55
|
+
padding: 8px 13px;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
@mixin tinyStandard {
|
|
63
|
+
.tinySlider-standard {
|
|
64
|
+
height: 125px;
|
|
65
|
+
margin-left: auto;
|
|
66
|
+
margin-right: auto;
|
|
67
|
+
width: 880px;
|
|
68
|
+
.viewport {
|
|
69
|
+
width: 780px;
|
|
70
|
+
}
|
|
71
|
+
.overview {
|
|
72
|
+
span {
|
|
73
|
+
color: #000000;
|
|
74
|
+
background: #FFFFFF;
|
|
75
|
+
background: rgba(255, 255, 255, 0.7);
|
|
76
|
+
.ie7 & {
|
|
77
|
+
margin-top: 40px;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
@include tinySlider;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@mixin tinyExtended {
|
|
86
|
+
.tinySlider-extended {
|
|
87
|
+
height: 145px;
|
|
88
|
+
.viewport {
|
|
89
|
+
width: 240px;
|
|
90
|
+
}
|
|
91
|
+
.next {
|
|
92
|
+
margin: 30px 0 0 10px;
|
|
93
|
+
}
|
|
94
|
+
.disable {
|
|
95
|
+
visibility: hidden;
|
|
96
|
+
}
|
|
97
|
+
.overview {
|
|
98
|
+
list-style: none;
|
|
99
|
+
padding: 0;
|
|
100
|
+
margin: 0;
|
|
101
|
+
position: absolute;
|
|
102
|
+
left: 0;
|
|
103
|
+
top: 0;
|
|
104
|
+
position: relative;
|
|
105
|
+
li {
|
|
106
|
+
float: left;
|
|
107
|
+
margin: 0 20px 0 0;
|
|
108
|
+
padding: 1px;
|
|
109
|
+
height: 121px;
|
|
110
|
+
border: 1px solid #DCDCDC;
|
|
111
|
+
width: 236px;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
.pager {
|
|
115
|
+
overflow:hidden;
|
|
116
|
+
list-style: none;
|
|
117
|
+
clear: both;
|
|
118
|
+
margin: 0 0 0 45px;
|
|
119
|
+
li {
|
|
120
|
+
float: left;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
.pagenum {
|
|
124
|
+
background-color: #FFFFFF;
|
|
125
|
+
text-decoration: none;
|
|
126
|
+
text-align: center;
|
|
127
|
+
padding: 5px;
|
|
128
|
+
color: #555555;
|
|
129
|
+
font-size: 14px;
|
|
130
|
+
font-weight: bold;
|
|
131
|
+
display: block;
|
|
132
|
+
}
|
|
133
|
+
.active {
|
|
134
|
+
color: #FFFFFF;
|
|
135
|
+
background-color: #555555;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
@include tinySlider;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@mixin tinyApps {
|
|
142
|
+
|
|
143
|
+
@include tinySlider;
|
|
144
|
+
|
|
145
|
+
.tinySlider-apps {
|
|
146
|
+
height: 130px;
|
|
147
|
+
margin-left: auto;
|
|
148
|
+
margin-right: auto;
|
|
149
|
+
width: 880px;
|
|
150
|
+
|
|
151
|
+
.viewport {
|
|
152
|
+
width: 780px;
|
|
153
|
+
height: 130px !important;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.overview {
|
|
157
|
+
|
|
158
|
+
li {
|
|
159
|
+
@include border-radius(4px);
|
|
160
|
+
@include box-shadow(#222222 0 1px 2px);
|
|
161
|
+
width: 125px;
|
|
162
|
+
height: 125px;
|
|
163
|
+
padding: 0 !important;
|
|
164
|
+
margin: 0 15px 20px !important;
|
|
165
|
+
border: none !important;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
a, img {
|
|
169
|
+
@include border-radius(4px);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
span {
|
|
173
|
+
@include border-bottom-radius(4px);
|
|
174
|
+
@include background(linear-gradient(top, $default-box-bg-color, darken($default-box-bg-color, 20)));
|
|
175
|
+
@include filter-gradient($default-box-bg-color, darken($default-box-bg-color, 20));
|
|
176
|
+
background-color: mix($default-box-bg-color, darken($default-box-bg-color, 20));
|
|
177
|
+
width: 125px;
|
|
178
|
+
font-size: 16px !important;
|
|
179
|
+
padding: 8px 0 !important;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// These defaults make the arguments optional for this mixin
|
|
2
|
+
// If you like, set different defaults in your project
|
|
3
|
+
|
|
4
|
+
$default-font-smoothing: antialiased !default;
|
|
5
|
+
$default-max-device-width: 480px !default;
|
|
6
|
+
|
|
7
|
+
// Provides a single webkit attribute.
|
|
8
|
+
// Includes default argument for smoothing
|
|
9
|
+
@mixin render-fix($smoothing: $default-font-smoothing) {
|
|
10
|
+
-webkit-font-smoothing: $smoothing;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@mixin mobile-render-fix() {
|
|
14
|
+
@media only screen and (max-device-width:480px) {
|
|
15
|
+
body {
|
|
16
|
+
-webkit-text-stroke: 0 black;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
// Hides html text and replaces it with an image.
|
|
2
|
+
// If you use this on an inline element, you will need to change the display to block or inline-block.
|
|
3
|
+
// Also, if the size of the image differs significantly from the font size, you'll need to set the width and/or height.
|
|
4
|
+
//
|
|
5
|
+
// Parameters:
|
|
6
|
+
//
|
|
7
|
+
// * `img` -- the relative path from the project image directory to the image.
|
|
8
|
+
// * `x` -- the x position of the background image.
|
|
9
|
+
// * `y` -- the y position of the background image.
|
|
10
|
+
@mixin kellum-replace-text($img, $x: 50%, $y: 50%) {
|
|
11
|
+
@include kellum-hide-text;
|
|
12
|
+
background: {
|
|
13
|
+
image: image-url($img);
|
|
14
|
+
repeat: no-repeat;
|
|
15
|
+
position: $x $y;
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// Like the `replace-text` mixin, but also sets the width
|
|
20
|
+
// and height of the element according the dimensions of the image.
|
|
21
|
+
@mixin kellum-replace-text-with-dimentions($img, $x: 50%, $y: 50%) {
|
|
22
|
+
@include replace-text($img, $x, $y);
|
|
23
|
+
width: image-width($img);
|
|
24
|
+
height: image-height($img);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// Hides text in an element so you can see the background.
|
|
28
|
+
@mixin kellum-hide-text {
|
|
29
|
+
text-indent: 100%;
|
|
30
|
+
white-space: nowrap;
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
# Make sure you list all the project template files here in the manifest.
|
|
2
|
+
stylesheet 'style.scss', :media => 'screen, projection'
|
|
3
|
+
|
|
4
|
+
description "A Stylesheet Using Particle"
|
|
5
|
+
|
|
6
|
+
help %Q{
|
|
7
|
+
Installs a stylesheet that you can use or refer to as an example.
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
welcome_message %Q{
|
|
11
|
+
Please refer to the Particle Documentation to see how it all works.
|
|
12
|
+
}
|
metadata
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: particle
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: '1.0'
|
|
5
|
+
prerelease:
|
|
6
|
+
platform: ruby
|
|
7
|
+
authors:
|
|
8
|
+
- Stephen Way
|
|
9
|
+
autorequire:
|
|
10
|
+
bindir: bin
|
|
11
|
+
cert_chain: []
|
|
12
|
+
date: 2012-10-15 00:00:00.000000000 Z
|
|
13
|
+
dependencies:
|
|
14
|
+
- !ruby/object:Gem::Dependency
|
|
15
|
+
name: compass
|
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
|
17
|
+
none: false
|
|
18
|
+
requirements:
|
|
19
|
+
- - ! '>='
|
|
20
|
+
- !ruby/object:Gem::Version
|
|
21
|
+
version: 0.12.2
|
|
22
|
+
type: :runtime
|
|
23
|
+
prerelease: false
|
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
25
|
+
none: false
|
|
26
|
+
requirements:
|
|
27
|
+
- - ! '>='
|
|
28
|
+
- !ruby/object:Gem::Version
|
|
29
|
+
version: 0.12.2
|
|
30
|
+
description: a collection of mixins
|
|
31
|
+
email: stephen@swy.me
|
|
32
|
+
executables: []
|
|
33
|
+
extensions: []
|
|
34
|
+
extra_rdoc_files: []
|
|
35
|
+
files:
|
|
36
|
+
- README.md
|
|
37
|
+
- lib/particle.rb
|
|
38
|
+
- stylesheets/_particle.scss
|
|
39
|
+
- stylesheets/particle/_css3.scss
|
|
40
|
+
- stylesheets/particle/_layout.scss
|
|
41
|
+
- stylesheets/particle/_typography.scss
|
|
42
|
+
- stylesheets/particle/css3/_blend-modes.scss
|
|
43
|
+
- stylesheets/particle/css3/_drop-shadow.scss
|
|
44
|
+
- stylesheets/particle/css3/_gradient.scss
|
|
45
|
+
- stylesheets/particle/css3/_noise.scss
|
|
46
|
+
- stylesheets/particle/css3/_rotate.scss
|
|
47
|
+
- stylesheets/particle/layout/_apprise.scss
|
|
48
|
+
- stylesheets/particle/layout/_images.scss
|
|
49
|
+
- stylesheets/particle/layout/_jquery-ui.scss
|
|
50
|
+
- stylesheets/particle/layout/_slider.scss
|
|
51
|
+
- stylesheets/particle/layout/_ui.scss
|
|
52
|
+
- stylesheets/particle/layout/slider/_anything.scss
|
|
53
|
+
- stylesheets/particle/layout/slider/_jcarousel.scss
|
|
54
|
+
- stylesheets/particle/layout/slider/_nivo.scss
|
|
55
|
+
- stylesheets/particle/layout/slider/_tiny.scss
|
|
56
|
+
- stylesheets/particle/typography/_legible-color-text.scss
|
|
57
|
+
- stylesheets/particle/typography/_render-fix.scss
|
|
58
|
+
- stylesheets/particle/typography/_text-replacement.scss
|
|
59
|
+
- templates/project/manifest.rb
|
|
60
|
+
- templates/project/style.scss
|
|
61
|
+
homepage: http://swy.me/
|
|
62
|
+
licenses: []
|
|
63
|
+
post_install_message:
|
|
64
|
+
rdoc_options: []
|
|
65
|
+
require_paths:
|
|
66
|
+
- lib
|
|
67
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
68
|
+
none: false
|
|
69
|
+
requirements:
|
|
70
|
+
- - ! '>='
|
|
71
|
+
- !ruby/object:Gem::Version
|
|
72
|
+
version: '0'
|
|
73
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
74
|
+
none: false
|
|
75
|
+
requirements:
|
|
76
|
+
- - ! '>='
|
|
77
|
+
- !ruby/object:Gem::Version
|
|
78
|
+
version: '0'
|
|
79
|
+
requirements: []
|
|
80
|
+
rubyforge_project:
|
|
81
|
+
rubygems_version: 1.8.24
|
|
82
|
+
signing_key:
|
|
83
|
+
specification_version: 3
|
|
84
|
+
summary: a css library for compass
|
|
85
|
+
test_files: []
|