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.
- checksums.yaml +4 -4
- data/sass/_illusion.scss +11 -3
- data/sass/illusion/{_basics.scss → mixins/_basics.scss} +125 -16
- data/sass/illusion/mixins/_breakpoint.scss +75 -0
- data/sass/illusion/placeholders/_placeholders.scss +17 -0
- data/sass/illusion/setup/_boxsizing.scss +10 -0
- data/sass/illusion/variables/_variables.scss +62 -0
- data/sass/illusion/vendor/_normalize.scss +425 -0
- data/sass/illusion/vendor/_responsivemenu.scss +111 -0
- metadata +72 -27
- data/sass/illusion/_ie.scss +0 -69
- data/sass/illusion/_normalize.scss +0 -227
- data/sass/illusion/_reset.scss +0 -48
@@ -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:
|
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-
|
11
|
+
date: 2014-09-18 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
|
-
name:
|
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: :
|
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:
|
28
|
+
name: github-pages
|
29
29
|
requirement: !ruby/object:Gem::Requirement
|
30
30
|
requirements:
|
31
|
-
- - "
|
31
|
+
- - ">="
|
32
32
|
- !ruby/object:Gem::Version
|
33
|
-
version: '
|
34
|
-
type: :
|
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: '
|
40
|
+
version: '0'
|
41
41
|
- !ruby/object:Gem::Dependency
|
42
|
-
name:
|
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: '
|
48
|
-
type: :
|
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: '
|
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:
|
62
|
-
type: :
|
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:
|
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: :
|
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/
|
97
|
-
- sass/illusion/
|
98
|
-
- sass/illusion/
|
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.
|
164
|
+
rubygems_version: 2.3.0
|
120
165
|
signing_key:
|
121
166
|
specification_version: 4
|
122
167
|
summary: Sass mixins.
|
data/sass/illusion/_ie.scss
DELETED
@@ -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
|
-
}
|