rapido-css 0.1.7 → 0.1.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. checksums.yaml +8 -8
  2. data/README.md +4 -1
  3. data/lib/rapido-css.rb +1 -0
  4. data/stylesheets/_default-styles.scss +9 -9
  5. data/stylesheets/components/_forms.scss +3 -3
  6. data/stylesheets/components/_tooltip.scss +41 -27
  7. data/stylesheets/settings/_dimensions.scss +22 -22
  8. data/stylesheets/settings/_effects.scss +2 -2
  9. data/stylesheets/utilities/_helper-classes.scss +2 -2
  10. metadata +16 -2
checksums.yaml CHANGED
@@ -1,15 +1,15 @@
1
1
  ---
2
2
  !binary "U0hBMQ==":
3
3
  metadata.gz: !binary |-
4
- ZjVhNGVlMDFlZDU1OTc4YWUyYTk5N2ZjOWVhYTAyNDEzMTNmNmE1Zg==
4
+ NDE5ZTQ5ODQwNTg0MDE3N2ZjNzRkOWZlYTcwZTk5NWYxYmVmYzMyOA==
5
5
  data.tar.gz: !binary |-
6
- NzViNTBmNWU3YzNiY2M1YjQ3NjVjYThkOTEzYTgzOWI1NmYxNTQ5YQ==
6
+ NzlkNjYwZjczZjVhYzAxZWJlNDQ3NmFlMjg0NTI1NTgzNzQ4YjFlZQ==
7
7
  SHA512:
8
8
  metadata.gz: !binary |-
9
- MDNiZTE2ZTI1NjFlZGQ0OGMzMTUyZmE5YWQwMmU0YWYyMTEyOGQwYmMwYWY0
10
- YzM3NjgxNmY0NDg2NGQ2YWIyMjU1MjNlMGJkY2YzMTMzZmQxN2ZhMWMzNGMy
11
- YTAzYjJkYmUwMDE0NWFiZjIwMDc0N2MzM2U1NTQ0Njc0NWE5Yzc=
9
+ YmMxOTU0Nzk2OGNiZjRmZjY4MzVjMDNiMmUyYmYyNzJkMzNlMGU2MzVlMDIz
10
+ OWRjOTQwNWM0MzI0ODI0MzUzNGJmODE0NjcyOTdhZDQzYjMzYzk4M2M3Yjhi
11
+ MjViMDIyZGM4ZGQ3NTE2MTQ1OTFjOTUxZGE1YzkxNDNlNTUyYWQ=
12
12
  data.tar.gz: !binary |-
