illusion 1.1.0 → 2.0.0

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.
@@ -0,0 +1,111 @@
1
+ // Variables for in this file
2
+ // If you want to change this number add the responsivemneu.scss file to your main
3
+ // SCSS file and define the variable to your new wisth first like so:
4
+ //
5
+ // $screenwidth: 800px;
6
+ // @import "responsivemenu";
7
+ //
8
+ // This way you don't have to touch this file
9
+
10
+ $screenwidth: 600px !default;
11
+
12
+ // Accessible hide
13
+ %accessible-hide {
14
+ position: absolute !important;
15
+ overflow: hidden !important;
16
+ clip: rect(0 0 0 0) !important;
17
+ height: 1px !important;
18
+ width: 1px !important;
19
+ margin: -1px !important;
20
+ padding: 0 !important;
21
+ border: 0 !important;
22
+ }
23
+
24
+ // Sticky
25
+ .sticky {
26
+ position: fixed !important;
27
+ top: 0 !important;
28
+ left: 0 !important;
29
+ right: 0 !important;
30
+ }
31
+
32
+ // Overflow
33
+ .bodyoverflowhidden {
34
+ position: relative;
35
+ overflow: hidden;
36
+ }
37
+
38
+ .menuoverflowauto {
39
+ max-height: 100%;
40
+ width: 100%;
41
+ overflow: auto;
42
+ }
43
+
44
+ // Absolute menu
45
+ .absolutemenu {
46
+ position: absolute !important;
47
+ top: 100% !important;
48
+ left: 0 !important;
49
+ right: 0 !important;
50
+ z-index: 99;
51
+ }
52
+
53
+ /* Extend the accessible hide class to the closed class class */
54
+ /* Only when JS is enabled since we add the closed class in the markup */
55
+ .js-enabled:not(.no-responsive-menu) {
56
+ .closed {
57
+ @extend %accessible-hide;
58
+ }
59
+ }
60
+
61
+ /* The menu itself */
62
+ .navigation_container {
63
+
64
+ li {
65
+ position: relative;
66
+
67
+ /* initially hide all li>ul so we get a small list when JS is disabled */
68
+ ul {
69
+ display: none;
70
+ }
71
+
72
+ /* And show them on active/current items */
73
+ &.active,
74
+ &.current {
75
+ & > ul {
76
+ display: block;
77
+ }
78
+ }
79
+ }
80
+
81
+ // Show li>ul on small screens when JS is enabled
82
+ &.initiated {
83
+ li ul {
84
+ display: block;
85
+ }
86
+ }
87
+
88
+ @media screen and (min-width: $screenwidth) {
89
+
90
+ // Add styling for parents to show it has children
91
+ li.parent > a:after {
92
+ content: " \25bc";
93
+ }
94
+
95
+ /* Hide li>ul when JS is enabled and screen is big */
96
+ &.initiated li ul,
97
+ li ul,
98
+ li.active ul {
99
+ display: none;
100
+ position: absolute;
101
+ left: 0;
102
+ top: 100%;
103
+ z-index: 9;
104
+ }
105
+
106
+ /* And show on hover */
107
+ li:hover > ul {
108
+ display: block;
109
+ }
110
+ }
111
+ }
metadata CHANGED
@@ -1,23 +1,23 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: illusion
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.1.0
4
+ version: 2.0.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Tom Janssens
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-08-28 00:00:00.000000000 Z
11
+ date: 2014-09-18 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
- name: shoulda
14
+ name: bundler
15
15
  requirement: !ruby/object:Gem::Requirement
16
16
  requirements:
17
17
  - - ">="
18
18
  - !ruby/object:Gem::Version
19
19
  version: '0'
20
- type: :development
20
+ type: :runtime
21
21
  prerelease: false
22
22
  version_requirements: !ruby/object:Gem::Requirement
23
23
  requirements:
@@ -25,47 +25,89 @@ dependencies:
25
25
  - !ruby/object:Gem::Version
26
26
  version: '0'
27
27
  - !ruby/object:Gem::Dependency
28
- name: rdoc
28
+ name: github-pages
29
29
  requirement: !ruby/object:Gem::Requirement
