mindy 0.1.3.2 → 0.1.3.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/lib/mindy.rb +2 -2
- data/stylesheets/mindy/css3/_formalize.scss +197 -234
- metadata +3 -4
- data/stylesheets/mindy/css3/_multi_line_buttons.sass +0 -53
data/lib/mindy.rb
CHANGED
|
@@ -4,270 +4,233 @@
|
|
|
4
4
|
|
|
5
5
|
@import "compass/css3";
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
@mixin formalize() {
|
|
8
|
+
// `UI Consistency
|
|
9
|
+
//----------------------------------------------------------------------------------------------------
|
|
9
10
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.input_small {
|
|
15
|
-
width: 100px;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.input_medium {
|
|
19
|
-
width: 150px;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.input_large {
|
|
23
|
-
width: 200px;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.input_xlarge {
|
|
27
|
-
width: 250px;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.input_xxlarge {
|
|
31
|
-
width: 300px;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.input_full {
|
|
35
|
-
width: 100%;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
// Added via JS to <textarea> and class="input-full".
|
|
39
|
-
// Applies only to IE7. Other browsers don't need it.
|
|
40
|
-
|
|
41
|
-
.input_full_wrap {
|
|
42
|
-
display: block;
|
|
43
|
-
padding-right: 8px;
|
|
44
|
-
}
|
|
11
|
+
input[type="search"]::-webkit-search-decoration {
|
|
12
|
+
display: none;
|
|
13
|
+
}
|
|
45
14
|
|
|
46
|
-
|
|
47
|
-
|
|
15
|
+
input,
|
|
16
|
+
select,
|
|
17
|
+
textarea {
|
|
18
|
+
// Suppress red glow that Firefox
|
|
19
|
+
// adds to form fields by default.
|
|
20
|
+
&:invalid {
|
|
21
|
+
@include box-shadow(none);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
48
24
|
|
|
49
|
-
input[type="
|
|
50
|
-
|
|
51
|
-
|
|
25
|
+
input[type="file"],
|
|
26
|
+
input[type="radio"],
|
|
27
|
+
input[type="checkbox"] {
|
|
28
|
+
&:focus,
|
|
29
|
+
&:active {
|
|
30
|
+
@include box-shadow(none);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
52
33
|
|
|
53
|
-
|
|
54
|
-
select,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
34
|
+
textarea,
|
|
35
|
+
select,
|
|
36
|
+
input[type="date"],
|
|
37
|
+
input[type="datetime"],
|
|
38
|
+
input[type="datetime-local"],
|
|
39
|
+
input[type="email"],
|
|
40
|
+
input[type="month"],
|
|
41
|
+
input[type="number"],
|
|
42
|
+
input[type="password"],
|
|
43
|
+
input[type="search"],
|
|
44
|
+
input[type="tel"],
|
|
45
|
+
input[type="text"],
|
|
46
|
+
input[type="time"],
|
|
47
|
+
input[type="url"],
|
|
48
|
+
input[type="week"] {
|
|
49
|
+
@include box-sizing(border-box);
|
|
50
|
+
@include background-clip(padding-box);
|
|
51
|
+
@include border-radius(0);
|
|
52
|
+
-webkit-appearance: none;
|
|
53
|
+
background-color: white;
|
|
54
|
+
border: 1px solid;
|
|
55
|
+
border-color: #848484 #c1c1c1 #e1e1e1;
|
|
56
|
+
color: black;
|
|
57
|
+
outline: 0;
|
|
58
|
+
margin: 0;
|
|
59
|
+
padding: 2px 3px;
|
|
60
|
+
text-align: left;
|
|
61
|
+
font-size: inherit;
|
|
62
|
+
// Leaving out Helvetica Neue, to not throw off size="..."
|
|
63
|
+
// on inputs. Arial is more reliable, on Windows and OS X.
|
|
64
|
+
font-family: inherit;
|
|
65
|
+
height: 1.8em;
|
|
66
|
+
vertical-align: top;
|
|
67
|
+
// IE7
|
|
68
|
+
*padding-top: 2px;
|
|
69
|
+
*padding-bottom: 1px;
|
|
70
|
+
*height: auto;
|
|
71
|
+
&[disabled] {
|
|
72
|
+
background-color: #eeeeee;
|
|
73
|
+
}
|
|
60
74
|
}
|
|
61
|
-
}
|
|
62
75
|
|
|
63
|
-
input[
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
76
|
+
input[disabled],
|
|
77
|
+
select[disabled],
|
|
78
|
+
select[disabled] option,
|
|
79
|
+
select[disabled] optgroup,
|
|
80
|
+
textarea[disabled]{
|
|
68
81
|
@include box-shadow(none);
|
|
82
|
+
-moz-user-select: -moz-none;
|
|
83
|
+
-webkit-user-select: none;
|
|
84
|
+
-khtml-user-select: none;
|
|
85
|
+
user-select: none;
|
|
86
|
+
color: #888888;
|
|
87
|
+
cursor: default;
|
|
69
88
|
}
|
|
70
|
-
}
|
|
71
89
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
input
|
|
76
|
-
input
|
|
77
|
-
|
|
78
|
-
input[type="month"],
|
|
79
|
-
input[type="number"],
|
|
80
|
-
input[type="password"],
|
|
81
|
-
input[type="search"],
|
|
82
|
-
input[type="tel"],
|
|
83
|
-
input[type="text"],
|
|
84
|
-
input[type="time"],
|
|
85
|
-
input[type="url"],
|
|
86
|
-
input[type="week"] {
|
|
87
|
-
@include box-sizing(border-box);
|
|
88
|
-
@include background-clip(padding-box);
|
|
89
|
-
@include border-radius(0);
|
|
90
|
-
-webkit-appearance: none;
|
|
91
|
-
background-color: white;
|
|
92
|
-
border: 1px solid;
|
|
93
|
-
border-color: #848484 #c1c1c1 #e1e1e1;
|
|
94
|
-
color: black;
|
|
95
|
-
outline: 0;
|
|
96
|
-
margin: 0;
|
|
97
|
-
padding: 2px 3px;
|
|
98
|
-
text-align: left;
|
|
99
|
-
font-size: inherit;
|
|
100
|
-
// Leaving out Helvetica Neue, to not throw off size="..."
|
|
101
|
-
// on inputs. Arial is more reliable, on Windows and OS X.
|
|
102
|
-
font-family: inherit;
|
|
103
|
-
height: 1.8em;
|
|
104
|
-
vertical-align: top;
|
|
105
|
-
// IE7
|
|
106
|
-
*padding-top: 2px;
|
|
107
|
-
*padding-bottom: 1px;
|
|
108
|
-
*height: auto;
|
|
109
|
-
&[disabled] {
|
|
110
|
-
background-color: #eeeeee;
|
|
90
|
+
// Separate rule for Firefox.
|
|
91
|
+
// Separate rule for IE, too.
|
|
92
|
+
// Cannot stack with WebKit's.
|
|
93
|
+
input::-webkit-input-placeholder,
|
|
94
|
+
textarea::-webkit-input-placeholder {
|
|
95
|
+
color: #888888;
|
|
111
96
|
}
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
input[disabled],
|
|
115
|
-
select[disabled],
|
|
116
|
-
select[disabled] option,
|
|
117
|
-
select[disabled] optgroup,
|
|
118
|
-
textarea[disabled]{
|
|
119
|
-
@include box-shadow(none);
|
|
120
|
-
-moz-user-select: -moz-none;
|
|
121
|
-
-webkit-user-select: none;
|
|
122
|
-
-khtml-user-select: none;
|
|
123
|
-
user-select: none;
|
|
124
|
-
color: #888888;
|
|
125
|
-
cursor: default;
|
|
126
|
-
}
|
|
127
97
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
textarea::-webkit-input-placeholder {
|
|
133
|
-
color: #888888;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
input:-moz-placeholder,
|
|
137
|
-
textarea:-moz-placeholder {
|
|
138
|
-
color: #888888;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
input.placeholder_text,
|
|
142
|
-
textarea.placeholder_text {
|
|
143
|
-
color: #888888;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
textarea,
|
|
147
|
-
select[size],
|
|
148
|
-
select[multiple] {
|
|
149
|
-
height: auto;
|
|
150
|
-
}
|
|
98
|
+
input:-moz-placeholder,
|
|
99
|
+
textarea:-moz-placeholder {
|
|
100
|
+
color: #888888;
|
|
101
|
+
}
|
|
151
102
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
height: 1.8em;
|
|
157
|
-
// IE7
|
|
158
|
-
*height: auto;
|
|
159
|
-
}
|
|
103
|
+
input.placeholder_text,
|
|
104
|
+
textarea.placeholder_text {
|
|
105
|
+
color: #888888;
|
|
106
|
+
}
|
|
160
107
|
|
|
161
|
-
|
|
162
|
-
@media (-webkit-min-device-pixel-ratio: 0) {
|
|
108
|
+
textarea,
|
|
163
109
|
select[size],
|
|
164
|
-
select[multiple]
|
|
165
|
-
|
|
166
|
-
background-image: none;
|
|
167
|
-
padding-right: 3px;
|
|
110
|
+
select[multiple] {
|
|
111
|
+
height: auto;
|
|
168
112
|
}
|
|
169
|
-
|
|
113
|
+
|
|
114
|
+
// Set height back to normal,
|
|
115
|
+
// for Opera, WebKit, and IE.
|
|
170
116
|
select[size="0"],
|
|
171
117
|
select[size="1"] {
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
background-position: right center;
|
|
176
|
-
padding-right: 20px;
|
|
177
|
-
}
|
|
178
|
-
::-webkit-validation-bubble-message {
|
|
179
|
-
-webkit-box-shadow: none;
|
|
180
|
-
box-shadow: none;
|
|
181
|
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, black));
|
|
182
|
-
border: 1px solid;
|
|
183
|
-
border-color: #747474 #5e5e5e #4f4f4f;
|
|
184
|
-
color: white;
|
|
185
|
-
font-family: inherit;
|
|
186
|
-
//font: 13px / 17px "Lucida Grande", Arial, "Liberation Sans", FreeSans, sans-serif;
|
|
187
|
-
font-size: inherit;
|
|
188
|
-
overflow: hidden;
|
|
189
|
-
padding: 15px 15px 17px;
|
|
190
|
-
text-shadow: black 0 0 1px;
|
|
191
|
-
height: 16px;
|
|
118
|
+
height: 1.8em;
|
|
119
|
+
// IE7
|
|
120
|
+
*height: auto;
|
|
192
121
|
}
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
122
|
+
|
|
123
|
+
// Tweaks for Safari + Chrome.
|
|
124
|
+
@media (-webkit-min-device-pixel-ratio: 0) {
|
|
125
|
+
select[size],
|
|
126
|
+
select[multiple],
|
|
127
|
+
select[multiple][size] {
|
|
128
|
+
background-image: none;
|
|
129
|
+
padding-right: 3px;
|
|
130
|
+
}
|
|
131
|
+
select,
|
|
132
|
+
select[size="0"],
|
|
133
|
+
select[size="1"] {
|
|
134
|
+
// Base64 encoded "../images/select_arrow.gif"
|
|
135
|
+
background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);
|
|
136
|
+
background-repeat: no-repeat;
|
|
137
|
+
background-position: right center;
|
|
138
|
+
padding-right: 20px;
|
|
139
|
+
}
|
|
140
|
+
::-webkit-validation-bubble-message {
|
|
141
|
+
-webkit-box-shadow: none;
|
|
142
|
+
box-shadow: none;
|
|
143
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, black));
|
|
144
|
+
border: 1px solid;
|
|
145
|
+
border-color: #747474 #5e5e5e #4f4f4f;
|
|
146
|
+
color: white;
|
|
147
|
+
font-family: inherit;
|
|
148
|
+
//font: 13px / 17px "Lucida Grande", Arial, "Liberation Sans", FreeSans, sans-serif;
|
|
149
|
+
font-size: inherit;
|
|
150
|
+
overflow: hidden;
|
|
151
|
+
padding: 15px 15px 17px;
|
|
152
|
+
text-shadow: black 0 0 1px;
|
|
153
|
+
height: 16px;
|
|
154
|
+
}
|
|
155
|
+
::-webkit-validation-bubble-arrow,
|
|
156
|
+
::-webkit-validation-bubble-top-outer-arrow,
|
|
157
|
+
::-webkit-validation-bubble-top-inner-arrow {
|
|
158
|
+
-webkit-box-shadow: none;
|
|
159
|
+
box-shadow: none;
|
|
160
|
+
background: #666666;
|
|
161
|
+
border: 0;
|
|
162
|
+
}
|
|
200
163
|
}
|
|
201
|
-
}
|
|
202
164
|
|
|
203
|
-
textarea {
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
}
|
|
165
|
+
textarea {
|
|
166
|
+
min-height: 40px;
|
|
167
|
+
overflow: auto;
|
|
168
|
+
resize: vertical;
|
|
169
|
+
width: 100%;
|
|
170
|
+
}
|
|
209
171
|
|
|
210
|
-
optgroup {
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
172
|
+
optgroup {
|
|
173
|
+
color: black;
|
|
174
|
+
font-style: normal;
|
|
175
|
+
font-weight: normal;
|
|
176
|
+
// Font family repeated, for Firefox.
|
|
177
|
+
//font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
|
|
178
|
+
font-family: inherit;
|
|
179
|
+
// Kill phantom spacing and dotted
|
|
180
|
+
// border that appears in Firefox.
|
|
181
|
+
&::-moz-focus-inner {
|
|
182
|
+
border: 0;
|
|
183
|
+
padding: 0;
|
|
184
|
+
}
|
|
222
185
|
}
|
|
223
|
-
}
|
|
224
186
|
|
|
225
|
-
// `IE6
|
|
226
|
-
//----------------------------------------------------------------------------------------------------
|
|
187
|
+
// `IE6
|
|
188
|
+
//----------------------------------------------------------------------------------------------------
|
|
227
189
|
|
|
228
|
-
// Everything below this line is for IE6.
|
|
229
|
-
// Delete it if you don't support it! :)
|
|
190
|
+
// Everything below this line is for IE6.
|
|
191
|
+
// Delete it if you don't support it! :)
|
|
230
192
|
|
|
231
|
-
// Classes are added dynamically via JS,
|
|
232
|
-
// because IE6 doesn't support attribute
|
|
233
|
-
// selectors: .ie6_button, .ie6_input, etc.
|
|
193
|
+
// Classes are added dynamically via JS,
|
|
194
|
+
// because IE6 doesn't support attribute
|
|
195
|
+
// selectors: .ie6_button, .ie6_input, etc.
|
|
234
196
|
|
|
235
|
-
// Note: These style rules are somewhat
|
|
236
|
-
// duplicated because IE6 bombs out when
|
|
237
|
-
// it sees attribute selectors. Example:
|
|
197
|
+
// Note: These style rules are somewhat
|
|
198
|
+
// duplicated because IE6 bombs out when
|
|
199
|
+
// it sees attribute selectors. Example:
|
|
238
200
|
|
|
239
|
-
// .ie6_button {
|
|
240
|
-
// This works in IE6.
|
|
241
|
-
// }
|
|
201
|
+
// .ie6_button {
|
|
202
|
+
// This works in IE6.
|
|
203
|
+
// }
|
|
242
204
|
|
|
243
|
-
// .ie6_button,
|
|
244
|
-
// input[type=submit] {
|
|
245
|
-
// This doesn't work.
|
|
246
|
-
// }
|
|
205
|
+
// .ie6_button,
|
|
206
|
+
// input[type=submit] {
|
|
207
|
+
// This doesn't work.
|
|
208
|
+
// }
|
|
247
209
|
|
|
248
|
-
.ie6_input,
|
|
249
|
-
* html textarea,
|
|
250
|
-
* html select {
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
}
|
|
210
|
+
.ie6_input,
|
|
211
|
+
* html textarea,
|
|
212
|
+
* html select {
|
|
213
|
+
background: white;
|
|
214
|
+
border: 1px solid;
|
|
215
|
+
border-color: #848484 #c1c1c1 #e1e1e1;
|
|
216
|
+
color: black;
|
|
217
|
+
padding: 2px 3px 1px;
|
|
218
|
+
font-size: 13px;
|
|
219
|
+
font-family: Arial, sans-serif;
|
|
220
|
+
vertical-align: top;
|
|
221
|
+
}
|
|
260
222
|
|
|
261
|
-
* html select {
|
|
262
|
-
|
|
263
|
-
}
|
|
223
|
+
* html select {
|
|
224
|
+
margin-top: 1px;
|
|
225
|
+
}
|
|
264
226
|
|
|
265
|
-
.placeholder_text,
|
|
266
|
-
.ie6_input_disabled,
|
|
267
|
-
.ie6_button_disabled {
|
|
268
|
-
|
|
269
|
-
}
|
|
227
|
+
.placeholder_text,
|
|
228
|
+
.ie6_input_disabled,
|
|
229
|
+
.ie6_button_disabled {
|
|
230
|
+
color: #888888;
|
|
231
|
+
}
|
|
270
232
|
|
|
271
|
-
.ie6_input_disabled {
|
|
272
|
-
|
|
233
|
+
.ie6_input_disabled {
|
|
234
|
+
background: #eeeeee;
|
|
235
|
+
}
|
|
273
236
|
}
|
metadata
CHANGED
|
@@ -6,8 +6,8 @@ version: !ruby/object:Gem::Version
|
|
|
6
6
|
- 0
|
|
7
7
|
- 1
|
|
8
8
|
- 3
|
|
9
|
-
-
|
|
10
|
-
version: 0.1.3.
|
|
9
|
+
- 3
|
|
10
|
+
version: 0.1.3.3
|
|
11
11
|
platform: ruby
|
|
12
12
|
authors:
|
|
13
13
|
- Falaleev Maxim
|
|
@@ -15,7 +15,7 @@ autorequire:
|
|
|
15
15
|
bindir: bin
|
|
16
16
|
cert_chain: []
|
|
17
17
|
|
|
18
|
-
date: 2013-03-
|
|
18
|
+
date: 2013-03-17 00:00:00 +04:00
|
|
19
19
|
default_executable:
|
|
20
20
|
dependencies:
|
|
21
21
|
- !ruby/object:Gem::Dependency
|
|
@@ -50,7 +50,6 @@ files:
|
|
|
50
50
|
- stylesheets/mindy/css3/_buttons_refactor.scss
|
|
51
51
|
- stylesheets/mindy/css3/_font-family.scss
|
|
52
52
|
- stylesheets/mindy/css3/_formalize.scss
|
|
53
|
-
- stylesheets/mindy/css3/_multi_line_buttons.sass
|
|
54
53
|
- stylesheets/mindy/css3/_shadow.scss
|
|
55
54
|
- stylesheets/mindy/grid/_grid.scss
|
|
56
55
|
- stylesheets/mindy/grid/_respond.scss
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
=multi-line-button($base-color)
|
|
2
|
-
+background-clip('padding-box')
|
|
3
|
-
border-width: 1px
|
|
4
|
-
+border-radius(6px)
|
|
5
|
-
border-style: solid
|
|
6
|
-
color: white
|
|
7
|
-
display: block
|
|
8
|
-
margin: 0.2em auto
|
|
9
|
-
padding: 12px 15px
|
|
10
|
-
text-align: center
|
|
11
|
-
text-decoration: none
|
|
12
|
-
.title
|
|
13
|
-
font-size: 24px
|
|
14
|
-
font-weight: bold
|
|
15
|
-
display: block
|
|
16
|
-
+opacity(0.9)
|
|
17
|
-
.subtitle
|
|
18
|
-
font-size: 14px
|
|
19
|
-
display: block
|
|
20
|
-
margin-top: 4px
|
|
21
|
-
+opacity(0.7)
|
|
22
|
-
&:hover
|
|
23
|
-
.title
|
|
24
|
-
+opacity(1)
|
|
25
|
-
.subtitle
|
|
26
|
-
+opacity(0.8)
|
|
27
|
-
&:active
|
|
28
|
-
padding: 13px 15px 11px
|
|
29
|
-
@if $base-color != none
|
|
30
|
-
+color-multi-line-button($base-color)
|
|
31
|
-
|
|
32
|
-
=color-multi-line-button($base-color)
|
|
33
|
-
$dark-color: darken($base-color, 10%)
|
|
34
|
-
$light-color: lighten($base-color, 10%)
|
|
35
|
-
$border-color: darken($base-color, 20%)
|
|
36
|
-
$light-border-color: lighten($base-color, 0%)
|
|
37
|
-
$highlight-color: transparentize(desaturate(lighten($base-color, 40%), 50%), 0.5)
|
|
38
|
-
$shadow-color: darken($base-color, 15%)
|
|
39
|
-
$text-shadow-color: darken($base-color, 15%)
|
|
40
|
-
background-color: $base-color
|
|
41
|
-
+linear-gradient(color-stops($light-color, $base-color, $dark-color))
|
|
42
|
-
border-color: $border-color
|
|
43
|
-
border-left-color: $light-border-color
|
|
44
|
-
border-top-color: $light-border-color
|
|
45
|
-
+box-shadow($highlight-color, 1px, 1px, 0, 0, inset)
|
|
46
|
-
color: white
|
|
47
|
-
+text-shadow($text-shadow-color, 0, 1px, 2px)
|
|
48
|
-
&:hover, &:focus
|
|
49
|
-
+linear-gradient(color-stops(lighten($light-color, 5%), lighten($base-color, 5%), $dark-color))
|
|
50
|
-
&:active, &.depressed
|
|
51
|
-
+linear-gradient(color-stops(desaturate(lighten($dark-color, 5%),10%), desaturate($base-color, 10%)))
|
|
52
|
-
+box-shadow(none)
|
|
53
|
-
border-color: $border-color
|