rapido-css 0.1.1 → 0.1.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. data/stylesheets/_default-styles.scss +352 -352
  2. data/stylesheets/_functions.scss +77 -50
  3. data/stylesheets/_susy.scss +15 -12
  4. data/stylesheets/components/_alerts.scss +21 -21
  5. data/stylesheets/components/_breadcrumbs.scss +15 -15
  6. data/stylesheets/components/_button-groups.scss +51 -53
  7. data/stylesheets/components/_buttons.scss +94 -97
  8. data/stylesheets/components/_captions.scss +45 -45
  9. data/stylesheets/components/_close.scss +27 -27
  10. data/stylesheets/components/_dropdowns.scss +121 -121
  11. data/stylesheets/components/_forms.scss +246 -248
  12. data/stylesheets/components/_grids.scss +35 -35
  13. data/stylesheets/components/_labels.scss +38 -38
  14. data/stylesheets/components/_modals.scss +242 -248
  15. data/stylesheets/components/_navs.scss +86 -91
  16. data/stylesheets/components/_pager.scss +53 -53
  17. data/stylesheets/components/_pagination.scss +83 -85
  18. data/stylesheets/components/_responsive-navs.scss +84 -84
  19. data/stylesheets/components/_sliders.scss +54 -58
  20. data/stylesheets/components/_tables.scss +69 -74
  21. data/stylesheets/components/_tabs.scss +54 -54
  22. data/stylesheets/components/_type.scss +134 -140
  23. data/stylesheets/{_rapido.scss → rapido.scss} +0 -8
  24. data/stylesheets/settings/_base.scss +23 -23
  25. data/stylesheets/settings/_colors.scss +13 -13
  26. data/stylesheets/settings/_components.scss +43 -42
  27. data/stylesheets/settings/_dimensions.scss +91 -91
  28. data/stylesheets/settings/_effects.scss +28 -14
  29. data/stylesheets/susy/{_susy_background.scss → _background.scss} +0 -0
  30. data/stylesheets/susy/{_susy_functions.scss → _functions.scss} +0 -0
  31. data/stylesheets/susy/{_susy_grid.scss → _grid.scss} +0 -0
  32. data/stylesheets/susy/{_susy_isolation.scss → _isolation.scss} +1 -0
  33. data/stylesheets/susy/{_susy_margin.scss → _margin.scss} +0 -0
  34. data/stylesheets/susy/{_susy_media.scss → _media.scss} +0 -0
  35. data/stylesheets/susy/{_susy_padding.scss → _padding.scss} +0 -0
  36. data/stylesheets/susy/{_susy_settings.scss → _settings.scss} +0 -0
  37. data/stylesheets/susy/{_susy_support.scss → _support.scss} +0 -0
  38. data/stylesheets/susy/{_susy_units.scss → _units.scss} +0 -0
  39. data/stylesheets/utilities/_animations.scss +638 -597
  40. data/stylesheets/utilities/_debug.scss +43 -43
  41. data/stylesheets/utilities/_helper-classes.scss +70 -54
  42. data/stylesheets/utilities/_icon-fonts.scss +90 -90
  43. data/stylesheets/utilities/_mixins.scss +390 -357
  44. metadata +20 -17
  45. checksums.yaml +0 -15
  46. data/stylesheets/config.rb +0 -8
@@ -1,38 +1,37 @@
1
- /* ====================================================================================================================
1
+ /*
2
2
 
3
3
  Type
4
4
 
5
5
  Styleguide 19
6
6
 
7
- ==================================================================================================================== */
7
+ */
8
8
 
9
9
  // Base
10
- // --------------------------------------------------------------------------------------------------------------------
11
10
 
12
11
  *, *:before, *:after {
13
- @include box-sizing(border-box);
14
- outline: none;
12
+ @include box-sizing(border-box);
13
+ outline: none;
15
14
  }
16
15
 