30
30
  requirements:
31
- - - "~>"
31
+ - - ">="
32
32
  - !ruby/object:Gem::Version
33
- version: '3.12'
34
- type: :development
33
+ version: '0'
34
+ type: :runtime
35
35
  prerelease: false
36
36
  version_requirements: !ruby/object:Gem::Requirement
37
37
  requirements:
38
- - - "~>"
38
+ - - ">="
39
39
  - !ruby/object:Gem::Version
40
- version: '3.12'
40
+ version: '0'
41
41
  - !ruby/object:Gem::Dependency
42
- name: bundler
42
+ name: susy
43
+ requirement: !ruby/object:Gem::Requirement
44
+ requirements:
45
+ - - ">="
46
+ - !ruby/object:Gem::Version
47
+ version: '0'
48
+ type: :runtime
49
+ prerelease: false
50
+ version_requirements: !ruby/object:Gem::Requirement
51
+ requirements:
52
+ - - ">="
53
+ - !ruby/object:Gem::Version
54
+ version: '0'
55
+ - !ruby/object:Gem::Dependency
56
+ name: illusion
57
+ requirement: !ruby/object:Gem::Requirement
58
+ requirements:
59
+ - - ">="
60
+ - !ruby/object:Gem::Version
61
+ version: '0'
62
+ type: :runtime
63
+ prerelease: false
64
+ version_requirements: !ruby/object:Gem::Requirement
65
+ requirements:
66
+ - - ">="
67
+ - !ruby/object:Gem::Version
68
+ version: '0'
69
+ - !ruby/object:Gem::Dependency
70
+ name: shoulda
43
71
  requirement: !ruby/object:Gem::Requirement
44
72
  requirements:
45
- - - "~>"
73
+ - - ">="
46
74
  - !ruby/object:Gem::Version
47
- version: '1.0'
48
- type: :development
75
+ version: '0'
76
+ type: :runtime
49
77
  prerelease: false
50
78
  version_requirements: !ruby/object:Gem::Requirement
51
79
  requirements:
52
- - - "~>"
80
+ - - ">="
53
81
  - !ruby/object:Gem::Version
54
- version: '1.0'
82
+ version: '0'
83
+ - !ruby/object:Gem::Dependency
84
+ name: rdoc
85
+ requirement: !ruby/object:Gem::Requirement
86
+ requirements:
87
+ - - ">="
88
+ - !ruby/object:Gem::Version
89
+ version: '0'
90
+ type: :runtime
91
+ prerelease: false
92
+ version_requirements: !ruby/object:Gem::Requirement
93
+ requirements:
94
+ - - ">="
95
+ - !ruby/object:Gem::Version
96
+ version: '0'
55
97
  - !ruby/object:Gem::Dependency
56
98
  name: jeweler
57
99
  requirement: !ruby/object:Gem::Requirement
58
100
  requirements:
59
- - - "~>"
101
+ - - ">="
60
102
  - !ruby/object:Gem::Version
61
- version: 2.0.1
62
- type: :development
103
+ version: '0'
104
+ type: :runtime
63
105
  prerelease: false
64
106
  version_requirements: !ruby/object:Gem::Requirement
65
107
  requirements:
66
- - - "~>"
108
+ - - ">="
67
109
  - !ruby/object:Gem::Version
68
- version: 2.0.1
110
+ version: '0'
69
111
  - !ruby/object:Gem::Dependency
70
112
  name: simplecov
71
113
  requirement: !ruby/object:Gem::Requirement
@@ -73,7 +115,7 @@ dependencies:
73
115
  - - ">="
74
116
  - !ruby/object:Gem::Version
75
117
  version: '0'
76
- type: :development
118
+ type: :runtime
77
119
  prerelease: false
78
120
  version_requirements: !ruby/object:Gem::Requirement
79
121
  requirements:
@@ -92,10 +134,13 @@ files:
92
134
  - README.md
93
135
  - lib/illusion.rb
94
136
  - sass/_illusion.scss
