compass-capucine 0.2.0 → 0.2.1
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/Gemfile +0 -8
- data/README.md +9 -13
- data/Rakefile +1 -22
- data/VERSION +1 -1
- data/compass-capucine.gemspec +20 -7
- data/examples/.compass_config.rb +24 -0
- data/examples/capucine.yaml +13 -0
- data/examples/css_generated/all.css +136 -0
- data/examples/css_generated/box.css +61 -0
- data/examples/css_generated/ie6.css +140 -0
- data/examples/css_generated/ie7.css +137 -0
- data/examples/css_generated/reset.css +528 -0
- data/examples/index.html +51 -0
- data/examples/sass/_box.scss +46 -0
- data/examples/sass/_helpers.scss +36 -0
- data/examples/sass/all.scss +6 -0
- data/examples/sass/ie6.scss +6 -0
- data/examples/sass/ie7.scss +6 -0
- data/examples/sass/reset.scss +3 -0
- data/stylesheets/compass-capucine/_box.scss +47 -0
- data/stylesheets/compass-capucine/_helpers.scss +79 -0
- data/stylesheets/compass-capucine/_normalize-plus.scss +21 -12
- data/stylesheets/compass-capucine/_normalize.scss +87 -91
- data/stylesheets/compass-capucine/_print.scss +10 -2
- metadata +20 -7
- data/stylesheets/compass-capucine/_box.sass +0 -46
- data/stylesheets/compass-capucine/_helpers.sass +0 -100
- data/stylesheets/compass-capucine/_reset.sass +0 -177
data/examples/index.html
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<title>Examles</title>
|
|
6
|
+
|
|
7
|
+
<link href="css_generated/reset.css" rel="stylesheet" />
|
|
8
|
+
|
|
9
|
+
<link href="css_generated/all.css" rel="stylesheet" />
|
|
10
|
+
|
|
11
|
+
<!--[if IE 6]>
|
|
12
|
+
<link href="css_generated/ie6.css" rel="stylesheet" />
|
|
13
|
+
<![endif]-->
|
|
14
|
+
|
|
15
|
+
<!--[if IE 7]>
|
|
16
|
+
<link href="css_generated/ie7.css" rel="stylesheet" />
|
|
17
|
+
<![endif]-->
|
|
18
|
+
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
|
|
22
|
+
<div class="circle"></div>
|
|
23
|
+
<div class="square"></div>
|
|
24
|
+
<div class="box"></div>
|
|
25
|
+
<div class="centerXY"></div>
|
|
26
|
+
<div class="max-width"></div>
|
|
27
|
+
<div class="min-max-width"></div>
|
|
28
|
+
|
|
29
|
+
<p class="unselectable">
|
|
30
|
+
This is un unselectable text
|
|
31
|
+
</p>
|
|
32
|
+
|
|
33
|
+
<div class="visualy-hidden"></div>
|
|
34
|
+
|
|
35
|
+
<div class="clearfix">clearfix</div>
|
|
36
|
+
|
|
37
|
+
<p class="selection-1">
|
|
38
|
+
This is un selectable text
|
|
39
|
+
</p>
|
|
40
|
+
|
|
41
|
+
<a href="#" class="pressed-effect">This is a link</a>
|
|
42
|
+
|
|
43
|
+
<div class="vertical-gradient"></div>
|
|
44
|
+
<p class="smart-text-shadow">
|
|
45
|
+
|
|
46
|
+
Content text
|
|
47
|
+
|
|
48
|
+
</p>
|
|
49
|
+
|
|
50
|
+
</body>
|
|
51
|
+
</html>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
@import "../../stylesheets/compass-capucine/box";
|
|
2
|
+
|
|
3
|
+
.square {
|
|
4
|
+
@include box(100px);
|
|
5
|
+
background: #F0C526;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.box {
|
|
9
|
+
@include box(200px, 100px);
|
|
10
|
+
background: #F78331;
|
|
11
|
+
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.circle {
|
|
15
|
+
@include circle(100px);
|
|
16
|
+
background: #F73158;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.centerXY {
|
|
20
|
+
@include centerXY(300px, 100px);
|
|
21
|
+
position: fixed;
|
|
22
|
+
background: #9E1B90;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.max-width {
|
|
26
|
+
@include max-width(200px);
|
|
27
|
+
height: 100px;
|
|
28
|
+
background: #C231F7;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.min-max-width {
|
|
32
|
+
@include min-max-width(500px, 800px);
|
|
33
|
+
height: 100px;
|
|
34
|
+
background: #5C31F7;
|
|
35
|
+
margin: 0 auto;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
$legacy-support-for-ie6: false;
|
|
39
|
+
|
|
40
|
+
.max-width-no-ie6 {
|
|
41
|
+
@include max-width(230px);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.min-max-width-no-ie6 {
|
|
45
|
+
@include min-max-width(100px, 230px);
|
|
46
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
@import "../../stylesheets/compass-capucine/box";
|
|
2
|
+
@import "../../stylesheets/compass-capucine/helpers";
|
|
3
|
+
|
|
4
|
+
.unselectable {
|
|
5
|
+
@include unselectable;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
.visually-hidden {
|
|
10
|
+
@include visually-hidden;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.clearfix {
|
|
14
|
+
@include clearfix;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@include selection(#87E5FF, #fefefe);
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
.pressed-effect {
|
|
21
|
+
@include pressed-effect;
|
|
22
|
+
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.vertical-gradient {
|
|
26
|
+
@include vertical-gradient(#111, #777);
|
|
27
|
+
@include box(200px);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.smart-text-shadow {
|
|
31
|
+
@include box(200px);
|
|
32
|
+
@include smart-text-shadow(#777);
|
|
33
|
+
color: #444;
|
|
34
|
+
text-align: center;
|
|
35
|
+
padding: 20px;
|
|
36
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
@import "compass/css3/border-radius";
|
|
2
|
+
@import "compass/utilities/general/min";
|
|
3
|
+
|
|
4
|
+
@mixin box($width: 100px, $height: false) {
|
|
5
|
+
|
|
6
|
+
width: $width;
|
|
7
|
+
|
|
8
|
+
@if $height {
|
|
9
|
+
height: $height;
|
|
10
|
+
}
|
|
11
|
+
@else {
|
|
12
|
+
height: $width;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@mixin circle($diam: 100px) {
|
|
18
|
+
width: $diam;
|
|
19
|
+
height: $diam;
|
|
20
|
+
@include border-radius($diam/2);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@mixin centerXY($width: 100px, $height: 100px, $position: absolute) {
|
|
24
|
+
display: block;
|
|
25
|
+
|
|
26
|
+
position: $position;
|
|
27
|
+
|
|
28
|
+
width: $width;
|
|
29
|
+
height: $height;
|
|
30
|
+
top: 50%;
|
|
31
|
+
left: 50%;
|
|
32
|
+
margin-top: -$height / 2;
|
|
33
|
+
margin-left: -$width / 2;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@mixin max-width($max: 1100px) {
|
|
37
|
+
max-width: $max;
|
|
38
|
+
@if $legacy-support-for-ie6 {
|
|
39
|
+
width: expression(document.body.clientWidth > parseInt("#{round($max)}") ? "#{$max}" : "auto");
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@mixin min-max-width($min: 400px, $max: 960px) {
|
|
44
|
+
@include min-width($min);
|
|
45
|
+
@include max-width($max);
|
|
46
|
+
}
|
|
47
|
+
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
@import "compass/css3/images";
|
|
2
|
+
@import "compass/css3/text-shadow";
|
|
3
|
+
@import "compass/css3/shared";
|
|
4
|
+
|
|
5
|
+
@mixin unselectable {
|
|
6
|
+
@include experimental(user-select, none);
|
|
7
|
+
-moz-user-select: -moz-none;
|
|
8
|
+
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@mixin visually-hidden {
|
|
12
|
+
border: 0;
|
|
13
|
+
padding: 0;
|
|
14
|
+
clip: rect(0 0 0 0);
|
|
15
|
+
height: 1px;
|
|
16
|
+
width: 1px;
|
|
17
|
+
margin: -1px;
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
position: absolute;
|
|
20
|
+
&.focusable {
|
|
21
|
+
&:active, &:focus {
|
|
22
|
+
clip: auto;
|
|
23
|
+
height: auto;
|
|
24
|
+
padding: 0;
|
|
25
|
+
margin: 0;
|
|
26
|
+
overflow: visible;
|
|
27
|
+
position: static;
|
|
28
|
+
width: auto;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@mixin clearfix {
|
|
34
|
+
clear: both;
|
|
35
|
+
display: block;
|
|
36
|
+
*zoom: 1;
|
|
37
|
+
&:before, &:after {
|
|
38
|
+
content: "\0020";
|
|
39
|
+
display: table;
|
|
40
|
+
}
|
|
41
|
+
&:after {
|
|
42
|
+
clear: both;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@mixin selection($background: #111111, $color: white) {
|
|
47
|
+
|
|
48
|
+
::-moz-selection {
|
|
49
|
+
background: $background;
|
|
50
|
+
color: $color;
|
|
51
|
+
}
|
|
52
|
+
::selection {
|
|
53
|
+
background: $background;
|
|
54
|
+
color: $color;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@mixin pressed-effect($top: 1px, $left: false, $right: false) {
|
|
59
|
+
&:active {
|
|
60
|
+
position: relative;
|
|
61
|
+
top: $top;
|
|
62
|
+
@if $left and $left != none {
|
|
63
|
+
left: $left;
|
|
64
|
+
}
|
|
65
|
+
@if $right and $right != none {
|
|
66
|
+
right: $right;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@mixin vertical-gradient($top: #222222, $bottom: #777777) {
|
|
72
|
+
@include background-image(linear-gradient($top, $bottom));
|
|
73
|
+
@include filter-gradient($top, $bottom);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
@mixin smart-text-shadow($color: #fff, $pixels: 1px) {
|
|
77
|
+
@include text-shadow($color 0 $pixels 0);
|
|
78
|
+
}
|
|
79
|
+
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import "compass/css3/box-sizing";
|
|
2
|
+
|
|
1
3
|
dl,
|
|
2
4
|
menu,
|
|
3
5
|
ol,
|
|
@@ -36,27 +38,34 @@ input {
|
|
|
36
38
|
|
|
37
39
|
&[type="search"] {
|
|
38
40
|
-webkit-appearance: textfield;
|
|
39
|
-
|
|
40
|
-
-moz-box-sizing: content-box;
|
|
41
|
-
box-sizing: content-box;
|
|
41
|
+
@include box-sizing(content-box);
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
//==========[ IE ]==================
|
|
47
|
-
.ie6 hr, .ie7 hr {
|
|
48
|
-
margin-top: -0.5em;
|
|
49
|
-
}
|
|
50
47
|
|
|
51
|
-
|
|
52
|
-
|
|
48
|
+
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
|
|
49
|
+
hr {
|
|
50
|
+
margin-top: -0.5em;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
legend {
|
|
54
|
+
margin-left: -7px;
|
|
55
|
+
}
|
|
56
|
+
|
|
53
57
|
}
|
|
54
58
|
|
|
55
|
-
|
|
56
|
-
|
|
59
|
+
@if $legacy-support-for-ie7 {
|
|
60
|
+
input[type="checkbox"] {
|
|
61
|
+
vertical-align: baseline;
|
|
62
|
+
}
|
|
57
63
|
}
|
|
58
64
|
|
|
59
|
-
|
|
60
|
-
|
|
65
|
+
@if $legacy-support-for-ie6 {
|
|
66
|
+
input {
|
|
67
|
+
vertical-align: text-bottom;
|
|
68
|
+
}
|
|
69
|
+
|
|
61
70
|
}
|
|
62
71
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
/*! normalize.css 2012-
|
|
1
|
+
/*! normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */
|
|
2
2
|
|
|
3
|
-
/*
|
|
3
|
+
/* ==========================================================================
|
|
4
4
|
HTML5 display definitions
|
|
5
5
|
========================================================================== */
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
|
-
* Corrects block display not defined in IE6/7/8/9 & FF3
|
|
8
|
+
* Corrects `block` display not defined in IE6/7/8/9 & FF3.
|
|
9
9
|
*/
|
|
10
10
|
|
|
11
11
|
article,
|
|
@@ -23,7 +23,7 @@ summary {
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
/*
|
|
26
|
-
* Corrects inline-block display not defined in IE6/7/8/9 & FF3
|
|
26
|
+
* Corrects `inline-block` display not defined in IE6/7/8/9 & FF3.
|
|
27
27
|
*/
|
|
28
28
|
|
|
29
29
|
audio,
|
|
@@ -35,8 +35,8 @@ video {
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
/*
|
|
38
|
-
* Prevents modern browsers from displaying
|
|
39
|
-
* Remove excess height in iOS5 devices
|
|
38
|
+
* Prevents modern browsers from displaying `audio` without controls.
|
|
39
|
+
* Remove excess height in iOS5 devices.
|
|
40
40
|
*/
|
|
41
41
|
|
|
42
42
|
audio:not([controls]) {
|
|
@@ -45,24 +45,23 @@ audio:not([controls]) {
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
/*
|
|
48
|
-
* Addresses styling for
|
|
49
|
-
* Known issue: no IE6 support
|
|
48
|
+
* Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4.
|
|
49
|
+
* Known issue: no IE6 support.
|
|
50
50
|
*/
|
|
51
51
|
|
|
52
52
|
[hidden] {
|
|
53
53
|
display: none;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
|
|
57
|
-
/* =============================================================================
|
|
56
|
+
/* ==========================================================================
|
|
58
57
|
Base
|
|
59
58
|
========================================================================== */
|
|
60
59
|
|
|
61
60
|
/*
|
|
62
|
-
* 1. Corrects text resizing oddly in IE6/7 when body font-size is set using
|
|
63
|
-
*
|
|
64
|
-
* 2. Prevents iOS text size adjust after orientation change, without disabling
|
|
65
|
-
*
|
|
61
|
+
* 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
|
|
62
|
+
* `em` units.
|
|
63
|
+
* 2. Prevents iOS text size adjust after orientation change, without disabling
|
|
64
|
+
* user zoom.
|
|
66
65
|
*/
|
|
67
66
|
|
|
68
67
|
html {
|
|
@@ -72,7 +71,8 @@ html {
|
|
|
72
71
|
}
|
|
73
72
|
|
|
74
73
|
/*
|
|
75
|
-
* Addresses font-family inconsistency between
|
|
74
|
+
* Addresses `font-family` inconsistency between `textarea` and other form
|
|
75
|
+
* elements.
|
|
76
76
|
*/
|
|
77
77
|
|
|
78
78
|
html,
|
|
@@ -84,20 +84,19 @@ textarea {
|
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
/*
|
|
87
|
-
* Addresses margins handled incorrectly in IE6/7
|
|
87
|
+
* Addresses margins handled incorrectly in IE6/7.
|
|
88
88
|
*/
|
|
89
89
|
|
|
90
90
|
body {
|
|
91
91
|
margin: 0;
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
-
|
|
95
|
-
/* =============================================================================
|
|
94
|
+
/* ==========================================================================
|
|
96
95
|
Links
|
|
97
96
|
========================================================================== */
|
|
98
97
|
|
|
99
98
|
/*
|
|
100
|
-
* Addresses outline
|
|
99
|
+
* Addresses `outline` inconsistency between Chrome and other browsers.
|
|
101
100
|
*/
|
|
102
101
|
|
|
103
102
|
a:focus {
|
|
@@ -105,23 +104,22 @@ a:focus {
|
|
|
105
104
|
}
|
|
106
105
|
|
|
107
106
|
/*
|
|
108
|
-
* Improves readability when focused and also mouse hovered in all browsers
|
|
107
|
+
* Improves readability when focused and also mouse hovered in all browsers.
|
|
109
108
|
* people.opera.com/patrickl/experiments/keyboard/test
|
|
110
109
|
*/
|
|
111
110
|
|
|
112
|
-
a:
|
|
113
|
-
a:
|
|
111
|
+
a:active,
|
|
112
|
+
a:hover {
|
|
114
113
|
outline: 0;
|
|
115
114
|
}
|
|
116
115
|
|
|
117
|
-
|
|
118
|
-
/* =============================================================================
|
|
116
|
+
/* ==========================================================================
|
|
119
117
|
Typography
|
|
120
118
|
========================================================================== */
|
|
121
119
|
|
|
122
120
|
/*
|
|
123
|
-
* Addresses font sizes and margins set differently in IE6/7
|
|
124
|
-
* Addresses font sizes within
|
|
121
|
+
* Addresses font sizes and margins set differently in IE6/7.
|
|
122
|
+
* Addresses font sizes within `section` and `article` in FF4+, Chrome, S5.
|
|
125
123
|
*/
|
|
126
124
|
|
|
127
125
|
h1 {
|
|
@@ -155,7 +153,7 @@ h6 {
|
|
|
155
153
|
}
|
|
156
154
|
|
|
157
155
|
/*
|
|
158
|
-
* Addresses styling not present in IE7/8/9, S5, Chrome
|
|
156
|
+
* Addresses styling not present in IE7/8/9, S5, Chrome.
|
|
159
157
|
*/
|
|
160
158
|
|
|
161
159
|
abbr[title] {
|
|
@@ -163,8 +161,8 @@ abbr[title] {
|
|
|
163
161
|
}
|
|
164
162
|
|
|
165
163
|
/*
|
|
166
|
-
* Addresses style set to
|
|
167
|
-
*/
|
|
164
|
+
* Addresses style set to `bolder` in FF3+, S4/5, Chrome.
|
|
165
|
+
*/
|
|
168
166
|
|
|
169
167
|
b,
|
|
170
168
|
strong {
|
|
@@ -176,7 +174,7 @@ blockquote {
|
|
|
176
174
|
}
|
|
177
175
|
|
|
178
176
|
/*
|
|
179
|
-
* Addresses styling not present in S5, Chrome
|
|
177
|
+
* Addresses styling not present in S5, Chrome.
|
|
180
178
|
*/
|
|
181
179
|
|
|
182
180
|
dfn {
|
|
@@ -184,7 +182,7 @@ dfn {
|
|
|
184
182
|
}
|
|
185
183
|
|
|
186
184
|
/*
|
|
187
|
-
* Addresses styling not present in IE6/7/8/9
|
|
185
|
+
* Addresses styling not present in IE6/7/8/9.
|
|
188
186
|
*/
|
|
189
187
|
|
|
190
188
|
mark {
|
|
@@ -193,7 +191,7 @@ mark {
|
|
|
193
191
|
}
|
|
194
192
|
|
|
195
193
|
/*
|
|
196
|
-
* Addresses margins set differently in IE6/7
|
|
194
|
+
* Addresses margins set differently in IE6/7.
|
|
197
195
|
*/
|
|
198
196
|
|
|
199
197
|
p,
|
|
@@ -202,13 +200,13 @@ pre {
|
|
|
202
200
|
}
|
|
203
201
|
|
|
204
202
|
/*
|
|
205
|
-
* Corrects font family set oddly in IE6, S4/5, Chrome
|
|
203
|
+
* Corrects font family set oddly in IE6, S4/5, Chrome.
|
|
206
204
|
* en.wikipedia.org/wiki/User:Davidgothberg/Test59
|
|
207
205
|
*/
|
|
208
206
|
|
|
209
|
-
pre,
|
|
210
207
|
code,
|
|
211
208
|
kbd,
|
|
209
|
+
pre,
|
|
212
210
|
samp {
|
|
213
211
|
font-family: monospace, serif;
|
|
214
212
|
_font-family: 'courier new', monospace;
|
|
@@ -216,7 +214,7 @@ samp {
|
|
|
216
214
|
}
|
|
217
215
|
|
|
218
216
|
/*
|
|
219
|
-
* Improves readability of pre-formatted text in all browsers
|
|
217
|
+
* Improves readability of pre-formatted text in all browsers.
|
|
220
218
|
*/
|
|
221
219
|
|
|
222
220
|
pre {
|
|
@@ -226,17 +224,16 @@ pre {
|
|
|
226
224
|
}
|
|
227
225
|
|
|
228
226
|
/*
|
|
229
|
-
*
|
|
230
|
-
* 2. Addresses quote property not supported in S4
|
|
227
|
+
* Addresses CSS quotes not supported in IE6/7.
|
|
231
228
|
*/
|
|
232
229
|
|
|
233
|
-
/* 1 */
|
|
234
|
-
|
|
235
230
|
q {
|
|
236
231
|
quotes: none;
|
|
237
232
|
}
|
|
238
233
|
|
|
239
|
-
/*
|
|
234
|
+
/*
|
|
235
|
+
* Addresses `quotes` property not supported in S4.
|
|
236
|
+
*/
|
|
240
237
|
|
|
241
238
|
q:before,
|
|
242
239
|
q:after {
|
|
@@ -249,7 +246,7 @@ small {
|
|
|
249
246
|
}
|
|
250
247
|
|
|
251
248
|
/*
|
|
252
|
-
* Prevents sub and sup affecting line-height in all browsers
|
|
249
|
+
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
|
|
253
250
|
* gist.github.com/413930
|
|
254
251
|
*/
|
|
255
252
|
|
|
@@ -269,13 +266,12 @@ sub {
|
|
|
269
266
|
bottom: -0.25em;
|
|
270
267
|
}
|
|
271
268
|
|
|
272
|
-
|
|
273
|
-
/* =============================================================================
|
|
269
|
+
/* ==========================================================================
|
|
274
270
|
Lists
|
|
275
271
|
========================================================================== */
|
|
276
272
|
|
|
277
273
|
/*
|
|
278
|
-
* Addresses margins set differently in IE6/7
|
|
274
|
+
* Addresses margins set differently in IE6/7.
|
|
279
275
|
*/
|
|
280
276
|
|
|
281
277
|
dl,
|
|
@@ -290,7 +286,7 @@ dd {
|
|
|
290
286
|
}
|
|
291
287
|
|
|
292
288
|
/*
|
|
293
|
-
* Addresses paddings set differently in IE6/7
|
|
289
|
+
* Addresses paddings set differently in IE6/7.
|
|
294
290
|
*/
|
|
295
291
|
|
|
296
292
|
menu,
|
|
@@ -300,7 +296,7 @@ ul {
|
|
|
300
296
|
}
|
|
301
297
|
|
|
302
298
|
/*
|
|
303
|
-
* Corrects list images handled incorrectly in IE7
|
|
299
|
+
* Corrects list images handled incorrectly in IE7.
|
|
304
300
|
*/
|
|
305
301
|
|
|
306
302
|
nav ul,
|
|
@@ -309,14 +305,13 @@ nav ol {
|
|
|
309
305
|
list-style-image: none;
|
|
310
306
|
}
|
|
311
307
|
|
|
312
|
-
|
|
313
|
-
/* =============================================================================
|
|
308
|
+
/* ==========================================================================
|
|
314
309
|
Embedded content
|
|
315
310
|
========================================================================== */
|
|
316
311
|
|
|
317
312
|
/*
|
|
318
|
-
* 1. Removes border when inside
|
|
319
|
-
* 2. Improves image quality when scaled in IE7
|
|
313
|
+
* 1. Removes border when inside `a` element in IE6/7/8/9, FF3.
|
|
314
|
+
* 2. Improves image quality when scaled in IE7.
|
|
320
315
|
* code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
|
|
321
316
|
*/
|
|
322
317
|
|
|
@@ -326,33 +321,31 @@ img {
|
|
|
326
321
|
}
|
|
327
322
|
|
|
328
323
|
/*
|
|
329
|
-
* Corrects overflow displayed oddly in IE9
|
|
324
|
+
* Corrects overflow displayed oddly in IE9.
|
|
330
325
|
*/
|
|
331
326
|
|
|
332
327
|
svg:not(:root) {
|
|
333
328
|
overflow: hidden;
|
|
334
329
|
}
|
|
335
330
|
|
|
336
|
-
|
|
337
|
-
/* =============================================================================
|
|
331
|
+
/* ==========================================================================
|
|
338
332
|
Figures
|
|
339
333
|
========================================================================== */
|
|
340
334
|
|
|
341
335
|
/*
|
|
342
|
-
* Addresses margin not present in IE6/7/8/9, S5, O11
|
|
336
|
+
* Addresses margin not present in IE6/7/8/9, S5, O11.
|
|
343
337
|
*/
|
|
344
338
|
|
|
345
339
|
figure {
|
|
346
340
|
margin: 0;
|
|
347
341
|
}
|
|
348
342
|
|
|
349
|
-
|
|
350
|
-
/* =============================================================================
|
|
343
|
+
/* ==========================================================================
|
|
351
344
|
Forms
|
|
352
345
|
========================================================================== */
|
|
353
346
|
|
|
354
347
|
/*
|
|
355
|
-
* Corrects margin displayed oddly in IE6/7
|
|
348
|
+
* Corrects margin displayed oddly in IE6/7.
|
|
356
349
|
*/
|
|
357
350
|
|
|
358
351
|
form {
|
|
@@ -360,7 +353,7 @@ form {
|
|
|
360
353
|
}
|
|
361
354
|
|
|
362
355
|
/*
|
|
363
|
-
* Define consistent border, margin, and padding
|
|
356
|
+
* Define consistent border, margin, and padding.
|
|
364
357
|
*/
|
|
365
358
|
|
|
366
359
|
fieldset {
|
|
@@ -370,9 +363,9 @@ fieldset {
|
|
|
370
363
|
}
|
|
371
364
|
|
|
372
365
|
/*
|
|
373
|
-
* 1. Corrects color not being inherited in IE6/7/8/9
|
|
374
|
-
* 2. Corrects text not wrapping in FF3
|
|
375
|
-
* 3. Corrects alignment displayed oddly in IE6/7
|
|
366
|
+
* 1. Corrects color not being inherited in IE6/7/8/9.
|
|
367
|
+
* 2. Corrects text not wrapping in FF3.
|
|
368
|
+
* 3. Corrects alignment displayed oddly in IE6/7.
|
|
376
369
|
*/
|
|
377
370
|
|
|
378
371
|
legend {
|
|
@@ -383,9 +376,9 @@ legend {
|
|
|
383
376
|
}
|
|
384
377
|
|
|
385
378
|
/*
|
|
386
|
-
* 1. Corrects font size not being inherited in all browsers
|
|
387
|
-
* 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
|
|
388
|
-
* 3. Improves appearance and consistency in all browsers
|
|
379
|
+
* 1. Corrects font size not being inherited in all browsers.
|
|
380
|
+
* 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome.
|
|
381
|
+
* 3. Improves appearance and consistency in all browsers.
|
|
389
382
|
*/
|
|
390
383
|
|
|
391
384
|
button,
|
|
@@ -399,32 +392,36 @@ textarea {
|
|
|
399
392
|
}
|
|
400
393
|
|
|
401
394
|
/*
|
|
402
|
-
* Addresses FF3/4 setting line-height on
|
|
395
|
+
* Addresses FF3/4 setting `line-height` on `input` using `!important` in the
|
|
396
|
+
* UA stylesheet.
|
|
403
397
|
*/
|
|
404
398
|
|
|
405
399
|
button,
|
|
406
400
|
input {
|
|
407
|
-
line-height: normal;
|
|
401
|
+
line-height: normal;
|
|
408
402
|
}
|
|
409
403
|
|
|
410
404
|
/*
|
|
411
|
-
* 1.
|
|
412
|
-
*
|
|
413
|
-
*
|
|
414
|
-
*
|
|
405
|
+
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
|
406
|
+
* and `video` controls.
|
|
407
|
+
* 2. Corrects inability to style clickable `input` types in iOS.
|
|
408
|
+
* 3. Improves usability and consistency of cursor style between image-type
|
|
409
|
+
* `input` and others.
|
|
410
|
+
* 4. Removes inner spacing in IE7 without affecting normal text inputs.
|
|
411
|
+
* Known issue: inner spacing remains in IE6.
|
|
415
412
|
*/
|
|
416
413
|
|
|
417
414
|
button,
|
|
418
|
-
input[type="button"],
|
|
415
|
+
html input[type="button"], /* 1 */
|
|
419
416
|
input[type="reset"],
|
|
420
417
|
input[type="submit"] {
|
|
421
|
-
cursor: pointer; /* 1 */
|
|
422
418
|
-webkit-appearance: button; /* 2 */
|
|
423
|
-
|
|
419
|
+
cursor: pointer; /* 3 */
|
|
420
|
+
*overflow: visible; /* 4 */
|
|
424
421
|
}
|
|
425
422
|
|
|
426
423
|
/*
|
|
427
|
-
* Re-set default cursor for disabled elements
|
|
424
|
+
* Re-set default cursor for disabled elements.
|
|
428
425
|
*/
|
|
429
426
|
|
|
430
427
|
button[disabled],
|
|
@@ -433,10 +430,10 @@ input[disabled] {
|
|
|
433
430
|
}
|
|
434
431
|
|
|
435
432
|
/*
|
|
436
|
-
* 1. Addresses box sizing set to content-box in IE8/9
|
|
437
|
-
* 2. Removes excess padding in IE8/9
|
|
438
|
-
* 3. Removes excess padding in IE7
|
|
439
|
-
|
|
433
|
+
* 1. Addresses box sizing set to content-box in IE8/9.
|
|
434
|
+
* 2. Removes excess padding in IE8/9.
|
|
435
|
+
* 3. Removes excess padding in IE7.
|
|
436
|
+
* Known issue: excess padding remains in IE6.
|
|
440
437
|
*/
|
|
441
438
|
|
|
442
439
|
input[type="checkbox"],
|
|
@@ -448,8 +445,9 @@ input[type="radio"] {
|
|
|
448
445
|
}
|
|
449
446
|
|
|
450
447
|
/*
|
|
451
|
-
* 1. Addresses appearance set to searchfield in S5, Chrome
|
|
452
|
-
* 2. Addresses box-sizing set to border-box in S5, Chrome (include
|
|
448
|
+
* 1. Addresses `appearance` set to `searchfield` in S5, Chrome.
|
|
449
|
+
* 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz`
|
|
450
|
+
* to future-proof).
|
|
453
451
|
*/
|
|
454
452
|
|
|
455
453
|
input[type="search"] {
|
|
@@ -460,17 +458,16 @@ input[type="search"] {
|
|
|
460
458
|
}
|
|
461
459
|
|
|
462
460
|
/*
|
|
463
|
-
* Removes inner padding and search cancel button in S5, Chrome on OS X
|
|
461
|
+
* Removes inner padding and search cancel button in S5, Chrome on OS X.
|
|
464
462
|
*/
|
|
465
463
|
|
|
466
|
-
input[type="search"]::-webkit-search-
|
|
467
|
-
input[type="search"]::-webkit-search-
|
|
464
|
+
input[type="search"]::-webkit-search-cancel-button,
|
|
465
|
+
input[type="search"]::-webkit-search-decoration {
|
|
468
466
|
-webkit-appearance: none;
|
|
469
467
|
}
|
|
470
468
|
|
|
471
469
|
/*
|
|
472
|
-
* Removes inner padding and border in FF3
|
|
473
|
-
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
|
|
470
|
+
* Removes inner padding and border in FF3+.
|
|
474
471
|
*/
|
|
475
472
|
|
|
476
473
|
button::-moz-focus-inner,
|
|
@@ -480,8 +477,8 @@ input::-moz-focus-inner {
|
|
|
480
477
|
}
|
|
481
478
|
|
|
482
479
|
/*
|
|
483
|
-
* 1. Removes default vertical scrollbar in IE6/7/8/9
|
|
484
|
-
* 2. Improves readability and alignment in all browsers
|
|
480
|
+
* 1. Removes default vertical scrollbar in IE6/7/8/9.
|
|
481
|
+
* 2. Improves readability and alignment in all browsers.
|
|
485
482
|
*/
|
|
486
483
|
|
|
487
484
|
textarea {
|
|
@@ -489,16 +486,15 @@ textarea {
|
|
|
489
486
|
vertical-align: top; /* 2 */
|
|
490
487
|
}
|
|
491
488
|
|
|
492
|
-
|
|
493
|
-
/* =============================================================================
|
|
489
|
+
/* ==========================================================================
|
|
494
490
|
Tables
|
|
495
491
|
========================================================================== */
|
|
496
492
|
|
|
497
493
|
/*
|
|
498
|
-
* Remove most spacing between table cells
|
|
494
|
+
* Remove most spacing between table cells.
|
|
499
495
|
*/
|
|
500
496
|
|
|
501
497
|
table {
|
|
502
498
|
border-collapse: collapse;
|
|
503
499
|
border-spacing: 0;
|
|
504
|
-
}
|
|
500
|
+
}
|