17
16
  html {
18
- @if $responsive-font-size {
17
+ @if $responsive-font-size {
19
18
 
20
- @each $step in $responsive-font-size {
21
- @include media(nth($step, 1)) {
22
- font-size: 100% * nth($step, 2) / 16px;
23
- }
24
- }
19
+ @each $step in $responsive-font-size {
20
+ @include media(nth($step, 1)) {
21
+ font-size: 100% * nth($step, 2) / 16px;
22
+ }
23
+ }
25
24
 
26
- } @else {
27
- font-size: 100% * $base-font-size / 16px;
28
- }
25
+ } @else {
26
+ font-size: 100% * $base-font-size / 16px;
27
+ }
29
28
  }
30
29
 
31
30
  body {
32
- @include adjust-font-size-to($base-font-size);
33
- margin: 0;
34
- font-family: $base-font-family;
35
- color: $text-color;
31
+ @include adjust-font-size-to($base-font-size);
32
+ margin: 0;
33
+ font-family: $base-font-family;
34
+ color: $text-color;
36
35
  }
37
36
 
38
37
  img {max-width: 100%;}
@@ -40,22 +39,21 @@ img {max-width: 100%;}
40
39
  a, button, textarea, input { outline: none; }
41
40
 
42
41
  // Links
43
- // --------------------------------------------------------------------------------------------------------------------
44
42
 
45
43
  a {
46
- color: $link-color;
47
- text-decoration: none;
44
+ color: $link-color;
45
+ text-decoration: none;
48
46
 
49
- &:hover,
50
- &:focus {
51
- color: $link-color-hover;
52
- text-decoration: none;
53
- }
47
+ &:hover,
48
+ &:focus {
49
+ color: $link-color-hover;
50
+ text-decoration: none;
51
+ }
54
52
 
55
53
  }
56
54
 
57
55
 
58
- /* --------------------------------------------------------------------------------------------------------------------
56
+ /*
59
57
 
60
58
  Body text
61
59
 
@@ -66,13 +64,12 @@ Markup:
66
64
 
67
65
  Styleguide 19.1
68
66
 
69
- -------------------------------------------------------------------------------------------------------------------- */
67
+ */
70
68
 
71
69
 
72
70
  p { margin: 0 0 rhythm(1);}
73
71
 
74
72
  // Emphasis & misc
75
- // --------------------------------------------------------------------------------------------------------------------
76
73
 
77
74
  small { @include adjust-font-size-to($milli-size); }
78
75
 
@@ -80,7 +77,7 @@ strong { font-weight: bold; }
80
77
  em { font-style: italic; }
81
78
  cite { font-style: normal; }
82
79
 
83
- /* --------------------------------------------------------------------------------------------------------------------
80
+ /*
84
81
 
85
82
  Headings
86
83
 
@@ -94,49 +91,49 @@ Markup:
94
91
 
95
92
  Styleguide 19.2
96
93
 
97
- -------------------------------------------------------------------------------------------------------------------- */
94
+ */
98
95
 
99
96
  h1, h2, h3, h4, h5, h6 {
100
- margin: 0 0 rhythm();
101
- text-rendering: optimizelegibility;
102
- font-family: $titles-font-family;
103
- color: $title-color;
104
-
105
- small {
106
- font-weight: normal;
107
- line-height: rhythm();
108
- color: $grayLight;
109
- }
97
+ margin: 0 0 rhythm();
98
+ text-rendering: optimizelegibility;
99
+ font-family: $titles-font-family;
100
+ color: $title-color;
101
+
102
+ small {
103
+ font-weight: normal;
104
+ line-height: rhythm();
105
+ color: $grayLight;
106
+ }
110
107
  }
111
108
 
112
109
  h1, .h1 {
113
- @include adjust-font-size-to($h1-size, $h1-line-height);
114
- @extend %h1 !optional;
110
+ @include adjust-font-size-to($h1-size, $h1-line-height);
111
+ @extend %h1 !optional;
115
112
  }
116
113
 