95
- - sass/illusion/_basics.scss
96
- - sass/illusion/_ie.scss
97
- - sass/illusion/_normalize.scss
98
- - sass/illusion/_reset.scss
137
+ - sass/illusion/mixins/_basics.scss
138
+ - sass/illusion/mixins/_breakpoint.scss
139
+ - sass/illusion/placeholders/_placeholders.scss
140
+ - sass/illusion/setup/_boxsizing.scss
141
+ - sass/illusion/variables/_variables.scss
142
+ - sass/illusion/vendor/_normalize.scss
143
+ - sass/illusion/vendor/_responsivemenu.scss
99
144
  homepage: http://github.com/timble/illusion
100
145
  licenses:
101
146
  - MIT
@@ -116,7 +161,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
116
161
  version: '0'
117
162
  requirements: []
118
163
  rubyforge_project:
119
- rubygems_version: 2.2.2
164
+ rubygems_version: 2.3.0
120
165
  signing_key:
121
166
  specification_version: 4
122
167
  summary: Sass mixins.
@@ -1,69 +0,0 @@
1
- $fix-mqs: false !default;
2
-
3
- @mixin respond-min($width) {
4
- // If we're outputting for a fixed media query set...
5
- @if $fix-mqs {
6
- // ...and if we should apply these rules...
7
- @if $fix-mqs >= $width {
8
- // ...output the content the user gave us.
9
- @content;
10
- }
11
- } @else {
12
- // Otherwise, output it using a regular media query
13
- @media screen and (min-width: $width) {
14
- @content;
15
- }
16
- }
17
- }
18
-
19
- @mixin respond-max($width) {
20
- // If we're outputting for a fixed media query set...
21
- @if $fix-mqs {
22
- // ...and if we should apply these rules...
23
- @if $fix-mqs <= $width {
24
- // ...output the content the user gave us.
25
- @content;
26
- }
27
- }
28
- @else {
29
- // Otherwise, output it using a regular media query
30
- @media screen and (max-width: $width) {
31
- @content;
32
- }
33
- }
34
- }
35
-
36
- @mixin respond-min-max($minwidth, $maxwidth) {
37
- // If we're outputting for a fixed media query set...
38
- @if $fix-mqs {
39
- // ...and if we should apply these rules...
40
- @if $fix-mqs <= $maxwidth {
41
- // ...output the content the user gave us.
42
- @content;
43
- }
44
- }
45
- @else {
46
- // Otherwise, output it using a regular media query
47
- @media screen and (min-width: $minwidth) and (max-width: $maxwidth) {
48
- @content;
49
- }
50
- }
51
- }
52
-
53
- $old-ie: false !default;
54
-
55
- @mixin old-ie {
56
- // Only use this content if we're dealing with old IE
57
- @if $old-ie {
58
- @content;
59
- }
60
- }
61
-
62
- $old-ie7: false !default;
63
-
64
- @mixin old-ie7 {
65
- // Only use this content if we're dealing with older IE
66
- @if $old-ie7 {
67
- @content;
68
- }
69
- }
@@ -1,227 +0,0 @@
1
- //
2
- // Reset CSS
3
- // Adapted from http://github.com/necolas/normalize.css
4
- // --------------------------------------------------
5
-
6
- // Display in IE6-9 and FF3
7
- // -------------------------
8
-
9
- article,
10
- aside,
11
- details,
12
- figcaption,
13
- figure,
14
- footer,
15
- header,
16
- hgroup,
17
- nav,
18
- section {
19
- display: block;
20
- }
21
-
22
- // Display block in IE6-9 and FF3
23
- // -------------------------
24
-
25
- audio,
26
- canvas,
27
- video {
28
- display: inline-block;
29
- *display: inline;
30
- *zoom: 1;
31
- }
32
-
33
- // Prevents modern browsers from displaying 'audio' without controls
34
- // -------------------------
35
-
36
- audio:not([controls]) {
37
- display: none;
38
- }
39
-
40
- // Base settings
41
- // -------------------------
42
-
43
- html {
44
- font-size: 100%;
45
- -webkit-text-size-adjust: 100%;
46
- -ms-text-size-adjust: 100%;
47
- }
48
-
49
- // Focus states
50
- a:focus {
51
- @include tab-focus();
52
- }
53
-
54
- // Hover & Active
55
- a:hover,
56
- a:active {
57
- outline: 0;
58
- }
59
-
60
- // Prevents sub and sup affecting line-height in all browsers
61
- // -------------------------
62
-
63
- sub,
64
- sup {
65
- position: relative;
66
- font-size: 75%;
67
- line-height: 0;
68
- vertical-align: baseline;
69
- }
70
-
71
- sup {
72
- top: -0.5em;
73
- }
74
-
75
- sub {
76
- bottom: -0.25em;
77
- }
78
-
79
- // Img border in a's and image quality
80
- // -------------------------
81
-
82
- img {
83
- /* Responsive images (ensure images don't scale beyond their parents) */
84
- max-width: 100%; /* Part 1: Set a maxium relative to the parent */
85
- width: auto\9; /* IE7-8 need help adjusting responsive images */
86
- height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
87
-
88
- vertical-align: middle;
89
- border: 0;
90
- -ms-interpolation-mode: bicubic;
91
- }
92
-
93
- // Prevent max-width from affecting Google Maps
94
- #map_canvas img,
95
- .google-maps img {
96
- max-width: none;
97
- }
98
-
99
- // Forms
100
- // -------------------------
101
-
102
- // Font size in all browsers, margin changes, misc consistency
103
- button,
104
- input,
105
- select,
106
- textarea {
107
- margin: 0;
108
- font-size: 100%;
109
- vertical-align: middle;
110
- }
111
-
112
- button,
113
- input {
114
- *overflow: visible; // Inner spacing ie IE6/7
115
- line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
116
- }
117
-
118
- button::-moz-focus-inner,
119
- input::-moz-focus-inner {
120
- // Inner padding and border oddities in FF3/4
121
- padding: 0;
122
- border: 0;
123
- }
124
-
125
- button,
126
- html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
127
- input[type="reset"],
128
- input[type="submit"] {
129
- -webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS.
130
- cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
131
- }
132
-
133
- label,
134
- select,
135
- button,
136
- input[type="button"],
137
- input[type="reset"],
138
- input[type="submit"],
139
- input[type="radio"],
140
- input[type="checkbox"] {
141
- cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
142
- }
143
-
144
- input[type="search"] {
145
- // Appearance in Safari/Chrome
146
- @include box-sizing(content-box);
147
- -webkit-appearance: textfield;
148
- }
149
-
150
- input[type="search"]::-webkit-search-decoration,
151
- input[type="search"]::-webkit-search-cancel-button {
152
- -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
153
- }
154
-
155
- textarea {
156
- overflow: auto; // Remove vertical scrollbar in IE6-9
157
- vertical-align: top; // Readability and alignment cross-browser
158
- }
159
-
160
- // Printing
161
- // -------------------------
162
- // Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
163
-
164
- @media print {
165
-
166
- * {
167
- text-shadow: none !important;
168
- color: #000 !important; // Black prints faster: h5bp.com/s
169
- background: transparent !important;
170
- box-shadow: none !important;
171
- }
172
-
173
- a,
174
- a:visited {
175
- text-decoration: underline;
176
- }
177
-
178
- a[href]:after {
179
- content: " (" attr(href) ")";
180
- }
181
-
182
- abbr[title]:after {
183
- content: " (" attr(title) ")";
184
- }
185
-
186
- // Don't show links for images, or javascript/internal links
187
- .ir a:after,
188
- a[href^="javascript:"]:after,
189
- a[href^="#"]:after {
190
- content: "";
191
- }
192
-
193
- pre,
194
- blockquote {
195
- border: 1px solid #999;
196
- page-break-inside: avoid;
197
- }
198
-
199
- thead {
200
- display: table-header-group; // h5bp.com/t
201
- }
202
-
203
- tr,
204
- img {
205
- page-break-inside: avoid;
206
- }
207
-
208
- img {
209
- max-width: 100% !important;
210
- }
211
-
212
- @page {
213
- margin: 0.5cm;
214
- }
215
-
216
- p,
217
- h2,
218
- h3 {
219
- orphans: 3;
220
- widows: 3;
221
- }
222
-
223
- h2,
224
- h3 {
225
- page-break-after: avoid;
226
- }
227
- }