edge_framework 0.2.1 → 0.2.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +8 -8
- data/assets/sass/edge/_base.scss +24 -15
- data/assets/sass/edge/components/_block-grid.scss +1 -0
- data/assets/sass/edge/components/_button.scss +2 -2
- data/assets/sass/edge/components/_form.scss +92 -10
- data/assets/sass/edge/components/_grid.scss +89 -59
- data/assets/sass/edge/components/_main.scss +2 -2
- data/assets/sass/edge/components/_typography.scss +17 -3
- data/assets/sass/for-test.scss +6 -0
- data/lib/edge/version.rb +1 -1
- data/template/base/assets/sass/_setting.scss +1 -0
- data/template/base/config.rb +1 -0
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
---
|
2
2
|
!binary "U0hBMQ==":
|
3
3
|
metadata.gz: !binary |-
|
4
|
-
|
4
|
+
YWY5MzQ3NGYyMDgwOTZiOTcyMDdiMGJhNzBlZmQ3Nzc4NmVmZjQwNA==
|
5
5
|
data.tar.gz: !binary |-
|
6
|
-
|
6
|
+
NDA0NDc2ZDBhZWVlNGJjZDA5OThkNmNkNmQ1OGFiN2Y1NmU5MmUxYg==
|
7
7
|
!binary "U0hBNTEy":
|
8
8
|
metadata.gz: !binary |-
|
9
|
-
|
10
|
-
|
11
|
-
|
9
|
+
Y2EyMWNmY2M5ZjQ1MTU2N2U2ZTc5Mzk0M2Q0YTI0NWQwZjFiMDhlMzA2ZjJj
|
10
|
+
M2E4YjI4NjhlNjAxZTc5NmMzNzQyMjUyMDRhNDE0ZDhjM2U2Njk3MTYyZTc3
|
11
|
+
YWY2MDVjYmZiMWJhNjYwNmIzZTc4Y2JkMjE3ZTM0YmVmMGFmNDQ=
|
12
12
|
data.tar.gz: !binary |-
|
13
|
-
|
14
|
-
|
15
|
-
|
13
|
+
Mzc4NTE3ZWUzNDlmMDljMmQ5OTVlNzA2OGZmYzg4ODUxZWVlNmQ4MDdiN2Zm
|
14
|
+
YTAxMjdlZTNiMzI2ZmY1ZmViOTE5NDExODk1YTRjMTFmNTg5ZmNjMDQxMzUx
|
15
|
+
ZTRlNGRkYTY4Y2E4OGZlOTNlNzE1MWY5NTBlN2I5OWMyNDFjMWI=
|
data/assets/sass/edge/_base.scss
CHANGED
@@ -55,6 +55,7 @@ $body-bg : #fff !default;
|
|
55
55
|
$body-font-color : #222 !default;
|
56
56
|
$body-font-weight : normal !default;
|
57
57
|
$body-font-style : normal !default;
|
58
|
+
$body-line-height : 1 !default;
|
58
59
|
|
59
60
|
$header-font-family : "Helvetica Neue", "Helvetica", Helvetica, Arial, "sans-serif" !default;
|
60
61
|
$body-font-family : "Helvetica", Helvetica, Arial, "sans-serif" !default;
|
@@ -132,25 +133,29 @@ $medium-screen : 1140px !default;
|
|
132
133
|
$large-screen : 1440px !default;
|
133
134
|
$retina-screen : 192dpi !default;
|
134
135
|
|
135
|
-
|
136
|
-
@mixin custom($size) {
|
136
|
+
@mixin below($size) {
|
137
137
|
@media only screen and (max-width: $size) { @content; }
|
138
138
|
}
|
139
|
+
|
140
|
+
@mixin above($size) {
|
141
|
+
@media only screen and (min-width: $size) { @content; }
|
142
|
+
}
|
143
|
+
|
139
144
|
// 480px and down
|
140
145
|
@mixin phone() {
|
141
|
-
@
|
146
|
+
@include below($phone-screen) { @content; }
|
142
147
|
}
|
143
148
|
// 767px and down
|
144
149
|
@mixin small() {
|
145
|
-
@
|
150
|
+
@include below($small-screen) { @content; }
|
146
151
|
}
|
147
152
|
// 768px and up. If you're planning to support IE8, NEVER use medium-up
|
148
153
|
@mixin medium-up() {
|
149
|
-
@
|
154
|
+
@include below($small-screen) { @content; }
|
150
155
|
}
|
151
156
|
// 1140px and down
|
152
157
|
@mixin medium() {
|
153
|
-
@
|
158
|
+
@include below($medium-screen) { @content; }
|
154
159
|
}
|
155
160
|
// large() is not needed, just put it outside media query
|
156
161
|
|
@@ -228,15 +233,19 @@ $retina-screen : 192dpi !default;
|
|
228
233
|
// SELECTION
|
229
234
|
// Change the text highlight color
|
230
235
|
// --------------------------------
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
236
|
+
|
237
|
+
@mixin selection($background-color:lighten($main-color, 35%), $color:white) {
|
238
|
+
::-moz-selection {
|
239
|
+
background: $background-color;
|
240
|
+
text-shadow: none !important;
|
241
|
+
color: $color !important;
|
242
|
+
}
|
243
|
+
|
244
|
+
::selection {
|
245
|
+
background: $background-color;
|
246
|
+
text-shadow: none !important;
|
247
|
+
color: $color !important;
|
248
|
+
}
|
240
249
|
}
|
241
250
|
|
242
251
|
// ------------------------------------------------------
|
@@ -1,17 +1,99 @@
|
|
1
|
-
|
1
|
+
// -------------
|
2
|
+
// FORM
|
3
|
+
// -------------
|
4
|
+
|
5
|
+
$input-padding : em(10px);
|
6
|
+
$input-border-style : 1px solid;
|
7
|
+
$input-border-color : $passive-color;
|
8
|
+
|
9
|
+
$input-border : $input-border-style $input-border-color;
|
10
|
+
$input-border-hover : $input-border-style darken($input-border-color, 10%);
|
11
|
+
$input-border-focus : $input-border-style $main-color;
|
12
|
+
|
13
|
+
$prefix-bg-color :$passive-color;
|
14
|
+
|
15
|
+
@mixin input() {
|
16
|
+
input[type="text"],
|
17
|
+
input[type="password"],
|
18
|
+
input[type="date"],
|
19
|
+
input[type="datetime"],
|
20
|
+
input[type="datetime-local"],
|
21
|
+
input[type="month"],
|
22
|
+
input[type="week"],
|
23
|
+
input[type="email"],
|
24
|
+
input[type="number"],
|
25
|
+
input[type="search"],
|
26
|
+
input[type="tel"],
|
27
|
+
input[type="time"],
|
28
|
+
input[type="url"],
|
29
|
+
select,
|
30
|
+
textarea {
|
31
|
+
@content;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
// Style for generic input
|
36
|
+
@mixin form-input($padding: $input-padding) {
|
37
|
+
width: 100%;
|
38
|
+
outline: none;
|
39
|
+
padding: $input-padding;
|
40
|
+
border: $input-border;
|
41
|
+
|
42
|
+
&:hover {
|
43
|
+
border: $input-border-hover;
|
44
|
+
@include box-shadow(inset 0 0 3px $input-border-color);
|
45
|
+
}
|
46
|
+
|
47
|
+
&:focus {
|
48
|
+
border: $input-border-focus;
|
49
|
+
@include box-shadow(inset 0 1px 3px -1px $main-color);
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
53
|
+
// Style for label
|
54
|
+
@mixin form-label($padding: $input-padding, $bg-color: $prefix-bg-color) {
|
55
|
+
display: block;
|
56
|
+
line-height: normal;
|
57
|
+
padding: $padding;
|
58
|
+
border: $input-border-style transparent; // to make it vertically centered
|
2
59
|
|
3
|
-
|
4
|
-
input
|
5
|
-
|
60
|
+
&.prefix {
|
61
|
+
border: $input-border-style $bg-color;
|
62
|
+
border-right: none;
|
63
|
+
width: 100%;
|
64
|
+
|
65
|
+
text-align: center;
|
66
|
+
background: $bg-color;
|
67
|
+
color: contrast-color($bg-color, #333, white, 60%);
|
68
|
+
}
|
6
69
|
}
|
7
70
|
|
8
|
-
// Disable
|
9
|
-
|
10
|
-
|
71
|
+
// Disable unnecessary default styling from browser
|
72
|
+
@mixin form-disable-default() {
|
73
|
+
// Disable Chrome's datepicker
|
74
|
+
input::-webkit-calendar-picker-indicator{
|
75
|
+
display: none;
|
76
|
+
}
|
77
|
+
|
78
|
+
input[type="date"]::-webkit-input-placeholder{
|
79
|
+
visibility: hidden !important;
|
80
|
+
}
|
11
81
|
}
|
12
82
|
|
13
|
-
|
14
|
-
|
83
|
+
@if $include-form {
|
84
|
+
|
85
|
+
/* ---------------
|
86
|
+
EDGE Form
|
87
|
+
--------------- */
|
88
|
+
|
89
|
+
@include input {
|
90
|
+
@include form-input();
|
91
|
+
}
|
92
|
+
|
93
|
+
label {
|
94
|
+
@include form-label();
|
15
95
|
}
|
16
96
|
|
17
|
-
|
97
|
+
@include form-disable-default();
|
98
|
+
|
99
|
+
} // $include-form
|
@@ -1,9 +1,9 @@
|
|
1
1
|
// -----------------------------------------
|
2
2
|
// GRID
|
3
|
-
// Based
|
3
|
+
// Based on ZURB's Foundation 4
|
4
4
|
// -----------------------------------------
|
5
5
|
|
6
|
-
$column-distance :
|
6
|
+
$column-distance : 20px !default;
|
7
7
|
$row-max-width : $content-width !default;
|
8
8
|
$total-columns : 12 !default;
|
9
9
|
|
@@ -14,7 +14,8 @@ $total-columns : 12 !default;
|
|
14
14
|
|
15
15
|
// For creating container, nested, and collapsed rows.
|
16
16
|
@mixin grid-row(
|
17
|
-
$
|
17
|
+
$nest : false,
|
18
|
+
$collapse : false,
|
18
19
|
$for-base : false,
|
19
20
|
$max-width : $row-max-width,
|
20
21
|
$distance : $column-distance ) {
|
@@ -25,28 +26,28 @@ $total-columns : 12 !default;
|
|
25
26
|
@if $for-base == false {
|
26
27
|
@include clearfix;
|
27
28
|
}
|
29
|
+
|
30
|
+
@if $nest and $collapse {
|
31
|
+
width : auto;
|
32
|
+
max-width : none;
|
33
|
+
margin : 0;
|
34
|
+
padding-#{$default-float} : 0;
|
35
|
+
padding-#{$default-opposite} : 0;
|
36
|
+
}
|
28
37
|
|
29
|
-
|
30
|
-
@if $behavior == nest {
|
38
|
+
@else if $nest {
|
31
39
|
width : auto;
|
32
40
|
max-width : none;
|
33
41
|
margin-#{$default-float} : -($distance / 2);
|
34
42
|
margin-#{$default-opposite} : -($distance / 2);
|
35
43
|
}
|
36
44
|
|
37
|
-
|
38
|
-
@else if $behavior == collapse {
|
45
|
+
@else if $collapse {
|
39
46
|
width : 100%;
|
40
47
|
max-width : $max-width;
|
41
|
-
margin : 0;
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
// use @include grid-row(nest-collapse); to collapse outer margins on a nested row
|
46
|
-
@else if $behavior == nest-collapse {
|
47
|
-
width : auto;
|
48
|
-
max-width : none;
|
49
|
-
margin : 0;
|
48
|
+
margin : 0 auto;
|
49
|
+
padding-#{$default-float} : $distance / 2;
|
50
|
+
padding-#{$default-opposite} : $distance / 2;
|
50
51
|
}
|
51
52
|
|
52
53
|
// use @include grid-row; to use a container row
|
@@ -154,11 +155,36 @@ EDGE Grid
|
|
154
155
|
body {
|
155
156
|
&.not-responsive {
|
156
157
|
min-width : $row-max-width;
|
158
|
+
|
159
|
+
.row {
|
160
|
+
min-width: em($row-max-width + $column-distance);
|
161
|
+
|
162
|
+
.column,
|
163
|
+
.columns {
|
164
|
+
}
|
165
|
+
|
166
|
+
// Nested row
|
167
|
+
.row {
|
168
|
+
min-width: 0;
|
169
|
+
}
|
170
|
+
}
|
157
171
|
}
|
158
172
|
&.only-responsive-below-small {
|
159
173
|
min-width : $row-max-width;
|
174
|
+
.row {
|
175
|
+
min-width: em($row-max-width);
|
176
|
+
|
177
|
+
// Nested row
|
178
|
+
.row {
|
179
|
+
min-width: 0;
|
180
|
+
}
|
181
|
+
}
|
182
|
+
|
160
183
|
@include small {
|
161
184
|
min-width : 0;
|
185
|
+
.row {
|
186
|
+
min-width: 0;
|
187
|
+
}
|
162
188
|
}
|
163
189
|
}
|
164
190
|
}
|
@@ -168,6 +194,7 @@ body {
|
|
168
194
|
|
169
195
|
// Collapsed row
|
170
196
|
&.collapse {
|
197
|
+
@include grid-row($collapse:true, $for-base:false);
|
171
198
|
.column,
|
172
199
|
.columns {
|
173
200
|
@include grid-column($collapse:true, $for-base:false);
|
@@ -176,68 +203,71 @@ body {
|
|
176
203
|
|
177
204
|
// Nested-collapsed row
|
178
205
|
.row {
|
179
|
-
@include grid-row($
|
206
|
+
@include grid-row($nest:true);
|
180
207
|
&.collapse {
|
181
|
-
@include grid-row($
|
208
|
+
@include grid-row($nest:true, $collapse:true);
|
182
209
|
}
|
183
210
|
}
|
184
|
-
|
185
|
-
// Normal column
|
186
|
-
.column,
|
187
|
-
.columns {
|
188
|
-
@include grid-column($columns:$total-columns);
|
189
|
-
}
|
190
|
-
|
211
|
+
}
|
191
212
|
|
192
|
-
|
193
|
-
|
194
|
-
|
213
|
+
// Normal column
|
214
|
+
.column,
|
215
|
+
.columns {
|
216
|
+
@include grid-column($columns:$total-columns);
|
217
|
+
}
|
218
|
+
|
219
|
+
|
220
|
+
@for $i from 1 through $total-columns {
|
221
|
+
.large#{-$i} { @include grid-column($columns:$i, $collapse:null, $float:false, $for-base:true); }
|
222
|
+
}
|
195
223
|
|
196
|
-
|
224
|
+
// Centered column
|
225
|
+
.column.large-centered,
|
226
|
+
.columns.large-centered {
|
227
|
+
@include grid-column($center:true, $collapse:null, $float:false);
|
228
|
+
}
|
229
|
+
|
230
|
+
@include medium-up {
|
231
|
+
@for $i from 1 through $total-columns - 1 {
|
197
232
|
.row .large-offset-#{$i} {
|
198
233
|
@include grid-column($offset:$i, $collapse:null, $float:false, $for-base:true);
|
199
234
|
}
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
@include grid-column($center:true, $collapse:null, $float:false);
|
206
|
-
}
|
207
|
-
|
208
|
-
@include medium-up {
|
209
|
-
@for $i from 1 through $total-columns - 1 {
|
210
|
-
.push#{-$i} {
|
211
|
-
@include grid-column($push:$i, $collapse:null, $float:false, $for-base:true);
|
212
|
-
}
|
213
|
-
.pull#{-$i} {
|
214
|
-
@include grid-column($pull:$i, $collapse:null, $float:false, $for-base:true);
|
215
|
-
}
|
235
|
+
.push#{-$i} {
|
236
|
+
@include grid-column($push:$i, $collapse:null, $float:false, $for-base:true);
|
237
|
+
}
|
238
|
+
.pull#{-$i} {
|
239
|
+
@include grid-column($pull:$i, $collapse:null, $float:false, $for-base:true);
|
216
240
|
}
|
217
241
|
}
|
242
|
+
}
|
218
243
|
|
219
|
-
|
220
|
-
|
244
|
+
// Small screen and below
|
245
|
+
@include small {
|
246
|
+
// Expand large column only if it's responsive site
|
247
|
+
body:not(.not-responsive) {
|
221
248
|
.column,
|
222
249
|
.columns {
|
223
250
|
@include grid-column($columns:$total-columns);
|
224
251
|
}
|
252
|
+
}
|
253
|
+
|
225
254
|
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
}
|
255
|
+
@for $i from 1 through $total-columns {
|
256
|
+
.small#{-$i} {
|
257
|
+
@include grid-column($columns:$i, $collapse:null, $float:false, $for-base:true);
|
230
258
|
}
|
259
|
+
}
|
231
260
|
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
}
|
261
|
+
@for $i from 0 through $total-columns - 2 {
|
262
|
+
.small-offset-#{$i} {
|
263
|
+
@include grid-column($offset:$i, $collapse:null, $float:false, $for-base:true);
|
236
264
|
}
|
265
|
+
}
|
237
266
|
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
}
|
267
|
+
.column.small-centered,
|
268
|
+
.columns.small-centered {
|
269
|
+
@include grid-column($center:true, $collapse:null, $float:false);
|
242
270
|
}
|
271
|
+
}
|
272
|
+
|
243
273
|
} // $include-grid
|
@@ -25,10 +25,10 @@ body {
|
|
25
25
|
font-family : $body-font-family;
|
26
26
|
font-weight : $body-font-weight;
|
27
27
|
font-style : $body-font-style;
|
28
|
-
line-height :
|
28
|
+
line-height : $body-line-height;
|
29
29
|
}
|
30
30
|
|
31
|
-
h1, h2, h3, h4, h5, h6 {
|
31
|
+
h1, h2, h3, h4, h5, h6, header {
|
32
32
|
font-family : $header-font-family;
|
33
33
|
}
|
34
34
|
|
@@ -1,13 +1,14 @@
|
|
1
1
|
// HEADER
|
2
2
|
$h1-font-size: em(44px) !default;
|
3
|
-
$h2-font-size: em(
|
4
|
-
$h3-font-size: em(
|
5
|
-
$h4-font-size: em(
|
3
|
+
$h2-font-size: em(36px) !default;
|
4
|
+
$h3-font-size: em(28px) !default;
|
5
|
+
$h4-font-size: em(22px) !default;
|
6
6
|
$h5-font-size: em(18px) !default;
|
7
7
|
$h6-font-size: 1em !default;
|
8
8
|
|
9
9
|
$header-font-weight: 700 !default;
|
10
10
|
|
11
|
+
$p-margin-bottom: em(30px) !default;
|
11
12
|
|
12
13
|
@if $include-typography {
|
13
14
|
|
@@ -22,6 +23,12 @@ h4 { font-size: $h4-font-size }
|
|
22
23
|
h5 { font-size: $h5-font-size; }
|
23
24
|
h6 { font-size: $h6-font-size; }
|
24
25
|
|
26
|
+
p {
|
27
|
+
margin-bottom: $p-margin-bottom;
|
28
|
+
&:last-of-type {
|
29
|
+
margin-bottom: 0;
|
30
|
+
}
|
31
|
+
}
|
25
32
|
|
26
33
|
code {
|
27
34
|
display : inline-block;
|
@@ -35,6 +42,13 @@ ul.inline, ol.inline {
|
|
35
42
|
li {
|
36
43
|
display : inline-block;
|
37
44
|
vertical-align:top;
|
45
|
+
margin-right: em(-4px);
|
46
|
+
}
|
47
|
+
}
|
48
|
+
|
49
|
+
blockquote {
|
50
|
+
cite {
|
51
|
+
display: block;
|
38
52
|
}
|
39
53
|
}
|
40
54
|
|
data/assets/sass/for-test.scss
CHANGED
data/lib/edge/version.rb
CHANGED
@@ -33,6 +33,7 @@
|
|
33
33
|
// $body-font-color : #222;
|
34
34
|
// $body-font-weight : normal;
|
35
35
|
// $body-font-style : normal;
|
36
|
+
// $body-line-height : 1 !default;
|
36
37
|
|
37
38
|
// $header-font-family : "Helvetica Neue", "Helvetica", Helvetica, Arial, "sans-serif";
|
38
39
|
// $body-font-family : "Helvetica", Helvetica, Arial, "sans-serif";
|
data/template/base/config.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: edge_framework
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.2.
|
4
|
+
version: 0.2.3
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Henner Setyono
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2013-09-
|
11
|
+
date: 2013-09-19 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|