117
114
  h2, .h2 {
118
- @include adjust-font-size-to($h2-size, $h2-line-height);
119
- @extend %h2 !optional;
115
+ @include adjust-font-size-to($h2-size, $h2-line-height);
116
+ @extend %h2 !optional;
120
117
  }
121
118
 
122
119
  h3, .h3 {
123
- @include adjust-font-size-to($h3-size, $h3-line-height);
124
- @extend %h3 !optional;
120
+ @include adjust-font-size-to($h3-size, $h3-line-height);
121
+ @extend %h3 !optional;
125
122
  }
126
123
 
127
124
  h4, .h4 {
128
- @include adjust-font-size-to($h4-size, $h4-line-height);
129
- @extend %h4 !optional;
125
+ @include adjust-font-size-to($h4-size, $h4-line-height);
126
+ @extend %h4 !optional;
130
127
  }
131
128
 
132
129
  h5, .h5 {
133
- @include adjust-font-size-to($h5-size, $h5-line-height);
134
- @extend %h5 !optional;
130
+ @include adjust-font-size-to($h5-size, $h5-line-height);
131
+ @extend %h5 !optional;
135
132
  }
136
133
 
137
134
  h6, .h6 {
138
- @include adjust-font-size-to($h6-size, $h6-line-height);
139
- @extend %h6 !optional;
135
+ @include adjust-font-size-to($h6-size, $h6-line-height);
136
+ @extend %h6 !optional;
140
137
  }
141
138
 
142
139
  h1 small { @include adjust-font-size-to($h3-size); }
@@ -144,7 +141,7 @@ h2 small { @include adjust-font-size-to($h4-size); }
144
141
  h3 small { @include adjust-font-size-to($h5-size); }
145
142
  h4 small { @include adjust-font-size-to($h6-size); }
146
143
 
147
- /* --------------------------------------------------------------------------------------------------------------------
144
+ /*
148
145
 
149
146
  Lists
150
147
 
@@ -162,44 +159,44 @@ Markup:
162
159
 
163
160
  Styleguide 19.3
164
161
 
165
- -------------------------------------------------------------------------------------------------------------------- */
162
+ */
166
163
 
167
164
  .list_style_none, .list-style-none {
168
- padding-left: 0;
169
- margin-left: 0;
170
- list-style: none;
165
+ padding-left: 0;
166
+ margin-left: 0;
167
+ list-style: none;
171
168
  }
172
169
 
173
170
  // Unordered and Ordered lists
174
171
 
175
172
  ul, ol {
176
- padding: 0;
177
- margin: 0 0 rhythm(1) 25px;
173
+ padding: 0;
174
+ margin: 0 0 rhythm(1) 25px;
178
175
  }
179
176
 
180
177
  ul ul,
181
178
  ul ol,
182
179
  ol ol,
183
180
  ol ul {
184
- margin-bottom: 0;
181
+ margin-bottom: 0;
185
182
  }
186
183
 
187
184
  ul.unstyled,
188
185
  ol.unstyled {
189
- margin-left: 0;
190
- list-style: none;
186
+ margin-left: 0;
187
+ list-style: none;
191
188
  }
192
189
 
193
190
  ul.inline,
194
191
  ol.inline {
195
- margin-left: 0;
196
- list-style: none;
197
- > li {
198
- @include inline-block();
199
- }
192
+ margin-left: 0;
193
+ list-style: none;
194
+ > li {
195
+ @include inline-block();
196
+ }
200
197
  }
201
198
 
202
- /* --------------------------------------------------------------------------------------------------------------------
199
+ /*
203
200
 
204
201
  Definition lists
205
202
 
@@ -211,14 +208,14 @@ Markup:
211
208
 
212
209
  Styleguide 19.4
213
210
 
214
- -------------------------------------------------------------------------------------------------------------------- */
211
+ */
215
212
 
216
- dl { margin-bottom: rhythm(1); }
217
- dt, dd { }
218
- dt { font-weight: bold; }
219
- dd { margin-left: 0; }
213
+ dl { margin-bottom: rhythm(1); }
214
+ dt, dd { }
215
+ dt { font-weight: bold; }
216
+ dd { margin-left: 0; }
220
217
 
