rapido-css 0.1.6 → 0.1.7

Sign up to get free protection for your applications and to get access to all the features.
@@ -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