flutie2 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.textile +54 -0
- data/Rakefile +23 -0
- data/app/controllers/flutie/styleguides_controller.rb +25 -0
- data/app/views/flutie/styleguides/show.html.erb +274 -0
- data/app/views/layouts/flutie.html.haml +14 -0
- data/config/routes.rb +3 -0
- data/lib/flutie.rb +3 -0
- data/lib/flutie/engine.rb +6 -0
- data/lib/tasks/flutie.rake +17 -0
- data/public/images/input_bg.gif +0 -0
- data/public/stylesheets/flutie2.css +492 -0
- data/public/stylesheets/sass/_default.scss +39 -0
- data/public/stylesheets/sass/_forms.scss +71 -0
- data/public/stylesheets/sass/_functions.scss +83 -0
- data/public/stylesheets/sass/_grids.scss +15 -0
- data/public/stylesheets/sass/_html5.scss +3 -0
- data/public/stylesheets/sass/_lists.scss +38 -0
- data/public/stylesheets/sass/_prettify.scss +155 -0
- data/public/stylesheets/sass/_reset.scss +54 -0
- data/public/stylesheets/sass/_tables.scss +32 -0
- data/public/stylesheets/sass/flutie2.scss +10 -0
- metadata +87 -0
@@ -0,0 +1,39 @@
|
|
1
|
+
/* Success, error & notice boxes for messages and errors. */
|
2
|
+
div.error, div.notice, div.success,
|
3
|
+
#flash_failure, #flash_success, #flash_notice {
|
4
|
+
@include style-p-trbl(14);
|
5
|
+
@include style-m-trbl(14);
|
6
|
+
border: 1px solid;
|
7
|
+
color: #fff;
|
8
|
+
}
|
9
|
+
|
10
|
+
div.error,
|
11
|
+
#flash_failure {
|
12
|
+
border-color: darken(#B02B2C, 20%);
|
13
|
+
background: #B02B2C;
|
14
|
+
}
|
15
|
+
|
16
|
+
div.error a,
|
17
|
+
#flash_failure a {
|
18
|
+
}
|
19
|
+
|
20
|
+
div.notice,
|
21
|
+
#flash_notice {
|
22
|
+
border-color: darken(#356AA0, 20%);
|
23
|
+
background: #356AA0;
|
24
|
+
}
|
25
|
+
|
26
|
+
div.notice a,
|
27
|
+
#flash_notice a {
|
28
|
+
}
|
29
|
+
|
30
|
+
div.success,
|
31
|
+
#flash_success {
|
32
|
+
border-color: darken(#73880A, 20%);
|
33
|
+
background: #73880A;
|
34
|
+
}
|
35
|
+
|
36
|
+
div.success a,
|
37
|
+
#flash_success a {
|
38
|
+
}
|
39
|
+
|
@@ -0,0 +1,71 @@
|
|
1
|
+
/* Form */
|
2
|
+
form {
|
3
|
+
@include style-m-trbl(14);
|
4
|
+
table {
|
5
|
+
table-layout: auto;
|
6
|
+
}
|
7
|
+
tr, td {
|
8
|
+
border: 0 none;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
td.warning_dialog {
|
12
|
+
padding-top: 0;
|
13
|
+
font-size: 11px;
|
14
|
+
}
|
15
|
+
td.with_warning_dialog {
|
16
|
+
padding-bottom: 0;
|
17
|
+
}
|
18
|
+
td.label_text_area {
|
19
|
+
vertical-align: top;
|
20
|
+
padding-top: 1em * 1 / 2;
|
21
|
+
}
|
22
|
+
td.label {
|
23
|
+
text-align: right;
|
24
|
+
width: 10%;
|
25
|
+
}
|
26
|
+
tr {
|
27
|
+
}
|
28
|
+
td.text_field {
|
29
|
+
width: 90%;
|
30
|
+
input {
|
31
|
+
font-size: 16px;
|
32
|
+
padding: 1em * 1 / 4;
|
33
|
+
background: url("/images/input_bg.gif") repeat-x scroll center top #FFFFFF;
|
34
|
+
border: 1px solid;
|
35
|
+
border-color: #666666 #CCCCCC #CCCCCC;
|
36
|
+
width: 400px;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
td.text_area {
|
40
|
+
textarea {
|
41
|
+
font-size: 16px;
|
42
|
+
padding: 1em * 1 / 4;
|
43
|
+
height: 200px;
|
44
|
+
width: 400px;
|
45
|
+
background: url("/images/input_bg.gif") repeat-x scroll center top #FFFFFF;
|
46
|
+
border: 1px solid;
|
47
|
+
border-color:#666666 #CCCCCC #CCCCCC;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
td.select {
|
51
|
+
select {
|
52
|
+
font-size: 16px;
|
53
|
+
padding: 1em * 1 / 4;
|
54
|
+
border: 1px solid;
|
55
|
+
border-color: #666666 #CCCCCC #CCCCCC;
|
56
|
+
}
|
57
|
+
}
|
58
|
+
td.submit {
|
59
|
+
padding-top: 1em * 1 / 1;
|
60
|
+
input {
|
61
|
+
padding: 1em * 1 / 1.2;
|
62
|
+
cursor:pointer;
|
63
|
+
display:inline-block;
|
64
|
+
font-size:12px;
|
65
|
+
font-weight:bold;
|
66
|
+
@include style-s;
|
67
|
+
&:hover {
|
68
|
+
@include style-s-h;
|
69
|
+
}
|
70
|
+
}
|
71
|
+
}
|
@@ -0,0 +1,83 @@
|
|
1
|
+
/*
|
2
|
+
Formulas ritmo vertical:
|
3
|
+
(1 ÷ tamaño de fuente padre × requerido por el valor en pixel = valor en em)
|
4
|
+
|
5
|
+
m => margin
|
6
|
+
p => padding
|
7
|
+
t = top
|
8
|
+
l = left
|
9
|
+
b = bottom
|
10
|
+
r = right
|
11
|
+
*/
|
12
|
+
$parent_size: 16;
|
13
|
+
$base_size: 18;
|
14
|
+
@mixin style-m-w ($size: 14) {
|
15
|
+
width: 1em / $parent_size * $size;
|
16
|
+
margin-top: 1em * $base_size / 12;
|
17
|
+
margin-bottom: 1em * $base_size / 12;
|
18
|
+
margin-right: auto;
|
19
|
+
margin-left: auto;
|
20
|
+
}
|
21
|
+
@mixin style-p-trbl ($size: 14) {
|
22
|
+
padding: 1em * $base_size / $size;
|
23
|
+
font-size: 1em / $parent_size * $size;
|
24
|
+
line-height: 1em * $base_size / $size;
|
25
|
+
}
|
26
|
+
@mixin style-p-trl ($size: 14) {
|
27
|
+
padding-top: 1em * $base_size / $size;
|
28
|
+
padding-left: 1em * $base_size / $size;
|
29
|
+
padding-right: 1em * $base_size / $size;
|
30
|
+
padding-bottom: 0;
|
31
|
+
font-size: 1em / $parent_size * $size;
|
32
|
+
line-height: 1em * $base_size / $size;
|
33
|
+
}
|
34
|
+
@mixin style-m-trbl ($size: 14) {
|
35
|
+
margin: 1em * $base_size / $size;
|
36
|
+
font-size: 1em / $parent_size * $size;
|
37
|
+
line-height: 1em * $base_size / $size;
|
38
|
+
}
|
39
|
+
@mixin style-m-trl ($size: 14) {
|
40
|
+
margin-top: 1em * $base_size / $size;
|
41
|
+
margin-left: 1em * $base_size / $size;
|
42
|
+
margin-right: 1em * $base_size / $size;
|
43
|
+
margin-bottom: 0;
|
44
|
+
font-size: 1em / $parent_size * $size;
|
45
|
+
line-height: 1em * $base_size / $size;
|
46
|
+
}
|
47
|
+
@mixin style-s () {
|
48
|
+
color: #333333;
|
49
|
+
display:inline-block;
|
50
|
+
|
51
|
+
/* Background */
|
52
|
+
background: #286da3;
|
53
|
+
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF',endColorstr='#E1E1E1'); /* IE6,IE7 */
|
54
|
+
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#E1E1E1')"; /* IE8 */
|
55
|
+
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E1E1E1));
|
56
|
+
background: -moz-linear-gradient(-90deg, #FFFFFF, #E1E1E1) repeat scroll 0 0 transparent;
|
57
|
+
|
58
|
+
/* Border */
|
59
|
+
border:1px solid #EBEBEB;
|
60
|
+
-webkit-border-radius: 4px; /* Saf3-4 */
|
61
|
+
-moz-border-radius: 4px; /* FF1+ */
|
62
|
+
border-radius: 4px; /* Opera 10.5, IE 9, Saf5, Chrome */
|
63
|
+
|
64
|
+
/* Shadow */
|
65
|
+
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); /* Saf3.0+, Chrome */
|
66
|
+
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); /* FF3.5+ */
|
67
|
+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); /* Opera 10.5, IE 9.0 */
|
68
|
+
|
69
|
+
/* Aditional */
|
70
|
+
-webkit-font-smoothing: antialiased;
|
71
|
+
text-shadow:1px 1px 0 #FFFFFF;
|
72
|
+
}
|
73
|
+
@mixin style-s-h () {
|
74
|
+
border: 1px solid #0CA6DD;
|
75
|
+
color: #FFFFFF;
|
76
|
+
background: #286da3;
|
77
|
+
background:-moz-linear-gradient(-90deg, #0CA6DD, #0770A0) repeat scroll 0 0 transparent;
|
78
|
+
background:-webkit-gradient(linear,0% 0,0% 100%,from(#0CA6DD),to(#0770A0));
|
79
|
+
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0CA6DD',endColorstr='#0770A0');
|
80
|
+
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#0CA6DD', EndColorStr='#0770A0')"; /* IE8 */
|
81
|
+
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25);
|
82
|
+
}
|
83
|
+
|
@@ -0,0 +1,15 @@
|
|
1
|
+
@media screen and (max-width: 319px) {.unit{float: none !important; width: auto !important;}}
|
2
|
+
.line:after,.lastUnit:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";}
|
3
|
+
.line{*zoom:1;}
|
4
|
+
.unit{float:left;}
|
5
|
+
.size1of1{float:none;}
|
6
|
+
.size1of2{width:50%;}
|
7
|
+
.size1of3{width:33.33333%;}
|
8
|
+
.size2of3{width:66.66666%;}
|
9
|
+
.size1of4{width:25%;}
|
10
|
+
.size3of4{width:75%;}
|
11
|
+
.size1of5{width:20%;}
|
12
|
+
.size2of5{width:40%;}
|
13
|
+
.size3of5{width:60%;}
|
14
|
+
.size4of5{width:80%;}
|
15
|
+
.lastUnit{display:table-cell;float:none;width:auto;*display:block;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}
|
@@ -0,0 +1,38 @@
|
|
1
|
+
/* Lists */
|
2
|
+
ul, ol {
|
3
|
+
list-style-position: inside;
|
4
|
+
@include style-m-trbl(14);
|
5
|
+
}
|
6
|
+
|
7
|
+
li ul, li ol {
|
8
|
+
font-size: 1em;
|
9
|
+
}
|
10
|
+
|
11
|
+
ul {
|
12
|
+
list-style-type: disc;
|
13
|
+
}
|
14
|
+
|
15
|
+
ol {
|
16
|
+
list-style-type: decimal;
|
17
|
+
}
|
18
|
+
|
19
|
+
dl {
|
20
|
+
@include style-m-trbl(14);
|
21
|
+
}
|
22
|
+
|
23
|
+
dl dt {
|
24
|
+
font-weight: bold;
|
25
|
+
margin-top: 1em * $base_size / 12;
|
26
|
+
}
|
27
|
+
|
28
|
+
dl dd {
|
29
|
+
margin-bottom: 0em;
|
30
|
+
}
|
31
|
+
|
32
|
+
dd {
|
33
|
+
margin-left: 1em * $base_size / 12;
|
34
|
+
}
|
35
|
+
|
36
|
+
ol ol, ol ul, ul ul, ul ol {
|
37
|
+
margin-left: 1em * $base_size / 12;
|
38
|
+
}
|
@@ -0,0 +1,155 @@
|
|
1
|
+
*, :active, :focus {
|
2
|
+
outline:0 none;
|
3
|
+
}
|
4
|
+
body {
|
5
|
+
font-size: 1em;
|
6
|
+
font-family: Arial, Verdana, sans-serif;
|
7
|
+
/* Experimental: */
|
8
|
+
-webkit-user-select: none;
|
9
|
+
color: lighten(#000000, 20%);
|
10
|
+
}
|
11
|
+
div.wrap {
|
12
|
+
@include style-m-w(750);
|
13
|
+
}
|
14
|
+
h1, h2, h3, h4, h5, h6 {
|
15
|
+
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
|
16
|
+
color: #203360;
|
17
|
+
}
|
18
|
+
h1 {
|
19
|
+
@include style-p-trl(20);
|
20
|
+
font-weight: bold;
|
21
|
+
}
|
22
|
+
h2 {
|
23
|
+
@include style-p-trl(18);
|
24
|
+
word-spacing:-1px;
|
25
|
+
font-weight: normal;
|
26
|
+
}
|
27
|
+
h3 {
|
28
|
+
@include style-p-trl(16);
|
29
|
+
font-weight: bold;
|
30
|
+
}
|
31
|
+
h4 {
|
32
|
+
@include style-p-trl(16);
|
33
|
+
font-weight: bold;
|
34
|
+
}
|
35
|
+
h5 {
|
36
|
+
@include style-p-trl(16);
|
37
|
+
font-weight: bold;
|
38
|
+
}
|
39
|
+
h6 {
|
40
|
+
@include style-p-trl(16);
|
41
|
+
font-weight: bold;
|
42
|
+
}
|
43
|
+
p {
|
44
|
+
@include style-m-trbl(14);
|
45
|
+
}
|
46
|
+
|
47
|
+
|
48
|
+
/* Use this to create a horizontal ruler across a column. */
|
49
|
+
hr {
|
50
|
+
background: #000000;
|
51
|
+
border: none;
|
52
|
+
clear: both;
|
53
|
+
color: #000000;
|
54
|
+
float: none;
|
55
|
+
height: 1px;
|
56
|
+
@include style-m-trbl(14);
|
57
|
+
}
|
58
|
+
|
59
|
+
hr.space {
|
60
|
+
background: #fff;
|
61
|
+
color: #fff;
|
62
|
+
}
|
63
|
+
|
64
|
+
/* Clearfix hack I love you */
|
65
|
+
.clearfix:after {
|
66
|
+
content:".";
|
67
|
+
display:block;
|
68
|
+
height:0;
|
69
|
+
clear:both;
|
70
|
+
visibility:hidden;
|
71
|
+
}
|
72
|
+
|
73
|
+
.clearfix {display:inline-block;}
|
74
|
+
/* Hide from IE Mac \*/
|
75
|
+
.clearfix {display:block;}
|
76
|
+
/* End hide from IE Mac */
|
77
|
+
|
78
|
+
abbr, acronym {
|
79
|
+
border-bottom: 1px dotted #666;
|
80
|
+
cursor: help;
|
81
|
+
}
|
82
|
+
|
83
|
+
address {
|
84
|
+
font-style: italic;
|
85
|
+
@include style-m-trbl(14);
|
86
|
+
}
|
87
|
+
|
88
|
+
del {
|
89
|
+
color:#666;
|
90
|
+
}
|
91
|
+
|
92
|
+
a, a:link {
|
93
|
+
color: #1a4882;
|
94
|
+
text-decoration: underline;
|
95
|
+
}
|
96
|
+
|
97
|
+
a:visited {
|
98
|
+
color: #1a4882;
|
99
|
+
}
|
100
|
+
|
101
|
+
a:hover {
|
102
|
+
color: #052246;
|
103
|
+
}
|
104
|
+
|
105
|
+
a:active,
|
106
|
+
a:focus {
|
107
|
+
color: #1a4882;
|
108
|
+
}
|
109
|
+
|
110
|
+
blockquote {
|
111
|
+
@include style-m-trbl(14);
|
112
|
+
border-left: 4px solid #d1d1d1;
|
113
|
+
color: lighten(#000000, 50%);
|
114
|
+
font-style: italic;
|
115
|
+
font-size: 1em;
|
116
|
+
}
|
117
|
+
|
118
|
+
strong {
|
119
|
+
font-weight: bold;
|
120
|
+
}
|
121
|
+
|
122
|
+
em,
|
123
|
+
dfn {
|
124
|
+
font-style: italic;
|
125
|
+
}
|
126
|
+
|
127
|
+
dfn {
|
128
|
+
font-weight: bold;
|
129
|
+
}
|
130
|
+
|
131
|
+
pre, code {
|
132
|
+
@include style-m-trbl(14);
|
133
|
+
white-space: pre;
|
134
|
+
display: block;
|
135
|
+
}
|
136
|
+
|
137
|
+
pre, code, tt {
|
138
|
+
font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace;
|
139
|
+
}
|
140
|
+
|
141
|
+
pre.code {
|
142
|
+
background: #000;
|
143
|
+
color: #fff;
|
144
|
+
@include style-p-trbl(14);
|
145
|
+
code {
|
146
|
+
margin: 0;
|
147
|
+
}
|
148
|
+
}
|
149
|
+
|
150
|
+
tt {
|
151
|
+
display: block;
|
152
|
+
@include style-m-trbl(14);
|
153
|
+
}
|
154
|
+
|
155
|
+
|
@@ -0,0 +1,54 @@
|
|
1
|
+
/* http://meyerweb.com/eric/tools/css/reset/ */
|
2
|
+
/* v1.0 | 20080212 */
|
3
|
+
|
4
|
+
html, body, div, span, applet, object, iframe,
|
5
|
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
6
|
+
a, abbr, acronym, address, big, cite, code,
|
7
|
+
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
8
|
+
small, strike, strong, sub, sup, tt, var,
|
9
|
+
b, u, i, center,
|
10
|
+
dl, dt, dd, ol, ul, li,
|
11
|
+
fieldset, form, label, legend,
|
12
|
+
table, caption, tbody, tfoot, thead, tr, th, td {
|
13
|
+
margin: 0;
|
14
|
+
padding: 0;
|
15
|
+
border: 0;
|
16
|
+
outline: 0;
|
17
|
+
font-size: 100%;
|
18
|
+
vertical-align: baseline;
|
19
|
+
background: transparent;
|
20
|
+
}
|
21
|
+
body {
|
22
|
+
line-height: 1;
|
23
|
+
}
|
24
|
+
ol, ul {
|
25
|
+
list-style: none;
|
26
|
+
}
|
27
|
+
blockquote, q {
|
28
|
+
quotes: none;
|
29
|
+
}
|
30
|
+
blockquote:before, blockquote:after,
|
31
|
+
q:before, q:after {
|
32
|
+
content: '';
|
33
|
+
content: none;
|
34
|
+
}
|
35
|
+
|
36
|
+
/* remember to define focus styles! */
|
37
|
+
:focus {
|
38
|
+
outline: 0;
|
39
|
+
}
|
40
|
+
|
41
|
+
/* remember to highlight inserts somehow! */
|
42
|
+
ins {
|
43
|
+
text-decoration: none;
|
44
|
+
}
|
45
|
+
del {
|
46
|
+
text-decoration: line-through;
|
47
|
+
}
|
48
|
+
|
49
|
+
/* tables still need 'cellspacing="0"' in the markup */
|
50
|
+
table {
|
51
|
+
border-collapse: collapse;
|
52
|
+
border-spacing: 0;
|
53
|
+
}
|
54
|
+
|