221
- /* --------------------------------------------------------------------------------------------------------------------
218
+ /*
222
219
 
223
220
  Horizontal definition list
224
221
 
@@ -230,22 +227,22 @@ Markup:
230
227
 
231
228
  Styleguide 19.4.1
232
229
 
233
- -------------------------------------------------------------------------------------------------------------------- */
230
+ */
234
231
 
235
232
  .dl-horizontal {
236
- @extend .clearfix;
237
- dt {
238
- @include text-overflow();
239
- clear: left;
240
- float: left;
241
- text-align: right;
242
- width: em($horizontal-offset) - 20;
243
- }
244
-
245
- dd { padding-left: em($horizontal-offset); }
233
+ @extend .clearfix;
234
+ dt {
235
+ @include text-overflow();
236
+ clear: left;
237
+ float: left;
238
+ text-align: right;
239
+ width: em($horizontal-offset) - 20;
240
+ }
241
+
242
+ dd { padding-left: em($horizontal-offset); }
246
243
  }
247
244
 
248
- /* --------------------------------------------------------------------------------------------------------------------
245
+ /*
249
246
 
250
247
  Horizontal line
251
248
 
@@ -253,28 +250,27 @@ Markup: <hr />
253
250
 
254
251
  Styleguide 19.5
255
252
 
256
- -------------------------------------------------------------------------------------------------------------------- */
253
+ */
257
254
 
258
255
  hr {
259
- margin: rhythm(1) 0;
260
- border: 0;
261
- border-bottom: 1px solid $gray;
256
+ margin: rhythm(1) 0;
257
+ border: 0;
258
+ border-bottom: 1px solid $gray;
262
259
  }
263
260
 
264
261
  // Abbreviations and acronyms
265
- // --------------------------------------------------------------------------------------------------------------------
266
262
 
267
263
  abbr[title],
268
264
  abbr[data-original-title] {
269
- cursor: help;
270
- border-bottom: 1px dotted $grayLight;
265
+ cursor: help;
266
+ border-bottom: 1px dotted $grayLight;
271
267
  }
272
268
  abbr.initialism {
273
- font-size: 90%;
274
- text-transform: uppercase;
269
+ font-size: 90%;
270
+ text-transform: uppercase;
275
271
  }
276
272
 
277
- /* --------------------------------------------------------------------------------------------------------------------
273
+ /*
278
274
 
279
275
  Blockquotes
280
276
 
@@ -286,62 +282,60 @@ Markup:
286
282
 
287
283
  Styleguide 19.6
288
284
 
289
- -------------------------------------------------------------------------------------------------------------------- */
285
+ */
290
286
 
291
287
  blockquote {
292
- padding: 0 0 0 rhythm(1);
293
- margin: 0;
294
- margin: 0 0 rhythm(1);
295
- border-left: 5px solid $grayLighter;
296
-
297
- p {
298
- margin-bottom: 0;
299
- font-weight: 300;
300
- }
301
-
302
- small, cite {
303
- display: block;
304
- color: $grayLight;
305
- &:before {
306
- content: '\2014 \00A0';
307
- }
308
- }
309
-
310
- &.pull-right {
311
- float: right;
312
- padding-right: 15px;
313
- padding-left: 0;
314
- border-right: 5px solid $grayLighter;
315
- border-left: 0;
316
-
317
- p,
318
- small {
319
- text-align: right;
320
- }
321
-
322
- small {
323
- &:before { content: ''; }
324
- &:after { content: '\00A0 \2014'; }
325
- }
326
- }
288
+ padding: 0 0 0 rhythm(1);
289
+ margin: 0;
290
+ margin: 0 0 rhythm(1);
291
+ border-left: 5px solid $grayLighter;
292
+
293
+ p {
294
+ margin-bottom: 0;
295
+ font-weight: 300;
296
+ }
297
+
298
+ small, cite {
299
+ display: block;
300
+ color: $grayLight;
301
+ &:before {
302
+ content: '\2014 \00A0';
303
+ }
304
+ }
305
+
306
+ &.pull-right {
307
+ float: right;
308
+ padding-right: 15px;
309
+ padding-left: 0;
310
+ border-right: 5px solid $grayLighter;
311
+ border-left: 0;
312
+
313
+ p,
314
+ small {
315
+ text-align: right;
316
+ }
317
+
318
+ small {
319
+ &:before { content: ''; }
320
+ &:after { content: '\00A0 \2014'; }
321
+ }
322
+ }
327
323
  }
