framous 0.2.5 → 0.3
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/CHANGELOG.mkdn +4 -0
- data/README.md +2 -21
- data/lib/framous.rb +0 -1
- data/templates/project/_settings.scss +92 -0
- data/templates/project/index.html +18 -18
- data/templates/project/manifest.rb +7 -9
- data/templates/project/screen.scss +3 -63
- metadata +20 -41
- data/stylesheets/_framous.scss +0 -13
- data/stylesheets/framous/base/_forms.scss +0 -128
- data/stylesheets/framous/base/_framous-base.scss +0 -11
- data/stylesheets/framous/base/_icons.scss +0 -27
- data/stylesheets/framous/base/_modular-scale.scss +0 -220
- data/stylesheets/framous/base/_settings.scss +0 -70
- data/stylesheets/framous/base/_table.scss +0 -120
- data/stylesheets/framous/base/_tables.scss +0 -120
- data/stylesheets/framous/base/_typography.scss +0 -213
- data/stylesheets/framous/grid/_framous-grid.scss +0 -9
- data/stylesheets/framous/grid/_functions.scss +0 -39
- data/stylesheets/framous/grid/_grid.scss +0 -201
- data/stylesheets/framous/grid/_settings.scss +0 -42
- data/stylesheets/framous/mixins/_framous-mixins.scss +0 -9
- data/stylesheets/framous/mixins/_hidpi-media-query.scss +0 -22
- data/stylesheets/framous/mixins/_image-rendering.scss +0 -17
- data/stylesheets/framous/mixins/_linear-gradient.scss +0 -47
- data/stylesheets/framous/mixins/_position.scss +0 -46
- data/templates/project/_base.scss +0 -83
- data/templates/project/_print.scss +0 -21
- data/templates/project/_reset.scss +0 -410
- data/templates/project/sample.html +0 -421
@@ -1,42 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Settings.scss
|
3
|
-
//
|
4
|
-
|
5
|
-
//
|
6
|
-
// 1. Responsive Grid
|
7
|
-
//
|
8
|
-
|
9
|
-
// Column width
|
10
|
-
$column: 145px !default;
|
11
|
-
// Gutter between each two columns
|
12
|
-
$gutter: 9px !default;
|
13
|
-
// Total number of columns in the grid (Total Columns For Main Container)
|
14
|
-
$grid-columns: 12 !default;
|
15
|
-
// Max-width of the outer container
|
16
|
-
$max-width: 1024px !default;
|
17
|
-
// Makes all elements have a border-box layout
|
18
|
-
$border-box-sizing: true !default;
|
19
|
-
// Default @media feature for the breakpoint() mixin
|
20
|
-
$default-feature: min-width;
|
21
|
-
|
22
|
-
//
|
23
|
-
// 2. Responsive Breakpoints
|
24
|
-
// @see http://css-tricks.com/snippets/css/media-queries-for-standard-devices
|
25
|
-
//
|
26
|
-
|
27
|
-
// Small screens
|
28
|
-
$small: min-width 320px max-width 479px !default;
|
29
|
-
// Smartphones (portrait)
|
30
|
-
$phone-portrait: max-device-width 320px !default;
|
31
|
-
// Smartphones (landscape)
|
32
|
-
$phone-landscape: max-device-width 480px !default;
|
33
|
-
// iPads (portrait and landscape)
|
34
|
-
$medium: min-device-width 768px !default;
|
35
|
-
// iPads (portrait)
|
36
|
-
$ipad-portrait: max-device-width 768px orientation portrait !default;
|
37
|
-
// iPads (landscape)
|
38
|
-
$ipad-landscape: max-device-width 1024px orientation landscape !default;
|
39
|
-
// Desktops and laptops
|
40
|
-
$desktop: min-width 1024px !default;
|
41
|
-
// iPhone 4
|
42
|
-
$retina: -webkit-min-device-pixel-ratio 1.5 min-device-pixel-ratio 1.5 !default;
|
@@ -1,22 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// HI DPI Media Query.scss
|
3
|
-
//
|
4
|
-
|
5
|
-
// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
|
6
|
-
@mixin image-2x($image, $width, $height) {
|
7
|
-
@media (min--moz-device-pixel-ratio: 1.3),
|
8
|
-
(-o-min-device-pixel-ratio: 2.6/2),
|
9
|
-
(-webkit-min-device-pixel-ratio: 1.3),
|
10
|
-
(min-device-pixel-ratio: 1.3),
|
11
|
-
(min-resolution: 1.3dppx) {
|
12
|
-
/* on retina, use image that's scaled by 2 */
|
13
|
-
background-image: url($image);
|
14
|
-
background-size: $width $height;
|
15
|
-
}
|
16
|
-
}
|
17
|
-
|
18
|
-
// Here's an example
|
19
|
-
// div.logo {
|
20
|
-
// background: url("logo.png") no-repeat;
|
21
|
-
// @include image-2x("logo2x.png", 100px, 25px);
|
22
|
-
// }
|
@@ -1,17 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Image Rendering
|
3
|
-
//
|
4
|
-
|
5
|
-
@mixin image-rendering ($mode:optimizeQuality) {
|
6
|
-
|
7
|
-
@if ($mode == optimize-contrast) {
|
8
|
-
image-rendering: -moz-crisp-edges;
|
9
|
-
image-rendering: -o-crisp-edges;
|
10
|
-
image-rendering: -webkit-optimize-contrast;
|
11
|
-
image-rendering: optimize-contrast;
|
12
|
-
}
|
13
|
-
|
14
|
-
@else {
|
15
|
-
image-rendering: $mode;
|
16
|
-
}
|
17
|
-
}
|
@@ -1,47 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Linear Gradient.scss
|
3
|
-
//
|
4
|
-
|
5
|
-
@mixin linear-gradient($pos, $G1, $G2: false,
|
6
|
-
$G3: false, $G4: false,
|
7
|
-
$G5: false, $G6: false,
|
8
|
-
$G7: false, $G8: false,
|
9
|
-
$G9: false, $G10: false,
|
10
|
-
$deprecated-pos1: left top,
|
11
|
-
$deprecated-pos2: left bottom,
|
12
|
-
$fallback: false) {
|
13
|
-
// Detect what type of value exists in $pos
|
14
|
-
$pos-type: type-of(nth($pos, 1));
|
15
|
-
|
16
|
-
// If $pos is missing from mixin, reassign vars and add default position
|
17
|
-
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
|
18
|
-
$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
|
19
|
-
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
|
20
|
-
$pos: top; // Default position
|
21
|
-
}
|
22
|
-
|
23
|
-
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
|
24
|
-
|
25
|
-
// Set $G1 as the default fallback color
|
26
|
-
$fallback-color: nth($G1, 1);
|
27
|
-
|
28
|
-
// If $fallback is a color use that color as the fallback color
|
29
|
-
@if (type-of($fallback) == color) or ($fallback == "transparent") {
|
30
|
-
$fallback-color: $fallback;
|
31
|
-
}
|
32
|
-
|
33
|
-
background-color: $fallback-color;
|
34
|
-
background-image: deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
|
35
|
-
background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
|
36
|
-
background-image: -moz-linear-gradient($pos, $full);
|
37
|
-
background-image: -ms-linear-gradient($pos, $full);
|
38
|
-
background-image: -o-linear-gradient($pos, $full);
|
39
|
-
background-image: unquote("linear-gradient(#{$pos}, #{$full})");
|
40
|
-
}
|
41
|
-
|
42
|
-
|
43
|
-
// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
|
44
|
-
// @include linear-gradient(#1e5799, #2989d8);
|
45
|
-
// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
|
46
|
-
// @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
|
47
|
-
// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
|
@@ -1,46 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Postion.scss
|
3
|
-
//
|
4
|
-
|
5
|
-
@mixin position ($position: relative, $coordinates: 0 0 0 0) {
|
6
|
-
|
7
|
-
@if type-of($position) == list {
|
8
|
-
$coordinates: $position;
|
9
|
-
$position: relative;
|
10
|
-
}
|
11
|
-
|
12
|
-
$top: nth($coordinates, 1);
|
13
|
-
$right: nth($coordinates, 2);
|
14
|
-
$bottom: nth($coordinates, 3);
|
15
|
-
$left: nth($coordinates, 4);
|
16
|
-
|
17
|
-
position: $position;
|
18
|
-
|
19
|
-
@if $top == auto {
|
20
|
-
top: $top;
|
21
|
-
}
|
22
|
-
@else if not(unitless($top)) {
|
23
|
-
top: $top;
|
24
|
-
}
|
25
|
-
|
26
|
-
@if $right == auto {
|
27
|
-
right: $right;
|
28
|
-
}
|
29
|
-
@else if not(unitless($right)) {
|
30
|
-
right: $right;
|
31
|
-
}
|
32
|
-
|
33
|
-
@if $bottom == auto {
|
34
|
-
bottom: $bottom;
|
35
|
-
}
|
36
|
-
@else if not(unitless($bottom)) {
|
37
|
-
bottom: $bottom;
|
38
|
-
}
|
39
|
-
|
40
|
-
@if $left == auto {
|
41
|
-
left: $left;
|
42
|
-
}
|
43
|
-
@else if not(unitless($left)) {
|
44
|
-
left: $left;
|
45
|
-
}
|
46
|
-
}
|
@@ -1,83 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Settings.scss
|
3
|
-
//
|
4
|
-
|
5
|
-
// Text Direction Settings
|
6
|
-
|
7
|
-
$text-direction: ltr;
|
8
|
-
$default-float: left;
|
9
|
-
$default-opposite: right;
|
10
|
-
|
11
|
-
@if $text-direction == ltr {
|
12
|
-
$default-float: left;
|
13
|
-
$default-opposite: right;
|
14
|
-
} @else {
|
15
|
-
$default-float: right;
|
16
|
-
$default-opposite: left;
|
17
|
-
}
|
18
|
-
|
19
|
-
// Responsive Grid
|
20
|
-
|
21
|
-
// Column width
|
22
|
-
$column: 145px;
|
23
|
-
// Gutter between each two columns
|
24
|
-
$gutter: 36px;
|
25
|
-
// Total number of columns in the grid (Total Columns For Main Container)
|
26
|
-
$grid-columns: 12;
|
27
|
-
// Max-width of the outer container
|
28
|
-
$max-width: 1024px;
|
29
|
-
// Makes all elements have a border-box layout
|
30
|
-
$border-box-sizing: true;
|
31
|
-
|
32
|
-
// Colors Settings
|
33
|
-
// Branding Colors
|
34
|
-
|
35
|
-
$white-set: #fff;
|
36
|
-
$blue-set: #174374;
|
37
|
-
$grey-set: #808080;
|
38
|
-
$grey-dark-set: #333;
|
39
|
-
$black-set: #000;
|
40
|
-
|
41
|
-
$background-body-color: $white-set;
|
42
|
-
$main-color: $grey-dark-set;
|
43
|
-
$txt-color: $grey-dark-set;
|
44
|
-
$highlight-color: #ffff99;
|
45
|
-
|
46
|
-
$background-color: lighten($grey-set,45);
|
47
|
-
|
48
|
-
$link-color: $blue-set;
|
49
|
-
$link-color-hover: darken($blue-set,10);
|
50
|
-
|
51
|
-
$border-color: lighten($grey-set,35);
|
52
|
-
$border-color-hover: $grey-set;
|
53
|
-
|
54
|
-
// Font Settings
|
55
|
-
|
56
|
-
$georgia: Georgia, "Times New Roman", "DejaVu Serif", serif;
|
57
|
-
$helvetica: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
|
58
|
-
$open-sans: 'Open Sans', sans-serif;
|
59
|
-
$gentium-book: 'Gentium Book Basic', serif;
|
60
|
-
$droid-serif: 'Droid Serif', serif;
|
61
|
-
|
62
|
-
$header-font-family: $droid-serif;
|
63
|
-
$header-font-weight: bold;
|
64
|
-
$header-font-color: $black-set;
|
65
|
-
$body-font-family: $georgia;
|
66
|
-
$body-font-weight: normal;
|
67
|
-
$body-font-color: $txt-color;
|
68
|
-
|
69
|
-
// Modular Scale Settings
|
70
|
-
// Ratios
|
71
|
-
|
72
|
-
$golden: 1.618;
|
73
|
-
$ratio: $golden;
|
74
|
-
|
75
|
-
// $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
|
76
|
-
$base-font-size: 14px;
|
77
|
-
$important-mod-num: 44px;
|
78
|
-
$base-size: $base-font-size $important-mod-num;
|
79
|
-
$base-line-height: 20px;
|
80
|
-
// Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
|
81
|
-
// http://www.modularscale.com by Tim Brown
|
82
|
-
// Results : http://modularscale.com/scale/?px1=14&px2=44&ra1=1.618&ra2=0
|
83
|
-
// https://github.com/scottkellum/modular-scale by scottkellum
|
@@ -1,21 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Print.scss
|
3
|
-
// @credits : HTML5 Boilerplate
|
4
|
-
//
|
5
|
-
|
6
|
-
@media print {
|
7
|
-
|
8
|
-
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; } /* Black prints faster: h5bp.com/s */
|
9
|
-
a, a:visited { text-decoration: underline; }
|
10
|
-
a[href]:after { content: " (" attr(href) ")"; }
|
11
|
-
abbr[title]:after { content: " (" attr(title) ")"; }
|
12
|
-
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
|
13
|
-
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
|
14
|
-
thead { display: table-header-group; } /* h5bp.com/t */
|
15
|
-
tr, img { page-break-inside: avoid; }
|
16
|
-
img { max-width: 100% !important; }
|
17
|
-
@page { margin: 0.5cm; }
|
18
|
-
p, h2, h3 { orphans: 3; widows: 3; }
|
19
|
-
h2, h3 { page-break-after: avoid; }
|
20
|
-
|
21
|
-
}
|
@@ -1,410 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Reset partial
|
3
|
-
// @credits http://github.com/necolas/normalize.css
|
4
|
-
//
|
5
|
-
|
6
|
-
// Add Compass' IE and vendor prefix support variables.
|
7
|
-
@import "compass/support";
|
8
|
-
@import "compass/reset/utilities";
|
9
|
-
|
10
|
-
// HTML5 display definitions
|
11
|
-
|
12
|
-
// Corrects block display not defined in IE6/7/8/9 & FF3
|
13
|
-
|
14
|
-
article,
|
15
|
-
aside,
|
16
|
-
details,
|
17
|
-
figcaption,
|
18
|
-
figure,
|
19
|
-
footer,
|
20
|
-
header,
|
21
|
-
hgroup,
|
22
|
-
nav,
|
23
|
-
section,
|
24
|
-
summary {
|
25
|
-
display: block;
|
26
|
-
}
|
27
|
-
|
28
|
-
// Corrects inline-block display not defined in IE6/7/8/9 & FF3
|
29
|
-
|
30
|
-
audio,
|
31
|
-
canvas,
|
32
|
-
video {
|
33
|
-
display: inline-block;
|
34
|
-
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
|
35
|
-
*display: inline;
|
36
|
-
*zoom: 1;
|
37
|
-
}
|
38
|
-
}
|
39
|
-
|
40
|
-
// Prevents modern browsers from displaying 'audio' without controls
|
41
|
-
// Remove excess height in iOS5 devices
|
42
|
-
|
43
|
-
audio:not([controls]) {
|
44
|
-
display: none;
|
45
|
-
height: 0;
|
46
|
-
}
|
47
|
-
|
48
|
-
// Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
|
49
|
-
// Known issue: no IE6 support
|
50
|
-
|
51
|
-
[hidden] {
|
52
|
-
display: none;
|
53
|
-
}
|
54
|
-
|
55
|
-
|
56
|
-
// Base
|
57
|
-
|
58
|
-
// 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
|
59
|
-
// http://clagnut.com/blog/348/#c790
|
60
|
-
// 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
|
61
|
-
// www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
|
62
|
-
|
63
|
-
html {
|
64
|
-
font-size: 100%; /* 1 */
|
65
|
-
-webkit-text-size-adjust: 100%; /* 2 */
|
66
|
-
-ms-text-size-adjust: 100%; /* 2 */
|
67
|
-
}
|
68
|
-
|
69
|
-
// Addresses font-family inconsistency between 'textarea' and other form elements.
|
70
|
-
|
71
|
-
html,
|
72
|
-
button,
|
73
|
-
input,
|
74
|
-
select,
|
75
|
-
textarea {
|
76
|
-
font-family: sans-serif;
|
77
|
-
}
|
78
|
-
|
79
|
-
// Addresses margins handled incorrectly in IE6/7
|
80
|
-
|
81
|
-
body {
|
82
|
-
margin: 0;
|
83
|
-
}
|
84
|
-
|
85
|
-
// Links
|
86
|
-
|
87
|
-
// Addresses outline displayed oddly in Chrome
|
88
|
-
|
89
|
-
a:focus {
|
90
|
-
outline: thin dotted;
|
91
|
-
}
|
92
|
-
|
93
|
-
// Improves readability when focused and also mouse hovered in all browsers
|
94
|
-
// people.opera.com/patrickl/experiments/keyboard/test
|
95
|
-
|
96
|
-
a:hover,
|
97
|
-
a:active {
|
98
|
-
outline: 0;
|
99
|
-
}
|
100
|
-
|
101
|
-
// Typography
|
102
|
-
|
103
|
-
// Addresses font sizes and margins set differently in IE6/7
|
104
|
-
// Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
|
105
|
-
|
106
|
-
h1 {
|
107
|
-
font-size: 2em;
|
108
|
-
margin: 0.67em 0;
|
109
|
-
}
|
110
|
-
|
111
|
-
// Addresses styling not present in IE7/8/9, S5, Chrome
|
112
|
-
|
113
|
-
abbr[title],
|
114
|
-
dfn[title] {
|
115
|
-
border-bottom: 1px dotted;
|
116
|
-
cursor: help;
|
117
|
-
white-space: nowrap;
|
118
|
-
}
|
119
|
-
|
120
|
-
// Addresses style set to 'bolder' in FF3+, S4/5, Chrome
|
121
|
-
|
122
|
-
b,
|
123
|
-
strong {
|
124
|
-
font-weight: bold;
|
125
|
-
}
|
126
|
-
|
127
|
-
blockquote {
|
128
|
-
margin: 1em 40px;
|
129
|
-
}
|
130
|
-
|
131
|
-
// Addresses styling not present in S5, Chrome
|
132
|
-
|
133
|
-
dfn {
|
134
|
-
font-style: italic;
|
135
|
-
}
|
136
|
-
|
137
|
-
// Addresses styling not present in IE6/7/8/9
|
138
|
-
|
139
|
-
mark {
|
140
|
-
background: #ff0;
|
141
|
-
color: #000;
|
142
|
-
}
|
143
|
-
|
144
|
-
// Addresses margins set differently in IE6/7
|
145
|
-
|
146
|
-
p,
|
147
|
-
pre {
|
148
|
-
margin: 1em 0;
|
149
|
-
}
|
150
|
-
|
151
|
-
// Corrects font family set oddly in IE6, S4/5, Chrome
|
152
|
-
// en.wikipedia.org/wiki/User:Davidgothberg/Test59
|
153
|
-
|
154
|
-
pre,
|
155
|
-
code,
|
156
|
-
kbd,
|
157
|
-
samp,
|
158
|
-
tt,
|
159
|
-
var {
|
160
|
-
background-color: $highlight-color;
|
161
|
-
font-family: monospace, serif;
|
162
|
-
@if $legacy-support-for-ie6 {
|
163
|
-
_font-family: 'courier new', monospace;
|
164
|
-
}
|
165
|
-
font-size: 1em;
|
166
|
-
}
|
167
|
-
|
168
|
-
// Improves readability of pre-formatted text in all browsers
|
169
|
-
|
170
|
-
pre {
|
171
|
-
white-space: pre;
|
172
|
-
white-space: pre-wrap;
|
173
|
-
word-wrap: break-word;
|
174
|
-
}
|
175
|
-
|
176
|
-
// 1. Addresses CSS quotes not supported in IE6/7
|
177
|
-
// 2. Addresses quote property not supported in S4
|
178
|
-
|
179
|
-
q {
|
180
|
-
@include reset-quotation;
|
181
|
-
}
|
182
|
-
|
183
|
-
small {
|
184
|
-
font-size: 75%;
|
185
|
-
}
|
186
|
-
|
187
|
-
// Prevents sub and sup affecting line-height in all browsers
|
188
|
-
// gist.github.com/413930
|
189
|
-
|
190
|
-
sub,
|
191
|
-
sup {
|
192
|
-
font-size: 75%;
|
193
|
-
line-height: 0;
|
194
|
-
position: relative;
|
195
|
-
vertical-align: baseline;
|
196
|
-
}
|
197
|
-
|
198
|
-
sup {
|
199
|
-
top: -0.5em;
|
200
|
-
}
|
201
|
-
|
202
|
-
sub {
|
203
|
-
bottom: -0.25em;
|
204
|
-
}
|
205
|
-
|
206
|
-
|
207
|
-
// Lists
|
208
|
-
|
209
|
-
// Addresses margins set differently in IE6/7
|
210
|
-
|
211
|
-
dl,
|
212
|
-
menu,
|
213
|
-
ol,
|
214
|
-
ul {
|
215
|
-
margin: 1em 0;
|
216
|
-
}
|
217
|
-
|
218
|
-
dd {
|
219
|
-
margin: 0 0 0 40px;
|
220
|
-
}
|
221
|
-
|
222
|
-
// Addresses paddings set differently in IE6/7
|
223
|
-
|
224
|
-
menu,
|
225
|
-
ol,
|
226
|
-
ul {
|
227
|
-
padding: 0 0 0 40px;
|
228
|
-
}
|
229
|
-
|
230
|
-
// Corrects list images handled incorrectly in IE7
|
231
|
-
|
232
|
-
nav ul,
|
233
|
-
nav ol {
|
234
|
-
@include reset-list-style;
|
235
|
-
list-style-image: none;
|
236
|
-
}
|
237
|
-
|
238
|
-
|
239
|
-
// Embedded content
|
240
|
-
|
241
|
-
// 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
|
242
|
-
// 2. Improves image quality when scaled in IE7
|
243
|
-
// code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
|
244
|
-
|
245
|
-
img {
|
246
|
-
border: 0; /* 1 */
|
247
|
-
-ms-interpolation-mode: bicubic; /* 2 */
|
248
|
-
/* Responsive images */
|
249
|
-
/* @todo Add responsive embedded video. */
|
250
|
-
max-width: 100%;
|
251
|
-
@if $legacy-support-for-ie6 {
|
252
|
-
_width: 100%;
|
253
|
-
}
|
254
|
-
height: auto;
|
255
|
-
vertical-align: middle;
|
256
|
-
}
|
257
|
-
|
258
|
-
// Corrects overflow displayed oddly in IE9
|
259
|
-
|
260
|
-
svg:not(:root) {
|
261
|
-
overflow: hidden;
|
262
|
-
}
|
263
|
-
|
264
|
-
|
265
|
-
// Figures
|
266
|
-
|
267
|
-
// Addresses margin not present in IE6/7/8/9, S5, O11
|
268
|
-
|
269
|
-
figure {
|
270
|
-
margin: 0;
|
271
|
-
}
|
272
|
-
|
273
|
-
|
274
|
-
// Forms
|
275
|
-
|
276
|
-
// Corrects margin displayed oddly in IE6/7
|
277
|
-
|
278
|
-
form {
|
279
|
-
margin: 0;
|
280
|
-
}
|
281
|
-
|
282
|
-
// Define consistent border, margin, and padding
|
283
|
-
|
284
|
-
fieldset {
|
285
|
-
border: 1px solid $grey-set;
|
286
|
-
margin: 0;
|
287
|
-
padding: 0.35em 0.625em 0.75em;
|
288
|
-
}
|
289
|
-
|
290
|
-
// Indicate that 'label' will shift focus to the associated form element
|
291
|
-
label {
|
292
|
-
cursor: pointer;
|
293
|
-
}
|
294
|
-
|
295
|
-
// 1. Corrects color not being inherited in IE6/7/8/9
|
296
|
-
// 2. Corrects text not wrapping in FF3
|
297
|
-
// 3. Corrects alignment displayed oddly in IE6/7
|
298
|
-
|
299
|
-
legend {
|
300
|
-
border: 0; /* 1 */
|
301
|
-
padding: 0;
|
302
|
-
white-space: normal; /* 2 */
|
303
|
-
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
|
304
|
-
*margin-left: -7px; /* 3 */ /* LTR */
|
305
|
-
}
|
306
|
-
}
|
307
|
-
|
308
|
-
// 1. Corrects font size not being inherited in all browsers
|
309
|
-
// 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
|
310
|
-
// 3. Improves appearance and consistency in all browsers
|
311
|
-
|
312
|
-
button,
|
313
|
-
input,
|
314
|
-
select,
|
315
|
-
textarea {
|
316
|
-
font-size: 100%; /* 1 */
|
317
|
-
margin: 0; /* 2 */
|
318
|
-
vertical-align: baseline; /* 3 */
|
319
|
-
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
|
320
|
-
*vertical-align: middle; /* 3 */
|
321
|
-
}
|
322
|
-
}
|
323
|
-
|
324
|
-
// Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
|
325
|
-
|
326
|
-
button,
|
327
|
-
input {
|
328
|
-
line-height: normal; /* 1 */
|
329
|
-
}
|
330
|
-
|
331
|
-
// 1. Improves usability and consistency of cursor style between image-type 'input' and others
|
332
|
-
// 2. Corrects inability to style clickable 'input' types in iOS
|
333
|
-
// 3. Removes inner spacing in IE7 without affecting normal text inputs
|
334
|
-
// Known issue: inner spacing remains in IE6
|
335
|
-
|
336
|
-
button,
|
337
|
-
input[type="button"],
|
338
|
-
input[type="reset"],
|
339
|
-
input[type="submit"] {
|
340
|
-
cursor: pointer; /* 1 */
|
341
|
-
-webkit-appearance: button; /* 2 */
|
342
|
-
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
|
343
|
-
*overflow: visible; /* 3 */
|
344
|
-
}
|
345
|
-
}
|
346
|
-
|
347
|
-
// Re-set default cursor for disabled elements
|
348
|
-
|
349
|
-
button[disabled],
|
350
|
-
input[disabled] {
|
351
|
-
cursor: default;
|
352
|
-
}
|
353
|
-
|
354
|
-
// 1. Addresses box sizing set to content-box in IE8/9
|
355
|
-
// 2. Removes excess padding in IE8/9
|
356
|
-
// 3. Removes excess padding in IE7
|
357
|
-
// Known issue: excess padding remains in IE6
|
358
|
-
|
359
|
-
input[type="checkbox"],
|
360
|
-
input[type="radio"] {
|
361
|
-
box-sizing: border-box; /* 1 */
|
362
|
-
padding: 0; /* 2 */
|
363
|
-
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
|
364
|
-
*height: 13px; /* 3 */
|
365
|
-
*width: 13px; /* 3 */
|
366
|
-
}
|
367
|
-
}
|
368
|
-
|
369
|
-
// 1. Addresses appearance set to searchfield in S5, Chrome
|
370
|
-
// 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
|
371
|
-
|
372
|
-
input[type="search"] {
|
373
|
-
-webkit-appearance: textfield; /* 1 */
|
374
|
-
-moz-box-sizing: content-box;
|
375
|
-
-webkit-box-sizing: content-box; /* 2 */
|
376
|
-
box-sizing: content-box;
|
377
|
-
}
|
378
|
-
|
379
|
-
// Removes inner padding and search cancel button in S5, Chrome on OS X
|
380
|
-
|
381
|
-
input[type="search"]::-webkit-search-decoration,
|
382
|
-
input[type="search"]::-webkit-search-cancel-button {
|
383
|
-
-webkit-appearance: none;
|
384
|
-
}
|
385
|
-
|
386
|
-
// Removes inner padding and border in FF3+
|
387
|
-
// www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
|
388
|
-
|
389
|
-
button::-moz-focus-inner,
|
390
|
-
input::-moz-focus-inner {
|
391
|
-
border: 0;
|
392
|
-
padding: 0;
|
393
|
-
}
|
394
|
-
|
395
|
-
// 1. Removes default vertical scrollbar in IE6/7/8/9
|
396
|
-
// 2. Improves readability and alignment in all browsers
|
397
|
-
|
398
|
-
textarea {
|
399
|
-
overflow: auto; /* 1 */
|
400
|
-
vertical-align: top; /* 2 */
|
401
|
-
}
|
402
|
-
|
403
|
-
|
404
|
-
// Tables
|
405
|
-
|
406
|
-
// Remove most spacing between table cells
|
407
|
-
|
408
|
-
table {
|
409
|
-
@include reset-table;
|
410
|
-
}
|