13
- ZTYwYmZhMGNjNDU0OTQxYjk0ZWQ4NGZhZTA1MGYyMzc5MTcyMzcxZDFhMDNl
14
- MDhiODZhYzQ0ODg3MTVlZjRiZWMyNDVlOGE0NmEwNmNiMzMzMTVlZWMwYWJh
15
- ZGIxMDgxYzQzMmUzNDM5YmIzOWY5YzkwZTBlN2VlYmJiOGFhZGY=
13
+ OTNiNDRjMWU3MTA5NDdmNDc3YzIxN2Y3ZTdlODI1ZWZhZThkYTUwNDZmZDli
14
+ NWI2ZDlkZjY4ZGUxY2YxNmQ2YTU1YjJhZGI2YjNhM2Q4Y2M1MDNiMDljMTll
15
+ MGI0ZjRiMmM2MTc0MzJiZWJiNDI4YzBiNmQ3YjcwNWE3OGE0NTQ=
data/README.md CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
  An easy and quick [**Sass**](http://sass-lang.com/) + [**Compass**](http://compass-style.org/) + [**Susy**](http://susy.oddbird.net/) + [**OOCSS**](http://oocss.org/) + [**BEM**](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) prototyping framework.
4
4
 
5
- [![Gem Version](https://badge.fury.io/rb/rapido-css.png)](http://badge.fury.io/rb/rapido-css) [![Bower version](https://badge.fury.io/bo/rapido.png)](http://badge.fury.io/bo/rapido)
5
+ [![Gem Version](https://badge.fury.io/rb/rapido-css.png)](http://badge.fury.io/rb/rapido-css)
6
+ [![Bower version](https://badge.fury.io/bo/rapido.png)](http://badge.fury.io/bo/rapido)
7
+ [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/raffone/rapido/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
6
8
 
7
9
  ## Features
8
10
 
@@ -30,3 +32,4 @@ A complete documentation of what is currently available can be found here: [Rapi
30
32
  ## License
31
33
 
32
34
  MIT License (MIT)
35
+
data/lib/rapido-css.rb CHANGED
@@ -1,5 +1,6 @@
1
1
  require 'compass'
2
2
  require 'susy'
3
+ require 'sass-media_query_combiner'
3
4
 
4
5
  extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
5
6
  Compass::Frameworks.register('rapido-css', :path => extension_path)
data/stylesheets/_default-styles.scss CHANGED
@@ -437,12 +437,12 @@ Styleguide 32.12
437
437
 
438
438
  %modal__btn {
439
439
  @extend %btn--scripts;
440
- @include square($modal-btn-size);
441
- line-height: $modal-btn-size;
440
+ @include square(em($modal-btn-size));
441
+ line-height: em($modal-btn-size);
442
442
  }
443
443
 
444
444
  %modal__close {
445
- $offset: -$modal-btn-size;
445
+ $offset: neg(em($modal-btn-size));
446
446
  @include position(absolute, $offset .5em 0 0);
447
447
  color: #CCCCCC;
448
448
  &:hover {
@@ -451,7 +451,7 @@ Styleguide 32.12
451
451
  }
452
452
 
453
453
  %modal__btnbar-size {
454
- @include size($modal-btn-size, $modal-btn-size * 5);
454
+ @include size(em($modal-btn-size), em($modal-btn-size) * 5);
455
455
  }
456
456
 
457
457
  // Other styles
@@ -466,7 +466,7 @@ Styleguide 32.12
466
466
 
467
467
  }
468
468
 
469
- %modal__nav { margin-top: (0 - ($modal-btn-size / 2)); }
469
+ %modal__nav { margin-top: (0 - (em($modal-btn-size) / 2)); }
470
470
 
471
471
  %modal__caption { @extend %caption; }
472
472
 
@@ -499,9 +499,9 @@ Styleguide 32.13
499
499
  // Buttons
500
500
  %slider__btn {
501
501
  @extend %btn--scripts;
502
- @include square($slider-btn-size);
503
- line-height: $slider-btn-size;
504
- margin-top: -($slider-btn-size / 2);
502
+ @include square(em($slider-btn-size));
503
+ line-height: em($slider-btn-size);
504
+ margin-top: neg((em($slider-btn-size) / 2));
505
505
 
506
506
  &.bx-prev i:after { content: "<" }
507
507
  &.bx-next i:after { content: ">" }
@@ -601,7 +601,7 @@ Styleguide 32.16
601
601
 
602
602
  %nav--offcanvas {
603
603
  background-color: $grayDark;
604
- padding: $wrapper-padding;
604
+ padding: em($wrapper-padding);
605
605
  color: $white;
606
606
 
607
607
  a {
data/stylesheets/components/_forms.scss CHANGED
@@ -410,13 +410,13 @@ Markup:
410
410
  </div>
411
411
  <script type="text/javascript">
412
412
  $(document).ready(function() {
413
- $('.form__controls').rapido_Suggest();
413
+ $.rapido_Suggest();
414
414
  });
415
415
  </script>
416
416
 
417
417
  Include this js after including rapido.js.
418
418
 
419
- $('.form').rapido_Overlay();
419
+ $.rapido_Suggest();
420
420
 
421
421
  **Options** (with default values):
422
422
 
@@ -434,6 +434,7 @@ Styleguide 8.6
434
434
  overflow: hidden;
435
435
  position: absolute;
436
436
  z-index: 5;
437
+ padding: $input-padding;
437
438
 
438
439
  &.open {
439
440
  max-height: $dropdowns-height;
@@ -446,7 +447,6 @@ Styleguide 8.6
446
447
  ul {
447
448
  margin: 0;
448
449
  list-style: none;
449
- padding: $input-padding;
450
450
  }
451
451
  }
452
452
 
data/stylesheets/components/_tooltip.scss CHANGED
@@ -32,6 +32,46 @@ Styleguide 19
32
32
 
33
33
  @if $tooltips {
34
34
 
35
+ [data-tooltip-position="top"] + .tooltip {
36
+ @include translate(0, -.50em);
37
+ &:after {
38
+ @include triangle(em($tooltip-triangle-size), $tooltip-background, down);
39
+ left: 50%;
40
+ margin-left: (neg(em($tooltip-triangle-size)) / 2);
41
+ bottom: neg(em($tooltip-triangle-size));
42
+ }
43
+ }
44
+
45
+ [data-tooltip-position="bottom"] + .tooltip {
46
+ @include translate(0, .50em);
47
+ &:after {
48
+ @include triangle(em($tooltip-triangle-size), $tooltip-background, up);
49
+ left: 50%;
50
+ margin-left: (neg(em($tooltip-triangle-size)) / 2);
51
+ top: neg(em($tooltip-triangle-size));
52
+ }
53
+ }
54
+
55
+ [data-tooltip-position="left"] + .tooltip {
56
+ @include translate(-.50em, 0);
57
+ &:after {
58
+ @include triangle(em($tooltip-triangle-size), $tooltip-background, right);
59
+ right: neg(em($tooltip-triangle-size));
60
+ top: 50%;
61
+ margin-top: (neg(em($tooltip-triangle-size)) / 2);
62
+ }
63
+ }
64
+
65
+ [data-tooltip-position="right"] + .tooltip {
66
+ @include translate(.50em, 0);
67
+ &:after {
68
+ @include triangle(em($tooltip-triangle-size), $tooltip-background, left);
69
+ left: neg(em($tooltip-triangle-size));
70
+ top: 50%;
71
+ margin-top: (neg(em($tooltip-triangle-size)) / 2);
72
+ }
73
+ }
74
+
35
75
  .tooltip {
36
76
  @extend %tooltip !optional;
37
77
  @include border-radius();
@@ -46,6 +86,7 @@ Styleguide 19
46
86
 
47
87
  &.open {
48
88
  @include opacity(1);
89
+ @include translate(0,0);
49
90
  max-height: $dropdowns-height;
50
91
  visibility: visible;
51
92
  }
@@ -58,32 +99,5 @@ Styleguide 19
58
99
 
59
100
  }
60
101
 
61
- [data-tooltip-position="top"] + .tooltip:after {
62
- @include triangle($tooltip-triangle-size, $tooltip-background, down);
63
- left: 50%;
64
- margin-left: (neg($tooltip-triangle-size) / 2);
65
- bottom: neg($tooltip-triangle-size);
66
- }
67
-
68
- [data-tooltip-position="bottom"] + .tooltip:after {
69
- @include triangle($tooltip-triangle-size, $tooltip-background, up);
70
- left: 50%;
71
- margin-left: (neg($tooltip-triangle-size) / 2);
72
- top: neg($tooltip-triangle-size);
73
- }
74
-
75
- [data-tooltip-position="left"] + .tooltip:after {
76
- @include triangle($tooltip-triangle-size, $tooltip-background, right);
77
- right: neg($tooltip-triangle-size);
78
- top: 50%;
79
- margin-top: (neg($tooltip-triangle-size) / 2);
80
- }
81
-
82
- [data-tooltip-position="right"] + .tooltip:after {
83
- @include triangle($tooltip-triangle-size, $tooltip-background, left);
84
- left: neg($tooltip-triangle-size);
85
- top: 50%;
86
- margin-top: (neg($tooltip-triangle-size) / 2);
87
- }
88
102
 
89
103
  }
data/stylesheets/settings/_dimensions.scss CHANGED
@@ -126,7 +126,7 @@ Padding specific to every component you can use to overwrite the base padding.
126
126
 
127
127
  Helper classes
128
128
 
129
- $wrapper-padding: em(20px) # Side padding used with .w and .wrapper
129
+ $wrapper-padding: 20px # Side padding used with .w and .wrapper
130
130
 
131
131
  Buttons
132
132
 
@@ -157,7 +157,7 @@ Styleguide 31.3
157
157
 
158
158
 
159
159
  // Helper classes
160
- $wrapper-padding: em(20px) !default;
160
+ $wrapper-padding: 20px !default;
161
161
 
162
162
  // Buttons
163
163
  $btn-padding: $input-padding !default;
@@ -185,18 +185,18 @@ $tooltips-padding: $input-padding
185
185
  Sizes
186
186
 
187
187
  $loader-ico-size: 44px # Icon size of the loader used with some componets
188
- $modal-btn-size: em(30px) # Size of buttons used with the modals
189
- $slider-btn-size: em(30px) # Size of buttons used with the sliders
190
- $tooltip-triangle-size: em(15px) # Size the tooltip's triangle
188
+ $modal-btn-size: 30px # Size of buttons used with the modals
189
+ $slider-btn-size: 30px # Size of buttons used with the sliders
190
+ $tooltip-triangle-size: 15px # Size the tooltip's triangle
191
191
 
192
192
  Styleguide 31.4
193
193
 
194
194
  */
195
195
 
196
196
  $loader-ico-size: 44px !default;
197
- $modal-btn-size: em(30px) !default;
198
- $slider-btn-size: em(30px) !default;
199
- $tooltip-triangle-size: em(14px) !default;
197
+ $modal-btn-size: 30px !default;
198
+ $slider-btn-size: 30px !default;
199
+ $tooltip-triangle-size: 14px !default;
200
200
 
201
201
  /*
202
202
 
@@ -256,10 +256,10 @@ Grid (Susy)
256
256
 
257
257
  Default settings for susy grid. More info: [Susy](http://susy.oddbird.net/).
258
258
 
259
- $total-columns: 12 # Number of columns
260
- $column-width: 50px # Columns width
261
- $gutter-width: 30px # Gutter width
262
- $container-style: fluid # Grid style
259
+ $total-columns: 12 # Number of columns
260
+ $column-width: 50px # Columns width
261
+ $gutter-width: 30px # Gutter width
262
+ $container-style: fluid # Grid style
263
263
 
264
264
  Styleguide 31.8
265
265
 
@@ -275,10 +275,10 @@ $container-style: fluid
275
275
 
276
276
  Off-Canvas Options
277
277
 
278
- $offcanvas-width: 300px # Width of the sidebar
279
- $offcanvas-direction: left # On what side appear
280
- $offcanvas-dim: true # Dim over the content on open
281
- $offcanvas-effect: slide # cover, reveal, push, slide
278
+ $offcanvas-width: 300px # Width of the sidebar
279
+ $offcanvas-direction: left # On what side appear
280
+ $offcanvas-dim: true # Dim over the content on open
281
+ $offcanvas-effect: slide # cover, reveal, push, slide
282
282
 
283
283
  Styleguide 15.1
284
284
 
@@ -296,12 +296,12 @@ Z-index
296
296
 
297
297
  Default settings for overlay components, taken from Bootstrap.
298
298
 
299
- $zindex-offcanvas: 990 # OffCanvas
300
- $zindex-dropdown: 1000 # Dropdowns
301
- $zindex-popover: 1010 # Popovers
302
- $zindex-tooltip: 1030 # Tooltips
303
- $zindex-slider: 1040 # Sliders
304
- $zindex-modal: 1050 # Modals
299
+ $zindex-offcanvas: 990 # OffCanvas
300
+ $zindex-dropdown: 1000 # Dropdowns
301
+ $zindex-popover: 1010 # Popovers
302
+ $zindex-tooltip: 1030 # Tooltips
303
+ $zindex-slider: 1040 # Sliders
304
+ $zindex-modal: 1050 # Modals
305
305
 
306
306
  Styleguide 31.9
307
307
 
data/stylesheets/settings/_effects.scss CHANGED
@@ -28,7 +28,7 @@ Durations specifics for some modules.
28
28
 
29
29
  $caption-animations-duration: .50s
30
30
  $offcanvas-animations-duration: .40s
31
- $tooltip-transition-duration: .25s
31
+ $tooltip-transition-duration: .30s
32
32
 
33
33
  Styleguide 24.1
34
34
 
@@ -47,4 +47,4 @@ $default-transition-function: toBezier($animations-function)
47
47
 
48
48
  $caption-animations-duration: .50s !default;
49
49
  $offcanvas-animations-duration: .40s !default;
50
- $tooltip-transition-duration: .25s !default;
50
+ $tooltip-transition-duration: .30s !default;
data/stylesheets/utilities/_helper-classes.scss CHANGED
@@ -62,8 +62,8 @@ Styleguide 25.2
62
62
  @extend .clearfix;
63
63
  margin: 0 auto;
64
64
  max-width: $desk-end;
65
- padding-left: $wrapper-padding;
66
- padding-right: $wrapper-padding;
65
+ padding-left: em($wrapper-padding);
66
+ padding-right: em($wrapper-padding);
67
67
  }
68
68
 
69
69
  .fixed-wrapper, .fw {
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: rapido-css
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.7
4
+ version: 0.1.8
5
5
  platform: ruby
6
6
  authors:
7
7
  - Raffaele Rasini
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-01-29 00:00:00.000000000 Z
11
+ date: 2014-01-31 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: susy
@@ -24,6 +24,20 @@ dependencies:
24
24
  - - ! '>='
25
25
  - !ruby/object:Gem::Version
26
26
  version: 1.0.8
27
+ - !ruby/object:Gem::Dependency
28
+ name: sass-media_query_combiner
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - ! '>='
32
+ - !ruby/object:Gem::Version
33
+ version: 0.0.6
34
+ type: :runtime
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - ! '>='
39
+ - !ruby/object:Gem::Version
40
+ version: 0.0.6
27
41
  description: An easy and quick Sass + Compass + Susy + OOCSS + BEM prototyping framework.
28
42
  email: raffaele.rasini@gmail.com
29
43
  executables: []