328
324
 
329
325
  // Quotes
330
- // --------------------------------------------------------------------------------------------------------------------
331
326
 
332
327
  q:before,
333
328
  q:after,
334
329
  blockquote:before,
335
330
  blockquote:after {
336
- content: "";
331
+ content: "";
337
332
  }
338
333
 
339
334
  // Addresses
340
- // --------------------------------------------------------------------------------------------------------------------
341
335
 
342
336
  address {
343
- display: block;
344
- margin-bottom: rhythm(1);
345
- font-style: normal;
346
- line-height: rhythm(1);
337
+ display: block;
338
+ margin-bottom: rhythm(1);
339
+ font-style: normal;
340
+ line-height: rhythm(1);
347
341
  }
@@ -1,18 +1,14 @@
1
1
  // Rapido Css | http://git.io/rapido
2
- // ====================================================================================================================
3
2
 
4
3
  // Normalize
5
- // --------------------------------------------------------------------------------------------------------------------
6
4
 
7
5
  @import "normalize";
8
6
 
9
7
  // Functions
10
- // --------------------------------------------------------------------------------------------------------------------
11
8
 
12
9
  @import "functions";
13
10
 
14
11
  // Settings
15
- // --------------------------------------------------------------------------------------------------------------------
16
12
 
17
13
  @import "settings/base";
18
14
  @import "settings/colors";
@@ -21,13 +17,11 @@
21
17
  @import "settings/effects";
22
18
 
23
19
  // External Frameworks
24
- // --------------------------------------------------------------------------------------------------------------------
25
20
 
26
21
  @import "compass";
27
22
  @import "susy";
28
23
 
29
24
  // Utilities
30
- // --------------------------------------------------------------------------------------------------------------------
31
25
 
32
26
  @import "utilities/mixins";
33
27
  @import "utilities/helper-classes";
@@ -36,7 +30,6 @@
36
30
  @import "utilities/icon-fonts";
37
31
 
38
32
  // Components
39
- // --------------------------------------------------------------------------------------------------------------------
40
33
 
41
34
  @import "components/type";
42
35
  @import "components/forms";
@@ -63,6 +56,5 @@
63
56
  @import "components/tabs";
64
57
 
65
58
  // Default styles
66
- // --------------------------------------------------------------------------------------------------------------------
67
59
 
68
60
  @import "default-styles";
@@ -1,12 +1,12 @@
1
- /* ====================================================================================================================
1
+ /*
2
2
 
3
3
  Base Settings
4
4
 
5
5
  Styleguide 25
6
6
 
7
- ==================================================================================================================== */
7
+ */
8
8
 
9
- /* --------------------------------------------------------------------------------------------------------------------
9
+ /*
10
10
 
11
11
  Debug Mode
12
12
 
@@ -15,13 +15,13 @@ Debug Mode
15
15
 
16
16
  Styleguide 25.1
17
17
 
18
- -------------------------------------------------------------------------------------------------------------------- */
18
+ */
19
19
 
20
- $debug-mode: false !default;
21
- $default-styles: true !default;
20
+ $debug-mode: false !default;
21
+ $default-styles: true !default;
22
22
 
23
23
 
24
- /* --------------------------------------------------------------------------------------------------------------------
24
+ /*
25
25
 
26
26
  Text body size
27
27
 
@@ -36,16 +36,16 @@ on `palm` (smartphone) change the base size to 16px, it will be automatically co
36
36
 
37
37
  Styleguide 25.2
38
38
 
39
- -------------------------------------------------------------------------------------------------------------------- */
39
+ */
40
40
 
