rapido-css 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.
@@ -2,7 +2,7 @@
2
2
 
3
3
  Type
4
4
 
5
- Styleguide 20
5
+ Styleguide 22
6
6
 
7
7
  */
8
8
 
@@ -36,7 +36,7 @@ body {
36
36
 
37
37
  img {
38
38
  max-width: 100%;
39
- display: inline-block;
39
+ @include inline-block;
40
40
  }
41
41
 
42
42
  a, button, textarea, input { outline: none; }
@@ -59,11 +59,13 @@ a {
59
59
  // Selection color
60
60
 
61
61
  ::selection {
62
- background: $selection-color;
62
+ color: $selection-color;
63
+ background: $selection-background;
63
64
  }
64
65
 
65
66
  ::-moz-selection {
66
- background: $selection-color;
67
+ color: $selection-color;
68
+ background: $selection-background;
67
69
  }
68
70
 
69
71
 
@@ -76,7 +78,7 @@ Markup:
76
78
  <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus.</p>
77
79
  <small><p>Tight pants next level keffiyeh. Photo booth beard raw denim letterpress vegan messenger bag stumptown.</small>
78
80
 
79
- Styleguide 20.1
81
+ Styleguide 22.1
80
82
 
81
83
  */
82
84
 
@@ -103,7 +105,7 @@ Markup:
103
105
  <h5>h5. This is a small header. h1.</h5>
104
106
  <h6>h6. This is a tiny header. h1.</h6>
105
107
 
106
- Styleguide 20.2
108
+ Styleguide 22.2
107
109
 
108
110
  */
109
111
 
@@ -170,7 +172,7 @@ Markup:
170
172
  <li>Ordered list item</li>
171
173
  </ol>
172
174
 
173
- Styleguide 20.3
175
+ Styleguide 22.3
174
176
 
175
177
  */
176
178
 
@@ -221,7 +223,7 @@ Markup:
221
223
  <dd>A geologist’s hammer, rock hammer, rock pick or geological pick is a hammer used for splitting and breaking rocks.</dd>
222
224
  </dl>
223
225
 
224
- Styleguide 20.4
226
+ Styleguide 22.4
225
227
 
226
228
  */
227
229
 
@@ -242,7 +244,7 @@ Markup:
242
244
  <dd>A geologist’s hammer, rock hammer, rock pick or geological pick is a hammer used for splitting and breaking rocks.</dd>
243
245
  </dl>
244
246
 
245
- Styleguide 20.4.1
247
+ Styleguide 22.4.1
246
248
 
247
249
  */
248
250
 
@@ -265,7 +267,7 @@ Horizontal line
265
267
 
266
268
  Markup: <hr />
267
269
 
268
- Styleguide 20.5
270
+ Styleguide 22.5
269
271
 
270
272
  */
271
273
 
@@ -297,7 +299,7 @@ Markup:
297
299
  <small><cite>Rock Hammer</cite></small>
298
300
  </blockquote>
299
301
 
300
- Styleguide 20.6
302
+ Styleguide 22.6
301
303
 
302
304
  */
303
305
 
@@ -49,8 +49,10 @@
49
49
  @import "components/captions";
50
50
  @import "components/grids";
51
51
  @import "components/labels";
52
+ @import "components/overlay";
52
53
  @import "components/pager";
53
54
  @import "components/pagination";
55
+ @import "components/tooltip";
54
56
 
55
57
  // Default styles
56
58
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  Base Settings
4
4
 
5
- Styleguide 26
5
+ Styleguide 28
6
6
 
7
7
  */
8
8
 
@@ -14,7 +14,7 @@ Debug Mode
14
14
  $debug-outlines: false # Enable debug outlines mode
15
15
  $default-styles: true # Use default styles in _default-styles.scss
16
16
 
17
- Styleguide 26.1
17
+ Styleguide 28.1
18
18
 
19
19
  */
20
20
 
@@ -36,7 +36,7 @@ on `palm` (smartphone) change the base size to 16px, it will be automatically co
36
36
 
37
37
  $responsive-font-size: lap-and-up $base-font-size, palm 16px
38
38
 
39
- Styleguide 26.2
39
+ Styleguide 28.2
40
40
 
41
41
  */
42
42
 
@@ -58,7 +58,7 @@ Font families
58
58
  $base-font-family: $font-sans # Default font family for body text
59
59
  $titles-font-family: $font-sans # Default font family for titles
60
60
 
61
- Styleguide 26.3
61
+ Styleguide 28.3
62
62
 
63
63
  */
64
64
 
@@ -83,7 +83,7 @@ Enable or disable specific broweser prefixes used by Compass mixins.
83
83
  $experimental-support-for-khtml: false
84
84
 
85
85
 
86
- Styleguide 26.4
86
+ Styleguide 28.4
87
87
 
88
88
  */
89
89
 
@@ -104,7 +104,7 @@ To convert `PX` to `EM` using the `$base-font-size` as font size.
104
104
 
105
105
  width: em(20px);
106
106
 
107
- Styleguide 25.1
107
+ Styleguide 27.1
108
108
 
109
109
  */
110
110
 
@@ -12,7 +12,22 @@ Used for scaffolding
12
12
  $grayLighter: lighten($black, 95)
13
13
  $white: #fff
14
14
 
15
- Styleguide 27
15
+ # Better defaults from https://github.com/mrmrs/colors
16
+ $aqua: #7FDBFF
17
+ $blue: #0074D9
18
+ $navy: #001F3F
19
+ $teal: #39CCCC
20
+ $green: #2ECC40
21
+ $olive: #3D9970
22
+ $lime: #01FF70
23
+ $yellow: #FFDC00
24
+ $orange: #FF851B
25
+ $red: #FF4136
26
+ $fuchsia: #F012BE
27
+ $purple: #B10DC9
28
+ $maroon: #85144B
29
+
30
+ Styleguide 29
16
31
 
17
32
  */
18
33
 
@@ -24,6 +39,20 @@ $grayLight: lighten($black, 85);
24
39
  $grayLighter: lighten($black, 95);
25
40
  $white: lighten($black, 100);
26
41
 
42
+ $aqua: #7FDBFF;
43
+ $blue: #0074D9;
44
+ $navy: #001F3F;
45
+ $teal: #39CCCC;
46
+ $green: #2ECC40;
47
+ $olive: #3D9970;
48
+ $lime: #01FF70;
49
+ $yellow: #FFDC00;
50
+ $orange: #FF851B;
51
+ $red: #FF4136;
52
+ $fuchsia: #F012BE;
53
+ $purple: #B10DC9;
54
+ $maroon: #85144B;
55
+
27
56
  /*
28
57
 
29
58
  Default colors
@@ -34,16 +63,29 @@ Default colors
34
63
  $link-color: #0066cc
35
64
  $link-color-hover: darken($link-color, 10%)
36
65
 
37
- Styleguide 27.1
66
+ $placeholder-color: $gray
67
+
68
+ $selection-color: $white
69
+ $selection-bacground: $gray
70
+
71
+ $tooltip-color: $white
72
+ $tooltip-background: rgba(0,0,0,.75)
73
+
74
+ Styleguide 29.1
38
75
 
39
76
  */
40
77
 
41
- $body-color: #FFFFFF !default;
42
- $text-color: #333 !default;
78
+ $body-color: $white !default;
79
+ $text-color: $grayDarker !default;
43
80
 
44
- $link-color: #0066cc !default;
81
+ $link-color: $blue !default;
45
82
  $link-color-hover: darken($link-color, 10) !default;
46
83
 
47
84
  $placeholder-color: $gray !default;
48
- $selection-color: $gray !default;
85
+
86
+ $selection-color: $white !default;
87
+ $selection-background: $teal !default;
88
+
89
+ $tooltip-color: $white !default;
90
+ $tooltip-background: rgba(0,0,0,.75) !default;
49
91
 
@@ -11,32 +11,35 @@ Enable or disable components, so you can have in the css only what you need.
11
11
  $captions: true # components/_captions.scss
12
12
  $close: true # components/_close.scss
13
13
  $dropdowns: true # components/_dropdowns.scss
14
- $forms: true # components/_forms.scss
15
14
  $forms-aligned: true # components/_forms.scss
16
15
  $forms-append: true # components/_forms.scss
17
16
  $forms-grid: true # components/_forms.scss
18
17
  $forms-inline: true # components/_forms.scss
19
- $grids: true # components/_grids.scss
18
+ $forms: true # components/_forms.scss
20
19
  $grids-helpers: true # components/_grids.scss
20
+ $grids: true # components/_grids.scss
21
21
  $labels: true # components/_labels.scss
22
- $modal: true # components/_modal.scss
23
22
  $modal-buttons: true # components/_modal.scss
24
23
  $modal-thumbs: true # components/_modal.scss
25
- $offcanvas: true # components/_off-canvas.scss
24
+ $modal: true # components/_modal.scss
26
25
  $navs: true # components/_navs.scss
26
+ $offcanvas: true # components/_off-canvas.scss
27
+ $overlays: true # components/_overlay.scss
27
28
  $pager: true # components/_pager.scss
28
29
  $pagination: true # components/_pagination.scss
29
30
  $slider: true # components/_slider.scss
30
31
  $sprites: true # components/_sprites.scss
31
32
  $tables: true # components/_tables.scss
32
33
  $tabs: true # components/_tabs.scss
34
+ $tooltips: true # components/_tooltip.scss
33
35
 
34
36
  $width-helper-classes: true # "Elements width" helper class
35
37
 
36
- Styleguide 28
38
+ Styleguide 30
37
39
 
38
40
  */
39
41
 
42
+
40
43
  $alerts: true !default;
41
44
  $breadcrumbs: true !default;
42
45
  $button-groups: true !default;
@@ -44,30 +47,28 @@ $buttons: true !default;
44
47
  $captions: true !default;
45
48
  $close: true !default;
46
49
  $dropdowns: true !default;
47
-
50
+ $forms-aligned: true !default;
51
+ $forms-append: true !default;
52
+ $forms-grid: true !default;
53
+ $forms-inline: true !default;
48
54
  $forms: true !default;
49
- $forms-append: true !default;
50
- $forms-grid: true !default;
51
- $forms-aligned: true !default;
52
- $forms-inline: true !default;
53
-
54
- $grids: true !default;
55
55
  $grids-helpers: true !default;
56
-
56
+ $grids: true !default;
57
57
  $labels: true !default;
58
- $offcanvas: true !default;
58
+ $modal-buttons: true !default;
59
+ $modal-thumbs: true !default;
60
+ $modal: true !default;
59
61
  $navs: true !default;
62
+ $offcanvas: true !default;
63
+ $overlays: true !default;
60
64
  $pager: true !default;
61
65
  $pagination: true !default;
66
+ $slider: true !default;
67
+ $sprites: true !default;
62
68
  $tables: true !default;
63
-
64
69
  $tabs: true !default;
65
- $slider: true !default;
66
- $modal: true !default;
67
- $modal-buttons: true !default;
68
- $modal-thumbs: true !default;
70
+ $tooltips: true !default;
69
71
 
70
- $sprites: true !default;
71
72
  $width-helper-classes: true !default;
72
73
 
73
74
  /*
@@ -77,7 +78,7 @@ Sprites
77
78
  $s-sprite-dimensions: true;
78
79
  $s-layout: smart;
79
80
 
80
- Styleguide 28.1
81
+ Styleguide 30.1
81
82
 
82
83
  */
83
84
 
@@ -93,8 +94,7 @@ Icon Fonts ready to use with the mixin `icon-font`.
93
94
  Font files are not required, is used the [We Love Icon Fonts](http://weloveiconfonts.com/) CDN.
94
95
 
95
96
 
96
- $use-fontawesome: true # http://fortawesome.github.io/Font-Awesome/
97
-
97
+ $use-fontawesome: false # http://fortawesome.github.io/Font-Awesome/
98
98
  $use-brandico: false # http://fontello.github.io/brandico.font/demo.html
99
99
  $use-entypo: false # http://www.entypo.com/
100
100
  $use-fontelico: false # https://github.com/fontello/fontelico.font
@@ -103,12 +103,11 @@ Font files are not required, is used the [We Love Icon Fonts](http://weloveiconf
103
103
  $use-typicons: false # http://typicons.com/
104
104
  $use-zocial: false # http://zocial.smcllns.com/
105
105
 
106
- Styleguide 28.2
106
+ Styleguide 30.2
107
107
 
108
108
  */
109
109
 
110
- $use-fontawesome: true !default;
111
-
110
+ $use-fontawesome: false !default;
112
111
  $use-brandico: false !default;
113
112
  $use-entypo: false !default;
114
113
  $use-fontelico: false !default;
@@ -5,14 +5,13 @@ Base Dimensions
5
5
  $base-border-radius: 4px # Border radius used as a standard on all elements.
6
6
  $horizontal-offset: 180px # Labels width in horizontal forms.
7
7
 
8
- Styleguide 29
8
+ Styleguide 31
9
9
 
10
10
  */
11
11
 
12
12
 
13
13
  $base-border-radius: 4px !default;
14
14
  $horizontal-offset: 180px !default;
15
- $dropdowns-with: 160px !default;
16
15
 
17
16
  /*
18
17
 
@@ -35,7 +34,7 @@ Font sizes you can used with the compass mixin `adjust-font-size-to()`. Naming c
35
34
  $smaller-size: $base-font-size * .7 # 10px
36
35
  $smallest-size: $base-font-size * .5 # 7px
37
36
 
38
- Styleguide 29.1
37
+ Styleguide 31.1
39
38
 
40
39
  */
41
40
 
@@ -78,7 +77,7 @@ These values mean: n times the base line-height.
78
77
  $h5-line-height: 1.5
79
78
  $h6-line-height: 1.5
80
79
 
81
- Styleguide 29.1.1
80
+ Styleguide 31.1.1
82
81
 
83
82
  */
84
83
 
@@ -102,7 +101,7 @@ Base padding and margins used in the forms.
102
101
  $input-padding-side: 10px # Base side padding
103
102
  $checkbox-padding-left: 20px # Side padding used for checkboxes and radios
104
103
 
105
- Styleguide 29.2
104
+ Styleguide 31.2
106
105
 
107
106
  */
108
107
 
@@ -149,8 +148,10 @@ Components
149
148
  $tables-padding: $input-padding # Tables padding
150
149
  $tabs-content-padding: $input-padding # Tabs padding
151
150
  $tabs-tab-padding: $input-padding # Tabs padding
151
+ $tooltips-padding: $input-padding # Tooltips padding
152
152
 
153
- Styleguide 29.3
153
+
154
+ Styleguide 31.3
154
155
 
155
156
  */
156
157
 
@@ -176,6 +177,7 @@ $pills-padding: .15em .35em
176
177
  $tables-padding: $input-padding !default;
177
178
  $tabs-content-padding: $input-padding !default;
178
179
  $tabs-tab-padding: $input-padding !default;
180
+ $tooltips-padding: $input-padding !default;
179
181
 
180
182
 
181
183
  /*
@@ -185,14 +187,30 @@ Sizes
185
187
  $loader-ico-size: 44px # Icon size of the loader used with some componets
186
188
  $modal-btn-size: em(30px) # Size of buttons used with the modals
187
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
191
 
189
- Styleguide 29.4
192
+ Styleguide 31.4
190
193
 
191
194
  */
192
195
 
193
196
  $loader-ico-size: 44px !default;
194
197
  $modal-btn-size: em(30px) !default;
195
198
  $slider-btn-size: em(30px) !default;
199
+ $tooltip-triangle-size: em(14px) !default;
200
+
201
+ /*
202
+
203
+ Widths
204
+
205
+ $dropdowns-width: 160px # max-width of dropdowns
206
+ $tooltips-width: 200px # max-width of tooltips
207
+
208
+ Styleguide 31.5
209
+
210
+ */
211
+
212
+ $dropdowns-width: 160px !default;
213
+ $tooltips-width: 200px !default;
196
214
 
197
215
 
198
216
  /*
@@ -201,14 +219,14 @@ Heights
201
219
 
202
220
  Some elements need to have a max-height specified for smoother animations, like dropdowns:
203
221
 
204
- $dropdowns-height: em(600px);
222
+ $dropdowns-height: 600px
205
223
 
206
- Styleguide 29.5
224
+ Styleguide 31.6
207
225
 
208
226
  */
209
227
 
210
228
 
211
- $dropdowns-height: em(600px) !default;
229
+ $dropdowns-height: 600px !default;
212
230
 
213
231
  /*
214
232
 
@@ -216,11 +234,11 @@ Media Queries
216
234
 
217
235
  Set the width of the three steps of the layout.
218
236
 
219
- $lap-start: 481px # Max width of smartphone
220
- $desk-start: 768px # Max width for tablet
221
- $desk-end: 1080px # Max width for desktop
237
+ $lap-start: 481px # Max width of smartphone
238
+ $desk-start: 768px # Max width for tablet
239
+ $desk-end: 1080px # Max width for desktop
222
240
 
223
- Styleguide 29.6
241
+ Styleguide 31.7
224
242
 
225
243
  */
226
244
 
@@ -243,7 +261,7 @@ Default settings for susy grid. More info: [Susy](http://susy.oddbird.net/).
243
261
  $gutter-width: 30px # Gutter width
244
262
  $container-style: fluid # Grid style
245
263
 
246
- Styleguide 29.7
264
+ Styleguide 31.8
247
265
 
248
266
  */
249
267
 
@@ -285,7 +303,7 @@ Default settings for overlay components, taken from Bootstrap.
285
303
  $zindex-slider: 1040 # Sliders
286
304
  $zindex-modal: 1050 # Modals
287
305
 
288
- Styleguide 29.9
306
+ Styleguide 31.9
289
307
 
290
308
  */
291
309
 
@@ -6,34 +6,35 @@ These are the default settings for all animations and transitions within the fra
6
6
 
7
7
  By default all animations but fadeIn and fadeOut are disabled, use the ```$animations``` list to enable/disable them.
8
8
 
9
- $animations: fadeIn, fadeOut
9
+ $animations: fadeIn, fadeOut, fadeInDown, fadeOutUp
10
10
 
11
11
  If true it generate a placeholder class for every animation with the default settings to use as an ````@extend```.
12
12
 
13
- $animations-classes: true
13
+ $animations-classes: true
14
14
 
15
15
  Base settings for animations
16
16
 
17
- $animations-duration: .50s # Duration
18
- $animations-delay: 0s # Start delay
19
- $animations-function: ease-out # Easing
20
- $animations-mode: both # animation-fill-mode
17
+ $animations-duration: .50s # Duration
18
+ $animations-delay: 0s # Start delay
19
+ $animations-function: ease-out # Easing
20
+ $animations-mode: both # animation-fill-mode
21
21
 
22
22
  For transitions you can use other settings for duration and easing, by default the use the same settings as the animations.
23
23
 
24
- $default-transition-duration: .15s
25
- $default-transition-function: $animations-function
24
+ $default-transition-duration: .15s
25
+ $default-transition-function: $animations-function
26
26
 
27
27
  Durations specifics for some modules.
28
28
 
29
29
  $caption-animations-duration: .50s
30
+ $offcanvas-animations-duration: .40s
31
+ $tooltip-transition-duration: .25s
30
32
 
31
-
32
- Styleguide 21.1
33
+ Styleguide 24.1
33
34
 
34
35
  */
35
36
 
36
- $animations: fadeIn, fadeOut !default;
37
+ $animations: fadeIn, fadeOut, fadeInDown, fadeOutUp !default;
37
38
  $animations-classes: true !default;
38
39
 
39
40
  $animations-duration: .50s !default;
@@ -46,3 +47,4 @@ $default-transition-function: toBezier($animations-function)
46
47
 
47
48
  $caption-animations-duration: .50s !default;
48
49
  $offcanvas-animations-duration: .40s !default;
50
+ $tooltip-transition-duration: .25s !default;
@@ -12,7 +12,7 @@ All the animations in [theCSSguru](https://twitter.com/theCSSguru)'s [Animate mi
12
12
  * **Rotating entrances:** rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight
13
13
  * **Rotating exits:** rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight
14
14
 
15
- Styleguide 21
15
+ Styleguide 24
16
16
 
17
17
  */
18
18
 
@@ -119,7 +119,7 @@ Example:
119
119
 
120
120
  @extend .fadeIn;
121
121
 
122
- Styleguide 21.3
122
+ Styleguide 24.3
123
123
 
124
124
  */
125
125
 
@@ -143,7 +143,7 @@ Example:
143
143
 
144
144
  @extend .delay-50;
145
145
 
146
- Styleguide 21.4
146
+ Styleguide 24.4
147
147
 
148
148
  */
149
149
 
@@ -180,7 +180,7 @@ Example:
180
180
  </section>
181
181
 
182
182
 
183
- Styleguide 21.5
183
+ Styleguide 24.5
184
184
 
185
185
  */
186
186
 
@@ -195,7 +195,7 @@ Animation mixin
195
195
  Also available is an "animate" mixin, for more information see the Mixins
196
196
  section.
197
197
 
198
- Styleguide 21.6
198
+ Styleguide 24.6
199
199
 
200
200
  */
201
201
 
@@ -8,7 +8,7 @@ and finding errors. Taken form [Inuit](https://github.com/csswizardry/inuit.css)
8
8
 
9
9
  Enable it with `$debug-html: true;`.
10
10
 
11
- Styleguide 21
11
+ Styleguide 23
12
12
 
13
13
  */
14
14
 
@@ -81,7 +81,7 @@ Taken form [Pesticide](https://github.com/mrmrs/pesticide).
81
81
 
82
82
  Enable it with `$debug-outlines: true;`.
83
83
 
84
- Styleguide 21.1
84
+ Styleguide 23.1
85
85
 
86
86
  */
87
87
 
@@ -4,7 +4,7 @@ Helper Classes
4
4
 
5
5
  There are provided some helper classes usually used with `@extend` for applying effects or common styles.
6
6
 
7
- Styleguide 23
7
+ Styleguide 25
8
8
 
9
9
  */
10
10
 
@@ -20,7 +20,7 @@ Simple divider class used in some components (like dropdowns).
20
20
 
21
21
  .divider
22
22
 
23
- Styleguide 23.1
23
+ Styleguide 25.1
24
24
 
25
25
  */
26
26
 
@@ -54,7 +54,7 @@ Same a `.wrapper` but with fixed width.
54
54
  .fixed-wrapper
55
55
  .fw
56
56
 
57
- Styleguide 23.2
57
+ Styleguide 25.2
58
58
 
59
59
  */
60
60
 
@@ -95,7 +95,7 @@ Corrispond to:
95
95
 
96
96
  width: 50% !important;
97
97
 
98
- Styleguide 23.3
98
+ Styleguide 25.3
99
99
 
100
100
  */
101
101
 
@@ -124,7 +124,7 @@ Some common classes for fixing the typography, to be used sparingly.
124
124
  .text-right # text-align: right
125
125
  .text-center # text-align: center
126
126
 
127
- Styleguide 23.4
127
+ Styleguide 25.4
128
128
 
129
129
  */
130
130
 
@@ -146,21 +146,18 @@ Simple class used for spriting.
146
146
 
147
147
  .s
148
148
 
149
- Styleguide 23.5
149
+ Styleguide 25.5
150
150
 
151
151
  */
152
152
 
153
153
  .s {
154
154
  @include transition(none);
155
155
  content: "";
156
- display: inline-block;
156
+ @include inline-block;
157
157
  font-style:normal;
158
158
  overflow:hidden;
159
159
  text-align:center;
160
160
  text-indent:-9999px;
161
- vertical-align:middle;
162
- zoom:1;
163
-
164
161
  }
165
162
 
166
163
  /*
@@ -176,7 +173,7 @@ All the text replacement classes from from [html5boilerplate](http://html5boiler
176
173
  .visuallyhidden
177
174
  .invisible
178
175
 
179
- Styleguide 23.6
176
+ Styleguide 25.6
180
177
 
181
178
  */
182
179