rapido-css 0.1.3 → 0.1.4
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/stylesheets/_default-styles.scss +36 -32
- data/stylesheets/components/_captions.scss +391 -45
- data/stylesheets/components/_dropdowns.scss +5 -1
- data/stylesheets/components/_modals.scss +27 -9
- data/stylesheets/components/_navs.scss +56 -12
- data/stylesheets/components/_off-canvas.scss +264 -0
- data/stylesheets/components/_sliders.scss +4 -0
- data/stylesheets/components/_tabs.scss +5 -1
- data/stylesheets/components/_type.scss +4 -2
- data/stylesheets/rapido.min.scss +1 -0
- data/stylesheets/rapido.scss +2 -2
- data/stylesheets/settings/_base.scss +31 -3
- data/stylesheets/settings/_colors.scss +2 -1
- data/stylesheets/settings/_components.scss +51 -51
- data/stylesheets/settings/_dimensions.scss +12 -15
- data/stylesheets/settings/_effects.scss +12 -4
- data/stylesheets/utilities/_animations.scss +5 -12
- data/stylesheets/utilities/_debug.scss +35 -5
- data/stylesheets/utilities/_mixins.scss +1 -1
- metadata +4 -3
- data/stylesheets/components/_responsive-navs.scss +0 -233
|
@@ -22,7 +22,7 @@ Enable or disable components, so you can have in the css only what you need.
|
|
|
22
22
|
$modal: true # components/_modal.scss
|
|
23
23
|
$modal-buttons: true # components/_modal.scss
|
|
24
24
|
$modal-thumbs: true # components/_modal.scss
|
|
25
|
-
$
|
|
25
|
+
$offcanvas: true # components/_off-canvas.scss
|
|
26
26
|
$navs: true # components/_navs.scss
|
|
27
27
|
$pager: true # components/_pager.scss
|
|
28
28
|
$pagination: true # components/_pagination.scss
|
|
@@ -37,38 +37,38 @@ Styleguide 27
|
|
|
37
37
|
|
|
38
38
|
*/
|
|
39
39
|
|
|
40
|
-
$alerts: true
|
|
41
|
-
$breadcrumbs: true
|
|
42
|
-
$button-groups: true
|
|
43
|
-
$buttons: true
|
|
44
|
-
$captions: true
|
|
45
|
-
$close: true
|
|
46
|
-
$dropdowns: true
|
|
47
|
-
|
|
48
|
-
$forms: true
|
|
49
|
-
$forms-append: true
|
|
50
|
-
$forms-grid: true
|
|
51
|
-
$forms-aligned: true
|
|
52
|
-
$forms-inline: true
|
|
53
|
-
|
|
54
|
-
$grids: true
|
|
55
|
-
$grids-helpers: true
|
|
56
|
-
|
|
57
|
-
$labels: true
|
|
58
|
-
$
|
|
59
|
-
$navs: true
|
|
60
|
-
$pager: true
|
|
61
|
-
$pagination: true
|
|
62
|
-
$tables: true
|
|
63
|
-
|
|
64
|
-
$tabs: true
|
|
65
|
-
$slider: true
|
|
66
|
-
$modal: true
|
|
67
|
-
$modal-buttons: true
|
|
68
|
-
$modal-thumbs: true
|
|
69
|
-
|
|
70
|
-
$sprites: true
|
|
71
|
-
$width-helper-classes: true
|
|
40
|
+
$alerts: true !default;
|
|
41
|
+
$breadcrumbs: true !default;
|
|
42
|
+
$button-groups: true !default;
|
|
43
|
+
$buttons: true !default;
|
|
44
|
+
$captions: true !default;
|
|
45
|
+
$close: true !default;
|
|
46
|
+
$dropdowns: true !default;
|
|
47
|
+
|
|
48
|
+
$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
|
+
$grids-helpers: true !default;
|
|
56
|
+
|
|
57
|
+
$labels: true !default;
|
|
58
|
+
$offcanvas: true !default;
|
|
59
|
+
$navs: true !default;
|
|
60
|
+
$pager: true !default;
|
|
61
|
+
$pagination: true !default;
|
|
62
|
+
$tables: true !default;
|
|
63
|
+
|
|
64
|
+
$tabs: true !default;
|
|
65
|
+
$slider: true !default;
|
|
66
|
+
$modal: true !default;
|
|
67
|
+
$modal-buttons: true !default;
|
|
68
|
+
$modal-thumbs: true !default;
|
|
69
|
+
|
|
70
|
+
$sprites: true !default;
|
|
71
|
+
$width-helper-classes: true !default;
|
|
72
72
|
|
|
73
73
|
/*
|
|
74
74
|
|
|
@@ -81,8 +81,8 @@ Styleguide 27.1
|
|
|
81
81
|
|
|
82
82
|
*/
|
|
83
83
|
|
|
84
|
-
$s-sprite-dimensions: true
|
|
85
|
-
$s-layout: smart
|
|
84
|
+
$s-sprite-dimensions: true !default;
|
|
85
|
+
$s-layout: smart !default;
|
|
86
86
|
|
|
87
87
|
|
|
88
88
|
/*
|
|
@@ -93,26 +93,26 @@ Icon Fonts ready to use with the mixin `icon-font`.
|
|
|
93
93
|
Font files are not required, is used the [We Love Icon Fonts](http://weloveiconfonts.com/) CDN.
|
|
94
94
|
|
|
95
95
|
|
|
96
|
-
$use-fontawesome: true
|
|
96
|
+
$use-fontawesome: true # http://fortawesome.github.io/Font-Awesome/
|
|
97
97
|
|
|
98
|
-
$use-brandico: false
|
|
99
|
-
$use-entypo: false
|
|
100
|
-
$use-fontelico: false
|
|
101
|
-
$use-maki: false
|
|
102
|
-
$use-openweb-icons: false
|
|
103
|
-
$use-typicons: false
|
|
104
|
-
$use-zocial: false
|
|
98
|
+
$use-brandico: false # http://fontello.github.io/brandico.font/demo.html
|
|
99
|
+
$use-entypo: false # http://www.entypo.com/
|
|
100
|
+
$use-fontelico: false # https://github.com/fontello/fontelico.font
|
|
101
|
+
$use-maki: false # http://www.mapbox.com/maki/
|
|
102
|
+
$use-openweb-icons: false # http://pfefferle.github.io/openwebicons/
|
|
103
|
+
$use-typicons: false # http://typicons.com/
|
|
104
|
+
$use-zocial: false # http://zocial.smcllns.com/
|
|
105
105
|
|
|
106
106
|
Styleguide 27.2
|
|
107
107
|
|
|
108
108
|
*/
|
|
109
109
|
|
|
110
|
-
$use-fontawesome: true
|
|
110
|
+
$use-fontawesome: true !default;
|
|
111
111
|
|
|
112
|
-
$use-brandico: false
|
|
113
|
-
$use-entypo: false
|
|
114
|
-
$use-fontelico: false
|
|
115
|
-
$use-maki: false
|
|
116
|
-
$use-openweb-icons: false
|
|
117
|
-
$use-typicons: false
|
|
118
|
-
$use-zocial: false
|
|
112
|
+
$use-brandico: false !default;
|
|
113
|
+
$use-entypo: false !default;
|
|
114
|
+
$use-fontelico: false !default;
|
|
115
|
+
$use-maki: false !default;
|
|
116
|
+
$use-openweb-icons: false !default;
|
|
117
|
+
$use-typicons: false !default;
|
|
118
|
+
$use-zocial: false !default;
|
|
@@ -255,27 +255,22 @@ $container-style: fluid
|
|
|
255
255
|
|
|
256
256
|
/*
|
|
257
257
|
|
|
258
|
-
|
|
258
|
+
Off-Canvas Options
|
|
259
259
|
|
|
260
|
-
$
|
|
261
|
-
$
|
|
262
|
-
$
|
|
263
|
-
$
|
|
260
|
+
$offcanvas-width: 300px # Width of the sidebar
|
|
261
|
+
$offcanvas-direction: left # On what side appear
|
|
262
|
+
$offcanvas-dim: true # Dim over the content on open
|
|
263
|
+
$offcanvas-effect: slide # cover, reveal, push, slide
|
|
264
264
|
|
|
265
|
-
|
|
266
|
-
$navs-responsive-inside-wrapper: '.internal-wrapper'
|
|
267
|
-
|
|
268
|
-
Styleguide 28.8
|
|
265
|
+
Styleguide 15.1
|
|
269
266
|
|
|
270
267
|
*/
|
|
271
268
|
|
|
272
|
-
$navs-responsive-breakpoint: palm !default;
|
|
273
|
-
$navs-responsive-type: slide !default;
|
|
274
|
-
$navs-responsive-dropdown-pos: right !default;
|
|
275
|
-
$navs-responsive-offset: 70% !default;
|
|
276
269
|
|
|
277
|
-
$
|
|
278
|
-
$
|
|
270
|
+
$offcanvas-width: 300px !default;
|
|
271
|
+
$offcanvas-direction: left !default;
|
|
272
|
+
$offcanvas-dim: true !default;
|
|
273
|
+
$offcanvas-effect: slide !default;
|
|
279
274
|
|
|
280
275
|
/*
|
|
281
276
|
|
|
@@ -283,6 +278,7 @@ Z-index
|
|
|
283
278
|
|
|
284
279
|
Default settings for overlay components, taken from Bootstrap.
|
|
285
280
|
|
|
281
|
+
$zindex-offcanvas: 990 # OffCanvas
|
|
286
282
|
$zindex-dropdown: 1000 # Dropdowns
|
|
287
283
|
$zindex-popover: 1010 # Popovers
|
|
288
284
|
$zindex-tooltip: 1030 # Tooltips
|
|
@@ -294,6 +290,7 @@ Styleguide 28.9
|
|
|
294
290
|
*/
|
|
295
291
|
|
|
296
292
|
|
|
293
|
+
$zindex-offcanvas: 990 !default;
|
|
297
294
|
$zindex-dropdown: 1000 !default;
|
|
298
295
|
$zindex-popover: 1010 !default;
|
|
299
296
|
$zindex-tooltip: 1030 !default;
|
|
@@ -14,16 +14,21 @@ If true it generate a placeholder class for every animation with the default set
|
|
|
14
14
|
|
|
15
15
|
Base settings for animations
|
|
16
16
|
|
|
17
|
-
$animations-duration: .
|
|
17
|
+
$animations-duration: .50s # Duration
|
|
18
18
|
$animations-delay: 0s # Start delay
|
|
19
19
|
$animations-function: ease-out # Easing
|
|
20
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:
|
|
24
|
+
$default-transition-duration: .15s
|
|
25
25
|
$default-transition-function: $animations-function
|
|
26
26
|
|
|
27
|
+
Durations specifics for some modules.
|
|
28
|
+
|
|
29
|
+
$caption-animations-duration: .50s
|
|
30
|
+
|
|
31
|
+
|
|
27
32
|
Styleguide 20.1
|
|
28
33
|
|
|
29
34
|
*/
|
|
@@ -31,10 +36,13 @@ Styleguide 20.1
|
|
|
31
36
|
$animations: fadeIn, fadeOut !default;
|
|
32
37
|
$animations-classes: true !default;
|
|
33
38
|
|
|
34
|
-
$animations-duration: .
|
|
39
|
+
$animations-duration: .50s !default;
|
|
35
40
|
$animations-delay: null !default;
|
|
36
41
|
$animations-function: ease-out !default;
|
|
37
42
|
$animations-mode: both !default;
|
|
38
43
|
|
|
39
|
-
$default-transition-duration:
|
|
44
|
+
$default-transition-duration: .15s !default;
|
|
40
45
|
$default-transition-function: toBezier($animations-function) !default;
|
|
46
|
+
|
|
47
|
+
$caption-animations-duration: .50s !default;
|
|
48
|
+
$offcanvas-animations-duration: .40s !default;
|
|
@@ -148,18 +148,11 @@ Styleguide 20.4
|
|
|
148
148
|
|
|
149
149
|
@if $animations-classes {
|
|
150
150
|
$delays: 0.25s, 0.50s, 0.75s, 1.00s, 1.25s, 1.50s, 1.75s, 2.00s;
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
@if($delay == 1.00s) { $delay-stripped: 100; }
|
|
157
|
-
@if($delay == 1.25s) { $delay-stripped: 125; }
|
|
158
|
-
@if($delay == 1.50s) { $delay-stripped: 150; }
|
|
159
|
-
@if($delay == 1.75s) { $delay-stripped: 175; }
|
|
160
|
-
@if($delay == 2.00s) { $delay-stripped: 200; }
|
|
161
|
-
.delay-#{$delay-stripped} {
|
|
162
|
-
@include experimental(animation-delay, $delay);
|
|
151
|
+
$delays-classes: 25, 50, 75, 100, 125, 150, 175, 200;
|
|
152
|
+
|
|
153
|
+
@for $i from 0 to length($delays) {
|
|
154
|
+
.delay-#{nth($delays-classes, ($i + 1))} {
|
|
155
|
+
@include experimental(animation-delay, nth($delays, ($i + 1)));
|
|
163
156
|
}
|
|
164
157
|
}
|
|
165
158
|
}
|
|
@@ -2,16 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
Debug mode
|
|
4
4
|
|
|
5
|
-
Add different background colors and border for elements with different
|
|
6
|
-
|
|
5
|
+
Add different background colors and border for elements with different
|
|
6
|
+
proprieties (has class, has id, has title, ect.), usefull for debugging code
|
|
7
|
+
and finding errors. Taken form [Inuit](https://github.com/csswizardry/inuit.css).
|
|
7
8
|
|
|
8
|
-
Enable it with `$debug-
|
|
9
|
+
Enable it with `$debug-html: true;`.
|
|
9
10
|
|
|
10
11
|
Styleguide 21
|
|
11
12
|
|
|
12
13
|
*/
|
|
13
14
|
|
|
14
|
-
@if $debug-
|
|
15
|
+
@if $debug-html {
|
|
15
16
|
|
|
16
17
|
:empty { outline:5px solid yellow;}
|
|
17
18
|
|
|
@@ -68,4 +69,33 @@ Styleguide 21
|
|
|
68
69
|
div.btn-group:last-child > .btn { background: teal !important; }
|
|
69
70
|
}
|
|
70
71
|
|
|
71
|
-
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/*
|
|
75
|
+
|
|
76
|
+
Outlines
|
|
77
|
+
|
|
78
|
+
More simple than `$debug-outlines`, it outline all elements in different colors
|
|
79
|
+
to help differentiate them and visualize their placement on the page.
|
|
80
|
+
Taken form [Pesticide](https://github.com/mrmrs/pesticide).
|
|
81
|
+
|
|
82
|
+
Enable it with `$debug-outlines: true;`.
|
|
83
|
+
|
|
84
|
+
Styleguide 21.1
|
|
85
|
+
|
|
86
|
+
*/
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
@if $debug-outlines == true {
|
|
90
|
+
$selector: a, abbr, address, article, blockquote, caption, code, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, img, input, label, legend, li, nav, ol, option, p, pre, progress, s, samp, sbd, section, select, code, small, span, sub, submit, sup, table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, var;
|
|
91
|
+
$color: crimson, aqua, aquamarine, blueviolet, cadetblue, cornflowerblue, coral, orchid, darkcyan, darkmagenta, darkorange, deeppink, gold, goldenrod, greenyellow, lavender, lightblue, lightcoral, lightcyan, lightgreen, lightsalmon, lightseagreen, lightskyblue, mediumaquamarine, mediumorchid, orangered, palevioletred, plum, purple, royalblue, tomato, turquoise, violet, yellow, sandybrown, brown, powderblue, palegreen, navy, mediumpurple, mediumslateblue, mintcream, mistyrose, moccasin, black, gray, dodgerblue, dimgray, deepskyblue, green, lightsteelblue, lightslategray, lime, limegreen, firebrick;
|
|
92
|
+
#{$selector} {
|
|
93
|
+
outline-width: 1px;
|
|
94
|
+
outline-style: solid;
|
|
95
|
+
}
|
|
96
|
+
@for $i from 0 to length($selector) {
|
|
97
|
+
#{nth($selector, ($i + 1))} {
|
|
98
|
+
outline-color: nth($color, ($i + 1));
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
@@ -763,6 +763,6 @@ Styleguide 23.22
|
|
|
763
763
|
$function: $animations-function,
|
|
764
764
|
$mode: $animations-mode
|
|
765
765
|
) {
|
|
766
|
-
@include experimental(animation, $name $duration $delay $function $mode);
|
|
766
|
+
@include experimental(animation, $name $duration $delay toBezier($function) $mode);
|
|
767
767
|
}
|
|
768
768
|
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: rapido-css
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.4
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2014-01-
|
|
12
|
+
date: 2014-01-07 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: susy
|
|
@@ -51,13 +51,14 @@ files:
|
|
|
51
51
|
- stylesheets/components/_labels.scss
|
|
52
52
|
- stylesheets/components/_modals.scss
|
|
53
53
|
- stylesheets/components/_navs.scss
|
|
54
|
+
- stylesheets/components/_off-canvas.scss
|
|
54
55
|
- stylesheets/components/_pager.scss
|
|
55
56
|
- stylesheets/components/_pagination.scss
|
|
56
|
-
- stylesheets/components/_responsive-navs.scss
|
|
57
57
|
- stylesheets/components/_sliders.scss
|
|
58
58
|
- stylesheets/components/_tables.scss
|
|
59
59
|
- stylesheets/components/_tabs.scss
|
|
60
60
|
- stylesheets/components/_type.scss
|
|
61
|
+
- stylesheets/rapido.min.scss
|
|
61
62
|
- stylesheets/rapido.scss
|
|
62
63
|
- stylesheets/settings/_base.scss
|
|
63
64
|
- stylesheets/settings/_colors.scss
|
|
@@ -1,233 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
|
|
3
|
-
Responsive Navs
|
|
4
|
-
|
|
5
|
-
The main nav can be made fully responsive (with two layouts available) with js and some extra elements for better styling.
|
|
6
|
-
|
|
7
|
-
Styleguide 15
|
|
8
|
-
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
@if $navs-responsive {
|
|
12
|
-
|
|
13
|
-
.nav--responsive.active { @extend %nav--responsive !optional; }
|
|
14
|
-
.nav--responsive.close { max-height: none; }
|
|
15
|
-
|
|
16
|
-
#nav-toggle {
|
|
17
|
-
@extend %nav__toggle !optional;
|
|
18
|
-
display: none;
|
|
19
|
-
float: $navs-responsive-dropdown-pos;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
@include media($navs-responsive-breakpoint) {
|
|
23
|
-
|
|
24
|
-
#nav-toggle { display: block; }
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
// Reset styling of normal nav
|
|
28
|
-
.nav.nav--responsive {
|
|
29
|
-
|
|
30
|
-
display: block;
|
|
31
|
-
margin: 0;
|
|
32
|
-
overflow: hidden;
|
|
33
|
-
zoom: 1;
|
|
34
|
-
|
|
35
|
-
* {
|
|
36
|
-
@include border-radius(0);
|
|
37
|
-
background: transparent;
|
|
38
|
-
border: 0;
|
|
39
|
-
display: block;
|
|
40
|
-
float: none;
|
|
41
|
-
margin: 0;
|
|
42
|
-
padding: 0;
|
|
43
|
-
position: static;
|
|
44
|
-
text-align: left;
|
|
45
|
-
width: 100%;
|
|
46
|
-
max-height: $dropdowns-height;
|
|
47
|
-
opacity: 1;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
/*
|
|
52
|
-
|
|
53
|
-
SlideIn Layout
|
|
54
|
-
|
|
55
|
-
Start by adding `.nav--responsive` to the nav and a container with `#nav-origin`.
|
|
56
|
-
|
|
57
|
-
Example: a simple inline nav with 3 dropdowns:
|
|
58
|
-
|
|
59
|
-
<div id="nav-origin">
|
|
60
|
-
<nav class="nav nav--inline nav--btn nav--responsive" id="nav">
|
|
61
|
-
<ul>
|
|
62
|
-
<li class="dropdown">
|
|
63
|
-
<a href="#" class="dropdown__toggle " data-toggle="dropdown">
|
|
64
|
-
Dropdown 1
|
|
65
|
-
</a>
|
|
66
|
-
<ul class="dropdown__menu ">
|
|
67
|
-
<li><a href="#">Dropdown 1 - Sub 1</a></li>
|
|
68
|
-
<li><a href="#">Dropdown 1 - Sub 2</a></li>
|
|
69
|
-
<li><a href="#">Dropdown 1 - Sub 2</a></li>
|
|
70
|
-
</ul>
|
|
71
|
-
</li>
|
|
72
|
-
<li class="dropdown">
|
|
73
|
-
<a href="#" class="dropdown__toggle" data-toggle="dropdown">
|
|
74
|
-
Dropdown 2
|
|
75
|
-
</a>
|
|
76
|
-
<ul class="dropdown__menu">
|
|
77
|
-
<li><a href="#">Dropdown 2 - Sub 1</a></li>
|
|
78
|
-
<li><a href="#">Dropdown 2 - Sub 2</a></li>
|
|
79
|
-
<li class="divider"></li>
|
|
80
|
-
<li><a href="#">Dropdown 2 - Sub 4</a></li>
|
|
81
|
-
</ul>
|
|
82
|
-
</li>
|
|
83
|
-
<li class="dropdown">
|
|
84
|
-
<a href="#" class="dropdown__toggle " data-toggle="dropdown">
|
|
85
|
-
Dropdown 3
|
|
86
|
-
</a>
|
|
87
|
-
<ul class="dropdown__menu ">
|
|
88
|
-
<li><a href="#">Dropdown 3 - Sub 1</a></li>
|
|
89
|
-
<li><a href="#">Dropdown 3 - Sub 2</a></li>
|
|
90
|
-
<li><a href="#">Dropdown 3 - Sub 3</a></li>
|
|
91
|
-
<li><a href="#">Dropdown 3 - Sub 4</a></li>
|
|
92
|
-
</ul>
|
|
93
|
-
</li>
|
|
94
|
-
</ul>
|
|
95
|
-
</nav>
|
|
96
|
-
</div>
|
|
97
|
-
|
|
98
|
-
Then add and empty div with `#nav-destination` for where the nav html will be moved when the media query kick in.
|
|
99
|
-
|
|
100
|
-
<div id="nav-destination"></div>
|
|
101
|
-
|
|
102
|
-
At the bottom of the page add `responsive-nav.js`. This is a modified version of
|
|
103
|
-
[Responsive Nav](http://responsive-nav.com/) with extra options.
|
|
104
|
-
|
|
105
|
-
<script src="//rawgithub.com/raffone/responsive-nav.js/master/responsive-nav.js"></script>
|
|
106
|
-
|
|
107
|
-
And finally in your js file add:
|
|
108
|
-
|
|
109
|
-
// Enable responsive nav
|
|
110
|
-
var navigation = responsiveNav("#nav");
|
|
111
|
-
|
|
112
|
-
// Move html on breakpoint
|
|
113
|
-
function moveNavbar() {
|
|
114
|
-
if ( $(".nav--responsive").css("overflow") == 'hidden' ) {
|
|
115
|
-
$("#nav-destination").append($("#nav-origin .nav"));
|
|
116
|
-
} else {
|
|
117
|
-
$("#nav-origin").append($("#nav-destination .nav"));
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
moveNavbar();
|
|
122
|
-
$(window).resize(function() { moveNavbar(); });
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
That's it, when the with of the page reace the breakpoint for the nav defined with
|
|
126
|
-
`$navs-responsive-breakpoint` the html will be moved to the destination.
|
|
127
|
-
|
|
128
|
-
Styleguide 15.1
|
|
129
|
-
|
|
130
|
-
*/
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
@if $navs-responsive-type == 'slide' {
|
|
134
|
-
|
|
135
|
-
.nav--responsive {
|
|
136
|
-
clip: rect(0 0 0 0);
|
|
137
|
-
max-height: 0;
|
|
138
|
-
width: 100%;
|
|
139
|
-
|
|
140
|
-
&.opened {
|
|
141
|
-
max-height: 9999px;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
/*
|
|
149
|
-
|
|
150
|
-
Offset Layout
|
|
151
|
-
|
|
152
|
-
First enable the layout:
|
|
153
|
-
|
|
154
|
-
$navs-responsive-type: 'off-canvas';
|
|
155
|
-
|
|
156
|
-
The offset layout require two more wrappers `.external-wrapper` and `.internal-wrapper`, example below:
|
|
157
|
-
|
|
158
|
-
<div class="external-wrapper">
|
|
159
|
-
<div id="nav-destination"></div>
|
|
160
|
-
<div class="internal-wrapper">
|
|
161
|
-
<div id="nav-origin">
|
|
162
|
-
…
|
|
163
|
-
</div>
|
|
164
|
-
[rest of the page…]
|
|
165
|
-
</div>
|
|
166
|
-
</div>
|
|
167
|
-
|
|
168
|
-
Add this js instead of `var navigation = responsiveNav("#nav");`:
|
|
169
|
-
|
|
170
|
-
var navigation = responsiveNav("#nav", {
|
|
171
|
-
animate: false,
|
|
172
|
-
offcanvas: true,
|
|
173
|
-
open: function(){
|
|
174
|
-
$("body").addClass("nav-open");
|
|
175
|
-
},
|
|
176
|
-
close: function(){
|
|
177
|
-
$("body").removeClass("nav-open");
|
|
178
|
-
}
|
|
179
|
-
});
|
|
180
|
-
|
|
181
|
-
Styleguide 15.2
|
|
182
|
-
|
|
183
|
-
*/
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
@if $navs-responsive-type == 'off-canvas' {
|
|
187
|
-
|
|
188
|
-
// Wrappers
|
|
189
|
-
#{$navs-responsive-outside-wrapper},
|
|
190
|
-
#{$navs-responsive-inside-wrapper} {
|
|
191
|
-
position: relative;
|
|
192
|
-
width: 100%;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
#{$navs-responsive-outside-wrapper} {
|
|
196
|
-
overflow-x: hidden;
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
// Transitions
|
|
200
|
-
#{$navs-responsive-inside-wrapper},
|
|
201
|
-
.nav--responsive {
|
|
202
|
-
@include transition();
|
|
203
|
-
@include backface-visibility(hidden);
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
// Animations
|
|
208
|
-
#{$navs-responsive-inside-wrapper} {
|
|
209
|
-
@include transform(translate3d(0,0,0));
|
|
210
|
-
left: 0;
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
.nav--responsive {
|
|
214
|
-
@include position(absolute, 0px 0px 0px 0);
|
|
215
|
-
@include transform(translate3d(100%,0,0));
|
|
216
|
-
height: 100%;
|
|
217
|
-
width: $navs-responsive-offset;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
.nav-open {
|
|
221
|
-
#{$navs-responsive-inside-wrapper} {
|
|
222
|
-
@include transform(translate3d((0 - $navs-responsive-offset),0,0));
|
|
223
|
-
position: relative;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
.nav--responsive {
|
|
227
|
-
@include transform(translate3d(0,0,0));
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
}
|
|
232
|
-
}
|
|
233
|
-
}
|