41
- $base-font-size: 14px !default;
42
- $base-line-height: $base-font-size * 1.5 !default;
43
- $round-to-nearest-half-line: true !default;
41
+ $base-font-size: 14px !default;
42
+ $base-line-height: $base-font-size * 1.5 !default;
43
+ $round-to-nearest-half-line: true !default;
44
44
 
45
- $responsive-font-size: lap-and-up $base-font-size, palm 16px !default;
45
+ $responsive-font-size: lap-and-up $base-font-size, palm 16px !default;
46
46
 
47
47
 
48
- /* --------------------------------------------------------------------------------------------------------------------
48
+ /*
49
49
 
50
50
  Font families
51
51
 
@@ -58,28 +58,28 @@ Font families
58
58
 
59
59
  Styleguide 25.3
60
60
 
61
- -------------------------------------------------------------------------------------------------------------------- */
61
+ */
62
62
 
63
- $font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
64
- $font-serif: Georgia, "Times New Roman", Times, serif !default;
65
- $font-mono: Monaco, Menlo, Consolas, "Courier New", monospace !default;
63
+ $font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
64
+ $font-serif: Georgia, "Times New Roman", Times, serif !default;
65
+ $font-mono: Monaco, Menlo, Consolas, "Courier New", monospace !default;
66
66
 
67
- $base-font-family: $font-sans !default;
68
- $titles-font-family: $font-sans !default;
67
+ $base-font-family: $font-sans !default;
68
+ $titles-font-family: $font-sans !default;
69
69
 
70
70
 
71
- /* --------------------------------------------------------------------------------------------------------------------
71
+ /*
72
72
 
73
73
  em()
74
74
 
75
75
  To convert `PX` to `EM` using the `$base-font-size` as font size.
76
76
 
77
- width: em(20px);
77
+ width: em(20px);
78
78
 
79
79
  Styleguide 24.1
80
80
 
81
- -------------------------------------------------------------------------------------------------------------------- */
81
+ */
82
82
 
83
83
  @function em($to-size, $from-size: $base-font-size) {
84
- @return ($to-size / $from-size) + 0em;
84
+ @return ($to-size / $from-size) + 0em;
85
85
  }
@@ -1,4 +1,4 @@
1
- /* ====================================================================================================================
1
+ /*
2
2
 
3
3
  Base Colors
4
4
 
@@ -14,17 +14,17 @@ Used for scaffolding
14
14
 
15
15
  Styleguide 26
16
16
 
17
- ==================================================================================================================== */
17
+ */
18
18
 
19
- $black: #000;
20
- $grayDarker: lighten($black, 15);
21
- $grayDark: lighten($black, 30);
22
- $gray: lighten($black, 60);
23
- $grayLight: lighten($black, 85);
24
- $grayLighter: lighten($black, 95);
25
- $white: lighten($black, 100);
19
+ $black: #000;
20
+ $grayDarker: lighten($black, 15);
21
+ $grayDark: lighten($black, 30);
22
+ $gray: lighten($black, 60);
23
+ $grayLight: lighten($black, 85);
24
+ $grayLighter: lighten($black, 95);
25
+ $white: lighten($black, 100);
26
26
 
27
- /* --------------------------------------------------------------------------------------------------------------------
27
+ /*
28
28
 
29
29
  Default colors
30
30
 
@@ -35,10 +35,10 @@ Default colors
35
35
 
36
36
  Styleguide 26.1
37
37
 
38
- -------------------------------------------------------------------------------------------------------------------- */
38
+ */
39
39
 
40
- $text-color: #333 !default;
41
- $title-color: #333 !default;
40
+ $text-color: #333 !default;
41
+ $title-color: #333 !default;
42
42
 
43
43
  $link-color: #0066cc !default;
44
44
  $link-color-hover: darken($link-color, 10) !default;